@stevederico/skateboard-ui 3.11.0 → 4.0.0

package/dist/ui/popover.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } 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 { useDismiss } from "./use-dismiss.js";
+import { usePresence } from "./use-presence.js";
+import { useControllableState } from "./use-controllable-state.js";
+const PopoverContext = React.createContext(null);
+function usePopover() {
+    const ctx = React.useContext(PopoverContext);
+    if (!ctx)
+        throw new Error("Popover parts must be used within <Popover>");
+    return ctx;
+}
+function Popover({ open, defaultOpen = false, onOpenChange, children }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    return (_jsx(PopoverContext.Provider, { value: { open: isOpen, setOpen, triggerRef, contentId }, children: children }));
+}
+function PopoverTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { open, setOpen, triggerRef, contentId } = usePopover();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "popover-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, ...props, children: slotChild }));
+}
+function PopoverContent({ className, style, ref, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+    const { open, setOpen, triggerRef, contentId } = usePopover();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    useDismiss(open, () => setOpen(false), [triggerRef, floatingRef]);
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, ref), id: contentId, role: "dialog", "data-slot": "popover-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+                ...style,
+                position: "fixed",
+                left: pos?.x ?? 0,
+                top: pos?.y ?? 0,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+            }, className: cn("isolate z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden 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 }) }));
+}
+function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (_jsx("h2", { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/ui/portal.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** Render children into `container` (defaults to document.body), SSR-safe. */
+declare function Portal({ children, container, }: {
+    children: React.ReactNode;
+    container?: Element | null;
+}): React.ReactPortal | null;
+export { Portal };

package/dist/ui/portal.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+import { createPortal } from "react-dom";
+/** Render children into `container` (defaults to document.body), SSR-safe. */
+function Portal({ children, container, }) {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    if (!mounted)
+        return null;
+    return createPortal(children, container ?? document.body);
+}
+export { Portal };

package/dist/ui/progress.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ProgressProps extends React.ComponentProps<"div"> {
+    value?: number | null;
+    max?: number;
+}
+/**
+ * Self-contained progress bar. Presentational only — exposes value/max via
+ * context so the indicator can size itself and the value label can format.
+ */
+declare function Progress({ className, children, value, max, ...props }: ProgressProps): React.JSX.Element;
+declare function ProgressTrack({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ProgressIndicator({ className, style, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ProgressLabel({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function ProgressValue({ className, children, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/ui/progress.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+const ProgressContext = React.createContext({
+    value: null,
+    max: 100,
+});
+function usePercent() {
+    const { value, max } = React.useContext(ProgressContext);
+    if (value == null)
+        return null;
+    return Math.min(100, Math.max(0, (value / max) * 100));
+}
+/**
+ * Self-contained progress bar. Presentational only — exposes value/max via
+ * context so the indicator can size itself and the value label can format.
+ */
+function Progress({ className, children, value = null, max = 100, ...props }) {
+    return (_jsx(ProgressContext.Provider, { value: { value, max }, children: _jsxs("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value ?? undefined, "data-slot": "progress", className: cn("flex flex-wrap gap-3", className), ...props, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
+}
+function ProgressTrack({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "progress-track", className: cn("relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted", className), ...props }));
+}
+function ProgressIndicator({ className, style, ...props }) {
+    const percent = usePercent();
+    return (_jsx("div", { "data-slot": "progress-indicator", className: cn("h-full bg-primary transition-all", className), style: { width: `${percent ?? 0}%`, ...style }, ...props }));
+}
+function ProgressLabel({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "progress-label", className: cn("text-sm font-medium", className), ...props }));
+}
+function ProgressValue({ className, children, ...props }) {
+    const percent = usePercent();
+    return (_jsx("span", { "data-slot": "progress-value", className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className), ...props, children: children ?? (percent == null ? null : `${Math.round(percent)}%`) }));
+}
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/ui/radio-group.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface RadioGroupProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+}
+/**
+ * Self-contained radio group. Single-select with roving tab index and arrow-key
+ * navigation that moves focus and selection together (WAI-ARIA radiogroup).
+ */
+declare function RadioGroup({ className, value, defaultValue, onValueChange, name, onKeyDown, ...props }: RadioGroupProps): React.JSX.Element;
+export interface RadioGroupItemProps extends Omit<React.ComponentProps<"button">, "value"> {
+    value: string;
+}
+declare function RadioGroupItem({ className, value, onClick, disabled, ...props }: RadioGroupItemProps): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { useControllableState } from "./use-controllable-state.js";
+const RadioGroupContext = React.createContext(null);
+function useRadioGroup() {
+    const ctx = React.useContext(RadioGroupContext);
+    if (!ctx)
+        throw new Error("RadioGroupItem must be used within <RadioGroup>");
+    return ctx;
+}
+/**
+ * Self-contained radio group. Single-select with roving tab index and arrow-key
+ * navigation that moves focus and selection together (WAI-ARIA radiogroup).
+ */
+function RadioGroup({ className, value, defaultValue, onValueChange, name, onKeyDown, ...props }) {
+    const [selected, setSelected] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    return (_jsxs(RadioGroupContext.Provider, { value: { value: selected, setValue: setSelected, name }, children: [_jsx("div", { role: "radiogroup", "data-slot": "radio-group", className: cn("grid w-full gap-3", className), onKeyDown: (e) => {
+                    onKeyDown?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key))
+                        return;
+                    const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled]):not([data-disabled])'));
+                    const current = radios.indexOf(document.activeElement);
+                    if (current < 0)
+                        return;
+                    e.preventDefault();
+                    const forward = e.key === "ArrowDown" || e.key === "ArrowRight";
+                    const next = forward
+                        ? (current + 1) % radios.length
+                        : (current - 1 + radios.length) % radios.length;
+                    radios[next].focus();
+                    radios[next].click();
+                }, ...props }), name ? (_jsx("input", { type: "hidden", name: name, value: selected ?? "" })) : null] }));
+}
+function RadioGroupItem({ className, value, onClick, disabled, ...props }) {
+    const { value: selected, setValue } = useRadioGroup();
+    const checked = selected === value;
+    // Roving tab index: the checked radio is tabbable; if none checked, the first
+    // item is reachable (handled by Base UI semantics via tabIndex below).
+    const tabbable = checked || selected === undefined;
+    return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, disabled: disabled, tabIndex: tabbable ? 0 : -1, "data-slot": "radio-group-item", "data-state": checked ? "checked" : "unchecked", "data-checked": checked ? "" : undefined, className: cn("cursor-pointer group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setValue(value);
+        }, ...props, children: checked ? (_jsx("span", { "data-slot": "radio-group-indicator", className: "size-2 rounded-full bg-primary-foreground" })) : null }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/ui/scroll-area.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * Self-contained scroll area: a native-overflow viewport with the platform
+ * scrollbar hidden, plus a custom thumb synced to scroll position and draggable.
+ * Vertical and horizontal bars appear only when their axis overflows.
+ */
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ScrollBar(_props: React.ComponentProps<"div">): null;
+export { ScrollArea, ScrollBar };

package/dist/ui/scroll-area.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+/**
+ * Self-contained scroll area: a native-overflow viewport with the platform
+ * scrollbar hidden, plus a custom thumb synced to scroll position and draggable.
+ * Vertical and horizontal bars appear only when their axis overflows.
+ */
+function ScrollArea({ className, children, ...props }) {
+    const viewportRef = React.useRef(null);
+    const [thumb, setThumb] = React.useState({
+        vSize: 0,
+        vPos: 0,
+        hSize: 0,
+        hPos: 0,
+    });
+    const sync = React.useCallback(() => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = vp;
+        setThumb({
+            vSize: scrollHeight > clientHeight ? (clientHeight / scrollHeight) * 100 : 0,
+            vPos: scrollHeight > clientHeight ? (scrollTop / scrollHeight) * 100 : 0,
+            hSize: scrollWidth > clientWidth ? (clientWidth / scrollWidth) * 100 : 0,
+            hPos: scrollWidth > clientWidth ? (scrollLeft / scrollWidth) * 100 : 0,
+        });
+    }, []);
+    React.useLayoutEffect(() => {
+        sync();
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const ro = new ResizeObserver(sync);
+        ro.observe(vp);
+        for (const child of Array.from(vp.children))
+            ro.observe(child);
+        return () => ro.disconnect();
+    }, [sync]);
+    const dragBar = (axis) => (e) => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const startPos = axis === "v" ? e.clientY : e.clientX;
+        const startScroll = axis === "v" ? vp.scrollTop : vp.scrollLeft;
+        const track = e.currentTarget;
+        const trackLen = axis === "v" ? track.clientHeight : track.clientWidth;
+        const scrollLen = axis === "v" ? vp.scrollHeight : vp.scrollWidth;
+        track.setPointerCapture(e.pointerId);
+        const onMove = (ev) => {
+            const delta = (axis === "v" ? ev.clientY : ev.clientX) - startPos;
+            const next = startScroll + (delta / trackLen) * scrollLen;
+            if (axis === "v")
+                vp.scrollTop = next;
+            else
+                vp.scrollLeft = next;
+        };
+        const onUp = (ev) => {
+            track.releasePointerCapture(ev.pointerId);
+            track.removeEventListener("pointermove", onMove);
+            track.removeEventListener("pointerup", onUp);
+        };
+        track.addEventListener("pointermove", onMove);
+        track.addEventListener("pointerup", onUp);
+    };
+    return (_jsxs("div", { "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx("div", { ref: viewportRef, "data-slot": "scroll-area-viewport", onScroll: sync, className: "size-full overflow-auto rounded-[inherit] outline-none [-ms-overflow-style:none] [scrollbar-width:none] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [&::-webkit-scrollbar]:hidden", children: children }), thumb.vSize > 0 && (_jsx("div", { "data-slot": "scroll-area-scrollbar", "data-orientation": "vertical", onPointerDown: dragBar("v"), className: "absolute top-0 right-0 bottom-0 w-2.5 touch-none p-px select-none", children: _jsx("div", { "data-slot": "scroll-area-thumb", className: "absolute inset-x-px rounded-full bg-border", style: { height: `${thumb.vSize}%`, top: `${thumb.vPos}%` } }) })), thumb.hSize > 0 && (_jsx("div", { "data-slot": "scroll-area-scrollbar", "data-orientation": "horizontal", onPointerDown: dragBar("h"), className: "absolute right-0 bottom-0 left-0 h-2.5 touch-none p-px select-none", children: _jsx("div", { "data-slot": "scroll-area-thumb", className: "absolute inset-y-px rounded-full bg-border", style: { width: `${thumb.hSize}%`, left: `${thumb.hPos}%` } }) }))] }));
+}
+function ScrollBar(_props) {
+    return null;
+}
+export { ScrollArea, ScrollBar };

package/dist/ui/select.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type Side, type Align } from "./use-floating.js";
+export interface SelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function Select({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, children, }: SelectProps): React.JSX.Element;
+declare function SelectGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SelectValue({ className, placeholder, ...props }: React.ComponentProps<"span"> & {
+    placeholder?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, onClick, onKeyDown, ...props }: React.ComponentProps<"button"> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+export interface SelectContentProps extends React.ComponentProps<"div"> {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, onKeyDown, ...props }: SelectContentProps): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface SelectItemProps extends Omit<React.ComponentProps<"div">, "value"> {
+    value: string;
+    disabled?: boolean;
+}
+declare function SelectItem({ className, children, value, disabled, onClick, ...props }: SelectItemProps): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** No-op scroll buttons — native overflow handles scrolling. Kept for API parity. */
+declare function SelectScrollUpButton(_props: React.ComponentProps<"div">): null;
+declare function SelectScrollDownButton(_props: React.ComponentProps<"div">): null;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/ui/select.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } 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 { ChevronDownIcon, CheckIcon } from "../icons/index.js";
+const SelectContext = React.createContext(null);
+function useSelect() {
+    const ctx = React.useContext(SelectContext);
+    if (!ctx)
+        throw new Error("Select parts must be used within <Select>");
+    return ctx;
+}
+function Select({ value, defaultValue, onValueChange, open, defaultOpen = false, onOpenChange, children, }) {
+    const [selected, setSelected] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    const [labels, setLabels] = React.useState({});
+    const registerLabel = React.useCallback((v, label) => setLabels((prev) => ({ ...prev, [v]: label })), []);
+    const unregisterLabel = React.useCallback((v) => setLabels((prev) => {
+        const { [v]: _, ...rest } = prev;
+        return rest;
+    }), []);
+    const setValue = React.useCallback((v) => {
+        setSelected(v);
+        setOpen(false);
+        triggerRef.current?.focus();
+    }, [setSelected, setOpen]);
+    return (_jsx(SelectContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            value: selected,
+            setValue,
+            triggerRef,
+            contentId,
+            labels,
+            registerLabel,
+            unregisterLabel,
+        }, children: children }));
+}
+function SelectGroup({ className, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props }));
+}
+function SelectValue({ className, placeholder, ...props }) {
+    const { value, labels } = useSelect();
+    const label = value !== undefined ? labels[value] : undefined;
+    return (_jsx("span", { "data-slot": "select-value", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex flex-1 text-left", className), ...props, children: label ?? placeholder ?? null }));
+}
+function SelectTrigger({ className, size = "default", children, onClick, onKeyDown, ...props }) {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect();
+    return (_jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-slot": "select-trigger", "data-size": size, "data-state": open ? "open" : "closed", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), 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: [children, _jsx(ChevronDownIcon, {})] }));
+}
+function optionsOf(container) {
+    return Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+}
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, onKeyDown, ...props }) {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    const containerRef = React.useRef(null);
+    // Focus the selected (or first) option once the popup is actually visible.
+    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;
+                const opts = optionsOf(c);
+                const selected = opts.find((o) => o.getAttribute("data-value") === value);
+                (selected ?? opts[0])?.focus();
+            }
+            else if (!didFocus.current) {
+                raf = requestAnimationFrame(tryFocus);
+            }
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
+    }, [open, value]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (triggerRef.current?.contains(t))
+                return;
+            if (containerRef.current?.contains(t))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, [open, setOpen, triggerRef]);
+    // While closed, render the items into a hidden tree so their value→label
+    // mappings register — this lets SelectValue show the selected label on initial
+    // render, before the listbox has ever been opened.
+    if (!mounted) {
+        return (_jsx("div", { hidden: true, "aria-hidden": true, "data-slot": "select-content-registry", children: children }));
+    }
+    const triggerWidth = triggerRef.current?.offsetWidth;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "listbox", tabIndex: -1, "data-slot": "select-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,
+                minWidth: triggerWidth,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+            }, onPointerMove: (e) => {
+                const opt = e.target.closest('[role="option"]:not([data-disabled])');
+                if (opt && opt !== document.activeElement)
+                    opt.focus();
+            }, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented)
+                    return;
+                const c = containerRef.current;
+                const opts = optionsOf(c);
+                const idx = opts.indexOf(document.activeElement);
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    opts[idx < 0 ? 0 : (idx + 1) % opts.length]?.focus();
+                }
+                else if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    opts[idx < 0 ? opts.length - 1 : (idx - 1 + opts.length) % opts.length]?.focus();
+                }
+                else if (e.key === "Home") {
+                    e.preventDefault();
+                    opts[0]?.focus();
+                }
+                else if (e.key === "End") {
+                    e.preventDefault();
+                    opts[opts.length - 1]?.focus();
+                }
+                else if (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) && active.getAttribute("role") === "option") {
+                        e.preventDefault();
+                        active.click();
+                    }
+                }
+            }, className: cn("relative isolate 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 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 SelectLabel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+function SelectItem({ className, children, value, disabled, onClick, ...props }) {
+    const ctx = useSelect();
+    const selected = ctx.value === value;
+    // Register the value→label mapping. Kept sticky (no unregister on unmount) so
+    // SelectValue can still render the selected label after the list closes and
+    // its items unmount.
+    const { registerLabel } = ctx;
+    React.useEffect(() => {
+        registerLabel(value, children);
+    }, [value, children, registerLabel]);
+    return (_jsxs("div", { role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, "data-slot": "select-item", "data-value": value, "data-disabled": disabled ? "" : undefined, className: cn("relative flex w-full 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-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)
+                ctx.setValue(value);
+        }, ...props, children: [_jsx("span", { className: "flex flex-1 shrink-0 items-center gap-2 whitespace-nowrap", children: children }), selected ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(CheckIcon, {}) })) : null] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
+}
+/** No-op scroll buttons — native overflow handles scrolling. Kept for API parity. */
+function SelectScrollUpButton(_props) {
+    return null;
+}
+function SelectScrollDownButton(_props) {
+    return null;
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/ui/separator.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface SeparatorProps extends React.ComponentProps<"div"> {
+    orientation?: "horizontal" | "vertical";
+    /** Set true for a purely-visual divider hidden from a11y. Defaults to false
+     * so the separator keeps `role="separator"` semantics (matches the spec). */
+    decorative?: boolean;
+}
+/**
+ * Self-contained separator: a styled `<div>` with the correct ARIA role and
+ * orientation. No primitive framework, no `data-orientation` style bridge —
+ * orientation classes are applied directly.
+ */
+declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): React.JSX.Element;
+export { Separator };

package/dist/ui/separator.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+/**
+ * Self-contained separator: a styled `<div>` with the correct ARIA role and
+ * orientation. No primitive framework, no `data-orientation` style bridge —
+ * orientation classes are applied directly.
+ */
+function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
+    return (_jsx("div", { "data-slot": "separator", "data-orientation": orientation, role: decorative ? "none" : "separator", "aria-orientation": decorative ? undefined : orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className), ...props }));
+}
+export { Separator };

package/dist/ui/sheet.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+type SheetSide = "top" | "right" | "bottom" | "left";
+export interface SheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+/** Self-contained sheet (drawer) on native `<dialog>`, sliding in from an edge.
+ * Exit slide is preserved via {@link usePresence} before `dialog.close()`. */
+declare function Sheet({ open, defaultOpen, onOpenChange, children }: SheetProps): React.JSX.Element;
+declare function SheetTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function SheetClose({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface SheetContentProps extends React.ComponentProps<"dialog"> {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+}
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };