@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/src/sounds.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { IconPlay } from "@central-icons-react/round-filled-radius-2-stroke-2/IconPlay"
 import {
   createContext,
   useCallback,
@@ -28,7 +29,7 @@ const SOUND_PRESETS: SoundPreset[] = [
   {
     id: "click",
     label: "Click",
-    description: "Light confirmation for toggles and secondary actions.",
+    description: "Confirmation for toggles and secondary actions.",
     play: (ctx, when, destination) => {
       const osc = ctx.createOscillator()
       const gain = ctx.createGain()
@@ -219,14 +220,15 @@ export const Sound = ({
     >
       <Button
         type="button"
-        variant="outline"
-        size="sm"
+        variant="secondary"
+        size="md"
         iconOnly
         rounded
+        className="shrink-0 hover:scale-[1.04] active:scale-95"
         aria-label={`Play ${resolvedLabel}`}
         onClick={handlePlay}
       >
-        <PlayIcon />
+        <IconPlay size={12} mode="raw" className="size-3" aria-hidden />
       </Button>
       <div className="min-w-0 flex-1">
         <p className="text-sm-strong text-fg-primary">{resolvedLabel}</p>
@@ -262,9 +264,3 @@ export const SoundToggle = ({
     </Button>
   )
 }
-
-const PlayIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path d="M9 7.5v9l8-4.5-8-4.5Z" fill="currentColor" />
-  </svg>
-)

package/src/spinner.tsx

@@ -2,44 +2,117 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 import { cn } from "./lib/cn";
 
+const SPINNER_SPOKES = Array.from({ length: 12 }, (_, index) => index);
+
 const spinnerVariants = cva(
-  "animate-spin text-current motion-reduce:animate-none",
-  {  variants: {
-    size: {
-      sm: "size-3.5",
-      md: "size-4",
-      lg: "size-5",
+  "text-current motion-reduce:animate-none",
+  {
+    variants: {
+      variant: {
+        ring: "animate-spin",
+        arc: "animate-spin",
+        dots: "",
+        spokes: "",
+      },
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "ring",
+      size: "md",
     },
   },
-  defaultVariants: {
-    size: "md",
-  },
-});
+);
 
 export type SpinnerProps = ComponentProps<"svg"> &
   VariantProps<typeof spinnerVariants>;
 
-export const Spinner = ({ className, size, ...props }: SpinnerProps) => (
-  <svg
-    role="status"
-    aria-label="Loading"
-    className={cn(spinnerVariants({ size }), className)}
-    viewBox="0 0 24 24"
-    fill="none"
-    {...props}
-  >
-    <path
-      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
-      stroke="currentColor"
-      strokeOpacity="0.3"
-      strokeWidth="2"
-    />
-    <path
-      d="M21 12C21 16.9706 16.9706 21 12 21"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-  </svg>
-);
+export const Spinner = ({
+  className,
+  variant,
+  size,
+  ...props
+}: SpinnerProps) => {
+  const resolvedVariant = variant ?? "ring";
+
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        spinnerVariants({ variant: resolvedVariant, size }),
+        className,
+      )}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      {resolvedVariant === "spokes" ? (
+        <g stroke="currentColor" strokeWidth="2.25" strokeLinecap="round">
+          {SPINNER_SPOKES.map((spoke) => (
+            <line
+              key={spoke}
+              x1="12"
+              y1="3"
+              x2="12"
+              y2="6.25"
+              transform={`rotate(${spoke * 30} 12 12)`}
+              className="animate-[spinner-spoke_1.2s_linear_infinite] motion-reduce:animate-none motion-reduce:opacity-40"
+              style={{ animationDelay: `${spoke * -0.1}s` }}
+            />
+          ))}
+        </g>
+      ) : resolvedVariant === "dots" ? (
+        <g fill="currentColor">
+          <circle
+            cx="5"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] [animation-delay:-0.32s] motion-reduce:animate-none"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] [animation-delay:-0.16s] motion-reduce:animate-none"
+          />
+          <circle
+            cx="19"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] motion-reduce:animate-none"
+          />
+        </g>
+      ) : resolvedVariant === "arc" ? (
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray="42 15"
+        />
+      ) : (
+        <>
+          <path
+            d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+            stroke="currentColor"
+            strokeOpacity="0.3"
+            strokeWidth="2"
+          />
+          <path
+            d="M21 12C21 16.9706 16.9706 21 12 21"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+        </>
+      )}
+    </svg>
+  );
+};
 
 export { spinnerVariants };

package/src/switch.tsx

@@ -3,13 +3,16 @@
 import { Switch as BaseSwitch } from "@base-ui/react/switch"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 
 export type SwitchProps = ComponentProps<typeof BaseSwitch.Root>
 
 export const Switch = ({ className, ...props }: SwitchProps) => (
   <BaseSwitch.Root
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      focusRingBorder,
+      focusRing,
       className,
     )}
     {...props}

package/src/table.tsx

@@ -1,8 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 import { cn } from "./lib/cn";
 
-export type TableProps = ComponentProps<"table">;
-export type TableHeaderProps = ComponentProps<"thead">;
+const tableVariants = cva(
+  "group/table w-full text-sm text-fg-primary",
+  {
+    variants: {
+      variant: {
+        default: "border-collapse",
+        grid: [
+          "border-separate border-spacing-0",
+          "[&_tr]:border-b-0",
+          "[&_tr>*]:border-r [&_tr>*]:border-b [&_tr>*]:border-border-primary",
+          "[&_tr>*:last-child]:border-r-0",
+          "[&_tbody_tr:last-child>*]:border-b-0 [&_tfoot_tr:last-child>*]:border-b-0",
+        ],
+      },
+      density: {
+        default: "",
+        compact: "[&_th]:h-8 [&_th]:px-3 [&_td]:px-3 [&_td]:py-2",
+      },
+      striped: {
+        true: "[&_tbody_tr:nth-child(even)]:bg-background-secondary",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      density: "default",
+      striped: false,
+    },
+  },
+);
+
+const tableHeaderVariants = cva(
+  "bg-background-secondary [&_tr]:border-b [&_tr]:border-border-primary",
+  {
+    variants: {
+      sticky: {
+        true: "[&_th]:sticky [&_th]:top-0 [&_th]:z-10 [&_th]:bg-background-secondary [&_th]:py-2.5",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      sticky: false,
+    },
+  },
+);
+
+export type TableProps = ComponentProps<"table"> &
+  VariantProps<typeof tableVariants> & {
+    /** Classes for the bordered horizontal-scroll container. */
+    containerClassName?: string;
+  };
+export type TableHeaderProps = ComponentProps<"thead"> &
+  VariantProps<typeof tableHeaderVariants>;
 export type TableBodyProps = ComponentProps<"tbody">;
 export type TableFooterProps = ComponentProps<"tfoot">;
 export type TableRowProps = ComponentProps<"tr">;
@@ -10,24 +62,37 @@ export type TableHeadProps = ComponentProps<"th">;
 export type TableCellProps = ComponentProps<"td">;
 export type TableCaptionProps = ComponentProps<"caption">;
 
-export const Table = ({ className, ...props }: TableProps) => (
-  <div className="w-full overflow-x-auto rounded-lg border border-border-primary bg-surface">
+export const Table = ({
+  className,
+  containerClassName,
+  variant,
+  density,
+  striped,
+  ...props
+}: TableProps) => (
+  <div
+    className={cn(
+      "w-full overflow-auto rounded-lg border border-border-primary bg-surface",
+      containerClassName,
+    )}
+  >
     <table
-      className={cn(
-        "w-full border-collapse text-sm text-fg-primary",
-        className,
-      )}
+      data-variant={variant ?? "default"}
+      data-density={density ?? "default"}
+      data-striped={striped || undefined}
+      className={cn(tableVariants({ variant, density, striped }), className)}
       {...props}
     />
   </div>
 );
 
-export const TableHeader = ({ className, ...props }: TableHeaderProps) => (
+export const TableHeader = ({
+  className,
+  sticky,
+  ...props
+}: TableHeaderProps) => (
   <thead
-    className={cn(
-      "bg-background-secondary [&_tr]:border-b [&_tr]:border-border-primary",
-      className,
-    )}
+    className={cn(tableHeaderVariants({ sticky }), className)}
     {...props}
   />
 );
@@ -39,7 +104,7 @@ export const TableBody = ({ className, ...props }: TableBodyProps) => (
 export const TableFooter = ({ className, ...props }: TableFooterProps) => (
   <tfoot
     className={cn(
-      "border-t border-border-primary bg-background-secondary font-medium",
+      "border-t border-border-primary bg-background-secondary font-medium [&_tr]:hover:bg-transparent",
       className,
     )}
     {...props}
@@ -49,7 +114,7 @@ export const TableFooter = ({ className, ...props }: TableFooterProps) => (
 export const TableRow = ({ className, ...props }: TableRowProps) => (
   <tr
     className={cn(
-      "border-b border-border-primary hover:bg-background-secondary",
+      "border-b border-border-primary transition-colors duration-[var(--duration-sm)] ease-enter hover:bg-background-secondary aria-selected:bg-background-tertiary data-[selected]:bg-background-tertiary data-[state=selected]:bg-background-tertiary",
       className,
     )}
     {...props}
@@ -79,3 +144,5 @@ export const TableCaption = ({ className, ...props }: TableCaptionProps) => (
     {...props}
   />
 );
+
+export { tableHeaderVariants, tableVariants };

package/src/tabs.tsx

@@ -1,62 +1,213 @@
 "use client"
 
 import { Tabs as BaseTabs } from "@base-ui/react/tabs"
-import type { ComponentProps } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { createContext, type ComponentProps, useContext } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
-export type TabsProps = ComponentProps<typeof BaseTabs.Root>
-export type TabsListProps = ComponentProps<typeof BaseTabs.List>
-export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab>
-export type TabsIndicatorProps = ComponentProps<typeof BaseTabs.Indicator>
-export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>
+const tabsListVariants = cva("relative flex items-center", {
+  variants: {
+    variant: {
+      underline:
+        "w-full gap-0.5 border-b border-border-primary data-[orientation=vertical]:w-40 data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-0 data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0",
+      segmented:
+        "w-fit rounded-lg bg-background-tertiary p-0.5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+      pill: "w-fit gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+    },
+  },
+  defaultVariants: {
+    variant: "underline",
+  },
+})
 
-export const Tabs = ({ className, ...props }: TabsProps) => (
-  <BaseTabs.Root className={cn("flex w-full flex-col", className)} {...props} />
+const tabsTabVariants = cva(
+  cn(
+    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap text-fg-tertiary select-none hover:text-fg-primary data-active:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    focusRingBorder,
+    focusRing,
+  ),
+  {
+    variants: {
+      variant: {
+        underline:
+          "data-[orientation=horizontal]:pb-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start",
+        segmented: "rounded-md",
+        pill: "rounded-full bg-background-tertiary data-active:bg-transparent",
+      },
+      size: {
+        sm: "text-xs [&_svg]:size-3.5",
+        md: "text-sm [&_svg]:size-4",
+        lg: "text-md [&_svg]:size-4",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "underline",
+        size: "sm",
+        class: "h-8 px-2.5 data-[orientation=horizontal]:h-9",
+      },
+      {
+        variant: "underline",
+        size: "md",
+        class: "h-10 px-3 data-[orientation=horizontal]:h-11",
+      },
+      {
+        variant: "underline",
+        size: "lg",
+        class: "h-12 px-3.5 data-[orientation=horizontal]:h-13",
+      },
+      { variant: "segmented", size: "sm", class: "h-7 px-2.5" },
+      { variant: "segmented", size: "md", class: "h-8 px-3" },
+      { variant: "segmented", size: "lg", class: "h-9 px-3.5" },
+      { variant: "pill", size: "sm", class: "h-7 px-2.5" },
+      { variant: "pill", size: "md", class: "h-8 px-3" },
+      { variant: "pill", size: "lg", class: "h-9 px-3.5" },
+    ],
+    defaultVariants: {
+      variant: "underline",
+      size: "md",
+    },
+  },
 )
 
-export const TabsList = ({ className, ...props }: TabsListProps) => (
-  <BaseTabs.List
-    className={cn(
-      "relative flex gap-0.5 border-b border-border-primary",
-      className,
-    )}
-    {...props}
-  />
-)
+const tabsIndicatorVariants = cva("absolute z-0", {
+  variants: {
+    variant: {
+      underline:
+        "bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-brand-primary data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:left-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+      segmented:
+        "inset-y-0.5 left-0 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-md bg-surface-raised shadow-hairline data-[orientation=vertical]:inset-x-0.5 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-auto data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+      pill: "inset-y-0 left-0 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-surface-raised shadow-hairline data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-auto data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+    },
+  },
+  defaultVariants: {
+    variant: "underline",
+  },
+})
 
-export const TabsTab = ({ className, ...props }: TabsTabProps) => (
-  <BaseTabs.Tab
-    className={cn(
-      "relative cursor-pointer px-3 py-2.5 text-sm text-fg-tertiary outline-none select-none",
-      motion.colors,
-      "hover:text-fg-primary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-active:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
+export type TabsVariant = NonNullable<
+  VariantProps<typeof tabsListVariants>["variant"]
+>
+export type TabsSize = NonNullable<
+  VariantProps<typeof tabsTabVariants>["size"]
+>
+
+type TabsStyleContextValue = {
+  variant: TabsVariant
+  size: TabsSize
+}
+
+const TabsStyleContext = createContext<TabsStyleContextValue>({
+  variant: "underline",
+  size: "md",
+})
+
+export type TabsProps = ComponentProps<typeof BaseTabs.Root> & {
+  /** Visual treatment shared by the list, tabs, and indicator. */
+  variant?: TabsVariant
+  /** Height and typography shared by every tab. */
+  size?: TabsSize
+}
+export type TabsListProps = ComponentProps<typeof BaseTabs.List> &
+  VariantProps<typeof tabsListVariants>
+export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab> &
+  VariantProps<typeof tabsTabVariants>
+export type TabsIndicatorProps = ComponentProps<typeof BaseTabs.Indicator> &
+  VariantProps<typeof tabsIndicatorVariants>
+export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>
+
+export const Tabs = ({
+  className,
+  variant = "underline",
+  size = "md",
+  ...props
+}: TabsProps) => (
+  <TabsStyleContext.Provider value={{ variant, size }}>
+    <BaseTabs.Root
+      data-slot="tabs"
+      className={cn(
+        "flex w-full flex-col data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-6",
+        className,
+      )}
+      {...props}
+    />
+  </TabsStyleContext.Provider>
 )
 
+export const TabsList = ({
+  className,
+  variant,
+  ...props
+}: TabsListProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.List
+      data-slot="tabs-list"
+      className={cn(
+        tabsListVariants({ variant: variant ?? styles.variant }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TabsTab = ({
+  className,
+  variant,
+  size,
+  ...props
+}: TabsTabProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.Tab
+      data-slot="tabs-tab"
+      className={cn(
+        tabsTabVariants({
+          variant: variant ?? styles.variant,
+          size: size ?? styles.size,
+        }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
 export const TabsIndicator = ({
   className,
+  variant,
   ...props
-}: TabsIndicatorProps) => (
-  <BaseTabs.Indicator
-    className={cn(
-      "absolute bottom-0 left-0 z-10 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-brand-primary",
-      motion.tabsIndicator,
-      className,
-    )}
-    {...props}
-  />
-)
+}: TabsIndicatorProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.Indicator
+      data-slot="tabs-indicator"
+      className={cn(
+        tabsIndicatorVariants({ variant: variant ?? styles.variant }),
+        motion.tabsIndicator,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 export const TabsPanel = ({ className, ...props }: TabsPanelProps) => (
   <BaseTabs.Panel
+    data-slot="tabs-panel"
     className={cn(
-      "pt-4 text-sm leading-relaxed text-fg-secondary outline-none focus-visible:outline-none",
+      "pt-4 text-sm leading-relaxed text-fg-secondary outline-none focus-visible:outline-none data-[orientation=vertical]:pt-0",
       className,
     )}
     {...props}
   />
 )
+
+export { tabsIndicatorVariants, tabsListVariants, tabsTabVariants }