@stevederico/skateboard-ui 3.11.0 → 4.0.0

package/dist/shadcn/ui/toggle-group.js

@@ -1,25 +1,3 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Toggle as TogglePrimitive } from "../lib/base-ui/toggle.js";
-import { ToggleGroup as ToggleGroupPrimitive } from "../lib/base-ui/toggle-group.js";
-import {} from "../lib/cva.js";
-import { cn } from "../lib/utils.js";
-import { toggleVariants } from "./toggle.js";
-const ToggleGroupContext = React.createContext({
-    size: "default",
-    variant: "default",
-    spacing: 2,
-    orientation: "horizontal",
-});
-function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive, { "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 }, children: children }) }));
-}
-function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
-    const context = React.useContext(ToggleGroupContext);
-    return (_jsx(TogglePrimitive, { "data-slot": "toggle-group-item", "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), ...props, children: children }));
-}
-export { ToggleGroup, ToggleGroupItem };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/toggle-group`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/toggle-group.js";

package/dist/shadcn/ui/toggle.d.ts

@@ -1,15 +1 @@
-import { Toggle as TogglePrimitive } from "../lib/base-ui/toggle.js";
-import { type VariantProps } from "../lib/cva.js";
-declare const toggleVariants: (props?: import("../lib/cva.js").CvaProps<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}> | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-export { Toggle, toggleVariants };
+export * from "../../ui/toggle.js";

package/dist/shadcn/ui/toggle.js

@@ -1,26 +1,3 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Toggle as TogglePrimitive } from "../lib/base-ui/toggle.js";
-import { cva } from "../lib/cva.js";
-import { cn } from "../lib/utils.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",
-    },
-});
-function Toggle({ className, variant = "default", size = "default", ...props }) {
-    return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
-}
-export { Toggle, toggleVariants };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/toggle`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/toggle.js";

package/dist/shadcn/ui/tooltip.d.ts

@@ -1,6 +1 @@
-import { Tooltip as TooltipPrimitive } from "../lib/base-ui/tooltip.js";
-declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
-declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
-declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export * from "../../ui/tooltip.js";

package/dist/shadcn/ui/tooltip.js

@@ -1,17 +1,3 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip as TooltipPrimitive } from "../lib/base-ui/tooltip.js";
-import { cn } from "../lib/utils.js";
-function TooltipProvider({ delay = 0, ...props }) {
-    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
-}
-function Tooltip({ ...props }) {
-    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({ ...props }) {
-    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", 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=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
-}
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/tooltip`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/tooltip.js";

package/dist/ui/accordion.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface AccordionProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Allow more than one item open at once (default true, like Base UI). */
+    openMultiple?: boolean;
+}
+/**
+ * Self-contained accordion. Open state is tracked as an array of item values;
+ * panels animate height with a pure-CSS grid-rows transition (no measured
+ * `--accordion-panel-height` var or keyframes).
+ */
+declare function Accordion({ className, value: controlled, defaultValue, onValueChange, openMultiple, ...props }: AccordionProps): React.JSX.Element;
+export interface AccordionItemProps extends React.ComponentProps<"div"> {
+    value: string;
+}
+declare function AccordionItem({ className, value, ...props }: AccordionItemProps): React.JSX.Element;
+declare function AccordionTrigger({ className, children, onClick, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/accordion.js

@@ -0,0 +1,67 @@
+"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 { ChevronDownIcon } from "../icons/index.js";
+const AccordionContext = React.createContext({
+    value: [],
+    toggle: () => { },
+});
+const ItemContext = React.createContext(null);
+function useItem() {
+    const ctx = React.useContext(ItemContext);
+    if (!ctx)
+        throw new Error("Accordion parts must be used within <AccordionItem>");
+    return ctx;
+}
+/**
+ * Self-contained accordion. Open state is tracked as an array of item values;
+ * panels animate height with a pure-CSS grid-rows transition (no measured
+ * `--accordion-panel-height` var or keyframes).
+ */
+function Accordion({ className, value: controlled, defaultValue = [], onValueChange, openMultiple = true, ...props }) {
+    const [value, setValue] = React.useState(defaultValue);
+    const isControlled = controlled !== undefined;
+    const open = isControlled ? controlled : value;
+    const commit = (next) => {
+        if (!isControlled)
+            setValue(next);
+        onValueChange?.(next);
+    };
+    const toggle = (item) => {
+        const has = open.includes(item);
+        const next = has
+            ? open.filter((v) => v !== item)
+            : openMultiple
+                ? [...open, item]
+                : [item];
+        commit(next);
+    };
+    return (_jsx(AccordionContext.Provider, { value: { value: open, toggle }, children: _jsx("div", { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }) }));
+}
+function AccordionItem({ className, value, ...props }) {
+    const { value: openValues } = React.useContext(AccordionContext);
+    const open = openValues.includes(value);
+    const reactId = React.useId();
+    const ctx = {
+        value,
+        open,
+        triggerId: `${reactId}-trigger`,
+        panelId: `${reactId}-panel`,
+    };
+    return (_jsx(ItemContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "accordion-item", "data-state": open ? "open" : "closed", className: cn("not-last:border-b", className), ...props }) }));
+}
+function AccordionTrigger({ className, children, onClick, ...props }) {
+    const { value, open, triggerId, panelId } = useItem();
+    const { toggle } = React.useContext(AccordionContext);
+    return (_jsx("h3", { className: "flex", children: _jsxs("button", { type: "button", id: triggerId, "aria-expanded": open, "aria-controls": panelId, "data-slot": "accordion-trigger", "data-state": open ? "open" : "closed", className: cn("cursor-pointer group/accordion-trigger relative flex flex-1 items-start justify-between gap-4 rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50", className), onClick: (e) => {
+                onClick?.(e);
+                if (!e.defaultPrevented)
+                    toggle(value);
+            }, ...props, children: [children, _jsx(ChevronDownIcon, { "aria-hidden": true, className: "pointer-events-none mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    const { open, triggerId, panelId } = useItem();
+    return (_jsx("div", { role: "region", id: panelId, "aria-labelledby": triggerId, inert: !open, "data-slot": "accordion-content", "data-state": open ? "open" : "closed", className: cn("grid text-sm transition-[grid-template-rows] duration-200 ease-out", open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), ...props, children: _jsx("div", { className: "overflow-hidden", children: _jsx("div", { className: cn("pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Button } from "./button.js";
+export interface AlertDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+/** Self-contained alert dialog on native `<dialog>`: Escape closes, but (unlike
+ * Dialog) clicking the backdrop does not — a decision must be made. */
+declare function AlertDialog({ open, defaultOpen, onOpenChange, children, }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialogTrigger({ className, asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function AlertDialogPortal({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function AlertDialogOverlay(): null;
+export interface AlertDialogContentProps extends React.ComponentProps<"div"> {
+    size?: "default" | "sm";
+}
+declare function AlertDialogContent({ className, size, children, ...props }: AlertDialogContentProps): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function AlertDialogAction({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/ui/alert-dialog.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { Button } from "./button.js";
+import { Slot, resolveRender } from "./slot.js";
+import { useControllableState } from "./use-controllable-state.js";
+const AlertDialogContext = React.createContext(null);
+function useAlertDialog() {
+    const ctx = React.useContext(AlertDialogContext);
+    if (!ctx)
+        throw new Error("AlertDialog parts must be used within <AlertDialog>");
+    return ctx;
+}
+/** Self-contained alert dialog on native `<dialog>`: Escape closes, but (unlike
+ * Dialog) clicking the backdrop does not — a decision must be made. */
+function AlertDialog({ open, defaultOpen = false, onOpenChange, children, }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    return (_jsx(AlertDialogContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+}
+function AlertDialogTrigger({ className, asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { open, setOpen } = useAlertDialog();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "alert-dialog-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", className: cn("cursor-pointer", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(true);
+        }, ...props, children: slotChild }));
+}
+function AlertDialogPortal({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function AlertDialogOverlay() {
+    return null;
+}
+function AlertDialogContent({ className, size = "default", children, ...props }) {
+    const { open, setOpen, titleId, descriptionId } = useAlertDialog();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (open && !node.open)
+            node.showModal();
+        else if (!open && node.open)
+            node.close();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, role: "alertdialog", "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "alert-dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+            e.preventDefault();
+            setOpen(false);
+        }, onClose: () => setOpen(false), className: "m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsx("div", { "data-slot": "alert-dialog-content", "data-size": size, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("group/alert-dialog-content relative grid w-full gap-6 rounded-xl bg-background p-6 text-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: children })) : null }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function AlertDialogMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    const { titleId } = useAlertDialog();
+    return (_jsx("h2", { id: titleId, "data-slot": "alert-dialog-title", className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    const { descriptionId } = useAlertDialog();
+    return (_jsx("p", { id: descriptionId, "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+function AlertDialogAction({ className, onClick, ...props }) {
+    const { setOpen } = useAlertDialog();
+    return (_jsx(Button, { "data-slot": "alert-dialog-action", className: cn(className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(false);
+        }, ...props }));
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", onClick, ...props }) {
+    const { setOpen } = useAlertDialog();
+    return (_jsx(Button, { "data-slot": "alert-dialog-cancel", variant: variant, size: size, className: cn(className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(false);
+        }, ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/ui/alert.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+declare const alertVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}> | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/ui/alert.js

@@ -0,0 +1,28 @@
+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";
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), ...props }));
+}
+function AlertAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-action", className: cn("absolute top-2.5 right-3", className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/ui/aspect-ratio.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+    ratio: number;
+}): React.JSX.Element;
+export { AspectRatio };

package/dist/ui/aspect-ratio.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+function AspectRatio({ ratio, className, ...props }) {
+    return (_jsx("div", { "data-slot": "aspect-ratio", style: {
+            "--ratio": ratio,
+        }, className: cn("relative aspect-(--ratio)", className), ...props }));
+}
+export { AspectRatio };

package/dist/ui/avatar.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/**
+ * Self-contained avatar: the image reports its load status up through context;
+ * the fallback renders until the image successfully loads (or if it errors).
+ */
+declare function Avatar({ className, size, ...props }: React.ComponentProps<"span"> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, onLoad, onError, src, ...props }: React.ComponentProps<"img">): React.JSX.Element | null;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element | null;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/ui/avatar.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+const AvatarContext = React.createContext({ status: "idle", setStatus: () => { } });
+/**
+ * Self-contained avatar: the image reports its load status up through context;
+ * the fallback renders until the image successfully loads (or if it errors).
+ */
+function Avatar({ className, size = "default", ...props }) {
+    const [status, setStatus] = React.useState("idle");
+    return (_jsx(AvatarContext.Provider, { value: { status, setStatus }, children: _jsx("span", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }) }));
+}
+function AvatarImage({ className, onLoad, onError, src, ...props }) {
+    const { status, setStatus } = React.useContext(AvatarContext);
+    // A missing/empty src never fires load or error, so mark it errored up front;
+    // otherwise the fallback would sit next to a blank img, each squeezed to half.
+    React.useEffect(() => {
+        if (!src)
+            setStatus("error");
+    }, [src, setStatus]);
+    // Render nothing until the image has actually loaded — the fallback owns the
+    // box until then (matches Base UI, avoids the blank-img squeeze on slow loads).
+    if (!src || status === "error")
+        return null;
+    return (_jsx("img", { src: src, "data-slot": "avatar-image", className: cn("absolute inset-0 aspect-square size-full rounded-full object-cover", status === "loaded" ? undefined : "opacity-0", className), onLoad: (e) => {
+            setStatus("loaded");
+            onLoad?.(e);
+        }, onError: (e) => {
+            setStatus("error");
+            onError?.(e);
+        }, ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    const { status } = React.useContext(AvatarContext);
+    if (status === "loaded")
+        return null;
+    return (_jsx("span", { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/ui/badge.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+declare const badgeVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}> | undefined) => string;
+export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+    /** Render the single child element styled as a badge (e.g. an `<a>`). */
+    asChild?: boolean;
+    /** Base UI compat: a React element rendered in place of the badge. */
+    render?: React.ReactElement;
+    /** Base UI compat: ignored (the element is inferred from `render`/`asChild`). */
+    nativeButton?: boolean;
+}
+declare function Badge({ className, variant, asChild, render, nativeButton: _nativeButton, children, ...props }: BadgeProps): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/ui/badge.js

@@ -0,0 +1,26 @@
+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 { Slot, resolveRender } from "./slot.js";
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", asChild = false, render, nativeButton: _nativeButton, children, ...props }) {
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "span";
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props, children: slotChild }));
+}
+export { Badge, badgeVariants };

package/dist/ui/breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ className, asChild, render, nativeButton: _nativeButton, children, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/ui/breadcrumb.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { Slot, resolveRender } from "./slot.js";
+import { ChevronRightIcon, MoreHorizontalIcon } from "../icons/index.js";
+function Breadcrumb({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props }));
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
+}
+function BreadcrumbLink({ className, asChild = false, render, nativeButton: _nativeButton, children, ...props }) {
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "a";
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("cursor-pointer transition-colors hover:text-foreground", className), ...props, children: slotChild }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+import { Separator } from "./separator.js";
+declare const buttonGroupVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}> | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React.JSX.Element;
+export interface ButtonGroupTextProps extends React.ComponentProps<"div"> {
+    /** Render the single child element styled as button-group text. */
+    asChild?: boolean;
+    /** Base UI compat: a React element rendered in place of the text. */
+    render?: React.ReactElement;
+    /** Base UI compat: ignored (the element is inferred from `render`/`asChild`). */
+    nativeButton?: boolean;
+}
+declare function ButtonGroupText({ className, asChild, render, nativeButton: _nativeButton, children, ...props }: ButtonGroupTextProps): React.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/ui/button-group.js

@@ -0,0 +1,29 @@
+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 { Slot, resolveRender } from "./slot.js";
+import { Separator } from "./separator.js";
+const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, asChild = false, render, nativeButton: _nativeButton, children, ...props }) {
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "div";
+    return (_jsx(Comp, { "data-slot": "button-group-text", className: cn("flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props, children: slotChild }));
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };