@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/menubar.js

@@ -0,0 +1,397 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { Slot, mergeRefs, resolveRender } from "./slot.js";
+import { Portal } from "./portal.js";
+import { useFloating } from "./use-floating.js";
+import { usePresence } from "./use-presence.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
+const MenubarRootContext = React.createContext(null);
+function useMenubarRoot() {
+    const ctx = React.useContext(MenubarRootContext);
+    if (!ctx)
+        throw new Error("Menubar parts must be used within <Menubar>");
+    return ctx;
+}
+const MenuContext = React.createContext(null);
+function useMenu() {
+    const ctx = React.useContext(MenuContext);
+    if (!ctx)
+        throw new Error("Menu parts must be used within <MenubarMenu>");
+    return ctx;
+}
+function itemsOf(container) {
+    return Array.from(container.querySelectorAll(':scope > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="menubar-group"] > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="menubar-radio-group"] > [role^="menuitem"]:not([data-disabled])'));
+}
+function moveFocus(container, dir) {
+    const items = itemsOf(container);
+    if (!items.length)
+        return;
+    const idx = items.indexOf(document.activeElement);
+    let next = 0;
+    if (dir === "first")
+        next = 0;
+    else if (dir === "last")
+        next = items.length - 1;
+    else if (dir === "next")
+        next = idx < 0 ? 0 : (idx + 1) % items.length;
+    else
+        next = idx < 0 ? items.length - 1 : (idx - 1 + items.length) % items.length;
+    items[next]?.focus();
+}
+function Menubar({ className, ...props }) {
+    const [value, setValue] = React.useState(null);
+    const [active, setActive] = React.useState(false);
+    return (_jsx(MenubarRootContext.Provider, { value: { value, setValue, active, setActive }, children: _jsx("div", { role: "menubar", "data-slot": "menubar", className: cn("flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className), ...props }) }));
+}
+function MenubarMenu({ value: valueProp, children, }) {
+    const root = useMenubarRoot();
+    const generatedId = React.useId();
+    const value = valueProp ?? generatedId;
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    const layers = React.useRef(new Set());
+    const open = root.value === value;
+    const setOpen = React.useCallback((next) => {
+        if (next) {
+            root.setValue(value);
+            root.setActive(true);
+        }
+        else {
+            if (root.value === value)
+                root.setValue(null);
+            root.setActive(false);
+        }
+    }, [root, value]);
+    return (_jsx(MenuContext.Provider, { value: { value, open, setOpen, triggerRef, contentId, layers }, children: children }));
+}
+function MenubarPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function MenubarGroup({ className, ...props }) {
+    return _jsx("div", { role: "group", "data-slot": "menubar-group", className: className, ...props });
+}
+function MenubarTrigger({ asChild = false, render, nativeButton: _nativeButton, children, className, onClick, onKeyDown, onMouseEnter, ...props }) {
+    const root = useMenubarRoot();
+    const { value, open, setOpen, triggerRef, contentId } = useMenu();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "menubar-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", className: cn("cursor-pointer flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, onMouseEnter: (e) => {
+            onMouseEnter?.(e);
+            // When the bar is engaged, hovering a sibling trigger switches the
+            // open menu to this one without requiring another click.
+            if (!e.defaultPrevented && root.active && root.value !== value) {
+                root.setValue(value);
+            }
+        }, onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+            }
+            else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+                // Move focus along the bar to the sibling trigger.
+                const bar = e.currentTarget.closest('[role="menubar"]');
+                if (!bar)
+                    return;
+                const triggers = Array.from(bar.querySelectorAll('[data-slot="menubar-trigger"]'));
+                const idx = triggers.indexOf(e.currentTarget);
+                if (idx < 0)
+                    return;
+                e.preventDefault();
+                const delta = e.key === "ArrowRight" ? 1 : -1;
+                const target = triggers[(idx + delta + triggers.length) % triggers.length];
+                target?.focus();
+                if (root.active)
+                    target?.click();
+            }
+        }, ...props, children: slotChild }));
+}
+function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", sideOffset = 8, className, children, onKeyDown, ...props }) {
+    const root = useMenubarRoot();
+    const { open, setOpen, triggerRef, contentId, layers } = useMenu();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    React.useEffect(() => {
+        const node = containerRef.current;
+        if (!node)
+            return;
+        layers.current.add(node);
+        return () => {
+            layers.current.delete(node);
+        };
+    }, [mounted, layers]);
+    // Focus the first item once the popup is actually visible — a
+    // visibility:hidden element can't take focus, so retry each frame until it is.
+    const didFocus = React.useRef(false);
+    React.useEffect(() => {
+        if (!open) {
+            didFocus.current = false;
+            return;
+        }
+        let raf = 0;
+        const tryFocus = () => {
+            const c = containerRef.current;
+            if (c && getComputedStyle(c).visibility !== "hidden") {
+                didFocus.current = true;
+                moveFocus(c, "first");
+            }
+            else if (!didFocus.current) {
+                raf = requestAnimationFrame(tryFocus);
+            }
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (triggerRef.current?.contains(t))
+                return;
+            for (const layer of layers.current)
+                if (layer.contains(t))
+                    return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, [open, setOpen, triggerRef, layers]);
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "menu", "aria-orientation": "vertical", tabIndex: -1, "data-slot": "menubar-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+                position: "fixed",
+                left: pos?.x ?? 0,
+                top: pos?.y ?? 0,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+            }, onPointerMove: (e) => {
+                const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
+                if (item && item !== document.activeElement)
+                    item.focus();
+            }, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented)
+                    return;
+                const c = containerRef.current;
+                if (e.key === "ArrowDown")
+                    (e.preventDefault(), moveFocus(c, "next"));
+                else if (e.key === "ArrowUp")
+                    (e.preventDefault(), moveFocus(c, "prev"));
+                else if (e.key === "Home")
+                    (e.preventDefault(), moveFocus(c, "first"));
+                else if (e.key === "End")
+                    (e.preventDefault(), moveFocus(c, "last"));
+                else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                    // Switch to the adjacent menu in the bar, keeping it open.
+                    const trigger = triggerRef.current;
+                    const bar = trigger?.closest('[role="menubar"]');
+                    if (!bar)
+                        return;
+                    const triggers = Array.from(bar.querySelectorAll('[data-slot="menubar-trigger"]'));
+                    const idx = triggers.indexOf(trigger);
+                    if (idx < 0)
+                        return;
+                    e.preventDefault();
+                    const delta = e.key === "ArrowRight" ? 1 : -1;
+                    triggers[(idx + delta + triggers.length) % triggers.length]?.click();
+                }
+                else if (e.key === "Escape") {
+                    e.preventDefault();
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                }
+                else if (e.key === "Tab") {
+                    root.setValue(null);
+                    root.setActive(false);
+                }
+                else if (e.key === "Enter" || e.key === " ") {
+                    const active = document.activeElement;
+                    if (active && c.contains(active) && active.getAttribute("role")?.startsWith("menuitem")) {
+                        e.preventDefault();
+                        active.click();
+                    }
+                }
+                else {
+                    // Printable-character typeahead: jump to the menu item whose label
+                    // matches the typed buffer (WAI-ARIA menu pattern).
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
+            }, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+}
+function MenubarLabel({ className, inset, ...props }) {
+    return (_jsx("div", { "data-slot": "menubar-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className), ...props }));
+}
+function MenubarItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
+    const { setOpen } = useMenu();
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "menubar-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/menubar-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), onClick: (e) => {
+            if (disabled)
+                return;
+            onClick?.(e);
+            if (e.defaultPrevented)
+                return;
+            onSelect?.();
+            setOpen(false);
+        }, ...props }));
+}
+const RadioGroupContext = React.createContext({});
+function MenubarCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+            if (disabled)
+                return;
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onCheckedChange?.(!checked);
+        }, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center", "data-slot": "menubar-checkbox-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function MenubarRadioGroup({ value, onValueChange, ...props }) {
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onValueChange }, children: _jsx("div", { role: "group", "data-slot": "menubar-radio-group", ...props }) }));
+}
+function MenubarRadioItem({ className, children, value, disabled, inset, onClick, ...props }) {
+    const { value: groupValue, onValueChange } = React.useContext(RadioGroupContext);
+    const checked = groupValue === value;
+    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+            if (disabled)
+                return;
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onValueChange?.(value);
+        }, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center", "data-slot": "menubar-radio-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function MenubarSeparator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function MenubarShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className), ...props }));
+}
+const SubContext = React.createContext(null);
+function useSub() {
+    const ctx = React.useContext(SubContext);
+    if (!ctx)
+        throw new Error("Submenu parts must be used within <MenubarSub>");
+    return ctx;
+}
+function MenubarSub({ defaultOpen = false, children, }) {
+    const [open, setOpen] = React.useState(defaultOpen);
+    const triggerRef = React.useRef(null);
+    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef }, children: children }));
+}
+function MenubarSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }) {
+    const { open, setOpen, triggerRef } = useSub();
+    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "data-slot": "menubar-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
+            onMouseEnter?.(e);
+            setOpen(true);
+        }, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+            }
+        }, ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function MenubarSubContent({ className, children, onKeyDown, ...props }) {
+    const { open, setOpen, triggerRef } = useSub();
+    const { layers } = useMenu();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side: "right",
+        align: "start",
+        sideOffset: 0,
+        alignOffset: -3,
+    });
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        const node = containerRef.current;
+        if (!node)
+            return;
+        layers.current.add(node);
+        return () => {
+            layers.current.delete(node);
+        };
+    }, [mounted, layers]);
+    const didFocus = React.useRef(false);
+    React.useEffect(() => {
+        if (!open) {
+            didFocus.current = false;
+            return;
+        }
+        let raf = 0;
+        const tryFocus = () => {
+            const c = containerRef.current;
+            if (c && getComputedStyle(c).visibility !== "hidden") {
+                didFocus.current = true;
+                moveFocus(c, "first");
+            }
+            else if (!didFocus.current) {
+                raf = requestAnimationFrame(tryFocus);
+            }
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
+    }, [open]);
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), role: "menu", tabIndex: -1, "data-slot": "menubar-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
+                position: "fixed",
+                left: pos?.x ?? 0,
+                top: pos?.y ?? 0,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+            }, onPointerMove: (e) => {
+                const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
+                if (item && item !== document.activeElement)
+                    item.focus();
+            }, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented)
+                    return;
+                const c = containerRef.current;
+                if (e.key === "ArrowDown")
+                    (e.preventDefault(), moveFocus(c, "next"));
+                else if (e.key === "ArrowUp")
+                    (e.preventDefault(), moveFocus(c, "prev"));
+                else if (e.key === "ArrowLeft" || e.key === "Escape") {
+                    e.preventDefault();
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                }
+                else if (e.key === "Enter" || e.key === " ") {
+                    const active = document.activeElement;
+                    if (active && c.contains(active)) {
+                        e.preventDefault();
+                        active.click();
+                    }
+                }
+            }, className: cn("z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+}
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/ui/navigation-menu.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+declare function NavigationMenu({ className, children, onMouseLeave, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    [x: string]: Record<string, string>;
+}> | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, onKeyDown, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function NavigationMenuContent({ className, children, onMouseEnter, onKeyDown, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+declare function NavigationMenuLink({ className, active, ...props }: React.ComponentProps<"a"> & {
+    active?: boolean;
+}): React.JSX.Element;
+/**
+ * No-op kept only to preserve the import name. The base-ui version renders an
+ * arrow indicator tied to the shared viewport; this simpler menu floats each
+ * content panel independently, so there is nothing to indicate.
+ */
+declare function NavigationMenuIndicator(_props: React.ComponentProps<"div">): React.ReactElement | null;
+/**
+ * No-op kept only to preserve the import name. Positioning is handled inline by
+ * NavigationMenuContent via useFloating, so no separate positioner is needed.
+ */
+declare function NavigationMenuPositioner(_props: React.ComponentProps<"div">): React.ReactElement | null;
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };

package/dist/ui/navigation-menu.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "../shadcn/lib/cva.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { Portal } from "./portal.js";
+import { useFloating } from "./use-floating.js";
+import { usePresence } from "./use-presence.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { ChevronDownIcon } from "../icons/index.js";
+const NavigationMenuContext = React.createContext(null);
+function useNavigationMenu() {
+    const ctx = React.useContext(NavigationMenuContext);
+    if (!ctx)
+        throw new Error("NavigationMenu parts must be used within <NavigationMenu>");
+    return ctx;
+}
+const NavigationMenuItemContext = React.createContext(null);
+function useNavigationMenuItem() {
+    const ctx = React.useContext(NavigationMenuItemContext);
+    if (!ctx)
+        throw new Error("NavigationMenu trigger/content must be used within <NavigationMenuItem>");
+    return ctx;
+}
+function NavigationMenu({ className, children, onMouseLeave, ...props }) {
+    const [value, setValue] = useControllableState({
+        defaultValue: null,
+    });
+    const closeTimer = React.useRef(null);
+    const cancelClose = React.useCallback(() => {
+        if (closeTimer.current !== null) {
+            window.clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    }, []);
+    const scheduleClose = React.useCallback(() => {
+        cancelClose();
+        closeTimer.current = window.setTimeout(() => setValue(null), 150);
+    }, [cancelClose, setValue]);
+    const open = React.useCallback((v) => {
+        cancelClose();
+        setValue(v);
+    }, [cancelClose, setValue]);
+    React.useEffect(() => () => cancelClose(), [cancelClose]);
+    React.useEffect(() => {
+        if (value === null)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                setValue(null);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [value, setValue]);
+    return (_jsx(NavigationMenuContext.Provider, { value: { value, setValue, open, scheduleClose, cancelClose }, children: _jsx("nav", { "data-slot": "navigation-menu", "data-orientation": "horizontal", className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), onMouseEnter: cancelClose, onMouseLeave: (e) => {
+                onMouseLeave?.(e);
+                if (!e.defaultPrevented)
+                    scheduleClose();
+            }, ...props, children: children }) }));
+}
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-0", className), ...props }));
+}
+function NavigationMenuItem({ className, ...props }) {
+    const value = React.useId();
+    // One id + content ref per item so multiple triggers/panels don't collide
+    // when wiring aria-controls and focusing into the right portaled panel.
+    const contentId = React.useId();
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    return (_jsx(NavigationMenuItemContext.Provider, { value: { value, triggerRef, contentId, contentRef }, children: _jsx("li", { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }) }));
+}
+// Tabbable descendants, in DOM order, used to move focus into the open content
+// panel. Kept local (not imported) so this file stays self-contained.
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+const navigationMenuTriggerStyle = cva("cursor-pointer group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
+function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, onKeyDown, ...props }) {
+    const { value, setValue, open } = useNavigationMenu();
+    const { value: itemValue, triggerRef, contentId, contentRef } = useNavigationMenuItem();
+    const isOpen = value === itemValue;
+    /**
+     * Move keyboard focus into the open content panel so its links are
+     * reachable. The panel is portaled and opens on focus/hover, but without
+     * this a keyboard user can never enter it (WCAG 2.1.1 keyboard trap-out).
+     * ArrowDown (and Enter) open if needed, then focus the first focusable child.
+     */
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.key !== "ArrowDown" && e.key !== "Enter")
+            return;
+        // Enter still toggles via onClick; only intercept it to enter an open panel.
+        if (e.key === "Enter" && !isOpen)
+            return;
+        e.preventDefault();
+        open(itemValue);
+        // The panel mounts this tick and is positioned a frame or two later (it
+        // starts visibility:hidden until useFloating measures it, and focus() on a
+        // hidden node is a no-op). Retry across a few frames until it is visible,
+        // bounded so a panel that never opens can't spin forever.
+        let frames = 0;
+        const focusFirst = () => {
+            const node = contentRef.current;
+            if (!node || getComputedStyle(node).visibility === "hidden") {
+                if (frames++ < 20)
+                    requestAnimationFrame(focusFirst);
+                return;
+            }
+            const first = node.querySelector(FOCUSABLE_SELECTOR);
+            (first ?? node).focus();
+        };
+        requestAnimationFrame(focusFirst);
+    };
+    return (_jsxs("button", { ref: triggerRef, type: "button", "data-slot": "navigation-menu-trigger", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? contentId : undefined, "data-state": isOpen ? "open" : "closed", "data-popup-open": isOpen ? "" : undefined, "data-open": isOpen ? "" : undefined, className: cn(navigationMenuTriggerStyle(), "group", className), onMouseEnter: (e) => {
+            onMouseEnter?.(e);
+            if (!e.defaultPrevented)
+                open(itemValue);
+        }, onFocus: (e) => {
+            onFocus?.(e);
+            if (!e.defaultPrevented)
+                open(itemValue);
+        }, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setValue(isOpen ? null : itemValue);
+        }, onKeyDown: handleKeyDown, ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-open:rotate-180", "aria-hidden": "true" })] }));
+}
+function NavigationMenuContent({ className, children, onMouseEnter, onKeyDown, ...props }) {
+    const { value, setValue, cancelClose, scheduleClose } = useNavigationMenu();
+    const { value: itemValue, triggerRef, contentId, contentRef } = useNavigationMenuItem();
+    const isOpen = value === itemValue;
+    const [mounted, presenceRef] = usePresence(isOpen);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side: "bottom",
+        align: "start",
+        sideOffset: 8,
+        alignOffset: 0,
+    });
+    const setRef = React.useCallback((node) => {
+        floatingRef.current = node;
+        presenceRef.current = node;
+        contentRef.current = node;
+    }, [floatingRef, presenceRef, contentRef]);
+    /**
+     * Restore focus to the trigger whenever the panel closes while focus is still
+     * inside it (root-level Escape, mouse-leave timeout, etc.). Without this the
+     * panel unmounts and keyboard focus is stranded on a detached node (a11y).
+     * If focus already moved elsewhere (e.g. an outside click), leave it alone.
+     */
+    React.useEffect(() => {
+        if (isOpen)
+            return;
+        const node = contentRef.current;
+        const trigger = triggerRef.current;
+        if (trigger && node && node.contains(document.activeElement))
+            trigger.focus();
+    }, [isOpen, contentRef, triggerRef]);
+    /**
+     * Escape closes the menu and returns focus to the trigger. The root already
+     * listens for Escape to clear the value, but only this panel knows to restore
+     * focus — otherwise keyboard focus would be stranded on a now-unmounted node.
+     */
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || e.key !== "Escape")
+            return;
+        e.preventDefault();
+        setValue(null);
+        triggerRef.current?.focus();
+    };
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: setRef, id: contentId, role: "menu", tabIndex: -1, "data-slot": "navigation-menu-content", "data-state": isOpen ? "open" : "closed", "data-open": isOpen ? "" : undefined, "data-closed": isOpen ? undefined : "", "data-side": pos?.side ?? "bottom", style: {
+                position: "fixed",
+                left: pos?.x ?? 0,
+                top: pos?.y ?? 0,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+            }, onKeyDown: handleKeyDown, onMouseEnter: (e) => {
+                onMouseEnter?.(e);
+                cancelClose();
+            }, onMouseLeave: scheduleClose, className: cn("z-50 w-auto origin-(--transform-origin) rounded-md bg-popover p-2 text-popover-foreground shadow ring-1 ring-foreground/10 duration-200 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props, children: children }) }));
+}
+function NavigationMenuLink({ className, active, ...props }) {
+    return (_jsx("a", { "data-slot": "navigation-menu-link", "data-active": active ? "true" : undefined, className: cn("cursor-pointer flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+/**
+ * No-op kept only to preserve the import name. The base-ui version renders an
+ * arrow indicator tied to the shared viewport; this simpler menu floats each
+ * content panel independently, so there is nothing to indicate.
+ */
+function NavigationMenuIndicator(_props) {
+    return null;
+}
+/**
+ * No-op kept only to preserve the import name. Positioning is handled inline by
+ * NavigationMenuContent via useFloating, so no separate positioner is needed.
+ */
+function NavigationMenuPositioner(_props) {
+    return null;
+}
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };

package/dist/ui/pagination.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Button } from "./button.js";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, onKeyDown, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };