@cronus-ui/ui 0.6.0

package/dist/components/chart.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../lib/cn.js";
+// Supported themes and their CSS selector prefixes.
+const THEMES = { light: "", dark: ".dark" };
+/** Map series to a ChartConfig using chart-1..5 when color is omitted. */
+export function chartSeriesConfig(series) {
+    const config = {};
+    for (const [index, item] of series.entries()) {
+        config[item.key] = {
+            label: item.label,
+            color: item.color ?? `var(--cronus-chart-${(index % 5) + 1})`,
+        };
+    }
+    return config;
+}
+const ChartContext = createContext(null);
+// Pinned locale: a bare `toLocaleString()` would format by ambient locale and
+// render differently on the server than in the browser.
+const TOOLTIP_NUMBER = new Intl.NumberFormat("en-US");
+function useChart() {
+    const context = useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+const ChartContainer = forwardRef(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, ref: ref, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-cartesian-axis-tick_text]:fill-fg-tertiary [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+});
+ChartContainer.displayName = "ChartContainer";
+// ── CSS-injection hardening ────────────────────────────────────────
+// ChartStyle injects per-chart CSS custom properties via a <style> tag
+// (dangerouslySetInnerHTML). Both the config key and the color value flow
+// into that raw CSS, so each is validated against a strict allowlist before
+// being emitted. Anything that does not match is dropped (the line is not
+// emitted) so a malicious value like `red;} body{display:none` cannot break
+// out of the declaration.
+// Keys become part of `--color-<key>`. Restrict to identifier-safe chars.
+const CHART_KEY_RE = /^[a-zA-Z0-9_-]+$/;
+// Allowed color value forms:
+//  - hex: #rgb / #rgba / #rrggbb / #rrggbbaa
+//  - functional: rgb()/rgba()/hsl()/hsla()/oklch()/oklab() with numeric args
+//    (digits, %, ., -, /, spaces and commas only — no nested fns, no ; or {})
+//  - var(--token) reference (optionally chained: var(--a, var(--b)))
+//  - a bare named token reference: letters/digits/_/- (e.g. a CSS var name or
+//    a keyword like `transparent` / `currentColor`)
+const HEX_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const FUNC_RE = /^(?:rgb|rgba|hsl|hsla|oklch|oklab)\(\s*[0-9.\-%/,\s]+\)$/;
+const VAR_RE = /^var\(\s*--[a-zA-Z0-9_-]+\s*(?:,\s*[a-zA-Z0-9_\-#%.,()/\s]+)?\)$/;
+const NAMED_RE = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
+function isSafeChartColor(value) {
+    const v = value.trim();
+    if (!v || v.length > 128) {
+        return false;
+    }
+    return HEX_RE.test(v) || FUNC_RE.test(v) || VAR_RE.test(v) || NAMED_RE.test(v);
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, conf]) => conf.theme || conf.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    // `id` is interpolated into the CSS selector; restrict it to identifier-safe
+    // chars so it cannot terminate the selector and inject arbitrary rules.
+    const safeId = CHART_KEY_RE.test(id) ? id : null;
+    if (!safeId) {
+        return null;
+    }
+    const css = Object.entries(THEMES)
+        .map(([theme, prefix]) => {
+        const decls = colorConfig
+            .map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            // Skip entries with an unsafe key or an unsafe/absent color value.
+            if (!color || typeof color !== "string" || !CHART_KEY_RE.test(key)) {
+                return null;
+            }
+            if (!isSafeChartColor(color)) {
+                return null;
+            }
+            return `  --color-${key}: ${color.trim()};`;
+        })
+            .filter(Boolean)
+            .join("\n");
+        if (!decls) {
+            return null;
+        }
+        return `${prefix} [data-chart=${safeId}] {\n${decls}\n}`;
+    })
+        .filter(Boolean)
+        .join("\n");
+    if (!css) {
+        return null;
+    }
+    return (_jsx("style", { 
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: injecting per-chart CSS vars is the canonical recharts pattern; key + color are validated against a strict allowlist above
+        dangerouslySetInnerHTML: { __html: css } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltipContent = forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelKey, nameKey, formatValue, }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        let value = typeof label === "string" || typeof label === "number" ? label : null;
+        if (labelKey) {
+            const datum = item?.payload;
+            const fromDatum = datum?.[labelKey];
+            if (typeof fromDatum === "string" || typeof fromDatum === "number") {
+                value = fromDatum;
+            }
+            else {
+                const itemConfig = getPayloadConfigFromPayload(config, item, labelKey);
+                value = itemConfig?.label ?? value;
+            }
+        }
+        else if (typeof label === "string" && config[label]?.label) {
+            value = config[label].label;
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: "text-[11px] text-fg-tertiary", children: value });
+    }, [label, labelKey, payload, hideLabel, config]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { ref: ref, className: cn("grid min-w-[10.5rem] items-start gap-2 rounded-xl border border-border bg-surface-floating px-3 py-2.5 text-xs text-fg shadow-lg transition-[opacity,transform] duration-200 ease-[cubic-bezier(.22,1,.36,1)] starting:translate-y-1 starting:opacity-0 motion-reduce:transition-none motion-reduce:starting:translate-y-0 motion-reduce:starting:opacity-100", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = item.color;
+                    return (_jsxs("div", { className: "flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-fg-tertiary", children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-full", {
+                                    "size-2": indicator === "dot",
+                                    "mt-0.5 h-3 w-0.5 rounded-sm": indicator === "line",
+                                    "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                }), style: { backgroundColor: indicatorColor } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-fg-secondary", children: itemConfig?.label || item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium tabular-nums text-fg", children: typeof item.value === "number"
+                                            ? (formatValue?.(item.value, key) ?? TOOLTIP_NUMBER.format(item.value))
+                                            : item.value }))] })] }, item.dataKey ?? index));
+                }) })] }));
+});
+ChartTooltipContent.displayName = "ChartTooltipContent";
+function readCursorLabel(payload, labelKey) {
+    const datum = payload?.[0]?.payload;
+    if (!datum)
+        return "";
+    const keys = labelKey ? [labelKey] : ["date", "day", "month", "label", "name"];
+    for (const key of keys) {
+        const value = datum[key];
+        if (typeof value === "string" && value.length > 0)
+            return value;
+        if (typeof value === "number")
+            return String(value);
+    }
+    return "";
+}
+function ChartCursor({ x, points, height = 0, top = 0, payload, labelKey, showAxisLabel = true, }) {
+    const lineX = x ?? points?.[0]?.x;
+    if (lineX == null || !Number.isFinite(lineX))
+        return null;
+    const tick = readCursorLabel(payload, labelKey);
+    const pillWidth = Math.max(48, Math.min(96, tick.length * 7 + 16));
+    return (_jsxs("g", { "data-slot": "chart-cursor", pointerEvents: "none", children: [_jsx("line", { x1: lineX, x2: lineX, y1: top, y2: top + height, className: "stroke-fg-muted", strokeWidth: 1 }), tick && showAxisLabel ? (_jsxs("g", { transform: `translate(${lineX}, ${top + height + 14})`, children: [_jsx("rect", { x: -pillWidth / 2, y: -10, width: pillWidth, height: 20, rx: 10, className: "fill-fg" }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", y: 1, className: "fill-fg-inverse text-[11px] font-medium", children: tick })] })) : null] }));
+}
+ChartCursor.displayName = "ChartCursor";
+const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegendContent = forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload.map((item, index) => {
+            const key = `${nameKey || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: "flex items-center gap-1.5 text-fg-tertiary [&>svg]:size-3 [&>svg]:text-fg-tertiary", children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: item.color } })), itemConfig?.label] }, item.value ?? index));
+        }) }));
+});
+ChartLegendContent.displayName = "ChartLegendContent";
+// Resolve the config entry for a payload item, checking the item and its nested
+// payload datum for a usable config key. Payload shapes are untyped (recharts).
+function getPayloadConfigFromPayload(config, 
+// biome-ignore lint/suspicious/noExplicitAny: recharts payload item is untyped
+payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload && typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartCursor, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 
+// Exported for unit testing of the CSS-injection allowlist. Not re-exported
+// from the package barrel, so the public API is unchanged.
+isSafeChartColor, };
+//# sourceMappingURL=chart.js.map

package/dist/components/checkbox.d.ts

@@ -0,0 +1,3 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Checkbox = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(CheckboxPrimitive.Root, { ref: ref, "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-sm border border-border bg-surface-inset shadow-xs transition-colors 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 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: _jsx(Check, { className: "size-3.5" }) }) }));
+});
+Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=checkbox.js.map

package/dist/components/chip.d.ts

@@ -0,0 +1,80 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type ReactNode } from "react";
+declare const chipVariants: (props?: ({
+    variant?: "outline" | "solid" | "soft" | null | undefined;
+    color?: "info" | "success" | "warning" | "primary" | "error" | "neutral" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    interactive?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Localizable strings rendered by {@link Chip}. Defaults are English. */
+export interface ChipLabels {
+    /**
+     * Screen-reader string for the remove affordance: the accessible name of the
+     * remove button on a non-interactive chip, and the Delete/Backspace removal
+     * hint (exposed as the chip's accessible description) on an interactive one.
+     * @default "Remove"
+     */
+    remove: string;
+}
+export interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof chipVariants>, "interactive" | "selected"> {
+    /**
+     * Visual treatment: `solid` fill, `soft` 15% tint, or `outline`.
+     * @default "soft"
+     */
+    variant?: "solid" | "soft" | "outline";
+    /**
+     * Semantic hue applied by the variant recipe.
+     * @default "neutral"
+     */
+    color?: "neutral" | "primary" | "success" | "warning" | "error" | "info";
+    /**
+     * Pill height / typography preset.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Toggle state for filter-style chips. Any non-`undefined` value renders the
+     * chip as a `<button>` with `aria-pressed`; while `true` it also gains a
+     * leading check mark and emphasized styling.
+     * @default undefined
+     */
+    selected?: boolean;
+    /** Leading icon slot rendered before the label (e.g. a lucide icon). */
+    icon?: ReactNode;
+    /** Leading avatar slot (an `img`, `Avatar`, …) clipped to a circle and sized by `size`. */
+    avatar?: ReactNode;
+    /**
+     * Makes the chip dismissible. On a static chip this renders a real,
+     * focusable remove button (Enter/Space activate it); on an interactive chip
+     * the affordance is decorative and Delete or Backspace on the focused chip
+     * removes it instead. Removal never triggers `onClick`, and removal clicks
+     * never propagate to ancestor click handlers.
+     */
+    onRemove?: () => void;
+    /**
+     * Disables the chip and its remove affordance.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Override any subset of the built-in screen-reader strings. See {@link ChipLabels}. */
+    labels?: Partial<ChipLabels>;
+}
+/**
+ * Interactive filter / selection chip. Where {@link Badge} is a static status
+ * label, Chip is a control: give it `onClick` and/or `selected` and it renders
+ * as a real `<button>` (Enter/Space activate natively, `aria-pressed` carries
+ * the toggle state); leave both off and it stays a server-safe `<span>`. A
+ * `selected`-only chip attaches no event handlers, so it can also render from
+ * a Server Component as a display-only pressed button.
+ * `onRemove` adds a dismiss affordance plus Delete/Backspace removal.
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLElement>>;
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name announcing what the chip collection represents. */
+    "aria-label"?: string;
+}
+/** Flex-wrap layout for a set of related chips, exposed as a labelled `role="group"`. */
+export declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export { chipVariants };
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Check, X } from "lucide-react";
+import { forwardRef, useId, } from "react";
+import { cn } from "../lib/cn.js";
+const chipVariants = cva("inline-flex items-center whitespace-nowrap rounded-full border 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 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
+    variants: {
+        variant: {
+            solid: "border-transparent shadow-xs",
+            soft: "border-transparent",
+            outline: "bg-transparent",
+        },
+        // Colour recipes depend on the variant, so they live in compoundVariants.
+        color: {
+            neutral: "",
+            primary: "",
+            success: "",
+            warning: "",
+            error: "",
+            info: "",
+        },
+        size: {
+            sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3 [&_[data-slot=chip-avatar]]:size-4",
+            md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5 [&_[data-slot=chip-avatar]]:size-5",
+            lg: "h-8 gap-2 px-3 text-sm [&_svg]:size-4 [&_[data-slot=chip-avatar]]:size-6",
+        },
+        // Derived from `onClick`/`selected` inside the component — not public props.
+        interactive: {
+            true: "cursor-pointer select-none active:scale-[0.97]",
+            false: "",
+        },
+        selected: {
+            true: "font-semibold",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // ── solid ── filled pills. `neutral` is the inverse fill (`fg-inverse`
+        // is the AA-paired text token for an `fg` surface) and `primary` rides
+        // its paired foreground token. The semantic hues have no paired
+        // foreground, so they reuse the Button technique: darken the fill 30%
+        // toward black in OKLCH so white text clears >=4.5:1 on every theme/mode
+        // (see button.tsx `destructive` — the raw fills are too light for white).
+        { variant: "solid", color: "neutral", class: "bg-fg text-fg-inverse" },
+        { variant: "solid", color: "primary", class: "bg-primary text-primary-foreground" },
+        {
+            variant: "solid",
+            color: "success",
+            class: "bg-[color-mix(in_oklch,var(--cronus-success),black_30%)] text-white",
+        },
+        {
+            variant: "solid",
+            color: "warning",
+            class: "bg-[color-mix(in_oklch,var(--cronus-warning),black_30%)] text-white",
+        },
+        {
+            variant: "solid",
+            color: "error",
+            class: "bg-[color-mix(in_oklch,var(--cronus-error),black_30%)] text-white",
+        },
+        {
+            variant: "solid",
+            color: "info",
+            class: "bg-[color-mix(in_oklch,var(--cronus-info),black_30%)] text-white",
+        },
+        // ── soft ── 15% tints. Same-hue text on a tint can read <4.5:1, so the
+        // label uses the AA-tuned `*-strong` text variants (tokens contract).
+        { variant: "soft", color: "neutral", class: "bg-surface-overlay text-fg" },
+        { variant: "soft", color: "primary", class: "bg-primary/15 text-primary-strong" },
+        { variant: "soft", color: "success", class: "bg-success/15 text-success-strong" },
+        { variant: "soft", color: "warning", class: "bg-warning/15 text-warning-strong" },
+        { variant: "soft", color: "error", class: "bg-error/15 text-error-strong" },
+        { variant: "soft", color: "info", class: "bg-info/15 text-info-strong" },
+        // ── outline ── bordered, transparent fill; text again on `*-strong`.
+        { variant: "outline", color: "neutral", class: "border-border text-fg" },
+        { variant: "outline", color: "primary", class: "border-primary/50 text-primary-strong" },
+        { variant: "outline", color: "success", class: "border-success/50 text-success-strong" },
+        { variant: "outline", color: "warning", class: "border-warning/50 text-warning-strong" },
+        { variant: "outline", color: "error", class: "border-error/50 text-error-strong" },
+        { variant: "outline", color: "info", class: "border-info/50 text-info-strong" },
+        // Hover affordances only when the chip is a real control. `currentColor`
+        // keeps them hue-correct for every color without another 18 entries.
+        { interactive: true, variant: "solid", class: "hover:opacity-90" },
+        { interactive: true, variant: "soft", class: "hover:border-current/40" },
+        { interactive: true, variant: "outline", class: "hover:bg-current/10" },
+        // Selection emphasis (the leading check mark is rendered by the
+        // component). Listed last so tailwind-merge resolves border/background
+        // conflicts in its favor.
+        {
+            selected: true,
+            variant: "soft",
+            class: "border-current/50 hover:border-current/50",
+        },
+        {
+            selected: true,
+            variant: "outline",
+            class: "border-current bg-current/10 hover:border-current",
+        },
+    ],
+    defaultVariants: {
+        variant: "soft",
+        color: "neutral",
+        size: "md",
+        interactive: false,
+        selected: false,
+    },
+});
+const DEFAULT_LABELS = { remove: "Remove" };
+const REMOVE_AFFORDANCE_CLASSES = "ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-70 transition-opacity duration-150 hover:opacity-100";
+/**
+ * Interactive filter / selection chip. Where {@link Badge} is a static status
+ * label, Chip is a control: give it `onClick` and/or `selected` and it renders
+ * as a real `<button>` (Enter/Space activate natively, `aria-pressed` carries
+ * the toggle state); leave both off and it stays a server-safe `<span>`. A
+ * `selected`-only chip attaches no event handlers, so it can also render from
+ * a Server Component as a display-only pressed button.
+ * `onRemove` adds a dismiss affordance plus Delete/Backspace removal.
+ */
+export const Chip = forwardRef(({ className, variant, color, size, selected, icon, avatar, onRemove, labels, disabled = false, onClick, onKeyDown, children, ...props }, ref) => {
+    const isInteractive = onClick !== undefined || selected !== undefined;
+    const dismissible = onRemove !== undefined;
+    const removeLabel = labels?.remove ?? DEFAULT_LABELS.remove;
+    // `selected` is a serializable boolean, so a display-only selected chip is
+    // legitimately reachable from a Server Component — where function props on
+    // host elements throw. Handlers are therefore only attached when they can
+    // do something (`onClick` routing or removal); a selected-only chip renders
+    // a handler-free `<button aria-pressed>`.
+    const attachesClickHandler = isInteractive && (onClick !== undefined || dismissible);
+    const describesRemoval = isInteractive && dismissible;
+    const removeHintId = useId();
+    // Delete/Backspace removes the focused chip (interactive chips only — the
+    // static variant exposes a real, focusable remove button instead).
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled)
+            return;
+        if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            onRemove?.();
+        }
+    };
+    // A real <button> may not nest inside the chip button (invalid HTML + axe
+    // `nested-interactive`), so the interactive chip renders its remove
+    // affordance as a decorative span and routes clicks on it here — removal
+    // must never activate the chip's own onClick.
+    const handleInteractiveClick = (event) => {
+        const target = event.target;
+        if (dismissible && target.closest("[data-slot=chip-remove]") !== null) {
+            // Same contract as the static path's remove button: removal clicks
+            // stay inside the chip and never reach ancestor click handlers.
+            event.stopPropagation();
+            onRemove?.();
+            return;
+        }
+        onClick?.(event);
+    };
+    const handleRemoveClick = (event) => {
+        // Keep the removal click from reaching any ancestor click handlers.
+        event.stopPropagation();
+        onRemove?.();
+    };
+    // Single render path for both elements; the cast is safe because every
+    // button-only attribute below is gated on `isInteractive`.
+    const Comp = (isInteractive ? "button" : "span");
+    return (_jsxs(Comp
+    // The root is a <button> or a <span>; the forwarded ref is typed as
+    // their shared supertype and narrowed here.
+    , { 
+        // The root is a <button> or a <span>; the forwarded ref is typed as
+        // their shared supertype and narrowed here.
+        ref: ref, "data-slot": "chip", type: isInteractive ? "button" : undefined, disabled: isInteractive ? disabled : undefined, "data-disabled": disabled ? "" : undefined, "data-selected": selected ? "" : undefined, "aria-pressed": selected === undefined ? undefined : selected, "aria-keyshortcuts": describesRemoval ? "Delete Backspace" : undefined, "aria-describedby": describesRemoval ? removeHintId : undefined, className: cn(chipVariants({
+            variant,
+            color,
+            size,
+            interactive: isInteractive,
+            selected: selected === true,
+        }), className), onClick: attachesClickHandler ? handleInteractiveClick : onClick, onKeyDown: isInteractive && dismissible ? handleKeyDown : onKeyDown, ...props, children: [selected ? _jsx(Check, { "aria-hidden": "true", "data-slot": "chip-check" }) : null, avatar ? (_jsx("span", { "data-slot": "chip-avatar", "aria-hidden": "true", className: "-ms-1 inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full [&>img]:size-full [&>img]:object-cover", children: avatar })) : null, icon ? (_jsx("span", { "data-slot": "chip-icon", "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", children: icon })) : null, children, dismissible ? (isInteractive ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "chip-remove", "aria-hidden": "true", className: REMOVE_AFFORDANCE_CLASSES, children: _jsx(X, {}) }), _jsxs("span", { id: removeHintId, hidden: true, children: [removeLabel, ": Delete"] })] })) : (_jsxs("button", { type: "button", "data-slot": "chip-remove", disabled: disabled, className: cn(REMOVE_AFFORDANCE_CLASSES, "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"), onClick: handleRemoveClick, children: [_jsx(X, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: removeLabel })] }))) : null] }));
+});
+Chip.displayName = "Chip";
+/** Flex-wrap layout for a set of related chips, exposed as a labelled `role="group"`. */
+export const ChipGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "chip-group", role: "group", className: cn("flex flex-wrap items-center gap-2", className), ...props }));
+});
+ChipGroup.displayName = "ChipGroup";
+export { chipVariants };
+//# sourceMappingURL=chip.js.map

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+export interface ChoroplethRegion {
+    id: string;
+    name: string;
+    value: number;
+}
+export declare const CHOROPLETH_DEMO: ChoroplethRegion[];
+export interface ChoroplethChartProps extends HTMLAttributes<HTMLDivElement> {
+    data?: ChoroplethRegion[];
+}
+export declare function ChoroplethChart({ data, className, ...props }: ChoroplethChartProps): import("react").JSX.Element;
+//# sourceMappingURL=choropleth-chart.d.ts.map

package/dist/components/choropleth-chart.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+export const CHOROPLETH_DEMO = [
+    { id: "nw", name: "Northwest", value: 42 },
+    { id: "ne", name: "Northeast", value: 78 },
+    { id: "w", name: "West", value: 31 },
+    { id: "c", name: "Central", value: 95 },
+    { id: "e", name: "East", value: 58 },
+    { id: "sw", name: "Southwest", value: 22 },
+    { id: "se", name: "Southeast", value: 67 },
+];
+const CELLS = {
+    nw: "M10 10 h 80 v 50 h -80 z",
+    ne: "M100 10 h 80 v 50 h -80 z",
+    w: "M10 70 h 50 v 50 h -50 z",
+    c: "M70 70 h 50 v 50 h -50 z",
+    e: "M130 70 h 50 v 50 h -50 z",
+    sw: "M10 130 h 80 v 50 h -80 z",
+    se: "M100 130 h 80 v 50 h -80 z",
+};
+export function ChoroplethChart({ data = CHOROPLETH_DEMO, className, ...props }) {
+    const max = data.reduce((acc, item) => Math.max(acc, item.value), 1);
+    return (_jsx("div", { "data-slot": "choropleth-chart", className: cn("h-64 w-full", className), ...props, children: _jsx("svg", { viewBox: "0 0 200 190", className: "h-full w-full", "aria-hidden": "true", children: data.map((region) => {
+                const d = CELLS[region.id];
+                if (!d)
+                    return null;
+                const opacity = 0.15 + (region.value / max) * 0.85;
+                return (_jsx("path", { d: d, className: "fill-primary stroke-border", style: { fillOpacity: opacity }, children: _jsx("title", { children: `${region.name}: ${region.value}` }) }, region.id));
+            }) }) }));
+}
+//# sourceMappingURL=choropleth-chart.js.map

package/dist/components/click-spark.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface ClickSparkProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Number of sparks emitted per click.
+     * @default 8
+     */
+    sparkCount?: number;
+}
+/**
+ * Emits a burst of sparks from the pointer on click. Sparks are decorative
+ * (`aria-hidden`) and skipped entirely when the visitor prefers reduced
+ * motion. Children stay fully interactive.
+ */
+export declare function ClickSpark({ ref, className, children, sparkCount, onPointerDown, ...props }: ClickSparkProps): import("react").JSX.Element;
+export declare namespace ClickSpark {
+    var displayName: string;
+}
+//# sourceMappingURL=click-spark.d.ts.map

package/dist/components/click-spark.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const SPARK_KEYFRAMES = "@keyframes cronus-click-spark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}";
+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);
+}
+/**
+ * Emits a burst of sparks from the pointer on click. Sparks are decorative
+ * (`aria-hidden`) and skipped entirely when the visitor prefers reduced
+ * motion. Children stay fully interactive.
+ */
+export function ClickSpark({ ref, className, children, sparkCount = 8, onPointerDown, ...props }) {
+    const [sparks, setSparks] = useState([]);
+    const nextId = useRef(0);
+    const count = Math.min(24, Math.max(3, Math.round(finiteOr(sparkCount, 8))));
+    const handlePointerDown = useCallback((event) => {
+        onPointerDown?.(event);
+        if (prefersReducedMotion())
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const spark = {
+            id: nextId.current++,
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+        setSparks((current) => [...current.slice(-8), spark]);
+        window.setTimeout(() => {
+            setSparks((current) => current.filter((item) => item.id !== spark.id));
+        }, 520);
+    }, [onPointerDown]);
+    return (_jsxs("div", { ref: ref, "data-slot": "click-spark", className: cn("relative", className), onPointerDown: handlePointerDown, ...props, children: [_jsx("style", { children: SPARK_KEYFRAMES }), _jsx("div", { className: "relative", children: children }), _jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden", children: sparks.map((spark) => Array.from({ length: count }, (_, index) => {
+                    const angle = (index / count) * Math.PI * 2;
+                    const distance = 18 + (index % 3) * 6;
+                    return (_jsx("span", { className: "absolute size-1 rounded-full bg-primary [animation-duration:500ms] [animation-fill-mode:forwards] [animation-name:cronus-click-spark] [animation-timing-function:cubic-bezier(.22,1,.36,1)]", style: {
+                            left: spark.x,
+                            top: spark.y,
+                            // contract-ok: spark origin is a physical pointer coordinate
+                            ["--dx"]: `${Math.cos(angle) * distance}px`,
+                            ["--dy"]: `${Math.sin(angle) * distance}px`,
+                        } }, `${spark.id}-${index}`));
+                })) })] }));
+}
+ClickSpark.displayName = "ClickSpark";
+//# sourceMappingURL=click-spark.js.map

package/dist/components/code-block.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from "react";
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Raw source to render and copy. */
+    code: string;
+    /** Language label rendered as a Badge in the header. */
+    language?: string;
+    /** File name rendered in the header. */
+    filename?: string;
+    /** Render a gutter with 1-based line numbers. Defaults to false. */
+    showLineNumbers?: boolean;
+}
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=code-block.d.ts.map