@cronus-ui/ui 0.6.0

package/dist/components/segmented-control.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MotionConfig, motion, useReducedMotion } from "motion/react";
+import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useId, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Spring used by the sliding thumb. The thumb shares a `layoutId` across the
+ * items, so when the active value changes motion physically slides the pill
+ * from the old option to the new one instead of cross-fading. A short, lightly
+ * bouncy spring reads as a crisp, tactile snap. When `useReducedMotion()` is
+ * true the layout animation is disabled automatically and the thumb simply
+ * cuts to its new position.
+ */
+const SEGMENTED_THUMB_TRANSITION = {
+    type: "spring",
+    bounce: 0.15,
+    duration: 0.4,
+};
+const SegmentedControlContext = createContext(null);
+function useSegmentedControl(component) {
+    const context = useContext(SegmentedControlContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <SegmentedControl>.`);
+    }
+    return context;
+}
+/**
+ * Root of the segmented control — a horizontal, single-select toggle with a
+ * sliding "thumb" behind the active option. Owns the selection (controlled or
+ * uncontrolled), provides the shared `layoutId` group id + roving-focus
+ * machinery through context, and renders the track container as a
+ * `role="radiogroup"`. Compose with {@link SegmentedControlItem}.
+ */
+export const SegmentedControl = forwardRef(({ value: valueProp, defaultValue, onValueChange, size = "md", transition = SEGMENTED_THUMB_TRANSITION, reducedMotion: reducedMotionMode = "user", className, children, onKeyDown, ...props }, ref) => {
+    const groupId = useId();
+    const systemReducedMotion = useReducedMotion() ?? false;
+    const reducedMotion = reducedMotionMode === "never"
+        ? false
+        : reducedMotionMode === "always"
+            ? true
+            : systemReducedMotion;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    // Roving tab stop. Derived synchronously from children at render time so it
+    // is SSR-safe (no DOM/effects). The single tab stop must never sit on a
+    // disabled item, and must exist even when nothing is selected — so it points
+    // at the active item only when that item exists and is enabled, otherwise it
+    // falls back to the first enabled item (keeping the group keyboard-reachable
+    // on first Tab and satisfying WCAG 2.1.1).
+    let firstEnabledValue;
+    let activeIsEnabled = false;
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        const childValue = child.props?.value;
+        if (childValue === undefined)
+            return;
+        const childDisabled = child.props?.disabled === true;
+        if (firstEnabledValue === undefined && !childDisabled) {
+            firstEnabledValue = childValue;
+        }
+        if (childValue === value && !childDisabled) {
+            activeIsEnabled = true;
+        }
+    });
+    const rovingValue = activeIsEnabled ? value : firstEnabledValue;
+    // Items register here in DOM order so keyboard navigation can find the
+    // next/previous enabled option without imposing children ordering rules.
+    const itemsRef = useRef([]);
+    const register = useCallback((itemValue, node, disabled) => {
+        const items = itemsRef.current;
+        const existing = items.findIndex((item) => item.value === itemValue);
+        if (node === null) {
+            if (existing !== -1)
+                items.splice(existing, 1);
+            return;
+        }
+        const record = { value: itemValue, node, disabled };
+        if (existing === -1) {
+            items.push(record);
+        }
+        else {
+            items[existing] = record;
+        }
+        // Keep registry in document order so arrow-keys feel spatial.
+        items.sort((a, b) => {
+            if (!a.node || !b.node)
+                return 0;
+            const position = a.node.compareDocumentPosition(b.node);
+            return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+    }, []);
+    const setValue = useCallback((next) => {
+        if (next === value)
+            return;
+        if (!isControlled) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    }, [value, isControlled, onValueChange]);
+    const moveFocus = useCallback((from, direction) => {
+        const enabled = itemsRef.current.filter((item) => !item.disabled && item.node);
+        if (enabled.length === 0)
+            return;
+        let target;
+        if (direction === "first") {
+            target = enabled[0];
+        }
+        else if (direction === "last") {
+            target = enabled[enabled.length - 1];
+        }
+        else {
+            const currentIndex = enabled.findIndex((item) => item.value === from);
+            // Anchor on the focused item if it is enabled, otherwise on selection.
+            const anchor = currentIndex !== -1 ? currentIndex : enabled.findIndex((item) => item.value === value);
+            const base = anchor === -1 ? 0 : anchor;
+            const delta = direction === "next" ? 1 : -1;
+            const nextIndex = (base + delta + enabled.length) % enabled.length;
+            target = enabled[nextIndex];
+        }
+        if (!target?.node)
+            return;
+        target.node.focus();
+        // Roving radiogroup: moving the selection also activates it.
+        setValue(target.value);
+    }, [value, setValue]);
+    return (_jsx(SegmentedControlContext.Provider, { value: {
+            value,
+            rovingValue,
+            setValue,
+            groupId,
+            size,
+            transition,
+            reducedMotion,
+            moveFocus,
+            register,
+        }, children: _jsx(MotionConfig, { reducedMotion: reducedMotionMode, children: _jsx("div", { ref: ref, "data-slot": "segmented-control", "data-size": size, role: "radiogroup", onKeyDown: onKeyDown, className: cn("relative isolate inline-flex items-stretch gap-1 rounded-lg border border-border bg-surface-overlay p-1 align-middle", className), ...props, children: children }) }) }));
+});
+SegmentedControl.displayName = "SegmentedControl";
+const SIZE_CLASSES = {
+    sm: "px-2.5 py-1 text-xs",
+    md: "px-3 py-1.5 text-sm",
+};
+/**
+ * A single option in a {@link SegmentedControl}. Renders a `role="radio"`
+ * button; when active it hosts the shared `motion.div` thumb (an `absolute
+ * inset-0` raised pill) that slides between options via `layoutId`. The label
+ * is layered above the thumb with `relative z-10`. Roving focus + radiogroup
+ * keyboard semantics are handled by the root.
+ */
+export const SegmentedControlItem = forwardRef(({ value, children, disabled = false, className, onClick, onKeyDown, ...props }, forwardedRef) => {
+    const { value: activeValue, rovingValue, setValue, groupId, size, transition, reducedMotion, moveFocus, register, } = useSegmentedControl("SegmentedControlItem");
+    const isActive = activeValue === value;
+    const innerRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        innerRef.current = node;
+        register(value, node, disabled);
+        if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [register, value, disabled, forwardedRef]);
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        // The track is inline-flex, so under `dir="rtl"` the items are mirrored.
+        // WAI-ARIA radiogroup requires Right Arrow to move to the visually-right
+        // option, so swap the horizontal arrows when the writing direction is RTL.
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        switch (event.key) {
+            case "ArrowRight":
+                event.preventDefault();
+                moveFocus(value, rtl ? "prev" : "next");
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                moveFocus(value, "next");
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                moveFocus(value, rtl ? "next" : "prev");
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveFocus(value, "prev");
+                break;
+            case "Home":
+                event.preventDefault();
+                moveFocus(value, "first");
+                break;
+            case "End":
+                event.preventDefault();
+                moveFocus(value, "last");
+                break;
+            default:
+                break;
+        }
+    }, [onKeyDown, moveFocus, value]);
+    return (_jsxs("button", { ref: setRefs, type: "button", "data-slot": "segmented-control-item", "data-state": isActive ? "active" : "inactive", role: "radio", "aria-checked": isActive, disabled: disabled, 
+        // Roving tabindex: exactly one item owns the tab stop — the active item
+        // when it is enabled, else the first enabled item (see `rovingValue`).
+        // A disabled item never becomes the tab stop, so the group stays
+        // keyboard-reachable even when the selected option is disabled or absent.
+        tabIndex: !disabled && value === rovingValue ? 0 : -1, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            setValue(value);
+        }, onKeyDown: handleKeyDown, className: cn("relative inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-colors", "text-fg-secondary hover:text-fg", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-50", isActive && "text-fg", SIZE_CLASSES[size], "[&_svg]:size-4", className), ...props, children: [isActive ? (_jsx(motion.div
+            // Shared id makes this the *same* element across items, so it
+            // slides between positions instead of fading in/out.
+            , { 
+                // Shared id makes this the *same* element across items, so it
+                // slides between positions instead of fading in/out.
+                layoutId: `segmented-thumb-${groupId}`, "data-slot": "segmented-control-thumb", "aria-hidden": true, className: "absolute inset-0 z-0 rounded-md bg-surface-floating shadow-sm", transition: reducedMotion ? { duration: 0 } : transition })) : null, _jsx("span", { className: "relative z-10 inline-flex items-center gap-1.5", children: children })] }));
+});
+SegmentedControlItem.displayName = "SegmentedControlItem";
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/select.d.ts

@@ -0,0 +1,12 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectScrollUpButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+export const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", className: cn("flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-inset px-3 py-2 text-sm text-fg outline-none data-[placeholder]:text-fg-tertiary 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 aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30 [&_svg]:size-4 [&_svg]:opacity-60", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, {}) })] }));
+});
+SelectTrigger.displayName = "SelectTrigger";
+export const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "size-4 opacity-60" }) }));
+});
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+export const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "size-4 opacity-60" }) }));
+});
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+export const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", position: position, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", 
+            // Intentionally physical: Radix's data-side is a physical side, and
+            // the nudge moves the popper away from the trigger on that side.
+            position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+});
+SelectContent.displayName = "SelectContent";
+export const SelectLabel = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-fg-tertiary", className), ...props }));
+});
+SelectLabel.displayName = "SelectLabel";
+export const SelectItem = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+});
+SelectItem.displayName = "SelectItem";
+export const SelectSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+});
+SelectSeparator.displayName = "SelectSeparator";
+//# sourceMappingURL=select.js.map

package/dist/components/separator.d.ts

@@ -0,0 +1,3 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Separator = forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
+    return (_jsx(SeparatorPrimitive.Root, { ref: ref, "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className), ...props }));
+});
+Separator.displayName = "Separator";
+//# sourceMappingURL=separator.js.map

package/dist/components/sheet.d.ts

@@ -0,0 +1,25 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+import { type ComponentPropsWithoutRef, type HTMLAttributes } from "react";
+export declare const Sheet: import("react").FC<SheetPrimitive.DialogProps>;
+export declare const SheetTrigger: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SheetContentProps extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    side?: "top" | "right" | "bottom" | "left";
+}
+export declare const SheetContent: import("react").ForwardRefExoticComponent<SheetContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SheetHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const SheetFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const SheetTitle: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { sheetVariants };
+//# sourceMappingURL=sheet.d.ts.map

package/dist/components/sheet.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export const Sheet = SheetPrimitive.Root;
+export const SheetTrigger = SheetPrimitive.Trigger;
+export const SheetClose = SheetPrimitive.Close;
+const SheetOverlay = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SheetPrimitive.Overlay, { ref: ref, "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-[cronus-overlay-in_300ms_var(--ease-out-quart)] data-[state=closed]:animate-[cronus-overlay-out_240ms_var(--ease-out-quart)]", className), ...props }));
+});
+SheetOverlay.displayName = "SheetOverlay";
+const sheetVariants = cva("fixed z-50 flex flex-col gap-4 bg-surface-floating p-6 text-fg shadow-lg border-border", {
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b w-full data-[state=open]:animate-[cronus-slide-in-top_320ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-slide-out-top_260ms_var(--ease-out-quart)_both]",
+            bottom: "inset-x-0 bottom-0 border-t w-full data-[state=open]:animate-[cronus-slide-in-bottom_320ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-slide-out-bottom_260ms_var(--ease-out-quart)_both]",
+            left: "inset-y-0 left-0 border-r h-full w-3/4 max-w-sm data-[state=open]:animate-[cronus-slide-in-left_320ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-slide-out-left_260ms_var(--ease-out-quart)_both]",
+            right: "inset-y-0 right-0 border-l h-full w-3/4 max-w-sm data-[state=open]:animate-[cronus-slide-in-right_320ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-slide-out-right_260ms_var(--ease-out-quart)_both]",
+        },
+    },
+    defaultVariants: { side: "right" },
+});
+export const SheetContent = forwardRef(({ className, children, side = "right", ...props }, ref) => {
+    return (_jsxs(SheetPrimitive.Portal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, "data-slot": "sheet-content", className: cn(sheetVariants({ side }), className), ...props, children: [children, _jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "absolute right-4 top-4 rounded-md text-fg-tertiary outline-none transition-opacity hover:text-fg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
+});
+SheetContent.displayName = "SheetContent";
+export const SheetHeader = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 text-center sm:text-left", className), ...props }));
+};
+SheetHeader.displayName = "SheetHeader";
+export const SheetFooter = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+};
+SheetFooter.displayName = "SheetFooter";
+export const SheetTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SheetPrimitive.Title, { ref: ref, "data-slot": "sheet-title", className: cn("font-display text-lg font-semibold text-fg", className), ...props }));
+});
+SheetTitle.displayName = "SheetTitle";
+export const SheetDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SheetPrimitive.Description, { ref: ref, "data-slot": "sheet-description", className: cn("text-sm text-fg-secondary", className), ...props }));
+});
+SheetDescription.displayName = "SheetDescription";
+export { sheetVariants };
+//# sourceMappingURL=sheet.js.map

package/dist/components/shimmer.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from "react";
+export declare const Shimmer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/components/shimmer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Shimmer = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, "data-slot": "shimmer", "aria-hidden": true, className: cn("relative overflow-hidden rounded-md bg-surface-overlay", className), ...props, children: [_jsx("div", { className: "absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-fg/10 to-transparent" }), children] }));
+});
+Shimmer.displayName = "Shimmer";
+//# sourceMappingURL=shimmer.js.map

package/dist/components/shiny-text.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface ShinyTextProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    asChild?: boolean;
+    /**
+     * Seconds for one sheen sweep.
+     * @default 3
+     */
+    duration?: number;
+}
+/**
+ * A metallic sheen that sweeps across live text. The copy stays selectable
+ * and readable; the sheen is a `background-clip: text` overlay. Reduced-motion
+ * visitors see the resting fill with no sweep.
+ */
+export declare function ShinyText({ ref, className, asChild, duration, style, children, ...props }: ShinyTextProps): import("react").JSX.Element;
+export declare namespace ShinyText {
+    var displayName: string;
+}
+//# sourceMappingURL=shiny-text.d.ts.map

package/dist/components/shiny-text.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/cn.js";
+const SHINY_KEYFRAMES = "@keyframes cronus-shiny-text{0%{background-position:100% 0}100%{background-position:-100% 0}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A metallic sheen that sweeps across live text. The copy stays selectable
+ * and readable; the sheen is a `background-clip: text` overlay. Reduced-motion
+ * visitors see the resting fill with no sweep.
+ */
+export function ShinyText({ ref, className, asChild = false, duration = 3, style, children, ...props }) {
+    const Comp = asChild ? Slot : "span";
+    const cycle = Math.max(0.8, finiteOr(duration, 3));
+    const shinyStyle = { "--shiny-duration": `${cycle}s` };
+    return (_jsxs("span", { "data-slot": "shiny-text", className: "contents", children: [_jsx("style", { children: SHINY_KEYFRAMES }), _jsx(Comp, { ref: ref, className: cn("inline bg-[length:200%_100%] bg-clip-text text-transparent [animation-duration:var(--shiny-duration)] [animation-iteration-count:infinite] [animation-name:cronus-shiny-text] [animation-timing-function:linear] motion-reduce:[animation-name:none]", className), style: {
+                    ...shinyStyle,
+                    backgroundImage: "linear-gradient(90deg, var(--cronus-fg-tertiary) 0%, var(--cronus-fg-tertiary) 40%, var(--cronus-fg) 50%, var(--cronus-fg-tertiary) 60%, var(--cronus-fg-tertiary) 100%)",
+                    ...style,
+                }, ...props, children: children })] }));
+}
+ShinyText.displayName = "ShinyText";
+//# sourceMappingURL=shiny-text.js.map

package/dist/components/sidebar.d.ts

@@ -0,0 +1,92 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes, type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } from "react";
+import { TooltipContent } from "./tooltip.js";
+type SidebarState = "expanded" | "collapsed";
+export interface SidebarContextValue {
+    /** Desktop expanded/collapsed state. */
+    state: SidebarState;
+    /** Whether the desktop sidebar is expanded. */
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    /** Whether the viewport is below the mobile breakpoint. */
+    isMobile: boolean;
+    /** Whether the mobile (Sheet) sidebar is open. */
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    /** Toggle the relevant sidebar (mobile sheet on small screens, otherwise desktop). */
+    toggleSidebar: () => void;
+}
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default desktop open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Controlled desktop open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Enable the Ctrl/Cmd+B toggle shortcut. */
+    enableKeyboardShortcut?: boolean;
+}
+export declare const SidebarProvider: import("react").ForwardRefExoticComponent<SidebarProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+    /** Accessible label for the navigation landmark. */
+    "aria-label"?: string;
+}
+export declare const Sidebar: import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render through a custom element while keeping the toggle behavior. */
+    asChild?: boolean;
+}
+export declare const SidebarTrigger: import("react").ForwardRefExoticComponent<SidebarTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * A thin draggable-looking rail rendered along the inner edge of the sidebar
+ * that toggles collapse on click. Hidden on mobile (the Sheet handles dismissal).
+ */
+export declare const SidebarRail: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Content region sibling to a `variant="inset"` sidebar. Provides the rounded,
+ * inset surface that pairs with the floating/inset sidebar styles. Not a
+ * landmark — the consumer owns the `<main>` per route.
+ */
+export declare const SidebarInset: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Scrollable middle region. Uses ScrollArea so long nav trees stay accessible
+ * without clipping. Collapses its overflow padding in icon mode.
+ */
+export declare const SidebarContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarSeparator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+export declare const SidebarGroupLabel: import("react").ForwardRefExoticComponent<SidebarGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroupContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidebarMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const SidebarMenuItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+declare const sidebarMenuButtonVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SidebarMenuButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarMenuButtonVariants> {
+    asChild?: boolean;
+    isActive?: boolean;
+    /**
+     * Tooltip content shown only when the sidebar is collapsed to icons on
+     * desktop. Accepts a string or full `TooltipContent` props.
+     */
+    tooltip?: ReactNode | ComponentPropsWithoutRef<typeof TooltipContent>;
+}
+export declare const SidebarMenuButton: import("react").ForwardRefExoticComponent<SidebarMenuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SidebarMenuSub: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const SidebarMenuSubItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+export interface SidebarMenuSubButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    isActive?: boolean;
+    size?: "sm" | "md";
+}
+export declare const SidebarMenuSubButton: import("react").ForwardRefExoticComponent<SidebarMenuSubButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { sidebarMenuButtonVariants };
+//# sourceMappingURL=sidebar.d.ts.map