@cronus-ui/ui 0.6.0

package/dist/components/form.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from "react";
+import { type ControllerProps, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";
+export { useFormContext };
+export declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+export declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
+export declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+export declare const FormItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FormLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-label").LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FormControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const FormDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const FormMessage: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=form.d.ts.map

package/dist/components/form.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { createContext, forwardRef, useContext, useId, } from "react";
+import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { cn } from "../lib/cn.js";
+import { Label } from "./label.js";
+export { useFormContext };
+export const Form = FormProvider;
+const FormFieldContext = createContext(null);
+export const FormField = (props) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+};
+const FormItemContext = createContext(null);
+export const useFormField = () => {
+    const fieldContext = useContext(FormFieldContext);
+    const itemContext = useContext(FormItemContext);
+    const form = useFormContext();
+    const formState = useFormState({ name: fieldContext?.name });
+    if (!form) {
+        throw new Error("useFormField must be used within a <Form> (FormProvider)");
+    }
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const fieldState = form.getFieldState(fieldContext.name, formState);
+    if (!itemContext) {
+        throw new Error("useFormField should be used within <FormItem>");
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+export const FormItem = forwardRef(({ className, ...props }, ref) => {
+    const id = useId();
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { ref: ref, "data-slot": "form-item", className: cn("flex flex-col gap-1.5", className), ...props }) }));
+});
+FormItem.displayName = "FormItem";
+export const FormLabel = forwardRef(({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { ref: ref, "data-slot": "form-label", "data-error": !!error, htmlFor: formItemId, className: cn(error && "text-error-strong", className), ...props }));
+});
+FormLabel.displayName = "FormLabel";
+export const FormControl = forwardRef(({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { ref: ref, "data-slot": "form-control", id: formItemId, "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId, "aria-invalid": !!error, ...props }));
+});
+FormControl.displayName = "FormControl";
+export const FormDescription = forwardRef(({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { ref: ref, "data-slot": "form-description", id: formDescriptionId, className: cn("text-xs text-fg-secondary", className), ...props }));
+});
+FormDescription.displayName = "FormDescription";
+export const FormMessage = forwardRef(({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : children;
+    if (!body)
+        return null;
+    return (_jsx("p", { ref: ref, "data-slot": "form-message", id: formMessageId, role: "alert", className: cn("text-xs text-error-strong", className), ...props, children: body }));
+});
+FormMessage.displayName = "FormMessage";
+//# sourceMappingURL=form.js.map

package/dist/components/frame.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+declare const frameVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface FrameProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof frameVariants> {
+    /** Chrome style. `browser` shows an address bar; `window` is a plain title bar. */
+    variant?: "browser" | "window";
+    /** URL shown in the address bar (browser variant only). */
+    url?: string;
+}
+export declare const Frame: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=frame.d.ts.map

package/dist/components/frame.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const frameVariants = cva("overflow-hidden rounded-xl border border-border bg-surface-raised shadow-sm");
+export const Frame = forwardRef(({ variant = "browser", url, className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, "data-slot": "frame", "data-variant": variant, className: cn(frameVariants(), className), ...props, children: [_jsxs("div", { "data-slot": "frame-chrome", className: "flex items-center gap-3 border-b border-border bg-surface-inset px-3 py-2", children: [_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-3 rounded-full bg-error" }), _jsx("span", { className: "size-3 rounded-full bg-warning" }), _jsx("span", { className: "size-3 rounded-full bg-success" })] }), variant === "browser" ? (_jsx("div", { "data-slot": "frame-address-bar", className: "mx-auto max-w-full truncate rounded-md bg-surface-raised px-3 py-1 text-xs text-fg-tertiary", children: url })) : null] }), _jsx("div", { "data-slot": "frame-content", className: "text-fg", children: children })] }));
+});
+Frame.displayName = "Frame";
+//# sourceMappingURL=frame.js.map

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+export interface FunnelChartItem {
+    stage: string;
+    value: number;
+    key: string;
+}
+export interface FunnelChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: FunnelChartItem[];
+}
+export declare function FunnelChart({ data, className, ...props }: FunnelChartProps): import("react").JSX.Element;
+//# sourceMappingURL=funnel-chart.d.ts.map

package/dist/components/funnel-chart.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Funnel, LabelList, FunnelChart as RechartsFunnelChart } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+export function FunnelChart({ data, className, ...props }) {
+    const config = {};
+    for (const [index, item] of data.entries()) {
+        config[item.key] = {
+            label: item.stage,
+            color: `var(--cronus-chart-${(index % 5) + 1})`,
+        };
+    }
+    const rows = data.map((item) => ({ ...item, fill: `var(--color-${item.key})` }));
+    return (_jsx("div", { "data-slot": "funnel-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsFunnelChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Funnel, { data: rows, dataKey: "value", nameKey: "stage", isAnimationActive: true, children: _jsx(LabelList, { dataKey: "stage", position: "right", className: "fill-fg text-xs" }) })] }) }) }));
+}
+//# sourceMappingURL=funnel-chart.js.map

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+export interface GaugeChartProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    label?: string;
+    max?: number;
+}
+export declare function GaugeChart({ value, label, max, className, ...props }: GaugeChartProps): import("react").JSX.Element;
+//# sourceMappingURL=gauge-chart.d.ts.map

package/dist/components/gauge-chart.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer } from "./chart.js";
+export function GaugeChart({ value, label = "Score", max = 100, className, ...props }) {
+    const clamped = Math.min(max, Math.max(0, value));
+    const data = [{ name: label, value: clamped, fill: "var(--cronus-chart-1)" }];
+    return (_jsx("div", { "data-slot": "gauge-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: { [label]: { label, color: "var(--cronus-chart-1)" } }, className: "h-full w-full", children: _jsxs(RadialBarChart, { data: data, startAngle: 210, endAngle: -30, innerRadius: 80, outerRadius: 110, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, max], tick: false }), _jsx(RadialBar, { dataKey: "value", background: true, cornerRadius: 8 }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", className: "fill-fg text-2xl font-medium", children: clamped })] }) }) }));
+}
+//# sourceMappingURL=gauge-chart.js.map

package/dist/components/glare-hover.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface GlareHoverProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A diagonal glare that tracks the pointer across a surface. Position is
+ * written to CSS variables inside `requestAnimationFrame` so pointer motion
+ * never re-renders React. Decorative and suppressed under reduced motion
+ * and on coarse pointers.
+ */
+export declare function GlareHover({ ref, className, children, onMouseMove, onMouseEnter, onMouseLeave, ...props }: GlareHoverProps): import("react").JSX.Element;
+export declare namespace GlareHover {
+    var displayName: string;
+}
+//# sourceMappingURL=glare-hover.d.ts.map

package/dist/components/glare-hover.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A diagonal glare that tracks the pointer across a surface. Position is
+ * written to CSS variables inside `requestAnimationFrame` so pointer motion
+ * never re-renders React. Decorative and suppressed under reduced motion
+ * and on coarse pointers.
+ */
+export function GlareHover({ ref, className, children, onMouseMove, onMouseEnter, onMouseLeave, ...props }) {
+    const localRef = useRef(null);
+    const frameRef = useRef(null);
+    const setRef = useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleMouseMove = useCallback((event) => {
+        const node = localRef.current;
+        if (node) {
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = null;
+                const current = localRef.current;
+                if (!current)
+                    return;
+                const rect = current.getBoundingClientRect();
+                const x = ((clientX - rect.left) / rect.width) * 100;
+                const y = ((clientY - rect.top) / rect.height) * 100;
+                current.style.setProperty("--glare-x", `${x}%`);
+                current.style.setProperty("--glare-y", `${y}%`);
+            });
+        }
+        onMouseMove?.(event);
+    }, [onMouseMove]);
+    const handleMouseEnter = useCallback((event) => {
+        localRef.current?.setAttribute("data-glare-hovered", "true");
+        onMouseEnter?.(event);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((event) => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        localRef.current?.removeAttribute("data-glare-hovered");
+        onMouseLeave?.(event);
+    }, [onMouseLeave]);
+    return (_jsxs("div", { ref: setRef, "data-slot": "glare-hover", className: cn("group/glare relative overflow-hidden", className), onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-data-[glare-hovered]/glare:opacity-100 motion-reduce:hidden motion-reduce:transition-none", style: {
+                    background: "linear-gradient(115deg, transparent 32%, color-mix(in oklch, var(--cronus-fg) 18%, transparent) 50%, transparent 68%)",
+                    backgroundSize: "220% 220%",
+                    backgroundPosition: "var(--glare-x, 50%) var(--glare-y, 50%)",
+                } }), _jsx("div", { className: "relative", children: children })] }));
+}
+GlareHover.displayName = "GlareHover";
+//# sourceMappingURL=glare-hover.js.map

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

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

package/dist/components/glass-card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const GlassCard = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, "data-slot": "glass-card", className: cn("relative rounded-2xl border border-border-soft bg-surface-raised/60 p-6 text-fg shadow-lg backdrop-blur-xl", className), ...props, children: [_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 h-px rounded-t-2xl bg-gradient-to-r from-transparent via-border-strong to-transparent" }), _jsx("div", { className: "relative", children: children })] }));
+});
+GlassCard.displayName = "GlassCard";
+//# sourceMappingURL=glass-card.js.map

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+export interface GradientBorderProps extends HTMLAttributes<HTMLDivElement> {
+    innerClassName?: string;
+    glow?: boolean;
+}
+export declare const GradientBorder: import("react").ForwardRefExoticComponent<GradientBorderProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=gradient-border.d.ts.map

package/dist/components/gradient-border.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const GradientBorder = forwardRef(({ className, innerClassName, glow = false, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "gradient-border", className: cn("rounded-2xl bg-gradient-primary p-px", glow && "shadow-glow", className), ...props, children: _jsx("div", { className: cn("h-full w-full rounded-[inherit] bg-surface-raised", innerClassName), children: children }) }));
+});
+GradientBorder.displayName = "GradientBorder";
+//# sourceMappingURL=gradient-border.js.map

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

@@ -0,0 +1,6 @@
+import { type HTMLAttributes } from "react";
+export interface GradientTextProps extends HTMLAttributes<HTMLSpanElement> {
+    asChild?: boolean;
+}
+export declare const GradientText: import("react").ForwardRefExoticComponent<GradientTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=gradient-text.d.ts.map

package/dist/components/gradient-text.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const GradientText = forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    return (_jsx(Comp, { ref: ref, "data-slot": "gradient-text", className: cn("bg-gradient-primary bg-clip-text text-transparent", className), ...props }));
+});
+GradientText.displayName = "GradientText";
+//# sourceMappingURL=gradient-text.js.map

package/dist/components/grid-pattern.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface GridPatternProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Cell size, in pixels.
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Stroke width of the grid lines, in pixels.
+     * @default 1
+     */
+    strokeWidth?: number;
+}
+/**
+ * A faint SVG grid that sits behind content. Colour inherits `currentColor`.
+ * Decorative (`aria-hidden`) with no motion of its own.
+ */
+export declare function GridPattern({ ref, className, children, size, strokeWidth, ...props }: GridPatternProps): import("react").JSX.Element;
+export declare namespace GridPattern {
+    var displayName: string;
+}
+//# sourceMappingURL=grid-pattern.d.ts.map

package/dist/components/grid-pattern.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A faint SVG grid that sits behind content. Colour inherits `currentColor`.
+ * Decorative (`aria-hidden`) with no motion of its own.
+ */
+export function GridPattern({ ref, className, children, size = 24, strokeWidth = 1, ...props }) {
+    const patternId = useId();
+    const cell = Math.max(4, finiteOr(size, 24));
+    const stroke = Math.max(0.25, finiteOr(strokeWidth, 1));
+    return (_jsxs("div", { ref: ref, "data-slot": "grid-pattern", className: cn("relative overflow-hidden text-border", className), ...props, children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 size-full", children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, width: cell, height: cell, patternUnits: "userSpaceOnUse", children: _jsx("path", { d: `M ${cell} 0 L 0 0 0 ${cell}`, fill: "none", stroke: "currentColor", strokeWidth: stroke }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+GridPattern.displayName = "GridPattern";
+//# sourceMappingURL=grid-pattern.js.map

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

@@ -0,0 +1,6 @@
+import { type HeatmapProps } from "./heatmap.js";
+export interface HeatmapChartProps extends HeatmapProps {
+}
+/** Chart-catalog alias of Heatmap. The Motion heatmap lives at `@cronus-ui/ui/charts`. */
+export declare function HeatmapChart({ className, ...props }: HeatmapChartProps): import("react").JSX.Element;
+//# sourceMappingURL=heatmap-chart.d.ts.map

package/dist/components/heatmap-chart.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Heatmap } from "./heatmap.js";
+/** Chart-catalog alias of Heatmap. The Motion heatmap lives at `@cronus-ui/ui/charts`. */
+export function HeatmapChart({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "heatmap-chart", className: cn("w-full", className), children: _jsx(Heatmap, { ...props }) }));
+}
+//# sourceMappingURL=heatmap-chart.js.map

package/dist/components/heatmap.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from "react";
+/** A single day of the heatmap. `date` is a display string used in the tooltip. */
+export interface HeatmapDay {
+    /** Display date string, e.g. "2026-06-24". Used only for the tooltip title. */
+    date: string;
+    /** The activity value for the day; bucketed into a color level. */
+    value: number;
+}
+/**
+ * Bucket a `value` into a discrete level `0..levels-1` against the series `max`.
+ * Level 0 is reserved for an empty/zero day; positive values spread across the
+ * remaining `levels-1` buckets. A non-positive `max` collapses everything to 0
+ * so we never divide by zero or read past the class lookup.
+ */
+export declare function getHeatmapLevel(value: number, max: number, levels: number): number;
+export interface HeatmapProps extends HTMLAttributes<HTMLDivElement> {
+    /** One item per day, laid out into week columns of 7 (top → bottom). */
+    data: HeatmapDay[];
+    /** Number of discrete levels including the empty level 0. */
+    levels?: number;
+    /**
+     * Hint for the intended number of week columns. Ignored — the data drives the
+     * layout — but accepted so callers can document intent.
+     */
+    weekCount?: number;
+}
+export declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=heatmap.d.ts.map

package/dist/components/heatmap.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+// Static (never interpolated) background classes selected by level lookup.
+// Level 0 is the empty inset; levels 1..4 ramp the primary token's opacity.
+const levelClasses = [
+    "bg-surface-inset",
+    "bg-primary/25",
+    "bg-primary/45",
+    "bg-primary/70",
+    "bg-primary",
+];
+/**
+ * Bucket a `value` into a discrete level `0..levels-1` against the series `max`.
+ * Level 0 is reserved for an empty/zero day; positive values spread across the
+ * remaining `levels-1` buckets. A non-positive `max` collapses everything to 0
+ * so we never divide by zero or read past the class lookup.
+ */
+export function getHeatmapLevel(value, max, levels) {
+    if (!Number.isFinite(value) || value <= 0 || !Number.isFinite(max) || max <= 0) {
+        return 0;
+    }
+    const buckets = Math.max(1, levels - 1);
+    const ratio = Math.min(1, value / max);
+    // Map ratio (0,1] → level 1..buckets. Ceil so the smallest positive value is
+    // still level 1 and value === max lands on the top level.
+    const level = Math.ceil(ratio * buckets);
+    return Math.min(buckets, Math.max(1, level));
+}
+export const Heatmap = forwardRef(({ className, data, levels = 5, 
+// Pulled out so it is not forwarded onto the DOM node.
+weekCount: _weekCount, "aria-label": ariaLabel = "Activity heatmap", ...props }, ref) => {
+    const safeLevels = Math.min(levelClasses.length, Math.max(2, levels));
+    const max = data.reduce((acc, day) => (day.value > acc ? day.value : acc), 0);
+    return (_jsxs("div", { ref: ref, "data-slot": "heatmap", className: cn("inline-flex flex-col gap-2", className), ...props, children: [_jsx("div", { role: "img", "aria-label": ariaLabel, className: "grid grid-flow-col grid-rows-7 gap-1", children: data.map((day, index) => {
+                    const level = getHeatmapLevel(day.value, max, safeLevels);
+                    return (_jsx("div", { "data-slot": "heatmap-day", "data-level": level, title: `${day.value} on ${day.date}`, className: cn("size-3 rounded-[3px]", levelClasses[level]) }, index));
+                }) }), _jsxs("div", { "data-slot": "heatmap-legend", className: "flex items-center gap-1 text-xs text-fg-tertiary", children: [_jsx("span", { children: "Less" }), levelClasses.slice(0, safeLevels).map((cls, level) => (_jsx("span", { "data-slot": "heatmap-legend-swatch", "data-level": level, className: cn("size-3 rounded-[3px]", cls) }, level))), _jsx("span", { children: "More" })] })] }));
+});
+Heatmap.displayName = "Heatmap";
+//# sourceMappingURL=heatmap.js.map

package/dist/components/highlighter.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface HighlighterProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Seconds the marker takes to draw on.
+     * @default 0.6
+     */
+    duration?: number;
+}
+/**
+ * A marker stroke that draws in behind a phrase — the "we highlight the
+ * important bit" treatment on a headline. The mark is decorative
+ * (`aria-hidden`); the words themselves stay in the accessibility tree.
+ * Reduced-motion visitors get the mark fully drawn with no animation.
+ */
+export declare function Highlighter({ ref, className, children, duration, style, ...props }: HighlighterProps): import("react").JSX.Element;
+export declare namespace Highlighter {
+    var displayName: string;
+}
+//# sourceMappingURL=highlighter.d.ts.map

package/dist/components/highlighter.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const HIGHLIGHT_KEYFRAMES = "@keyframes cronus-highlighter{from{transform:scaleX(0)}to{transform:scaleX(1)}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A marker stroke that draws in behind a phrase — the "we highlight the
+ * important bit" treatment on a headline. The mark is decorative
+ * (`aria-hidden`); the words themselves stay in the accessibility tree.
+ * Reduced-motion visitors get the mark fully drawn with no animation.
+ */
+export function Highlighter({ ref, className, children, duration = 0.6, style, ...props }) {
+    const cycle = Math.max(0.1, finiteOr(duration, 0.6));
+    const highlightStyle = { "--highlight-duration": `${cycle}s` };
+    return (_jsxs("span", { ref: ref, "data-slot": "highlighter", className: cn("relative inline whitespace-nowrap", className), style: { ...highlightStyle, ...style }, ...props, children: [_jsx("style", { children: HIGHLIGHT_KEYFRAMES }), _jsx("span", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-[0.08em] -z-10 h-[0.45em] origin-bottom-start rounded-sm bg-primary/25 [animation-duration:var(--highlight-duration)] [animation-fill-mode:forwards] [animation-name:cronus-highlighter] [animation-timing-function:cubic-bezier(.22,1,.36,1)] motion-reduce:[animation-name:none]" }), children] }));
+}
+Highlighter.displayName = "Highlighter";
+//# sourceMappingURL=highlighter.js.map

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

@@ -0,0 +1,5 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+export declare const HoverCard: import("react").FC<HoverCardPrimitive.HoverCardProps>;
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const HoverCardContent: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/hover-card.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const HoverCard = HoverCardPrimitive.Root;
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+export const HoverCardContent = forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+    return (_jsx(HoverCardPrimitive.Portal, { children: _jsx(HoverCardPrimitive.Content, { ref: ref, "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("z-50 w-64 rounded-lg border border-border bg-surface-floating p-3 text-fg shadow-lg outline-none data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }) }));
+});
+HoverCardContent.displayName = "HoverCardContent";
+//# sourceMappingURL=hover-card.js.map

package/dist/components/image-zoom.d.ts

@@ -0,0 +1,47 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+declare const imageZoomVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface ImageZoomLabels {
+    /** Action part of the toggle's accessible name; `alt` is appended when set. */
+    zoom: string;
+}
+export interface ImageZoomProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof imageZoomVariants> {
+    /** Image URL for the built-in `<img>`. Ignored when `children` is passed. */
+    src?: string;
+    /**
+     * Describes the image for assistive tech. The root is a button whose
+     * `aria-label` overrides the inner image's alt, so the description is
+     * composed into the toggle's accessible name (`"{labels.zoom}: {alt}"`)
+     * in addition to serving as the built-in `<img>` alt. @default ""
+     */
+    alt?: string;
+    /** Magnification applied while zoomed. Values below `1` clamp to `1`. @default 2 */
+    zoom?: number;
+    /** Disables all zoom interaction. @default false */
+    disabled?: boolean;
+    /** Renders the zoom-in indicator overlay, which fades out while zoomed. @default true */
+    showIndicator?: boolean;
+    /** Assistive strings, merged over the English defaults. */
+    labels?: Partial<ImageZoomLabels>;
+    /** Controlled zoom state. Pair with `onZoomChange`. */
+    zoomed?: boolean;
+    /** Initial zoom state for uncontrolled usage. @default false */
+    defaultZoomed?: boolean;
+    /** Called with the next state whenever zoom toggles on or off. */
+    onZoomChange?: (zoomed: boolean) => void;
+    /** Custom image markup to zoom instead of the built-in `src` image. */
+    children?: ReactNode;
+}
+/**
+ * Inline hover/press zoom for product and detail imagery. Fine pointers zoom
+ * while hovering and the pan follows the cursor via transform-origin tracking;
+ * touch, pen, and keyboard (Enter/Space) toggle a sticky zoom centered on the
+ * last point (or the center). The root is a toggle button whose `aria-pressed`
+ * reflects the zoom state and whose accessible name folds in the image `alt`
+ * (a button's label would otherwise swallow it). The zoom state is
+ * uncontrolled by default (`defaultZoomed`) or controlled via `zoomed` +
+ * `onZoomChange`.
+ */
+export declare const ImageZoom: import("react").ForwardRefExoticComponent<ImageZoomProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { imageZoomVariants };
+//# sourceMappingURL=image-zoom.d.ts.map