@cronus-ui/ui 0.6.0

package/dist/components/ripple.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface RippleProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Number of concentric rings. Clamped to `1–16`.
+     * @default 8
+     */
+    count?: number;
+    /**
+     * Seconds for one expansion cycle.
+     * @default 8
+     */
+    duration?: number;
+}
+/**
+ * Concentric rings that expand from the centre of a surface and fade out —
+ * a living pulse behind a hero, CTA or empty state. The rings are purely
+ * decorative (`aria-hidden`) and are suppressed under
+ * `prefers-reduced-motion: reduce`.
+ */
+export declare function Ripple({ ref, className, children, count, duration, style, ...props }: RippleProps): import("react").JSX.Element;
+export declare namespace Ripple {
+    var displayName: string;
+}
+//# sourceMappingURL=ripple.d.ts.map

package/dist/components/ripple.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const RIPPLE_KEYFRAMES = "@keyframes cronus-ripple{from{transform:scale(0);opacity:var(--ripple-opacity,0.35)}to{transform:scale(1);opacity:0}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * Concentric rings that expand from the centre of a surface and fade out —
+ * a living pulse behind a hero, CTA or empty state. The rings are purely
+ * decorative (`aria-hidden`) and are suppressed under
+ * `prefers-reduced-motion: reduce`.
+ */
+export function Ripple({ ref, className, children, count = 8, duration = 8, style, ...props }) {
+    const ringCount = Math.min(16, Math.max(1, Math.round(finiteOr(count, 8))));
+    const cycle = Math.max(0.5, finiteOr(duration, 8));
+    return (_jsxs("div", { ref: ref, "data-slot": "ripple", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 motion-reduce:hidden", children: [_jsx("style", { children: RIPPLE_KEYFRAMES }), Array.from({ length: ringCount }, (_, index) => {
+                        const ringStyle = {
+                            "--ripple-duration": `${cycle}s`,
+                            "--ripple-delay": `${(index * cycle) / ringCount}s`,
+                            "--ripple-opacity": "0.35",
+                        };
+                        return (_jsx("span", { className: "absolute start-1/2 top-1/2 aspect-square w-[220%] -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/40 [animation-delay:var(--ripple-delay)] [animation-duration:var(--ripple-duration)] [animation-iteration-count:infinite] [animation-name:cronus-ripple] [animation-timing-function:ease-out]", style: ringStyle }, index));
+                    })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+Ripple.displayName = "Ripple";
+//# sourceMappingURL=ripple.js.map

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+export interface SankeyChartData {
+    nodes: {
+        name: string;
+    }[];
+    links: {
+        source: number;
+        target: number;
+        value: number;
+    }[];
+}
+export interface SankeyChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: SankeyChartData;
+}
+export declare function SankeyChart({ data, className, ...props }: SankeyChartProps): import("react").JSX.Element;
+//# sourceMappingURL=sankey-chart.d.ts.map

package/dist/components/sankey-chart.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sankey, Tooltip } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer } from "./chart.js";
+export function SankeyChart({ data, className, ...props }) {
+    return (_jsx("div", { "data-slot": "sankey-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: { flow: { label: "Flow", color: "var(--cronus-chart-1)" } }, className: "h-full w-full", children: _jsx(Sankey, { data: data, nodePadding: 16, nodeWidth: 12, linkCurvature: 0.5, iterations: 32, children: _jsx(Tooltip, {}) }) }) }));
+}
+//# sourceMappingURL=sankey-chart.js.map

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface ScatterChartSeries extends ChartSeries {
+    data: Record<string, unknown>[];
+}
+export interface ScatterChartProps extends HTMLAttributes<HTMLDivElement> {
+    xKey?: string;
+    yKey?: string;
+    series: ScatterChartSeries[];
+}
+export declare function ScatterChart({ xKey, yKey, series, className, ...props }: ScatterChartProps): import("react").JSX.Element;
+//# sourceMappingURL=scatter-chart.d.ts.map

package/dist/components/scatter-chart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CartesianGrid, ScatterChart as RechartsScatterChart, Scatter, XAxis, YAxis, ZAxis, } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function ScatterChart({ xKey = "x", yKey = "y", series, className, ...props }) {
+    const config = chartSeriesConfig(series);
+    return (_jsx("div", { "data-slot": "scatter-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsScatterChart, { margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, type: "number" }), _jsx(YAxis, { dataKey: yKey, tickLine: false, axisLine: false, type: "number" }), _jsx(ZAxis, { range: [60, 60] }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), series.map((item) => (_jsx(Scatter, { name: item.label, data: item.data, fill: `var(--color-${item.key})` }, item.key)))] }) }) }));
+}
+//# sourceMappingURL=scatter-chart.js.map

package/dist/components/scheduler.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes } from "react";
+/** Token-colour key for an event chip. Maps to surface/foreground utilities. */
+export type SchedulerEventColor = "primary" | "success" | "warning" | "error" | "info";
+export interface SchedulerEvent {
+    /** Stable identity used as the React key and passed back to callbacks. */
+    id: string;
+    /** Short label rendered inside the chip (truncated when it overflows). */
+    title: string;
+    /** Day the event belongs to. Only the calendar date is considered. */
+    date: Date;
+    /** Token colour for the chip. Defaults to `"primary"`. */
+    color?: SchedulerEventColor;
+}
+export interface SchedulerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled visible month. Provide together with `onMonthChange`. */
+    month?: Date;
+    /** Initial visible month for the uncontrolled case. Defaults to "today". */
+    defaultMonth?: Date;
+    /** Called with the first day of the next visible month on Prev/Today/Next. */
+    onMonthChange?: (month: Date) => void;
+    /** Events to lay out across the grid. Bucketed by calendar day. */
+    events?: SchedulerEvent[];
+    /** Fired when an event chip is activated. */
+    onEventClick?: (event: SchedulerEvent) => void;
+    /** Fired when a day cell (not a chip) is activated, with that day's date. */
+    onDayClick?: (date: Date) => void;
+    /**
+     * The day to highlight as "today". Optional and defaulting to `undefined` so
+     * server render and first client paint are deterministic — pass a stable
+     * Date (or compute one in an effect) to light up the current day without a
+     * hydration mismatch.
+     */
+    today?: Date;
+    /**
+     * Locale-aware start of the week (0 = Sunday … 6 = Saturday). Defaults to
+     * `0`, matching the Sun…Sat header.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Accessible label for the grid. Defaults to "Event calendar". */
+    ariaLabel?: string;
+}
+/**
+ * Month-view event calendar. Distinct from the date-picker `Calendar`: it lays
+ * events onto day cells rather than selecting a date. The visible month is
+ * controllable (`month`/`defaultMonth` + `onMonthChange`); everything rendered
+ * is derived from props so the component is SSR-safe (the only client-only
+ * concern, "today" highlighting, is opt-in via the `today` prop).
+ */
+export declare const Scheduler: import("react").ForwardRefExoticComponent<SchedulerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=scheduler.d.ts.map

package/dist/components/scheduler.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addMonths, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, startOfMonth, startOfWeek, subMonths, } from "date-fns";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+/**
+ * Token classes per event colour. Mirrors the soft `bg-…/15 text-…-strong`
+ * treatment used by `Badge` so chips read as quiet, on-brand pills that still
+ * clear WCAG AA (the `*-strong` text variant is AA-tuned for the 15% tint).
+ */
+const EVENT_CHIP_CLASSES = {
+    primary: "bg-primary/15 text-primary-strong",
+    success: "bg-success/15 text-success-strong",
+    warning: "bg-warning/15 text-warning-strong",
+    error: "bg-error/15 text-error-strong",
+    info: "bg-info/15 text-info-strong",
+};
+/** Max chips rendered per day before collapsing the rest into `+N more`. */
+const MAX_VISIBLE_EVENTS = 3;
+/** Key into an events-by-day map. Pure date math — no time zone surprises. */
+function dayKey(date) {
+    return format(date, "yyyy-MM-dd");
+}
+/**
+ * Month-view event calendar. Distinct from the date-picker `Calendar`: it lays
+ * events onto day cells rather than selecting a date. The visible month is
+ * controllable (`month`/`defaultMonth` + `onMonthChange`); everything rendered
+ * is derived from props so the component is SSR-safe (the only client-only
+ * concern, "today" highlighting, is opt-in via the `today` prop).
+ */
+export const Scheduler = forwardRef(({ className, month: monthProp, defaultMonth, onMonthChange, events = [], onEventClick, onDayClick, today, weekStartsOn = 0, ariaLabel = "Event calendar", ...props }, ref) => {
+    // Controlled/uncontrolled visible month, mirroring the house idiom.
+    const [uncontrolledMonth, setUncontrolledMonth] = useState(() => defaultMonth ?? new Date());
+    const isControlled = monthProp !== undefined;
+    const month = isControlled ? monthProp : uncontrolledMonth;
+    const goToMonth = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledMonth(next);
+        onMonthChange?.(next);
+    }, [isControlled, onMonthChange]);
+    const handlePrev = useCallback(() => goToMonth(subMonths(month, 1)), [goToMonth, month]);
+    const handleNext = useCallback(() => goToMonth(addMonths(month, 1)), [goToMonth, month]);
+    const handleToday = useCallback(() => goToMonth(startOfMonth(today ?? new Date())), [goToMonth, today]);
+    // The visible month padded to whole weeks (leading/trailing adjacent days),
+    // chunked into rows of seven so the grid can wrap each week in a `row`.
+    const weeks = useMemo(() => {
+        const gridStart = startOfWeek(startOfMonth(month), { weekStartsOn });
+        const gridEnd = endOfWeek(endOfMonth(month), { weekStartsOn });
+        const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+        const rows = [];
+        for (let i = 0; i < days.length; i += 7)
+            rows.push(days.slice(i, i + 7));
+        return rows;
+    }, [month, weekStartsOn]);
+    // Weekday header labels, rotated to honour `weekStartsOn`. Derived from the
+    // first rendered row so labels always line up with their columns.
+    const weekdayLabels = useMemo(() => (weeks[0] ?? []).map((day) => format(day, "EEE")), [weeks]);
+    // Bucket events by calendar day for O(1) lookup while rendering cells.
+    const eventsByDay = useMemo(() => {
+        const map = new Map();
+        for (const event of events) {
+            const key = dayKey(event.date);
+            const bucket = map.get(key);
+            if (bucket)
+                bucket.push(event);
+            else
+                map.set(key, [event]);
+        }
+        return map;
+    }, [events]);
+    return (_jsxs("div", { ref: ref, "data-slot": "scheduler", className: cn("w-full rounded-xl border border-border bg-surface-base text-fg", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border p-3", children: [_jsx("h2", { "data-slot": "scheduler-title", className: "text-sm font-semibold text-fg", children: format(month, "MMMM yyyy") }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Previous month", onClick: handlePrev, children: _jsx(ChevronLeft, {}) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleToday, children: "Today" }), _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Next month", onClick: handleNext, children: _jsx(ChevronRight, {}) })] })] }), _jsxs("table", { "data-slot": "scheduler-grid", "aria-label": ariaLabel, className: "w-full table-fixed", children: [_jsx("thead", { "data-slot": "scheduler-weekdays", children: _jsx("tr", { children: weekdayLabels.map((label) => (_jsx("th", { scope: "col", className: "border-b border-border px-2 py-1.5 text-center text-xs font-normal text-fg-tertiary", children: label }, label))) }) }), _jsx("tbody", { children: weeks.map((week) => (_jsx("tr", { children: week.map((day) => {
+                                const inMonth = isSameMonth(day, month);
+                                const isToday = today != null && isSameDay(day, today);
+                                const dayEvents = eventsByDay.get(dayKey(day)) ?? [];
+                                const visibleEvents = dayEvents.slice(0, MAX_VISIBLE_EVENTS);
+                                const overflowCount = dayEvents.length - visibleEvents.length;
+                                return (_jsxs("td", { "aria-label": format(day, "EEEE, MMMM d, yyyy"), "aria-current": isToday ? "date" : undefined, onClick: () => onDayClick?.(day), onKeyDown: (e) => {
+                                        // Only the cell itself (not a focused chip) toggles the day.
+                                        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                                            e.preventDefault();
+                                            onDayClick?.(day);
+                                        }
+                                    }, className: cn("h-24 min-w-0 cursor-pointer border-r border-b border-border p-1.5 align-top outline-none transition-colors last:border-r-0", "hover:bg-surface-overlay focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", inMonth ? "text-fg" : "text-fg-tertiary"), children: [_jsx("span", { className: cn("inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium", isToday && "bg-primary text-white", !inMonth && "text-fg-tertiary"), children: format(day, "d") }), _jsxs("span", { className: "mt-1 flex flex-col gap-0.5", children: [visibleEvents.map((event) => (_jsx("button", { type: "button", "data-slot": "scheduler-event", title: event.title, onClick: (e) => {
+                                                        // Don't also trigger the day cell behind the chip.
+                                                        e.stopPropagation();
+                                                        onEventClick?.(event);
+                                                    }, className: cn("truncate rounded px-1.5 py-0.5 text-left text-xs font-medium outline-none transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", EVENT_CHIP_CLASSES[event.color ?? "primary"]), children: event.title }, event.id))), overflowCount > 0 && (_jsxs("span", { "data-slot": "scheduler-event-overflow", className: "px-1.5 text-xs font-medium text-fg-tertiary", children: ["+", overflowCount, " more"] }))] })] }, day.toISOString()));
+                            }) }, week[0]?.toISOString()))) })] })] }));
+});
+Scheduler.displayName = "Scheduler";
+//# sourceMappingURL=scheduler.js.map

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

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type Ref } from "react";
+export type ScrambleTextMotionPreference = "respect" | "always" | "never";
+export interface ScrambleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    ref?: Ref<HTMLSpanElement>;
+    /** The phrase to resolve to. */
+    children: string;
+    /**
+     * Milliseconds between scramble ticks.
+     * @default 40
+     */
+    speed?: number;
+    /**
+     * How many ticks each glyph stays scrambled before locking.
+     * @default 4
+     */
+    ticksPerGlyph?: number;
+    /**
+     * Glyphs used while scrambling. Defaults to a Latin + digit set.
+     */
+    charset?: string;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"respect"` (show
+     * the resolved phrase immediately).
+     * @default "respect"
+     */
+    reducedMotion?: ScrambleTextMotionPreference;
+}
+/**
+ * Resolves a phrase by cycling random glyphs from the start of the string, until the real
+ * string locks in — the "decryption" beat on a hero or terminal. Assistive
+ * tech is given the resolved string immediately via an `sr-only` copy; the
+ * scrambling glyphs are `aria-hidden`. Reduced-motion visitors skip the
+ * scramble entirely.
+ */
+export declare function ScrambleText({ ref, className, children, speed, ticksPerGlyph, charset, reducedMotion, ...props }: ScrambleTextProps): import("react").JSX.Element;
+export declare namespace ScrambleText {
+    var displayName: string;
+}
+//# sourceMappingURL=scramble-text.d.ts.map

package/dist/components/scramble-text.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+function segmentGraphemes(value) {
+    if (graphemeSegmenter) {
+        return Array.from(graphemeSegmenter.segment(value), (segment) => segment.segment);
+    }
+    return Array.from(value);
+}
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function prefersReducedMotion() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+/**
+ * Resolves a phrase by cycling random glyphs from the start of the string, until the real
+ * string locks in — the "decryption" beat on a hero or terminal. Assistive
+ * tech is given the resolved string immediately via an `sr-only` copy; the
+ * scrambling glyphs are `aria-hidden`. Reduced-motion visitors skip the
+ * scramble entirely.
+ */
+export function ScrambleText({ ref, className, children, speed = 40, ticksPerGlyph = 4, charset = DEFAULT_CHARSET, reducedMotion = "respect", ...props }) {
+    const glyphs = useMemo(() => segmentGraphemes(children), [children]);
+    const pool = charset.length > 0 ? charset : DEFAULT_CHARSET;
+    const [locked, setLocked] = useState(() => (reducedMotion === "never" ? glyphs.length : 0));
+    const [tick, setTick] = useState(0);
+    const [staticMode, setStaticMode] = useState(reducedMotion === "never");
+    useEffect(() => {
+        const reduce = reducedMotion === "never"
+            ? true
+            : reducedMotion === "always"
+                ? false
+                : prefersReducedMotion();
+        setStaticMode(reduce);
+        setLocked(reduce ? glyphs.length : 0);
+        setTick(0);
+    }, [glyphs.length, reducedMotion]);
+    useEffect(() => {
+        if (staticMode || glyphs.length === 0)
+            return;
+        const ms = Math.max(12, finiteOr(speed, 40));
+        const per = Math.max(1, Math.round(finiteOr(ticksPerGlyph, 4)));
+        let lockedCount = 0;
+        let tickCount = 0;
+        let timeout = 0;
+        const step = () => {
+            if (lockedCount >= glyphs.length)
+                return;
+            tickCount += 1;
+            if (tickCount % per === 0) {
+                lockedCount = Math.min(glyphs.length, lockedCount + 1);
+                setLocked(lockedCount);
+            }
+            setTick(tickCount);
+            timeout = window.setTimeout(step, ms);
+        };
+        timeout = window.setTimeout(step, ms);
+        return () => window.clearTimeout(timeout);
+    }, [glyphs.length, speed, staticMode, ticksPerGlyph]);
+    const display = glyphs
+        .map((glyph, index) => {
+        if (index < locked || /^\s+$/.test(glyph))
+            return glyph;
+        return pool[(index * 17 + tick * 31) % pool.length] ?? glyph;
+    })
+        .join("");
+    return (_jsxs("span", { ref: ref, "data-slot": "scramble-text", className: cn("inline font-mono", className), ...props, children: [_jsx("span", { className: "sr-only", children: children }), _jsx("span", { "aria-hidden": "true", children: staticMode ? children : display })] }));
+}
+ScrambleText.displayName = "ScrambleText";
+//# sourceMappingURL=scramble-text.js.map

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

@@ -0,0 +1,13 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { type ComponentPropsWithoutRef } from "react";
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Accessible name for the scrollable viewport. Supply this when the content
+     * warrants a distinct name (e.g. "Release notes"); the viewport is always
+     * keyboard-focusable so it can be scrolled with the arrow keys regardless.
+     */
+    "aria-label"?: string;
+}
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollBar: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const ScrollArea = forwardRef(({ className, children, "aria-label": ariaLabel, ...props }, ref) => {
+    return (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { role: ariaLabel ? "region" : undefined, "aria-label": ariaLabel, tabIndex: 0, className: "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+});
+ScrollArea.displayName = "ScrollArea";
+export const ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, "data-slot": "scroll-bar", orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) }));
+});
+ScrollBar.displayName = "ScrollBar";
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/scroll-progress.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type RefObject } from "react";
+type ScrollProgressVariant = "bar" | "circle";
+type ScrollProgressPosition = "top" | "bottom";
+export interface ScrollProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Render a thin horizontal bar or a circular ring. */
+    variant?: ScrollProgressVariant;
+    /**
+     * The scroll container to track. When omitted, the window / document scrolling
+     * element is tracked instead.
+     */
+    target?: RefObject<HTMLElement | null>;
+    /** Where to pin the bar variant (ignored for the circle). */
+    position?: ScrollProgressPosition;
+    /** Diameter of the ring in px (circle variant only). */
+    size?: number;
+}
+export declare const ScrollProgress: import("react").ForwardRefExoticComponent<ScrollProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=scroll-progress.d.ts.map

package/dist/components/scroll-progress.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Clamp a raw scroll ratio to 0–1. A scroll container with no overflow
+ * (`scrollHeight === clientHeight`) has nothing to scroll, so it reports 0.
+ */
+function ratioFor(scrollTop, scrollHeight, clientHeight) {
+    const scrollable = scrollHeight - clientHeight;
+    if (scrollable <= 0) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, scrollTop / scrollable));
+}
+export const ScrollProgress = forwardRef(({ className, variant = "bar", target, position = "top", size = 40, "aria-label": ariaLabel = "Scroll progress", ...props }, ref) => {
+    const [progress, setProgress] = useState(0);
+    useEffect(() => {
+        const element = target?.current ?? null;
+        // Track the supplied element, or the document scrolling element for the
+        // window-level case (scroll events still come from `window`).
+        const scrollSource = element ?? window;
+        const measure = () => {
+            if (element) {
+                setProgress(ratioFor(element.scrollTop, element.scrollHeight, element.clientHeight));
+                return;
+            }
+            const doc = document.documentElement;
+            setProgress(ratioFor(doc.scrollTop, doc.scrollHeight, doc.clientHeight));
+        };
+        // Measure on every scroll/resize. `setProgress` already bails out when the
+        // ratio is unchanged, so bursty events stay cheap without deferring the
+        // update off the event (which would race a synchronous read of the value).
+        const onScroll = () => measure();
+        measure();
+        scrollSource.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll, { passive: true });
+        return () => {
+            scrollSource.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", onScroll);
+        };
+    }, [target]);
+    const percent = Math.round(progress * 100);
+    const ariaProps = {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": percent,
+        "aria-label": ariaLabel,
+    };
+    if (variant === "circle") {
+        // Inset the ring by half the stroke so it isn't clipped by the viewBox.
+        const strokeWidth = Math.max(2, Math.round(size * 0.1));
+        const radius = size / 2 - strokeWidth / 2;
+        const circumference = 2 * Math.PI * radius;
+        const dashOffset = circumference * (1 - progress);
+        return (_jsxs("div", { ref: ref, "data-slot": "scroll-progress", "data-variant": "circle", ...ariaProps, className: cn("relative inline-flex items-center justify-center", className), style: { width: size, height: size }, ...props, children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", 
+                    // Rotate so the ring fills clockwise from 12 o'clock.
+                    className: "-rotate-90", "aria-hidden": "true", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, className: "stroke-border" }), _jsx("circle", { "data-slot": "scroll-progress-ring", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: dashOffset, className: "stroke-primary" })] }), _jsxs("span", { "data-slot": "scroll-progress-value", className: "absolute inset-0 flex items-center justify-center text-xs font-medium tabular-nums text-fg", children: [percent, "%"] })] }));
+    }
+    return (_jsx("div", { ref: ref, "data-slot": "scroll-progress", "data-variant": "bar", ...ariaProps, className: cn("h-1 w-full overflow-hidden bg-surface-inset", 
+        // Pin to the viewport edge for the window-level case; consumers can
+        // override via className.
+        !target && "sticky inset-x-0 z-50", !target && (position === "bottom" ? "bottom-0" : "top-0"), className), ...props, children: _jsx("div", { "data-slot": "scroll-progress-fill", className: "h-full bg-primary", style: { width: `${progress * 100}%` } }) }));
+});
+ScrollProgress.displayName = "ScrollProgress";
+//# sourceMappingURL=scroll-progress.js.map

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,48 @@
+import { type Transition } from "motion/react";
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+type SegmentedControlSize = "sm" | "md";
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled selected value. When provided the component is fully controlled. */
+    value?: string;
+    /** Initial selected value for the uncontrolled case. */
+    defaultValue?: string;
+    /** Called whenever the selection should change (controlled or not). */
+    onValueChange?: (value: string) => void;
+    /** Density of the items. Defaults to `"md"`. */
+    size?: SegmentedControlSize;
+    /** Override the thumb spring (advanced — defaults to the Cronus thumb spring). */
+    transition?: Transition;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"user"` (snap the
+     * thumb for users who opt out). Pass `"never"` to always slide it — e.g. a
+     * showcase that must demonstrate it — or `"always"` to force the snap.
+     */
+    reducedMotion?: "user" | "always" | "never";
+    children?: ReactNode;
+}
+/**
+ * Root of the segmented control — a horizontal, single-select toggle with a
+ * sliding "thumb" behind the active option. Owns the selection (controlled or
+ * uncontrolled), provides the shared `layoutId` group id + roving-focus
+ * machinery through context, and renders the track container as a
+ * `role="radiogroup"`. Compose with {@link SegmentedControlItem}.
+ */
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SegmentedControlItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange"> {
+    /** The value this option selects. Required and unique within a group. */
+    value: string;
+    /** Visible label (text and/or icon). */
+    children?: ReactNode;
+    /** Disable selection + skip in keyboard navigation. */
+    disabled?: boolean;
+}
+/**
+ * A single option in a {@link SegmentedControl}. Renders a `role="radio"`
+ * button; when active it hosts the shared `motion.div` thumb (an `absolute
+ * inset-0` raised pill) that slides between options via `layoutId`. The label
+ * is layered above the thumb with `relative z-10`. Roving focus + radiogroup
+ * keyboard semantics are handled by the root.
+ */
+export declare const SegmentedControlItem: import("react").ForwardRefExoticComponent<SegmentedControlItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=segmented-control.d.ts.map