@cronus-ui/ui 0.6.0

package/dist/charts/y-domain-utils.js

@@ -0,0 +1,88 @@
+import { scaleLinear } from "@visx/scale";
+import { Y_DOMAIN_TWEEN_SKIP_THRESHOLD } from "./chart-phase.js";
+import { groupLinesByYAxisId, normalizeYAxisId } from "./y-axis-scales.js";
+/** Apply visx `nice()` to raw domain endpoints for stable grid ticks. */
+export function niceYDomain(domain) {
+    const scale = scaleLinear({ domain, range: [0, 1], nice: true });
+    const niceDomain = scale.domain();
+    return [niceDomain[0] ?? domain[0], niceDomain[1] ?? domain[1]];
+}
+/**
+ * Skip Y tween when both endpoints move less than the threshold relative to span.
+ * When in doubt callers should tween — beauty wins over micro-optimization.
+ */
+export function shouldTweenYDomain(from, to) {
+    const span = Math.max(Math.abs(to[1] - to[0]), Math.abs(from[1] - from[0]), 1);
+    const deltaMin = Math.abs(to[0] - from[0]) / span;
+    const deltaMax = Math.abs(to[1] - from[1]) / span;
+    return deltaMin >= Y_DOMAIN_TWEEN_SKIP_THRESHOLD || deltaMax >= Y_DOMAIN_TWEEN_SKIP_THRESHOLD;
+}
+/** Phases where the chart shows loading chrome (shimmer, pulse, label). */
+export function isLoadingChromePhase(phase) {
+    return phase === "loading" || phase === "revealingLoading";
+}
+/** Phases where grid lines use loading stroke styling (muted / dashed chrome). */
+export function isLoadingGridChromePhase(phase) {
+    return phase === "loading" || phase === "exiting" || phase === "gridTweenLoading";
+}
+/** Phases where Y-domain tween runs after the series has exited. */
+export function isYDomainTweenPhase(phase) {
+    return phase === "gridTweenLoading" || phase === "gridTweenReady";
+}
+/** Phases where {@link ReferenceArea} bands are shown (fade in/out on transitions). */
+export function isReferenceAreaVisiblePhase(phase) {
+    return phase === "ready" || phase === "revealing" || phase === "gridTweenReady";
+}
+export function resolveAnimatedYDestinationDomains(chartPhase, skeletonByAxis, targetByAxis) {
+    switch (chartPhase) {
+        case "loading":
+        case "exiting":
+        case "gridTweenLoading":
+            return skeletonByAxis;
+        case "exitingReady":
+        case "gridTweenReady":
+        case "revealing":
+        case "ready":
+            return targetByAxis;
+        default:
+            return targetByAxis;
+    }
+}
+export function computeYDomainsByAxis({ lines, resolveDomain, }) {
+    const groups = groupLinesByYAxisId(lines);
+    const domains = {};
+    for (const [axisId, axisLines] of groups) {
+        const dataKeys = axisLines.map((line) => line.dataKey);
+        domains[normalizeYAxisId(axisId)] = niceYDomain(resolveDomain(dataKeys));
+    }
+    if (!domains.left) {
+        domains.left = niceYDomain([0, 100]);
+    }
+    return domains;
+}
+/** Merge domain maps, normalizing axis ids to strings. */
+export function mergeYDomainRecords(...records) {
+    const merged = {};
+    for (const record of records) {
+        for (const [axisId, domain] of Object.entries(record)) {
+            merged[normalizeYAxisId(axisId)] = domain;
+        }
+    }
+    return merged;
+}
+export function domainsEqual(left, right) {
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length) {
+        return false;
+    }
+    for (const axisId of leftKeys) {
+        const from = left[axisId];
+        const to = right[axisId];
+        if (!(from && to) || from[0] !== to[0] || from[1] !== to[1]) {
+            return false;
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=y-domain-utils.js.map

package/dist/components/accordion.d.ts

@@ -0,0 +1,6 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+export declare const Accordion: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Accordion = AccordionPrimitive.Root;
+export const AccordionItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AccordionPrimitive.Item, { ref: ref, "data-slot": "accordion-item", className: cn("border-b border-border", className), ...props }));
+});
+AccordionItem.displayName = "AccordionItem";
+export const AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, "data-slot": "accordion-trigger", className: cn("flex flex-1 items-center justify-between gap-4 py-4 text-sm font-medium text-fg outline-none transition-all hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset rounded-md disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDown, { className: "size-4 shrink-0 text-fg-tertiary transition-transform duration-200" })] }) }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+export const AccordionContent = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx(AccordionPrimitive.Content, { ref: ref, "data-slot": "accordion-content", className: cn("overflow-hidden text-sm text-fg-secondary data-[state=open]:animate-[cronus-accordion-down_220ms_var(--ease-out-quart)] data-[state=closed]:animate-[cronus-accordion-up_180ms_var(--ease-out-quart)]", className), ...props, children: _jsx("div", { className: "pb-4 pt-0", children: children }) }));
+});
+AccordionContent.displayName = "AccordionContent";
+//# sourceMappingURL=accordion.js.map

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

@@ -0,0 +1,18 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type HTMLAttributes } from "react";
+export declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;
+export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const AlertDialogFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+export const AlertDialog = AlertDialogPrimitive.Root;
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AlertDialogPrimitive.Overlay, { ref: ref, "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-[cronus-overlay-in_200ms_var(--ease-out-quart)] data-[state=closed]:animate-[cronus-overlay-out_160ms_var(--ease-out-quart)]", className), ...props }));
+});
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+export const AlertDialogContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, "data-slot": "alert-dialog-content", className: cn("fixed inset-0 z-50 m-auto grid h-fit w-full max-w-lg gap-4 rounded-xl border border-border bg-surface-floating p-6 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_200ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_160ms_var(--ease-out-quart)_both]", className), ...props })] }));
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+export const AlertDialogHeader = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-1.5 text-center sm:text-left", className), ...props }));
+};
+AlertDialogHeader.displayName = "AlertDialogHeader";
+export const AlertDialogFooter = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+};
+AlertDialogFooter.displayName = "AlertDialogFooter";
+export const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AlertDialogPrimitive.Title, { ref: ref, "data-slot": "alert-dialog-title", className: cn("font-display text-lg font-semibold text-fg", className), ...props }));
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+export const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AlertDialogPrimitive.Description, { ref: ref, "data-slot": "alert-dialog-description", className: cn("text-sm text-fg-secondary", className), ...props }));
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+export const AlertDialogAction = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AlertDialogPrimitive.Action, { ref: ref, "data-slot": "alert-dialog-action", className: cn(buttonVariants({ variant: "primary" }), className), ...props }));
+});
+AlertDialogAction.displayName = "AlertDialogAction";
+export const AlertDialogCancel = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, "data-slot": "alert-dialog-cancel", className: cn(buttonVariants({ variant: "outline" }), className), ...props }));
+});
+AlertDialogCancel.displayName = "AlertDialogCancel";
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+/**
+ * Inline callout / banner. NOT the modal alert-dialog.
+ *
+ * Layout follows the shadcn pattern: a CSS grid where an optional leading
+ * icon occupies the first column and the title/description stack in the
+ * second. When no icon is rendered the content spans the full width.
+ *
+ * Colour strategy: the body text stays on `fg`/`fg-secondary` (which already
+ * meet AA against every surface) while the semantic token only tints the
+ * surface wash, the border and the icon. This keeps contrast safe across
+ * themes/modes without relying on low-chroma coloured body text.
+ */
+declare const alertVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { alertVariants };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Inline callout / banner. NOT the modal alert-dialog.
+ *
+ * Layout follows the shadcn pattern: a CSS grid where an optional leading
+ * icon occupies the first column and the title/description stack in the
+ * second. When no icon is rendered the content spans the full width.
+ *
+ * Colour strategy: the body text stays on `fg`/`fg-secondary` (which already
+ * meet AA against every surface) while the semantic token only tints the
+ * surface wash, the border and the icon. This keeps contrast safe across
+ * themes/modes without relying on low-chroma coloured body text.
+ */
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[--spacing(6)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-surface-overlay text-fg border-border [&>svg]:text-fg-secondary",
+            info: "bg-info/10 text-fg border-info/30 [&>svg]:text-info",
+            success: "bg-success/10 text-fg border-success/30 [&>svg]:text-success",
+            warning: "bg-warning/10 text-fg border-warning/30 [&>svg]:text-warning",
+            // `destructive` keeps the conventional shadcn name but maps to the
+            // Cronus `error` token (mirrors button.tsx's destructive variant).
+            destructive: "bg-error/10 text-fg border-error/30 [&>svg]:text-error",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+export const Alert = forwardRef(({ className, variant, role, ...props }, ref) => {
+    // Urgent variants announce assertively; informational ones are polite.
+    const resolvedRole = role ?? (variant === "destructive" ? "alert" : "status");
+    return (_jsx("div", { ref: ref, "data-slot": "alert", role: resolvedRole, className: cn(alertVariants({ variant }), className), ...props }));
+});
+Alert.displayName = "Alert";
+export const AlertTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium text-fg", className), ...props }));
+});
+AlertTitle.displayName = "AlertTitle";
+export const AlertDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-fg-secondary [&_p]:leading-relaxed", className), ...props }));
+});
+AlertDescription.displayName = "AlertDescription";
+export { alertVariants };
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1,5 @@
+import { type ButtonProps } from "./button.js";
+export interface AnimatedButtonProps extends ButtonProps {
+}
+export declare const AnimatedButton: import("react").ForwardRefExoticComponent<AnimatedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=animated-button.d.ts.map

package/dist/components/animated-button.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+import { springSnappy } from "./motion-presets.js";
+export const AnimatedButton = forwardRef(({ className, variant, size, type, 
+// drop asChild — not supported here
+asChild: _asChild, 
+// omit handlers that clash with motion's prop signatures
+onDrag, onDragStart, onDragEnd, onAnimationStart, ...props }, ref) => {
+    return (_jsx(motion.button, { ref: ref, "data-slot": "animated-button", type: type ?? "button", whileHover: { y: -1 }, whileTap: { scale: 0.97 }, transition: springSnappy, className: cn(buttonVariants({ variant, size }), className), ...props }));
+});
+AnimatedButton.displayName = "AnimatedButton";
+//# sourceMappingURL=animated-button.js.map

package/dist/components/animated-list.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface AnimatedListProps extends HTMLAttributes<HTMLUListElement> {
+    ref?: Ref<HTMLUListElement>;
+    /**
+     * Seconds between consecutive item reveals.
+     * @default 0.08
+     */
+    stagger?: number;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"user"` (items
+     * appear without the stagger). `"never"` always animates.
+     * @default "user"
+     */
+    reducedMotion?: "user" | "always" | "never";
+}
+/**
+ * Staggers its children in with a short rise + fade. Renders a `<ul>` and
+ * wraps each child in an `<li>` — pass the item body (not an `<li>`), with a
+ * stable `key`. Reduced-motion visitors get the items fully visible on first
+ * paint.
+ */
+export declare function AnimatedList({ ref, className, children, stagger, reducedMotion, ...props }: AnimatedListProps): import("react").JSX.Element;
+export declare namespace AnimatedList {
+    var displayName: string;
+}
+//# sourceMappingURL=animated-list.d.ts.map

package/dist/components/animated-list.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Children, isValidElement } from "react";
+import { cn } from "../lib/cn.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * Staggers its children in with a short rise + fade. Renders a `<ul>` and
+ * wraps each child in an `<li>` — pass the item body (not an `<li>`), with a
+ * stable `key`. Reduced-motion visitors get the items fully visible on first
+ * paint.
+ */
+export function AnimatedList({ ref, className, children, stagger = 0.08, reducedMotion = "user", ...props }) {
+    const systemReduced = useReducedMotion();
+    const reduce = reducedMotion === "never" ? false : reducedMotion === "always" ? true : !!systemReduced;
+    const delay = Math.max(0, finiteOr(stagger, 0.08));
+    const items = Children.toArray(children).filter(isValidElement);
+    return (_jsx("ul", { ref: ref, "data-slot": "animated-list", className: cn("flex flex-col gap-2", className), ...props, children: _jsx(AnimatePresence, { initial: !reduce, children: items.map((child, index) => (_jsx(motion.li, { "data-slot": "animated-list-item", initial: reduce ? false : { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: reduce ? undefined : { opacity: 0, y: -8 }, transition: reduce
+                    ? { duration: 0 }
+                    : { delay: index * delay, duration: 0.35, ease: [0.22, 1, 0.36, 1] }, children: child }, child.key ?? index))) }) }));
+}
+AnimatedList.displayName = "AnimatedList";
+//# sourceMappingURL=animated-list.js.map

package/dist/components/animated-number.d.ts

@@ -0,0 +1,67 @@
+import { motion } from "motion/react";
+/** Subset of motion's spring transition we expose; `duration` is in seconds. */
+export interface AnimatedNumberSpring {
+    bounce?: number;
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export interface AnimatedNumberProps extends Omit<React.ComponentPropsWithoutRef<typeof motion.span>, "children"> {
+    /** Target value. Whenever it changes, the number tweens from its current displayed value to here. */
+    value: number;
+    /**
+     * Custom formatter for the displayed string. When omitted, the value is
+     * formatted with `Intl.NumberFormat(locale, formatOptions)`.
+     */
+    format?: (n: number) => string;
+    /** Locale passed to the default `Intl.NumberFormat` formatter (ignored if `format` is set). */
+    locale?: string;
+    /** Options passed to the default `Intl.NumberFormat` formatter (ignored if `format` is set). */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Tween length in seconds. Defaults to ~0.8s; overrides the spring's natural duration. */
+    duration?: number;
+    /** Override the settle spring (advanced — defaults to the Cronus count spring). */
+    spring?: AnimatedNumberSpring;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"user"` (snap for
+     * users who opt out). Pass `"never"` to always animate the count — e.g. a
+     * showcase that must demonstrate it — or `"always"` to force the snap.
+     */
+    reducedMotion?: "user" | "always" | "never";
+    /**
+     * Announce the **settled** value to screen readers via a visually-hidden
+     * `aria-live="polite"` sibling. Defaults to `false`. Only the final value
+     * (once the tween completes / snaps) is announced — never the ~97
+     * interpolated frames — so opting in stays quiet.
+     */
+    announce?: boolean;
+}
+/**
+ * Smoothly tweens (counts up/down) from its previously displayed value to the
+ * new `value` whenever `value` changes — ideal for dashboards, balances,
+ * pricing and KPIs. It pairs naturally with `Metric` / `MetricValue`.
+ *
+ * How it works: an internal motion value is `animate`d toward each new target
+ * with a spring (or a fixed `duration`). On every frame the latest number is
+ * formatted (custom `format`, else `Intl.NumberFormat`) and written straight to
+ * the span's `textContent`, so updates never trigger React re-renders. The span
+ * uses `tabular-nums` so digit width stays fixed and the value does not jitter
+ * as it climbs.
+ *
+ * Color is inherited — the component never hardcodes one, so consumers control
+ * it via `className` (e.g. `text-fg`, `text-success`) or a parent.
+ *
+ * SSR-safe & no flash: the first render already shows the formatted initial
+ * value (never `0` or `NaN`), and the component starts *at* that value — it only
+ * animates on subsequent `value` changes, not on mount.
+ *
+ * Reduced motion: when `prefers-reduced-motion` is set, the number snaps
+ * directly to each new `value` (still fully formatted) with no tween.
+ *
+ * Accessibility: the high-frequency live text is not announced by default to
+ * avoid noisy screen-reader chatter (it would read ~97 interpolated frames).
+ * Pass `announce` to opt into a single, polite announcement of the *settled*
+ * value via a dedicated visually-hidden `aria-live` sibling.
+ */
+export declare const AnimatedNumber: import("react").ForwardRefExoticComponent<AnimatedNumberProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=animated-number.d.ts.map

package/dist/components/animated-number.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate, motion, useMotionValue, useReducedMotion, } from "motion/react";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Spring used to tween between values. A gentle bounce makes the count read as
+ * a physical settle rather than a linear ramp. Overridable via the `spring`
+ * prop; when a `duration` is given it takes precedence (spring stiffness/damping
+ * are ignored and motion derives them to hit the target duration).
+ */
+const ANIMATED_NUMBER_SPRING = {
+    type: "spring",
+    bounce: 0.18,
+};
+/**
+ * Smoothly tweens (counts up/down) from its previously displayed value to the
+ * new `value` whenever `value` changes — ideal for dashboards, balances,
+ * pricing and KPIs. It pairs naturally with `Metric` / `MetricValue`.
+ *
+ * How it works: an internal motion value is `animate`d toward each new target
+ * with a spring (or a fixed `duration`). On every frame the latest number is
+ * formatted (custom `format`, else `Intl.NumberFormat`) and written straight to
+ * the span's `textContent`, so updates never trigger React re-renders. The span
+ * uses `tabular-nums` so digit width stays fixed and the value does not jitter
+ * as it climbs.
+ *
+ * Color is inherited — the component never hardcodes one, so consumers control
+ * it via `className` (e.g. `text-fg`, `text-success`) or a parent.
+ *
+ * SSR-safe & no flash: the first render already shows the formatted initial
+ * value (never `0` or `NaN`), and the component starts *at* that value — it only
+ * animates on subsequent `value` changes, not on mount.
+ *
+ * Reduced motion: when `prefers-reduced-motion` is set, the number snaps
+ * directly to each new `value` (still fully formatted) with no tween.
+ *
+ * Accessibility: the high-frequency live text is not announced by default to
+ * avoid noisy screen-reader chatter (it would read ~97 interpolated frames).
+ * Pass `announce` to opt into a single, polite announcement of the *settled*
+ * value via a dedicated visually-hidden `aria-live` sibling.
+ */
+export const AnimatedNumber = forwardRef(({ value, format, locale, formatOptions, duration = 0.8, spring, reducedMotion = "user", announce = false, className, style, ...props }, forwardedRef) => {
+    // Sanitize once: a non-finite/undefined `value` would (a) make
+    // `motionValue.get() !== value` forever true (NaN !== NaN) — an
+    // unsettleable spring that re-fires every frame — and (b) render literal
+    // "NaN"/"∞", breaking the "never 0 or NaN" promise above.
+    const safe = Number.isFinite(value) ? value : 0;
+    const systemReducedMotion = useReducedMotion();
+    const shouldReduceMotion = reducedMotion === "never" ? false : reducedMotion === "always" ? true : systemReducedMotion;
+    const motionValue = useMotionValue(safe);
+    const spanRef = useRef(null);
+    // The animated digits live in their own node so the per-frame textContent
+    // writes never wipe the sibling `announce` region.
+    const valueRef = useRef(null);
+    const announceRef = useRef(null);
+    // Format helper. The default Intl formatter is created lazily per call so
+    // that prop changes (locale/options) are always reflected without effects.
+    const formatRef = useRef(() => "");
+    formatRef.current = (n) => {
+        if (format)
+            return format(n);
+        return new Intl.NumberFormat(locale, formatOptions).format(n);
+    };
+    const setRefs = (node) => {
+        spanRef.current = node;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    };
+    // Memoize the transition on PRIMITIVE fields so an inline `spring={{...}}`
+    // (a fresh object every parent render) does not re-run the animate effect,
+    // stop()+restart the tween and reset its clock so it never settles. Keying
+    // on the `spring` object identity is the exact churn this memo exists to
+    // avoid, hence the suppression below.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — keyed on spring's primitive fields, not its (unstable) object identity.
+    const transition = useMemo(() => ({ ...ANIMATED_NUMBER_SPRING, ...spring, duration }), [spring?.bounce, spring?.stiffness, spring?.damping, spring?.mass, duration]);
+    // Re-sync the React-committed text child to the LIVE motion value before
+    // paint. The JSX child renders the *target* every commit; when a formatting
+    // prop (locale/options) changes mid-tween React would win for one painted
+    // frame and flash the final value. Overwrite it with the in-flight value.
+    // No dependency array on purpose: it must run after every commit.
+    useLayoutEffect(() => {
+        if (valueRef.current) {
+            valueRef.current.textContent = formatRef.current(motionValue.get());
+        }
+    });
+    // Write the formatted current value straight to the DOM on every frame —
+    // no React re-render per tick.
+    useEffect(() => {
+        const write = (n) => {
+            if (valueRef.current) {
+                valueRef.current.textContent = formatRef.current(n);
+            }
+        };
+        write(motionValue.get());
+        const unsubscribe = motionValue.on("change", write);
+        return unsubscribe;
+    }, [motionValue]);
+    // Animate toward each new target. On mount this is a no-op (motionValue
+    // already equals the initial value). Reduced motion snaps with no tween.
+    useEffect(() => {
+        if (shouldReduceMotion) {
+            motionValue.set(safe);
+            if (announceRef.current) {
+                announceRef.current.textContent = formatRef.current(safe);
+            }
+            return;
+        }
+        let controls;
+        if (motionValue.get() !== safe) {
+            controls = animate(motionValue, safe, transition);
+            // Announce only the settled value once the tween completes. Guard so a
+            // stop()/unmount rejection does not write a stale value.
+            controls
+                .then(() => {
+                if (announceRef.current) {
+                    announceRef.current.textContent = formatRef.current(safe);
+                }
+            })
+                .catch(() => { });
+        }
+        return () => controls?.stop();
+    }, [safe, transition, shouldReduceMotion, motionValue]);
+    return (_jsxs(motion.span, { ref: setRefs, "data-slot": "animated-number", className: cn("tabular-nums", className), style: style, ...props, children: [_jsx("span", { ref: valueRef, children: formatRef.current(safe) }), announce ? (_jsx("span", { ref: announceRef, className: "sr-only", "aria-live": "polite", role: "status" })) : null] }));
+});
+AnimatedNumber.displayName = "AnimatedNumber";
+//# sourceMappingURL=animated-number.js.map

package/dist/components/app-shell.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type SidebarProviderProps } from "./sidebar.js";
+export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The sidebar element. Pass a `<Sidebar>` (and its trigger/menus). Rendered
+     * as the first child of the provider so it sits beside the content region.
+     */
+    sidebar: ReactNode;
+    /**
+     * Optional topbar content rendered inside a sticky `<header role="banner">`
+     * at the top of the content region. Omit for a header-less shell.
+     */
+    header?: ReactNode;
+    /** Props forwarded to the underlying `SidebarProvider`. */
+    providerProps?: Omit<SidebarProviderProps, "children">;
+    /**
+     * When `true`, wraps the content region in `SidebarInset` for the rounded,
+     * inset surface that pairs with `variant="inset" | "floating"` sidebars.
+     */
+    inset?: boolean;
+    /** Extra classes for the content region wrapper. */
+    contentClassName?: string;
+    /** Extra classes for the sticky header. */
+    headerClassName?: string;
+}
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/app-shell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { SidebarInset, SidebarProvider } from "./sidebar.js";
+export const AppShell = forwardRef(({ sidebar, header, providerProps, inset = false, className, contentClassName, headerClassName, children, ...props }, ref) => {
+    const body = (_jsxs(_Fragment, { children: [header != null && (_jsx("header", { "data-slot": "app-shell-header", 
+                // role="banner" is implicit for a top-level <header>; set explicitly
+                // because this header is nested inside layout wrappers.
+                className: cn("sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-surface-base/80 px-4 backdrop-blur-sm", headerClassName), children: header })), _jsx("div", { "data-slot": "app-shell-body", className: cn("flex min-h-0 flex-1 flex-col", contentClassName), children: children })] }));
+    // Pull className out of both prop sources and merge them explicitly so the
+    // provider's className spread can't clobber the AppShell's className (the
+    // original `{...props} {...providerProps}` order dropped it). providerProps
+    // keeps precedence over the rest props for any other overlapping keys.
+    const { className: providerClassName, ...restProviderProps } = providerProps ?? {};
+    return (_jsxs(SidebarProvider, { ref: ref, ...props, ...restProviderProps, className: cn(className, providerClassName), children: [sidebar, inset ? (_jsx(SidebarInset, { "data-slot": "app-shell-content", children: body })) : (_jsx("div", { "data-slot": "app-shell-content", className: "relative flex min-h-svh min-w-0 flex-1 flex-col bg-surface-base", children: body }))] }));
+});
+AppShell.displayName = "AppShell";
+//# sourceMappingURL=app-shell.js.map

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface AreaChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: Record<string, unknown>[];
+    /** Category / time field. @default "date" */
+    xKey?: string;
+    series: ChartSeries[];
+    formatValue?: (value: number, name: string) => string;
+}
+export declare function AreaChart({ data, xKey, series, formatValue, className, ...props }: AreaChartProps): import("react").JSX.Element;
+//# sourceMappingURL=area-chart.d.ts.map

package/dist/components/area-chart.js

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

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

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from "react";
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The desired width-to-height ratio, expressed as a number
+     * (e.g. `16 / 9`, `1`, `4 / 3`). Defaults to `16 / 9`.
+     */
+    ratio?: number;
+}
+/**
+ * Constrains its content to a fixed width-to-height ratio using the native
+ * CSS `aspect-ratio` property (no JavaScript measurement, no dependency).
+ * The wrapper fills the available width; children should stretch to fill it
+ * (e.g. an `<img className="h-full w-full object-cover" />`).
+ */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=aspect-ratio.d.ts.map