initial commit

src/material/Tab.tsx

@@ -0,0 +1,80 @@
+import {
+  Component,
+  createEffect,
+  splitProps,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { css } from "solid-styled";
+import { useTabListContext } from "./Tabs";
+
+const Tab: ParentComponent<
+  {
+    focus?: boolean;
+    large?: boolean;
+  } & JSX.ButtonHTMLAttributes<HTMLButtonElement>
+> = (props) => {
+  const [managed, rest] = splitProps(props, [
+    "focus",
+    "large",
+    "type",
+    "role",
+    "ref",
+  ]);
+  let self: HTMLButtonElement;
+  const {
+    focusOn: [, setFocusOn],
+  } = useTabListContext();
+
+  createEffect<boolean | undefined>((lastStatus) => {
+    if (managed.focus && !lastStatus) {
+      setFocusOn((x) => [...x, self]);
+    }
+    if (!managed.focus && lastStatus) {
+      setFocusOn((x) => x.filter((e) => e !== self));
+    }
+    return managed.focus;
+  });
+  css`
+    .tab {
+      cursor: pointer;
+      background: none;
+      border: none;
+      min-width: ${managed.large ? "160px" : "72px"};
+      height: 48px;
+      max-width: min(calc(100% - 56px), 264px);
+      padding: 10px 24px;
+      font-size: 0.8135rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      transition: color 120ms var(--tutu-anim-curve-std);
+    }
+
+    :global(.MuiToolbar-root) .tab {
+      color: rgba(255, 255, 255, 0.7);
+
+      &:hover,
+      &:focus,
+      &.focus,
+      &:global(.tablist-focus) {
+        color: white;
+      }
+    }
+  `;
+  return (
+    <button
+      ref={(x) => {
+        self = x;
+        (managed.ref as (e: HTMLButtonElement) => void)?.(x);
+      }}
+      type={managed.type ?? "button"}
+      classList={{ tab: true, focus: managed.focus }}
+      role={managed.role ?? "tab"}
+      {...rest}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+export default Tab;