@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/table.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DataLabel } from "../lib/data-islands.js";
+import { EmptyState } from "./empty-state.js";
+const alignClass = { start: "text-start", center: "text-center", end: "text-end" };
+/**
+ * Scroll wrapper for a Table: horizontal (and optional vertical) scrolling with soft edge fades
+ * that show there is more content. It is a focusable, named region so keyboard users can scroll.
+ */
+export const TableContainer = React.forwardRef(function TableContainer({ className, maxHeight, style, ...props }, ref) {
+    return (_jsx("div", { ref: ref, role: "region", tabIndex: 0, "data-slot": "table-container", className: cn("ui-table-scroll relative w-full overflow-auto overscroll-x-contain rounded-[inherit] focus-ring", className), style: maxHeight ? { maxHeight, ...style } : style, ...props }));
+});
+/**
+ * Styled semantic table for small and static data: line items, settings lists, chart data.
+ * Server-component compatible. Give it a `<TableCaption>` or `aria-label`.
+ *
+ * ```tsx
+ * <TableContainer aria-label="Invoice lines">
+ *   <Table>
+ *     <TableCaption>Invoice INV-2041</TableCaption>
+ *     <TableHeader><TableRow><TableHead>Item</TableHead><TableHead numeric>Amount</TableHead></TableRow></TableHeader>
+ *     <TableBody><TableRow><TableCell>Design retainer</TableCell><TableCell numeric>$4,500.00</TableCell></TableRow></TableBody>
+ *   </Table>
+ * </TableContainer>
+ * ```
+ */
+export const Table = React.forwardRef(function Table({ className, density = "inherit", striped, hover = true, bordered = "rows", stickyHeader, stickyFirstColumn, layout = "auto", children, ...props }, ref) {
+    if (process.env.NODE_ENV !== "production" && !props["aria-label"] && !props["aria-labelledby"]) {
+        const hasCaption = React.Children.toArray(children).some((c) => React.isValidElement(c) && c.type === TableCaption);
+        if (!hasCaption)
+            console.warn("[vamos-ui] <Table> needs a <TableCaption>, aria-label or aria-labelledby.");
+    }
+    return (_jsx("table", { ref: ref, "data-slot": "table", "data-density": density === "inherit" ? undefined : density, "data-striped": striped ? "" : undefined, "data-hover": hover ? "" : undefined, "data-bordered": bordered, "data-sticky-header": stickyHeader ? "" : undefined, "data-sticky-column": stickyFirstColumn ? "" : undefined, className: cn("ui-table w-full caption-bottom border-separate border-spacing-0 text-[13px] text-fg", layout === "fixed" && "table-fixed", className), ...props, children: children }));
+});
+/** Names the table. Visible under the table by default; `visuallyHidden` keeps it for screen readers. */
+export const TableCaption = React.forwardRef(function TableCaption({ className, visuallyHidden, side = "bottom", ...props }, ref) {
+    return (_jsx("caption", { ref: ref, "data-slot": "table-caption", className: cn(visuallyHidden ? "sr-only" : "px-(--cell-px) py-3 text-start text-xs text-fg-subtle", side === "top" && "caption-top pt-0", className), ...props }));
+});
+export const TableHeader = React.forwardRef(function TableHeader({ className, ...props }, ref) {
+    return _jsx("thead", { ref: ref, "data-slot": "table-header", className: className, ...props });
+});
+export const TableBody = React.forwardRef(function TableBody({ className, ...props }, ref) {
+    return _jsx("tbody", { ref: ref, "data-slot": "table-body", className: className, ...props });
+});
+export const TableFooter = React.forwardRef(function TableFooter({ className, ...props }, ref) {
+    return _jsx("tfoot", { ref: ref, "data-slot": "table-footer", className: cn("font-medium", className), ...props });
+});
+export const TableRow = React.forwardRef(function TableRow({ className, selected, disabled, highlighted, ...props }, ref) {
+    return (_jsx("tr", { ref: ref, "data-slot": "table-row", "data-state": selected ? "selected" : undefined, "data-disabled": disabled ? "" : undefined, "data-highlighted": highlighted ? "" : undefined, "aria-selected": selected === undefined ? undefined : selected, "aria-disabled": disabled || undefined, className: className, ...props }));
+});
+/**
+ * Column header (`<th scope="col">`). With `onSort` the label becomes a button and the cell
+ * gets `aria-sort`.
+ */
+export const TableHead = React.forwardRef(function TableHead({ className, align, numeric, sort, onSort, scope = "col", children, ...props }, ref) {
+    const a = align ?? (numeric ? "end" : "start");
+    const sortable = sort !== undefined || onSort !== undefined;
+    const SortIcon = sort === "asc" ? ArrowUp : sort === "desc" ? ArrowDown : ChevronsUpDown;
+    return (_jsx("th", { ref: ref, scope: scope, "data-slot": "table-head", "data-numeric": numeric ? "" : undefined, "aria-sort": sortable ? (sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none") : undefined, className: cn("h-[calc(var(--row-h)*0.78)] px-(--cell-px) align-middle text-xs font-medium whitespace-nowrap text-fg-muted", alignClass[a], className), ...props, children: sortable ? (_jsxs("button", { type: "button", onClick: onSort, "data-sorted": sort ? "" : undefined, className: cn("-mx-1.5 inline-flex items-center gap-1 rounded-ui-sm px-1.5 py-1 font-medium transition-colors hover:bg-hover hover:text-fg focus-ring data-sorted:text-fg", a === "end" && "flex-row-reverse"), children: [children, _jsx(SortIcon, { "aria-hidden": true, className: cn("size-3.5 shrink-0", sort ? "text-fg" : "text-fg-subtle") })] })) : (children) }));
+});
+export const TableCell = React.forwardRef(function TableCell({ className, align, numeric, truncate, rowHeader, children, ...props }, ref) {
+    const a = align ?? (numeric ? "end" : "start");
+    const Comp = rowHeader ? "th" : "td";
+    const clamp = typeof truncate === "number" && truncate > 1;
+    return (_jsx(Comp, { ref: ref, ...(rowHeader ? { scope: "row" } : {}), "data-slot": "table-cell", "data-numeric": numeric ? "" : undefined, className: cn("h-(--row-h) px-(--cell-px) py-2 align-middle", alignClass[a], numeric && "font-mono text-[12.5px] whitespace-nowrap tabular", rowHeader && "font-medium", truncate === true || truncate === 1 ? "max-w-0 truncate" : null, className), ...props, children: clamp ? (_jsx("span", { className: "line-clamp-(--lines)", style: { ["--lines"]: truncate }, children: children })) : (children) }));
+});
+/** A single full-width row for an empty table body. */
+export const TableEmpty = React.forwardRef(function TableEmpty({ colSpan, icon, title, description, className, children, ...props }, ref) {
+    return (_jsx("tr", { ref: ref, "data-slot": "table-empty", className: className, ...props, children: _jsx("td", { colSpan: colSpan, className: "px-(--cell-px) py-8", children: _jsx(EmptyState, { kind: "no-results", size: "sm", icon: icon, title: title ?? _jsx(DataLabel, { ns: "table", id: "empty" }), description: description, actions: children }) }) }));
+});

package/dist/components/tabs.d.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { Tabs as RadixTabs } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+import { type BadgeProps } from "./badge.js";
+export declare const tabsListVariants: (props?: ({
+    variant?: "underline" | "pill" | "segmented" | null | undefined;
+    fill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTriggerVariants: (props?: ({
+    variant?: "underline" | "pill" | "segmented" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsVariant = NonNullable<VariantProps<typeof tabsListVariants>["variant"]>;
+type TabsSize = "sm" | "md";
+type TabsOrientation = "horizontal" | "vertical";
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, "value" | "defaultValue" | "onValueChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Switches between views of the same context (WAI-ARIA Tabs: arrows, Home/End).
+ * Inactive panels unmount by default; pass `forceMount` on a `TabsContent` to keep it.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="deals" count={4}>Deals</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">…</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * `activationMode="manual"` for heavy panels (focus moves with arrows, Enter/Space selects).
+ * For route-based tabs use `TabsLinkList` — that is navigation, not the Tabs pattern.
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.List> {
+    /** `underline` (pages, records) · `pill` (status filters) · `segmented` (view switch). Default `underline`. */
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** Equal-width tabs that fill the row. */
+    fill?: boolean;
+    /**
+     * `"scroll"`: when tabs don't fit, the strip scrolls with edge fade masks and the selected tab
+     * is kept in view. Default `"scroll"` for horizontal lists. `"none"` lets the list wrap/clip.
+     */
+    overflow?: "scroll" | "none";
+}
+/** The row (or column) of tab triggers. */
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Trailing count (locale-formatted, 99+). Announced as part of the name: "Draft, 12". */
+    count?: number;
+    /** Badge tone for `count`. Default `neutral` (the selected tab uses `accent`). */
+    badgeTone?: BadgeProps["tone"];
+}
+/** One tab. `value` must match a `TabsContent`. */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
+}
+/** The panel for one tab. Unmounted while inactive unless `forceMount`. */
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsLinkListProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name of the `nav`, e.g. "Contact sections". Required when the page has more than one nav. */
+    "aria-label"?: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    fill?: boolean;
+    orientation?: TabsOrientation;
+    overflow?: "scroll" | "none";
+}
+/**
+ * Route-based tabs: a `<nav>` of links with `aria-current="page"` on the active one. Links use the
+ * app's router `Link` from `VamosProvider`, and the active tab is derived from `currentPath`
+ * unless a `TabsLink` sets `active`.
+ *
+ * ```tsx
+ * <TabsLinkList aria-label="Contact sections">
+ *   <TabsLink href="/contacts/42" exact>Overview</TabsLink>
+ *   <TabsLink href="/contacts/42/deals" count={4}>Deals</TabsLink>
+ * </TabsLinkList>
+ * ```
+ */
+export declare const TabsLinkList: React.ForwardRefExoticComponent<TabsLinkListProps & React.RefAttributes<HTMLElement>>;
+export interface TabsLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+    /** Force the active state. Default: derived from `currentPath` (`exact` for an index route). */
+    active?: boolean;
+    /** Match only this exact path (use for the first, "Overview" tab). */
+    exact?: boolean;
+    icon?: React.ReactNode;
+    count?: number;
+    badgeTone?: BadgeProps["tone"];
+    /** Dims the link and removes it from the tab order. */
+    disabled?: boolean;
+}
+/** One route tab. Renders the app's `Link`. */
+export declare const TabsLink: React.ForwardRefExoticComponent<TabsLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/tabs.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs as RadixTabs } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useComposedRefs } from "../lib/compose-refs.js";
+import { useEdgeFade } from "../lib/use-edge-fade.js";
+import { useLink, useNavigation } from "../lib/provider.js";
+import { Badge } from "./badge.js";
+/* ------------------------------------------------------------------ */
+/* Variants (shared by Radix tabs and link tabs)                       */
+/* ------------------------------------------------------------------ */
+export const tabsListVariants = cva("relative flex min-w-max", {
+    variants: {
+        variant: {
+            /** Pages and records: hairline rule with an accent underline on the selected tab. */
+            underline: "gap-5 border-b border-line data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-0.5 data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-s",
+            /** Status filters: quiet pills. */
+            pill: "gap-1 data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:flex-col",
+            /** 2–4 option view switch (List / Grid). */
+            segmented: "inline-flex w-max gap-0.5 rounded-ui border border-line bg-surface-2 p-0.5 data-[orientation=vertical]:flex-col",
+        },
+        fill: { true: "w-full min-w-0 [&>*]:flex-1" },
+    },
+    defaultVariants: { variant: "underline" },
+});
+export const tabsTriggerVariants = cva([
+    "group/tab relative inline-flex shrink-0 select-none items-center gap-2 whitespace-nowrap font-medium text-fg-muted outline-none",
+    "transition-[color,background-color,box-shadow] duration-150 focus-ring",
+    "hover:text-fg data-selected:text-fg",
+    "disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45",
+    "[&_svg]:shrink-0",
+], {
+    variants: {
+        variant: {
+            underline: [
+                "justify-center rounded-ui-sm px-0.5 focus-visible:outline-offset-0",
+                // indicator: a 2px accent rule that grows in from the centre
+                "after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-full after:bg-accent-ink",
+                "after:origin-center after:scale-x-0 after:transition-transform after:duration-200 motion-reduce:after:transition-none data-selected:after:scale-x-100",
+                // vertical: indicator on the start edge
+                "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:hover:bg-hover",
+                "data-[orientation=vertical]:after:inset-x-auto data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-start-px data-[orientation=vertical]:after:bottom-auto",
+                "data-[orientation=vertical]:after:h-auto data-[orientation=vertical]:after:w-0.5 data-[orientation=vertical]:after:scale-x-100 data-[orientation=vertical]:after:scale-y-0 data-[orientation=vertical]:data-selected:after:scale-y-100",
+            ],
+            pill: "justify-center rounded-full px-3 hover:bg-hover data-selected:bg-selected data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-ui-sm",
+            segmented: "justify-center rounded-[calc(var(--radius)-3px)] px-3 data-selected:bg-surface data-selected:shadow-[0_1px_2px_rgb(0_0_0/0.1),0_0_0_1px_var(--line)] glass:data-selected:bg-field",
+        },
+        size: { sm: "text-[13px] [&_svg]:size-3.5", md: "text-sm [&_svg]:size-4" },
+    },
+    compoundVariants: [
+        { variant: "underline", size: "sm", className: "h-9" },
+        { variant: "underline", size: "md", className: "h-11" },
+        { variant: "pill", size: "sm", className: "h-7" },
+        { variant: "pill", size: "md", className: "h-8" },
+        { variant: "segmented", size: "sm", className: "h-[calc(var(--control-h)-0.75rem)]" },
+        { variant: "segmented", size: "md", className: "h-[calc(var(--control-h)-0.375rem)]" },
+    ],
+    defaultVariants: { variant: "underline", size: "md" },
+});
+const TabsContext = React.createContext({ value: "", orientation: "horizontal" });
+const TabsListContext = React.createContext({ variant: "underline", size: "md" });
+/**
+ * Switches between views of the same context (WAI-ARIA Tabs: arrows, Home/End).
+ * Inactive panels unmount by default; pass `forceMount` on a `TabsContent` to keep it.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="deals" count={4}>Deals</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">…</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * `activationMode="manual"` for heavy panels (focus moves with arrows, Enter/Space selects).
+ * For route-based tabs use `TabsLinkList` — that is navigation, not the Tabs pattern.
+ */
+export const Tabs = React.forwardRef(function Tabs({ value: valueProp, defaultValue, onValueChange, orientation = "horizontal", className, ...props }, ref) {
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? "", onChange: onValueChange, name: "Tabs" });
+    const ctx = React.useMemo(() => ({ value, orientation }), [value, orientation]);
+    return (_jsx(TabsContext.Provider, { value: ctx, children: _jsx(RadixTabs.Root, { ref: ref, "data-slot": "tabs", value: value, onValueChange: setValue, orientation: orientation, className: cn("flex flex-col gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-6", className), ...props }) }));
+});
+/** The row (or column) of tab triggers. */
+export const TabsList = React.forwardRef(function TabsList({ variant = "underline", size = "md", fill, overflow = "scroll", className, children, ...props }, ref) {
+    const { value, orientation } = React.useContext(TabsContext);
+    const scrollRef = React.useRef(null);
+    const scrolls = overflow === "scroll" && orientation === "horizontal" && !fill;
+    useEdgeFade(scrollRef, "x", scrolls);
+    // Keep the selected tab visible when it changes (or on mount).
+    React.useEffect(() => {
+        const scroller = scrollRef.current;
+        if (!scrolls || !scroller)
+            return;
+        const active = scroller.querySelector("[data-selected]");
+        if (!active)
+            return;
+        const s = scroller.getBoundingClientRect();
+        const a = active.getBoundingClientRect();
+        if (a.left < s.left || a.right > s.right) {
+            scroller.scrollTo?.({ left: scroller.scrollLeft + (a.left - s.left) - s.width / 2 + a.width / 2, behavior: "smooth" });
+        }
+    }, [value, scrolls]);
+    const ctx = React.useMemo(() => ({ variant, size }), [variant, size]);
+    const list = (_jsx(RadixTabs.List, { ref: ref, "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant, fill }), className), ...props, children: children }));
+    return (_jsx(TabsListContext.Provider, { value: ctx, children: scrolls ? (_jsx("div", { ref: scrollRef, "data-slot": "tabs-scroller", "data-edge-fade": "x", className: "min-w-0 scrollbar-none overflow-x-auto overscroll-x-contain", children: list })) : (list) }));
+});
+/** One tab. `value` must match a `TabsContent`. */
+export const TabsTrigger = React.forwardRef(function TabsTrigger({ value, icon, count, badgeTone, className, children, ...props }, ref) {
+    const { variant, size } = React.useContext(TabsListContext);
+    const selected = React.useContext(TabsContext).value === value;
+    // Tabs used as a filter (no TabsContent) would point aria-controls at a panel that never
+    // exists — an invalid ARIA reference. Drop it when the selected tab has no panel in the DOM.
+    const innerRef = React.useRef(null);
+    const composedRef = useComposedRefs(ref, innerRef);
+    const controlsId = React.useRef(null);
+    const [noPanel, setNoPanel] = React.useState(false);
+    React.useEffect(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        controlsId.current ??= el.getAttribute("aria-controls");
+        if (!selected)
+            return;
+        const id = controlsId.current;
+        setNoPanel(!!id && !el.ownerDocument.getElementById(id));
+    }, [selected]);
+    return (_jsx(RadixTabs.Trigger, { ref: composedRef, value: value, "data-slot": "tabs-trigger", "data-selected": selected ? "" : undefined, className: cn(tabsTriggerVariants({ variant, size }), className), ...props, ...(noPanel && props["aria-controls"] === undefined ? { "aria-controls": undefined } : {}), children: _jsx(TabContent, { icon: icon, count: count, badgeTone: badgeTone ?? (selected && variant !== "underline" ? "accent" : undefined), children: children }) }));
+});
+function TabContent({ icon, count, badgeTone, children }) {
+    return (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex text-fg-subtle transition-colors group-hover/tab:text-fg-muted group-data-selected/tab:text-current", children: icon })) : null, _jsx("span", { className: "truncate", children: children }), count !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: ", " }), _jsx(Badge, { count: count, tone: badgeTone ?? "neutral", className: "-me-0.5" })] })) : null] }));
+}
+/** The panel for one tab. Unmounted while inactive unless `forceMount`. */
+export const TabsContent = React.forwardRef(function TabsContent({ className, ...props }, ref) {
+    return _jsx(RadixTabs.Content, { ref: ref, "data-slot": "tabs-content", className: cn("min-w-0 flex-1 rounded-ui outline-none focus-ring", className), ...props });
+});
+/**
+ * Route-based tabs: a `<nav>` of links with `aria-current="page"` on the active one. Links use the
+ * app's router `Link` from `VamosProvider`, and the active tab is derived from `currentPath`
+ * unless a `TabsLink` sets `active`.
+ *
+ * ```tsx
+ * <TabsLinkList aria-label="Contact sections">
+ *   <TabsLink href="/contacts/42" exact>Overview</TabsLink>
+ *   <TabsLink href="/contacts/42/deals" count={4}>Deals</TabsLink>
+ * </TabsLinkList>
+ * ```
+ */
+export const TabsLinkList = React.forwardRef(function TabsLinkList({ variant = "underline", size = "md", fill, orientation = "horizontal", overflow = "scroll", className, children, ...props }, ref) {
+    const scrollRef = React.useRef(null);
+    const composed = useComposedRefs(ref, scrollRef);
+    const scrolls = overflow === "scroll" && orientation === "horizontal" && !fill;
+    useEdgeFade(scrollRef, "x", scrolls);
+    React.useEffect(() => {
+        const el = scrollRef.current;
+        if (!scrolls || !el)
+            return;
+        el.querySelector("[aria-current=page]")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }, [scrolls]);
+    const ctx = React.useMemo(() => ({ variant, size }), [variant, size]);
+    return (_jsx(TabsListContext.Provider, { value: ctx, children: _jsx("nav", { ref: composed, "data-slot": "tabs-link-list", "data-edge-fade": scrolls ? "x" : undefined, className: cn(scrolls && "min-w-0 scrollbar-none overflow-x-auto overscroll-x-contain", className), ...props, children: _jsx("div", { "data-orientation": orientation, "data-variant": variant, className: tabsListVariants({ variant, fill }), children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { "data-orientation": orientation }) : child) }) }) }));
+});
+/** One route tab. Renders the app's `Link`. */
+export const TabsLink = React.forwardRef(function TabsLink({ href, active, exact, icon, count, badgeTone, disabled, className, children, ...props }, ref) {
+    const Link = useLink();
+    const { isActive } = useNavigation();
+    const { variant, size } = React.useContext(TabsListContext);
+    const current = active ?? isActive(href, { exact });
+    return (_jsx(Link, { ref: ref, href: href, "data-slot": "tabs-link", "data-selected": current ? "" : undefined, "aria-current": current ? "page" : undefined, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, className: cn(tabsTriggerVariants({ variant, size }), className), ...props, children: _jsx(TabContent, { icon: icon, count: count, badgeTone: badgeTone ?? (current && variant !== "underline" ? "accent" : undefined), children: children }) }));
+});

package/dist/components/tag-input.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { type BadgeProps } from "./badge.js";
+declare const tagInputLabels: {
+    placeholder: string;
+    list: string;
+    suggestions: string;
+    added: string;
+    removed: string;
+    duplicate: string;
+    max: string;
+    notAllowed: string;
+    tooLong: string;
+    invalid: string;
+    remove: string;
+    loading: string;
+};
+export type TagInputLabels = typeof tagInputLabels;
+export type TagDelimiter = "Enter" | "Tab" | "," | ";" | " " | (string & {});
+export interface TagInputProps {
+    /** Current tags (controlled). */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    /**
+     * Suggestions under the input: a static list (filtered with locale folding), or a loader
+     * `(query, signal) => Promise<string[]>` — debounced and aborted for you.
+     */
+    suggestions?: string[] | ((query: string, signal: AbortSignal) => Promise<string[]>);
+    /** `false`: only suggestions can be added. Default `true`. */
+    allowCustom?: boolean;
+    /** Keys that commit the typed text. Default `["Enter", "Tab", ","]`. Paste always splits on comma, semicolon and newline. */
+    delimiters?: TagDelimiter[];
+    /** Maximum number of tags. */
+    max?: number;
+    /** Maximum characters per tag. */
+    maxLength?: number;
+    /** Return an error message for an invalid tag; it is kept, shown in the danger tone and makes the field invalid. */
+    validate?: (tag: string) => string | true;
+    /** Normalise before adding. Default: trim and collapse inner whitespace. */
+    transform?: (tag: string) => string;
+    /** Duplicate check: `"fold"` (default) treats "İstanbul" and "istanbul" as the same tag. */
+    dedupe?: "fold" | "exact";
+    /** Badge tone per tag (segment colours, status). */
+    tagTone?: (tag: string) => BadgeProps["tone"];
+    /** Commit the typed text when the input loses focus. Default `false`. */
+    addOnBlur?: boolean;
+    /** Each tag submits one entry under this name (`formData.getAll(name)`). */
+    name?: string;
+    placeholder?: string;
+    size?: "sm" | "md";
+    /** `"ghost"`: borderless until hover/focus. */
+    variant?: "default" | "ghost";
+    disabled?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+    /** Built-in string overrides (`tagInput` namespace). */
+    labels?: Partial<TagInputLabels>;
+}
+/**
+ * Free-form multi-value entry: post tags, contact segments, skills, recipients, keywords.
+ * Chips live inside the box with a trailing text input. Enter, Tab or comma add; paste splits a
+ * comma- or newline-separated list; Backspace on the empty input moves to the last chip, and a
+ * second Backspace removes it; ←/→ move between chips. Adds and removals are announced.
+ *
+ * ```tsx
+ * <Field label="Tags"><TagInput name="tags" suggestions={existingTags} max={10} /></Field>
+ * <TagInput validate={(v) => /^\S+@\S+\.\S+$/.test(v) || "Not an email address"} />
+ * ```
+ */
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};