@cronus-ui/ui 0.6.0

package/dist/components/banner.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+/**
+ * Dismissible announcement / promo bar — a full-width horizontal strip pinned
+ * to the top of a page or section (the "Top Banner" of a billing SDK). Renders
+ * an optional leading icon, the message (a `title` + optional `description`, or
+ * free-form `children`), an optional right-aligned `action` (a CTA Button or
+ * link), and — when `dismissible` — a trailing close button.
+ *
+ * Colour strategy mirrors {@link Alert}: semantic variants tint the surface
+ * wash + border + icon while the body text stays on `fg`/`fg-secondary` (which
+ * meet AA against every surface), so contrast is safe across themes/modes
+ * without low-chroma coloured body text. The `brand` variant is the exception:
+ * it's a solid `bg-primary` promo fill carrying `primary-foreground` text, and
+ * everything inside (icon, action, close) inherits that foreground.
+ */
+const bannerVariants = cva("flex w-full items-center gap-x-3 gap-y-1 border-b px-4 py-2.5 text-sm [&>svg]:size-5 [&>svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-surface-overlay text-fg border-border [&>svg]:text-fg-secondary",
+            // Solid primary promo fill; icon/action/close inherit the foreground.
+            brand: "bg-primary text-primary-foreground border-transparent [&>svg]:text-primary-foreground",
+            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",
+            error: "bg-error/10 text-fg border-error/30 [&>svg]:text-error",
+        },
+        align: {
+            start: "text-left",
+            // Centre the message block; the action + close are still pinned to the
+            // far right via `ml-auto`, so "centre" balances the message in the gap.
+            center: "text-center",
+        },
+    },
+    defaultVariants: { variant: "default", align: "center" },
+});
+/**
+ * Collapse + fade used on dismiss. Honours `prefers-reduced-motion`: opted-out
+ * users get an instant unmount (the variant resolves to a no-op below).
+ */
+const COLLAPSE = {
+    initial: { opacity: 0, height: 0 },
+    animate: { opacity: 1, height: "auto" },
+    exit: { opacity: 0, height: 0 },
+};
+export const Banner = forwardRef(({ className, variant, align, title, description, icon, action, dismissible = true, onDismiss, open: openProp, defaultOpen = true, label = "Announcement", children, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : uncontrolledOpen;
+    const prefersReducedMotion = useReducedMotion();
+    const handleDismiss = useCallback(() => {
+        if (!isControlled) {
+            setUncontrolledOpen(false);
+        }
+        onDismiss?.();
+    }, [isControlled, onDismiss]);
+    // Brand fill wants action/close on the primary foreground; tinted variants
+    // keep the muted-foreground treatment from the shared Button styles.
+    const onBrand = variant === "brand";
+    return (_jsx(AnimatePresence, { initial: false, children: isOpen ? (_jsx(motion.div
+        // The collapse wrapper owns overflow so the height tween clips cleanly;
+        // the visual bar (border/padding/colour) lives on the inner element.
+        , { 
+            // The collapse wrapper owns overflow so the height tween clips cleanly;
+            // the visual bar (border/padding/colour) lives on the inner element.
+            initial: prefersReducedMotion ? false : COLLAPSE.initial, animate: prefersReducedMotion ? undefined : COLLAPSE.animate, exit: prefersReducedMotion ? undefined : COLLAPSE.exit, transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] }, className: "overflow-hidden", children: _jsxs("section", { ref: ref, "aria-label": label, "data-slot": "banner", className: cn(bannerVariants({ variant, align }), className), ...props, children: [icon, _jsxs("div", { "data-slot": "banner-content", className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-0.5", align === "center" && "justify-center"), children: [title ? (_jsx("span", { "data-slot": "banner-title", className: "font-medium", children: title })) : null, description ? (_jsx("span", { "data-slot": "banner-description", className: cn(onBrand ? "text-primary-foreground/85" : "text-fg-secondary"), children: description })) : null, children] }), action ? (_jsx("div", { "data-slot": "banner-action", className: "ml-auto flex shrink-0 items-center gap-2", children: action })) : null, dismissible ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Dismiss", "data-slot": "banner-dismiss", onClick: handleDismiss, className: cn("shrink-0", 
+                        // Without an `action`, the close button absorbs the auto margin
+                        // so it still sits flush right.
+                        !action && "ml-auto", onBrand &&
+                            "text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"), children: _jsx(X, { "aria-hidden": "true" }) })) : null] }) })) : null }));
+});
+Banner.displayName = "Banner";
+export { bannerVariants };
+//# sourceMappingURL=banner.js.map

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

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

package/dist/components/bar-chart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, CartesianGrid, BarChart as RechartsBarChart, XAxis } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function BarChart({ data, xKey = "month", series, stacked = false, formatValue, className, ...props }) {
+    const config = chartSeriesConfig(series);
+    return (_jsx("div", { "data-slot": "bar-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsBarChart, { accessibilityLayer: true, data: data, margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 12 }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: xKey }), content: _jsx(ChartTooltipContent, { formatValue: formatValue }) }), series.map((item) => (_jsx(Bar, { dataKey: item.key, fill: `var(--color-${item.key})`, radius: 4, stackId: stacked ? "stack" : undefined, animationDuration: 1100 }, item.key)))] }) }) }));
+}
+//# sourceMappingURL=bar-chart.js.map

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

@@ -0,0 +1,45 @@
+import { type HTMLAttributes } from "react";
+export interface BorderBeamProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Length of the luminous head, in pixels. Also sets the corner radius of the
+     * travel path so the beam rounds the corners smoothly. Larger values read as a
+     * longer comet trail. Defaults to `60`.
+     */
+    size?: number;
+    /** Seconds for one full lap around the perimeter. Defaults to `8` (a calm, premium drift). */
+    duration?: number;
+    /**
+     * Phase offset in seconds — the beam starts as if it had already been running
+     * for this long, so two beams on stacked cards can be staggered around the
+     * loop instead of moving in lockstep. Defaults to `0`.
+     */
+    delay?: number;
+    /** Colour of the leading edge of the beam. Defaults to `var(--cronus-fg)`. */
+    colorFrom?: string;
+    /** Colour the trail fades through before it dissolves. Defaults to transparent. */
+    colorTo?: string;
+    /** Thickness of the border band the beam rides in, in pixels. Defaults to `1` (hairline). */
+    borderWidth?: number;
+    /** Travel counter-clockwise instead of clockwise. Defaults to `false`. */
+    reverse?: boolean;
+}
+/**
+ * A single bright light head that continuously orbits the element's border, like
+ * a comet tracing the perimeter of a card or CTA. The head rides the border via
+ * CSS Motion Path (`offset-path`/`offset-distance`) and is clipped to a thin
+ * border band with a two-layer mask, so it reads as a beam *on* the border rather
+ * than a dot floating on the edge. This is distinct from the static
+ * `GradientBorder`: nothing is painted until the beam sweeps past, giving a live,
+ * premium shimmer.
+ *
+ * **Performance:** the whole effect is one composited CSS animation on
+ * `offset-distance` (hinted with `will-change`) — no JS, no timers, no re-renders;
+ * every knob (size, duration, delay, colours, thickness) rides a CSS variable.
+ *
+ * **Accessibility & motion:** the beam layer is purely decorative
+ * (`aria-hidden`), sits behind the content, and is fully suppressed under
+ * `prefers-reduced-motion: reduce` (`motion-reduce:hidden`) — it carries no
+ * information, so reduced-motion visitors simply see the card with no animation.
+ */
+export declare const BorderBeam: import("react").ForwardRefExoticComponent<BorderBeamProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=border-beam.d.ts.map

package/dist/components/border-beam.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+// Two-layer mask: layer 1 (clipped to padding-box) hides, layer 2 (clipped to
+// border-box) shows; `mask-composite: intersect` leaves only the border band, so
+// the comet is visible strictly along the perimeter and never over the content.
+const BEAM_MASK_IMAGE = "linear-gradient(transparent, transparent), linear-gradient(#000, #000)";
+/**
+ * A single bright light head that continuously orbits the element's border, like
+ * a comet tracing the perimeter of a card or CTA. The head rides the border via
+ * CSS Motion Path (`offset-path`/`offset-distance`) and is clipped to a thin
+ * border band with a two-layer mask, so it reads as a beam *on* the border rather
+ * than a dot floating on the edge. This is distinct from the static
+ * `GradientBorder`: nothing is painted until the beam sweeps past, giving a live,
+ * premium shimmer.
+ *
+ * **Performance:** the whole effect is one composited CSS animation on
+ * `offset-distance` (hinted with `will-change`) — no JS, no timers, no re-renders;
+ * every knob (size, duration, delay, colours, thickness) rides a CSS variable.
+ *
+ * **Accessibility & motion:** the beam layer is purely decorative
+ * (`aria-hidden`), sits behind the content, and is fully suppressed under
+ * `prefers-reduced-motion: reduce` (`motion-reduce:hidden`) — it carries no
+ * information, so reduced-motion visitors simply see the card with no animation.
+ */
+export const BorderBeam = forwardRef(({ className, children, size = 60, duration = 8, delay = 0, colorFrom = "var(--cronus-fg)", colorTo = "transparent", borderWidth = 1, reverse = false, style, ...props }, ref) => {
+    const beamStyle = {
+        "--beam-size": `${size}px`,
+        "--beam-duration": `${duration}s`,
+        // Negative delay offsets the phase without an initial pause, so staggered
+        // beams are already mid-lap on first paint.
+        "--beam-delay": `${-delay}s`,
+        "--beam-border-width": `${borderWidth}px`,
+        "--beam-color-from": colorFrom,
+        "--beam-color-to": colorTo,
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "border-beam", className: cn("relative rounded-2xl", className), style: { ...beamStyle, ...style }, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 rounded-[inherit] motion-reduce:hidden", style: {
+                    border: "var(--beam-border-width) solid transparent",
+                    maskClip: "padding-box, border-box",
+                    maskComposite: "intersect",
+                    maskImage: BEAM_MASK_IMAGE,
+                    WebkitMaskImage: BEAM_MASK_IMAGE,
+                }, children: [_jsx("style", { children: "@keyframes cronus-border-beam{from{offset-distance:0%}to{offset-distance:100%}}" }), _jsx("div", { className: cn("absolute aspect-square w-[var(--beam-size)]", "[offset-path:rect(0_auto_auto_0_round_var(--beam-size))]", "[animation-name:cronus-border-beam] [animation-duration:var(--beam-duration)]", "[animation-timing-function:linear] [animation-iteration-count:infinite]", "[animation-delay:var(--beam-delay)] [will-change:offset-distance]", reverse && "[animation-direction:reverse]"), style: {
+                            background: "linear-gradient(to left, var(--beam-color-from), var(--beam-color-to), transparent)",
+                        } })] }), _jsx("div", { className: "relative", children: children })] }));
+});
+BorderBeam.displayName = "BorderBeam";
+//# sourceMappingURL=border-beam.js.map

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type LiHTMLAttributes, type OlHTMLAttributes } from "react";
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const BreadcrumbList: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & import("react").RefAttributes<HTMLOListElement>>;
+export declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean;
+}
+export declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const BreadcrumbSeparator: import("react").ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+export declare const BreadcrumbEllipsis: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export const Breadcrumb = forwardRef(({ ...props }, ref) => {
+    return _jsx("nav", { ref: ref, "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+});
+Breadcrumb.displayName = "Breadcrumb";
+export const BreadcrumbList = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("ol", { ref: ref, "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm text-fg-tertiary", className), ...props }));
+});
+BreadcrumbList.displayName = "BreadcrumbList";
+export const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("li", { ref: ref, "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+export const BreadcrumbLink = forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (_jsx(Comp, { ref: ref, "data-slot": "breadcrumb-link", className: cn("transition-colors hover:text-fg", className), ...props }));
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+export const BreadcrumbPage = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, "aria-current": "page", "data-slot": "breadcrumb-page", className: cn("font-normal text-fg", className), ...props }));
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+export const BreadcrumbSeparator = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("li", { ref: ref, role: "presentation", "aria-hidden": "true", "data-slot": "breadcrumb-separator", className: cn("[&_svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+export const BreadcrumbEllipsis = forwardRef(({ className, ...props }, ref) => {
+    return (_jsxs("span", { ref: ref, role: "presentation", "aria-hidden": "true", "data-slot": "breadcrumb-ellipsis", className: cn("flex items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Layout direction of the grouped buttons. */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const ButtonGroup = forwardRef(({ className, orientation = "horizontal", ...props }, ref) => {
+    return (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn("inline-flex", orientation === "horizontal"
+            ? "flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px"
+            : "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px", "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10", className), ...props }));
+});
+ButtonGroup.displayName = "ButtonGroup";
+//# sourceMappingURL=button-group.js.map

package/dist/components/button.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes } from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "destructive" | "primary" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-[background,border-color,box-shadow,transform,opacity] duration-150 ease-[var(--ease-out-quart)] outline-none 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 active:scale-[0.98] [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
+    variants: {
+        variant: {
+            primary: "bg-primary text-primary-foreground shadow-xs hover:opacity-90",
+            secondary: "bg-surface-overlay text-fg border border-border hover:border-border-strong",
+            outline: "border border-border bg-transparent text-fg shadow-xs hover:bg-surface-overlay",
+            ghost: "text-fg-secondary hover:bg-surface-overlay hover:text-fg",
+            // `text-white` on the raw `error` token fails AA (≥4.5:1) in every dark
+            // theme (error is a light rose ~3.7:1). Darkening the surface toward
+            // black lifts every theme/mode above 4.5:1 (min 6.63:1) while staying
+            // theme-relative.
+            destructive: "bg-[color-mix(in_oklch,var(--cronus-error),black_30%)] text-white hover:opacity-90 shadow-xs",
+            // `text-primary-strong` (not `text-primary`): a link is small body text,
+            // and the raw brand primary reads <4.5:1 on surface-base in the bright
+            // light themes; the -strong variant is the AA-tuned same-hue text color.
+            link: "text-primary-strong underline-offset-4 hover:underline",
+        },
+        size: {
+            sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-3.5",
+            md: "h-10 px-4 [&_svg]:size-4",
+            lg: "h-11 px-6 text-base [&_svg]:size-4",
+            icon: "size-9 [&_svg]:size-4",
+            "icon-sm": "size-8 [&_svg]:size-3.5",
+        },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+});
+export const Button = forwardRef(({ className, variant, size, asChild = false, type, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, "data-slot": "button", "data-variant": variant ?? "primary", type: asChild ? undefined : (type ?? "button"), className: cn(buttonVariants({ variant, size }), className), ...props }));
+});
+Button.displayName = "Button";
+export { buttonVariants };
+//# sourceMappingURL=button.js.map

package/dist/components/calendar.d.ts

@@ -0,0 +1,7 @@
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export declare function Calendar({ className, classNames, components, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { DayButton, DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+/** Navigation (and dropdown) chevron, sized to match the v8 icons. */
+function CalendarChevron({ orientation = "left" }) {
+    const Icon = {
+        up: ChevronUp,
+        down: ChevronDown,
+        left: ChevronLeft,
+        right: ChevronRight,
+    }[orientation];
+    return _jsx(Icon, { className: "size-4" });
+}
+/**
+ * react-day-picker v9+ hangs the selection/flag modifiers on the grid cell
+ * (`td`) instead of the day button, while our ghost-variant button paints its
+ * own text colour on top. To keep the established look (rounded primary chip
+ * for selected days, muted outside/disabled days) the modifier styling is
+ * re-applied on the button itself, where `cn` resolves conflicts
+ * deterministically.
+ */
+function CalendarDayButton({ className, ...props }) {
+    const { modifiers } = props;
+    return (_jsx(DayButton, { ...props, className: cn(className, modifiers.today && "bg-surface-overlay text-fg", modifiers.outside && "day-outside text-fg-muted", modifiers.disabled && "text-fg-muted opacity-60", 
+        // Range middles stay transparent so the cell's overlay strip shows.
+        modifiers.range_middle && "bg-transparent text-fg opacity-100 hover:bg-transparent", modifiers.selected &&
+            !modifiers.range_middle &&
+            "bg-primary text-primary-foreground opacity-100 hover:bg-primary") }));
+}
+export function Calendar({ className, classNames, components, showOutsideDays = true, ...props }) {
+    return (_jsx(DayPicker
+    // react-day-picker DayPickerProps does not extend HTMLAttributes, so the
+    // data-slot marker rides on the "calendar" class rather than a typed attribute.
+    , { 
+        // react-day-picker DayPickerProps does not extend HTMLAttributes, so the
+        // data-slot marker rides on the "calendar" class rather than a typed attribute.
+        showOutsideDays: showOutsideDays, className: cn("calendar p-3", className), classNames: {
+            months: "relative flex flex-col sm:flex-row gap-4",
+            month: "flex flex-col gap-4",
+            month_caption: "flex justify-center pt-1 relative items-center",
+            caption_label: "text-sm font-medium text-fg",
+            // v9+ wraps both buttons in a single <nav>; it overlays the caption row
+            // (out of flow) so the buttons keep their absolute logical offsets.
+            nav: "absolute inset-x-0 top-0 flex items-center gap-1",
+            // Logical (start/end) utilities so nav buttons and range rounding
+            // follow the writing direction under dir="rtl".
+            button_previous: cn(buttonVariants({ variant: "outline" }), "size-7 p-0 opacity-60 hover:opacity-100 absolute start-1 top-0"),
+            button_next: cn(buttonVariants({ variant: "outline" }), "size-7 p-0 opacity-60 hover:opacity-100 absolute end-1 top-0"),
+            month_grid: "w-full border-collapse space-y-1",
+            weekdays: "flex",
+            weekday: "text-fg-tertiary rounded-md w-9 font-normal text-xs",
+            week: "flex w-full mt-2",
+            // The cell itself now carries `aria-selected`/`data-*` state (the v8
+            // :has() hooks are gone), so the range strip + rounding read those.
+            day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 aria-selected:bg-surface-overlay data-outside:aria-selected:bg-surface-overlay/50 first:aria-selected:rounded-s-md last:aria-selected:rounded-e-md",
+            day_button: cn(buttonVariants({ variant: "ghost" }), "size-9 p-0 font-normal"),
+            range_start: "day-range-start",
+            range_end: "day-range-end rounded-e-md",
+            hidden: "invisible",
+            ...classNames,
+        }, components: {
+            Chevron: CalendarChevron,
+            DayButton: CalendarDayButton,
+            ...components,
+        }, ...props }));
+}
+Calendar.displayName = "Calendar";
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface CandlestickPoint {
+    date: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+}
+export interface CandlestickChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: CandlestickPoint[];
+}
+export declare function CandlestickChart({ data, className, ...props }: CandlestickChartProps): import("react").JSX.Element;
+//# sourceMappingURL=candlestick-chart.d.ts.map

package/dist/components/candlestick-chart.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CartesianGrid, ComposedChart, Scatter, usePlotArea, useXAxisScale, useYAxisScale, XAxis, YAxis, } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent } from "./chart.js";
+function ohlcDomain(data) {
+    const first = data[0];
+    if (!first)
+        return [0, 1];
+    let min = first.low;
+    let max = first.high;
+    for (const point of data) {
+        if (point.low < min)
+            min = point.low;
+        if (point.high > max)
+            max = point.high;
+    }
+    const pad = Math.max(2, (max - min) * 0.08);
+    return [min - pad, max + pad];
+}
+/** Recharts 3 calls Scatter `shape` as a function, so this cannot use hooks. */
+function CandleHit({ cx, cy }) {
+    if (cx == null || cy == null)
+        return null;
+    return _jsx("rect", { x: cx - 8, y: cy - 24, width: 16, height: 48, fill: "transparent" });
+}
+function CloseTooltip(props) {
+    return (_jsx(ChartTooltipContent, { ...props, payload: props.payload?.filter((item) => String(item.dataKey) === "close") }));
+}
+function CandleMarks({ data }) {
+    const xScale = useXAxisScale();
+    const yScale = useYAxisScale();
+    const plot = usePlotArea();
+    if (!xScale || !yScale || data.length === 0)
+        return null;
+    const step = plot && data.length > 0 ? plot.width / data.length : 16;
+    const bodyW = Math.max(4, Math.min(12, step * 0.5));
+    return (_jsx("g", { "data-slot": "candlestick-marks", children: data.map((point) => {
+            const cx = xScale(point.date, { position: "middle" });
+            const yHigh = yScale(point.high);
+            const yLow = yScale(point.low);
+            const yOpen = yScale(point.open);
+            const yClose = yScale(point.close);
+            if (cx == null ||
+                yHigh == null ||
+                yLow == null ||
+                yOpen == null ||
+                yClose == null ||
+                !Number.isFinite(cx) ||
+                !Number.isFinite(yHigh) ||
+                !Number.isFinite(yLow) ||
+                !Number.isFinite(yOpen) ||
+                !Number.isFinite(yClose)) {
+                return null;
+            }
+            const up = point.close >= point.open;
+            const color = up ? "var(--cronus-success)" : "var(--cronus-error)";
+            const bodyTop = Math.min(yOpen, yClose);
+            const bodyH = Math.max(2, Math.abs(yClose - yOpen));
+            return (_jsxs("g", { children: [_jsx("line", { x1: cx, x2: cx, y1: yHigh, y2: yLow, stroke: color, strokeWidth: 1 }), _jsx("rect", { x: cx - bodyW / 2, y: bodyTop, width: bodyW, height: bodyH, fill: color, rx: 1 })] }, point.date));
+        }) }));
+}
+export function CandlestickChart({ data, className, ...props }) {
+    return (_jsx("div", { "data-slot": "candlestick-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: { close: { label: "Close", color: "var(--cronus-chart-1)" } }, className: "h-full w-full", children: _jsxs(ComposedChart, { data: data, margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 12, minTickGap: 24 }), _jsx(YAxis, { hide: true, domain: ohlcDomain(data) }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: "date", showAxisLabel: false }), content: _jsx(CloseTooltip, {}) }), _jsx(Scatter, { dataKey: "close", shape: CandleHit, legendType: "none", isAnimationActive: false }), _jsx(CandleMarks, { data: data })] }) }) }));
+}
+//# sourceMappingURL=candlestick-chart.js.map

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

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+export interface CardStackItem {
+    /** Stable identity used as the React key and the accessible name fallback. */
+    id: string;
+    /** Visible card body. */
+    content: ReactNode;
+}
+export interface CardStackProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    ref?: Ref<HTMLElement>;
+    items: CardStackItem[];
+    /**
+     * Accessible name for the stack. Defaults to `"Card stack"`.
+     */
+    labels?: {
+        region?: string;
+        next?: string;
+    };
+}
+/**
+ * A fanned stack of cards. Click or press ArrowRight / Space on the front
+ * card to cycle it to the back. Reduced-motion visitors keep the same
+ * stacking, without the slide.
+ */
+export declare function CardStack({ ref, className, items, labels, ...props }: CardStackProps): import("react").JSX.Element;
+export declare namespace CardStack {
+    var displayName: string;
+}
+//# sourceMappingURL=card-stack.d.ts.map

package/dist/components/card-stack.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useId, useState, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A fanned stack of cards. Click or press ArrowRight / Space on the front
+ * card to cycle it to the back. Reduced-motion visitors keep the same
+ * stacking, without the slide.
+ */
+export function CardStack({ ref, className, items, labels, ...props }) {
+    const reduce = !!useReducedMotion();
+    const labelId = useId();
+    const [order, setOrder] = useState(() => items.map((item) => item.id));
+    const regionLabel = labels?.region ?? "Card stack";
+    const nextLabel = labels?.next ?? "Show next card";
+    const cycle = useCallback(() => {
+        setOrder((current) => {
+            if (current.length < 2)
+                return current;
+            const [first, ...rest] = current;
+            return first === undefined ? current : [...rest, first];
+        });
+    }, []);
+    const onKeyDown = useCallback((event) => {
+        if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
+            event.preventDefault();
+            cycle();
+        }
+    }, [cycle]);
+    const lookup = new Map(items.map((item) => [item.id, item]));
+    const visible = order
+        .map((id) => lookup.get(id))
+        .filter((item) => item !== undefined);
+    return (_jsxs("section", { ref: ref, "data-slot": "card-stack", "aria-labelledby": labelId, className: cn("relative isolate h-56 w-full max-w-sm", className), ...props, children: [_jsx("span", { id: labelId, className: "sr-only", children: regionLabel }), visible.map((item, index) => {
+                const isFront = index === 0;
+                const depth = Math.min(index, 3);
+                return (_jsx(motion.div, { "data-slot": "card-stack-item", layout: !reduce, role: isFront ? "button" : undefined, tabIndex: isFront ? 0 : -1, "aria-label": isFront ? nextLabel : undefined, "aria-hidden": isFront ? undefined : true, className: cn("absolute inset-0 rounded-2xl border border-border bg-surface-raised p-5 shadow-sm outline-none", isFront &&
+                        "z-10 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base"), style: {
+                        translate: `${depth * 10}px ${depth * 10}px`,
+                        zIndex: visible.length - index,
+                        transformOrigin: "top center",
+                    }, animate: reduce ? undefined : { scale: 1 - depth * 0.04, rotate: isFront ? 0 : depth * -1.5 }, transition: { type: "spring", stiffness: 260, damping: 26 }, onClick: isFront ? cycle : undefined, onKeyDown: isFront ? onKeyDown : undefined, children: item.content }, item.id));
+            })] }));
+}
+CardStack.displayName = "CardStack";
+//# sourceMappingURL=card-stack.js.map

package/dist/components/card.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from "react";
+export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardAction: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Card = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card", className: cn("flex w-full min-w-0 flex-col gap-6 rounded-xl border border-border bg-surface-raised py-6 text-fg shadow-sm", className), ...props }));
+});
+Card.displayName = "Card";
+export const CardHeader = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-header", className: cn("grid min-w-0 auto-rows-min grid-cols-[minmax(0,1fr)_auto] items-start gap-1.5 px-4 sm:px-6", className), ...props }));
+});
+CardHeader.displayName = "CardHeader";
+export const CardTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-title", className: cn("min-w-0 break-words font-display font-semibold leading-none text-fg", className), ...props }));
+});
+CardTitle.displayName = "CardTitle";
+export const CardDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-description", className: cn("col-span-full text-sm text-fg-secondary", className), ...props }));
+});
+CardDescription.displayName = "CardDescription";
+export const CardAction = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+});
+CardAction.displayName = "CardAction";
+export const CardContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-content", className: cn("min-w-0 px-4 text-fg-secondary sm:px-6", className), ...props }));
+});
+CardContent.displayName = "CardContent";
+export const CardFooter = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "card-footer", className: cn("flex min-w-0 items-center gap-3 px-4 sm:px-6", className), ...props }));
+});
+CardFooter.displayName = "CardFooter";
+//# sourceMappingURL=card.js.map