veryfront 0.1.1238 → 0.1.1239

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":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uEAAuE;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,EAC7B,KAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAyE1C;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACrF,oDAAoD;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAU9C;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAED,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAsB9C;AAED,mDAAmD;AACnD,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC/F,8DAA8D;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qEAAqE;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,iGAAiG;AACjG,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CA6DjD;AAED,mDAAmD;AACnD,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtF,mFAAmF;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,wFAAwF;AACxF,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,GAAG,EACH,cAAc,EACd,cAAc,EACd,GAAG,KAAK,EACT,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiCxD;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,mGAAmG;IACnG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EACjC,MAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAqB9C"}

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 }));
+}

package/esm/src/react/components/ui/pagination.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Pagination: a non-interactive compound for paging navigation. Structure is
+ * modelled on shadcn's pagination (a landmark `<nav>` wrapping a `<ul>` of
+ * `<li>` links) and restyled with the veryfront theme tokens. The active page is
+ * a {@link PaginationLink} with `isActive` (→ `aria-current="page"`);
+ * {@link PaginationPrevious}/{@link PaginationNext} are labelled link variants and
+ * {@link PaginationEllipsis} marks a gap in the page sequence.
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=3">3</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ *
+ * @module react/components/ui/pagination
+ */
+import * as React from "react";
+/** Props accepted by `<Pagination>`. */
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLElement>;
+}
+/** The paging landmark: a centered `role="navigation"` region. */
+export declare function Pagination({ className, ref, ...props }: PaginationProps): React.ReactElement;
+/** Props accepted by `<PaginationContent>`. */
+export interface PaginationContentProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLUListElement>;
+}
+/** The list of page items: a horizontal `<ul>`. */
+export declare function PaginationContent({ className, ref, ...props }: PaginationContentProps): React.ReactElement;
+/** Props accepted by `<PaginationItem>`. */
+export interface PaginationItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLLIElement>;
+}
+/** A single page slot: an `<li>` wrapping a link or ellipsis. */
+export declare function PaginationItem({ className, ref, ...props }: PaginationItemProps): React.ReactElement;
+/** Props accepted by `<PaginationLink>`. */
+export interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks this link as the current page: sets `aria-current="page"` and active styling. @default false */
+    isActive?: boolean;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** A page link: highlighted when `isActive`, otherwise hover-highlighted. */
+export declare function PaginationLink({ className, isActive, ref, ...props }: PaginationLinkProps): React.ReactElement;
+/** Props accepted by `<PaginationPrevious>`. */
+export interface PaginationPreviousProps extends PaginationLinkProps {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** A "‹ Previous" link: a labelled {@link PaginationLink} variant. */
+export declare function PaginationPrevious({ className, children, ref, ...props }: PaginationPreviousProps): React.ReactElement;
+/** Props accepted by `<PaginationNext>`. */
+export interface PaginationNextProps extends PaginationLinkProps {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** A "Next ›" link: a labelled {@link PaginationLink} variant. */
+export declare function PaginationNext({ className, children, ref, ...props }: PaginationNextProps): React.ReactElement;
+/** Props accepted by `<PaginationEllipsis>`. */
+export interface PaginationEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLSpanElement>;
+}
+/** A non-interactive gap marker between page ranges. */
+export declare function PaginationEllipsis({ className, ref, ...props }: PaginationEllipsisProps): React.ReactElement;
+//# sourceMappingURL=pagination.d.ts.map

package/esm/src/react/components/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACxE,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAW5F;AAED,+CAA+C;AAC/C,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACpF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAC/B,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,GACnD,KAAK,CAAC,YAAY,CASpB;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC9E,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAC5B,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAChD,KAAK,CAAC,YAAY,CAEpB;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF,yGAAyG;IACzG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,6EAA6E;AAC7E,wBAAgB,cAAc,CAC5B,EAAE,SAAS,EAAE,QAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAClE,KAAK,CAAC,YAAY,CAmBpB;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,sEAAsE;AACtE,wBAAgB,kBAAkB,CAChC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GAC9D,KAAK,CAAC,YAAY,CAiBpB;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,kEAAkE;AAClE,wBAAgB,cAAc,CAC5B,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAC1D,KAAK,CAAC,YAAY,CAiBpB;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACpF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CAClC;AAED,wDAAwD;AACxD,wBAAgB,kBAAkB,CAChC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GACpD,KAAK,CAAC,YAAY,CAgBpB"}

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

@@ -0,0 +1,62 @@
+/**
+ * Pagination: a non-interactive compound for paging navigation. Structure is
+ * modelled on shadcn's pagination (a landmark `<nav>` wrapping a `<ul>` of
+ * `<li>` links) and restyled with the veryfront theme tokens. The active page is
+ * a {@link PaginationLink} with `isActive` (→ `aria-current="page"`);
+ * {@link PaginationPrevious}/{@link PaginationNext} are labelled link variants and
+ * {@link PaginationEllipsis} marks a gap in the page sequence.
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=3">3</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ *
+ * @module react/components/ui/pagination
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+/** The paging landmark: a centered `role="navigation"` region. */
+export function Pagination({ className, ref, ...props }) {
+    return (React.createElement("nav", { ref: ref, role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+/** The list of page items: a horizontal `<ul>`. */
+export function PaginationContent({ className, ref, ...props }) {
+    return (React.createElement("ul", { ref: ref, "data-slot": "pagination-content", className: cn("flex items-center gap-1", className), ...props }));
+}
+/** A single page slot: an `<li>` wrapping a link or ellipsis. */
+export function PaginationItem({ className, ref, ...props }) {
+    return React.createElement("li", { ref: ref, "data-slot": "pagination-item", className: className, ...props });
+}
+/** A page link: highlighted when `isActive`, otherwise hover-highlighted. */
+export function PaginationLink({ className, isActive = false, ref, ...props }) {
+    return (React.createElement("a", { ref: ref, "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive ? "" : undefined, className: cn("inline-flex h-9 min-w-9 items-center justify-center gap-1 rounded-md px-2 text-sm font-medium", "transition-[background-color,color] duration-150 ease-in", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]", isActive
+            ? "bg-[var(--accent)] text-[var(--accent-foreground)]"
+            : "text-[var(--foreground)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]", className), ...props }));
+}
+/** A "‹ Previous" link: a labelled {@link PaginationLink} variant. */
+export function PaginationPrevious({ className, children, ref, ...props }) {
+    return (React.createElement(PaginationLink, { ref: ref, "aria-label": "Go to previous page", "data-slot": "pagination-previous", className: cn("px-2.5", className), ...props }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement("span", { "aria-hidden": true }, "\u2039"),
+        React.createElement("span", null, "Previous")))));
+}
+/** A "Next ›" link: a labelled {@link PaginationLink} variant. */
+export function PaginationNext({ className, children, ref, ...props }) {
+    return (React.createElement(PaginationLink, { ref: ref, "aria-label": "Go to next page", "data-slot": "pagination-next", className: cn("px-2.5", className), ...props }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement("span", null, "Next"),
+        React.createElement("span", { "aria-hidden": true }, "\u203A")))));
+}
+/** A non-interactive gap marker between page ranges. */
+export function PaginationEllipsis({ className, ref, ...props }) {
+    return (React.createElement("span", { ref: ref, role: "presentation", "data-slot": "pagination-ellipsis", className: cn("flex h-9 w-9 items-center justify-center text-sm text-[var(--muted-foreground)]", className), ...props },
+        React.createElement("span", { "aria-hidden": true }, "\u2026"),
+        React.createElement("span", { className: "sr-only" }, "More pages")));
+}