@cronus-ui/ui 0.6.0

package/dist/components/command.d.ts

@@ -0,0 +1,87 @@
+import { type ComponentProps } from "react";
+import { Dialog } from "./dialog.js";
+export declare const Command: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CommandDialogProps extends ComponentProps<typeof Dialog> {
+    title?: string;
+    description?: string;
+}
+export declare const CommandDialog: {
+    ({ title, description, children, ...props }: CommandDialogProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CommandInput: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const CommandList: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandEmpty: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandGroup: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandShortcut: {
+    ({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CommandSeparator: import("react").ForwardRefExoticComponent<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
+export const Command = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive, { ref: ref, "data-slot": "command", className: cn("flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-floating text-fg", className), ...props }));
+});
+Command.displayName = "Command";
+export const CommandDialog = ({ title = "Command Menu", description = "Search for a command to run...", children, ...props }) => {
+    return (_jsx(Dialog, { ...props, children: _jsxs(DialogContent, { className: "gap-0 overflow-hidden rounded-2xl border-border-soft bg-surface-floating/65 p-0 shadow-[0_28px_90px_-12px_rgba(0,0,0,0.6)] backdrop-blur-2xl backdrop-saturate-150 before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-px before:bg-gradient-to-r before:from-transparent before:via-fg/20 before:to-transparent", children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(Command, { className: "bg-transparent [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-fg-tertiary [&_[cmdk-input-wrapper]]:border-border/60 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:rounded-lg [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2.5 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-item][data-selected=true]]:bg-fg/10", children: children })] }) }));
+};
+CommandDialog.displayName = "CommandDialog";
+export const CommandInput = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex items-center gap-2 border-b border-border px-3", "cmdk-input-wrapper": "", children: [_jsx(Search, { className: "size-4 shrink-0 text-fg-tertiary" }), _jsx(CommandPrimitive.Input, { ref: ref, "data-slot": "command-input", className: cn("flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-fg-tertiary disabled:opacity-50", className), ...props })] }));
+});
+CommandInput.displayName = "CommandInput";
+export const CommandList = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive.List, { ref: ref, "data-slot": "command-list", className: cn("max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden p-1", className), ...props }));
+});
+CommandList.displayName = "CommandList";
+export const CommandEmpty = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive.Empty, { ref: ref, "data-slot": "command-empty", className: cn("py-6 text-center text-sm text-fg-secondary", className), ...props }));
+});
+CommandEmpty.displayName = "CommandEmpty";
+export const CommandGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive.Group, { ref: ref, "data-slot": "command-group", className: cn("overflow-hidden p-1 text-fg [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-fg-tertiary", className), ...props }));
+});
+CommandGroup.displayName = "CommandGroup";
+export const CommandItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive.Item, { ref: ref, "data-slot": "command-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-surface-overlay data-[selected=true]:text-fg data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none [&_svg]:size-4", className), ...props }));
+});
+CommandItem.displayName = "CommandItem";
+export const CommandShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-fg-tertiary", className), ...props }));
+};
+CommandShortcut.displayName = "CommandShortcut";
+export const CommandSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CommandPrimitive.Separator, { ref: ref, "data-slot": "command-separator", className: cn("-mx-1 h-px bg-border", className), ...props }));
+});
+CommandSeparator.displayName = "CommandSeparator";
+//# sourceMappingURL=command.js.map

package/dist/components/comparison-slider.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ComparisonSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Content shown on the left, revealed by the clip (typically the "before" image). */
+    before: ReactNode;
+    /** Content shown as the full base layer (typically the "after" image). */
+    after: ReactNode;
+    /** Initial divider position as a percentage (0–100). Uncontrolled. */
+    defaultPosition?: number;
+    /** Controlled divider position as a percentage (0–100). */
+    position?: number;
+    /** Called with the next position when the divider moves. */
+    onPositionChange?: (position: number) => void;
+    /** Accessible name for the divider handle. */
+    "aria-label"?: string;
+}
+export declare const ComparisonSlider: import("react").ForwardRefExoticComponent<ComparisonSliderProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=comparison-slider.d.ts.map

package/dist/components/comparison-slider.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsLeftRight } from "lucide-react";
+import { forwardRef, useCallback, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+function clamp(value) {
+    return Math.min(100, Math.max(0, value));
+}
+export const ComparisonSlider = forwardRef(({ before, after, defaultPosition = 50, position: controlledPosition, onPositionChange, className, "aria-label": ariaLabel = "Comparison", ...props }, ref) => {
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const [internalPosition, setInternalPosition] = useState(() => clamp(defaultPosition));
+    const isControlled = controlledPosition != null;
+    const pos = clamp(isControlled ? controlledPosition : internalPosition);
+    const setPosition = useCallback((next) => {
+        const clamped = clamp(next);
+        if (!isControlled) {
+            setInternalPosition(clamped);
+        }
+        onPositionChange?.(clamped);
+    }, [isControlled, onPositionChange]);
+    const updateFromClientX = useCallback((clientX) => {
+        const node = containerRef.current;
+        if (!node)
+            return;
+        const rect = node.getBoundingClientRect();
+        if (rect.width === 0)
+            return;
+        setPosition(((clientX - rect.left) / rect.width) * 100);
+    }, [setPosition]);
+    const handlePointerDown = (event) => {
+        draggingRef.current = true;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        updateFromClientX(event.clientX);
+    };
+    const handlePointerMove = (event) => {
+        if (!draggingRef.current)
+            return;
+        updateFromClientX(event.clientX);
+    };
+    const handlePointerUp = (event) => {
+        draggingRef.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+    };
+    const handleKeyDown = (event) => {
+        const step = event.shiftKey ? 10 : 1;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                event.preventDefault();
+                setPosition(pos - step);
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                event.preventDefault();
+                setPosition(pos + step);
+                break;
+            case "Home":
+                event.preventDefault();
+                setPosition(0);
+                break;
+            case "End":
+                event.preventDefault();
+                setPosition(100);
+                break;
+            default:
+                break;
+        }
+    };
+    return (_jsxs("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, "data-slot": "comparison-slider", className: cn("relative aspect-video w-full touch-none select-none overflow-hidden rounded-xl border border-border bg-surface-inset", className), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, ...props, children: [_jsx("div", { "data-slot": "comparison-after", className: "absolute inset-0 size-full [&_img]:pointer-events-none [&_img]:select-none", children: after }), _jsx("div", { "data-slot": "comparison-before", className: "absolute inset-0 size-full [&_img]:pointer-events-none [&_img]:select-none", style: { clipPath: `inset(0 ${100 - pos}% 0 0)` }, children: before }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-surface-base/90 shadow-sm", style: { left: `${pos}%` } }), _jsx("div", { role: "slider", tabIndex: 0, "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(pos), "aria-orientation": "horizontal", onKeyDown: handleKeyDown, className: "absolute top-1/2 z-20 flex size-9 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize items-center justify-center rounded-full border border-border bg-surface-raised text-fg shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", style: { left: `${pos}%` }, children: _jsx(ChevronsLeftRight, { "aria-hidden": true, className: "size-4 text-fg-secondary" }) })] }));
+});
+ComparisonSlider.displayName = "ComparisonSlider";
+//# sourceMappingURL=comparison-slider.js.map

package/dist/components/composed-chart.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface ComposedChartSeries extends ChartSeries {
+    type: "area" | "bar" | "line";
+}
+export interface ComposedChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: Record<string, unknown>[];
+    xKey?: string;
+    series: ComposedChartSeries[];
+    formatValue?: (value: number, name: string) => string;
+}
+export declare function ComposedChart({ data, xKey, series, formatValue, className, ...props }: ComposedChartProps): import("react").JSX.Element;
+//# sourceMappingURL=composed-chart.d.ts.map

package/dist/components/composed-chart.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Area, Bar, CartesianGrid, Line, ComposedChart as RechartsComposedChart, XAxis, } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function ComposedChart({ data, xKey = "date", series, formatValue, className, ...props }) {
+    const uid = useId().replace(/:/g, "");
+    const config = chartSeriesConfig(series);
+    return (_jsx("div", { "data-slot": "composed-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsComposedChart, { accessibilityLayer: true, data: data, margin: { left: 8, right: 8, top: 8 }, children: [_jsx("defs", { children: series
+                            .filter((item) => item.type === "area")
+                            .map((item) => (_jsxs("linearGradient", { id: `${uid}-${item.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: `var(--color-${item.key})`, stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: `var(--color-${item.key})`, stopOpacity: 0 })] }, item.key))) }), _jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 12, minTickGap: 24 }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: xKey }), content: _jsx(ChartTooltipContent, { formatValue: formatValue }) }), series.map((item) => {
+                        if (item.type === "bar") {
+                            return (_jsx(Bar, { dataKey: item.key, fill: `var(--color-${item.key})`, radius: 4 }, item.key));
+                        }
+                        if (item.type === "area") {
+                            return (_jsx(Area, { type: "monotone", dataKey: item.key, stroke: `var(--color-${item.key})`, fill: `url(#${uid}-${item.key})`, strokeWidth: 2, dot: false }, item.key));
+                        }
+                        return (_jsx(Line, { type: "monotone", dataKey: item.key, stroke: `var(--color-${item.key})`, strokeWidth: 2, dot: false }, item.key));
+                    })] }) }) }));
+}
+//# sourceMappingURL=composed-chart.js.map

package/dist/components/confetti.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface ConfettiProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Pieces spawned per burst.
+     * @default 48
+     */
+    count?: number;
+    /** Fire a burst on mount. @default false */
+    fireOnMount?: boolean;
+}
+/**
+ * Canvas confetti that bursts from the pointer (or the centre, on mount).
+ * Decorative (`aria-hidden` canvas) and a no-op under reduced motion.
+ * Click anywhere on the wrapper to fire another burst.
+ */
+export declare function Confetti({ ref, className, children, count, fireOnMount, onPointerDown, ...props }: ConfettiProps): import("react").JSX.Element;
+export declare namespace Confetti {
+    var displayName: string;
+}
+//# sourceMappingURL=confetti.d.ts.map

package/dist/components/confetti.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, } from "react";
+import { cn } from "../lib/cn.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function prefersReducedMotion() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+/**
+ * Canvas confetti that bursts from the pointer (or the centre, on mount).
+ * Decorative (`aria-hidden` canvas) and a no-op under reduced motion.
+ * Click anywhere on the wrapper to fire another burst.
+ */
+export function Confetti({ ref, className, children, count = 48, fireOnMount = false, onPointerDown, ...props }) {
+    const canvasRef = useRef(null);
+    const particles = useRef([]);
+    const frame = useRef(null);
+    const pieceCount = Math.min(160, Math.max(8, Math.round(finiteOr(count, 48))));
+    const burst = useCallback((originX, originY) => {
+        if (prefersReducedMotion())
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        for (let index = 0; index < pieceCount; index += 1) {
+            const angle = Math.random() * Math.PI * 2;
+            const speed = 3 + Math.random() * 5;
+            particles.current.push({
+                x: originX,
+                y: originY,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed - 2,
+                life: 1,
+                hue: (index * 29) % 360,
+                size: 2 + Math.random() * 3,
+            });
+        }
+    }, [pieceCount]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        let context = null;
+        try {
+            context = canvas.getContext("2d");
+        }
+        catch {
+            return;
+        }
+        if (!context)
+            return;
+        const resize = () => {
+            const parent = canvas.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            const ratio = window.devicePixelRatio || 1;
+            canvas.width = Math.max(1, Math.floor(rect.width * ratio));
+            canvas.height = Math.max(1, Math.floor(rect.height * ratio));
+            canvas.style.width = `${rect.width}px`;
+            canvas.style.height = `${rect.height}px`;
+            context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        };
+        resize();
+        window.addEventListener("resize", resize);
+        const tick = () => {
+            const parent = canvas.parentElement;
+            if (!parent)
+                return;
+            const { width, height } = parent.getBoundingClientRect();
+            context.clearRect(0, 0, width, height);
+            particles.current = particles.current.filter((particle) => particle.life > 0);
+            for (const particle of particles.current) {
+                particle.x += particle.vx;
+                particle.y += particle.vy;
+                particle.vy += 0.12;
+                particle.life -= 0.016;
+                context.globalAlpha = Math.max(0, particle.life);
+                context.fillStyle = `oklch(0.75 0.18 ${particle.hue})`;
+                context.fillRect(particle.x, particle.y, particle.size, particle.size * 0.6);
+            }
+            context.globalAlpha = 1;
+            frame.current = requestAnimationFrame(tick);
+        };
+        frame.current = requestAnimationFrame(tick);
+        if (fireOnMount) {
+            const parent = canvas.parentElement;
+            if (parent) {
+                const rect = parent.getBoundingClientRect();
+                burst(rect.width / 2, rect.height / 2);
+            }
+        }
+        return () => {
+            window.removeEventListener("resize", resize);
+            if (frame.current !== null)
+                cancelAnimationFrame(frame.current);
+        };
+    }, [burst, fireOnMount]);
+    const handlePointerDown = useCallback((event) => {
+        onPointerDown?.(event);
+        const rect = event.currentTarget.getBoundingClientRect();
+        burst(event.clientX - rect.left, event.clientY - rect.top);
+    }, [burst, onPointerDown]);
+    return (_jsxs("div", { ref: ref, "data-slot": "confetti", className: cn("relative", className), onPointerDown: handlePointerDown, ...props, children: [_jsx("canvas", { ref: canvasRef, tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute inset-0 motion-reduce:hidden" }), _jsx("div", { className: "relative", children: children })] }));
+}
+Confetti.displayName = "Confetti";
+//# sourceMappingURL=confetti.js.map

package/dist/components/confirmation-dialog.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { AlertDialogContent } from "./alert-dialog.js";
+export interface ConfirmationDialogProps extends Omit<ComponentPropsWithoutRef<typeof AlertDialogContent>, "title" | "children"> {
+    /** Element that opens the dialog. Rendered inside an `AlertDialogTrigger asChild`, so a single focusable child (e.g. a `Button`) is expected. Omit when driving the dialog purely via `open`. */
+    trigger?: ReactNode;
+    /** Dialog heading — labels the dialog for assistive tech (rendered as `AlertDialogTitle`). */
+    title: ReactNode;
+    /** Supporting copy describing the consequence of the action (rendered as `AlertDialogDescription`). */
+    description?: ReactNode;
+    /** Text for the confirm button. @default "Confirm" */
+    confirmLabel?: ReactNode;
+    /** Text for the cancel button. @default "Cancel" */
+    cancelLabel?: ReactNode;
+    /** Style the confirm button as a destructive (red) action and default the header icon to a warning triangle. @default false */
+    destructive?: boolean;
+    /** Icon shown in the header badge. Defaults to a warning triangle when `destructive`, otherwise none. Pass `null` to force it off. */
+    icon?: ReactNode;
+    /** Invoked when the user confirms. If it returns a promise, the confirm button shows a spinner and is disabled until it settles; on resolve the dialog closes, on reject it stays open and surfaces the error message. */
+    onConfirm?: () => void | Promise<void>;
+    /** Controlled open state. Provide alongside `onOpenChange` to control the dialog externally. */
+    open?: boolean;
+    /** Uncontrolled initial open state. @default false */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes (opening, cancelling, or confirming). Dismissal is suppressed while a confirm promise is pending. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * An ergonomic confirmation dialog for destructive or irreversible actions,
+ * composed on top of the accessible `AlertDialog` primitive (which supplies the
+ * `alertdialog` role, focus trap, and Escape handling).
+ *
+ * Behavior: `onConfirm` may be async — while its promise is pending the confirm
+ * button shows a `Spinner`, both actions are disabled, and the dialog cannot be
+ * dismissed (Escape/Cancel are ignored) so the operation can't be interrupted
+ * mid-flight. On resolve the dialog closes; on reject it stays open and renders
+ * the error in a `role="alert"` region. Works controlled (`open`/`onOpenChange`)
+ * or uncontrolled (`defaultOpen`).
+ *
+ * Performance/a11y: no timers or animation loops of its own; late promise
+ * settlements are ignored after unmount via a mounted ref. The spinner is
+ * decorative (`aria-hidden`) with loading state conveyed through `aria-busy`,
+ * keeping the button's accessible name stable. All entrance/exit motion is owned
+ * by the underlying primitive and degrades under `prefers-reduced-motion`.
+ */
+export declare const ConfirmationDialog: import("react").ForwardRefExoticComponent<ConfirmationDialogProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=confirmation-dialog.d.ts.map

package/dist/components/confirmation-dialog.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, TriangleAlert } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./alert-dialog.js";
+import { buttonVariants } from "./button.js";
+import { Spinner } from "./spinner.js";
+function resolveErrorMessage(error) {
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === "string" && error) {
+        return error;
+    }
+    return "Something went wrong. Please try again.";
+}
+/**
+ * An ergonomic confirmation dialog for destructive or irreversible actions,
+ * composed on top of the accessible `AlertDialog` primitive (which supplies the
+ * `alertdialog` role, focus trap, and Escape handling).
+ *
+ * Behavior: `onConfirm` may be async — while its promise is pending the confirm
+ * button shows a `Spinner`, both actions are disabled, and the dialog cannot be
+ * dismissed (Escape/Cancel are ignored) so the operation can't be interrupted
+ * mid-flight. On resolve the dialog closes; on reject it stays open and renders
+ * the error in a `role="alert"` region. Works controlled (`open`/`onOpenChange`)
+ * or uncontrolled (`defaultOpen`).
+ *
+ * Performance/a11y: no timers or animation loops of its own; late promise
+ * settlements are ignored after unmount via a mounted ref. The spinner is
+ * decorative (`aria-hidden`) with loading state conveyed through `aria-busy`,
+ * keeping the button's accessible name stable. All entrance/exit motion is owned
+ * by the underlying primitive and degrades under `prefers-reduced-motion`.
+ */
+export const ConfirmationDialog = forwardRef(({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false, icon, onConfirm, open, defaultOpen, onOpenChange, className, ...contentProps }, ref) => {
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const loadingRef = useRef(false);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const handleOpenChange = useCallback((next) => {
+        // Never let the dialog be dismissed while a confirm promise is pending.
+        if (loadingRef.current && !next) {
+            return;
+        }
+        if (next) {
+            setError(null);
+        }
+        setOpen(next);
+    }, [setOpen]);
+    const beginLoading = useCallback((value) => {
+        loadingRef.current = value;
+        setLoading(value);
+    }, []);
+    const handleConfirm = useCallback(async () => {
+        setError(null);
+        if (!onConfirm) {
+            setOpen(false);
+            return;
+        }
+        const result = onConfirm();
+        if (!(result instanceof Promise)) {
+            setOpen(false);
+            return;
+        }
+        beginLoading(true);
+        try {
+            await result;
+            if (!mountedRef.current) {
+                return;
+            }
+            beginLoading(false);
+            setOpen(false);
+        }
+        catch (err) {
+            if (!mountedRef.current) {
+                return;
+            }
+            beginLoading(false);
+            setError(resolveErrorMessage(err));
+        }
+    }, [onConfirm, beginLoading, setOpen]);
+    const resolvedIcon = icon !== undefined ? icon : destructive ? _jsx(TriangleAlert, {}) : null;
+    return (_jsxs(AlertDialog, { open: isOpen, onOpenChange: handleOpenChange, children: [trigger ? _jsx(AlertDialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(AlertDialogContent, { ref: ref, "data-slot": "confirmation-dialog", className: cn("max-w-md", className), ...contentProps, children: [_jsxs(AlertDialogHeader, { children: [resolvedIcon !== null ? (_jsx("div", { "aria-hidden": true, "data-slot": "confirmation-dialog-icon", className: cn("mb-1 flex size-11 items-center justify-center self-center rounded-full sm:self-start [&_svg]:size-5", destructive ? "bg-error/10 text-error" : "bg-primary/10 text-primary"), children: resolvedIcon })) : null, _jsx(AlertDialogTitle, { children: title }), description ? _jsx(AlertDialogDescription, { children: description }) : null] }), error ? (_jsxs("div", { role: "alert", "data-slot": "confirmation-dialog-error", className: "flex items-start gap-2 rounded-lg border border-error/30 bg-error/10 px-3 py-2 text-left text-sm text-error-strong", children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }), _jsx("span", { children: error })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: loading, children: cancelLabel }), _jsxs("button", { type: "button", "data-slot": "confirmation-dialog-confirm", disabled: loading, "aria-busy": loading, onClick: handleConfirm, className: cn(buttonVariants({ variant: destructive ? "destructive" : "primary" }), "min-w-24"), children: [loading ? _jsx(Spinner, { size: "sm", "aria-hidden": true }) : null, confirmLabel] })] })] })] }));
+});
+ConfirmationDialog.displayName = "ConfirmationDialog";
+//# sourceMappingURL=confirmation-dialog.js.map

package/dist/components/context-menu.d.ts

@@ -0,0 +1,28 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { type ComponentProps, type HTMLAttributes } from "react";
+/** Non-modal by default — same scroll-lock trap as {@link DropdownMenu}. */
+export declare function ContextMenu({ modal, ...props }: ComponentProps<typeof ContextMenuPrimitive.Root>): import("react").JSX.Element;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuPortal: import("react").FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+export declare const ContextMenuSub: import("react").FC<ContextMenuPrimitive.ContextMenuSubProps>;
+export declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubTrigger: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuShortcut: {
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu.d.ts.map