@cronus-ui/ui 0.6.0

package/dist/components/metric.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from "react";
+export declare const Metric: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MetricLabel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MetricValue: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export interface MetricDeltaProps extends HTMLAttributes<HTMLSpanElement> {
+    trend?: "up" | "down" | "neutral";
+}
+export declare const MetricDelta: import("react").ForwardRefExoticComponent<MetricDeltaProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=metric.d.ts.map

package/dist/components/metric.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Metric = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "metric", className: cn("flex flex-col gap-1", className), ...props }));
+});
+Metric.displayName = "Metric";
+export const MetricLabel = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "metric-label", className: cn("text-xs font-medium uppercase tracking-wider text-fg-tertiary", className), ...props }));
+});
+MetricLabel.displayName = "MetricLabel";
+export const MetricValue = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "metric-value", className: cn("font-display text-2xl font-semibold text-fg tabular-nums", className), ...props }));
+});
+MetricValue.displayName = "MetricValue";
+// Small (`text-xs`) delta text: use the AA-tuned `*-strong` variants so the
+// success/error trend labels clear WCAG AA on the light-theme card surfaces
+// (plain `text-success`/`text-error` read <4.5:1 as small text there).
+const trendStyles = {
+    up: "text-success-strong",
+    down: "text-error-strong",
+    neutral: "text-fg-tertiary",
+};
+const trendIcons = {
+    up: TrendingUp,
+    down: TrendingDown,
+    neutral: Minus,
+};
+export const MetricDelta = forwardRef(({ className, trend = "neutral", children, ...props }, ref) => {
+    const Icon = trendIcons[trend];
+    return (_jsxs("span", { ref: ref, "data-slot": "metric-delta", className: cn("inline-flex items-center gap-1 text-xs font-medium", trendStyles[trend], className), ...props, children: [_jsx(Icon, { className: "size-3.5" }), children] }));
+});
+MetricDelta.displayName = "MetricDelta";
+//# sourceMappingURL=metric.js.map

package/dist/components/mode-toggle.d.ts

@@ -0,0 +1,32 @@
+import { type ButtonHTMLAttributes } from "react";
+export type ModeToggleMode = "light" | "dark";
+export type ModeToggleSize = "sm" | "md";
+export interface ModeToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The current color mode. The component is fully controlled — it never stores mode itself. */
+    mode: ModeToggleMode;
+    /** Called with the opposite mode when the button is activated (click, Enter or Space). */
+    onModeChange: (next: ModeToggleMode) => void;
+    /** Button footprint: `sm` (32px, 16px glyph) or `md` (36px, 20px glyph). Defaults to `md`. */
+    size?: ModeToggleSize;
+}
+/**
+ * An animated light/dark mode icon-button where a single SVG sun morphs into a
+ * moon. Three CSS transitions (~300ms, house ease-out) drive the morph, all
+ * keyed off the button's `data-mode` attribute so React only swaps one string:
+ *
+ * - the core `<circle>` scales up 1.75× to become the moon disc,
+ * - the 8 sun rays scale down and fade out as a group,
+ * - a black circle inside an SVG `<mask>` slides in from the corner to carve
+ *   the crescent bite out of the enlarged disc.
+ *
+ * Because the states are plain CSS classes (no JS animation loop), the morph
+ * is compositor-driven and `motion-reduce` collapses it to an instant swap.
+ * The `<mask>` id comes from `useId`, so multiple toggles can coexist on one
+ * page and SSR/client markup stay in sync.
+ *
+ * The component is deliberately theme-agnostic: it renders whatever `mode` it
+ * is given and reports the opposite via `onModeChange`. Wire it to your theme
+ * provider (e.g. `useTheme().setMode`) — it never touches the DOM root itself.
+ */
+export declare const ModeToggle: import("react").ForwardRefExoticComponent<ModeToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=mode-toggle.d.ts.map

package/dist/components/mode-toggle.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId } from "react";
+import { cn } from "../lib/cn.js";
+const sizeStyles = {
+    sm: { button: "size-8", icon: "size-4" },
+    md: { button: "size-9", icon: "size-5" },
+};
+/**
+ * An animated light/dark mode icon-button where a single SVG sun morphs into a
+ * moon. Three CSS transitions (~300ms, house ease-out) drive the morph, all
+ * keyed off the button's `data-mode` attribute so React only swaps one string:
+ *
+ * - the core `<circle>` scales up 1.75× to become the moon disc,
+ * - the 8 sun rays scale down and fade out as a group,
+ * - a black circle inside an SVG `<mask>` slides in from the corner to carve
+ *   the crescent bite out of the enlarged disc.
+ *
+ * Because the states are plain CSS classes (no JS animation loop), the morph
+ * is compositor-driven and `motion-reduce` collapses it to an instant swap.
+ * The `<mask>` id comes from `useId`, so multiple toggles can coexist on one
+ * page and SSR/client markup stay in sync.
+ *
+ * The component is deliberately theme-agnostic: it renders whatever `mode` it
+ * is given and reports the opposite via `onModeChange`. Wire it to your theme
+ * provider (e.g. `useTheme().setMode`) — it never touches the DOM root itself.
+ */
+export const ModeToggle = forwardRef(({ mode, onModeChange, size = "md", className, onClick, "aria-label": ariaLabel, ...props }, ref) => {
+    const maskId = useId();
+    const next = mode === "light" ? "dark" : "light";
+    const handleClick = useCallback((event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        onModeChange(next);
+    }, [onClick, onModeChange, next]);
+    return (_jsx("button", { ref: ref, type: "button", "data-slot": "mode-toggle", "data-mode": mode, "aria-label": ariaLabel ?? `Switch to ${next} mode`, className: cn("group/mode-toggle inline-flex shrink-0 items-center justify-center rounded-lg text-fg-secondary outline-none", "transition-[background,color,box-shadow] duration-150 ease-[var(--ease-out-quart)] hover:bg-surface-overlay hover:text-fg motion-reduce:transition-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", "disabled:pointer-events-none disabled:opacity-50", sizeStyles[size].button, className), onClick: handleClick, ...props, children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", className: cn("shrink-0", sizeStyles[size].icon), children: [_jsxs("mask", { id: maskId, children: [_jsx("rect", { width: "24", height: "24", fill: "white" }), _jsx("circle", { cx: "24", cy: "10", r: "6", fill: "black", className: "translate-x-0 transition-transform duration-300 ease-[var(--ease-out-quart)] group-data-[mode=dark]/mode-toggle:-translate-x-[7px] motion-reduce:transition-none" })] }), _jsx("circle", { "data-slot": "mode-toggle-core", cx: "12", cy: "12", r: "6", fill: "currentColor", mask: `url(#${maskId})`, className: "origin-center scale-100 transition-transform duration-300 ease-[var(--ease-out-quart)] group-data-[mode=dark]/mode-toggle:scale-[1.75] motion-reduce:transition-none" }), _jsxs("g", { "data-slot": "mode-toggle-rays", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "origin-center scale-100 opacity-100 transition-[scale,opacity] duration-300 ease-[var(--ease-out-quart)] group-data-[mode=dark]/mode-toggle:scale-50 group-data-[mode=dark]/mode-toggle:opacity-0 motion-reduce:transition-none", children: [_jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), _jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), _jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), _jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), _jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), _jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), _jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), _jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })] }) }));
+});
+ModeToggle.displayName = "ModeToggle";
+//# sourceMappingURL=mode-toggle.js.map

package/dist/components/morphing-popover.d.ts

@@ -0,0 +1,91 @@
+import { motion, type Transition } from "motion/react";
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface MorphingPopoverProps extends HTMLAttributes<HTMLDivElement> {
+    /** Controlled open state. When provided, the component is fully controlled. */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state should change (controlled or not). */
+    onOpenChange?: (open: boolean) => void;
+    /** Override the morph spring (advanced — defaults to the Cronus morph spring). */
+    transition?: Transition;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"user"`: users who
+     * opt out get a fade instead of the layout morph. Pass `"never"` to always
+     * play the morph (e.g. a showcase that must demonstrate the animation), or
+     * `"always"` to force the reduced variant for everyone.
+     */
+    reducedMotion?: "user" | "always" | "never";
+    children?: ReactNode;
+}
+/**
+ * Root of the morphing popover. Owns open state (controlled or uncontrolled),
+ * provides the shared `layoutId` + a11y wiring through context, and installs a
+ * {@link MotionConfig} so the trigger and content morph with the same spring.
+ *
+ * `reducedMotion="user"` makes motion automatically honour
+ * `prefers-reduced-motion`: the morph collapses to a cut/cross-fade for users
+ * who opt out, while the open/close behaviour and focus management are
+ * unchanged.
+ */
+export declare const MorphingPopover: import("react").ForwardRefExoticComponent<MorphingPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MorphingPopoverTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof motion.button>, "ref" | "children" | "onClick"> {
+    children?: ReactNode;
+    /** Extra click handler; runs alongside the open toggle. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Trigger button. Carries the shared `layoutId` so it is the *same* element
+ * (to the layout engine) as the content — that is what makes the surface morph
+ * out of the button rather than appear beside it.
+ *
+ * While open, the trigger is hidden from the a11y tree and pointer events
+ * (`aria-hidden` + `pointer-events-none`) but kept mounted so the morph-back
+ * animation has a target; focus return targets it directly via ref, so this
+ * does not break keyboard flow.
+ */
+export declare const MorphingPopoverTrigger: import("react").ForwardRefExoticComponent<MorphingPopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface MorphingPopoverContentProps extends Omit<React.ComponentPropsWithoutRef<typeof motion.div>, "ref" | "children"> {
+    children?: ReactNode;
+    /** Accessible name when the content has no visible heading to point at. */
+    "aria-label"?: string;
+    /** Id of a visible heading element (e.g. a {@link MorphingPopoverHeader}). */
+    "aria-labelledby"?: string;
+}
+/**
+ * Floating surface. Shares the trigger's `layoutId`, so it morphs out of the
+ * button. Rendered through {@link AnimatePresence} for enter/exit and
+ * positioned absolutely relative to the {@link MorphingPopover} container — the
+ * default size is small and meant to be overridden via `className`.
+ *
+ * A11y: `role="dialog"`, non-modal (`aria-modal={false}`), focus moves to the
+ * first focusable descendant (or the dialog itself) on open and returns to the
+ * trigger on close. Escape and outside `mousedown` both close it; all listeners
+ * are torn down on unmount.
+ */
+export declare const MorphingPopoverContent: import("react").ForwardRefExoticComponent<MorphingPopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MorphingPopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/** Dismiss button (X). Wired to the context `close`; labelled for screen readers. */
+export declare const MorphingPopoverClose: import("react").ForwardRefExoticComponent<MorphingPopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface MorphingPopoverHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Optional header row — pairs naturally with {@link MorphingPopoverClose}. */
+export declare const MorphingPopoverHeader: import("react").ForwardRefExoticComponent<MorphingPopoverHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MorphingPopoverBodyProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Scrollable/content region of the surface. */
+export declare const MorphingPopoverBody: import("react").ForwardRefExoticComponent<MorphingPopoverBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MorphingPopoverFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Optional footer row, typically for actions. */
+export declare const MorphingPopoverFooter: import("react").ForwardRefExoticComponent<MorphingPopoverFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MorphingPopoverButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Full-width menu item for surfaces used as poppy menus. Hover/focus tint via
+ * `surface-overlay`. Does not auto-close — wrap `onClick` with the context
+ * `close` from a consumer if needed.
+ */
+export declare const MorphingPopoverButton: import("react").ForwardRefExoticComponent<MorphingPopoverButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=morphing-popover.d.ts.map

package/dist/components/morphing-popover.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { AnimatePresence, MotionConfig, motion } from "motion/react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Shared spring used for the layout-morph: the trigger physically grows into
+ * the floating surface (and shrinks back) instead of fading. A longer duration
+ * with a touch of `bounce` makes the expansion clearly perceptible — you watch
+ * the surface grow and settle rather than snap open.
+ */
+const MORPHING_POPOVER_TRANSITION = {
+    type: "spring",
+    bounce: 0.18,
+    duration: 0.45,
+};
+/**
+ * Content reveal: the children fade (and rise a hair) in *after* the surface
+ * has started growing, so the morph reads as "expand, then reveal" instead of
+ * the panel popping in fully-formed. Tween — not the layout spring — so the
+ * fade stays crisp. Honours reduced-motion via the ambient {@link MotionConfig}.
+ */
+const MORPHING_POPOVER_CONTENT_REVEAL = {
+    initial: { opacity: 0, y: 6 },
+    animate: { opacity: 1, y: 0, transition: { delay: 0.12, duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, transition: { duration: 0.08 } },
+};
+const MorphingPopoverContext = createContext(null);
+function useMorphingPopover(component) {
+    const context = useContext(MorphingPopoverContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <MorphingPopover>.`);
+    }
+    return context;
+}
+/**
+ * Root of the morphing popover. Owns open state (controlled or uncontrolled),
+ * provides the shared `layoutId` + a11y wiring through context, and installs a
+ * {@link MotionConfig} so the trigger and content morph with the same spring.
+ *
+ * `reducedMotion="user"` makes motion automatically honour
+ * `prefers-reduced-motion`: the morph collapses to a cut/cross-fade for users
+ * who opt out, while the open/close behaviour and focus management are
+ * unchanged.
+ */
+export const MorphingPopover = forwardRef(({ open: openProp, defaultOpen = false, onOpenChange, transition = MORPHING_POPOVER_TRANSITION, reducedMotion = "user", className, children, ...props }, ref) => {
+    const uniqueId = useId();
+    const contentId = `morphing-popover-content-${uniqueId}`;
+    const triggerRef = useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : uncontrolledOpen;
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const open = useCallback(() => setOpen(true), [setOpen]);
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    const toggle = useCallback(() => setOpen(!isOpen), [setOpen, isOpen]);
+    return (_jsx(MorphingPopoverContext.Provider, { value: { isOpen, open, close, toggle, uniqueId, contentId, triggerRef }, children: _jsx(MotionConfig, { transition: transition, reducedMotion: reducedMotion, children: _jsx("div", { ref: ref, "data-slot": "morphing-popover", "data-state": isOpen ? "open" : "closed", className: cn("relative isolate inline-flex items-center justify-center", className), ...props, children: children }) }) }));
+});
+MorphingPopover.displayName = "MorphingPopover";
+/**
+ * Trigger button. Carries the shared `layoutId` so it is the *same* element
+ * (to the layout engine) as the content — that is what makes the surface morph
+ * out of the button rather than appear beside it.
+ *
+ * While open, the trigger is hidden from the a11y tree and pointer events
+ * (`aria-hidden` + `pointer-events-none`) but kept mounted so the morph-back
+ * animation has a target; focus return targets it directly via ref, so this
+ * does not break keyboard flow.
+ */
+export const MorphingPopoverTrigger = forwardRef(({ className, children, onClick, ...props }, forwardedRef) => {
+    const { isOpen, open, uniqueId, contentId, triggerRef } = useMorphingPopover("MorphingPopoverTrigger");
+    return (_jsx(motion.button, { ref: (node) => {
+            triggerRef.current = node;
+            if (typeof forwardedRef === "function") {
+                forwardedRef(node);
+            }
+            else if (forwardedRef) {
+                forwardedRef.current = node;
+            }
+        }, type: "button", "data-slot": "morphing-popover-trigger", "data-state": isOpen ? "open" : "closed", layoutId: `morphing-popover-${uniqueId}`, style: { borderRadius: 10 }, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": contentId, "aria-hidden": isOpen || undefined, tabIndex: isOpen ? -1 : undefined, onClick: (event) => {
+            onClick?.(event);
+            open();
+        }, className: cn("inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-border bg-surface-floating px-3 text-sm font-medium text-fg shadow-sm transition-colors", "hover:bg-surface-overlay outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", isOpen && "pointer-events-none", className), ...props, children: _jsx(motion.span, { layoutId: `morphing-popover-label-${uniqueId}`, className: "inline-flex", children: children }) }));
+});
+MorphingPopoverTrigger.displayName = "MorphingPopoverTrigger";
+/**
+ * Floating surface. Shares the trigger's `layoutId`, so it morphs out of the
+ * button. Rendered through {@link AnimatePresence} for enter/exit and
+ * positioned absolutely relative to the {@link MorphingPopover} container — the
+ * default size is small and meant to be overridden via `className`.
+ *
+ * A11y: `role="dialog"`, non-modal (`aria-modal={false}`), focus moves to the
+ * first focusable descendant (or the dialog itself) on open and returns to the
+ * trigger on close. Escape and outside `mousedown` both close it; all listeners
+ * are torn down on unmount.
+ */
+export const MorphingPopoverContent = forwardRef(({ className, children, onAnimationComplete, ...props }, forwardedRef) => {
+    const { isOpen, close, uniqueId, contentId, triggerRef } = useMorphingPopover("MorphingPopoverContent");
+    const contentRef = useRef(null);
+    const hadFocusInsideRef = useRef(false);
+    const setRefs = useCallback((node) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    // Outside-click (mousedown) + Escape to close, scoped to the open lifetime.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!contentRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+                close();
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                close();
+            }
+        };
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, close, triggerRef]);
+    // Move focus into the surface on open; return it to the trigger on close.
+    useEffect(() => {
+        if (isOpen) {
+            const node = contentRef.current;
+            if (!node)
+                return;
+            const focusable = node.querySelector('a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])');
+            // rAF lets the morph mount the surface before we grab focus.
+            const raf = requestAnimationFrame(() => {
+                (focusable ?? node).focus();
+                hadFocusInsideRef.current = true;
+            });
+            return () => cancelAnimationFrame(raf);
+        }
+        // Closed: hand focus back to the trigger if focus had entered the surface
+        // and is now lost (to body/null/<html>, e.g. a focused child unmounted
+        // right before close) or still inside the closing content.
+        const active = document.activeElement;
+        const focusLost = active === null || active === document.body || active === document.documentElement;
+        if (hadFocusInsideRef.current && (focusLost || contentRef.current?.contains(active))) {
+            triggerRef.current?.focus();
+        }
+        hadFocusInsideRef.current = false;
+        return undefined;
+    }, [isOpen, triggerRef]);
+    return (_jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { ref: setRefs, "data-slot": "morphing-popover-content", "data-state": "open", id: contentId, role: "dialog", "aria-modal": false, layoutId: `morphing-popover-${uniqueId}`, style: { borderRadius: 16 }, 
+            // dialog must be focusable so it can receive focus when empty.
+            tabIndex: -1, onAnimationComplete: onAnimationComplete, className: cn("absolute z-50 flex w-72 flex-col overflow-hidden border border-border bg-surface-floating text-fg shadow-lg outline-none", className), ...props, children: _jsx(motion.div, { className: "flex w-full flex-1 flex-col", initial: MORPHING_POPOVER_CONTENT_REVEAL.initial, animate: MORPHING_POPOVER_CONTENT_REVEAL.animate, exit: MORPHING_POPOVER_CONTENT_REVEAL.exit, children: children }) })) : null }));
+});
+MorphingPopoverContent.displayName = "MorphingPopoverContent";
+/** Dismiss button (X). Wired to the context `close`; labelled for screen readers. */
+export const MorphingPopoverClose = forwardRef(({ className, onClick, children, ...props }, ref) => {
+    const { close } = useMorphingPopover("MorphingPopoverClose");
+    return (_jsx("button", { ref: ref, type: "button", "data-slot": "morphing-popover-close", "aria-label": "Close", onClick: (event) => {
+            onClick?.(event);
+            close();
+        }, className: cn("inline-flex size-7 items-center justify-center rounded-md text-fg-tertiary transition-colors", "hover:bg-surface-overlay hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating", className), ...props, children: children ?? _jsx(X, { className: "size-4" }) }));
+});
+MorphingPopoverClose.displayName = "MorphingPopoverClose";
+/** Optional header row — pairs naturally with {@link MorphingPopoverClose}. */
+export const MorphingPopoverHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "morphing-popover-header", className: cn("flex items-center justify-between gap-2 border-b border-border px-4 py-3 text-sm font-medium text-fg", className), ...props })));
+MorphingPopoverHeader.displayName = "MorphingPopoverHeader";
+/** Scrollable/content region of the surface. */
+export const MorphingPopoverBody = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "morphing-popover-body", className: cn("flex flex-1 flex-col gap-2 p-4 text-sm text-fg-secondary", className), ...props })));
+MorphingPopoverBody.displayName = "MorphingPopoverBody";
+/** Optional footer row, typically for actions. */
+export const MorphingPopoverFooter = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "morphing-popover-footer", className: cn("flex items-center justify-end gap-2 border-t border-border px-4 py-3", className), ...props })));
+MorphingPopoverFooter.displayName = "MorphingPopoverFooter";
+/**
+ * Full-width menu item for surfaces used as poppy menus. Hover/focus tint via
+ * `surface-overlay`. Does not auto-close — wrap `onClick` with the context
+ * `close` from a consumer if needed.
+ */
+export const MorphingPopoverButton = forwardRef(({ className, type, ...props }, ref) => (_jsx("button", { ref: ref, type: type ?? "button", "data-slot": "morphing-popover-button", className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-fg transition-colors", "hover:bg-surface-overlay outline-none focus-visible:bg-surface-overlay focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4", className), ...props })));
+MorphingPopoverButton.displayName = "MorphingPopoverButton";
+//# sourceMappingURL=morphing-popover.js.map

package/dist/components/motion-presets.d.ts

@@ -0,0 +1,9 @@
+import type { Transition, Variants } from "motion/react";
+export declare const springSoft: Transition;
+export declare const springSnappy: Transition;
+export declare const easeOutQuart: Transition;
+export declare const fadeInUp: Variants;
+export declare const fadeIn: Variants;
+export declare const scaleIn: Variants;
+export declare const staggerContainer: Variants;
+//# sourceMappingURL=motion-presets.d.ts.map

package/dist/components/motion-presets.js

@@ -0,0 +1,20 @@
+export const springSoft = { type: "spring", stiffness: 260, damping: 26 };
+export const springSnappy = { type: "spring", stiffness: 400, damping: 30 };
+export const easeOutQuart = { duration: 0.5, ease: [0.16, 1, 0.3, 1] };
+export const fadeInUp = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition: easeOutQuart },
+};
+export const fadeIn = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: easeOutQuart },
+};
+export const scaleIn = {
+    hidden: { opacity: 0, scale: 0.96 },
+    visible: { opacity: 1, scale: 1, transition: springSoft },
+};
+export const staggerContainer = {
+    hidden: {},
+    visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
+};
+//# sourceMappingURL=motion-presets.js.map

package/dist/components/multi-select.d.ts

@@ -0,0 +1,54 @@
+export interface MultiSelectOption {
+    /** Stable value persisted in the selection array. */
+    value: string;
+    /** Human-readable label rendered in the list and chips. */
+    label: string;
+    /** Disable selecting/deselecting this single option. */
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    /** Options shown in the searchable list. */
+    options: MultiSelectOption[];
+    /** Controlled selection. Provide together with `onValueChange`. */
+    value?: string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string[];
+    /** Called with the next selection whenever it changes. */
+    onValueChange?: (value: string[]) => void;
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder for the search input inside the popover. */
+    searchPlaceholder?: string;
+    /** Text shown when the search yields no results. */
+    emptyText?: string;
+    /**
+     * Maximum number of chips to render before collapsing the rest into a
+     * "+N" badge. When omitted, every selected chip is rendered.
+     */
+    maxDisplay?: number;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /**
+     * When true (default), pressing Backspace with an empty search removes the
+     * last selected item.
+     */
+    removeLastOnBackspace?: boolean;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the popover content. */
+    contentClassName?: string;
+    /** Accessible label for the trigger when no visible label is associated. */
+    "aria-label"?: string;
+    /** id of an element that labels the trigger. */
+    "aria-labelledby"?: string;
+    /** Marks the trigger as invalid (e.g. from a Form layer), applying error styling. */
+    "aria-invalid"?: boolean | "true" | "false";
+    /** Controls the popover open state (controlled). */
+    open?: boolean;
+    /** Initial popover open state (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Called when the popover open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=multi-select.d.ts.map

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

@@ -0,0 +1,12 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+export declare const NavigationMenu: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const NavigationMenuList: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const NavigationMenuItem: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const NavigationMenuTrigger: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const NavigationMenuContent: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuLink: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const NavigationMenuIndicator: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuViewport: import("react").ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { navigationMenuTriggerStyle };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/navigation-menu.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const NavigationMenu = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(NavigationMenuPrimitive.Root, { ref: ref, "data-slot": "navigation-menu", className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, _jsx(NavigationMenuViewport, {})] }));
+});
+NavigationMenu.displayName = "NavigationMenu";
+export const NavigationMenuList = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(NavigationMenuPrimitive.List, { ref: ref, "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-1", className), ...props }));
+});
+NavigationMenuList.displayName = "NavigationMenuList";
+export const NavigationMenuItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(NavigationMenuPrimitive.Item, { ref: ref, "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
+});
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center gap-1 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-fg-secondary transition-[background,color,box-shadow] duration-150 ease-[var(--ease-out-quart)] outline-none hover:bg-surface-overlay hover:text-fg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-surface-overlay data-[state=open]:text-fg data-[active]:bg-surface-overlay data-[active]:text-fg");
+export const NavigationMenuTrigger = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { ref: ref, "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, _jsx(ChevronDown, { "aria-hidden": "true", className: "relative top-px size-3.5 text-fg-tertiary transition-transform duration-200 ease-[var(--ease-out-quart)] group-data-[state=open]:rotate-180" })] }));
+});
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+export const NavigationMenuContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(NavigationMenuPrimitive.Content, { ref: ref, "data-slot": "navigation-menu-content", className: cn("left-0 top-0 w-full p-1 transition-[transform,opacity] duration-200 ease-[var(--ease-out-quart)] md:absolute md:w-auto", "data-[motion=from-start]:-translate-x-12 data-[motion=from-start]:opacity-0", "data-[motion=from-end]:translate-x-12 data-[motion=from-end]:opacity-0", "data-[motion=to-start]:-translate-x-12 data-[motion=to-start]:opacity-0", "data-[motion=to-end]:translate-x-12 data-[motion=to-end]:opacity-0", className), ...props }));
+});
+NavigationMenuContent.displayName = "NavigationMenuContent";
+export const NavigationMenuLink = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(NavigationMenuPrimitive.Link, { ref: ref, "data-slot": "navigation-menu-link", className: cn("flex select-none flex-col gap-0.5 rounded-md px-3 py-2 text-sm leading-snug no-underline outline-none transition-colors duration-150 ease-[var(--ease-out-quart)] hover:bg-surface-overlay hover:text-fg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base data-[active]:bg-surface-overlay data-[active]:text-fg", className), ...props }));
+});
+NavigationMenuLink.displayName = "NavigationMenuLink";
+export const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(NavigationMenuPrimitive.Indicator, { ref: ref, "data-slot": "navigation-menu-indicator", className: cn("top-full z-10 flex h-2 items-end justify-center overflow-hidden transition-opacity duration-200 ease-[var(--ease-out-quart)] data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100", className), ...props, children: _jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm border-l border-t border-border bg-surface-floating shadow-md" }) }));
+});
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+export const NavigationMenuViewport = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { className: "absolute left-0 top-full flex w-max justify-center", children: _jsx(NavigationMenuPrimitive.Viewport, { ref: ref, "data-slot": "navigation-menu-viewport", className: cn("relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full shrink-0 origin-top-center overflow-hidden rounded-lg border border-border bg-surface-floating text-fg shadow-lg transition-[width,height] duration-200 ease-[var(--ease-out-quart)] data-[state=closed]:opacity-0 md:w-[var(--radix-navigation-menu-viewport-width)]", className), ...props }) }));
+});
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+export { navigationMenuTriggerStyle };
+//# sourceMappingURL=navigation-menu.js.map

package/dist/components/noise.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface NoiseProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Overlay opacity of the grain, `0–1`.
+     * @default 0.08
+     */
+    opacity?: number;
+}
+/**
+ * A film-grain overlay generated with SVG `feTurbulence`. Sits above the
+ * background and below content, purely decorative, with no animation of its
+ * own — the grain is a still texture that reads as analog depth.
+ */
+export declare function Noise({ ref, className, children, opacity, ...props }: NoiseProps): import("react").JSX.Element;
+export declare namespace Noise {
+    var displayName: string;
+}
+//# sourceMappingURL=noise.d.ts.map

package/dist/components/noise.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A film-grain overlay generated with SVG `feTurbulence`. Sits above the
+ * background and below content, purely decorative, with no animation of its
+ * own — the grain is a still texture that reads as analog depth.
+ */
+export function Noise({ ref, className, children, opacity = 0.08, ...props }) {
+    const filterId = useId();
+    const overlayOpacity = Math.min(1, Math.max(0, finiteOr(opacity, 0.08)));
+    return (_jsxs("div", { ref: ref, "data-slot": "noise", className: cn("relative overflow-hidden", className), ...props, children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 size-full", style: { opacity: overlayOpacity }, children: [_jsx("filter", { id: filterId, children: _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.8", numOctaves: 4, stitchTiles: "stitch" }) }), _jsx("rect", { width: "100%", height: "100%", filter: `url(#${filterId})` })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+Noise.displayName = "Noise";
+//# sourceMappingURL=noise.js.map