@cronus-ui/ui 0.6.0

package/dist/components/skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Skeleton = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "skeleton", "aria-hidden": true, className: cn("animate-pulse rounded-md bg-surface-overlay", className), ...props }));
+});
+Skeleton.displayName = "Skeleton";
+//# sourceMappingURL=skeleton.js.map

package/dist/components/slider.d.ts

@@ -0,0 +1,10 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+/**
+ * A single- or multi-thumb range slider. Each focusable thumb is the actual
+ * `role="slider"` input, so pass `aria-label`/`aria-labelledby` describing what
+ * the slider controls (e.g. "Volume") to give every thumb an accessible name
+ * and satisfy `aria-input-field-name` (WCAG 4.1.2). Multi-thumb (range) sliders
+ * derive a unique per-thumb name by suffixing the label with its 1-based index.
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/slider.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A single- or multi-thumb range slider. Each focusable thumb is the actual
+ * `role="slider"` input, so pass `aria-label`/`aria-labelledby` describing what
+ * the slider controls (e.g. "Volume") to give every thumb an accessible name
+ * and satisfy `aria-input-field-name` (WCAG 4.1.2). Multi-thumb (range) sliders
+ * derive a unique per-thumb name by suffixing the label with its 1-based index.
+ */
+export const Slider = forwardRef(({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) => {
+    const provided = props.value ?? props.defaultValue;
+    const values = provided?.length ? provided : [props.min ?? 0];
+    // The thumb is the actual `role="slider"` input, so we name it explicitly to
+    // satisfy `aria-input-field-name` (WCAG 4.1.2). The label props are pulled OUT
+    // of the spread: Radix's Root renders a role-less <span>, where `aria-label`
+    // would trip axe `aria-prohibited-attr` (serious, WCAG 4.1.2). For multi-thumb
+    // sliders each thumb gets an index suffix so the names stay unique.
+    const multipleThumbs = values.length > 1;
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, "data-slot": "slider", className: cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-overlay", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), values.map((_, index) => (_jsx(SliderPrimitive.Thumb
+            // biome-ignore lint/suspicious/noArrayIndexKey: thumb count is positional and stable
+            , { "aria-label": ariaLabel ? (multipleThumbs ? `${ariaLabel} (${index + 1})` : ariaLabel) : undefined, "aria-labelledby": ariaLabel ? undefined : ariaLabelledby, className: "block size-4 rounded-full border border-primary bg-surface-base shadow-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none" }, index)))] }));
+});
+Slider.displayName = "Slider";
+//# sourceMappingURL=slider.js.map

package/dist/components/sonner.d.ts

@@ -0,0 +1,9 @@
+import { Toaster as Sonner, toast } from "sonner";
+export interface ToasterProps extends React.ComponentProps<typeof Sonner> {
+}
+export declare const Toaster: {
+    ({ theme, ...props }: ToasterProps): import("react").JSX.Element;
+    displayName: string;
+};
+export { toast };
+//# sourceMappingURL=sonner.d.ts.map

package/dist/components/sonner.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useOptionalThemeMode } from "@cronus-ui/theme";
+import { Toaster as Sonner, toast } from "sonner";
+export const Toaster = ({ theme, ...props }) => {
+    const mode = useOptionalThemeMode();
+    const resolved = theme ?? (mode === "light" ? "light" : "dark");
+    return (_jsx("div", { "data-slot": "toaster", children: _jsx(Sonner, { theme: resolved, className: "toaster group", style: {
+                "--normal-bg": "var(--cronus-surface-floating)",
+                "--normal-text": "var(--cronus-fg)",
+                "--normal-border": "var(--cronus-border)",
+                "--border-radius": "var(--cronus-radius)",
+            }, ...props }) }));
+};
+Toaster.displayName = "Toaster";
+export { toast };
+//# sourceMappingURL=sonner.js.map

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface SparklesTextProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Number of sparkles around the text. Clamped to `2–12`.
+     * @default 4
+     */
+    count?: number;
+}
+/**
+ * Twinkling sparkles around a phrase. The text itself is unchanged and
+ * selectable; sparkles are decorative (`aria-hidden`) and suppressed under
+ * reduced motion.
+ */
+export declare function SparklesText({ ref, className, children, count, ...props }: SparklesTextProps): import("react").JSX.Element;
+export declare namespace SparklesText {
+    var displayName: string;
+}
+//# sourceMappingURL=sparkles-text.d.ts.map

package/dist/components/sparkles-text.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const SPARKLE_KEYFRAMES = "@keyframes cronus-sparkle{0%,100%{transform:scale(0);opacity:0}40%{transform:scale(1);opacity:1}70%{transform:scale(0.6);opacity:0.6}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+const SLOTS = [
+    { top: "0%", start: "8%" },
+    { top: "10%", start: "88%" },
+    { top: "85%", start: "18%" },
+    { top: "78%", start: "78%" },
+    { top: "-8%", start: "48%" },
+    { top: "50%", start: "-6%" },
+    { top: "52%", start: "96%" },
+    { top: "100%", start: "52%" },
+];
+/**
+ * Twinkling sparkles around a phrase. The text itself is unchanged and
+ * selectable; sparkles are decorative (`aria-hidden`) and suppressed under
+ * reduced motion.
+ */
+export function SparklesText({ ref, className, children, count = 4, ...props }) {
+    const sparkleCount = Math.min(8, Math.max(2, Math.round(finiteOr(count, 4))));
+    return (_jsxs("span", { ref: ref, "data-slot": "sparkles-text", className: cn("relative inline-block", className), ...props, children: [_jsx("style", { children: SPARKLE_KEYFRAMES }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-visible motion-reduce:hidden", children: Array.from({ length: sparkleCount }, (_, index) => {
+                    const slot = SLOTS[index % SLOTS.length] ?? SLOTS[0];
+                    const sparkleStyle = {
+                        top: slot?.top,
+                        insetInlineStart: slot?.start,
+                        "--sparkle-delay": `${(index * 0.35) % 1.6}s`,
+                        "--sparkle-duration": `${1.4 + (index % 3) * 0.25}s`,
+                    };
+                    return (_jsx("span", { className: "absolute size-2 text-primary [animation-delay:var(--sparkle-delay)] [animation-duration:var(--sparkle-duration)] [animation-iteration-count:infinite] [animation-name:cronus-sparkle]", style: sparkleStyle, children: _jsx("svg", { viewBox: "0 0 16 16", className: "size-full fill-current", "aria-hidden": "true", children: _jsx("path", { d: "M8 0 L9.2 6.8 L16 8 L9.2 9.2 L8 16 L6.8 9.2 L0 8 L6.8 6.8 Z" }) }) }, index));
+                }) }), _jsx("span", { className: "relative", children: children })] }));
+}
+SparklesText.displayName = "SparklesText";
+//# sourceMappingURL=sparkles-text.js.map

package/dist/components/sparkline.d.ts

@@ -0,0 +1,22 @@
+import { type SVGAttributes } from "react";
+type SparklineTone = "primary" | "success" | "warning" | "error" | "info" | "fg";
+type SparklineType = "line" | "bar";
+export interface SparklineProps extends Omit<SVGAttributes<SVGSVGElement>, "type"> {
+    /** The series to plot. Order is preserved; values map left→right. */
+    data: number[];
+    /** Intrinsic width of the SVG in px. */
+    width?: number;
+    /** Intrinsic height of the SVG in px. */
+    height?: number;
+    /** Render a connected line or evenly spaced bars. */
+    type?: SparklineType;
+    /** Color, mapped to a token via `currentColor`. */
+    tone?: SparklineTone;
+    /** For `type="line"`, fill a soft token-tinted gradient under the line. */
+    area?: boolean;
+    /** Stroke width of the line (line type only). */
+    strokeWidth?: number;
+}
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/components/sparkline.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+// Token-driven tone classes. Each sets `currentColor` via a Tailwind `text-*`
+// utility (mapped to a `--cronus-*` var), so the SVG strokes/fills inherit the
+// themed color through `stroke="currentColor"` / `fill="currentColor"`.
+const toneStyles = {
+    primary: "text-primary",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-error",
+    info: "text-info",
+    fg: "text-fg",
+};
+/**
+ * Keep only finite numbers so a `NaN`/`Infinity` in the series cannot produce
+ * `NaN` SVG coordinates (which silently break the whole path).
+ */
+function sanitize(data) {
+    return data.filter((value) => Number.isFinite(value));
+}
+/**
+ * Scale a value to a Y coordinate inside the box. SVG Y grows downward, so the
+ * max sits at `pad` (top) and the min at `height - pad` (bottom). When every
+ * value is equal (`min === max`) the line collapses to a flat midline instead
+ * of dividing by zero.
+ */
+function scaleY(value, min, max, height, pad) {
+    const span = max - min;
+    const usable = height - pad * 2;
+    if (span === 0) {
+        return height / 2;
+    }
+    return pad + (1 - (value - min) / span) * usable;
+}
+export const Sparkline = forwardRef(({ className, data, width = 96, height = 28, type = "line", tone = "primary", area = false, strokeWidth = 1.5, "aria-label": ariaLabel, ...props }, ref) => {
+    const points = sanitize(data);
+    const count = points.length;
+    const gradientId = useId();
+    // Default summary keeps assistive tech informed without exposing the raw
+    // series; callers can override with a richer `aria-label`.
+    const label = ariaLabel ?? `Trend, ${count} ${count === 1 ? "point" : "points"}`;
+    // Inset the geometry so a thick stroke / rounded bar cap is not clipped at
+    // the box edge.
+    const pad = Math.max(strokeWidth, 1);
+    const min = count > 0 ? Math.min(...points) : 0;
+    const max = count > 0 ? Math.max(...points) : 0;
+    const rootProps = {
+        ref,
+        "data-slot": "sparkline",
+        "data-tone": tone,
+        role: "img",
+        "aria-label": label,
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        preserveAspectRatio: "none",
+        fill: "none",
+        className: cn("inline-block overflow-visible align-middle", toneStyles[tone], className),
+        ...props,
+    };
+    if (type === "bar") {
+        // Evenly spaced bars with a small gap; each bar height is scaled to the
+        // box. A flat series renders thin baseline ticks so the slot stays legible.
+        const span = max - min;
+        const slot = count > 0 ? width / count : width;
+        const gap = Math.min(slot * 0.3, 4);
+        const barWidth = Math.max(slot - gap, 0.5);
+        const radius = Math.min(barWidth / 2, 2);
+        const usable = height - pad * 2;
+        return (_jsxs("svg", { ...rootProps, children: [_jsx("title", { children: label }), _jsx("g", { fill: "currentColor", children: points.map((value, index) => {
+                        const ratio = span === 0 ? 0 : (value - min) / span;
+                        // Floor at 1px so even the smallest value stays visible.
+                        const barHeight = Math.max(ratio * usable, 1);
+                        const x = index * slot + gap / 2;
+                        const y = height - pad - barHeight;
+                        return (_jsx("rect", { "data-slot": "sparkline-bar", x: x, y: y, width: barWidth, height: barHeight, rx: radius }, index));
+                    }) })] }));
+    }
+    // Line: map each value to a point. A single point renders a flat midline
+    // segment so the component never collapses to nothing.
+    const step = count > 1 ? (width - pad * 2) / (count - 1) : 0;
+    const coords = points.map((value, index) => {
+        const x = count > 1 ? pad + index * step : width / 2;
+        const y = scaleY(value, min, max, height, pad);
+        return [x, y];
+    });
+    const linePath = coords.length === 1
+        ? // Draw a short horizontal stub centered on the lone point.
+            `M ${pad} ${coords[0]?.[1]} L ${width - pad} ${coords[0]?.[1]}`
+        : coords.map(([x, y], index) => `${index === 0 ? "M" : "L"} ${x} ${y}`).join(" ");
+    // Close the path down to the baseline and back for the area fill.
+    const baseline = height - pad;
+    const areaPath = coords.length === 1
+        ? `M ${pad} ${coords[0]?.[1]} L ${width - pad} ${coords[0]?.[1]} L ${width - pad} ${baseline} L ${pad} ${baseline} Z`
+        : `${linePath} L ${coords.at(-1)?.[0]} ${baseline} L ${coords[0]?.[0]} ${baseline} Z`;
+    return (_jsxs("svg", { ...rootProps, children: [_jsx("title", { children: label }), _jsxs("g", { children: [count > 0 && area && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "color-mix(in oklch, currentColor 18%, transparent)" }), _jsx("stop", { offset: "100%", stopColor: "color-mix(in oklch, currentColor 0%, transparent)" })] }) }), _jsx("path", { "data-slot": "sparkline-area", d: areaPath, fill: `url(#${gradientId})` })] })), count > 0 && (_jsx("path", { "data-slot": "sparkline-line", d: linePath, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }))] })] }));
+});
+Sparkline.displayName = "Sparkline";
+//# sourceMappingURL=sparkline.js.map

package/dist/components/spinner.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import { type SVGAttributes } from "react";
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<SVGSVGElement>>;
+export { spinnerVariants };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const spinnerVariants = cva("animate-spin text-current", {
+    variants: {
+        size: {
+            sm: "size-4",
+            md: "size-5",
+            lg: "size-6",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+export const Spinner = forwardRef(({ className, size, "aria-label": ariaLabel = "Loading", ...props }, ref) => {
+    return (_jsxs("svg", { ref: ref, "data-slot": "spinner", role: "status", "aria-label": ariaLabel, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn(spinnerVariants({ size }), className), ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", className: "opacity-25" }), _jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "opacity-90" })] }));
+});
+Spinner.displayName = "Spinner";
+export { spinnerVariants };
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface SpinningTextProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    ref?: Ref<HTMLDivElement>;
+    /** The phrase laid out around the circle. */
+    children: string;
+    /**
+     * Radius of the circle, in pixels.
+     * @default 48
+     */
+    radius?: number;
+    /**
+     * Seconds for one full revolution.
+     * @default 16
+     */
+    duration?: number;
+    /** Spin counter-clockwise. @default false */
+    reverse?: boolean;
+}
+/**
+ * Lays a phrase around a circle and slowly rotates it. Assistive tech reads
+ * the original string once (`sr-only`); the orbiting letters are
+ * `aria-hidden`. Reduced-motion visitors still see the circle, it just does
+ * not spin.
+ */
+export declare function SpinningText({ ref, className, children, radius, duration, reverse, style, ...props }: SpinningTextProps): import("react").JSX.Element;
+export declare namespace SpinningText {
+    var displayName: string;
+}
+//# sourceMappingURL=spinning-text.d.ts.map

package/dist/components/spinning-text.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const SPIN_KEYFRAMES = "@keyframes cronus-spinning-text{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+function segmentGraphemes(text) {
+    if (graphemeSegmenter) {
+        return Array.from(graphemeSegmenter.segment(text), (segment) => segment.segment);
+    }
+    return Array.from(text);
+}
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * Lays a phrase around a circle and slowly rotates it. Assistive tech reads
+ * the original string once (`sr-only`); the orbiting letters are
+ * `aria-hidden`. Reduced-motion visitors still see the circle, it just does
+ * not spin.
+ */
+export function SpinningText({ ref, className, children, radius = 48, duration = 16, reverse = false, style, ...props }) {
+    const glyphs = segmentGraphemes(children);
+    const r = Math.max(12, finiteOr(radius, 48));
+    const cycle = Math.max(2, finiteOr(duration, 16));
+    const spinStyle = {
+        "--spin-duration": `${cycle}s`,
+        "--spin-radius": `${r}px`,
+        width: r * 2,
+        height: r * 2,
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "spinning-text", className: cn("relative inline-grid place-items-center", className), style: { ...spinStyle, ...style }, ...props, children: [_jsx("span", { className: "sr-only", children: children }), _jsx("style", { children: SPIN_KEYFRAMES }), _jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 [animation-duration:var(--spin-duration)] [animation-iteration-count:infinite] [animation-name:cronus-spinning-text] [animation-timing-function:linear] motion-reduce:[animation-name:none]", reverse && "[animation-direction:reverse]"), children: glyphs.map((glyph, index) => {
+                    const angle = glyphs.length === 0 ? 0 : (index / glyphs.length) * 360;
+                    return (_jsx("span", { className: "absolute start-1/2 top-1/2 origin-[0_0] text-xs font-medium uppercase tracking-widest text-fg-secondary", style: {
+                            transform: `rotate(${angle}deg) translateY(calc(var(--spin-radius) * -1))`,
+                        }, children: glyph === " " ? "\u00a0" : glyph }, `${glyph}-${index}`));
+                }) })] }));
+}
+SpinningText.displayName = "SpinningText";
+//# sourceMappingURL=spinning-text.js.map

package/dist/components/split-button.d.ts

@@ -0,0 +1,71 @@
+import type { VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from "react";
+import { type buttonVariants } from "./button.js";
+/** A single secondary action rendered inside the split button's dropdown menu. */
+export interface SplitButtonItem {
+    /** Stable identity for the row; falls back to the array index when omitted. */
+    id?: string;
+    /** Visible menu label. */
+    label: ReactNode;
+    /** Optional leading icon (a `lucide-react` element is auto-sized to 16px). */
+    icon?: ReactNode;
+    /** Invoked when the row is chosen (click, Enter, or Space). */
+    onSelect?: () => void;
+    /** Paints the row in the destructive/error tone (e.g. Delete). */
+    destructive?: boolean;
+    /** Disables the row — it becomes unfocusable and dimmed. */
+    disabled?: boolean;
+}
+type SplitButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type SplitButtonSize = "sm" | "md" | "lg";
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** The primary action's label. */
+    children: ReactNode;
+    /** Fires when the primary (left) segment is clicked. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Optional leading icon for the primary segment (replaced by a spinner while `loading`). */
+    icon?: ReactNode;
+    /** Declarative secondary actions. Ignored when a custom `menu` slot is supplied. */
+    items?: SplitButtonItem[];
+    /**
+     * Escape hatch for fully custom menu content (compose `DropdownMenuItem`,
+     * `DropdownMenuSeparator`, `DropdownMenuLabel`, …). Takes precedence over `items`.
+     */
+    menu?: ReactNode;
+    /** Visual style, shared by both segments — mirrors `Button`'s variants. */
+    variant?: SplitButtonVariant;
+    /** Control height/density, shared by both segments. */
+    size?: SplitButtonSize;
+    /** Disables both segments. */
+    disabled?: boolean;
+    /** Shows a spinner in the primary segment and disables the control. */
+    loading?: boolean;
+    /** Accessible name for the icon-only menu trigger. */
+    menuLabel?: string;
+    /** Horizontal alignment of the menu relative to the trigger. */
+    align?: "start" | "center" | "end";
+    /** Gap in px between the trigger and the opened menu. */
+    sideOffset?: number;
+    /** Class applied to the dropdown menu surface. */
+    contentClassName?: string;
+    /** Uncontrolled initial open state of the menu. */
+    defaultOpen?: boolean;
+    /** Controlled open state of the menu. */
+    open?: boolean;
+    /** Notified whenever the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A split button: a primary action fused to a smaller menu trigger inside one
+ * seamless segmented control. The menu is a Radix dropdown (proper roving-tabindex
+ * keyboard nav, type-ahead, focus return, and portal), so the whole control is
+ * keyboard-operable — Tab reaches each segment, Enter/Space fire the primary, and
+ * ArrowDown/Enter open the menu. The two segments share `Button`'s variants/sizes;
+ * inner corners and borders are collapsed and a single hairline seam is drawn with
+ * `currentColor`, so the fusion reads cleanly across every variant. The chevron's
+ * flip is CSS-only and is disabled under `prefers-reduced-motion: reduce`; there
+ * are no timers or animation frames to clean up.
+ */
+export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=split-button.d.ts.map

package/dist/components/split-button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Spinner } from "./spinner.js";
+/**
+ * A split button: a primary action fused to a smaller menu trigger inside one
+ * seamless segmented control. The menu is a Radix dropdown (proper roving-tabindex
+ * keyboard nav, type-ahead, focus return, and portal), so the whole control is
+ * keyboard-operable — Tab reaches each segment, Enter/Space fire the primary, and
+ * ArrowDown/Enter open the menu. The two segments share `Button`'s variants/sizes;
+ * inner corners and borders are collapsed and a single hairline seam is drawn with
+ * `currentColor`, so the fusion reads cleanly across every variant. The chevron's
+ * flip is CSS-only and is disabled under `prefers-reduced-motion: reduce`; there
+ * are no timers or animation frames to clean up.
+ */
+export const SplitButton = forwardRef(({ className, children, onClick, icon, items, menu, variant = "primary", size = "md", disabled = false, loading = false, menuLabel = "More actions", align = "end", sideOffset = 6, contentClassName, defaultOpen, open, onOpenChange, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "split-button", "data-variant": variant, className: cn("isolate inline-flex items-stretch", className), ...props, children: [_jsxs(Button, { type: "button", variant: variant, size: size, disabled: isDisabled, onClick: onClick, className: "relative rounded-r-none border-r-0 focus-visible:z-10", children: [loading ? _jsx(Spinner, { size: "sm", "aria-hidden": true }) : icon, children] }), _jsxs(DropdownMenu, { defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: variant, size: size, disabled: isDisabled, "aria-label": menuLabel, className: cn("relative aspect-square rounded-l-none border-l-0 px-0 focus-visible:z-10", 
+                            // hairline seam between the two segments (currentColor, tint-agnostic)
+                            "before:pointer-events-none before:absolute before:inset-y-2 before:left-0 before:w-px before:bg-current/15 before:content-['']", 
+                            // chevron flips open; motion-reduce keeps it static
+                            "[&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-[var(--ease-out-quart)] data-[state=open]:[&>svg]:rotate-180 motion-reduce:[&>svg]:transition-none"), children: _jsx(ChevronDown, { "aria-hidden": true }) }) }), _jsx(DropdownMenuContent, { align: align, sideOffset: sideOffset, className: cn("min-w-[10rem]", contentClassName), children: menu ??
+                            items?.map((item, index) => (_jsxs(DropdownMenuItem, { disabled: item.disabled, onSelect: item.onSelect, "data-destructive": item.destructive ? "" : undefined, className: cn(item.destructive &&
+                                    "text-error-strong focus:bg-error/10 focus:text-error-strong [&_svg]:text-error-strong"), children: [item.icon, item.label] }, item.id ?? index))) })] })] }));
+});
+SplitButton.displayName = "SplitButton";
+//# sourceMappingURL=split-button.js.map

package/dist/components/spotlight-card.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+/**
+ * A card with a pointer-following radial spotlight. The spotlight position is
+ * written straight to the DOM via CSS custom properties (`--spot-x` / `--spot-y`)
+ * inside a `requestAnimationFrame`, so moving the pointer never triggers a React
+ * re-render — the gradient is recomputed by the compositor, not by React. Hover
+ * opacity is toggled with a `data-` attribute (also CSS-driven). The whole effect
+ * is suppressed under `prefers-reduced-motion: reduce`.
+ */
+export declare const SpotlightCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=spotlight-card.d.ts.map

package/dist/components/spotlight-card.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A card with a pointer-following radial spotlight. The spotlight position is
+ * written straight to the DOM via CSS custom properties (`--spot-x` / `--spot-y`)
+ * inside a `requestAnimationFrame`, so moving the pointer never triggers a React
+ * re-render — the gradient is recomputed by the compositor, not by React. Hover
+ * opacity is toggled with a `data-` attribute (also CSS-driven). The whole effect
+ * is suppressed under `prefers-reduced-motion: reduce`.
+ */
+export const SpotlightCard = forwardRef(({ className, children, onMouseMove, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const localRef = useRef(null);
+    const frameRef = useRef(null);
+    const setRef = useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleMouseMove = useCallback((event) => {
+        const node = localRef.current;
+        if (node) {
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = null;
+                const current = localRef.current;
+                if (!current) {
+                    return;
+                }
+                const rect = current.getBoundingClientRect();
+                current.style.setProperty("--spot-x", `${clientX - rect.left}px`);
+                current.style.setProperty("--spot-y", `${clientY - rect.top}px`);
+            });
+        }
+        onMouseMove?.(event);
+    }, [onMouseMove]);
+    const handleMouseEnter = useCallback((event) => {
+        localRef.current?.setAttribute("data-spotlight-hovered", "true");
+        onMouseEnter?.(event);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((event) => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        localRef.current?.removeAttribute("data-spotlight-hovered");
+        onMouseLeave?.(event);
+    }, [onMouseLeave]);
+    return (_jsxs("div", { ref: setRef, "data-slot": "spotlight-card", className: cn("group relative overflow-hidden rounded-2xl border border-border bg-surface-raised p-6 text-fg", className), onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300 group-data-[spotlight-hovered]:opacity-100 motion-reduce:hidden motion-reduce:transition-none", style: {
+                    background: "radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklch, var(--cronus-primary) 14%, transparent), transparent 72%)",
+                } }), _jsx("div", { className: "relative", children: children })] }));
+});
+SpotlightCard.displayName = "SpotlightCard";
+//# sourceMappingURL=spotlight-card.js.map

package/dist/components/star-border.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface StarBorderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Seconds for one sparkle lap around the perimeter.
+     * @default 6
+     */
+    duration?: number;
+}
+/**
+ * Two sparkle heads that chase each other around a card's border. Distinct
+ * from `BorderBeam` (a comet trail): these are discrete twinkles, not a
+ * continuous beam. Decorative and hidden under reduced motion.
+ */
+export declare function StarBorder({ ref, className, children, duration, style, ...props }: StarBorderProps): import("react").JSX.Element;
+export declare namespace StarBorder {
+    var displayName: string;
+}
+//# sourceMappingURL=star-border.d.ts.map

package/dist/components/star-border.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const STAR_KEYFRAMES = "@keyframes cronus-star-border{from{offset-distance:0%}to{offset-distance:100%}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * Two sparkle heads that chase each other around a card's border. Distinct
+ * from `BorderBeam` (a comet trail): these are discrete twinkles, not a
+ * continuous beam. Decorative and hidden under reduced motion.
+ */
+export function StarBorder({ ref, className, children, duration = 6, style, ...props }) {
+    const cycle = Math.max(2, finiteOr(duration, 6));
+    const starStyle = { "--star-duration": `${cycle}s` };
+    return (_jsxs("div", { ref: ref, "data-slot": "star-border", className: cn("relative rounded-2xl", className), style: { ...starStyle, ...style }, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] motion-reduce:hidden", children: [_jsx("style", { children: STAR_KEYFRAMES }), [0, 50].map((phase) => (_jsx("span", { className: "absolute size-1.5 rounded-full bg-primary [animation-duration:var(--star-duration)] [animation-iteration-count:infinite] [animation-name:cronus-star-border] [animation-timing-function:linear] [offset-path:rect(0_auto_auto_0_round_12px)]", style: { animationDelay: `-${(phase / 100) * cycle}s` } }, phase)))] }), _jsx("div", { className: "relative", children: children })] }));
+}
+StarBorder.displayName = "StarBorder";
+//# sourceMappingURL=star-border.js.map