veryfront 0.1.1238 → 0.1.1239

package/esm/src/react/components/ui/adapter/builtin/combobox.js

@@ -0,0 +1,204 @@
+/**
+ * Builtin Combobox adapter - the zero-dependency, hand-rolled engine for the
+ * Combobox primitive: a `role="combobox"` text input filtering a `role="listbox"`
+ * of `role="option"`s, with `aria-activedescendant` keyboard navigation
+ * (ArrowUp/Down/Home/End/Enter/Escape) over the *filtered* option set. Filtering,
+ * the option registry, and the active-descendant live here (the adapter), not in
+ * the skin - see {@link ComboboxState}. The floating listbox portals into the
+ * token scope via `Floating`. No `cmdk`/Base UI dependency; those are opt-in
+ * adapters that satisfy the same `ComboboxParts` contract.
+ *
+ * @module react/components/ui/adapter/builtin/combobox
+ */
+import * as React from "react";
+import { createStrictContext } from "../../../create-strict-context.js";
+import { Floating } from "../../floating.js";
+const [ComboboxContext, useCombobox] = createStrictContext("Combobox components", "<Combobox>");
+function ComboboxRoot({ children, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, defaultInputValue, optionLabels = [], onInputValueChange, }) {
+    const listboxId = React.useId();
+    const anchorRef = React.useRef(null);
+    const optionsRef = React.useRef([]);
+    const selectedValue = value ?? defaultValue;
+    const selectedLabel = optionLabels.find((option) => option.value === selectedValue)?.text;
+    const [query, setQueryState] = React.useState(defaultInputValue ?? selectedLabel ?? "");
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const [activeId, setActiveId] = React.useState(undefined);
+    const isValueControlled = value !== undefined;
+    const isOpenControlled = open !== undefined;
+    const currentValue = isValueControlled ? value : internalValue;
+    const isOpen = isOpenControlled ? open : internalOpen;
+    const synchronizedValueRef = React.useRef(defaultInputValue !== undefined || selectedLabel !== undefined ? currentValue : undefined);
+    React.useEffect(() => {
+        if (currentValue === undefined && !isValueControlled)
+            return;
+        if (!isValueControlled && synchronizedValueRef.current === currentValue)
+            return;
+        const label = optionLabels.find((option) => option.value === currentValue)?.text;
+        if (label === undefined) {
+            synchronizedValueRef.current = currentValue;
+            setQueryState((previous) => previous === "" ? previous : "");
+            onInputValueChange?.("");
+            return;
+        }
+        if (synchronizedValueRef.current === currentValue)
+            return;
+        synchronizedValueRef.current = currentValue;
+        setQueryState(label);
+        onInputValueChange?.(label);
+    }, [currentValue, isValueControlled, onInputValueChange, optionLabels]);
+    const matches = React.useCallback((text) => !query || text.toLowerCase().includes(query.toLowerCase()), [query]);
+    const setOpen = React.useCallback((next) => {
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+        if (!next)
+            setActiveId(undefined);
+    }, [isOpenControlled, onOpenChange]);
+    const setQuery = React.useCallback((next) => {
+        setQueryState(next);
+        onInputValueChange?.(next);
+        setActiveId(undefined);
+        if (!isOpenControlled)
+            setInternalOpen(true);
+        onOpenChange?.(true);
+    }, [isOpenControlled, onOpenChange, onInputValueChange]);
+    const select = React.useCallback((nextValue, text) => {
+        if (!isValueControlled)
+            setInternalValue(nextValue);
+        synchronizedValueRef.current = nextValue;
+        onValueChange?.(nextValue);
+        setQueryState(text);
+        onInputValueChange?.(text);
+        setActiveId(undefined);
+        if (!isOpenControlled)
+            setInternalOpen(false);
+        onOpenChange?.(false);
+    }, [isValueControlled, onValueChange, isOpenControlled, onOpenChange, onInputValueChange]);
+    const registerOption = React.useCallback((id, value, text, disabled = false) => {
+        const existing = optionsRef.current.find((o) => o.id === id);
+        if (existing) {
+            existing.value = value;
+            existing.text = text;
+            existing.disabled = disabled;
+        }
+        else {
+            optionsRef.current.push({ id, value, text, disabled });
+        }
+    }, []);
+    const unregisterOption = React.useCallback((id) => {
+        optionsRef.current = optionsRef.current.filter((o) => o.id !== id);
+    }, []);
+    const onInputKeyDown = React.useCallback((event) => {
+        const visible = optionsRef.current.filter((o) => !o.disabled && matches(o.text));
+        const currentIndex = visible.findIndex((o) => o.id === activeId);
+        const move = (nextIndex) => {
+            const clamped = Math.max(0, Math.min(visible.length - 1, nextIndex));
+            setActiveId(visible[clamped]?.id);
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!isOpen)
+                    setOpen(true);
+                else
+                    move(currentIndex + 1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!isOpen)
+                    setOpen(true);
+                else
+                    move(currentIndex <= 0 ? 0 : currentIndex - 1);
+                break;
+            case "Home":
+                if (isOpen && visible.length) {
+                    event.preventDefault();
+                    move(0);
+                }
+                break;
+            case "End":
+                if (isOpen && visible.length) {
+                    event.preventDefault();
+                    move(visible.length - 1);
+                }
+                break;
+            case "Enter": {
+                const active = visible.find((o) => o.id === activeId);
+                if (isOpen && active) {
+                    event.preventDefault();
+                    select(active.value, active.text);
+                }
+                break;
+            }
+            case "Escape":
+                if (isOpen) {
+                    event.preventDefault();
+                    setOpen(false);
+                }
+                break;
+        }
+    }, [matches, activeId, isOpen, setOpen, select]);
+    const ctx = React.useMemo(() => ({
+        query,
+        setQuery,
+        open: isOpen,
+        setOpen,
+        value: currentValue,
+        select,
+        activeId,
+        matches,
+        listboxId,
+        registerOption,
+        unregisterOption,
+        onInputKeyDown,
+        anchorRef,
+    }), [
+        query,
+        setQuery,
+        isOpen,
+        setOpen,
+        currentValue,
+        select,
+        activeId,
+        matches,
+        listboxId,
+        registerOption,
+        unregisterOption,
+        onInputKeyDown,
+    ]);
+    return React.createElement(ComboboxContext.Provider, { value: ctx }, children);
+}
+function ComboboxInputPart({ className, onChange, onKeyDown, onFocus, ref, ...props }) {
+    const ctx = useCombobox();
+    const setRef = React.useCallback((node) => {
+        ctx.anchorRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref != null)
+            ref.current = node;
+    }, [ctx.anchorRef, ref]);
+    return (React.createElement("input", { ref: setRef, role: "combobox", "aria-expanded": ctx.open, "aria-controls": ctx.listboxId, "aria-activedescendant": ctx.activeId, "aria-autocomplete": "list", autoComplete: "off", value: ctx.query, className: className, onChange: (event) => {
+            onChange?.(event);
+            ctx.setQuery(event.target.value);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                ctx.onInputKeyDown(event);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            if (!ctx.open)
+                ctx.setOpen(true);
+        }, ...props }));
+}
+function ComboboxContentPart({ className, children, ref, ...props }) {
+    const ctx = useCombobox();
+    return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: "start", matchTriggerWidth: true, onDismiss: () => ctx.setOpen(false), role: "listbox", id: ctx.listboxId, className: className, contentRef: ref, ...props },
+        React.createElement("div", { className: "p-1.5" }, children)));
+}
+export const builtinCombobox = {
+    Root: ComboboxRoot,
+    Input: ComboboxInputPart,
+    Content: ComboboxContentPart,
+    useCombobox: useCombobox,
+};

package/esm/src/react/components/ui/adapter/builtin/dialog.d.ts

@@ -0,0 +1,3 @@
+import type { DialogParts } from "../contract.js";
+export declare const builtinDialog: DialogParts;
+//# sourceMappingURL=dialog.d.ts.map

package/esm/src/react/components/ui/adapter/builtin/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/dialog.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,eAAO,MAAM,aAAa,EAAE,WAM3B,CAAC"}

package/esm/src/react/components/ui/adapter/builtin/dialog.js

@@ -0,0 +1,20 @@
+/**
+ * Builtin Dialog adapter - a behaviour-preserving wrapper over the existing
+ * `createModalSurfaceParts("Dialog")` machinery (overlay + centered panel,
+ * Escape / overlay-click dismiss, first-focusable focus + restoration). The
+ * default zero-dependency engine; nothing about the rendered output changes
+ * versus the pre-adapter `dialog.tsx`.
+ *
+ * @module react/components/ui/adapter/builtin/dialog
+ */
+import { createModalSurfaceParts } from "../../modal-surface.js";
+// One instance at module scope - distinct from Drawer's so a nested DrawerClose
+// cannot close an enclosing Dialog.
+const parts = createModalSurfaceParts("Dialog");
+export const builtinDialog = {
+    Root: parts.ModalRoot,
+    Trigger: parts.ModalTrigger,
+    Content: parts.ModalContent,
+    Close: parts.ModalClose,
+    useDialog: parts.useModal,
+};

package/esm/src/react/components/ui/adapter/builtin/drawer.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerParts } from "../contract.js";
+export declare const builtinDrawer: DrawerParts;
+//# sourceMappingURL=drawer.d.ts.map

package/esm/src/react/components/ui/adapter/builtin/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/drawer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,eAAO,MAAM,aAAa,EAAE,WAQ3B,CAAC"}

package/esm/src/react/components/ui/adapter/builtin/drawer.js

@@ -0,0 +1,21 @@
+/**
+ * Builtin Drawer adapter - the zero-dependency STATIC bottom sheet: the shared
+ * modal surface (overlay + panel, Escape/outside-click dismiss) assembled as
+ * `DrawerParts`, with the drawer skin supplying the edge-slide layout. No drag
+ * physics. Custom drawer adapters can supply different mechanics through
+ * `UIAdapterProvider`.
+ *
+ * @module react/components/ui/adapter/builtin/drawer
+ */
+import { createModalSurfaceParts } from "../../modal-surface.js";
+// A distinct modal instance from Dialog's, so the two never share open-state.
+const parts = createModalSurfaceParts("Drawer");
+export const builtinDrawer = {
+    // `direction` is ignored by the builtin (the skin positions the sheet); it is
+    // part of the contract for engines like Vaul that drive the slide direction.
+    Root: ({ direction: _direction, ...props }) => React.createElement(parts.ModalRoot, { ...props }),
+    Trigger: parts.ModalTrigger,
+    Content: parts.ModalContent,
+    Close: parts.ModalClose,
+    useDrawer: parts.useModal,
+};

package/esm/src/react/components/ui/adapter/builtin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,eAAO,MAAM,cAAc,EAAE,SAM5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAWhD,eAAO,MAAM,cAAc,EAAE,SAW5B,CAAC"}

package/esm/src/react/components/ui/adapter/builtin/index.js

@@ -2,10 +2,20 @@ import { builtinToast } from "./toast.js";
 import { builtinDisclosure } from "./disclosure.js";
 import { builtinToggleGroup } from "./toggle-group.js";
 import { builtinToolbar } from "./toolbar.js";
+import { builtinDialog } from "./dialog.js";
+import { builtinDrawer } from "./drawer.js";
+import { builtinTabs } from "./tabs.js";
+import { builtinPopover } from "./popover.js";
+import { builtinCombobox } from "./combobox.js";
 export const builtinAdapter = {
     name: "builtin",
     toast: builtinToast,
     disclosure: builtinDisclosure,
     toggleGroup: builtinToggleGroup,
     toolbar: builtinToolbar,
+    dialog: builtinDialog,
+    drawer: builtinDrawer,
+    tabs: builtinTabs,
+    popover: builtinPopover,
+    combobox: builtinCombobox,
 };

package/esm/src/react/components/ui/adapter/builtin/popover.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverParts } from "../contract.js";
+export declare const builtinPopover: PopoverParts;
+//# sourceMappingURL=popover.d.ts.map

package/esm/src/react/components/ui/adapter/builtin/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/popover.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,cAAc,EAAE,YAQ5B,CAAC"}

package/esm/src/react/components/ui/adapter/builtin/popover.js

@@ -0,0 +1,28 @@
+/**
+ * Builtin Popover adapter - a behaviour-preserving wrapper over the existing
+ * `createAnchoredSurfaceParts()` machinery. This is the default, zero-dependency
+ * engine: nothing about the rendered output or behaviour changes versus the
+ * pre-adapter `popover.tsx` that called the factory directly.
+ *
+ * The `<span className="relative inline-block">` positioning anchor now lives
+ * entirely inside this builtin adapter (via `AnchoredRoot`) - it is no longer
+ * part of the Popover *contract*, so a parts-based engine (Base UI) is free to
+ * anchor on the trigger and emit no wrapper at all.
+ *
+ * @module react/components/ui/adapter/builtin/popover
+ */
+import { createAnchoredSurfaceParts } from "../../anchored-surface.js";
+// One instance, created once at module scope - exactly as `popover.tsx` used to
+// do. Keeping this distinct from the DropdownMenu instance preserves the
+// per-skin context isolation (a nested menu must not close an enclosing
+// popover).
+const parts = createAnchoredSurfaceParts();
+export const builtinPopover = {
+    Root: parts.AnchoredRoot,
+    // `haspopup` is a builtin-machinery concern (Popover vs Menu differ only
+    // here), so the builtin trigger supplies it and the skin stays engine-neutral.
+    Trigger: (props) => React.createElement(parts.AnchoredTrigger, { haspopup: "dialog", ...props }),
+    // Already portals via `Floating` into the nearest `[data-vf-ui]`/`[data-vf-chat]`
+    // token scope. The skin passes the contract-level initial-focus default.
+    Content: (props) => React.createElement(parts.AnchoredContent, { ...props }),
+};

package/esm/src/react/components/ui/adapter/builtin/tabs.d.ts

@@ -0,0 +1,3 @@
+import type { TabsParts } from "../contract.js";
+export declare const builtinTabs: TabsParts;
+//# sourceMappingURL=tabs.d.ts.map

package/esm/src/react/components/ui/adapter/builtin/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ui/adapter/builtin/tabs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiFhD,eAAO,MAAM,WAAW,EAAE,SAGzB,CAAC"}

package/esm/src/react/components/ui/adapter/builtin/tabs.js

@@ -0,0 +1,73 @@
+/**
+ * Builtin Tabs adapter - the zero-dependency single-select tablist machinery
+ * (`role="tablist"` / `role="tab"` / `aria-selected`, select-on-click), assembled
+ * as `TabsParts`. The Root owns the selected value; each Tab self-wires through
+ * the file-local context. Panel-less (the consumer renders content by value). The
+ * Tab sets `data-state="active"|"inactive"` and carries NO visual classes - the
+ * skin passes those.
+ *
+ * @module react/components/ui/adapter/builtin/tabs
+ */
+import * as React from "react";
+import { Slot } from "../../slot.js";
+const TabsContext = React.createContext(null);
+const TabsRoot = ({ value, onValueChange, children, ref, ...props }) => {
+    const ctx = React.useMemo(() => ({ value, onValueChange }), [value, onValueChange]);
+    return (React.createElement(TabsContext.Provider, { value: ctx },
+        React.createElement("div", { ref: ref, role: "tablist", ...props }, children)));
+};
+const TabsTab = ({ value, asChild, onClick, onKeyDown, ref, ...props }) => {
+    const ctx = React.useContext(TabsContext);
+    const isActive = ctx?.value === value;
+    const Comp = asChild ? Slot : "button";
+    const moveFocus = (event, direction) => {
+        const list = event.currentTarget.closest('[role="tablist"]');
+        const tabs = Array.from(list?.querySelectorAll('[role="tab"]') ?? [])
+            .filter((tab) => !tab.hasAttribute("disabled") &&
+            tab.getAttribute("aria-disabled") !== "true");
+        const currentIndex = tabs.indexOf(event.currentTarget);
+        if (currentIndex === -1 || tabs.length === 0)
+            return;
+        const nextIndex = direction === "first"
+            ? 0
+            : direction === "last"
+                ? tabs.length - 1
+                : (currentIndex + direction + tabs.length) % tabs.length;
+        const next = tabs[nextIndex];
+        next?.focus();
+        next?.click();
+    };
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), ref: ref, role: "tab", "aria-selected": isActive, "data-state": isActive ? "active" : "inactive", tabIndex: isActive ? 0 : -1, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                ctx?.onValueChange(value);
+        }, onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    e.preventDefault();
+                    moveFocus(e, 1);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    e.preventDefault();
+                    moveFocus(e, -1);
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    moveFocus(e, "first");
+                    break;
+                case "End":
+                    e.preventDefault();
+                    moveFocus(e, "last");
+                    break;
+            }
+        }, ...props }));
+};
+export const builtinTabs = {
+    Root: TabsRoot,
+    Tab: TabsTab,
+};

package/esm/src/react/components/ui/adapter/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/ui/adapter/context.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKjE,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAC/B,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IACrB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GACA,KAAK,CAAC,YAAY,CAwBpB;AAED,yFAAyF;AACzF,wBAAgB,UAAU,IAAI,SAAS,CAEtC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/ui/adapter/context.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKjE,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAC/B,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IACrB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GACA,KAAK,CAAC,YAAY,CAkCpB;AAED,yFAAyF;AACzF,wBAAgB,UAAU,IAAI,SAAS,CAEtC"}

package/esm/src/react/components/ui/adapter/context.js

@@ -23,12 +23,22 @@ export function UIAdapterProvider({ adapter, children }) {
         toast: adapter.toast ?? parent.toast,
         toggleGroup: adapter.toggleGroup ?? parent.toggleGroup,
         toolbar: adapter.toolbar ?? parent.toolbar,
+        dialog: adapter.dialog ?? parent.dialog,
+        drawer: adapter.drawer ?? parent.drawer,
+        tabs: adapter.tabs ?? parent.tabs,
+        popover: adapter.popover ?? parent.popover,
+        combobox: adapter.combobox ?? parent.combobox,
     }), [
         adapter.disclosure,
         adapter.name,
         adapter.toast,
         adapter.toggleGroup,
         adapter.toolbar,
+        adapter.dialog,
+        adapter.drawer,
+        adapter.tabs,
+        adapter.popover,
+        adapter.combobox,
         parent,
     ]);
     return (React.createElement(UIAdapterContext.Provider, { value: merged }, children));