@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/drawer.js

@@ -0,0 +1,243 @@
+"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 { useControllableState } from "./use-controllable-state.js";
+import { usePresence } from "./use-presence.js";
+// Drag thresholds and animation timing ported from vaul (MIT — Emil Kowalski).
+// https://github.com/emilkowalski/vaul/blob/main/src/constants.ts
+const VELOCITY_THRESHOLD = 0.4;
+const CLOSE_THRESHOLD = 0.25;
+const TRANSITION = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1)";
+function dampenValue(v) {
+    return 8 * (Math.log(v + 1) - 2);
+}
+// Ported from vaul/src/index.tsx `shouldDrag`. Skips drag when the pointer is
+// inside a scrollable child that isn't at scrollTop=0 (lets content scroll
+// naturally), on a <select>, on a [data-no-drag] subtree, or when text is
+// highlighted.
+function shouldDrag(el, popup) {
+    let element = el;
+    if (window.getSelection()?.toString())
+        return false;
+    while (element && element !== popup) {
+        if (element.tagName === "SELECT")
+            return false;
+        if (element.hasAttribute?.("data-no-drag") || element.closest?.("[data-no-drag]"))
+            return false;
+        if (element.scrollHeight > element.clientHeight && element.scrollTop !== 0)
+            return false;
+        element = element.parentNode;
+    }
+    return true;
+}
+const DrawerContext = React.createContext(null);
+function useDrawer() {
+    const ctx = React.useContext(DrawerContext);
+    if (!ctx)
+        throw new Error("Drawer parts must be used within <Drawer>");
+    return ctx;
+}
+/**
+ * Self-contained bottom drawer on native `<dialog>` (focus trap, Escape,
+ * top-layer, ::backdrop) with vaul-style drag-to-dismiss: direct translate when
+ * dragging down, logarithmic rubber-band damping when dragging up, dismiss past
+ * 25% height or 0.4 px/ms velocity, otherwise snap back.
+ */
+function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    return (_jsx(DrawerContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+}
+function DrawerTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { open, setOpen } = useDrawer();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "drawer-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(true);
+        }, ...props, children: slotChild }));
+}
+function DrawerClose({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { setOpen } = useDrawer();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "drawer-close", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(false);
+        }, ...props, children: slotChild }));
+}
+/** No-op wrappers kept for API parity — the native `<dialog>` provides the
+ * top-layer portal and the dim via `::backdrop`. */
+function DrawerPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function DrawerOverlay() {
+    return null;
+}
+function DrawerContent({ className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
+    const { open, setOpen, titleId, descriptionId } = useDrawer();
+    const ref = React.useRef(null);
+    const pointerDownOnBackdrop = React.useRef(false);
+    const [mounted, presenceRef] = usePresence(open);
+    const dragState = React.useRef({ dragging: false, startY: 0, height: 0, startTime: 0 });
+    // A drag-dismiss already slides the panel out via an inline transform, so the
+    // CSS `animate-out` slide must be suppressed for that path — otherwise its
+    // keyframes would override the transform and snap the panel back into view.
+    // Programmatic closes (backdrop, Escape, controlled) keep the CSS animation.
+    const dismissingByDrag = React.useRef(false);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (mounted && !node.open)
+            node.showModal();
+        else if (!mounted && node.open)
+            node.close();
+    }, [mounted]);
+    React.useEffect(() => {
+        if (!mounted)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [mounted]);
+    // Clear any drag-leftover inline transform whenever we (re)open.
+    React.useEffect(() => {
+        if (open && ref.current) {
+            ref.current.style.transition = "";
+            ref.current.style.transform = "";
+            dismissingByDrag.current = false;
+        }
+    }, [open]);
+    const snapBack = React.useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.style.transition = TRANSITION;
+        el.style.transform = "";
+    }, []);
+    const dismiss = React.useCallback(() => {
+        const el = ref.current;
+        if (!el) {
+            setOpen(false);
+            return;
+        }
+        dismissingByDrag.current = true;
+        el.style.transition = TRANSITION;
+        el.style.transform = "translate3d(0, 100%, 0)";
+        window.setTimeout(() => setOpen(false), 500);
+    }, [setOpen]);
+    const handlePointerDown = (event) => {
+        pointerDownOnBackdrop.current = event.target === ref.current;
+        onPointerDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const el = ref.current;
+        const target = event.target;
+        if (!el || !shouldDrag(target, el))
+            return;
+        target?.setPointerCapture?.(event.pointerId);
+        dragState.current = {
+            dragging: true,
+            startY: event.clientY,
+            height: el.getBoundingClientRect().height || 0,
+            startTime: event.timeStamp,
+        };
+        el.style.transition = "none";
+    };
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        if (event.defaultPrevented)
+            return;
+        const state = dragState.current;
+        const el = ref.current;
+        if (!state.dragging || !el)
+            return;
+        const delta = event.clientY - state.startY;
+        if (delta >= 0) {
+            // Dragging down toward close — direct translate
+            el.style.transform = `translate3d(0, ${delta}px, 0)`;
+        }
+        else {
+            // Dragging up away from close — logarithmic rubber-band damping (vaul-style)
+            el.style.transform = `translate3d(0, ${-dampenValue(-delta)}px, 0)`;
+        }
+    };
+    const handlePointerUp = (event) => {
+        onPointerUp?.(event);
+        if (event.defaultPrevented)
+            return;
+        const state = dragState.current;
+        if (!state.dragging)
+            return;
+        state.dragging = false;
+        const delta = event.clientY - state.startY;
+        const elapsed = Math.max(1, event.timeStamp - state.startTime);
+        const velocity = Math.abs(delta) / elapsed;
+        if (delta < 0) {
+            snapBack();
+            return;
+        }
+        if (velocity > VELOCITY_THRESHOLD || delta >= state.height * CLOSE_THRESHOLD) {
+            dismiss();
+        }
+        else {
+            snapBack();
+        }
+    };
+    const handlePointerCancel = (event) => {
+        onPointerCancel?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!dragState.current.dragging)
+            return;
+        dragState.current.dragging = false;
+        snapBack();
+    };
+    if (!mounted)
+        return null;
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+            e.preventDefault();
+            setOpen(false);
+        }, onClose: () => setOpen(false), onClick: (e) => {
+            if (e.target === ref.current &&
+                pointerDownOnBackdrop.current &&
+                !dragState.current.dragging)
+                setOpen(false);
+        }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, className: cn(
+        // touch-none lets the pointer-drag own the vertical gesture instead of the
+        // browser claiming it for native scroll (which would fire pointercancel).
+        // top-auto/m-0/w-full/max-w-none clear the native <dialog> UA inset and
+        // sizing so the drawer pins to the bottom edge at full width.
+        "fixed inset-x-0 top-auto bottom-0 z-50 m-0 flex max-h-[80vh] w-full max-w-none touch-none flex-col rounded-t-xl border-t border-border bg-background p-0 text-sm outline-none backdrop:bg-black/10 backdrop:transition-opacity backdrop:duration-250 supports-backdrop-filter:backdrop:backdrop-blur-xs", open
+            ? "animate-in fade-in-0 slide-in-from-bottom-52 duration-300"
+            : dismissingByDrag.current
+                ? ""
+                : "animate-out fade-out-0 slide-out-to-bottom-52 duration-300", className), children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full bg-muted" }), children] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    const { titleId } = useDrawer();
+    return (_jsx("h2", { id: titleId, "data-slot": "drawer-title", className: cn("font-medium text-foreground", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    const { descriptionId } = useDrawer();
+    return (_jsx("p", { id: descriptionId, "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { type Side, type Align } from "./use-floating.js";
+export interface DropdownMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function DropdownMenu({ open, defaultOpen, onOpenChange, children, }: DropdownMenuProps): React.JSX.Element;
+declare function DropdownMenuPortal({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, onKeyDown, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface DropdownMenuContentProps extends React.ComponentProps<"div"> {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, children, onKeyDown, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
+declare function DropdownMenuGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}): React.JSX.Element;
+export interface DropdownMenuItemProps extends React.ComponentProps<"div"> {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+declare function DropdownMenuItem({ className, inset, variant, disabled, onSelect, onClick, ...props }: DropdownMenuItemProps): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }: Omit<React.ComponentProps<"div">, "onChange"> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ value, onValueChange, ...props }: React.ComponentProps<"div"> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+}): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, value, disabled, inset, onClick, ...props }: Omit<React.ComponentProps<"div">, "value"> & {
+    value: string;
+    disabled?: boolean;
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ defaultOpen, children, }: {
+    defaultOpen?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, children, onKeyDown, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,347 @@
+"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 { useControllableState } from "./use-controllable-state.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
+const MenuContext = React.createContext(null);
+function useMenu() {
+    const ctx = React.useContext(MenuContext);
+    if (!ctx)
+        throw new Error("Menu parts must be used within <DropdownMenu>");
+    return ctx;
+}
+function itemsOf(container) {
+    return Array.from(container.querySelectorAll(':scope > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="dropdown-menu-group"] > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="dropdown-menu-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 DropdownMenu({ open, defaultOpen = false, onOpenChange, children, }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    const layers = React.useRef(new Set());
+    return (_jsx(MenuContext.Provider, { value: { open: isOpen, setOpen, triggerRef, contentId, layers }, children: children }));
+}
+function DropdownMenuPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function DropdownMenuTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, onKeyDown, ...props }) {
+    const { 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": "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+            }
+        }, ...props, children: slotChild }));
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, onKeyDown, ...props }) {
+    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": "dropdown-menu-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",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
+            }, 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 === "Escape") {
+                    e.preventDefault();
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                }
+                else if (e.key === "Tab") {
+                    setOpen(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 {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    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 max-h-(--available-height) min-w-32 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 DropdownMenuGroup({ className, ...props }) {
+    return _jsx("div", { role: "group", "data-slot": "dropdown-menu-group", className: className, ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
+    const { setOpen } = useMenu();
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/dropdown-menu-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 DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function DropdownMenuRadioGroup({ value, onValueChange, ...props }) {
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onValueChange }, children: _jsx("div", { role: "group", "data-slot": "dropdown-menu-radio-group", ...props }) }));
+}
+function DropdownMenuRadioItem({ 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": "dropdown-menu-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-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 <DropdownMenuSub>");
+    return ctx;
+}
+function DropdownMenuSub({ 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 DropdownMenuSubTrigger({ 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": "dropdown-menu-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 DropdownMenuSubContent({ 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);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    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": "dropdown-menu-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();
+                    }
+                }
+                else {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    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-[96px] 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-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 { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/empty.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from "../shadcn/lib/cva.js";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        icon: string;
+    };
+}> | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };