@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/resizable.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { usePanelRef, useGroupRef, type GroupProps, type PanelProps, type SeparatorProps, type LayoutStorage, type PanelImperativeHandle, type GroupImperativeHandle } from "react-resizable-panels";
+export type { PanelImperativeHandle as ResizablePanelHandle, GroupImperativeHandle as ResizableGroupHandle, LayoutStorage as ResizableLayoutStorage };
+/** Typed ref for a `ResizablePanel`'s `panelRef` (`collapse()`, `expand()`, `resize()`, `isCollapsed()`). */
+export declare const useResizablePanelRef: typeof usePanelRef;
+/** Typed ref for a `ResizableGroup`'s `groupRef` (`getLayout()`, `setLayout()`). */
+export declare const useResizableGroupRef: typeof useGroupRef;
+export interface ResizableGroupProps extends Omit<GroupProps, "orientation"> {
+    /** Default `"horizontal"` (panes side by side). */
+    orientation?: "horizontal" | "vertical";
+    /** Alias of `orientation`. */
+    direction?: "horizontal" | "vertical";
+    /** Persist the layout under this key (localStorage by default). Panels need stable `id`s. */
+    autoSaveId?: string;
+    /** Storage for `autoSaveId` — e.g. a cookie adapter so the server can render the saved layout. */
+    storage?: LayoutStorage;
+}
+/**
+ * User-sized panes: list + detail, editor + preview, media grid + details. Built on
+ * react-resizable-panels (WAI-ARIA Window Splitter: arrow keys resize, Home/End, Enter collapses a
+ * collapsible pane, double-click resets).
+ *
+ * ```tsx
+ * <ResizableGroup autoSaveId="inbox" className="h-[560px]">
+ *   <ResizablePanel id="list" defaultSize="35%" minSize="25%">…</ResizablePanel>
+ *   <ResizableHandle withGrip />
+ *   <ResizablePanel id="detail">…</ResizablePanel>
+ * </ResizableGroup>
+ * ```
+ *
+ * Sizes: numbers are **pixels**, strings without a unit are percentages (`"35"`), or use explicit
+ * units (`"35%"`, `"280px"`, `"20rem"`). In glass mode surfaces inside stop blurring while a
+ * handle is dragged. On phones, show one pane and open the other in a Sheet (not automatic).
+ */
+export declare const ResizableGroup: React.ForwardRefExoticComponent<ResizableGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ResizablePanelProps extends PanelProps {
+}
+/** One pane. Give it a stable `id` when the group persists its layout. */
+export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): React.JSX.Element;
+export interface ResizableHandleProps extends SeparatorProps {
+    /** A visible grip in the middle of the line (for discoverability on touch and in dense UIs). */
+    withGrip?: boolean;
+    /** Accessible name, e.g. "Resize contact list". Recommended when there are several handles. */
+    "aria-label"?: string;
+}
+/**
+ * The divider between panes: a 1px line with a wider invisible hit area. Hover and focus tint it,
+ * dragging paints it in the accent ink. Keyboard: focus it, then arrows / Home / End.
+ */
+export declare function ResizableHandle({ withGrip, className, children, ...props }: ResizableHandleProps): React.JSX.Element;

package/dist/components/resizable.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Group, Panel, Separator, useDefaultLayout, usePanelRef, useGroupRef, } from "react-resizable-panels";
+import { cn } from "../lib/cn.js";
+/** Typed ref for a `ResizablePanel`'s `panelRef` (`collapse()`, `expand()`, `resize()`, `isCollapsed()`). */
+export const useResizablePanelRef = usePanelRef;
+/** Typed ref for a `ResizableGroup`'s `groupRef` (`getLayout()`, `setLayout()`). */
+export const useResizableGroupRef = useGroupRef;
+const OrientationContext = React.createContext("horizontal");
+/** localStorage that never throws (private mode, SSR, blocked storage). */
+const safeLocalStorage = {
+    getItem(key) {
+        try {
+            return typeof window === "undefined" ? null : window.localStorage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+    },
+    setItem(key, value) {
+        try {
+            if (typeof window !== "undefined")
+                window.localStorage.setItem(key, value);
+        }
+        catch {
+            /* ignore */
+        }
+    },
+};
+/**
+ * User-sized panes: list + detail, editor + preview, media grid + details. Built on
+ * react-resizable-panels (WAI-ARIA Window Splitter: arrow keys resize, Home/End, Enter collapses a
+ * collapsible pane, double-click resets).
+ *
+ * ```tsx
+ * <ResizableGroup autoSaveId="inbox" className="h-[560px]">
+ *   <ResizablePanel id="list" defaultSize="35%" minSize="25%">…</ResizablePanel>
+ *   <ResizableHandle withGrip />
+ *   <ResizablePanel id="detail">…</ResizablePanel>
+ * </ResizableGroup>
+ * ```
+ *
+ * Sizes: numbers are **pixels**, strings without a unit are percentages (`"35"`), or use explicit
+ * units (`"35%"`, `"280px"`, `"20rem"`). In glass mode surfaces inside stop blurring while a
+ * handle is dragged. On phones, show one pane and open the other in a Sheet (not automatic).
+ */
+export const ResizableGroup = React.forwardRef(function ResizableGroup(props, ref) {
+    return props.autoSaveId ? _jsx(PersistedGroup, { ...props, forwardedRef: ref }) : _jsx(BaseGroup, { ...props, forwardedRef: ref });
+});
+function PersistedGroup({ autoSaveId, storage, onLayoutChanged, defaultLayout, ...props }) {
+    const saved = useDefaultLayout({ id: autoSaveId, storage: storage ?? safeLocalStorage });
+    return (_jsx(BaseGroup, { ...props, defaultLayout: saved.defaultLayout ?? defaultLayout, onLayoutChanged: (layout, meta) => {
+            saved.onLayoutChanged(layout, meta);
+            onLayoutChanged?.(layout, meta);
+        } }));
+}
+function BaseGroup({ orientation, direction, autoSaveId: _a, storage: _s, forwardedRef, className, style, elementRef, ...props }) {
+    const o = orientation ?? direction ?? "horizontal";
+    const refs = React.useCallback((node) => {
+        for (const r of [forwardedRef, elementRef]) {
+            if (typeof r === "function")
+                r(node);
+            else if (r)
+                r.current = node;
+        }
+    }, [forwardedRef, elementRef]);
+    return (_jsx(OrientationContext.Provider, { value: o, children: _jsx(Group, { elementRef: refs, orientation: o, "data-slot": "resizable-group", "data-orientation": o, 
+            // The engine inlines height/width 100%, which would beat a height class (`h-64`); fill the
+            // parent through classes instead so `className` can size the group.
+            className: cn("h-full w-full min-h-0 min-w-0", className), style: { height: undefined, width: undefined, ...style }, ...props }) }));
+}
+/** One pane. Give it a stable `id` when the group persists its layout. */
+export function ResizablePanel({ className, ...props }) {
+    return _jsx(Panel, { "data-slot": "resizable-panel", className: cn("min-h-0 min-w-0", className), ...props });
+}
+/**
+ * The divider between panes: a 1px line with a wider invisible hit area. Hover and focus tint it,
+ * dragging paints it in the accent ink. Keyboard: focus it, then arrows / Home / End.
+ */
+export function ResizableHandle({ withGrip, className, children, ...props }) {
+    const groupOrientation = React.useContext(OrientationContext);
+    const vertical = groupOrientation === "horizontal"; // the line itself is vertical
+    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn("group/handle relative flex shrink-0 items-center justify-center bg-line outline-none transition-colors duration-150", vertical ? "w-px" : "h-px", 
+        // invisible 8px hit area
+        "before:absolute before:content-['']", vertical ? "before:inset-y-0 before:-inset-x-1" : "before:inset-x-0 before:-inset-y-1", "data-[separator=hover]:bg-field-border-hover data-[separator=focus]:bg-accent-ink data-[separator=active]:bg-accent-ink", "focus-visible:bg-accent-ink focus-visible:shadow-[0_0_0_3px_var(--accent-soft)]", "data-[separator=disabled]:cursor-default data-[separator=disabled]:opacity-60", className), ...props, children: children ??
+            (withGrip ? (_jsxs("span", { "aria-hidden": true, className: cn("z-[1] flex items-center justify-center gap-[3px] rounded-full border border-field-border bg-[var(--surface-solid,var(--surface))] shadow-[0_1px_2px_rgb(0_0_0/0.08)] transition-colors", "group-data-[separator=active]/handle:border-accent-ink group-data-[separator=focus]/handle:border-accent-ink", vertical ? "h-7 w-3 flex-col" : "h-3 w-7 flex-row"), children: [_jsx("i", { className: "block size-[3px] rounded-full bg-fg-subtle" }), _jsx("i", { className: "block size-[3px] rounded-full bg-fg-subtle" }), _jsx("i", { className: "block size-[3px] rounded-full bg-fg-subtle" })] })) : null) }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { ScrollArea as RadixScrollArea } from "radix-ui";
+type BarSize = "sm" | "md";
+export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, "dir"> {
+    /** Which scrollbars to render. Default `"vertical"`. */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Max height of the viewport (number = px). The area grows with content up to this. */
+    maxHeight?: number | string;
+    /** Edge fade mask on the scrolling axis; removed at the edges. */
+    fade?: boolean;
+    /** Scrollbar thickness. Default `"sm"`. */
+    size?: BarSize;
+    /** Ref to the scrolling viewport (for scroll position, virtualisation, scroll-to-top). */
+    viewportRef?: React.Ref<HTMLDivElement>;
+    /** Class names for the viewport element. */
+    viewportClassName?: string;
+    /** Names the scroll region for screen readers (adds `role="region"`). Recommended when the region is focusable. */
+    "aria-label"?: string;
+    dir?: "ltr" | "rtl";
+}
+/**
+ * A consistent thin scrollbar for bounded, embedded regions: popover and command lists, the
+ * notification panel, kanban columns, horizontal chip strips, code blocks.
+ *
+ * ```tsx
+ * <ScrollArea maxHeight={320} fade aria-label="Recent activity">…</ScrollArea>
+ * <ScrollArea orientation="horizontal" fade><div className="flex gap-2 w-max">…</div></ScrollArea>
+ * ```
+ *
+ * Native scrolling is preserved. Keep the page body and Sidebar on native scrolling — ScrollArea is
+ * only for embedded regions (performance and iOS momentum). The viewport is keyboard-focusable only
+ * when its content has nothing focusable of its own.
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollBarProps extends React.ComponentPropsWithoutRef<typeof RadixScrollArea.Scrollbar> {
+    size?: BarSize;
+}
+/** A scrollbar for `ScrollArea`. Rendered automatically from `orientation`; use it directly for custom layouts. */
+export declare const ScrollBar: React.ForwardRefExoticComponent<ScrollBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/scroll-area.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ScrollArea as RadixScrollArea } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose-refs.js";
+import { useEdgeFade } from "../lib/use-edge-fade.js";
+import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
+const BarSizeContext = React.createContext("sm");
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+/**
+ * A consistent thin scrollbar for bounded, embedded regions: popover and command lists, the
+ * notification panel, kanban columns, horizontal chip strips, code blocks.
+ *
+ * ```tsx
+ * <ScrollArea maxHeight={320} fade aria-label="Recent activity">…</ScrollArea>
+ * <ScrollArea orientation="horizontal" fade><div className="flex gap-2 w-max">…</div></ScrollArea>
+ * ```
+ *
+ * Native scrolling is preserved. Keep the page body and Sidebar on native scrolling — ScrollArea is
+ * only for embedded regions (performance and iOS momentum). The viewport is keyboard-focusable only
+ * when its content has nothing focusable of its own.
+ */
+export const ScrollArea = React.forwardRef(function ScrollArea({ orientation = "vertical", maxHeight, fade, size = "sm", type = "hover", viewportRef, viewportClassName, className, children, style, "aria-label": ariaLabel, ...props }, ref) {
+    const innerRef = React.useRef(null);
+    const composed = useComposedRefs(viewportRef, innerRef);
+    const axis = orientation === "horizontal" ? "x" : "y";
+    useEdgeFade(innerRef, axis, Boolean(fade) && orientation !== "both");
+    // Focusable only when nothing inside can take focus (keyboard users can still scroll).
+    const [focusable, setFocusable] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        const check = () => {
+            const scrolls = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+            setFocusable(scrolls && !el.querySelector(FOCUSABLE));
+        };
+        check();
+        const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(check) : undefined;
+        mo?.observe(el, { childList: true, subtree: true });
+        const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(check) : undefined;
+        ro?.observe(el);
+        return () => {
+            mo?.disconnect();
+            ro?.disconnect();
+        };
+    }, []);
+    return (_jsx(BarSizeContext.Provider, { value: size, children: _jsxs(RadixScrollArea.Root, { ref: ref, type: type, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsx(RadixScrollArea.Viewport, { ref: composed, "data-slot": "scroll-area-viewport", "data-orientation": orientation, "data-edge-fade": fade && orientation !== "both" ? axis : undefined, tabIndex: focusable ? 0 : undefined, role: ariaLabel ? "region" : undefined, "aria-label": ariaLabel, className: cn("size-full rounded-[inherit] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", viewportClassName), style: maxHeight !== undefined ? { maxHeight } : undefined, children: children }), orientation !== "horizontal" ? _jsx(ScrollBar, { orientation: "vertical" }) : null, orientation !== "vertical" ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, _jsx(RadixScrollArea.Corner, {})] }) }));
+});
+/** A scrollbar for `ScrollArea`. Rendered automatically from `orientation`; use it directly for custom layouts. */
+export const ScrollBar = React.forwardRef(function ScrollBar({ orientation = "vertical", size, className, ...props }, ref) {
+    const ctxSize = React.useContext(BarSizeContext);
+    const s = size ?? ctxSize;
+    return (_jsx(RadixScrollArea.Scrollbar, { ref: ref, orientation: orientation, "data-slot": "scroll-area-bar", className: cn("z-(--z-sticky) flex touch-none select-none p-px transition-[opacity,background-color] duration-150", "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100", orientation === "vertical" ? (s === "sm" ? "w-2" : "w-2.5") : s === "sm" ? "h-2 flex-col" : "h-2.5 flex-col", orientation === "vertical" ? "h-full border-s border-s-transparent" : "border-t border-t-transparent", "hover:bg-[color-mix(in_srgb,var(--track)_50%,transparent)]", className), ...props, children: _jsx(RadixScrollArea.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-8 before:min-w-8 before:-translate-x-1/2 before:-translate-y-1/2" }) }));
+});

package/dist/components/select.d.ts

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare const selectLabels: {
+    placeholder: string;
+    clear: string;
+    loading: string;
+    empty: string;
+};
+export type SelectLabels = typeof selectLabels;
+/** One option of the `items` shorthand. */
+export interface SelectOption<V extends string = string> {
+    value: V;
+    label: string;
+    icon?: React.ReactNode;
+    /** Second line under the label (also shown in the open list only). */
+    description?: string;
+    disabled?: boolean;
+    /** Options with the same `group` are rendered under one heading, in first-seen order. */
+    group?: string;
+}
+/** Radix root. Use the parts below to compose; or use the `Select` shorthand. */
+export declare const SelectRoot: React.FC<SelectPrimitive.SelectProps>;
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    size?: "sm" | "md" | "lg";
+    /** `"default"` field look · `"ghost"` borderless (table cells, toolbars) · `"pill"` rounded (filter bars). */
+    variant?: "default" | "ghost" | "pill";
+    invalid?: boolean;
+    /** Read-only look: dashed border, no chevron, does not open. */
+    readOnly?: boolean;
+    /** Spinner in place of the chevron. */
+    loading?: boolean;
+    /** Announced as `aria-required` (set `required` on the root for form validation). */
+    required?: boolean;
+}
+/**
+ * The button that shows the value. Uses `controlVariants`, so it lines up with Input.
+ * Reads the surrounding Field (id, description, invalid, disabled).
+ */
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Shows the selected item's text, or the placeholder. Children override the rendering. */
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    /** Item density inside the list. Default follows the trigger size. */
+    itemSize?: "sm" | "md";
+}
+/**
+ * The floating list. Popper-positioned under the trigger, at least as wide as it, portalled into
+ * the nearest ThemeScope, and one layer deep (glass blur only at depth 1).
+ */
+export declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    icon?: React.ReactNode;
+    /** Second line, shown in the list only (the trigger shows the label). */
+    description?: React.ReactNode;
+}
+/**
+ * One option. Typeahead uses a locale-folded copy of the text, so typing "i" finds "İstanbul"
+ * and "c" finds "Çanakkale". Pass `textValue` when children aren't plain text.
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface SelectGroupProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+    /** Heading for the group (or put a `SelectLabel` first). */
+    label?: React.ReactNode;
+}
+/** Groups items under a heading; announced as a group. */
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectProps<V extends string = string> {
+    /** Selected value; `null` = nothing selected (controlled). */
+    value?: V | null;
+    defaultValue?: V | null;
+    /** Called with the new value, or `null` after clearing. */
+    onValueChange?: (value: V | null) => void;
+    /** Options shorthand. Or compose `SelectItem` / `SelectGroup` / `SelectSeparator` as children. */
+    items?: SelectOption<V>[];
+    children?: React.ReactNode;
+    /** Text shown while nothing is selected. Default "Select…". */
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost" | "pill";
+    /** Show a clear (×) button while there is a value. Clearing yields `null`. */
+    clearable?: boolean;
+    /** Form field name — Radix renders a native `<select>` for FormData. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Read-only: focusable and announced, but doesn't open. */
+    readOnly?: boolean;
+    /** Options are still loading: spinner in the trigger and a status row in the list. */
+    loading?: boolean;
+    /** Custom trigger content for the selected option (`items` shorthand only). */
+    renderValue?: (item: SelectOption<V>) => React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Classes for the trigger (alias of `triggerClassName`). */
+    className?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    /** Built-in string overrides (`select` namespace). */
+    labels?: Partial<SelectLabels>;
+}
+/**
+ * Pick one of a small, fixed set (≤ ~15): content status, currency, department, sort order.
+ * For longer or searchable lists use Combobox. WAI-ARIA select-only combobox on Radix:
+ * arrow keys, Home/End, typeahead (locale-folded), Esc.
+ *
+ * ```tsx
+ * <Field label="Status">
+ *   <Select name="status" defaultValue="draft" items={[
+ *     { value: "draft", label: "Draft", description: "Only editors can see it" },
+ *     { value: "published", label: "Published" },
+ *   ]} />
+ * </Field>
+ * ```
+ */
+export declare const Select: <V extends string = string>(props: SelectProps<V> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.ReactElement;
+export {};

package/dist/components/select.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { Check, ChevronDown, ChevronUp, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFieldContext, useFieldControl } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { Layer } from "../lib/layer.js";
+import { useLocale } from "../lib/locale.js";
+import { foldText } from "../lib/text.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { controlVariants, itemSlots, itemVariants } from "../lib/variants.js";
+import { Spinner } from "./spinner.js";
+const selectLabels = {
+    placeholder: "Select…",
+    clear: "Clear selection",
+    loading: "Loading options…",
+    empty: "No options",
+};
+const SelectContext = React.createContext({ size: "md", itemSize: "md" });
+/* ------------------------------------------------------------------ */
+/* Composite parts                                                     */
+/* ------------------------------------------------------------------ */
+/** Radix root. Use the parts below to compose; or use the `Select` shorthand. */
+export const SelectRoot = SelectPrimitive.Root;
+/**
+ * The button that shows the value. Uses `controlVariants`, so it lines up with Input.
+ * Reads the surrounding Field (id, description, invalid, disabled).
+ */
+export const SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = "md", variant = "default", invalid, readOnly, loading, children, ...rest }, ref) {
+    const props = useFieldControl({ ...rest, readOnly, "aria-invalid": invalid ? true : rest["aria-invalid"] });
+    const { readOnly: ro, required, name: _name, ...triggerProps } = props;
+    void _name;
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, "data-readonly": ro ? "" : undefined, "aria-readonly": ro || undefined, "aria-required": required || undefined, "aria-busy": loading || undefined, className: cn(controlVariants({ size, variant: variant === "pill" ? "default" : variant, pill: variant === "pill" }), "justify-between text-start whitespace-nowrap cursor-default", "data-placeholder:text-fg-subtle [&>span]:min-w-0 [&>span]:truncate", ro && "cursor-default", className), ...triggerProps, children: [children, loading ? (_jsx(Spinner, { size: size === "lg" ? "md" : "sm", tone: "muted" })) : ro ? null : (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-transform duration-150 [[data-state=open]>&]:rotate-180" }) }))] }));
+});
+/** Shows the selected item's text, or the placeholder. Children override the rendering. */
+export const SelectValue = React.forwardRef(function SelectValue({ className, ...props }, ref) {
+    return _jsx(SelectPrimitive.Value, { ref: ref, "data-slot": "select-value", className: cn("min-w-0 truncate", className), ...props });
+});
+/**
+ * The floating list. Popper-positioned under the trigger, at least as wide as it, portalled into
+ * the nearest ThemeScope, and one layer deep (glass blur only at depth 1).
+ */
+export const SelectContent = React.forwardRef(function SelectContent({ className, children, position = "popper", sideOffset = 6, collisionPadding = 12, itemSize, ...props }, ref) {
+    const container = usePortalContainer();
+    const parent = React.useContext(SelectContext);
+    const ctx = React.useMemo(() => ({ ...parent, itemSize: itemSize ?? parent.itemSize }), [parent, itemSize]);
+    return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", position: position, sideOffset: position === "popper" ? sideOffset : undefined, collisionPadding: collisionPadding, className: cn("surface-popover ui-pop relative z-(--z-popover) overflow-hidden rounded-ui-lg", position === "popper" &&
+                    "max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) max-w-[min(28rem,calc(100vw-1.5rem))]", className), ...props, children: [_jsx(SelectPrimitive.ScrollUpButton, { className: "flex h-6 items-center justify-center text-fg-subtle", children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-4" }) }), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" && "max-h-[min(22rem,var(--radix-select-content-available-height))]"), children: _jsx(SelectContext.Provider, { value: ctx, children: children }) }), _jsx(SelectPrimitive.ScrollDownButton, { className: "flex h-6 items-center justify-center text-fg-subtle", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-4" }) })] }) }) }));
+});
+/**
+ * One option. Typeahead uses a locale-folded copy of the text, so typing "i" finds "İstanbul"
+ * and "c" finds "Çanakkale". Pass `textValue` when children aren't plain text.
+ */
+export const SelectItem = React.forwardRef(function SelectItem({ className, children, icon, description, textValue, ...props }, ref) {
+    const { itemSize } = React.useContext(SelectContext);
+    const { locale } = useLocale();
+    const plain = textValue ?? (typeof children === "string" ? children : undefined);
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", textValue: plain !== undefined ? foldText(plain, locale) : undefined, className: cn(itemVariants({ size: itemSize }), "pe-8", description ? "items-start" : undefined, className), ...props, children: [icon ? _jsx("span", { className: cn(itemSlots.icon, "flex items-center justify-center", description && "mt-0.5"), children: icon }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx(SelectPrimitive.ItemText, { children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [icon ? _jsx("span", { "aria-hidden": true, className: "hidden items-center text-fg-muted [[data-slot=select-trigger]_&]:flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }) }), description ? _jsx("span", { className: itemSlots.description, children: description }) : null] }), _jsx("span", { className: cn("absolute end-2 flex size-4 items-center justify-center text-accent-ink", description && "top-2"), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.5, className: "size-4" }) }) })] }));
+});
+/** Groups items under a heading; announced as a group. */
+export const SelectGroup = React.forwardRef(function SelectGroup({ label, children, ...props }, ref) {
+    return (_jsxs(SelectPrimitive.Group, { ref: ref, "data-slot": "select-group", ...props, children: [label != null ? _jsx(SelectLabel, { children: label }) : null, children] }));
+});
+export const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+    return _jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn(itemSlots.groupLabel, className), ...props });
+});
+export const SelectSeparator = React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
+    return _jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn(itemSlots.separator, className), ...props });
+});
+function groupItems(items) {
+    const groups = [];
+    const byName = new Map();
+    for (const item of items) {
+        const key = item.group ?? "";
+        let g = byName.get(key);
+        if (!g) {
+            g = { label: item.group, items: [] };
+            byName.set(key, g);
+            groups.push(g);
+        }
+        g.items.push(item);
+    }
+    return groups;
+}
+function SelectInner({ value: valueProp, defaultValue, onValueChange, items, children, placeholder, size = "md", variant = "default", clearable, name, required, disabled, invalid, readOnly, loading, renderValue, open: openProp, defaultOpen, onOpenChange, className, triggerClassName, contentClassName, labels, ...aria }, ref) {
+    const t = useLabels("select", selectLabels, labels);
+    const field = useFieldContext();
+    const isDisabled = disabled ?? (field?.disabled || undefined);
+    const isReadOnly = readOnly ?? (field?.readOnly || undefined);
+    const isRequired = required ?? (field?.required || undefined);
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "Select" });
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen ?? false, onChange: onOpenChange, name: "Select" });
+    const triggerRef = React.useRef(null);
+    const ctx = React.useMemo(() => ({ size, itemSize: size === "sm" ? "sm" : "md" }), [size]);
+    const selected = items?.find((i) => i.value === value);
+    const showClear = clearable && value !== null && !isDisabled && !isReadOnly;
+    return (_jsx(SelectContext.Provider, { value: ctx, children: _jsxs(SelectPrimitive.Root
+        // Radix treats "" as "no selection" and shows the placeholder.
+        , { 
+            // Radix treats "" as "no selection" and shows the placeholder.
+            value: value ?? "", onValueChange: (v) => setValue(v === "" ? null : v), open: isReadOnly ? false : open, onOpenChange: (o) => {
+                if (!isReadOnly)
+                    setOpen(o);
+            }, name: name ?? field?.name, required: isRequired, disabled: isDisabled, children: [_jsxs("div", { "data-slot": "select", className: "relative w-full min-w-0", children: [_jsx(SelectTrigger, { ref: (node) => {
+                                triggerRef.current = node;
+                                if (typeof ref === "function")
+                                    ref(node);
+                                else if (ref)
+                                    ref.current = node;
+                            }, size: size, variant: variant, invalid: invalid, readOnly: isReadOnly, loading: loading, disabled: isDisabled, required: isRequired, className: cn(showClear && (size === "sm" ? "pe-12" : "pe-14"), className, triggerClassName), ...aria, children: _jsx(SelectValue, { placeholder: placeholder ?? t("placeholder"), children: selected ? (renderValue ? (renderValue(selected)) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [selected.icon ? _jsx("span", { "aria-hidden": true, className: "flex items-center text-fg-muted", children: selected.icon }) : null, _jsx("span", { className: "truncate", children: selected.label })] }))) : undefined }) }), showClear ? (_jsx("button", { type: "button", "data-slot": "select-clear", "aria-label": t("clear"), onClick: () => {
+                                setValue(null);
+                                triggerRef.current?.focus();
+                            }, className: cn("absolute top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-full text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring", size === "sm" ? "end-7 size-5 [&_svg]:size-3" : "end-8 size-6 [&_svg]:size-3.5"), children: _jsx(X, { "aria-hidden": true }) })) : null] }), _jsxs(SelectContent, { className: contentClassName, children: [items
+                            ? groupItems(items).map((g, gi) => {
+                                const rendered = g.items.map((item) => (_jsx(SelectItem, { value: item.value, icon: item.icon, description: item.description, disabled: item.disabled, textValue: item.label, children: item.label }, item.value)));
+                                return g.label ? (_jsxs(React.Fragment, { children: [gi > 0 ? _jsx(SelectSeparator, {}) : null, _jsx(SelectGroup, { label: g.label, children: rendered })] }, g.label)) : (_jsx(React.Fragment, { children: rendered }, `_${gi}`));
+                            })
+                            : children, loading ? (_jsxs("div", { role: "status", className: "flex items-center gap-2 px-2 py-2 text-[13px] text-fg-muted", children: [_jsx(Spinner, { size: "xs", tone: "muted" }), t("loading")] })) : items && items.length === 0 ? (_jsx("div", { className: "px-2 py-2 text-[13px] text-fg-subtle", children: t("empty") })) : null] })] }) }));
+}
+/**
+ * Pick one of a small, fixed set (≤ ~15): content status, currency, department, sort order.
+ * For longer or searchable lists use Combobox. WAI-ARIA select-only combobox on Radix:
+ * arrow keys, Home/End, typeahead (locale-folded), Esc.
+ *
+ * ```tsx
+ * <Field label="Status">
+ *   <Select name="status" defaultValue="draft" items={[
+ *     { value: "draft", label: "Draft", description: "Only editors can see it" },
+ *     { value: "published", label: "Published" },
+ *   ]} />
+ * </Field>
+ * ```
+ */
+export const Select = React.forwardRef(SelectInner);

package/dist/components/separator.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+export declare const separatorVariants: (props?: ({
+    tone?: "nav" | "strong" | "line" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, "orientation">, Omit<VariantProps<typeof separatorVariants>, "orientation"> {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Purely visual (default `true`): hidden from assistive tech. Set `false` when the separator
+     * divides meaningful groups (toolbars, menus) so it is announced as `role="separator"`.
+     */
+    decorative?: boolean;
+    /** Text in the middle of a horizontal line ("or"). The label is read as normal text. */
+    label?: React.ReactNode;
+    /** Label alignment. Default `"center"`. */
+    labelAlign?: "start" | "center" | "end";
+}
+/**
+ * A hairline divider between content: card sections, menu groups, the "or" on a sign-in form,
+ * toolbar groups. Built on Radix Separator.
+ *
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" className="h-5" />
+ * <Separator label="or continue with" />
+ * ```
+ */
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/separator.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+export const separatorVariants = cva("shrink-0 border-0", {
+    variants: {
+        tone: {
+            line: "bg-line",
+            strong: "bg-field-border",
+            nav: "bg-nav-line",
+        },
+        orientation: {
+            horizontal: "h-px w-full",
+            vertical: "w-px self-stretch",
+        },
+        inset: { true: "" },
+    },
+    compoundVariants: [
+        { orientation: "horizontal", inset: true, className: "mx-auto w-[calc(100%-2*var(--gap))]" },
+        { orientation: "vertical", inset: true, className: "my-1.5" },
+    ],
+    defaultVariants: { tone: "line", orientation: "horizontal" },
+});
+/**
+ * A hairline divider between content: card sections, menu groups, the "or" on a sign-in form,
+ * toolbar groups. Built on Radix Separator.
+ *
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" className="h-5" />
+ * <Separator label="or continue with" />
+ * ```
+ */
+export const Separator = React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, tone, inset, label, labelAlign = "center", ...props }, ref) {
+    if (label != null && orientation === "horizontal") {
+        const line = _jsx(SeparatorPrimitive.Root, { decorative: true, className: cn(separatorVariants({ tone, orientation: "horizontal" }), "w-auto flex-1") });
+        return (_jsxs("div", { ref: ref, "data-slot": "separator", "data-orientation": "horizontal", className: cn("flex w-full items-center gap-3 text-xs text-fg-subtle", inset && "px-(--gap)", className), ...props, children: [labelAlign !== "start" ? line : null, _jsx("span", { className: "shrink-0 tracking-[0.01em]", children: label }), labelAlign !== "end" ? line : null] }));
+    }
+    return (_jsx(SeparatorPrimitive.Root, { ref: ref, "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn(separatorVariants({ tone, orientation, inset }), className), ...props }));
+});