@stevederico/skateboard-ui 3.11.0 → 4.0.0

package/dist/ui/context-menu.js

@@ -0,0 +1,345 @@
+"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 { ChevronRightIcon, CheckIcon } from "../icons/index.js";
+const MenuContext = React.createContext(null);
+function useMenu() {
+    const ctx = React.useContext(MenuContext);
+    if (!ctx)
+        throw new Error("ContextMenu parts must be used within <ContextMenu>");
+    return ctx;
+}
+function itemsOf(container) {
+    return Array.from(container.querySelectorAll(':scope > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="context-menu-group"] > [role^="menuitem"]:not([data-disabled]), :scope > [data-slot="context-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 ContextMenu({ children }) {
+    const [open, setOpen] = React.useState(false);
+    const [point, setPoint] = React.useState({ x: 0, y: 0 });
+    const contentId = React.useId();
+    const layers = React.useRef(new Set());
+    const openAt = React.useCallback((p) => {
+        setPoint(p);
+        setOpen(true);
+    }, []);
+    return (_jsx(MenuContext.Provider, { value: { open, setOpen, point, openAt, contentId, layers }, children: children }));
+}
+function ContextMenuPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function ContextMenuTrigger({ asChild = false, render, nativeButton: _nativeButton, children, className, onContextMenu, ...props }) {
+    const { open, openAt, contentId } = useMenu();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "div";
+    return (_jsx(Comp, { "data-slot": "context-menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", className: cn("select-none", className), onContextMenu: (e) => {
+            onContextMenu?.(e);
+            if (e.defaultPrevented)
+                return;
+            e.preventDefault();
+            openAt({ x: e.clientX, y: e.clientY });
+        }, ...props, children: slotChild }));
+}
+function ContextMenuContent({ className, children, onKeyDown, ...props }) {
+    const { open, setOpen, point, contentId, layers } = useMenu();
+    const [mounted, presenceRef] = usePresence(open);
+    const containerRef = React.useRef(null);
+    // Position the menu at the cursor, clamped into the viewport once the
+    // popup has measurable dimensions.
+    const [pos, setPos] = React.useState(null);
+    React.useLayoutEffect(() => {
+        if (!mounted) {
+            setPos(null);
+            return;
+        }
+        let raf = 0;
+        const measure = () => {
+            const node = containerRef.current;
+            // The popup is portaled and may attach a frame late; retry until it does,
+            // otherwise pos stays null and the menu is stuck visibility:hidden.
+            if (!node) {
+                raf = requestAnimationFrame(measure);
+                return;
+            }
+            const w = node.offsetWidth;
+            const h = node.offsetHeight;
+            const PAD = 8;
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            // Flip toward the side with room, then clamp.
+            let x = point.x;
+            let y = point.y;
+            if (x + w + PAD > vw)
+                x = Math.max(PAD, point.x - w);
+            if (y + h + PAD > vh)
+                y = Math.max(PAD, point.y - h);
+            x = Math.max(PAD, Math.min(x, vw - w - PAD));
+            y = Math.max(PAD, Math.min(y, vh - h - PAD));
+            setPos({ x, y });
+        };
+        measure();
+        window.addEventListener("scroll", measure, true);
+        window.addEventListener("resize", measure);
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+        };
+    }, [mounted, point]);
+    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;
+            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, layers]);
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(presenceRef, containerRef), id: contentId, role: "menu", "aria-orientation": "vertical", tabIndex: -1, "data-slot": "context-menu-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", style: {
+                position: "fixed",
+                left: pos?.x ?? point.x,
+                top: pos?.y ?? point.y,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: "top left",
+            }, 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);
+                }
+                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();
+                    }
+                }
+            }, className: cn("z-50 max-h-(--available-height) 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=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 ContextMenuGroup({ className, ...props }) {
+    return _jsx("div", { role: "group", "data-slot": "context-menu-group", className: className, ...props });
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (_jsx("div", { "data-slot": "context-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 ContextMenuItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
+    const { setOpen } = useMenu();
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "context-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/context-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 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 focus:*:[svg]:text-accent-foreground 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 ContextMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "context-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 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": "context-menu-checkbox-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function ContextMenuRadioGroup({ value, onValueChange, ...props }) {
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onValueChange }, children: _jsx("div", { role: "group", "data-slot": "context-menu-radio-group", ...props }) }));
+}
+function ContextMenuRadioItem({ 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": "context-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 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": "context-menu-radio-item-indicator", children: checked ? _jsx(CheckIcon, {}) : null }), children] }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-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 <ContextMenuSub>");
+    return ctx;
+}
+function ContextMenuSub({ 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 ContextMenuSubTrigger({ 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": "context-menu-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center 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 ContextMenuSubContent({ 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": "context-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",
+            }, 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-[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 { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/ui/dialog.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Self-contained dialog built on the native `<dialog>` element: focus trapping,
+ * Escape, top-layer stacking, and the `::backdrop` come from the platform, so no
+ * hand-rolled focus trap or portal is needed.
+ */
+declare function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps): React.JSX.Element;
+declare function DialogTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function DialogClose({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+/** No-op wrappers kept for API parity with the Base UI version. The native
+ * `<dialog>` provides the portal/top-layer and the dim via `::backdrop`. */
+declare function DialogPortal({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DialogOverlay(): null;
+export interface DialogContentProps extends React.ComponentProps<"div"> {
+    showCloseButton?: boolean;
+}
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/ui/dialog.js

@@ -0,0 +1,109 @@
+"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 { Button } from "./button.js";
+import { Slot, resolveRender } from "./slot.js";
+import { XIcon } from "../icons/index.js";
+import { useControllableState } from "./use-controllable-state.js";
+const DialogContext = React.createContext(null);
+function useDialog() {
+    const ctx = React.useContext(DialogContext);
+    if (!ctx)
+        throw new Error("Dialog parts must be used within <Dialog>");
+    return ctx;
+}
+/**
+ * Self-contained dialog built on the native `<dialog>` element: focus trapping,
+ * Escape, top-layer stacking, and the `::backdrop` come from the platform, so no
+ * hand-rolled focus trap or portal is needed.
+ */
+function Dialog({ 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(DialogContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+}
+function DialogTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { open, setOpen } = useDialog();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "dialog-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "data-state": open ? "open" : "closed", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(true);
+        }, ...props, children: slotChild }));
+}
+function DialogClose({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { setOpen } = useDialog();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "dialog-close", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(false);
+        }, ...props, children: slotChild }));
+}
+/** No-op wrappers kept for API parity with the Base UI version. The native
+ * `<dialog>` provides the portal/top-layer and the dim via `::backdrop`. */
+function DialogPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function DialogOverlay() {
+    return null;
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    const { open, setOpen, titleId, descriptionId } = useDialog();
+    const ref = React.useRef(null);
+    const pointerDownOnBackdrop = React.useRef(false);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (open && !node.open)
+            node.showModal();
+        else if (!open && node.open)
+            node.close();
+    }, [open]);
+    // Lock background scroll while open.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+            e.preventDefault();
+            setOpen(false);
+        }, onClose: () => setOpen(false), onPointerDown: (e) => {
+            pointerDownOnBackdrop.current = e.target === ref.current;
+        }, onClick: (e) => {
+            // Close only when the press both started and ended on the backdrop —
+            // a drag that began inside the content (e.g. text selection) must not.
+            if (e.target === ref.current && pointerDownOnBackdrop.current) {
+                setOpen(false);
+            }
+        }, className: "group/dialog m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsxs("div", { "data-slot": "dialog-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("relative grid w-full max-w-[calc(100%-2rem)] gap-6 rounded-xl bg-background p-6 text-sm text-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })) : null }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    const { titleId } = useDialog();
+    return (_jsx("h2", { id: titleId, "data-slot": "dialog-title", className: cn("leading-none font-medium", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    const { descriptionId } = useDialog();
+    return (_jsx("p", { id: descriptionId, "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/ui/drawer.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+/**
+ * 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.
+ */
+declare function Drawer({ open, defaultOpen, onOpenChange, children }: DrawerProps): React.JSX.Element;
+declare function DrawerTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function DrawerClose({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+/** No-op wrappers kept for API parity — the native `<dialog>` provides the
+ * top-layer portal and the dim via `::backdrop`. */
+declare function DrawerPortal({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DrawerOverlay(): null;
+declare function DrawerContent({ className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: React.ComponentProps<"dialog">): React.JSX.Element | null;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };