@stevederico/skateboard-ui 3.11.0 → 4.0.0

package/dist/ui/slot.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+/**
+ * Minimal `asChild` Slot — self-contained replacement for Radix Slot / Base UI's
+ * `render` prop. Merges this slot's props onto its single child element:
+ * `className` is class-merged, refs are composed, and the child's own props win
+ * on any other collision (the child is the concrete element).
+ *
+ * This is the only behavioral helper the self-contained `ui/` tier depends on;
+ * it carries no primitive framework. React 19 ref-as-prop, no forwardRef.
+ */
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
+function Slot({ children, className, style, ref, ...props }) {
+    const child = React.Children.only(children);
+    const childProps = child.props;
+    // Child props win on plain values, but event handlers (on*) are COMPOSED so
+    // the slot-injected behavior (open/close/etc.) runs alongside the child's own
+    // handler — matching Radix Slot / Base UI mergeProps instead of clobbering it.
+    const merged = { ...props, ...childProps };
+    for (const key of Object.keys(props)) {
+        const slotHandler = props[key];
+        const childHandler = childProps[key];
+        if (key.startsWith("on") &&
+            typeof slotHandler === "function" &&
+            typeof childHandler === "function") {
+            merged[key] = (...args) => {
+                ;
+                slotHandler(...args);
+                const event = args[0];
+                if (!event?.defaultPrevented) {
+                    ;
+                    childHandler(...args);
+                }
+            };
+        }
+    }
+    merged.className = cn(className, childProps.className);
+    merged.style = { ...style, ...childProps.style };
+    merged.ref = mergeRefs(childProps.ref, ref);
+    return React.cloneElement(child, merged);
+}
+/**
+ * Base UI `render={<El/>}` compatibility. The old shadcn tier passed a React
+ * element to `render` to control the rendered element; here that maps onto the
+ * `asChild` + Slot mechanism. Returns whether to use the Slot and what child to
+ * render through it, so `render={<Button/>}` keeps working on the new components.
+ */
+function resolveRender(asChild, render, children) {
+    if (React.isValidElement(render))
+        return { useSlot: true, slotChild: render };
+    return { useSlot: !!asChild, slotChild: children };
+}
+export { Slot, mergeRefs, resolveRender };

package/dist/ui/spinner.d.ts

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

package/dist/ui/spinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { Loader2Icon } from "../icons/index.js";
+function Spinner({ className, ...props }) {
+    return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
+}
+export { Spinner };

package/dist/ui/switch.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface SwitchProps extends Omit<React.ComponentProps<"button">, "onChange" | "value"> {
+    size?: "sm" | "default";
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** When set, a hidden checkbox of this name mirrors the state for form posts. */
+    name?: string;
+    value?: string;
+}
+/**
+ * Self-contained switch: a `role="switch"` button with controlled/uncontrolled
+ * checked state. Emits `data-checked`/`data-unchecked`/`data-disabled` so the
+ * shared classes apply. Pass `name` to include a hidden checkbox for forms.
+ */
+declare function Switch({ className, size, checked, defaultChecked, onCheckedChange, disabled, name, value, onClick, ...props }: SwitchProps): React.JSX.Element;
+export { Switch };

package/dist/ui/switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { useControllableState } from "./use-controllable-state.js";
+/**
+ * Self-contained switch: a `role="switch"` button with controlled/uncontrolled
+ * checked state. Emits `data-checked`/`data-unchecked`/`data-disabled` so the
+ * shared classes apply. Pass `name` to include a hidden checkbox for forms.
+ */
+function Switch({ className, size = "default", checked, defaultChecked = false, onCheckedChange, disabled, name, value = "on", onClick, ...props }) {
+    const [on, setOn] = useControllableState({
+        value: checked,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-slot": "switch", "data-size": size, "data-state": on ? "checked" : "unchecked", "data-checked": on ? "" : undefined, "data-unchecked": on ? undefined : "", "data-disabled": disabled ? "" : undefined, className: cn("cursor-pointer peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all 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 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), onClick: (e) => {
+                    onClick?.(e);
+                    if (!e.defaultPrevented)
+                        setOn(!on);
+                }, ...props, children: _jsx("span", { "data-slot": "switch-thumb", "data-checked": on ? "" : undefined, "data-unchecked": on ? undefined : "", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }), name ? (_jsx("input", { type: "checkbox", "aria-hidden": true, tabIndex: -1, name: name, value: value, checked: on, disabled: disabled, readOnly: true, className: "sr-only" })) : null] }));
+}
+export { Switch };

package/dist/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/ui/table.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/ui/tabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+export interface TabsProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Self-contained tabs. Controlled/uncontrolled active value; the list provides
+ * roving arrow-key navigation with automatic activation (WAI-ARIA tabs pattern).
+ */
+declare function Tabs({ className, value, defaultValue, onValueChange, orientation, ...props }: TabsProps): React.JSX.Element;
+declare const tabsListVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        line: string;
+    };
+}> | undefined) => string;
+declare function TabsList({ className, variant, onKeyDown, ...props }: React.ComponentProps<"div"> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+export interface TabsTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
+    value: string;
+}
+declare function TabsTrigger({ className, value, onClick, ...props }: TabsTriggerProps): React.JSX.Element;
+export interface TabsContentProps extends Omit<React.ComponentProps<"div">, "value"> {
+    value: string;
+}
+declare function TabsContent({ className, value, ...props }: TabsContentProps): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/ui/tabs.js

@@ -0,0 +1,82 @@
+"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 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, ...props }) {
+    const { value: active, setValue, idBase } = useTabs();
+    const selected = active === value;
+    return (_jsx("button", { type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: selected ? 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;