veryfront 0.1.1237 → 0.1.1239

package/esm/src/react/components/ui/meter.js

@@ -0,0 +1,59 @@
+/**
+ * Meter: a semantic gauge for a known, bounded measurement (disk usage, a
+ * score, remaining quota). A leaf: one root `role="meter"` node carrying the
+ * ARIA value range, containing a single fill `<div>` whose width reflects the
+ * clamped percentage. Unlike a ProgressBar (task completion), a Meter reports a
+ * static reading. Colour tokens follow the repo's `--status-*` semantic palette
+ * (matching `Status`) so `success`/`warning`/`danger` read consistently.
+ *
+ * @example
+ * ```tsx
+ * import { Meter } from "veryfront/ui";
+ *
+ * <Meter value={82} variant="warning" label="Disk 82% full" />;
+ * ```
+ *
+ * @module react/components/ui/meter
+ */
+import * as React from "react";
+import { cva, cx as cn } from "./cva.js";
+/** Fill colour by semantic variant: token-pure, keyed to the repo palette. */
+const meterFill = cva("h-full rounded-full transition-all duration-500 ease-out", {
+    variants: {
+        variant: {
+            default: "bg-[var(--primary)]",
+            success: "bg-[var(--status-success)]",
+            warning: "bg-[var(--status-warning)]",
+            // --status-error, not --destructive: this keeps the whole variant set on
+            // the same --status-* palette Status uses.
+            danger: "bg-[var(--status-error)]",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+/** Clamp `value` into `[min, max]` and return the fill percentage, guarding `max === min`. */
+function toPercent(value, min, max) {
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    const clamped = Math.min(hi, Math.max(lo, Number.isFinite(value) ? value : lo));
+    if (hi === lo)
+        return 0;
+    return ((clamped - lo) / (hi - lo)) * 100;
+}
+/** Clamp `value` into `[min, max]`, guarding non-finite input. */
+function clampValue(value, min, max) {
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    return Math.min(hi, Math.max(lo, Number.isFinite(value) ? value : lo));
+}
+/** Render a semantic gauge with a fill sized to the clamped value. */
+export function Meter({ value, min = 0, max = 100, variant = "default", label, className, ref, ...props }) {
+    const percent = toPercent(value, min, max);
+    const now = clampValue(value, min, max);
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    return (React.createElement("div", { ref: ref, role: "meter", "aria-valuenow": now, "aria-valuemin": lo, "aria-valuemax": hi, "aria-valuetext": label, "data-variant": variant, className: cn("w-full h-2.5 overflow-hidden rounded-full bg-[var(--muted)]", className), ...props },
+        React.createElement("div", { className: meterFill({ variant }), style: { width: `${percent}%` } })));
+}

package/esm/src/react/components/ui/modal-surface.d.ts

@@ -28,11 +28,17 @@ export interface ModalState {
 export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Extra node rendered before `children` -- used by Drawer for the drag handle. */
     lead?: React.ReactNode;
+    /** React 19: ref is a regular prop, forwarded to (merged onto) the panel node. */
+    ref?: React.Ref<HTMLDivElement>;
 }
 type ModalBtnProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
 };
+/** Run the shared modal focus, stack, scroll-lock, and dismissal lifecycle. */
+export declare function useModalContentEffect(open: boolean, setOpen: (open: boolean) => void, ref: React.RefObject<HTMLElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, dismissOnEscape?: boolean): void;
+/** Resolve a token scope outside any clipping modal panel for a modal portal. */
+export declare function getModalTokenScope(document: Document, anchor: HTMLElement | null): HTMLElement;
 /**
  * Creates a fresh context instance plus the Root, useModal, ModalTrigger,
  * ModalClose, and ModalContent parts -- all bound to that context.
@@ -51,7 +57,7 @@ export declare function createModalSurfaceParts(name: string): {
     useModal: () => ModalState;
     ModalTrigger: ({ children, asChild, disabled, id, onClick, ref, type, ...props }: ModalBtnProps) => React.ReactElement;
     ModalClose: ({ children, asChild, disabled, onClick, ref, type, ...props }: ModalBtnProps) => React.ReactElement;
-    ModalContent: ({ className, children, lead, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: ModalContentProps) => React.ReactElement | null;
+    ModalContent: ({ className, children, lead, id, ref, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: ModalContentProps) => React.ReactElement | null;
 };
 export {};
 //# sourceMappingURL=modal-surface.d.ts.map

package/esm/src/react/components/ui/modal-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-surface.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/modal-surface.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AAMxE,yEAAyE;AACzE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3D,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACzD,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACvD;AAED,gDAAgD;AAChD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,CAAC;AAwGF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM;+DAKD,iBAAiB,GAAG;QACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,KACA,KAAK,CAAC,YAAY;oBAkDA,UAAU;sFAQsC,aAAa,KAC/E,KAAK,CAAC,YAAY;gFAoC4C,aAAa,KAC3E,KAAK,CAAC,YAAY;wHA8BhB,iBAAiB,KACnB,KAAK,CAAC,YAAY,GAAG,IAAI;EAoD7B"}
+{"version":3,"file":"modal-surface.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/modal-surface.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AAMxE,yEAAyE;AACzE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3D,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACzD,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACvD;AAED,gDAAgD;AAChD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,CAAC;AAwCF,+EAA+E;AAC/E,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,EAChC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACrD,eAAe,UAAO,GACrB,IAAI,CA2DN;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,WAAW,CAQb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM;+DAKD,iBAAiB,GAAG;QACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,KACA,KAAK,CAAC,YAAY;oBAkDA,UAAU;sFAQsC,aAAa,KAC/E,KAAK,CAAC,YAAY;gFAoC4C,aAAa,KAC3E,KAAK,CAAC,YAAY;6HA+BhB,iBAAiB,KACnB,KAAK,CAAC,YAAY,GAAG,IAAI;EA0D7B"}

package/esm/src/react/components/ui/modal-surface.js

@@ -42,7 +42,8 @@ function lockDocumentScroll(document) {
 function isFocusableElement(value) {
     return value !== null && typeof value.focus === "function";
 }
-function useModalContentEffect(open, setOpen, ref, triggerRef) {
+/** Run the shared modal focus, stack, scroll-lock, and dismissal lifecycle. */
+export function useModalContentEffect(open, setOpen, ref, triggerRef, dismissOnEscape = true) {
     React.useEffect(() => {
         const panel = ref.current;
         if (!open || !panel)
@@ -56,7 +57,10 @@ function useModalContentEffect(open, setOpen, ref, triggerRef) {
             : null;
         const unlockScroll = lockDocumentScroll(document);
         const isTopModal = () => stack.at(-1) === panel;
-        const unregisterDismissableLayer = registerDismissableLayer(document, () => ref.current, () => setOpen(false));
+        const unregisterDismissableLayer = registerDismissableLayer(document, () => ref.current, () => {
+            if (dismissOnEscape)
+                setOpen(false);
+        });
         const onKey = (e) => {
             if (!isTopModal() || e.defaultPrevented)
                 return;
@@ -97,7 +101,17 @@ function useModalContentEffect(open, setOpen, ref, triggerRef) {
             if (restoreTarget)
                 focusWithoutScroll(restoreTarget);
         };
-    }, [open, ref, setOpen, triggerRef]);
+    }, [dismissOnEscape, open, ref, setOpen, triggerRef]);
+}
+/** Resolve a token scope outside any clipping modal panel for a modal portal. */
+export function getModalTokenScope(document, anchor) {
+    const activeScope = document.activeElement?.closest(UI_SCOPE_SELECTOR);
+    const scopes = document.querySelectorAll(UI_SCOPE_SELECTOR);
+    return anchor?.closest(UI_SCOPE_SELECTOR) ??
+        modalStacks.get(document)?.at(-1)?.closest(UI_SCOPE_SELECTOR) ??
+        activeScope ??
+        (scopes.length === 1 ? scopes[0] : undefined) ??
+        document.body;
 }
 /**
  * Creates a fresh context instance plus the Root, useModal, ModalTrigger,
@@ -192,9 +206,12 @@ export function createModalSurfaceParts(name) {
             } }, children));
     }
     /** Fixed overlay + panel shell. Skins supply panel layout via `className`. */
-    function ModalContent({ className, children, lead, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }) {
+    function ModalContent({ className, children, lead, id, ref, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }) {
         const ctx = useModal();
         const panelRef = React.useRef(null);
+        // Merge the internal panel ref (read by the focus/dismiss effects) with any
+        // consumer ref, so `<DialogContent ref={...}>` reaches the panel node too.
+        const setPanelNode = React.useMemo(() => composeRefs(panelRef, ref), [ref]);
         const resolvedId = id ?? ctx.defaultContentId;
         const [portalReady, setPortalReady] = React.useState(false);
         React.useEffect(() => setPortalReady(true), []);
@@ -212,10 +229,10 @@ export function createModalSurfaceParts(name) {
         if (!document?.body)
             return null;
         const container = trigger?.closest("[data-vf-modal-content]") ??
-            trigger?.closest(UI_SCOPE_SELECTOR) ?? document.body;
+            getModalTokenScope(document, trigger);
         return createPortal(React.createElement("div", { className: "fixed inset-0 z-50" },
             React.createElement("div", { "aria-hidden": "true", className: "fixed inset-0 bg-[var(--overlay)]", onClick: () => ctx.setOpen(false) }),
-            React.createElement("div", { ...props, ref: panelRef, id: resolvedId, "data-vf-modal-content": "", role: "dialog", "aria-modal": "true", "aria-label": ariaLabel ?? (!labelledBy && !ctx.titlePresent ? name : undefined), "aria-labelledby": labelledBy ?? (ctx.titlePresent ? ctx.titleId : undefined), tabIndex: -1, className: className },
+            React.createElement("div", { ...props, ref: setPanelNode, id: resolvedId, "data-vf-modal-content": "", role: "dialog", "aria-modal": "true", "aria-label": ariaLabel ?? (!labelledBy && !ctx.titlePresent ? name : undefined), "aria-labelledby": labelledBy ?? (ctx.titlePresent ? ctx.titleId : undefined), tabIndex: -1, className: className },
                 lead,
                 children)), container);
     }

package/esm/src/react/components/ui/navigation-menu.d.ts

@@ -0,0 +1,101 @@
+/**
+ * NavigationMenu: a horizontal site-navigation bar whose items can open a
+ * dropdown panel of links. Self-contained (context + `aria-expanded` triggers,
+ * no floating engine): the root owns which item's panel is open and only one is
+ * open at a time. A `NavigationMenuTrigger` toggles its panel on click and opens
+ * it on pointer-enter; its `NavigationMenuContent` renders absolutely under the
+ * trigger while open (`data-state="open"`). Plain `NavigationMenuLink` items with
+ * no panel are supported for simple top-level links. Skinned with veryfront
+ * theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationMenu,
+ *   NavigationMenuContent,
+ *   NavigationMenuItem,
+ *   NavigationMenuLink,
+ *   NavigationMenuList,
+ *   NavigationMenuTrigger,
+ * } from "veryfront/ui";
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
+ *         <NavigationMenuLink href="/automation">Automation</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="docs">
+ *       <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>;
+ * ```
+ *
+ * @module react/components/ui/navigation-menu
+ */
+import * as React from "react";
+/** Props accepted by `<NavigationMenu>`. */
+export interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name for the navigation landmark. @default "Main" */
+    label?: string;
+    /** The `NavigationMenuList` (and its items) that make up the nav. */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the `<nav>` landmark. */
+    ref?: React.Ref<HTMLElement>;
+}
+/** Navigation root: a `<nav>` landmark that owns which item's panel is open. */
+export declare function NavigationMenu({ label, className, children, ref, onBlur, onKeyDown, ...props }: NavigationMenuProps): React.ReactElement;
+/** Props accepted by `<NavigationMenuList>`. */
+export interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** The `NavigationMenuItem` children of the bar. */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the `<ul>`. */
+    ref?: React.Ref<HTMLUListElement>;
+}
+/** The horizontal list container: a flex `<ul>` of items. */
+export declare function NavigationMenuList({ className, children, ref, ...props }: NavigationMenuListProps): React.ReactElement;
+/** Props accepted by `<NavigationMenuItem>`. */
+export interface NavigationMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Stable identifier linking this item's trigger to its panel and open state. */
+    value: string;
+    /** The `NavigationMenuTrigger` + `NavigationMenuContent` (or a plain `NavigationMenuLink`). */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the `<li>`. */
+    ref?: React.Ref<HTMLLIElement>;
+}
+/** One item in the bar: an `<li>` that provides its value to its trigger/panel. */
+export declare function NavigationMenuItem({ value, className, children, ref, ...props }: NavigationMenuItemProps): React.ReactElement;
+/** Props accepted by `<NavigationMenuTrigger>`. */
+export interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The trigger label (usually a nav word like "Products"). */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the trigger button. */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/** The button that toggles its item's panel: `aria-expanded` + `aria-controls`, with a caret. */
+export declare function NavigationMenuTrigger({ className, onClick, onPointerEnter, onPointerLeave, children, ref, ...props }: NavigationMenuTriggerProps): React.ReactElement;
+/** Props accepted by `<NavigationMenuContent>`. */
+export interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The `NavigationMenuLink`s (or other content) for this item's dropdown panel. */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the panel. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** The dropdown panel for one item: absolutely positioned, rendered only while open. */
+export declare function NavigationMenuContent({ className, children, ref, onPointerEnter, onPointerLeave, ...props }: NavigationMenuContentProps): React.ReactElement | null;
+/** Props accepted by `<NavigationMenuLink>`. */
+export interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks this link as the current page (`aria-current="page"` + active styling). @default false */
+    active?: boolean;
+    /** The link label / content. */
+    children: React.ReactNode;
+    /** React 19: ref is a regular prop, points at the `<a>`. */
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** A single navigable link: used inside a panel or as a plain top-level item. */
+export declare function NavigationMenuLink({ active, className, children, ref, ...props }: NavigationMenuLinkProps): React.ReactElement;
+//# sourceMappingURL=navigation-menu.d.ts.map

package/esm/src/react/components/ui/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/navigation-menu.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/ui/navigation-menu.js

@@ -0,0 +1,195 @@
+/**
+ * NavigationMenu: a horizontal site-navigation bar whose items can open a
+ * dropdown panel of links. Self-contained (context + `aria-expanded` triggers,
+ * no floating engine): the root owns which item's panel is open and only one is
+ * open at a time. A `NavigationMenuTrigger` toggles its panel on click and opens
+ * it on pointer-enter; its `NavigationMenuContent` renders absolutely under the
+ * trigger while open (`data-state="open"`). Plain `NavigationMenuLink` items with
+ * no panel are supported for simple top-level links. Skinned with veryfront
+ * theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationMenu,
+ *   NavigationMenuContent,
+ *   NavigationMenuItem,
+ *   NavigationMenuLink,
+ *   NavigationMenuList,
+ *   NavigationMenuTrigger,
+ * } from "veryfront/ui";
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
+ *         <NavigationMenuLink href="/automation">Automation</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="docs">
+ *       <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>;
+ * ```
+ *
+ * @module react/components/ui/navigation-menu
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+import { focusWithoutScroll } from "./focus-management.js";
+import { composeRefs } from "./slot.js";
+const CLOSE_DELAY_MS = 100;
+const NavigationMenuContext = React.createContext(null);
+/** Per-item context carrying the identity that links a trigger to its panel. */
+const NavigationMenuItemContext = React.createContext(null);
+function useNavigationMenuContext(part) {
+    const ctx = React.useContext(NavigationMenuContext);
+    if (!ctx)
+        throw new Error(`<${part}> must be used within <NavigationMenu>`);
+    return ctx;
+}
+function useNavigationMenuItem(part) {
+    const identity = React.useContext(NavigationMenuItemContext);
+    if (identity == null)
+        throw new Error(`<${part}> must be used within <NavigationMenuItem>`);
+    return identity;
+}
+/** Navigation root: a `<nav>` landmark that owns which item's panel is open. */
+export function NavigationMenu({ label = "Main", className, children, ref, onBlur, onKeyDown, ...props }) {
+    const [openItemId, setOpenItemIdState] = React.useState(null);
+    const closeTimerRef = React.useRef(null);
+    const triggerRefs = React.useRef(new Map());
+    const cancelClose = React.useCallback(() => {
+        if (closeTimerRef.current != null) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const setOpenItemId = React.useCallback((itemId) => {
+        cancelClose();
+        setOpenItemIdState(itemId);
+    }, [cancelClose]);
+    const scheduleClose = React.useCallback((itemId) => {
+        cancelClose();
+        closeTimerRef.current = setTimeout(() => {
+            closeTimerRef.current = null;
+            setOpenItemIdState((current) => current === itemId ? null : current);
+        }, CLOSE_DELAY_MS);
+    }, [cancelClose]);
+    const registerTrigger = React.useCallback((itemId, element) => {
+        if (element)
+            triggerRefs.current.set(itemId, element);
+        else
+            triggerRefs.current.delete(itemId);
+    }, []);
+    const getTrigger = React.useCallback((itemId) => {
+        return triggerRefs.current.get(itemId) ?? null;
+    }, []);
+    const closeAndRestoreTrigger = React.useCallback(() => {
+        const itemId = openItemId;
+        if (itemId == null)
+            return;
+        const trigger = getTrigger(itemId);
+        setOpenItemId(null);
+        queueMicrotask(() => {
+            if (trigger?.isConnected)
+                focusWithoutScroll(trigger);
+        });
+    }, [getTrigger, openItemId, setOpenItemId]);
+    React.useEffect(() => cancelClose, [cancelClose]);
+    const ctx = React.useMemo(() => ({ openItemId, setOpenItemId, cancelClose, scheduleClose, registerTrigger, getTrigger }), [openItemId, setOpenItemId, cancelClose, scheduleClose, registerTrigger, getTrigger]);
+    return (React.createElement(NavigationMenuContext.Provider, { value: ctx },
+        React.createElement("nav", { ref: ref, "aria-label": label, "data-state": openItemId == null ? "closed" : "open", className: cn("relative inline-flex max-w-max items-center", className), onBlur: (event) => {
+                onBlur?.(event);
+                if (event.defaultPrevented)
+                    return;
+                const next = event.relatedTarget;
+                if (!(next instanceof HTMLElement) || !event.currentTarget.contains(next)) {
+                    setOpenItemId(null);
+                }
+            }, onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented)
+                    return;
+                if (event.key !== "Escape" || openItemId == null)
+                    return;
+                event.preventDefault();
+                closeAndRestoreTrigger();
+            }, ...props }, children)));
+}
+/** The horizontal list container: a flex `<ul>` of items. */
+export function NavigationMenuList({ className, children, ref, ...props }) {
+    return (React.createElement("ul", { ref: ref, className: cn("flex flex-1 list-none items-center gap-1", className), ...props }, children));
+}
+/** One item in the bar: an `<li>` that provides its value to its trigger/panel. */
+export function NavigationMenuItem({ value, className, children, ref, ...props }) {
+    const ctx = React.useContext(NavigationMenuContext);
+    // Identity is per instance, not per `value`. Two items may legitimately carry
+    // the same `value`; keying open state on it would open both panels at once
+    // and mint duplicate panel ids, making aria-controls ambiguous.
+    const reactId = React.useId();
+    const itemId = `vf-navigation-menu-${reactId}`;
+    const open = ctx?.openItemId === itemId;
+    const identity = React.useMemo(() => ({ value, itemId }), [value, itemId]);
+    return (React.createElement(NavigationMenuItemContext.Provider, { value: identity },
+        React.createElement("li", { ref: ref, "data-value": value, "data-state": open ? "open" : "closed", className: cn("relative", className), ...props }, children)));
+}
+/** The button that toggles its item's panel: `aria-expanded` + `aria-controls`, with a caret. */
+export function NavigationMenuTrigger({ className, onClick, onPointerEnter, onPointerLeave, children, ref, ...props }) {
+    const ctx = useNavigationMenuContext("NavigationMenuTrigger");
+    const { itemId } = useNavigationMenuItem("NavigationMenuTrigger");
+    const open = ctx.openItemId === itemId;
+    const panelId = `${itemId}-panel`;
+    const triggerRef = React.useCallback((element) => {
+        ctx.registerTrigger(itemId, element);
+    }, [ctx, itemId]);
+    const composedRef = React.useMemo(() => composeRefs(triggerRef, ref), [ref, triggerRef]);
+    return (React.createElement("button", { ref: composedRef, type: "button", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "data-state": open ? "open" : "closed", onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                ctx.setOpenItemId(open ? null : itemId);
+        }, onPointerEnter: (event) => {
+            onPointerEnter?.(event);
+            if (!event.defaultPrevented && !event.currentTarget.disabled) {
+                ctx.setOpenItemId(itemId);
+            }
+        }, onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            if (!event.defaultPrevented && open)
+                ctx.scheduleClose(itemId);
+        }, className: cn("inline-flex h-9 select-none items-center gap-1 rounded-md px-3 text-sm font-medium", "text-[var(--foreground)] outline-none transition-colors", "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]", "focus-visible:ring-2 focus-visible:ring-[var(--ring)]", "data-[state=open]:bg-[var(--accent)] data-[state=open]:text-[var(--accent-foreground)]", className), ...props },
+        children,
+        React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "h-3 w-3 transition-transform duration-200 data-[state=open]:rotate-180", "data-state": open ? "open" : "closed", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+            React.createElement("polyline", { points: "6 9 12 15 18 9" }))));
+}
+/** The dropdown panel for one item: absolutely positioned, rendered only while open. */
+export function NavigationMenuContent({ className, children, ref, onPointerEnter, onPointerLeave, ...props }) {
+    const ctx = useNavigationMenuContext("NavigationMenuContent");
+    const { itemId } = useNavigationMenuItem("NavigationMenuContent");
+    const open = ctx.openItemId === itemId;
+    if (!open)
+        return null;
+    // Deliberately not role="menu". That role declares an application-menu
+    // keyboard model (arrows, Home/End, Escape, roving focus) which site
+    // navigation does not implement and does not want. A plain disclosure panel
+    // of links is the accessible pattern here.
+    return (React.createElement("div", { ref: ref, id: `${itemId}-panel`, "data-slot": "navigation-menu-content", "data-state": "open", className: cn("absolute left-0 top-full z-50 mt-1 flex min-w-[12rem] flex-col gap-1 p-1", "rounded-md border border-[var(--border)] bg-[var(--popover)] text-[var(--popover-foreground)] shadow-md", className), onPointerEnter: (event) => {
+            onPointerEnter?.(event);
+            if (!event.defaultPrevented)
+                ctx.cancelClose();
+        }, onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            if (!event.defaultPrevented)
+                ctx.scheduleClose(itemId);
+        }, ...props }, children));
+}
+/** A single navigable link: used inside a panel or as a plain top-level item. */
+export function NavigationMenuLink({ active = false, className, children, ref, ...props }) {
+    return (
+    // No role="menuitem": it is only meaningful inside a real menu/menubar, and
+    // a plain top-level link has no menu owner at all. A bare <a> is correct.
+    React.createElement("a", { ref: ref, "aria-current": active ? "page" : undefined, "data-active": active ? "" : undefined, className: cn("block select-none rounded-md px-3 py-2 text-sm font-medium no-underline outline-none transition-colors", "text-[var(--foreground)]", "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]", "focus-visible:ring-2 focus-visible:ring-[var(--ring)]", "data-[active]:bg-[var(--accent)] data-[active]:text-[var(--accent-foreground)]", className), ...props }, children));
+}

package/esm/src/react/components/ui/number-field.d.ts

@@ -0,0 +1,46 @@
+/**
+ * NumberField - a numeric text input with clamping and keyboard stepping.
+ *
+ * A single `<input>` that keeps its value within
+ * `[min, max]`, rounds to `step`, and steps with ArrowUp/ArrowDown. Controlled
+ * via `value`/`onValueChange` or uncontrolled via `defaultValue`. Skinned with
+ * the veryfront theme tokens; no adapter or engine required.
+ *
+ * @example Uncontrolled, clamped 0-10
+ * ```tsx
+ * import { NumberField } from "veryfront/ui";
+ *
+ * <NumberField defaultValue={1} min={0} max={10} aria-label="Quantity" />;
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [qty, setQty] = React.useState(1);
+ * <NumberField value={qty} onValueChange={setQty} min={1} step={1} />;
+ * ```
+ *
+ * @module react/components/ui/number-field
+ */
+import * as React from "react";
+/** Props accepted by `<NumberField>`. */
+export interface NumberFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> {
+    /** Controlled value (pair with `onValueChange`). `null` means empty. */
+    value?: number | null;
+    /** Initial value when uncontrolled. */
+    defaultValue?: number;
+    /** Fires with the next value (`null` when the field is cleared). */
+    onValueChange?: (value: number | null) => void;
+    /** Smallest allowed value; also the floor for ArrowDown stepping. */
+    min?: number;
+    /** Largest allowed value; also the ceiling for ArrowUp stepping. */
+    max?: number;
+    /** Increment applied on ArrowUp/ArrowDown and used to round input. @default 1 */
+    step?: number;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Quantize a value to the nearest positive step, using `min` as the step base. */
+export declare function quantizeNumberFieldValue(value: number, step: number, min?: number): number;
+/** Render a numeric input that clamps to `[min, max]` and steps by `step`. */
+export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, className, disabled, inputMode, onKeyDown, onBlur, ref, ...props }: NumberFieldProps): React.ReactElement;
+//# sourceMappingURL=number-field.d.ts.map

package/esm/src/react/components/ui/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/number-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,yCAAyC;AACzC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAChG,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAeD,mFAAmF;AACnF,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAM1F;AAWD,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA8FvC"}

package/esm/src/react/components/ui/number-field.js

@@ -0,0 +1,121 @@
+/**
+ * NumberField - a numeric text input with clamping and keyboard stepping.
+ *
+ * A single `<input>` that keeps its value within
+ * `[min, max]`, rounds to `step`, and steps with ArrowUp/ArrowDown. Controlled
+ * via `value`/`onValueChange` or uncontrolled via `defaultValue`. Skinned with
+ * the veryfront theme tokens; no adapter or engine required.
+ *
+ * @example Uncontrolled, clamped 0-10
+ * ```tsx
+ * import { NumberField } from "veryfront/ui";
+ *
+ * <NumberField defaultValue={1} min={0} max={10} aria-label="Quantity" />;
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [qty, setQty] = React.useState(1);
+ * <NumberField value={qty} onValueChange={setQty} min={1} step={1} />;
+ * ```
+ *
+ * @module react/components/ui/number-field
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+const COMPLETE_NUMBER_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)(?:[eE][+-]?\d+)?$/;
+const NUMERIC_PREFIX_PATTERN = /^[+-]?(?:(?:\d+\.?\d*)|(?:\.\d*))?(?:[eE][+-]?\d*)?$/;
+function clamp(n, min, max) {
+    if (min != null && n < min)
+        return min;
+    if (max != null && n > max)
+        return max;
+    return n;
+}
+function decimalPlaces(value) {
+    const [coefficient, exponentText] = value.toString().toLowerCase().split("e");
+    const fractionLength = coefficient?.split(".")[1]?.length ?? 0;
+    const exponent = Number(exponentText ?? 0);
+    return Math.max(0, fractionLength - exponent);
+}
+/** Quantize a value to the nearest positive step, using `min` as the step base. */
+export function quantizeNumberFieldValue(value, step, min) {
+    if (!Number.isFinite(step) || step <= 0)
+        return value;
+    const base = min ?? 0;
+    const quantized = base + Math.round((value - base) / step) * step;
+    const precision = Math.min(12, Math.max(decimalPlaces(base), decimalPlaces(step)));
+    return Number(quantized.toFixed(precision));
+}
+function normalizeNumberFieldValue(value, step, min, max) {
+    return clamp(quantizeNumberFieldValue(value, step, min), min, max);
+}
+/** Render a numeric input that clamps to `[min, max]` and steps by `step`. */
+export function NumberField({ value, defaultValue, onValueChange, min, max, step = 1, className, disabled, inputMode, onKeyDown, onBlur, ref, ...props }) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState(() => defaultValue == null ? null : normalizeNumberFieldValue(defaultValue, step, min, max));
+    const [draft, setDraft] = React.useState(null);
+    const current = isControlled ? value : internal;
+    const controlledValueRef = React.useRef(value);
+    const resolvedInputMode = inputMode ?? (Number.isInteger(step) ? "numeric" : "decimal");
+    React.useEffect(() => {
+        if (isControlled && !Object.is(controlledValueRef.current, value))
+            setDraft(null);
+        controlledValueRef.current = value;
+    }, [isControlled, value]);
+    const commit = (next) => {
+        if (!isControlled)
+            setInternal(next);
+        onValueChange?.(next);
+    };
+    const handleChange = (event) => {
+        const raw = event.target.value.trim();
+        if (raw === "") {
+            setDraft(null);
+            return commit(null);
+        }
+        if (NUMERIC_PREFIX_PATTERN.test(raw) && !COMPLETE_NUMBER_PATTERN.test(raw)) {
+            setDraft(event.target.value);
+            return;
+        }
+        const parsed = Number(raw);
+        if (Number.isNaN(parsed))
+            return;
+        setDraft(null);
+        commit(normalizeNumberFieldValue(parsed, step, min, max));
+    };
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        if (event.defaultPrevented || draft == null)
+            return;
+        const parsed = Number(draft.trim());
+        setDraft(null);
+        if (!Number.isNaN(parsed)) {
+            commit(normalizeNumberFieldValue(parsed, step, min, max));
+        }
+    };
+    const nudge = (direction) => {
+        const parsedDraft = draft == null ? Number.NaN : Number(draft.trim());
+        const draftBase = Number.isNaN(parsedDraft)
+            ? null
+            : normalizeNumberFieldValue(parsedDraft, step, min, max);
+        const base = draftBase ?? current ??
+            (direction === 1 ? (min ?? 0) - step : (max ?? 0) + step);
+        setDraft(null);
+        commit(clamp(base + direction * step, min, max));
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled)
+            return;
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            nudge(1);
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            nudge(-1);
+        }
+    };
+    return (React.createElement("input", { ref: ref, inputMode: resolvedInputMode, role: "spinbutton", "aria-valuenow": current ?? undefined, "aria-valuemin": min, "aria-valuemax": max, disabled: disabled, value: draft ?? current ?? "", onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, "data-disabled": disabled ? "" : undefined, className: cn("h-[38px] w-full rounded-md px-3 text-base tabular-nums", "bg-[var(--input-bg)] text-[var(--foreground)]", "border border-[var(--outline-border)]", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--edge-medium)]", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}