@instruments/materia-ui 0.1.0

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

@@ -0,0 +1,4 @@
+export { tabNavigationAnatomy } from "./tab-navigation/tab-navigation-anatomy.js";
+export { TabNavigationLink } from "./tab-navigation/tab-navigation-link.js";
+export { TabNavigationList } from "./tab-navigation/tab-navigation-list.js";
+export { TabNavigation } from "./tab-navigation/tab-navigation-root.js";

package/dist/components/tab-navigation.js

@@ -0,0 +1,4 @@
+export { tabNavigationAnatomy } from "./tab-navigation/tab-navigation-anatomy.js";
+export { TabNavigationLink } from "./tab-navigation/tab-navigation-link.js";
+export { TabNavigationList } from "./tab-navigation/tab-navigation-list.js";
+export { TabNavigation } from "./tab-navigation/tab-navigation-root.js";

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

@@ -0,0 +1,40 @@
+import type * as React from "react";
+/**
+ * Semantic `<table>` primitive, wrapped in a horizontally scrollable container
+ * so wide tables overflow rather than break layout. Compose with the exported
+ * `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`,
+ * `TableFooter`, and `TableCaption` parts.
+ *
+ * @bestPractice Use `Table` for a small, static, hand-authored table; reach for `DataGrid` once you need sorting, filtering, pagination, column pinning/visibility, or row virtualisation - `Table` has no data model.
+ * @bestPractice Include a `TableCaption` describing the table's contents - it is the accessible name screen readers announce for the `<table>`.
+ * @bestPractice Compose real `TableHeader`/`TableBody`/`TableRow`/`TableHead`/`TableCell` parts (semantic `thead`/`tbody`/`th`/`td`); don't fake rows with styled divs or you lose the table semantics.
+ * @category data
+ */
+declare const Table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => React.JSX.Element;
+/** table header section */
+declare const TableHeader: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+/**
+ * TableBody UI component.
+ */
+declare const TableBody: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+/**
+ * TableFooter UI component.
+ */
+declare const TableFooter: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+/**
+ * TableRow UI component.
+ */
+declare const TableRow: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => React.JSX.Element;
+/**
+ * TableHead UI component.
+ */
+declare const TableHead: ({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+/**
+ * TableCell UI component.
+ */
+declare const TableCell: ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => React.JSX.Element;
+/**
+ * TableCaption UI component.
+ */
+declare const TableCaption: ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => React.JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Semantic `<table>` primitive, wrapped in a horizontally scrollable container
+ * so wide tables overflow rather than break layout. Compose with the exported
+ * `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`,
+ * `TableFooter`, and `TableCaption` parts.
+ *
+ * @bestPractice Use `Table` for a small, static, hand-authored table; reach for `DataGrid` once you need sorting, filtering, pagination, column pinning/visibility, or row virtualisation - `Table` has no data model.
+ * @bestPractice Include a `TableCaption` describing the table's contents - it is the accessible name screen readers announce for the `<table>`.
+ * @bestPractice Compose real `TableHeader`/`TableBody`/`TableRow`/`TableHead`/`TableCell` parts (semantic `thead`/`tbody`/`th`/`td`); don't fake rows with styled divs or you lose the table semantics.
+ * @category data
+ */
+const Table = ({ className, ...props }) => (_jsx("div", { className: "relative w-full overflow-auto", "data-component": "table-wrapper", "data-slot": "table-wrapper", children: _jsx("table", { className: cn("text-foreground text-paragraph-sm w-full caption-bottom", className), "data-component": "table", "data-slot": "table", ...props }) }));
+/** table header section */
+const TableHeader = ({ className, ...props }) => (_jsx("thead", { className: cn("[&_tr]:border-b", className), "data-component": "table-header", "data-slot": "table-header", ...props }));
+/**
+ * TableBody UI component.
+ */
+const TableBody = ({ className, ...props }) => (_jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), "data-component": "table-body", "data-slot": "table-body", ...props }));
+/**
+ * TableFooter UI component.
+ */
+const TableFooter = ({ className, ...props }) => (_jsx("tfoot", { className: cn("bg-muted/50 border-t font-normal last:[&>tr]:border-b-0 [&>tr>td:last-child]:font-medium", className), "data-component": "table-footer", "data-slot": "table-footer", ...props }));
+/**
+ * TableRow UI component.
+ */
+const TableRow = ({ className, ...props }) => (_jsx("tr", { className: cn("data-[state=selected]:bg-muted [&:has(td):hover]:bg-muted border-b transition-colors", className), "data-component": "table-row", "data-slot": "table-row", ...props }));
+/**
+ * TableHead UI component.
+ */
+const TableHead = ({ className, ...props }) => (_jsx("th", { className: cn("text-muted-foreground h-10 px-2 text-left align-middle font-normal rtl:text-right [&:has([role=checkbox])]:pe-0", className), "data-component": "table-head", "data-slot": "table-head", ...props }));
+/**
+ * TableCell UI component.
+ */
+const TableCell = ({ className, ...props }) => (_jsx("td", { className: cn("p-2 align-middle [&:has([role=checkbox])]:pe-0", className), "data-component": "table-cell", "data-slot": "table-cell", ...props }));
+/**
+ * TableCaption UI component.
+ */
+const TableCaption = ({ className, ...props }) => (_jsx("caption", { className: cn("text-muted-foreground text-paragraph-sm mt-4", className), "data-component": "table-caption", "data-slot": "table-caption", ...props }));
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/components/table.d.ts

@@ -0,0 +1 @@
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table/table-root.js";

package/dist/components/table.js

@@ -0,0 +1 @@
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table/table-root.js";

package/dist/components/tabs/tabs-anatomy.d.ts

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

package/dist/components/tabs/tabs-anatomy.js

@@ -0,0 +1,29 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * tabsAnatomy helper for Tabs.
+ * Import from "@instruments/materia-ui/components/tabs".
+ */
+export const tabsAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Button to switch tab content",
+                    label: "TabsTrigger",
+                    slot: "tabs-trigger",
+                },
+            ],
+            description: "Container for tab triggers",
+            label: "TabsList",
+            slot: "tabs-list",
+        },
+        {
+            description: "Content panel for each tab",
+            label: "TabsContent",
+            slot: "tabs-content",
+        },
+    ],
+    description: "Tabbed content switcher",
+    label: "Tabs",
+    slot: "tabs",
+});

package/dist/components/tabs/tabs-content.d.ts

@@ -0,0 +1,11 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+/**
+ * TabsContent - renders content for a tab.
+ * Use inside TabsPanel for smooth height animations.
+ *
+ * All TabsContent stack in the same grid cell. Active content is relative
+ * (contributes to height), inactive is absolute (doesn't affect height).
+ */
+export declare const TabsContent: ({ className, children, value, ...props }: Omit<TabsPrimitive.Panel.Props, "className" | "render"> & {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/tabs/tabs-content.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { durations } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+import { useTabsContext } from "../tabs/tabs-context.js";
+/**
+ * TabsContent - renders content for a tab.
+ * Use inside TabsPanel for smooth height animations.
+ *
+ * All TabsContent stack in the same grid cell. Active content is relative
+ * (contributes to height), inactive is absolute (doesn't affect height).
+ */
+export const TabsContent = ({ className, children, value, ...props }) => {
+    const { activeValue } = useTabsContext();
+    const isActive = activeValue === value;
+    return (_jsx(TabsPrimitive.Panel, { className: cn(
+        // Base UI makes the active panel focusable (tabIndex=0); show a ring on
+        // keyboard focus so the move is visible (WCAG 2.4.7). Inset so a large
+        // panel's ring is never clipped by an overflow ancestor.
+        focusRing(), "focus-visible:ring-inset", 
+        // Grid stacking: all tabs occupy same cell
+        "col-start-1 row-start-1", 
+        // Active is relative (contributes to height), inactive is absolute (no height contribution)
+        isActive ? "relative" : "pointer-events-none absolute inset-0", className), "data-component": "tabs-content", "data-slot": "tabs-content", keepMounted: true, render: _jsx(m.div, { animate: { opacity: isActive ? 1 : 0 }, initial: false, transition: { duration: isActive ? durations.quick : 0 } }), value: value, ...props, children: children }));
+};

package/dist/components/tabs/tabs-context.d.ts

@@ -0,0 +1,28 @@
+import type { ResponsiveSize } from "../../tokens/size.js";
+/** Tabs context value type definition */
+export interface TabsContextValue {
+    /** Currently active tab value (undefined until first selection in uncontrolled mode) */
+    activeValue?: string | undefined;
+    /** Whether tabs should fill container width with equal widths */
+    fullWidth?: boolean;
+    /** Unique ID for this Tabs instance (used for indicator layoutId) */
+    instanceId?: string;
+    /**
+     * Component size - a single token or a per-breakpoint object. Children
+     * resolve the base token (via `resolveResponsiveBase`) for single-token
+     * needs (icon/dot sizing, cva base) and layer breakpoint overrides on top.
+     */
+    size?: ResponsiveSize;
+    /** Visual style variant: pill or line */
+    variant: "pill" | "line";
+}
+/**
+ * TabsContext UI component.
+ * Import from "@instruments/materia-ui/components/tabs".
+ */
+export declare const TabsContext: import("react").Context<TabsContextValue>;
+/**
+ * useTabsContext React hook.
+ * Import from "@instruments/materia-ui/components/tabs".
+ */
+export declare const useTabsContext: () => TabsContextValue;

package/dist/components/tabs/tabs-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, use } from "react";
+/**
+ * TabsContext UI component.
+ * Import from "@instruments/materia-ui/components/tabs".
+ */
+export const TabsContext = createContext({
+    fullWidth: false,
+    size: "base",
+    variant: "pill",
+});
+/**
+ * useTabsContext React hook.
+ * Import from "@instruments/materia-ui/components/tabs".
+ */
+export const useTabsContext = () => use(TabsContext);

package/dist/components/tabs/tabs-indicator.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Animated indicator for tabs that smoothly transitions between active tabs.
+ * Uses layoutId for shared element transitions. Used by TabsTrigger for
+ * animated variants.
+ *
+ * @internal
+ */
+export declare const TabsIndicator: () => import("react").JSX.Element;

package/dist/components/tabs/tabs-indicator.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { springs } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+import { SEGMENTED_INDICATOR_CLASS } from "../segmented/segmented-root.js";
+import { useTabsContext } from "../tabs/tabs-context.js";
+const indicatorStyles = {
+    line: "absolute inset-x-0 bottom-0 h-0.5 bg-primary dark:bg-gray-100",
+    pill: cn("absolute inset-0 rounded-full", SEGMENTED_INDICATOR_CLASS),
+};
+/**
+ * Animated indicator for tabs that smoothly transitions between active tabs.
+ * Uses layoutId for shared element transitions. Used by TabsTrigger for
+ * animated variants.
+ *
+ * @internal
+ */
+export const TabsIndicator = () => {
+    const { variant, instanceId } = useTabsContext();
+    return (_jsx(m.span, { "aria-hidden": true, className: cn(indicatorStyles[variant]), "data-slot": "tabs-indicator", layoutId: `tabs-indicator-${instanceId}`, transition: springs.swift }));
+};

package/dist/components/tabs/tabs-list.d.ts

@@ -0,0 +1,12 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type { VariantProps } from "class-variance-authority";
+import { tabsListVariants } from "../tabs/tabs-variants.js";
+/**
+ * Row container for `TabsTrigger`s. Reads variant/size/fullWidth from `Tabs`
+ * context. When not full-width, scrolls horizontally (scrollbar hidden) on
+ * overflow. Full-width lists bypass `ScrollArea` because its table-like inner
+ * wrapper shrink-wraps the track instead of allowing equal-width triggers.
+ */
+export declare const TabsList: ({ className, ...props }: Omit<TabsPrimitive.List.Props, "className"> & {
+    className?: string;
+} & VariantProps<typeof tabsListVariants>) => import("react").JSX.Element;

package/dist/components/tabs/tabs-list.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { LayoutGroup } from "motion/react";
+import { useId } from "react";
+import { resolveResponsiveBase } from "../../tokens/responsive.js";
+import { ScrollArea } from "../scroll-area.js";
+import { useTabsContext } from "../tabs/tabs-context.js";
+import { DEFAULT_TABS_SIZE, tabsListVariants } from "../tabs/tabs-variants.js";
+/**
+ * Row container for `TabsTrigger`s. Reads variant/size/fullWidth from `Tabs`
+ * context. When not full-width, scrolls horizontally (scrollbar hidden) on
+ * overflow. Full-width lists bypass `ScrollArea` because its table-like inner
+ * wrapper shrink-wraps the track instead of allowing equal-width triggers.
+ */
+export const TabsList = ({ className, ...props }) => {
+    const { variant, size, fullWidth } = useTabsContext();
+    const baseSize = resolveResponsiveBase(size, DEFAULT_TABS_SIZE);
+    const layoutId = useId();
+    const list = (_jsx(LayoutGroup, { id: layoutId, children: _jsx(TabsPrimitive.List, { className: cn(tabsListVariants({ size: baseSize, variant }), fullWidth === true && "flex w-full", className), "data-component": "tabs-list", "data-slot": "tabs-list", ...props }) }));
+    if (fullWidth === true) {
+        return list;
+    }
+    return (_jsx(ScrollArea, { hideScrollbar: true, orientation: "horizontal", children: list }));
+};

package/dist/components/tabs/tabs-panel.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TabsPanel - wrapper for TabsContent that animates height transitions.
+ *
+ * Uses CSS grid stacking so all tab contents occupy the same space,
+ * with only the active tab visible and contributing to height.
+ * The m.div with layout prop animates height changes smoothly.
+ */
+export declare const TabsPanel: ({ children, className, layout, }: {
+    children: React.ReactNode;
+    className?: string;
+    layout?: boolean | "position" | "size" | "preserve-aspect";
+}) => import("react").JSX.Element;

package/dist/components/tabs/tabs-panel.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+/**
+ * TabsPanel - wrapper for TabsContent that animates height transitions.
+ *
+ * Uses CSS grid stacking so all tab contents occupy the same space,
+ * with only the active tab visible and contributing to height.
+ * The m.div with layout prop animates height changes smoothly.
+ */
+export const TabsPanel = ({ children, className, layout = true, }) => (_jsx(m.div, { className: cn("grid", className), "data-component": "tabs-panel", layout: layout, transition: {
+        layout: {
+            duration: durations.normal,
+            ease: easings.inOut,
+        },
+    }, children: children }));

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

@@ -0,0 +1,32 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type { ResponsiveSize } from "../../tokens/size.js";
+/**
+ * Tabbed content switcher (Base UI Tabs) that composes `TabsList` /
+ * `TabsTrigger` / `TabsContent`.
+ *
+ * Provides shared `variant`/`size`/`fullWidth` through context so the parts stay
+ * in sync, and tracks the active value to drive the sliding `TabsIndicator`.
+ * Controlled via `value`/`onValueChange`, uncontrolled via `defaultValue`.
+ *
+ * @bestPractice Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).
+ * @bestPractice Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.
+ * @category navigation
+ */
+export declare const Tabs: ({ className, variant, size, fullWidth, value, defaultValue, onValueChange, ...props }: Omit<TabsPrimitive.Root.Props, "className" | "defaultValue" | "onValueChange" | "value"> & {
+    className?: string;
+    /** Selected tab (controlled). `null` means no tab is active. */
+    value?: string | null;
+    /** Initially selected tab (uncontrolled). Defaults to the first enabled tab. */
+    defaultValue?: string | null;
+    /** Fires with the newly selected tab value, or `null` when none is available. */
+    onValueChange?: (value: string | null, eventDetails: TabsPrimitive.Root.ChangeEventDetails) => void;
+    /** Indicator style: `"pill"` (filled capsule) or `"line"` (underline). @default "pill" */
+    variant?: "pill" | "line";
+    /**
+     * Trigger sizing on the shared component-size scale - a single token or a
+     * per-breakpoint object like `{ base: "sm", md: "lg" }`. @default "base"
+     */
+    size?: ResponsiveSize;
+    /** When true, tabs fill container width with equal proportional widths */
+    fullWidth?: boolean;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useId, useMemo, useState } from "react";
+import { TabsContext } from "../tabs/tabs-context.js";
+/**
+ * Tabbed content switcher (Base UI Tabs) that composes `TabsList` /
+ * `TabsTrigger` / `TabsContent`.
+ *
+ * Provides shared `variant`/`size`/`fullWidth` through context so the parts stay
+ * in sync, and tracks the active value to drive the sliding `TabsIndicator`.
+ * Controlled via `value`/`onValueChange`, uncontrolled via `defaultValue`.
+ *
+ * @bestPractice Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).
+ * @bestPractice Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.
+ * @category navigation
+ */
+export const Tabs = ({ className, variant = "pill", size = "base", fullWidth = false, value, defaultValue, onValueChange, ...props }) => {
+    // Unique ID for this Tabs instance (used for indicator layoutId)
+    const instanceId = useId();
+    // Track active value for animated indicator
+    const [activeValue, setActiveValue] = useState(defaultValue);
+    const handleValueChange = (newValue, eventDetails) => {
+        setActiveValue(newValue);
+        onValueChange?.(newValue, eventDetails);
+    };
+    // For controlled mode, use the value prop
+    const currentValue = value ?? activeValue ?? undefined;
+    const contextValue = useMemo(() => ({
+        activeValue: currentValue,
+        fullWidth,
+        instanceId,
+        size,
+        variant,
+    }), [currentValue, fullWidth, instanceId, size, variant]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabsPrimitive.Root, { className: cn("flex flex-col gap-2", className), "data-component": "tabs", "data-slot": "tabs", onValueChange: handleValueChange, ...(defaultValue === undefined ? {} : { defaultValue }), ...(value === undefined ? {} : { value }), ...props }) }));
+};

package/dist/components/tabs/tabs-trigger.d.ts

@@ -0,0 +1,27 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type { VariantProps } from "class-variance-authority";
+import type { IconComponent } from "../../tokens/icon-component.js";
+import { tabsTriggerVariants } from "../tabs/tabs-variants.js";
+/**
+ * Icon props are discriminated: `iconPlacement` only means something with an
+ * `icon`, so passing it alone is a type error rather than a silent no-op.
+ */
+type TabsTriggerIconProps = {
+    /** Leading/trailing icon, rendered through `Icon`. */
+    icon: IconComponent;
+    /** Which side the icon sits on. Requires `icon`. Defaults to "start". */
+    iconPlacement?: "start" | "end";
+} | {
+    icon?: undefined;
+    iconPlacement?: never;
+};
+type TabsTriggerProps = Omit<TabsPrimitive.Tab.Props, "className"> & VariantProps<typeof tabsTriggerVariants> & {
+    className?: string;
+    /** Optional count to display alongside the tab label */
+    count?: number;
+    /** Dot colour indicator (CSS colour value) */
+    dot?: string;
+} & TabsTriggerIconProps;
+/** tabs trigger button */
+export declare const TabsTrigger: ({ className, icon, iconPlacement, count, dot, children, value, ...props }: TabsTriggerProps) => import("react").JSX.Element;
+export {};

package/dist/components/tabs/tabs-trigger.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { Dot } from "../dot.js";
+import { Flex } from "../flex.js";
+import { Icon } from "../icon.js";
+import { SEGMENTED_DOT_SIZE, 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";
+/** tabs trigger button */
+export const TabsTrigger = ({ className, icon, iconPlacement = "start", count, dot, children, value, ...props }) => {
+    const { variant, size, activeValue, fullWidth } = useTabsContext();
+    const baseSize = resolveResponsiveBase(size, DEFAULT_TABS_SIZE);
+    const iconSize = SEGMENTED_ICON_SIZE[baseSize];
+    const dotSize = SEGMENTED_DOT_SIZE[baseSize];
+    const iconElement = icon ? _jsx(Icon, { icon: icon, size: iconSize }) : null;
+    const dotElement = dot !== undefined && dot !== null && dot !== "" ? (_jsx(Dot, { color: dot, size: dotSize })) : null;
+    const isActive = activeValue === value;
+    const hasAnimatedIndicator = variant === "pill" || variant === "line";
+    return (_jsxs(TabsPrimitive.Tab, { className: cn(tabsTriggerVariants({ size: baseSize, variant }), getResponsiveSizeOverrides(size, SEGMENTED_TRIGGER_TEXT), "relative", fullWidth === true && "flex-1", className), "data-component": "tabs-trigger", "data-slot": "tabs-trigger", value: value, ...props, children: [hasAnimatedIndicator && isActive && _jsx(TabsIndicator, {}), _jsxs(Flex, { align: "center", as: "span", className: "relative z-10 gap-1.5", inline: true, children: [dotElement, iconPlacement === "start" && iconElement, children, count !== undefined && (_jsx("span", { className: "text-gray-500 tabular-nums", children: count })), iconPlacement === "end" && iconElement] })] }));
+};

package/dist/components/tabs/tabs-trigger.test-d.d.ts

@@ -0,0 +1,35 @@
+import type { LucideIcon } from "lucide-react";
+/**
+ * Type-level tests for TabsTrigger's discriminated icon props.
+ *
+ * Evaluated by `tsc --noEmit` (the `typecheck` gate), not by vitest or the
+ * Playwright story smoke - a `.test-d.ts` name matches neither runner's globs.
+ * `iconPlacement` is meaningless without `icon`; if that constraint regresses,
+ * `PlacementRequiresIcon` below stops satisfying `extends true` and the
+ * typecheck fails.
+ */
+import type { ComponentProps } from "react";
+import type { TabsTrigger } from "./tabs-trigger.js";
+/** Passes only when `T` is exactly `true`. */
+type Expect<T extends true> = T;
+/** Boolean negation at the type level. */
+type Not<B extends boolean> = B extends true ? false : true;
+/** `true` iff a value of type `V` is accepted as TabsTrigger props. */
+type Accepts<V> = V extends ComponentProps<typeof TabsTrigger> ? true : false;
+export type ValueOnlyAccepted = Expect<Accepts<{
+    value: "a";
+}>>;
+export type IconWithoutPlacementAccepted = Expect<Accepts<{
+    value: "a";
+    icon: LucideIcon;
+}>>;
+export type IconWithPlacementAccepted = Expect<Accepts<{
+    value: "a";
+    icon: LucideIcon;
+    iconPlacement: "end";
+}>>;
+export type PlacementRequiresIcon = Expect<Not<Accepts<{
+    value: "a";
+    iconPlacement: "end";
+}>>>;
+export {};

package/dist/components/tabs/tabs-trigger.test-d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs/tabs-variants.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * tabsListVariants variant class helper for Tabs.
+ *
+ * Both pill and line variants auto-size from content (h-auto).
+ * Pill gets shell padding + gap from shared segmented tokens.
+ */
+export declare const tabsListVariants: (props?: ({
+    variant?: "line" | "pill" | null | undefined;
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Default Tabs size (mirrors the cva `defaultVariants.size`). */
+export declare const DEFAULT_TABS_SIZE: ComponentSize;
+/**
+ * tabsTriggerVariants variant class helper for Tabs.
+ *
+ * Size variants only set text size. ALL padding is set via compound variants
+ * (pill uses SEGMENTED_TRIGGER_PADDING, line uses LINE_TRIGGER_PADDING)
+ * to avoid Tailwind class conflicts from competing padding utilities.
+ */
+export declare const tabsTriggerVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+    variant?: "line" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/tabs/tabs-variants.js

@@ -0,0 +1,95 @@
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { DISABLED } from "../../tokens/input-shell.js";
+import { typedEntries } from "../../utils/typed-entries.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-root.js";
+const segmentedShellPaddingVariants = typedEntries(SEGMENTED_SHELL_PADDING).map(([size, className]) => ({
+    className,
+    size,
+    variant: "pill",
+}));
+const segmentedGapVariants = typedEntries(SEGMENTED_GAP).map(([size, className]) => ({
+    className,
+    size,
+    variant: "pill",
+}));
+/**
+ * tabsListVariants variant class helper for Tabs.
+ *
+ * Both pill and line variants auto-size from content (h-auto).
+ * Pill gets shell padding + gap from shared segmented tokens.
+ */
+export const tabsListVariants = cva("inline-flex h-auto w-fit items-center justify-center", {
+    compoundVariants: [
+        ...segmentedShellPaddingVariants,
+        ...segmentedGapVariants,
+    ],
+    defaultVariants: {
+        size: "base",
+        variant: "pill",
+    },
+    variants: {
+        variant: {
+            pill: SEGMENTED_SHELL_BASE,
+            line: "gap-6",
+        },
+        size: {
+            "2xs": "",
+            xs: "",
+            sm: "",
+            base: "",
+            lg: "",
+            xl: "",
+            "2xl": "",
+            "3xl": "",
+        },
+    },
+});
+/** Default Tabs size (mirrors the cva `defaultVariants.size`). */
+export const DEFAULT_TABS_SIZE = "base";
+/** Line variant trigger padding (no horizontal padding, asymmetric vertical). */
+const LINE_TRIGGER_PADDING = {
+    "2xl": "px-0 pt-3.5 pb-4.5",
+    "2xs": "px-0 pt-0.5 pb-1.5",
+    "3xl": "px-0 pt-4 pb-5",
+    base: "px-0 pt-2 pb-3",
+    lg: "px-0 pt-2.5 pb-3.5",
+    sm: "px-0 pt-1.5 pb-2.5",
+    xl: "px-0 pt-3 pb-4",
+    xs: "px-0 pt-1 pb-2",
+};
+const pillTriggerCompoundVariants = typedEntries(SEGMENTED_TRIGGER_PADDING).map(([size, className]) => ({
+    className,
+    size,
+    variant: "pill",
+}));
+const lineTriggerCompoundVariants = typedEntries(LINE_TRIGGER_PADDING).map(([size, className]) => ({
+    className,
+    size,
+    variant: "line",
+}));
+/**
+ * tabsTriggerVariants variant class helper for Tabs.
+ *
+ * Size variants only set text size. ALL padding is set via compound variants
+ * (pill uses SEGMENTED_TRIGGER_PADDING, line uses LINE_TRIGGER_PADDING)
+ * to avoid Tailwind class conflicts from competing padding utilities.
+ */
+export const tabsTriggerVariants = cva(`transition-color-shadow-border inline-flex cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap ${DISABLED} [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, {
+    compoundVariants: [
+        ...pillTriggerCompoundVariants,
+        ...lineTriggerCompoundVariants,
+    ],
+    defaultVariants: {
+        size: "base",
+        variant: "pill",
+    },
+    variants: {
+        size: { ...SEGMENTED_TRIGGER_TEXT },
+        variant: {
+            line: cn("text-muted-foreground hover:text-foreground data-active:text-foreground dark:text-gray-500 dark:hover:text-gray-300 dark:data-active:text-gray-100", focusRing()),
+            pill: "text-muted-foreground data-active:text-foreground rounded-full dark:text-gray-500 dark:data-active:text-gray-100",
+        },
+    },
+});

package/dist/components/tabs.d.ts

@@ -0,0 +1,6 @@
+export { tabsAnatomy } from "./tabs/tabs-anatomy.js";
+export { TabsContent } from "./tabs/tabs-content.js";
+export { TabsList } from "./tabs/tabs-list.js";
+export { TabsPanel } from "./tabs/tabs-panel.js";
+export { Tabs } from "./tabs/tabs-root.js";
+export { TabsTrigger } from "./tabs/tabs-trigger.js";

package/dist/components/tabs.js

@@ -0,0 +1,6 @@
+export { tabsAnatomy } from "./tabs/tabs-anatomy.js";
+export { TabsContent } from "./tabs/tabs-content.js";
+export { TabsList } from "./tabs/tabs-list.js";
+export { TabsPanel } from "./tabs/tabs-panel.js";
+export { Tabs } from "./tabs/tabs-root.js";
+export { TabsTrigger } from "./tabs/tabs-trigger.js";