@instruments/materia-ui 0.1.0

package/dist/components/swatch-group/swatch-group-item.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { focusRing } from "../../tokens/focus-ring.js";
+import { swatchSizeMap } from "../../tokens/swatch.js";
+import { cn } from "../../utils/cn.js";
+import { Swatch } from "../swatch.js";
+import { useSwatchGroupContext } from "../swatch-group/swatch-group-context.js";
+/**
+ * Individual swatch item within a SwatchGroup.
+ * Composes the visual `Swatch` primitive with Base UI Radio.Root
+ * for accessible single-select behaviour.
+ *
+ * @example
+ * ```tsx
+ * <SwatchGroup defaultValue="c1" icon={Check}>
+ *   <SwatchGroupItem color="#ff0000" value="c1" aria-label="Red" />
+ *   <SwatchGroupItem color="#00ff00" value="c2" aria-label="Green" />
+ * </SwatchGroup>
+ * ```
+ */
+export const SwatchGroupItem = ({ className, color, children, size: sizeOverride, ...props }) => {
+    const { size, icon } = useSwatchGroupContext();
+    const resolvedSize = sizeOverride ?? size;
+    return (_jsx(RadioPrimitive.Root, { nativeButton: true, render: (buttonProps) => _jsx("button", { type: "button", ...buttonProps }), className: cn(
+        // Base layout - same dimensions as inner Swatch
+        "relative inline-flex shrink-0 items-center justify-center rounded-full", swatchSizeMap[resolvedSize], 
+        // Focus styles
+        focusRing(), 
+        // Interaction states
+        "transition-shadow hover:shadow-xs disabled:cursor-not-allowed disabled:opacity-50", 
+        // Selection ring via pseudo-elements (only when not using icon indicator)
+        !icon && [
+            // Inner ring (creates gap between colour and outer ring)
+            "before:pointer-events-none before:absolute before:inset-[-2px] before:rounded-full",
+            "before:border-background before:border",
+            "before:duration-quick before:opacity-0 before:transition-opacity",
+            "data-checked:before:opacity-100",
+            // Outer ring (visible selection indicator)
+            "after:pointer-events-none after:absolute after:inset-[-5px] after:rounded-full",
+            "after:border after:border-gray-400",
+            "after:duration-quick after:opacity-0 after:transition-opacity",
+            "data-checked:after:opacity-100",
+        ], 
+        // Hide swatch icon when unchecked (Base UI manages data-checked)
+        icon && "data-unchecked:[&_[data-slot=swatch-icon]]:hidden", className), "data-component": "swatch-group-item", "data-slot": "swatch-group-item", ...props, children: _jsx(Swatch, { ...(color === undefined ? {} : { color }), ...(icon === undefined ? {} : { icon }), selected: !!icon, showRing: false, size: resolvedSize, children: children }) }));
+};

package/dist/components/swatch-group/swatch-group-root.d.ts

@@ -0,0 +1,23 @@
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+import type { SwatchSize } from "../../tokens/swatch.js";
+type SwatchGroupProps = RadioGroupPrimitive.Props<string> & {
+    /** Swatch size applied to every item unless overridden per-item. @default "base" */
+    size?: SwatchSize;
+    /** Icon to display on selected swatch (e.g., Check). When set, replaces the selection ring. */
+    icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+/**
+ * Row of selectable circular color/image swatches with single-select behaviour,
+ * built on Base UI RadioGroup. Selection is controlled via `value` +
+ * `onValueChange`, or uncontrolled via `defaultValue`. When `icon` is set the
+ * selected swatch shows that icon instead of the default selection ring.
+ *
+ * @bestPractice Drive selection with `value`+`onValueChange` (or `defaultValue`), not per-swatch `onClick` - it's a Base UI `RadioGroup`, so it already handles roving focus and arrow-key selection.
+ * @bestPractice Choose `SwatchGroup` when you want radio semantics + keyboard a11y; reach for `SwatchSelector` only for a lighter controlled row without the RadioGroup roles.
+ * @bestPractice Set `icon` (e.g. `Check`) on the group to swap the selection ring for a glyph on the chosen swatch, rather than styling items individually.
+ * @category color
+ */
+export declare const SwatchGroup: ({ className, size, icon, ...props }: SwatchGroupProps) => React.JSX.Element;
+export {};

package/dist/components/swatch-group/swatch-group-root.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useMemo } from "react";
+import { SwatchGroupContext } from "../swatch-group/swatch-group-context.js";
+/**
+ * Row of selectable circular color/image swatches with single-select behaviour,
+ * built on Base UI RadioGroup. Selection is controlled via `value` +
+ * `onValueChange`, or uncontrolled via `defaultValue`. When `icon` is set the
+ * selected swatch shows that icon instead of the default selection ring.
+ *
+ * @bestPractice Drive selection with `value`+`onValueChange` (or `defaultValue`), not per-swatch `onClick` - it's a Base UI `RadioGroup`, so it already handles roving focus and arrow-key selection.
+ * @bestPractice Choose `SwatchGroup` when you want radio semantics + keyboard a11y; reach for `SwatchSelector` only for a lighter controlled row without the RadioGroup roles.
+ * @bestPractice Set `icon` (e.g. `Check`) on the group to swap the selection ring for a glyph on the chosen swatch, rather than styling items individually.
+ * @category color
+ */
+export const SwatchGroup = ({ className, size = "base", icon, ...props }) => {
+    const contextValue = useMemo(() => ({ icon, size }), [icon, size]);
+    return (_jsx(SwatchGroupContext.Provider, { value: contextValue, children: _jsx(RadioGroupPrimitive, { className: cn("flex items-center gap-3", className), "data-component": "swatch-group", "data-slot": "swatch-group", ...props }) }));
+};

package/dist/components/swatch-group.d.ts

@@ -0,0 +1,2 @@
+export { SwatchGroupItem } from "./swatch-group/swatch-group-item.js";
+export { SwatchGroup } from "./swatch-group/swatch-group-root.js";

package/dist/components/swatch-group.js

@@ -0,0 +1,2 @@
+export { SwatchGroupItem } from "./swatch-group/swatch-group-item.js";
+export { SwatchGroup } from "./swatch-group/swatch-group-root.js";

package/dist/components/swatch-selector/swatch-selector-context.d.ts

@@ -0,0 +1,18 @@
+import type { SwatchSize } from "../../tokens/swatch.js";
+export interface SwatchSelectorContextValue {
+    /** Value change handler */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Swatch size */
+    size: SwatchSize;
+    /** Current selected value */
+    value?: string | undefined;
+}
+/**
+ * Context for SwatchSelector to pass value and size to children.
+ */
+export declare const SwatchSelectorContext: import("react").Context<SwatchSelectorContextValue | null>;
+/**
+ * Hook to access SwatchSelector context.
+ * @throws {Error} If used outside of SwatchSelector
+ */
+export declare const useSwatchSelector: () => SwatchSelectorContextValue;

package/dist/components/swatch-selector/swatch-selector-context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, use } from "react";
+/**
+ * Context for SwatchSelector to pass value and size to children.
+ */
+export const SwatchSelectorContext = createContext(null);
+/**
+ * Hook to access SwatchSelector context.
+ * @throws {Error} If used outside of SwatchSelector
+ */
+export const useSwatchSelector = () => {
+    const context = use(SwatchSelectorContext);
+    if (!context) {
+        throw new Error("useSwatchSelector must be used within a SwatchSelector");
+    }
+    return context;
+};

package/dist/components/swatch-selector/swatch-selector-item.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps } from "react";
+import type { SwatchSize } from "../../tokens/swatch.js";
+type SwatchSelectorItemProps = Omit<ComponentProps<"button">, "children" | "defaultValue" | "value"> & {
+    /** Unique value for this swatch */
+    value: string;
+    /**
+     * CSS colour value (hex, rgb, hsl, etc.).
+     * If provided along with children, children render on top.
+     */
+    color?: string;
+    /**
+     * Accessible label for screen readers.
+     */
+    "aria-label"?: string;
+    /**
+     * Custom content rendered inside the swatch (e.g., images).
+     */
+    children?: React.ReactNode;
+    /**
+     * Override size for this specific swatch.
+     */
+    size?: SwatchSize;
+    /** Whether this option is unavailable (out of stock) */
+    unavailable?: boolean;
+};
+/**
+ * Individual swatch item within a SwatchSelector: a Base UI Toggle in the
+ * row's toggle group, with a tooltip for unavailable items.
+ *
+ * @example
+ * ```tsx
+ * <SwatchSelector value={selected} onValueChange={setSelected}>
+ *   <SwatchSelectorItem color="#ff0000" value="c1" aria-label="Red" />
+ *   <SwatchSelectorItem color="#00ff00" value="c2" aria-label="Green" />
+ * </SwatchSelector>
+ * ```
+ */
+export declare const SwatchSelectorItem: ({ value, color, children, size: sizeOverride, unavailable, className, ...props }: SwatchSelectorItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/swatch-selector/swatch-selector-item.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@instruments/materia-ui/components/tooltip";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { focusRing } from "../../tokens/focus-ring.js";
+import { Swatch } from "../swatch.js";
+import { useSwatchSelector } from "../swatch-selector/swatch-selector-context.js";
+/**
+ * Individual swatch item within a SwatchSelector: a Base UI Toggle in the
+ * row's toggle group, with a tooltip for unavailable items.
+ *
+ * @example
+ * ```tsx
+ * <SwatchSelector value={selected} onValueChange={setSelected}>
+ *   <SwatchSelectorItem color="#ff0000" value="c1" aria-label="Red" />
+ *   <SwatchSelectorItem color="#00ff00" value="c2" aria-label="Green" />
+ * </SwatchSelector>
+ * ```
+ */
+export const SwatchSelectorItem = ({ value, color, children, size: sizeOverride, unavailable = false, className, ...props }) => {
+    const { value: selectedValue, size } = useSwatchSelector();
+    const resolvedSize = sizeOverride ?? size;
+    const isSelected = selectedValue === value;
+    const button = (_jsx(TogglePrimitive, { "aria-label": props["aria-label"] ?? `Select ${value}`, className: cn(
+        // Focus styles only - visual handled by Swatch
+        "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full", focusRing(), "disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "swatch-selector-item", "data-slot": "swatch-selector-item", onClick: (event) => {
+            event.stopPropagation();
+        }, value: value, ...props, children: _jsx(Swatch, { ...(color === undefined ? {} : { color }), selected: isSelected, size: resolvedSize, unavailable: unavailable, children: children }) }));
+    if (unavailable) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: button }), _jsx(TooltipContent, { children: "Out of stock" })] }));
+    }
+    return button;
+};

package/dist/components/swatch-selector/swatch-selector-more.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export type SwatchSelectorMoreProps = ComponentProps<"div"> & {
+    /** Number of additional swatches not shown; rendered as `+{count}`. */
+    count: number;
+};
+/**
+ * Overflow indicator (`+N`) shown after a truncated row of swatches.
+ */
+export declare const SwatchSelectorMore: ({ count, className, ...props }: SwatchSelectorMoreProps) => import("react").JSX.Element;

package/dist/components/swatch-selector/swatch-selector-more.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Overflow indicator (`+N`) shown after a truncated row of swatches.
+ */
+export const SwatchSelectorMore = ({ count, className, ...props }) => (_jsxs("div", { className: cn("text-foreground text-caption font-medium", className), "data-component": "swatch-more", ...props, children: ["+", count] }));

package/dist/components/swatch-selector/swatch-selector-root.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import type { SwatchSize } from "../../tokens/swatch.js";
+export type SwatchSelectorProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
+    /** Value of the currently selected item (controlled single selection). */
+    value?: string;
+    /** Fired with the newly selected item's `value` when a swatch is clicked. */
+    onValueChange?: (value: string) => void;
+    /** Swatch size, inherited by items via context unless they override it. */
+    size?: SwatchSize;
+};
+/**
+ * Row of selectable color/image swatches with controlled single selection,
+ * built on Base UI ToggleGroup: the row is one tab stop and the arrow keys move
+ * between swatches.
+ *
+ * Shares the selected `value`, `onValueChange`, and `size` with its
+ * {@link SwatchSelectorItem} children through context.
+ *
+ * @bestPractice Pair `SwatchSelector` with `SwatchSelectorItem` children - it shares `value`/`onValueChange`/`size` through context, so items need no individual wiring.
+ * @bestPractice Prefer `SwatchGroup` when the row is a single-choice form control needing radio roles and form submission; `SwatchSelector` is a row of pressed-state toggle buttons.
+ * @bestPractice Pressing the selected swatch again keeps it selected and does not call `onValueChange`.
+ * @bestPractice Selection is controlled - pass `value` and update it from `onValueChange`; there is no internal fallback state to fall back on.
+ * @category color
+ */
+export declare const SwatchSelector: ({ value, onValueChange, size, className, children, ...props }: SwatchSelectorProps) => import("react").JSX.Element;

package/dist/components/swatch-selector/swatch-selector-root.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useMemo } from "react";
+import { SwatchSelectorContext } from "../swatch-selector/swatch-selector-context.js";
+/**
+ * Row of selectable color/image swatches with controlled single selection,
+ * built on Base UI ToggleGroup: the row is one tab stop and the arrow keys move
+ * between swatches.
+ *
+ * Shares the selected `value`, `onValueChange`, and `size` with its
+ * {@link SwatchSelectorItem} children through context.
+ *
+ * @bestPractice Pair `SwatchSelector` with `SwatchSelectorItem` children - it shares `value`/`onValueChange`/`size` through context, so items need no individual wiring.
+ * @bestPractice Prefer `SwatchGroup` when the row is a single-choice form control needing radio roles and form submission; `SwatchSelector` is a row of pressed-state toggle buttons.
+ * @bestPractice Pressing the selected swatch again keeps it selected and does not call `onValueChange`.
+ * @bestPractice Selection is controlled - pass `value` and update it from `onValueChange`; there is no internal fallback state to fall back on.
+ * @category color
+ */
+export const SwatchSelector = ({ value, onValueChange, size = "base", className, children, ...props }) => {
+    const contextValue = useMemo(() => ({ onValueChange, size, value }), [onValueChange, size, value]);
+    return (_jsx(SwatchSelectorContext.Provider, { value: contextValue, children: _jsx(ToggleGroupPrimitive, { className: cn("flex items-center gap-2", className), "data-component": "swatch-selector", "data-slot": "swatch-selector", onValueChange: (next) => {
+                const [picked] = next;
+                if (picked !== undefined) {
+                    onValueChange?.(picked);
+                }
+            }, value: value === undefined ? [] : [value], ...props, children: children }) }));
+};

package/dist/components/swatch-selector.d.ts

@@ -0,0 +1,3 @@
+export { SwatchSelectorItem as Swatch, SwatchSelectorItem, } from "./swatch-selector/swatch-selector-item.js";
+export { SwatchSelectorMore as SwatchMore } from "./swatch-selector/swatch-selector-more.js";
+export { SwatchSelector } from "./swatch-selector/swatch-selector-root.js";

package/dist/components/swatch-selector.js

@@ -0,0 +1,3 @@
+export { SwatchSelectorItem as Swatch, SwatchSelectorItem, } from "./swatch-selector/swatch-selector-item.js";
+export { SwatchSelectorMore as SwatchMore } from "./swatch-selector/swatch-selector-more.js";
+export { SwatchSelector } from "./swatch-selector/swatch-selector-root.js";

package/dist/components/swatch.d.ts

@@ -0,0 +1,3 @@
+export { StackedSwatchFan, type StackedSwatchFanItem, type StackedSwatchFanProps, } from "./swatch/stacked-swatch-fan.js";
+export { computeSwatchFanTransforms, getStackedSwatchFanFrame, getStackedSwatchFanTarget, } from "./swatch/stacked-swatch-fan.motion.js";
+export { type ChipSwatchProps, Swatch, type SwatchColorStop, SwatchFrameRing, type SwatchProps, type TileSwatchProps, } from "./swatch/swatch-root.js";

package/dist/components/swatch.js

@@ -0,0 +1,3 @@
+export { StackedSwatchFan, } from "./swatch/stacked-swatch-fan.js";
+export { computeSwatchFanTransforms, getStackedSwatchFanFrame, getStackedSwatchFanTarget, } from "./swatch/stacked-swatch-fan.motion.js";
+export { Swatch, SwatchFrameRing, } from "./swatch/swatch-root.js";

package/dist/components/switch/switch-root.d.ts

@@ -0,0 +1,48 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import type { ComponentSize, ResponsiveSize } from "@instruments/materia-ui/tokens/size";
+import type * as React from "react";
+/** Default Switch size. */
+export declare const DEFAULT_SWITCH_SIZE: ComponentSize;
+/**
+ * Per-size track (root) class map. Applied via `getResponsiveSizeClasses` so
+ * `size` can be a single token or a per-breakpoint object.
+ */
+export declare const SWITCH_TRACK_CLASSES: Record<ComponentSize, string>;
+/**
+ * Per-size thumb class map (thumb size + checked translate).
+ * All three utilities apply to the thumb element, so they are grouped into one
+ * string per size and resolved responsively together.
+ */
+export declare const SWITCH_THUMB_CLASSES: Record<ComponentSize, string>;
+type SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, "size"> & {
+    /**
+     * Switch size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. @default "lg"
+     */
+    size?: ResponsiveSize;
+};
+/**
+ * Renders a toggle switch for boolean on/off states.
+ *
+ * @param props - The switch props
+ * @param props.size - Switch size. Options: "2xs", "xs", "sm", "base" (default), "lg", "xl", "2xl", "3xl".
+ * @param props.checked - Controlled checked state. Use with onCheckedChange.
+ * @param props.defaultChecked - Uncontrolled default checked state.
+ * @param props.onCheckedChange - Callback when checked state changes.
+ * @param props.disabled - Disable the switch. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Base UI Switch.Root props.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * <Switch size="lg" defaultChecked />
+ * ```
+ *
+ * @bestPractice Use `Switch` for an instantly-applied on/off setting; use `Checkbox` for opt-ins confirmed by a submit, and `RadioGroup` for mutually-exclusive choices.
+ * @bestPractice Controlled use needs `checked` + `onCheckedChange`; with only `checked` the switch won't move - use `defaultChecked` for uncontrolled.
+ * @bestPractice `Switch` has no built-in label - associate a `Label` via `htmlFor`/`id` so the toggle has an accessible name.
+ * @category forms
+ */
+declare const Switch: ({ className, size, ...props }: SwitchProps) => React.JSX.Element;
+export { Switch };

package/dist/components/switch/switch-root.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { focusInput } from "@instruments/materia-ui/tokens/focus-input";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { hasErrorInput } from "../../tokens/has-error-input.js";
+import { getResponsiveSizeClasses } from "../../tokens/responsive.js";
+/** Default Switch size. */
+export const DEFAULT_SWITCH_SIZE = "lg";
+/**
+ * Per-size track (root) class map. Applied via `getResponsiveSizeClasses` so
+ * `size` can be a single token or a per-breakpoint object.
+ */
+export const SWITCH_TRACK_CLASSES = {
+    "2xl": "h-7 w-13",
+    "2xs": "h-3 w-5",
+    "3xl": "h-8 w-15",
+    base: "h-4.5 w-8",
+    lg: "h-5 w-9",
+    sm: "h-4 w-7",
+    xl: "h-6 w-11",
+    xs: "h-3.5 w-6",
+};
+/**
+ * Per-size thumb class map (thumb size + checked translate).
+ * All three utilities apply to the thumb element, so they are grouped into one
+ * string per size and resolved responsively together.
+ */
+export const SWITCH_THUMB_CLASSES = {
+    "2xl": "size-6 data-checked:translate-x-6.5",
+    "2xs": "size-2 data-checked:translate-x-2.5",
+    "3xl": "size-7 data-checked:translate-x-7.5",
+    base: "size-3.5 data-checked:translate-x-4",
+    lg: "size-4 data-checked:translate-x-4.5",
+    sm: "size-3 data-checked:translate-x-3.5",
+    xl: "size-5 data-checked:translate-x-5.5",
+    xs: "size-2.5 data-checked:translate-x-3",
+};
+/**
+ * Renders a toggle switch for boolean on/off states.
+ *
+ * @param props - The switch props
+ * @param props.size - Switch size. Options: "2xs", "xs", "sm", "base" (default), "lg", "xl", "2xl", "3xl".
+ * @param props.checked - Controlled checked state. Use with onCheckedChange.
+ * @param props.defaultChecked - Uncontrolled default checked state.
+ * @param props.onCheckedChange - Callback when checked state changes.
+ * @param props.disabled - Disable the switch. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Base UI Switch.Root props.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * <Switch size="lg" defaultChecked />
+ * ```
+ *
+ * @bestPractice Use `Switch` for an instantly-applied on/off setting; use `Checkbox` for opt-ins confirmed by a submit, and `RadioGroup` for mutually-exclusive choices.
+ * @bestPractice Controlled use needs `checked` + `onCheckedChange`; with only `checked` the switch won't move - use `defaultChecked` for uncontrolled.
+ * @bestPractice `Switch` has no built-in label - associate a `Label` via `htmlFor`/`id` so the toggle has an accessible name.
+ * @category forms
+ */
+const Switch = ({ className, size, ...props }) => (_jsx(SwitchPrimitive.Root, { nativeButton: true, render: (buttonProps) => _jsx("button", { type: "button", ...buttonProps }), className: cn("peer data-checked:bg-primary data-unchecked:bg-muted dark:data-checked:bg-muted-foreground dark:data-unchecked:bg-secondary inline-flex shrink-0 items-center rounded-full border-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 data-checked:shadow-xs", getResponsiveSizeClasses(size, SWITCH_TRACK_CLASSES, DEFAULT_SWITCH_SIZE), focusInput(), hasErrorInput, 
+    // Track transition - must sit AFTER focusInput()/hasErrorInput so it wins
+    // the tailwind-merge conflict. focusInput() contributes
+    // `transition-shadow-border`, which otherwise strips the track's
+    // transition down to those two properties and makes the on/off background
+    // colour SNAP instead of cross-fade. Re-add `background-color` (and keep the
+    // focus-ring's box-shadow/border-color) with explicit, symmetric timing.
+    "transition-bg-shadow-border duration-quick ease-in-out motion-reduce:transition-none", className), "data-component": "switch", "data-slot": "switch", ...props, children: _jsx(SwitchPrimitive.Thumb, { className: cn("bg-input duration-quick pointer-events-none block rounded-full shadow-xs ring-0 transition-transform ease-in-out data-unchecked:translate-x-0.5 motion-reduce:transition-none dark:bg-gray-200", getResponsiveSizeClasses(size, SWITCH_THUMB_CLASSES, DEFAULT_SWITCH_SIZE)), "data-component": "switch-thumb", "data-slot": "switch-thumb" }) }));
+export { Switch };

package/dist/components/switch.d.ts

@@ -0,0 +1 @@
+export { Switch } from "./switch/switch-root.js";

package/dist/components/switch.js

@@ -0,0 +1 @@
+export { Switch } from "./switch/switch-root.js";

package/dist/components/tab-navigation/tab-navigation-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * tabNavigationAnatomy helper for TabNavigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ */
+export declare const tabNavigationAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/tab-navigation/tab-navigation-anatomy.js

@@ -0,0 +1,24 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * tabNavigationAnatomy helper for TabNavigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ */
+export const tabNavigationAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Single tab rendered as a routing link",
+                    label: "TabNavigationLink",
+                    slot: "tab-navigation-link",
+                },
+            ],
+            description: "Row wrapping the individual tab links",
+            label: "TabNavigationList",
+            slot: "tab-navigation-list",
+        },
+    ],
+    description: "Root navigation container with tab-like styling",
+    label: "TabNavigation",
+    slot: "tab-navigation",
+});

package/dist/components/tab-navigation/tab-navigation-link.d.ts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { VariantProps } from "class-variance-authority";
+import type { IconComponent } from "../../tokens/icon-component.js";
+import { tabsTriggerVariants } from "../tabs/tabs-variants.js";
+export interface TabNavigationLinkProps extends Omit<useRender.ComponentProps<"a">, "href">, VariantProps<typeof tabsTriggerVariants> {
+    /**
+     * Marks this tab as active - shows the animated indicator and sets `aria-selected`.
+     * @default false
+     */
+    active?: boolean;
+    href: string;
+    /** Optional icon rendered alongside the label. */
+    icon?: IconComponent;
+    /**
+     * Icon position relative to the label.
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+}
+/**
+ * TabNavigationLink UI component for router-based navigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Uses the same styling as TabsTrigger component with animated indicator.
+ */
+export declare const TabNavigationLink: ({ className, active, render, icon, iconPlacement, children, ...props }: TabNavigationLinkProps) => import("react").JSX.Element;

package/dist/components/tab-navigation/tab-navigation-link.js

@@ -0,0 +1,51 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { Flex } from "../flex.js";
+import { Icon } from "../icon.js";
+import { SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-variants.js";
+import { useTabsContext } from "../tabs/tabs-context.js";
+import { TabsIndicator } from "../tabs/tabs-indicator.js";
+import { DEFAULT_TABS_SIZE, tabsTriggerVariants } from "../tabs/tabs-variants.js";
+/**
+ * TabNavigationLink UI component for router-based navigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Uses the same styling as TabsTrigger component with animated indicator.
+ */
+export const TabNavigationLink = ({ className, active = false, render, icon, iconPlacement = "start", children, ...props }) => {
+    const { variant, size, fullWidth } = useTabsContext();
+    const baseSize = resolveResponsiveBase(size, DEFAULT_TABS_SIZE);
+    const iconSize = SEGMENTED_ICON_SIZE[baseSize];
+    const iconElement = icon ? _jsx(Icon, { icon: icon, size: iconSize }) : null;
+    const hasAnimatedIndicator = variant === "pill" || variant === "line";
+    const indicator = hasAnimatedIndicator && active && _jsx(TabsIndicator, {});
+    const hasRender = render !== undefined;
+    const triggerClassName = cn(tabsTriggerVariants({ size: baseSize, variant }), getResponsiveSizeOverrides(size, SEGMENTED_TRIGGER_TEXT), "relative z-10", fullWidth === true && "flex-1", className);
+    const baseProps = {
+        "aria-selected": active,
+        className: triggerClassName,
+        "data-active": active ? "" : undefined,
+        "data-component": "tab-navigation-link",
+        "data-slot": "tab-navigation-link",
+        role: "tab",
+    };
+    const link = useRender({
+        defaultTagName: "a",
+        props: mergeProps(baseProps, {
+            ...props,
+            // A custom `render` element keeps its own children; the indicator
+            // lives on the wrapping <li> instead.
+            children: hasRender ? (children) : (_jsxs(_Fragment, { children: [indicator, _jsxs(Flex, { align: "center", as: "span", className: "relative z-10 gap-1.5", inline: true, children: [iconPlacement === "start" && iconElement, children, iconPlacement === "end" && iconElement] })] })),
+        }),
+        render,
+    });
+    // With `render`, wrap in a relative <li> so the indicator can use absolute
+    // inset-0. The <li> inherits its size from the trigger content.
+    if (hasRender) {
+        return (_jsxs(Flex, { align: "center", as: "li", className: "relative", role: "presentation", children: [indicator, link] }));
+    }
+    return _jsx("li", { role: "presentation", children: link });
+};

package/dist/components/tab-navigation/tab-navigation-list.d.ts

@@ -0,0 +1,8 @@
+import type { VariantProps } from "class-variance-authority";
+import { tabsListVariants } from "../tabs/tabs-variants.js";
+/**
+ * List wrapper for TabNavigationLink items; hosts the shared LayoutGroup that drives the animated active indicator.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Uses the same styling as TabsList component.
+ */
+export declare const TabNavigationList: ({ className, ...props }: React.ComponentProps<"ul"> & VariantProps<typeof tabsListVariants>) => import("react").JSX.Element;

package/dist/components/tab-navigation/tab-navigation-list.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { LayoutGroup } from "motion/react";
+import { useId } from "react";
+import { resolveResponsiveBase } from "../../tokens/responsive.js";
+import { useTabsContext } from "../tabs/tabs-context.js";
+import { DEFAULT_TABS_SIZE, tabsListVariants } from "../tabs/tabs-variants.js";
+/**
+ * List wrapper for TabNavigationLink items; hosts the shared LayoutGroup that drives the animated active indicator.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Uses the same styling as TabsList component.
+ */
+export const TabNavigationList = ({ className, ...props }) => {
+    const { variant, size, fullWidth } = useTabsContext();
+    const baseSize = resolveResponsiveBase(size, DEFAULT_TABS_SIZE);
+    const layoutId = useId();
+    return (_jsx(LayoutGroup, { id: layoutId, children: _jsx("ul", { className: cn(tabsListVariants({ size: baseSize, variant }), fullWidth === true && "w-full", className), "data-component": "tab-navigation-list", "data-slot": "tab-navigation-list", ...props }) }));
+};

package/dist/components/tab-navigation/tab-navigation-root.d.ts

@@ -0,0 +1,29 @@
+import type { ResponsiveSize } from "../../tokens/size.js";
+export interface TabNavigationProps extends React.ComponentProps<"nav"> {
+    /**
+     * Whether tabs should fill container width with equal widths
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Component size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`.
+     * @default "base"
+     */
+    size?: ResponsiveSize;
+    /**
+     * Visual style variant: pill or line (underline)
+     * @default "line"
+     */
+    variant?: "pill" | "line";
+}
+/**
+ * Provides shared context (variant, size, fullWidth) to its tab links for router-based navigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Shares styling with the Tabs component.
+ *
+ * @bestPractice Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.
+ * @bestPractice It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there's no Base UI value tracking here.
+ * @category navigation
+ */
+export declare const TabNavigation: ({ className, variant, size, fullWidth, children, ...props }: TabNavigationProps) => import("react").JSX.Element;

package/dist/components/tab-navigation/tab-navigation-root.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Flex } from "../flex.js";
+import { TabsContext } from "../tabs/tabs-context.js";
+/**
+ * Provides shared context (variant, size, fullWidth) to its tab links for router-based navigation.
+ * Import from "@instruments/materia-ui/components/tab-navigation".
+ * Shares styling with the Tabs component.
+ *
+ * @bestPractice Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.
+ * @bestPractice It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there's no Base UI value tracking here.
+ * @category navigation
+ */
+export const TabNavigation = ({ className, variant = "line", size = "base", fullWidth = false, children, ...props }) => {
+    const contextValue = useMemo(() => ({ fullWidth, size, variant }), [fullWidth, size, variant]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(Flex, { as: "nav", className: className, "data-component": "tab-navigation", "data-slot": "tab-navigation", direction: "column", gap: "xs", ...props, children: children }) }));
+};