@hewnui/ui 0.0.0-stage → 0.1.1

package/dist/components/stepper/stepper.styles.js

@@ -0,0 +1,37 @@
+import { cn } from "../../utils/cn.js";
+export function stepperListClass(orientation, className) {
+    return cn("m-0 flex list-none p-0", orientation === "horizontal"
+        ? "flex-row flex-wrap items-start gap-0"
+        : "flex-col gap-0", className);
+}
+export function stepperItemClass(orientation, className) {
+    return cn("relative flex", orientation === "horizontal"
+        ? "min-w-0 flex-1 flex-col items-center gap-2 px-1"
+        : "flex-row items-start gap-3", className);
+}
+export function stepperConnectorClass(orientation, complete) {
+    return cn("pointer-events-none absolute bg-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "transition-[background-color] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", complete && "bg-accent", orientation === "horizontal"
+        ? "start-[calc(50%+1.1rem)] end-[calc(-50%+1.1rem)] top-[1.15rem] h-px"
+        : "start-[1.15rem] top-[2.4rem] bottom-[-0.15rem] w-px");
+}
+const indicatorTone = {
+    complete: cn("border-accent bg-accent text-accent-foreground", "shadow-[inset_0_1px_0_oklch(1_0_0/28%)]"),
+    current: cn("border-accent bg-[color-mix(in_oklch,var(--kp-accent)_16%,transparent)]", "text-accent ring-2 ring-ring ring-offset-2 ring-offset-background"),
+    upcoming: "border-[color-mix(in_oklch,var(--kp-foreground)_18%,transparent)] bg-surface text-muted-foreground",
+    error: cn("border-danger bg-[color-mix(in_oklch,var(--kp-danger)_14%,transparent)]", "text-danger"),
+    optional: "border-dashed border-[color-mix(in_oklch,var(--kp-foreground)_22%,transparent)] bg-surface text-muted-foreground",
+};
+export function stepperIndicatorClass(status) {
+    return cn("relative z-10 inline-flex size-10 shrink-0 items-center justify-center", "rounded-full border text-sm font-medium tabular-nums outline-none", "transition-[transform,background-color,border-color,color,box-shadow]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", indicatorTone[status]);
+}
+export function stepperButtonClass(clickable) {
+    return cn("flex w-full flex-col items-center gap-2 text-center outline-none", "rounded-[var(--kp-radius-md)]", clickable &&
+        "cursor-pointer transition-[transform] duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)] active:scale-[0.96] focus-visible:ring-2 focus-visible:ring-ring", !clickable && "cursor-default");
+}
+export function stepperButtonVerticalClass(clickable) {
+    return cn("flex min-h-10 w-full flex-row items-start gap-3 text-start outline-none", "rounded-[var(--kp-radius-md)]", clickable &&
+        "cursor-pointer transition-[transform] duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)] active:scale-[0.96] focus-visible:ring-2 focus-visible:ring-ring", !clickable && "cursor-default");
+}
+export const stepperTitleClass = "text-sm font-medium tracking-tight text-balance text-foreground";
+export const stepperDescriptionClass = "mt-0.5 text-xs leading-relaxed text-pretty text-muted-foreground";
+export const stepperOptionalClass = "mt-0.5 font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground";

package/dist/components/stepper/stepper.types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepStatus = "complete" | "current" | "upcoming" | "error" | "optional";
+export type StepperProps = {
+    children: ReactNode;
+    className?: string;
+    orientation?: StepperOrientation;
+    /** Accessible name for the stepper navigation. */
+    "aria-label"?: string;
+    /**
+     * Zero-based index of the current step. When set, child status is derived
+     * unless a step provides an explicit `status`.
+     */
+    currentIndex?: number;
+    /** Called when a clickable completed (or navigable) step is activated. */
+    onStepChange?: (index: number) => void;
+    /** Allow activating completed steps. Defaults to `true` when `onStepChange` is set. */
+    allowGoBack?: boolean;
+};
+export type StepperStepProps = {
+    children: ReactNode;
+    className?: string;
+    /** Explicit status. Overrides derivation from `currentIndex`. */
+    status?: StepStatus;
+    /** Marks the step as optional in the label metadata. */
+    isOptional?: boolean;
+    /** Description under the title. */
+    description?: ReactNode;
+    /** Zero-based index. Auto-assigned from sibling order when omitted. */
+    index?: number;
+    /** Force clickability regardless of status. */
+    isClickable?: boolean;
+    onPress?: () => void;
+};
+export type UseStepperOptions = {
+    /** Total number of steps. */
+    count: number;
+    defaultIndex?: number;
+    index?: number;
+    onIndexChange?: (index: number) => void;
+};
+export type UseStepperResult = {
+    currentIndex: number;
+    goTo: (index: number) => void;
+    next: () => void;
+    previous: () => void;
+    isFirst: boolean;
+    isLast: boolean;
+    statusFor: (index: number) => Exclude<StepStatus, "error" | "optional">;
+};

package/dist/components/stepper/stepper.types.js

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

package/dist/components/stepper/use-stepper.d.ts

@@ -0,0 +1,6 @@
+import type { UseStepperOptions, UseStepperResult } from "./stepper.types.js";
+/**
+ * Small wizard helper for pairing step content with {@link Stepper}.
+ * Supports controlled and uncontrolled indices.
+ */
+export declare function useStepper({ count, defaultIndex, index, onIndexChange, }: UseStepperOptions): UseStepperResult;

package/dist/components/stepper/use-stepper.js

@@ -0,0 +1,40 @@
+"use client";
+import { useCallback, useState } from "react";
+/**
+ * Small wizard helper for pairing step content with {@link Stepper}.
+ * Supports controlled and uncontrolled indices.
+ */
+export function useStepper({ count, defaultIndex = 0, index, onIndexChange, }) {
+    const controlled = index !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex, count));
+    const currentIndex = controlled ? clamp(index, count) : uncontrolled;
+    const goTo = useCallback((next) => {
+        const clamped = clamp(next, count);
+        if (!controlled)
+            setUncontrolled(clamped);
+        onIndexChange?.(clamped);
+    }, [controlled, count, onIndexChange]);
+    const next = useCallback(() => goTo(currentIndex + 1), [currentIndex, goTo]);
+    const previous = useCallback(() => goTo(currentIndex - 1), [currentIndex, goTo]);
+    const statusFor = useCallback((stepIndex) => {
+        if (stepIndex < currentIndex)
+            return "complete";
+        if (stepIndex === currentIndex)
+            return "current";
+        return "upcoming";
+    }, [currentIndex]);
+    return {
+        currentIndex,
+        goTo,
+        next,
+        previous,
+        isFirst: currentIndex <= 0,
+        isLast: currentIndex >= count - 1,
+        statusFor,
+    };
+}
+function clamp(value, count) {
+    if (count <= 0)
+        return 0;
+    return Math.max(0, Math.min(count - 1, value));
+}

package/dist/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from "./switch.js";
+export type { SwitchProps } from "./switch.types.js";

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,2 @@
+import type { SwitchProps } from "./switch.types.js";
+export declare function Switch({ children, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/switch.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as AriaSwitch } from "react-aria-components";
+import { switchClassName, switchThumbClass, switchTrackClass, } from "./switch.styles.js";
+export function Switch({ children, className, ...props }) {
+    return (_jsxs(AriaSwitch, { ...props, className: switchClassName(className), children: [_jsx("span", { className: switchTrackClass, "data-kp-control": "switch", children: _jsx("span", { className: switchThumbClass, "data-kp-control": "switch-thumb" }) }), children ? _jsx("span", { children: children }) : null] }));
+}

package/dist/components/switch/switch.styles.d.ts

@@ -0,0 +1,3 @@
+export declare function switchClassName(className?: string | undefined): string;
+export declare const switchTrackClass: string;
+export declare const switchThumbClass: string;

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,6 @@
+import { cn } from "../../utils/cn.js";
+export function switchClassName(className) {
+    return cn("group inline-flex min-h-10 items-center gap-3 text-sm text-foreground outline-none", "disabled:cursor-not-allowed disabled:opacity-45", className);
+}
+export const switchTrackClass = cn("relative h-7 w-12 shrink-0 rounded-full border p-0.5", "border-[color-mix(in_oklch,var(--kp-foreground)_20%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-muted)_82%,var(--kp-foreground)_10%)]", "shadow-[inset_0_1px_2px_oklch(0_0_0/14%),inset_0_-1px_0_oklch(1_0_0/18%)]", "transition-[background-color,border-color,box-shadow,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "group-data-[selected]:border-accent group-data-[selected]:bg-accent", "group-data-[selected]:shadow-[inset_0_1px_0_oklch(1_0_0/28%),0_0_0_3px_color-mix(in_oklch,var(--kp-accent)_24%,transparent),0_8px_18px_-10px_color-mix(in_oklch,var(--kp-accent)_55%,transparent)]", "group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-ring", "group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-background", "group-data-[pressed]:scale-[0.96]", "group-disabled:opacity-100");
+export const switchThumbClass = cn("block size-5 rounded-full", "bg-[color-mix(in_oklch,var(--kp-surface-raised)_92%,white)]", "shadow-[0_1px_2px_oklch(0_0_0/22%),0_4px_10px_oklch(0_0_0/12%),inset_0_1px_0_oklch(1_0_0/85%)]", "transition-[transform,box-shadow] duration-[var(--kp-motion-duration)]", "ease-[var(--kp-motion-ease-standard)]", "translate-x-0 group-data-[selected]:translate-x-5", "group-data-[selected]:shadow-[0_1px_2px_oklch(0_0_0/18%),0_6px_14px_oklch(0_0_0/16%),inset_0_1px_0_oklch(1_0_0/90%)]");

package/dist/components/switch/switch.types.d.ts

@@ -0,0 +1,6 @@
+import type { SwitchProps as AriaSwitchProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type SwitchProps = Omit<AriaSwitchProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string;
+};

package/dist/components/switch/switch.types.js

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

package/dist/components/table/index.d.ts

@@ -0,0 +1,11 @@
+import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow } from "./table.js";
+export declare const TableRoot: typeof Table & {
+    Header: typeof TableHeader;
+    Column: typeof TableColumn;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Cell: typeof TableCell;
+    Empty: typeof TableEmpty;
+    Loading: typeof TableLoading;
+};
+export { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow, };

package/dist/components/table/index.js

@@ -0,0 +1,11 @@
+import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow, } from "./table.js";
+export const TableRoot = Object.assign(Table, {
+    Header: TableHeader,
+    Column: TableColumn,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    Empty: TableEmpty,
+    Loading: TableLoading,
+});
+export { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow, };

package/dist/components/table/table-sort-glyph.d.ts

@@ -0,0 +1,3 @@
+export declare function SortGlyph({ direction, }: {
+    direction?: "ascending" | "descending" | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/table-sort-glyph.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export function SortGlyph({ direction, }) {
+    return (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", fill: "none", className: cn("size-3 shrink-0 transition-[opacity,transform] duration-[var(--kp-motion-duration)]", direction ? "opacity-90" : "opacity-35", direction === "descending" && "rotate-180"), children: _jsx("path", { d: "M6 2.5v7M6 2.5 3.25 5.25M6 2.5l2.75 2.75", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { type CellProps, type ColumnProps, type RowProps, type TableBodyProps, type TableHeaderProps, type TableProps } from "react-aria-components";
+export declare function Table({ children, className, ...props }: Omit<TableProps, "className" | "children"> & {
+    children: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader<T extends object>({ children, className, ...props }: Omit<TableHeaderProps<T>, "className" | "children"> & {
+    children: TableHeaderProps<T>["children"];
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableColumn({ children, className, ...props }: Omit<ColumnProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody<T extends object>({ children, className, ...props }: Omit<TableBodyProps<T>, "className" | "children"> & {
+    children: TableBodyProps<T>["children"];
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow<T extends object>({ children, className, ...props }: Omit<RowProps<T>, "className" | "children"> & {
+    children: RowProps<T>["children"];
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ children, className, ...props }: Omit<CellProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableEmpty({ children, title, }: {
+    children?: ReactNode;
+    title?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableLoading({ children, }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/table.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader, } from "react-aria-components";
+import { cn } from "../../utils/cn.js";
+import { Spinner } from "../spinner/index.js";
+import { SortGlyph } from "./table-sort-glyph.js";
+import { tableCellClass, tableColumnClass, tableEmptyClass, tableHeaderClass, tableLoadingClass, tableRootClass, tableRowClass, tableShellClass, } from "./table.styles.js";
+export function Table({ children, className, ...props }) {
+    return (_jsx("div", { "data-kp-surface": true, className: tableShellClass(), children: _jsx(AriaTable, { ...props, className: tableRootClass(className), children: children }) }));
+}
+export function TableHeader({ children, className, ...props }) {
+    return (_jsx(AriaTableHeader, { ...props, className: cn(tableHeaderClass, className), children: children }));
+}
+export function TableColumn({ children, className, ...props }) {
+    return (_jsx(AriaColumn, { ...props, className: tableColumnClass(className), children: ({ allowsSorting, sortDirection }) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [children, allowsSorting ? _jsx(SortGlyph, { direction: sortDirection }) : null] })) }));
+}
+export function TableBody({ children, className, ...props }) {
+    return (_jsx(AriaTableBody, { ...props, ...(className !== undefined ? { className } : {}), children: children }));
+}
+export function TableRow({ children, className, ...props }) {
+    return (_jsx(AriaRow, { ...props, className: tableRowClass(className), children: children }));
+}
+export function TableCell({ children, className, ...props }) {
+    return (_jsx(AriaCell, { ...props, className: tableCellClass(className), children: children }));
+}
+export function TableEmpty({ children = "No rows to show.", title = "Empty", }) {
+    return (_jsxs("div", { className: tableEmptyClass, role: "status", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "max-w-sm text-sm text-muted-foreground text-pretty", children: children })] }));
+}
+export function TableLoading({ children = "Loading rows…", }) {
+    return (_jsx("div", { className: tableLoadingClass, role: "status", "aria-live": "polite", children: _jsxs("div", { className: "flex w-full flex-col gap-3 px-4 py-2", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-foreground", children: [_jsx(Spinner, { className: "text-accent" }), _jsx("span", { children: children })] }), _jsxs("div", { className: "space-y-2", "aria-hidden": true, children: [_jsx("div", { className: "h-9 animate-pulse rounded-[var(--kp-radius-md)] bg-[color-mix(in_oklch,var(--kp-muted)_85%,var(--kp-foreground)_8%)]" }), _jsx("div", { className: "h-9 animate-pulse rounded-[var(--kp-radius-md)] bg-[color-mix(in_oklch,var(--kp-muted)_70%,var(--kp-foreground)_6%)]" }), _jsx("div", { className: "h-9 animate-pulse rounded-[var(--kp-radius-md)] bg-[color-mix(in_oklch,var(--kp-muted)_55%,var(--kp-foreground)_5%)]" })] })] }) }));
+}

package/dist/components/table/table.styles.d.ts

@@ -0,0 +1,8 @@
+export declare function tableShellClass(className?: string | undefined): string;
+export declare function tableRootClass(className?: string | undefined): string;
+export declare const tableHeaderClass = "bg-[color-mix(in_oklch,var(--kp-muted)_55%,transparent)]";
+export declare function tableColumnClass(className?: string | undefined): string;
+export declare function tableRowClass(className?: string | undefined): string;
+export declare function tableCellClass(className?: string | undefined): string;
+export declare const tableEmptyClass = "flex min-h-36 flex-col items-center justify-center gap-2 px-4 py-10 text-center";
+export declare const tableLoadingClass = "flex min-h-44 w-full items-center justify-center px-2 py-6 text-sm";

package/dist/components/table/table.styles.js

@@ -0,0 +1,19 @@
+import { cn } from "../../utils/cn.js";
+export function tableShellClass(className) {
+    return cn("overflow-x-auto rounded-[var(--kp-radius-panel)] border", "border-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", "shadow-[var(--kp-shadow-surface)]", className);
+}
+export function tableRootClass(className) {
+    return cn("w-full caption-bottom border-separate border-spacing-0 text-sm", "bg-transparent", className);
+}
+export const tableHeaderClass = "bg-[color-mix(in_oklch,var(--kp-muted)_55%,transparent)]";
+export function tableColumnClass(className) {
+    return cn("h-11 px-4 text-left align-middle text-xs font-semibold tracking-wide", "text-muted-foreground outline-none", "transition-[color,background-color] duration-[var(--kp-motion-duration)]", "ease-[var(--kp-motion-ease-standard)]", "data-[hovered]:text-foreground", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-inset data-[focus-visible]:ring-ring", "data-[allows-sorting]:cursor-pointer", className);
+}
+export function tableRowClass(className) {
+    return cn("outline-none transition-[background-color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "data-[hovered]:bg-[color-mix(in_oklch,var(--kp-muted)_45%,transparent)]", "data-[selected]:bg-[color-mix(in_oklch,var(--kp-accent)_12%,transparent)]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-inset data-[focus-visible]:ring-ring", "data-[disabled]:opacity-45", className);
+}
+export function tableCellClass(className) {
+    return cn("border-t border-[color-mix(in_oklch,var(--kp-foreground)_8%,transparent)]", "px-4 py-3 align-middle text-foreground tabular-nums", "[&:first-child]:font-medium [&:first-child]:[font-variant-numeric:normal]", className);
+}
+export const tableEmptyClass = "flex min-h-36 flex-col items-center justify-center gap-2 px-4 py-10 text-center";
+export const tableLoadingClass = "flex min-h-44 w-full items-center justify-center px-2 py-6 text-sm";

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,7 @@
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
+export declare const TabsRoot: typeof Tabs & {
+    List: typeof TabList;
+    Tab: typeof Tab;
+    Panel: typeof TabPanel;
+};
+export { Tab, TabList, TabPanel, Tabs };

package/dist/components/tabs/index.js

@@ -0,0 +1,7 @@
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
+export const TabsRoot = Object.assign(Tabs, {
+    List: TabList,
+    Tab,
+    Panel: TabPanel,
+});
+export { Tab, TabList, TabPanel, Tabs };

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { type TabsProps as AriaTabsProps } from "react-aria-components";
+import { type TabsVariant } from "./tabs.styles.js";
+export declare function Tabs({ children, variant, ...props }: Omit<AriaTabsProps, "children" | "className"> & {
+    children: ReactNode;
+    variant?: TabsVariant;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TabList({ children, className, variant: listVariant, }: {
+    children: ReactNode;
+    className?: string | undefined;
+    variant?: TabsVariant;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ children, id, }: {
+    children: ReactNode;
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanel({ children, id, }: {
+    children: ReactNode;
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, } from "react";
+import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, Tabs as AriaTabs, } from "react-aria-components";
+import { m } from "motion/react";
+import { springs } from "@hewnui/motion";
+import { useMotionMode } from "../../providers/motion-provider.js";
+import { tabClass, tabIndicatorClass, tabPanelClass, tabsListClass, } from "./tabs.styles.js";
+const TabsContext = createContext({
+    layoutId: "kp-tab",
+    variant: "pills",
+});
+export function Tabs({ children, variant = "pills", ...props }) {
+    const layoutId = `kp-tab-${useId()}`;
+    return (_jsx(TabsContext.Provider, { value: { layoutId, variant }, children: _jsx(AriaTabs, { ...props, children: children }) }));
+}
+export function TabList({ children, className, variant: listVariant, }) {
+    const context = useContext(TabsContext);
+    const variant = listVariant ?? context.variant;
+    return (_jsx(AriaTabList, { className: tabsListClass(className, variant), "data-kp-control": "tabs", children: children }));
+}
+export function Tab({ children, id, }) {
+    const { motionEnabled } = useMotionMode();
+    const { layoutId, variant } = useContext(TabsContext);
+    return (_jsx(AriaTab, { id: id, className: tabClass(variant), children: ({ isSelected }) => (_jsxs(_Fragment, { children: [isSelected ? (motionEnabled ? (_jsx(m.span, { layoutId: layoutId, className: tabIndicatorClass(variant), transition: springs.snappy, "data-kp-control": "tab-indicator" })) : (_jsx("span", { className: tabIndicatorClass(variant), "data-kp-control": "tab-indicator" }))) : null, _jsx("span", { className: "relative z-10", children: children })] })) }));
+}
+export function TabPanel({ children, id, }) {
+    return (_jsx(AriaTabPanel, { id: id, className: tabPanelClass, children: children }));
+}

package/dist/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,5 @@
+export type TabsVariant = "pills" | "line" | "solid" | "glass";
+export declare function tabsListClass(className?: string, variant?: TabsVariant): string;
+export declare function tabClass(variant?: TabsVariant): string;
+export declare function tabIndicatorClass(variant?: TabsVariant): string;
+export declare const tabPanelClass: string;

package/dist/components/tabs/tabs.styles.js

@@ -0,0 +1,30 @@
+import { cn } from "../../utils/cn.js";
+const listVariants = {
+    pills: cn("relative inline-flex max-w-full gap-0.5 overflow-x-auto rounded-[var(--kp-radius-md)] p-1", "border border-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-muted)_72%,transparent)]", "shadow-[inset_0_1px_2px_oklch(0_0_0/8%)]"),
+    line: cn("relative inline-flex max-w-full gap-4 overflow-x-auto border-b", "border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)] pb-0.5"),
+    solid: cn("relative inline-flex max-w-full gap-1 overflow-x-auto rounded-[var(--kp-radius-md)] p-1.5", "bg-surface border border-[color-mix(in_oklch,var(--kp-foreground)_10%,transparent)]", "shadow-[var(--kp-shadow-surface)]"),
+    glass: cn("relative inline-flex max-w-full gap-0.5 overflow-x-auto rounded-[var(--kp-radius-md)] p-1", "border border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_45%,transparent)]", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/30%)]"),
+};
+export function tabsListClass(className, variant = "pills") {
+    return cn(listVariants[variant], className);
+}
+export function tabClass(variant = "pills") {
+    return cn("relative z-10 inline-flex min-h-10 min-w-10 items-center justify-center", variant === "line"
+        ? "pb-2.5 pt-1.5 px-1 text-sm font-medium text-muted-foreground outline-none transition-colors duration-[var(--kp-motion-duration)] data-[selected]:text-foreground data-[hovered]:text-foreground"
+        : variant === "solid"
+            ? "rounded-[calc(var(--kp-radius-md)-0.25rem)] px-3.5 text-sm font-medium text-muted-foreground outline-none transition-[color,transform] duration-[var(--kp-motion-duration)] data-[selected]:text-accent-foreground data-[hovered]:text-foreground data-[pressed]:scale-[0.96]"
+            : "rounded-[calc(var(--kp-radius-md)-0.2rem)] px-3.5 text-sm font-medium text-muted-foreground outline-none transition-[color,transform] duration-[var(--kp-motion-duration)] data-[selected]:text-foreground data-[hovered]:text-foreground data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", "data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-background");
+}
+export function tabIndicatorClass(variant = "pills") {
+    if (variant === "line") {
+        return cn("absolute bottom-0 left-0 right-0 h-0.5 rounded-full", "bg-accent shadow-[0_0_8px_var(--kp-accent)]");
+    }
+    if (variant === "solid") {
+        return cn("absolute inset-0 -z-0 rounded-[calc(var(--kp-radius-md)-0.25rem)]", "bg-accent shadow-sm");
+    }
+    if (variant === "glass") {
+        return cn("absolute inset-0 -z-0 rounded-[calc(var(--kp-radius-md)-0.2rem)]", "bg-[color-mix(in_oklch,var(--kp-surface-raised)_85%,white)]", "backdrop-blur-sm shadow-[0_1px_2px_oklch(0_0_0/12%),inset_0_1px_0_oklch(1_0_0/60%)]", "ring-1 ring-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]");
+    }
+    return cn("absolute inset-0 -z-0 rounded-[calc(var(--kp-radius-md)-0.2rem)]", "bg-[color-mix(in_oklch,var(--kp-surface-raised)_92%,white)]", "shadow-[0_1px_2px_oklch(0_0_0/10%),0_6px_16px_-10px_oklch(0_0_0/28%),inset_0_1px_0_oklch(1_0_0/70%)]", "ring-1 ring-[color-mix(in_oklch,var(--kp-foreground)_10%,transparent)]");
+}
+export const tabPanelClass = cn("mt-4 text-sm leading-relaxed text-muted-foreground text-pretty outline-none", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");

package/dist/components/tag-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectItem, TagField, TagFieldItem, } from "./tag-field.js";
+export type { TagFieldChangeHandler, TagFieldItemProps, TagFieldProps, TagFieldSize, TagFieldVariant, } from "./tag-field.types.js";

package/dist/components/tag-field/index.js

@@ -0,0 +1 @@
+export { MultiSelect, MultiSelectItem, TagField, TagFieldItem, } from "./tag-field.js";

package/dist/components/tag-field/tag-field-icons.d.ts

@@ -0,0 +1,2 @@
+export declare function TagFieldChevronIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function TagFieldRemoveIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/components/tag-field/tag-field-icons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TagFieldChevronIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: _jsx("path", { d: "M4.5 6.25 8 9.75l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function TagFieldRemoveIcon() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "size-3.5", "aria-hidden": true, children: _jsx("path", { d: "M3 3l6 6M9 3 3 9", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+}

package/dist/components/tag-field/tag-field-tags.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type SelectedTagsProps = {
+    emptyLabel?: ReactNode;
+    tagsLabel: string;
+};
+export declare function TagFieldSelectedTags({ emptyLabel, tagsLabel, }: SelectedTagsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tag-field/tag-field-tags.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComboBoxValue, Tag, TagGroup, TagList, } from "react-aria-components";
+import { tagFieldEmptyClass, tagFieldRemoveClass, tagFieldTagClass, tagFieldTagListClass, } from "./tag-field.styles.js";
+import { TagFieldRemoveIcon } from "./tag-field-icons.js";
+export function TagFieldSelectedTags({ emptyLabel, tagsLabel, }) {
+    return (_jsx(ComboBoxValue, { children: ({ state }) => {
+            const nodes = state.selectedItems;
+            const value = Array.isArray(state.value) ? state.value : [];
+            return (_jsx(TagGroup, { "aria-label": tagsLabel, onRemove: (keys) => {
+                    state.setValue(value.filter((key) => !keys.has(key)));
+                }, children: _jsx(TagList, { className: tagFieldTagListClass, items: nodes.map((node) => ({
+                        id: node.key,
+                        name: node.textValue,
+                    })), renderEmptyState: emptyLabel !== undefined
+                        ? () => (_jsx("span", { className: tagFieldEmptyClass, children: emptyLabel }))
+                        : () => null, children: (item) => (_jsxs(Tag, { id: item.id, textValue: item.name, className: tagFieldTagClass(), children: [_jsx("span", { className: "truncate", children: item.name }), _jsx(Button, { slot: "remove", className: tagFieldRemoveClass(), children: _jsx(TagFieldRemoveIcon, {}) })] })) }) }));
+        } }));
+}

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

@@ -0,0 +1,6 @@
+import type { TagFieldItemProps, TagFieldProps } from "./tag-field.types.js";
+export declare function TagField({ children, className, description, emptyLabel, errorMessage, label, listEmptyLabel, maxSelections, onChange, onInputChange, placeholder, size, tagsLabel, variant, value, defaultValue, ...props }: TagFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagFieldItem({ children, id, isDisabled, textValue, }: TagFieldItemProps): import("react/jsx-runtime").JSX.Element;
+/** Alias for MultiSelect naming. */
+export declare const MultiSelect: typeof TagField;
+export declare const MultiSelectItem: typeof TagFieldItem;

package/dist/components/tag-field/tag-field.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Button, ComboBox as AriaComboBox, FieldError, Input, Label, ListBox, ListBoxItem, Popover, Text, } from "react-aria-components";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, } from "../../styles/field.js";
+import { cn } from "../../utils/cn.js";
+import { TagFieldChevronIcon } from "./tag-field-icons.js";
+import { fieldSurfaceProps, tagFieldInputClass, tagFieldItemClass, tagFieldListClass, tagFieldListEmptyClass, tagFieldPopoverClass, tagFieldShellClass, tagFieldToggleClass, } from "./tag-field.styles.js";
+import { TagFieldSelectedTags } from "./tag-field-tags.js";
+function asKeyArray(value) {
+    if (Array.isArray(value))
+        return value;
+    return [];
+}
+export function TagField({ children, className, description, emptyLabel, errorMessage, label, listEmptyLabel = "No matching options", maxSelections, onChange, onInputChange, placeholder = "Add…", size = "md", tagsLabel = "Selected", variant = "outline", value, defaultValue, ...props }) {
+    const controlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => asKeyArray(defaultValue));
+    const [inputValue, setInputValue] = useState("");
+    const selected = controlled ? asKeyArray(value) : uncontrolled;
+    const commit = useCallback((next) => {
+        const clipped = maxSelections != null ? next.slice(0, maxSelections) : next;
+        if (!controlled)
+            setUncontrolled(clipped);
+        onChange?.(clipped);
+    }, [controlled, maxSelections, onChange]);
+    const atMax = maxSelections != null && selected.length >= maxSelections;
+    function handleInputKeyDown(event) {
+        if (event.key !== "Backspace" || inputValue !== "" || selected.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        commit(selected.slice(0, -1));
+    }
+    return (_jsxs(AriaComboBox, { ...props, selectionMode: "multiple", value: selected, onChange: commit, inputValue: inputValue, onInputChange: (next) => {
+            setInputValue(next);
+            onInputChange?.(next);
+        }, allowsEmptyCollection: true, className: cn(fieldRootClass, "max-w-md", className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsxs("div", { ...fieldSurfaceProps(variant), className: tagFieldShellClass(undefined, size, variant), children: [_jsx(TagFieldSelectedTags, { emptyLabel: emptyLabel, tagsLabel: tagsLabel }), _jsx(Input, { placeholder: atMax ? `Maximum ${maxSelections}` : placeholder, className: tagFieldInputClass(size), onKeyDown: handleInputKeyDown }), _jsx(Button, { className: tagFieldToggleClass(), children: _jsx(TagFieldChevronIcon, {}) })] }), _jsx(Popover, { className: tagFieldPopoverClass, "data-kp-surface": true, children: _jsx(ListBox, { className: tagFieldListClass, renderEmptyState: () => (_jsx("div", { className: tagFieldListEmptyClass, children: listEmptyLabel })), children: children }) }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: atMax
+                    ? `Maximum of ${maxSelections} selections reached.`
+                    : `${selected.length} selected.` })] }));
+}
+export function TagFieldItem({ children, id, isDisabled, textValue, }) {
+    return (_jsx(ListBoxItem, { id: id, className: tagFieldItemClass, ...(textValue !== undefined ? { textValue } : {}), ...(isDisabled !== undefined ? { isDisabled } : {}), children: children }));
+}
+/** Alias for MultiSelect naming. */
+export const MultiSelect = TagField;
+export const MultiSelectItem = TagFieldItem;

package/dist/components/tag-field/tag-field.styles.d.ts

@@ -0,0 +1,14 @@
+import type { FieldSize, FieldVariant } from "../../styles/field.js";
+import { fieldSurfaceProps } from "../../styles/field.js";
+export { fieldSurfaceProps };
+export declare function tagFieldShellClass(className?: string, size?: FieldSize, variant?: FieldVariant): string;
+export declare function tagFieldInputClass(size?: FieldSize): string;
+export declare function tagFieldToggleClass(): string;
+export declare function tagFieldTagClass(): string;
+export declare function tagFieldRemoveClass(): string;
+export declare const tagFieldListClass = "outline-none";
+export declare const tagFieldItemClass: string;
+export declare const tagFieldPopoverClass: string;
+export declare const tagFieldTagListClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1.5 outline-none";
+export declare const tagFieldEmptyClass = "px-1 text-xs text-muted-foreground text-pretty";
+export declare const tagFieldListEmptyClass = "px-3 py-2 text-sm text-muted-foreground text-pretty";

package/dist/components/tag-field/tag-field.styles.js

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn.js";
+import { fieldSurfaceProps } from "../../styles/field.js";
+import { menuItemClass, popoverSurfaceClass } from "../../styles/overlays.js";
+export { fieldSurfaceProps };
+const variants = {
+    outline: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_88%,var(--kp-foreground)_4%)]", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/35%)]", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"),
+    filled: cn("border border-transparent", "bg-[color-mix(in_oklch,var(--kp-muted)_72%,transparent)]", "shadow-[inset_0_1px_0_oklch(1_0_0/18%)]", "hover:bg-[color-mix(in_oklch,var(--kp-muted)_88%,transparent)]", "focus-within:border-ring focus-within:bg-surface focus-within:ring-2 focus-within:ring-ring/30"),
+    flushed: cn("rounded-none border-0 border-b-2 border-solid bg-transparent px-0", "border-b-[color-mix(in_oklch,var(--kp-foreground)_32%,transparent)]", "shadow-none focus-within:border-b-ring focus-within:ring-0", "focus-within:shadow-[0_1px_0_0_color-mix(in_oklch,var(--kp-ring)_55%,transparent)]"),
+    glass: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_42%,transparent)]", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/42%),inset_0_0_0_1px_oklch(1_0_0/8%),0_8px_24px_-14px_oklch(0_0_0/28%)]", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"),
+};
+const sizes = {
+    sm: "min-h-10 gap-1.5 px-2 py-1.5 text-xs rounded-[var(--kp-radius-sm)]",
+    md: "min-h-11 gap-2 px-2.5 py-2 text-sm rounded-[var(--kp-radius-md)]",
+    lg: "min-h-12 gap-2 px-3 py-2.5 text-base rounded-[var(--kp-radius-md)]",
+};
+export function tagFieldShellClass(className, size = "md", variant = "outline") {
+    return cn("flex w-full flex-wrap items-center text-foreground outline-none", "transition-[border-color,box-shadow,background-color,backdrop-filter]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "invalid:border-danger", variants[variant], variant === "flushed"
+        ? size === "sm"
+            ? "min-h-10 gap-1.5 py-1 text-xs"
+            : size === "lg"
+                ? "min-h-12 gap-2 py-2 text-base"
+                : "min-h-11 gap-2 py-1.5 text-sm"
+        : sizes[size], className);
+}
+export function tagFieldInputClass(size = "md") {
+    return cn("min-w-[8ch] flex-1 bg-transparent outline-none placeholder:text-muted-foreground", size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm");
+}
+export function tagFieldToggleClass() {
+    return cn("inline-flex min-h-10 min-w-10 shrink-0 items-center justify-center", "rounded-[var(--kp-radius-sm)] text-muted-foreground outline-none", "transition-[transform,color,background-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-muted data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring/40");
+}
+export function tagFieldTagClass() {
+    return cn("inline-flex max-w-full items-center gap-0.5", "rounded-[var(--kp-radius-sm)] border pl-2 text-xs font-medium", "border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-muted)_70%,transparent)] text-foreground", "outline-none transition-[transform,background-color,border-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring/40", "data-[disabled]:opacity-45");
+}
+export function tagFieldRemoveClass() {
+    return cn("inline-flex min-h-10 min-w-10 items-center justify-center", "rounded-[var(--kp-radius-sm)] text-muted-foreground outline-none", "transition-[transform,color,background-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-[color-mix(in_oklch,var(--kp-foreground)_8%,transparent)]", "hover:text-foreground data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring/40");
+}
+export const tagFieldListClass = "outline-none";
+export const tagFieldItemClass = cn(menuItemClass, "data-[selected]:font-medium data-[disabled]:opacity-45");
+export const tagFieldPopoverClass = cn(popoverSurfaceClass, "min-w-[var(--trigger-width)]");
+export const tagFieldTagListClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1.5 outline-none";
+export const tagFieldEmptyClass = "px-1 text-xs text-muted-foreground text-pretty";
+export const tagFieldListEmptyClass = "px-3 py-2 text-sm text-muted-foreground text-pretty";