@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/top-bar.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, Menu, Search } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { IconButton } from "./button.js";
+import { KbdGroup } from "./kbd.js";
+import { Avatar } from "./avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuEntries, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { useCommandPalette } from "./command.js";
+const topBarLabels = {
+    search: "Search or run a command…",
+    searchShort: "Search",
+    menu: "Open menu",
+    account: "Account menu for {name}",
+};
+/**
+ * Bridge between the top bar and the App shell (mobile nav button). App shell provides it; outside
+ * a shell the menu button needs its own `onClick`.
+ */
+export const TopBarShellContext = React.createContext(null);
+/**
+ * The sticky bar above the content: mobile menu button, ⌘K search, contextual actions,
+ * notifications and the user menu. The same in every app.
+ *
+ * ```tsx
+ * <TopBar>
+ *   <TopBarStart><TopBarMenuButton /></TopBarStart>
+ *   <TopBarSearch />
+ *   <TopBarSpacer />
+ *   <TopBarActions><NotificationCenter adapter={inbox} /><UserMenu name="Ada Lovelace" items={account} /></TopBarActions>
+ * </TopBar>
+ * ```
+ */
+export const TopBar = React.forwardRef(function TopBar({ sticky = true, variant = "bar", scrollTarget, className, role, ...props }, ref) {
+    const [scrolled, setScrolled] = React.useState(false);
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const el = scrollTarget?.current;
+        const read = () => setScrolled((el ? el.scrollTop : window.scrollY) > 4);
+        read();
+        const target = el ?? window;
+        target.addEventListener("scroll", read, { passive: true });
+        return () => target.removeEventListener("scroll", read);
+    }, [scrollTarget]);
+    return (_jsx("header", { ref: ref, role: role ?? "banner", "data-slot": "top-bar", "data-variant": variant, "data-scrolled": scrolled ? "" : undefined, className: cn("vui-top-bar surface-bar @container/topbar flex h-(--topbar-h) min-w-0 shrink-0 items-center gap-2 px-3 sm:gap-3 sm:px-5 lg:px-6", "transition-[background-color,border-color] duration-200", sticky && "sticky top-0 z-(--z-sticky)", className), ...props }));
+});
+/** Leading slot: menu button, breadcrumb. */
+export function TopBarStart({ className, ...props }) {
+    return _jsx("div", { "data-slot": "top-bar-start", className: cn("flex min-w-0 items-center gap-2", className), ...props });
+}
+/** Pushes the following slots to the end. */
+export function TopBarSpacer({ className }) {
+    return _jsx("div", { "aria-hidden": true, "data-slot": "top-bar-spacer", className: cn("min-w-0 flex-1", className) });
+}
+/** Trailing slot: theme switch, notifications, "New", user menu. */
+export function TopBarActions({ className, ...props }) {
+    return _jsx("div", { "data-slot": "top-bar-actions", className: cn("flex shrink-0 items-center gap-1 sm:gap-1.5", className), ...props });
+}
+/** A short vertical rule between action groups. */
+export function TopBarSeparator({ className }) {
+    return _jsx("span", { "aria-hidden": true, "data-slot": "top-bar-separator", className: cn("mx-1 h-5 w-px shrink-0 bg-line", className) });
+}
+/** Opens the App shell's mobile navigation. Visible only below 768px. */
+export const TopBarMenuButton = React.forwardRef(function TopBarMenuButton({ className, onClick, labels, ...props }, ref) {
+    const shell = React.useContext(TopBarShellContext);
+    const t = useLabels("topBar", topBarLabels, labels);
+    return (_jsx(IconButton, { ref: ref, label: t("menu"), size: "sm", tooltip: false, "aria-expanded": shell ? shell.mobileNavOpen : undefined, "aria-haspopup": "dialog", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                shell?.openMobileNav();
+        }, className: cn(shell ? "@min-[768px]/shell:hidden" : "md:hidden", "-ms-1", className), ...props, children: _jsx(Menu, {}) }));
+});
+/**
+ * The ⌘K trigger: a real button that looks like a field. Collapses to an icon button when the bar is
+ * narrower than 560px.
+ */
+export const TopBarSearch = React.forwardRef(function TopBarSearch({ placeholder, shortcut = "mod+k", onOpen, onClick, className, labels, ...props }, ref) {
+    const t = useLabels("topBar", topBarLabels, labels);
+    const palette = useCommandPalette();
+    const open = (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (onOpen)
+            onOpen();
+        else
+            palette.open();
+    };
+    const text = placeholder ?? t("search");
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: ref, type: "button", "aria-haspopup": "dialog", "aria-keyshortcuts": shortcut ? "Meta+K Control+K" : undefined, onClick: open, "data-slot": "top-bar-search", className: cn("group flex h-[calc(var(--control-h)-0.5rem)] w-full max-w-80 min-w-0 items-center gap-2 rounded-full border border-field-border bg-field ps-3 pe-1.5 text-[13px] text-fg-subtle", "transition-[border-color,background-color] hover:border-field-border-hover focus-ring @max-[560px]/topbar:hidden", className), ...props, children: [_jsx(Search, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-start", children: text }), shortcut ? _jsx(KbdGroup, { keys: shortcut, size: "sm", className: "shrink-0" }) : null] }), _jsx(IconButton, { label: t("searchShort"), size: "sm", tooltip: false, "aria-haspopup": "dialog", onClick: open, className: "hidden @max-[560px]/topbar:inline-flex", children: _jsx(Search, {}) })] }));
+});
+/** The avatar button with the account menu. */
+export function UserMenu({ name, email, avatar, items, showName, children, align = "end", className, labels }) {
+    const t = useLabels("topBar", topBarLabels, labels);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-slot": "user-menu-trigger", className: cn("flex shrink-0 items-center gap-2 rounded-full p-0.5 transition-colors hover:bg-hover focus-ring", showName && "pe-2", className), children: [_jsx("span", { className: "sr-only", children: t("account", { name }) }), _jsx(Avatar, { name: name, src: avatar, size: "sm", "aria-hidden": true }), showName ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "max-w-32 truncate text-[13px] font-medium text-fg", children: name }), _jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5 text-fg-subtle" })] })) : null] }) }), _jsxs(DropdownMenuContent, { align: align, className: "min-w-60", children: [_jsxs("div", { className: "flex items-center gap-2.5 px-2 pt-1.5 pb-2", children: [_jsx(Avatar, { name: name, src: avatar, size: "md", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("p", { className: "truncate text-[13.5px] font-medium text-fg", children: name }), email ? _jsx("p", { className: "truncate text-xs text-fg-subtle", children: email }) : null] })] }), children, _jsx("div", { role: "none", className: "-mx-1 my-1 h-px bg-line" }), _jsx(DropdownMenuEntries, { items: items })] })] }));
+}

package/dist/components/tour.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+export declare const tourLabels: {
+    next: string;
+    back: string;
+    done: string;
+    skip: string;
+    progress: string;
+};
+export type TourLabels = typeof tourLabels;
+export interface TourStep {
+    /** Stable key (defaults to the index). */
+    id?: string;
+    /**
+     * What to highlight: a CSS selector (`"[data-tour=new-order]"`), a ref, or a function.
+     * Missing or not found → the card shows centred without a spotlight.
+     */
+    target?: string | React.RefObject<Element | null> | (() => Element | null);
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Extra body under the description (an illustration, a shortcut hint). */
+    content?: React.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    /** Space between the target and the spotlight edge, px. Default `6`. */
+    padding?: number;
+    /** Spotlight corner radius, px. Default `10`. */
+    radius?: number;
+}
+export interface TourProps {
+    steps: TourStep[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Current step index (controlled). */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    /** "Done" on the last step. The tour closes afterwards. */
+    onComplete?: () => void;
+    /** Closed early (skip button or Escape) on step `index`. */
+    onSkip?: (index: number) => void;
+    /** Clicking the dimmed page closes the tour. Default `false`. */
+    dismissible?: boolean;
+    /** Card class (width, etc.). */
+    className?: string;
+    labels?: Partial<TourLabels>;
+}
+/**
+ * Guided product tour: dims the page, cuts a spotlight around each target and anchors a step
+ * card to it. Back / Next / Done, arrow keys between steps, Escape to skip. The card is a modal
+ * dialog labelled by the step title; focus returns to where it was when the tour ends.
+ *
+ * ```tsx
+ * <Tour open={open} onOpenChange={setOpen} steps={[
+ *   { target: "[data-tour=search]", title: "Search everything", description: "Press ⌘K from any page." },
+ *   { target: "[data-tour=new]", title: "Create", description: "Orders, customers and products start here.", side: "left" },
+ * ]} />
+ * ```
+ */
+export declare function Tour({ steps, open: openProp, defaultOpen, onOpenChange, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, dismissible, className, labels }: TourProps): React.JSX.Element | null;

package/dist/components/tour.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useReducedMotion } from "../lib/use-reduced-motion.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { Button } from "./button.js";
+export const tourLabels = {
+    next: "Next",
+    back: "Back",
+    done: "Done",
+    skip: "Skip tour",
+    progress: "Step {current} of {total}",
+};
+function resolveTarget(target) {
+    if (!target || typeof document === "undefined")
+        return null;
+    if (typeof target === "string")
+        return document.querySelector(target);
+    if (typeof target === "function")
+        return target();
+    return target.current;
+}
+const sameBox = (a, b) => a === b || (!!a && !!b && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height);
+/**
+ * Guided product tour: dims the page, cuts a spotlight around each target and anchors a step
+ * card to it. Back / Next / Done, arrow keys between steps, Escape to skip. The card is a modal
+ * dialog labelled by the step title; focus returns to where it was when the tour ends.
+ *
+ * ```tsx
+ * <Tour open={open} onOpenChange={setOpen} steps={[
+ *   { target: "[data-tour=search]", title: "Search everything", description: "Press ⌘K from any page." },
+ *   { target: "[data-tour=new]", title: "Create", description: "Orders, customers and products start here.", side: "left" },
+ * ]} />
+ * ```
+ */
+export function Tour({ steps, open: openProp, defaultOpen = false, onOpenChange, step: stepProp, defaultStep = 0, onStepChange, onComplete, onSkip, dismissible = false, className, labels }) {
+    const t = useLabels("tour", tourLabels, labels);
+    const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, name: "Tour" });
+    const [rawIndex, setIndex] = useControllableState({ value: stepProp, defaultValue: defaultStep, onChange: onStepChange, name: "Tour" });
+    const index = Math.max(0, Math.min(steps.length - 1, rawIndex));
+    const current = steps[index];
+    const reduced = useReducedMotion();
+    const container = usePortalContainer();
+    const titleId = React.useId();
+    const descId = React.useId();
+    const [box, setBox] = React.useState(null);
+    const boxRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const pad = current?.padding ?? 6;
+    const radius = current?.radius ?? 10;
+    // Track the target's position every frame while open (layout shifts, scrolling, resizes).
+    React.useEffect(() => {
+        if (!open || !current)
+            return;
+        let frame = 0;
+        let scrolled = false;
+        const measure = () => {
+            const el = resolveTarget(current.target);
+            let next = null;
+            if (el) {
+                const r = el.getBoundingClientRect();
+                if (r.width || r.height)
+                    next = { top: r.top - pad, left: r.left - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
+                if (!scrolled) {
+                    scrolled = true;
+                    const vh = window.innerHeight;
+                    const vw = window.innerWidth;
+                    if (r.top < 0 || r.bottom > vh || r.left < 0 || r.right > vw)
+                        el.scrollIntoView({ block: "center", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+                }
+                el.setAttribute("data-tour-active", "");
+            }
+            if (!sameBox(boxRef.current, next)) {
+                boxRef.current = next;
+                setBox(next);
+            }
+            frame = requestAnimationFrame(measure);
+        };
+        measure();
+        return () => {
+            cancelAnimationFrame(frame);
+            resolveTarget(current.target)?.removeAttribute("data-tour-active");
+        };
+    }, [open, current, pad, reduced]);
+    // The card anchors to the spotlight, or to the viewport centre when there is no target.
+    const anchorRef = React.useRef({
+        getBoundingClientRect: () => {
+            const b = boxRef.current;
+            if (b)
+                return DOMRect.fromRect({ x: b.left, y: b.top, width: b.width, height: b.height });
+            return DOMRect.fromRect({ x: window.innerWidth / 2, y: window.innerHeight * 0.3, width: 0, height: 0 });
+        },
+    });
+    if (!current)
+        return null;
+    const last = index === steps.length - 1;
+    const close = (completed) => {
+        setOpen(false);
+        if (completed)
+            onComplete?.();
+        else
+            onSkip?.(index);
+    };
+    const go = (to) => {
+        if (to < 0)
+            return;
+        if (to >= steps.length)
+            return close(true);
+        setIndex(to);
+    };
+    const onKeyDown = (e) => {
+        const tag = e.target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || e.target.isContentEditable)
+            return;
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        if (e.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+            e.preventDefault();
+            go(index + 1);
+        }
+        else if (e.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+            e.preventDefault();
+            go(index - 1);
+        }
+    };
+    const transition = reduced ? undefined : "top 280ms cubic-bezier(.2,.7,.2,1), left 280ms cubic-bezier(.2,.7,.2,1), width 280ms cubic-bezier(.2,.7,.2,1), height 280ms cubic-bezier(.2,.7,.2,1)";
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: (o) => (!o ? close(false) : setOpen(true)), modal: true, children: [_jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), open ? (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx("div", { "data-slot": "tour-overlay", "aria-hidden": "true", className: "ui-fade pointer-events-auto fixed inset-0 z-(--z-overlay)", children: box ? (_jsx("div", { "data-slot": "tour-spotlight", className: "absolute outline-2 outline-offset-0 outline-[var(--ring)]", style: { top: box.top, left: box.left, width: box.width, height: box.height, borderRadius: radius, boxShadow: "0 0 0 200vmax var(--overlay)", transition } })) : (_jsx("div", { className: "absolute inset-0 bg-overlay" })) }) })) : null, _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: contentRef, "data-slot": "tour-card", side: box ? (current.side ?? "bottom") : "bottom", align: box ? (current.align ?? "center") : "center", sideOffset: box ? 12 : 0, collisionPadding: 16, updatePositionStrategy: "always", "aria-labelledby": titleId, "aria-describedby": current.description ? descId : undefined, onOpenAutoFocus: (e) => {
+                            e.preventDefault();
+                            contentRef.current?.focus();
+                        }, onInteractOutside: (e) => {
+                            if (!dismissible)
+                                e.preventDefault();
+                        }, onKeyDown: onKeyDown, className: cn("surface-popover ui-pop z-(--z-popover) w-80 max-w-[calc(100vw-2rem)] rounded-ui-lg p-4 outline-none", className), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx("p", { className: "text-[11px] font-medium tracking-[0.06em] text-fg-subtle uppercase tabular", children: t("progress", { current: index + 1, total: steps.length }) }), _jsx("h2", { id: titleId, className: "text-[15px] leading-snug font-semibold tracking-[-0.01em] text-fg", children: current.title })] }), _jsx(PopoverPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t("skip"), title: t("skip"), className: "-me-1.5 -mt-1 shrink-0", children: _jsx(X, { "aria-hidden": "true" }) }) })] }), current.description ? (_jsx("p", { id: descId, className: "mt-2 text-[13px] leading-relaxed text-fg-muted", children: current.description })) : null, current.content ? _jsx("div", { className: "mt-3", children: current.content }) : null, _jsxs("div", { className: "mt-4 flex items-center gap-2", children: [_jsx("ol", { "aria-hidden": "true", className: "me-auto flex items-center gap-1", children: steps.map((s, i) => (_jsx("li", { className: cn("h-1.5 rounded-full transition-[width,background-color] duration-300 motion-reduce:transition-none", i === index ? "w-4 bg-accent" : i < index ? "w-1.5 bg-fg-muted" : "w-1.5 bg-track") }, s.id ?? i))) }), index > 0 ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => go(index - 1), children: t("back") })) : null, _jsx(Button, { size: "sm", variant: "primary", onClick: () => go(index + 1), children: last ? t("done") : t("next") })] })] }, current.id ?? index) }) })] }));
+}

package/dist/components/tree-select.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { type TreeCheckValueMode, type TreeNode } from "../lib/use-tree.js";
+declare const treeSelectLabels: {
+    placeholder: string;
+    placeholderMultiple: string;
+    search: string;
+    empty: string;
+    noMatches: string;
+    results: string;
+    addChild: string;
+    addUnder: string;
+    addRoot: string;
+    newName: string;
+    create: string;
+    cancel: string;
+    clear: string;
+    selectedCount: string;
+};
+export type TreeSelectLabels = typeof treeSelectLabels;
+interface TreeSelectBaseProps {
+    /** The hierarchy (categories, departments, folders, accounts). */
+    nodes: TreeNode[];
+    /** Loads children of nodes with `hasChildren` on first expand. */
+    loadChildren?: (node: TreeNode, signal: AbortSignal) => Promise<TreeNode[]>;
+    /** Can parents be chosen, or only leaves? Default `"any"`. */
+    selectable?: "leaf" | "any";
+    /** Trigger shows the full path ("Electronics › Phones"). Default `true`. */
+    showPath?: boolean;
+    /** Initially expanded ids, or `"selected"` to open the branches of the value. Default `"selected"`. */
+    defaultExpanded?: string[] | "selected";
+    /** "Add category": create under the focused node (or at the top level). Add the returned node to `nodes` too. */
+    onCreate?: (parentId: string | null, label: string) => TreeNode | Promise<TreeNode>;
+    /** Show the search box. Default `true`. */
+    searchable?: boolean;
+    /** `"inline"` renders the tree without a popover (category box in an editor side panel). */
+    mode?: "popover" | "inline";
+    /** Max height of the tree list in px. Default 288. */
+    height?: number;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    searchPlaceholder?: string;
+    /** Hidden input name(s) (multi → repeated). */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<TreeSelectLabels>;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}
+export interface TreeSelectSingleProps extends TreeSelectBaseProps {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (id: string | null, node: TreeNode | null) => void;
+    cascade?: never;
+    valueMode?: never;
+}
+export interface TreeSelectMultipleProps extends TreeSelectBaseProps {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (ids: string[]) => void;
+    /** Checking a parent checks its descendants (tri-state). Default `true`. */
+    cascade?: boolean;
+    /** What a fully-checked branch yields. Default `"all"`. */
+    valueMode?: TreeCheckValueMode;
+}
+export type TreeSelectProps = TreeSelectSingleProps | TreeSelectMultipleProps;
+/**
+ * Pick from hierarchical data — product categories, departments, locations and warehouses,
+ * folder destinations, chart of accounts. A searchable tree in a popover (or inline), single or
+ * multi with tri-state cascade, lazy branches, search that keeps ancestors, and "Add category".
+ *
+ * ```tsx
+ * <Field label="Category"><TreeSelect nodes={categories} selectable="leaf" value={categoryId} onValueChange={setCategoryId} /></Field>
+ * <TreeSelect multiple nodes={regions} valueMode="parent" value={territories} onValueChange={setTerritories} />
+ * ```
+ */
+export declare const TreeSelect: React.ForwardRefExoticComponent<TreeSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/tree-select.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { ChevronsUpDown, Plus, Search, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { FieldContextReset, useFieldControl } from "../lib/field-context.js";
+import { ChipRemoveButton } from "../lib/islands.js";
+import { useLabels } from "../lib/labels.js";
+import { Layer } from "../lib/layer.js";
+import { useLocale } from "../lib/locale.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { useControllableState, useLatest } from "../lib/use-controllable-state.js";
+import { useTree } from "../lib/use-tree.js";
+import { controlVariants } from "../lib/variants.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+import { TreeViewRow } from "./tree-view.js";
+const treeSelectLabels = {
+    placeholder: "Select…",
+    placeholderMultiple: "Add…",
+    search: "Search…",
+    empty: "Nothing to choose from",
+    noMatches: "No matches for “{query}”",
+    results: "{count, plural, =0 {No matches} one {# match} other {# matches}}",
+    addChild: "Add",
+    addUnder: "New item in {parent}",
+    addRoot: "New top-level item",
+    newName: "Name",
+    create: "Create",
+    cancel: "Cancel",
+    clear: "Clear selection",
+    selectedCount: "{count, plural, one {# selected} other {# selected}}",
+};
+const EMPTY = [];
+function ancestorsOf(nodes, ids) {
+    const want = new Set(ids);
+    const out = new Set();
+    const walk = (list, path) => {
+        for (const n of list) {
+            if (want.has(n.id))
+                path.forEach((p) => out.add(p));
+            if (n.children)
+                walk(n.children, [...path, n.id]);
+        }
+    };
+    walk(nodes, []);
+    return [...out];
+}
+function PathSeparator() {
+    return (_jsx("span", { "aria-hidden": true, className: "inline-block px-1 text-fg-subtle rtl:-scale-x-100", children: "\u203A" }));
+}
+/**
+ * Pick from hierarchical data — product categories, departments, locations and warehouses,
+ * folder destinations, chart of accounts. A searchable tree in a popover (or inline), single or
+ * multi with tri-state cascade, lazy branches, search that keeps ancestors, and "Add category".
+ *
+ * ```tsx
+ * <Field label="Category"><TreeSelect nodes={categories} selectable="leaf" value={categoryId} onValueChange={setCategoryId} /></Field>
+ * <TreeSelect multiple nodes={regions} valueMode="parent" value={territories} onValueChange={setTerritories} />
+ * ```
+ */
+export const TreeSelect = React.forwardRef(function TreeSelect(props, ref) {
+    const { nodes, loadChildren, selectable = "any", showPath = true, defaultExpanded = "selected", onCreate, searchable = true, mode = "popover", height = 288, size = "md", placeholder, searchPlaceholder, labels, className, } = props;
+    const multiple = props.multiple === true;
+    const t = useLabels("treeSelect", treeSelectLabels, labels);
+    const { locale, dir } = useLocale();
+    const container = usePortalContainer();
+    const control = useFieldControl({
+        id: props.id,
+        name: props.name,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-describedby": props["aria-describedby"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-invalid": props["aria-invalid"] ?? (props.invalid ? true : undefined),
+    });
+    const disabled = Boolean(control.disabled);
+    const readOnly = Boolean(control.readOnly);
+    const toArray = (v) => (v === undefined ? undefined : Array.isArray(v) ? v : v === null ? [] : [v]);
+    const [ids, setIdsRaw] = useControllableState({
+        value: toArray(props.value),
+        defaultValue: () => toArray(props.defaultValue) ?? EMPTY,
+        name: "TreeSelect",
+    });
+    const onChangeRef = useLatest(props.onValueChange);
+    const [open, setOpen] = useControllableState({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange, name: "TreeSelect" });
+    const [query, setQuery] = React.useState("");
+    const [initialExpanded] = React.useState(() => (defaultExpanded === "selected" ? ancestorsOf(nodes, ids) : defaultExpanded));
+    const triggerRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const tree = useTree({
+        nodes,
+        loadChildren,
+        defaultExpanded: initialExpanded,
+        filter: query,
+        locale,
+        dir,
+        selectionMode: multiple ? "none" : "single",
+        selected: multiple ? undefined : ids,
+        onSelectedChange: multiple
+            ? undefined
+            : (next) => {
+                const id = next[next.length - 1] ?? null;
+                setIdsRaw(id ? [id] : []);
+                onChangeRef.current?.(id, id ? (tree.getNode(id) ?? null) : null);
+                if (mode === "popover") {
+                    setOpen(false);
+                    setQuery("");
+                }
+            },
+        isSelectable: selectable === "leaf" ? (_n, hasChildren) => !hasChildren : undefined,
+        checkable: multiple,
+        checked: multiple ? ids : undefined,
+        onCheckedChange: multiple
+            ? (next) => {
+                setIdsRaw(next);
+                onChangeRef.current?.(next);
+            }
+            : undefined,
+        cascade: multiple ? (props.cascade ?? true) : undefined,
+        checkValueMode: multiple ? (props.valueMode ?? "all") : undefined,
+    });
+    const setIds = (next) => {
+        setIdsRaw(next);
+        if (multiple)
+            onChangeRef.current?.(next);
+        else
+            onChangeRef.current?.(next[0] ?? null, next[0] ? (tree.getNode(next[0]) ?? null) : null);
+    };
+    /* ---------- create ---------- */
+    const [creating, setCreating] = React.useState(null);
+    const [newName, setNewName] = React.useState("");
+    const [saving, setSaving] = React.useState(false);
+    const submitCreate = async () => {
+        if (!onCreate || !creating || !newName.trim())
+            return;
+        setSaving(true);
+        try {
+            const node = await onCreate(creating.parentId, newName.trim());
+            if (creating.parentId)
+                tree.toggleExpanded(creating.parentId, true);
+            setCreating(null);
+            setNewName("");
+            if (multiple)
+                setIds([...ids, node.id]);
+            else
+                setIds([node.id]);
+            requestAnimationFrame(() => tree.focusItem(node.id));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    /* ---------- tree panel ---------- */
+    const onRowClick = (item) => {
+        if (multiple)
+            tree.toggleChecked(item.id);
+        else if (selectable === "leaf" && item.hasChildren)
+            tree.toggleExpanded(item.id);
+        else
+            tree.select(item.id);
+    };
+    const treeProps = tree.getTreeProps();
+    const treeLabel = props["aria-label"] ?? searchPlaceholder ?? t("search");
+    const focusedParent = tree.focusedId ? tree.getNode(tree.focusedId) : undefined;
+    const panel = (_jsxs("div", { "data-slot": "tree-select-panel", className: "flex min-h-0 flex-col", children: [searchable ? (_jsxs("div", { className: "flex items-center gap-2 border-b border-line px-3", children: [_jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 text-fg-subtle" }), _jsx("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder ?? t("search"), placeholder: searchPlaceholder ?? t("search"), autoComplete: "off", spellCheck: false, value: query, disabled: disabled || readOnly, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "ArrowDown" && tree.items[0]) {
+                                e.preventDefault();
+                                tree.focusItem(tree.items[0].id);
+                            }
+                            else if (e.key === "Enter" && tree.filtering) {
+                                e.preventDefault();
+                                const first = tree.items.find((i) => i.match && !i.disabled);
+                                if (first)
+                                    onRowClick(first);
+                            }
+                        }, className: "h-10 min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle [&::-webkit-search-cancel-button]:hidden" })] })) : null, tree.filtering ? (_jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: t("results", { count: tree.matchCount }) })) : null, nodes.length === 0 ? (_jsx("p", { className: "px-3 py-6 text-center text-sm text-fg-muted", children: t("empty") })) : tree.items.length === 0 ? (_jsx("p", { className: "px-3 py-6 text-center text-sm text-fg-muted", children: t("noMatches", { query }) })) : (_jsx("div", { ...treeProps, "aria-label": treeLabel, "aria-labelledby": mode === "inline" ? control["aria-labelledby"] : undefined, "aria-describedby": mode === "inline" ? control["aria-describedby"] : undefined, "aria-invalid": mode === "inline" ? control["aria-invalid"] : undefined, "aria-readonly": readOnly || undefined, className: cn("grid gap-px overflow-y-auto overscroll-contain p-1 outline-none", readOnly && "pointer-events-none"), style: { maxHeight: height }, onKeyDown: (e) => {
+                    if (readOnly && (e.key === " " || e.key === "Enter"))
+                        return;
+                    treeProps.onKeyDown(e);
+                }, children: tree.items.map((item) => (_jsx(TreeViewRow, { item: item, tree: tree, size: size === "lg" ? "md" : "sm", checkbox: multiple, query: query, indent: 14, onRowClick: onRowClick }, item.id))) })), onCreate && !readOnly ? (_jsx("div", { className: "border-t border-line p-1.5", children: creating ? (_jsxs("form", { className: "grid gap-1.5 p-1", onSubmit: (e) => {
+                        e.preventDefault();
+                        void submitCreate();
+                    }, children: [_jsx("label", { className: "text-xs text-fg-muted", htmlFor: `${control.id ?? "tree-select"}-new`, children: creating.parentId ? t("addUnder", { parent: tree.getNode(creating.parentId)?.label ?? "" }) : t("addRoot") }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { id: `${control.id ?? "tree-select"}-new`, autoFocus: true, value: newName, placeholder: t("newName"), onChange: (e) => setNewName(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Escape") {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setCreating(null);
+                                        }
+                                    }, className: cn(controlVariants({ size: "sm" }), "flex-1") }), _jsx(Button, { type: "submit", size: "sm", variant: "primary", loading: saving, disabled: !newName.trim(), children: t("create") })] })] })) : (_jsxs(Button, { size: "xs", variant: "ghost", onMouseDown: (e) => e.preventDefault(), onClick: () => setCreating({ parentId: focusedParent && !focusedParent.disabled ? focusedParent.id : null }), children: [_jsx(Plus, { "aria-hidden": true }), focusedParent ? t("addUnder", { parent: focusedParent.label }) : t("addRoot")] })) })) : null] }));
+    const hidden = control.name
+        ? ids.map((id) => _jsx("input", { type: "hidden", name: control.name, value: id }, id)).concat(ids.length === 0 && !multiple ? [_jsx("input", { type: "hidden", name: control.name, value: "" }, "__empty")] : [])
+        : null;
+    if (mode === "inline") {
+        return (_jsxs("div", { ref: ref, "data-slot": "tree-select", "data-mode": "inline", "aria-invalid": control["aria-invalid"], className: cn("surface-2 overflow-hidden rounded-ui border border-line aria-invalid:border-danger", disabled && "pointer-events-none opacity-50", className), children: [panel, multiple && ids.length ? (_jsx("div", { className: "border-t border-line px-3 py-1.5 text-xs text-fg-subtle", children: t("selectedCount", { count: ids.length }) })) : null, hidden] }));
+    }
+    const labelFor = (id) => {
+        const path = tree.getPath(id);
+        if (!path.length)
+            return { text: id, parts: [id] };
+        const parts = showPath ? path.map((n) => n.label) : [path[path.length - 1].label];
+        return { text: parts.join(" › "), parts };
+    };
+    const triggerA11y = {
+        id: control.id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": control["aria-labelledby"],
+        "aria-describedby": control["aria-describedby"],
+        "aria-invalid": control["aria-invalid"],
+        // No aria-required: not allowed on a button (axe aria-allowed-attr). The Field marks the label.
+        "aria-haspopup": "tree",
+        disabled: disabled || readOnly,
+    };
+    const content = (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(PopoverPrimitive.Content, { "data-slot": "tree-select-content", "aria-label": treeLabel, align: "start", sideOffset: 6, collisionPadding: 12, className: "surface-popover ui-pop z-(--z-popover) w-(--radix-popover-trigger-width) min-w-72 max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-ui-lg outline-none", onOpenAutoFocus: (e) => {
+                    e.preventDefault();
+                    if (searchRef.current)
+                        searchRef.current.focus();
+                    else {
+                        const first = tree.items.find((i) => i.selected || i.checked === true) ?? tree.items[0];
+                        if (first)
+                            tree.focusItem(first.id);
+                    }
+                }, onCloseAutoFocus: () => {
+                    setQuery("");
+                    setCreating(null);
+                }, children: _jsx(FieldContextReset, { children: panel }) }) }) }));
+    if (multiple) {
+        return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Anchor, { asChild: true, children: _jsxs("div", { ref: ref, "data-slot": "tree-select", "data-state": open ? "open" : "closed", "data-readonly": readOnly || undefined, "aria-invalid": control["aria-invalid"], "aria-disabled": disabled || undefined, className: cn(controlVariants({ size, multiline: true }), "min-h-(--control-h) flex-wrap items-center gap-1.5 py-1.5 ps-1.5", className), children: [ids.map((id) => {
+                                const l = labelFor(id);
+                                const leaf = l.parts[l.parts.length - 1];
+                                return (_jsxs("span", { title: l.text, className: "inline-flex h-6 max-w-full min-w-0 items-center gap-1 rounded-full bg-selected ps-2 pe-1.5 text-xs font-medium text-fg", children: [_jsx("span", { className: "truncate", children: leaf }), !readOnly && !disabled ? _jsx(ChipRemoveButton, { itemLabel: leaf, onRemove: () => tree.toggleChecked(id, false) }) : null] }, id));
+                            }), !readOnly ? (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { ref: triggerRef, type: "button", ...triggerA11y, className: "inline-flex h-6 min-w-0 flex-1 items-center gap-1 rounded-ui-sm px-1.5 text-start text-fg-subtle outline-none hover:text-fg focus-visible:text-fg disabled:cursor-not-allowed [&_svg]:size-3.5", children: [_jsx(Plus, { "aria-hidden": true }), _jsx("span", { className: "truncate", children: placeholder ?? t("placeholderMultiple") })] }) })) : null, hidden] }) }), content] }));
+    }
+    const current = ids[0] ? labelFor(ids[0]) : null;
+    const showClear = current && !control.required && !disabled && !readOnly;
+    const loadingAny = tree.items.some((i) => i.loading);
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Anchor, { asChild: true, children: _jsxs("div", { ref: ref, "data-slot": "tree-select", "data-state": open ? "open" : "closed", "data-readonly": readOnly || undefined, "aria-invalid": control["aria-invalid"], "aria-disabled": disabled || undefined, className: cn(controlVariants({ size }), "p-0", className), children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { ref: triggerRef, type: "button", ...triggerA11y, className: cn("flex h-full min-w-0 flex-1 items-center gap-2 rounded-[inherit] ps-3 text-start outline-none disabled:cursor-not-allowed", showClear ? "pe-1" : "pe-3"), children: [current ? (_jsx("span", { className: "flex min-w-0 flex-1 items-center truncate", children: current.parts.map((p, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(PathSeparator, {}) : null, _jsx("span", { className: cn("truncate", i < current.parts.length - 1 ? "shrink text-fg-muted" : "shrink-0 text-fg"), children: p })] }, i))) })) : (_jsx("span", { className: "min-w-0 flex-1 truncate text-fg-subtle", children: placeholder ?? t("placeholder") })), loadingAny && !open ? _jsx(Spinner, { size: "xs", tone: "muted" }) : null, !showClear && !readOnly ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "ms-auto size-4 shrink-0 text-fg-subtle" }) : null] }) }), showClear ? (_jsx("button", { type: "button", "aria-label": t("clear"), onClick: () => {
+                                setIds([]);
+                                triggerRef.current?.focus();
+                            }, className: "me-1.5 inline-flex size-6 shrink-0 items-center justify-center rounded-ui-sm text-fg-subtle hover:bg-hover hover:text-fg focus-ring [&_svg]:size-3.5", children: _jsx(X, { "aria-hidden": true }) })) : null, hidden] }) }), content] }));
+});