@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/pagination.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, 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 { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "../icons/index.js";
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex items-center gap-1", className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", onKeyDown, ...props }) {
+    // An <a> without href is not focusable or Enter/Space-activatable, so for
+    // SPA usage (onClick, no href) add button semantics + keyboard activation.
+    const isRealLink = props.href != null;
+    return (_jsx(Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, className: cn("cursor-pointer", className), children: _jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, role: isRealLink ? undefined : "button", tabIndex: isRealLink ? undefined : 0, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (!isRealLink && !e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }, ...props }) }));
+}
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("pl-2!", className), ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "hidden sm:block", children: text })] }));
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("pr-2!", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRightIcon, {})] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/ui/popover.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { type Side, type Align } from "./use-floating.js";
+export interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps): React.JSX.Element;
+declare function PopoverTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface PopoverContentProps extends React.ComponentProps<"div"> {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+declare function PopoverContent({ className, style, ref, align, alignOffset, side, sideOffset, onKeyDown, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/ui/popover.js

@@ -0,0 +1,126 @@
+"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 }));
+}
+// Tabbable descendants, in DOM order, for focus-in and the Tab trap.
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function PopoverContent({ className, style, ref, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, onKeyDown, ...props }) {
+    const { open, setOpen, triggerRef, contentId } = usePopover();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    const contentRef = React.useRef(null);
+    useDismiss(open, () => setOpen(false), [triggerRef, floatingRef]);
+    // Move focus into the popover when it opens and restore it to the trigger on
+    // close — a role="dialog" must manage focus (native <dialog> does this for
+    // free; this portaled div does not).
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const trigger = triggerRef.current;
+        let raf = 0;
+        // Retry across frames until the content is mounted AND visible: presence
+        // mounts it a tick after `open` flips, and it stays visibility:hidden until
+        // useFloating positions it — focus() on a missing or hidden node is a silent
+        // no-op. The effect cleanup cancels this when the popover closes.
+        const focusIn = () => {
+            const node = contentRef.current;
+            if (!node || getComputedStyle(node).visibility === "hidden") {
+                raf = requestAnimationFrame(focusIn);
+                return;
+            }
+            const first = node.querySelector(FOCUSABLE_SELECTOR);
+            (first ?? node).focus();
+        };
+        raf = requestAnimationFrame(focusIn);
+        return () => {
+            cancelAnimationFrame(raf);
+            // Only reclaim focus if it is still inside the popover (an outside click
+            // already moved it elsewhere — don't yank it back).
+            const node = contentRef.current;
+            if (trigger && node && node.contains(document.activeElement))
+                trigger.focus();
+        };
+    }, [open, triggerRef]);
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, contentRef, ref), id: contentId, role: "dialog", tabIndex: -1, "data-slot": "popover-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented || e.key !== "Tab")
+                    return;
+                const node = contentRef.current;
+                if (!node)
+                    return;
+                const focusables = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+                if (focusables.length === 0) {
+                    e.preventDefault();
+                    node.focus();
+                    return;
+                }
+                const first = focusables[0];
+                const last = focusables[focusables.length - 1];
+                const activeEl = document.activeElement;
+                if (e.shiftKey && (activeEl === first || activeEl === node)) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                else if (!e.shiftKey && activeEl === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }, 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, ref, ...props }: RadioGroupItemProps): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -0,0 +1,66 @@
+"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 { 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, ref, ...props }) {
+    const { value: selected, setValue } = useRadioGroup();
+    const checked = selected === value;
+    const btnRef = React.useRef(null);
+    // Roving tab index: the checked radio is the single tab stop. When nothing is
+    // checked, only the first enabled radio is tabbable — making every radio
+    // tabbable would put multiple stops in Tab order, breaking the radiogroup
+    // pattern.
+    const [isFirstEnabled, setIsFirstEnabled] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (selected !== undefined)
+            return;
+        const el = btnRef.current;
+        const first = el?.parentElement?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
+        setIsFirstEnabled(first === el);
+    });
+    const tabbable = checked || (selected === undefined && isFirstEnabled);
+    return (_jsx("button", { ref: mergeRefs(btnRef, ref), 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, };