@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/tabs.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "../shadcn/lib/cva.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } from "./slot.js";
+import { useControllableState } from "./use-controllable-state.js";
+const TabsContext = React.createContext(null);
+function useTabs() {
+    const ctx = React.useContext(TabsContext);
+    if (!ctx)
+        throw new Error("Tabs parts must be used within <Tabs>");
+    return ctx;
+}
+// Sanitize a tab value for use in an element id — spaces/special chars would
+// break the aria-controls / aria-labelledby IDREF association.
+const idify = (v) => v.replace(/[^\w-]/g, "_");
+/**
+ * Self-contained tabs. Controlled/uncontrolled active value; the list provides
+ * roving arrow-key navigation with automatic activation (WAI-ARIA tabs pattern).
+ */
+function Tabs({ className, value, defaultValue, onValueChange, orientation = "horizontal", ...props }) {
+    const [active, setActive] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const idBase = React.useId();
+    return (_jsx(TabsContext.Provider, { value: { value: active, setValue: setActive, orientation, idBase }, children: _jsx("div", { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }) }));
+}
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+    variants: {
+        variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function TabsList({ className, variant = "default", onKeyDown, ...props }) {
+    const { orientation } = useTabs();
+    return (_jsx("div", { role: "tablist", "aria-orientation": orientation, "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            const tabs = Array.from(e.currentTarget.querySelectorAll('[role="tab"]:not([disabled]):not([data-disabled])'));
+            const current = tabs.indexOf(document.activeElement);
+            if (current < 0)
+                return;
+            const horizontal = orientation !== "vertical";
+            let next = -1;
+            if ((horizontal && e.key === "ArrowRight") || (!horizontal && e.key === "ArrowDown"))
+                next = (current + 1) % tabs.length;
+            else if ((horizontal && e.key === "ArrowLeft") || (!horizontal && e.key === "ArrowUp"))
+                next = (current - 1 + tabs.length) % tabs.length;
+            else if (e.key === "Home")
+                next = 0;
+            else if (e.key === "End")
+                next = tabs.length - 1;
+            if (next >= 0) {
+                e.preventDefault();
+                tabs[next].focus();
+                tabs[next].click();
+            }
+        }, ...props }));
+}
+function TabsTrigger({ className, value, onClick, ref, ...props }) {
+    const { value: active, setValue, idBase } = useTabs();
+    const selected = active === value;
+    const btnRef = React.useRef(null);
+    // Roving tab index: the selected tab is tabbable. When nothing is selected the
+    // first enabled tab must still be reachable so the tablist stays in Tab order
+    // (WAI-ARIA: a tablist always has exactly one tab stop).
+    const [isFirstEnabled, setIsFirstEnabled] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (active !== undefined)
+            return;
+        const el = btnRef.current;
+        const first = el?.parentElement?.querySelector('[role="tab"]:not([disabled]):not([data-disabled])');
+        setIsFirstEnabled(first === el);
+    });
+    const tabbable = selected || (active === undefined && isFirstEnabled);
+    return (_jsx("button", { ref: mergeRefs(btnRef, ref), type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: tabbable ? 0 : -1, "data-slot": "tabs-trigger", "data-active": selected ? "" : undefined, className: cn("cursor-pointer relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setValue(value);
+        }, ...props }));
+}
+function TabsContent({ className, value, ...props }) {
+    const { value: active, idBase } = useTabs();
+    const selected = active === value;
+    return (_jsx("div", { role: "tabpanel", id: `${idBase}-panel-${idify(value)}`, "aria-labelledby": `${idBase}-tab-${idify(value)}`, hidden: !selected, tabIndex: 0, "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/ui/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Textarea };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+import { toggleVariants } from "./toggle.js";
+export interface ToggleGroupProps extends Omit<React.ComponentProps<"div">, "onChange">, VariantProps<typeof toggleVariants> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Allow more than one item selected at once. */
+    toggleMultiple?: boolean;
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Self-contained toggle group: manages single- or multi-select state across its
+ * items via context. Keyboard: native button focus order + Space/Enter (roving
+ * arrow nav is intentionally omitted from this tier).
+ */
+declare function ToggleGroup({ className, variant, size, spacing, orientation, value, defaultValue, onValueChange, toggleMultiple, children, ...props }: ToggleGroupProps): React.JSX.Element;
+export interface ToggleGroupItemProps extends Omit<React.ComponentProps<"button">, "value">, VariantProps<typeof toggleVariants> {
+    value: string;
+}
+declare function ToggleGroupItem({ className, children, variant, size, value, onClick, ...props }: ToggleGroupItemProps): React.JSX.Element;
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle-group.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {} from "../shadcn/lib/cva.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { toggleVariants } from "./toggle.js";
+import { useControllableState } from "./use-controllable-state.js";
+const ToggleGroupContext = React.createContext({
+    size: "default",
+    variant: "default",
+    spacing: 2,
+    orientation: "horizontal",
+    value: [],
+    toggle: () => { },
+});
+/**
+ * Self-contained toggle group: manages single- or multi-select state across its
+ * items via context. Keyboard: native button focus order + Space/Enter (roving
+ * arrow nav is intentionally omitted from this tier).
+ */
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", value, defaultValue = [], onValueChange, toggleMultiple = false, children, ...props }) {
+    const [selected, setSelected] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const toggle = React.useCallback((item) => {
+        const has = selected.includes(item);
+        const next = toggleMultiple
+            ? has
+                ? selected.filter((v) => v !== item)
+                : [...selected, item]
+            : has
+                ? []
+                : [item];
+        setSelected(next);
+    }, [selected, toggleMultiple, setSelected]);
+    return (_jsx("div", { role: "group", "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation, value: selected, toggle }, children: children }) }));
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", value, onClick, ...props }) {
+    const context = React.useContext(ToggleGroupContext);
+    const pressed = context.value.includes(value);
+    return (_jsx("button", { type: "button", "data-slot": "toggle-group-item", "data-state": pressed ? "on" : "off", "aria-pressed": pressed, "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                context.toggle(value);
+        }, ...props, children: children }));
+}
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+declare const toggleVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}> | undefined) => string;
+export interface ToggleProps extends Omit<React.ComponentProps<"button">, "onChange">, VariantProps<typeof toggleVariants> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+/**
+ * Self-contained two-state toggle button. Controlled via `pressed`/
+ * `onPressedChange` or uncontrolled via `defaultPressed`. Emits `aria-pressed`
+ * and `data-state` so the shared toggle classes apply.
+ */
+declare function Toggle({ className, variant, size, pressed, defaultPressed, onPressedChange, onClick, ...props }: ToggleProps): React.JSX.Element;
+export { Toggle, toggleVariants };

package/dist/ui/toggle.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "../shadcn/lib/cva.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { useControllableState } from "./use-controllable-state.js";
+const toggleVariants = cva("cursor-pointer group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
+        },
+        size: {
+            default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+            lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+/**
+ * Self-contained two-state toggle button. Controlled via `pressed`/
+ * `onPressedChange` or uncontrolled via `defaultPressed`. Emits `aria-pressed`
+ * and `data-state` so the shared toggle classes apply.
+ */
+function Toggle({ className, variant = "default", size = "default", pressed, defaultPressed = false, onPressedChange, onClick, ...props }) {
+    const [on, setOn] = useControllableState({
+        value: pressed,
+        defaultValue: defaultPressed,
+        onChange: onPressedChange,
+    });
+    return (_jsx("button", { type: "button", "data-slot": "toggle", "data-state": on ? "on" : "off", "aria-pressed": on, className: cn(toggleVariants({ variant, size, className })), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOn(!on);
+        }, ...props }));
+}
+export { Toggle, toggleVariants };

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { type Side, type Align } from "./use-floating.js";
+declare function TooltipProvider({ delay, children, }: {
+    delay?: number;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export interface TooltipProps {
+    delay?: number;
+    defaultOpen?: boolean;
+    children?: React.ReactNode;
+}
+declare function Tooltip({ delay, defaultOpen, children }: TooltipProps): React.JSX.Element;
+declare function TooltipTrigger({ asChild, render, nativeButton: _nativeButton, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface TooltipContentProps extends React.ComponentProps<"div"> {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+declare function TooltipContent({ className, style, ref, side, sideOffset, align, alignOffset, children, ...props }: TooltipContentProps): React.JSX.Element | null;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/tooltip.js

@@ -0,0 +1,90 @@
+"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 { usePresence } from "./use-presence.js";
+const TooltipContext = React.createContext(null);
+function useTooltip() {
+    const ctx = React.useContext(TooltipContext);
+    if (!ctx)
+        throw new Error("Tooltip parts must be used within <Tooltip>");
+    return ctx;
+}
+const DelayContext = React.createContext(0);
+function TooltipProvider({ delay = 0, children, }) {
+    return _jsx(DelayContext.Provider, { value: delay, children: children });
+}
+function Tooltip({ delay, defaultOpen = false, children }) {
+    const providerDelay = React.useContext(DelayContext);
+    const openDelay = delay ?? providerDelay;
+    const [open, setOpen] = React.useState(defaultOpen);
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    const timer = React.useRef(undefined);
+    const show = React.useCallback(() => {
+        window.clearTimeout(timer.current);
+        if (openDelay > 0) {
+            timer.current = window.setTimeout(() => setOpen(true), openDelay);
+        }
+        else {
+            setOpen(true);
+        }
+    }, [openDelay]);
+    const hide = React.useCallback(() => {
+        window.clearTimeout(timer.current);
+        setOpen(false);
+    }, []);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                hide();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, hide]);
+    return (_jsx(TooltipContext.Provider, { value: { open, show, hide, triggerRef, contentId }, children: children }));
+}
+function TooltipTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }) {
+    const { open, show, hide, triggerRef, contentId } = useTooltip();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "tooltip-trigger", "aria-describedby": open ? contentId : undefined, "data-state": open ? "open" : "closed", onMouseEnter: (e) => {
+            onMouseEnter?.(e);
+            show();
+        }, onMouseLeave: (e) => {
+            onMouseLeave?.(e);
+            hide();
+        }, onFocus: (e) => {
+            onFocus?.(e);
+            show();
+        }, onBlur: (e) => {
+            onBlur?.(e);
+            hide();
+        }, ...props, children: slotChild }));
+}
+function TooltipContent({ className, style, ref, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+    const { open, contentId, triggerRef } = useTooltip();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    if (!mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, ref), id: contentId, role: "tooltip", "data-slot": "tooltip-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("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/use-controllable-state.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Controlled/uncontrolled state in one hook. If `value` is provided the state is
+ * controlled (the hook just forwards it and calls `onChange`); otherwise it owns
+ * the state internally, seeded by `defaultValue`. Self-contained, no deps.
+ */
+export declare function useControllableState<T>({ value, defaultValue, onChange, }: {
+    value?: T;
+    defaultValue: T;
+    onChange?: (value: T) => void;
+}): [T, (next: T) => void];

package/dist/ui/use-controllable-state.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+/**
+ * Controlled/uncontrolled state in one hook. If `value` is provided the state is
+ * controlled (the hook just forwards it and calls `onChange`); otherwise it owns
+ * the state internally, seeded by `defaultValue`. Self-contained, no deps.
+ */
+export function useControllableState({ value, defaultValue, onChange, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const state = isControlled ? value : uncontrolled;
+    const setState = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    return [state, setState];
+}

package/dist/ui/use-dismiss.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * Close an open layer on Escape or on a pointer press outside all of the given
+ * elements (e.g. the popup and its trigger). The listeners are only attached
+ * while `open`, and because the effect runs after the click that opened the
+ * layer, that same click never re-closes it. Escape is stacked: only the
+ * top layer closes, and the keydown is prevented/stopped so a native `<dialog>`
+ * ancestor's Escape-to-close doesn't also fire.
+ */
+export declare function useDismiss(open: boolean, onDismiss: () => void, refs: Array<React.RefObject<HTMLElement | null>>): void;

package/dist/ui/use-dismiss.js

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react";
+// Shared stack of open dismissable layers (most-recently-opened last). Escape
+// only closes the topmost layer, so a popover opened inside a dialog doesn't
+// close both at once.
+const escapeStack = [];
+/**
+ * Close an open layer on Escape or on a pointer press outside all of the given
+ * elements (e.g. the popup and its trigger). The listeners are only attached
+ * while `open`, and because the effect runs after the click that opened the
+ * layer, that same click never re-closes it. Escape is stacked: only the
+ * top layer closes, and the keydown is prevented/stopped so a native `<dialog>`
+ * ancestor's Escape-to-close doesn't also fire.
+ */
+export function useDismiss(open, onDismiss, refs) {
+    const onDismissRef = React.useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const token = () => onDismissRef.current();
+        escapeStack.push(token);
+        const onKeyDown = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (escapeStack[escapeStack.length - 1] !== token)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            onDismissRef.current();
+        };
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (refs.some((r) => r.current && r.current.contains(target)))
+                return;
+            onDismissRef.current();
+        };
+        document.addEventListener("keydown", onKeyDown, true);
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            const i = escapeStack.indexOf(token);
+            if (i !== -1)
+                escapeStack.splice(i, 1);
+            document.removeEventListener("keydown", onKeyDown, true);
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+}

package/dist/ui/use-floating.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export interface FloatingOptions {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+export interface FloatingResult {
+    x: number;
+    y: number;
+    side: Side;
+    align: Align;
+    transformOrigin: string;
+    /** Usable height (px) between the anchor and the viewport edge on the chosen
+     * side, less offsets/padding. Exposed as `--available-height` so scrollable
+     * popups (menus, selects) can clamp with `max-h-(--available-height)`. */
+    availableHeight: number;
+}
+/**
+ * Pure positioning math: place a floating box relative to an anchor on the given
+ * side/alignment, flipping to the opposite side when it would overflow and
+ * shifting along the cross axis to stay within the viewport. A focused subset of
+ * what a full floating-ui pipeline does — enough for popovers, menus, tooltips.
+ */
+export declare function computePosition(anchor: DOMRect, floating: {
+    width: number;
+    height: number;
+}, opts: Required<FloatingOptions>, viewport: {
+    width: number;
+    height: number;
+}): FloatingResult;
+/**
+ * Position a floating element against an anchor, recomputing on scroll, resize,
+ * and content resize while `open`. Attach `floatingRef` to the popup.
+ */
+export declare function useFloating(anchorRef: React.RefObject<HTMLElement | null>, open: boolean, options?: FloatingOptions): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
+    pos: FloatingResult | null;
+    update: () => void;
+};

package/dist/ui/use-floating.js

@@ -0,0 +1,136 @@
+"use client";
+import * as React from "react";
+const PAD = 8;
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+/**
+ * Pure positioning math: place a floating box relative to an anchor on the given
+ * side/alignment, flipping to the opposite side when it would overflow and
+ * shifting along the cross axis to stay within the viewport. A focused subset of
+ * what a full floating-ui pipeline does — enough for popovers, menus, tooltips.
+ */
+export function computePosition(anchor, floating, opts, viewport) {
+    let { side } = opts;
+    const { align, sideOffset, alignOffset } = opts;
+    const space = {
+        top: anchor.top,
+        bottom: viewport.height - anchor.bottom,
+        left: anchor.left,
+        right: viewport.width - anchor.right,
+    };
+    const isVertical = side === "top" || side === "bottom";
+    const need = (isVertical ? floating.height : floating.width) + sideOffset;
+    if (space[side] < need && space[OPPOSITE[side]] > space[side]) {
+        side = OPPOSITE[side];
+    }
+    const vertical = side === "top" || side === "bottom";
+    let x = 0;
+    let y = 0;
+    if (side === "bottom")
+        y = anchor.bottom + sideOffset;
+    else if (side === "top")
+        y = anchor.top - floating.height - sideOffset;
+    else if (side === "right")
+        x = anchor.right + sideOffset;
+    else
+        x = anchor.left - floating.width - sideOffset;
+    if (vertical) {
+        if (align === "start")
+            x = anchor.left + alignOffset;
+        else if (align === "end")
+            x = anchor.right - floating.width - alignOffset;
+        else
+            x = anchor.left + anchor.width / 2 - floating.width / 2 + alignOffset;
+    }
+    else {
+        if (align === "start")
+            y = anchor.top + alignOffset;
+        else if (align === "end")
+            y = anchor.bottom - floating.height - alignOffset;
+        else
+            y = anchor.top + anchor.height / 2 - floating.height / 2 + alignOffset;
+    }
+    x = Math.max(PAD, Math.min(x, viewport.width - floating.width - PAD));
+    y = Math.max(PAD, Math.min(y, viewport.height - floating.height - PAD));
+    const originX = vertical
+        ? align === "start"
+            ? "left"
+            : align === "end"
+                ? "right"
+                : "center"
+        : side === "right"
+            ? "left"
+            : "right";
+    const originY = vertical
+        ? side === "bottom"
+            ? "top"
+            : "bottom"
+        : align === "start"
+            ? "top"
+            : align === "end"
+                ? "bottom"
+                : "center";
+    // Space left for the popup on its final side, so it can clamp + scroll
+    // instead of overflowing the viewport. For left/right placements the popup
+    // spans the cross axis, so the usable height is the full viewport less padding.
+    const availableHeight = Math.max(0, (vertical ? space[side] - sideOffset : viewport.height) - PAD);
+    return { x, y, side, align, transformOrigin: `${originX} ${originY}`, availableHeight };
+}
+/**
+ * Position a floating element against an anchor, recomputing on scroll, resize,
+ * and content resize while `open`. Attach `floatingRef` to the popup.
+ */
+export function useFloating(anchorRef, open, options = {}) {
+    const floatingRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    const side = options.side ?? "bottom";
+    const align = options.align ?? "center";
+    const sideOffset = options.sideOffset ?? 0;
+    const alignOffset = options.alignOffset ?? 0;
+    const update = React.useCallback(() => {
+        const a = anchorRef.current;
+        const f = floatingRef.current;
+        if (!a || !f)
+            return;
+        setPos(computePosition(a.getBoundingClientRect(), { width: f.offsetWidth, height: f.offsetHeight }, { side, align, sideOffset, alignOffset }, { width: window.innerWidth, height: window.innerHeight }));
+    }, [anchorRef, side, align, sideOffset, alignOffset]);
+    React.useLayoutEffect(() => {
+        // Drop the last position on close so a reopen stays visibility:hidden until
+        // it is re-measured, rather than flashing one frame at stale coordinates.
+        if (!open) {
+            setPos(null);
+            return;
+        }
+        const ro = new ResizeObserver(update);
+        window.addEventListener("scroll", update, true);
+        window.addEventListener("resize", update);
+        // The floating node is portaled and may attach a frame late (the Portal
+        // defers rendering until its own effect runs). Retry each frame until the
+        // ref is set, then measure + observe — otherwise the first update() runs
+        // against a null ref, `pos` stays null, and the popup is stuck
+        // `visibility:hidden`.
+        let raf = 0;
+        const attach = () => {
+            if (!floatingRef.current) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            update();
+            ro.observe(floatingRef.current);
+            if (anchorRef.current)
+                ro.observe(anchorRef.current);
+        };
+        attach();
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("scroll", update, true);
+            window.removeEventListener("resize", update);
+            ro.disconnect();
+        };
+    }, [open, update, anchorRef]);
+    return { floatingRef, pos, update };
+}