@cronus-ui/ui 0.6.0

package/dist/components/status-dot.d.ts

@@ -0,0 +1,60 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+declare const statusDotVariants: (props?: ({
+    status?: "info" | "success" | "warning" | "error" | "offline" | "online" | "neutral" | "busy" | "away" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    ring?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StatusDotStatus = NonNullable<VariantProps<typeof statusDotVariants>["status"]>;
+type StatusDotSize = NonNullable<VariantProps<typeof statusDotVariants>["size"]>;
+type StatusDotPosition = "top-right" | "bottom-right" | "none";
+export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof statusDotVariants> {
+    /**
+     * Presence / semantic state the dot communicates. Drives the fill color and
+     * the default accessible name.
+     * @default "online"
+     */
+    status?: StatusDotStatus;
+    /**
+     * Dot size preset.
+     * @default "md"
+     */
+    size?: StatusDotSize;
+    /**
+     * Draws a surface-colored ring around the dot so it cuts out cleanly when
+     * overlaid on an avatar or icon.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * Status text. Rendered next to the dot when `withLabel` is set; otherwise
+     * rendered as visually-hidden live-region content so screen readers
+     * announce both the initial status and later `status` changes.
+     * @default The English name of `status` (e.g. `"Online"`).
+     */
+    label?: string;
+    /**
+     * Renders `label` visibly next to the dot (in `text-fg-secondary`) instead
+     * of exposing it only to assistive technology.
+     * @default false
+     */
+    withLabel?: boolean;
+    /**
+     * Animates an expanding "ping" halo behind the dot to draw attention. The
+     * halo reuses the dot's fill; the hollow `offline` dot gets a matching
+     * outline halo instead (its fill is transparent). The animation only runs
+     * for users who have not requested reduced motion.
+     * @default false
+     */
+    pulse?: boolean;
+    /**
+     * Absolute corner anchor for overlaying the dot on an avatar or icon —
+     * place the component inside a `relative` wrapper. The "right" corners map
+     * to the inline end, so they mirror under RTL.
+     * @default "none"
+     */
+    position?: StatusDotPosition;
+}
+export declare const StatusDot: import("react").ForwardRefExoticComponent<StatusDotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { statusDotVariants };
+//# sourceMappingURL=status-dot.d.ts.map

package/dist/components/status-dot.js

@@ -0,0 +1,76 @@
+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 statusDotVariants = cva("relative inline-block shrink-0 rounded-full", {
+    variants: {
+        status: {
+            online: "bg-success",
+            // Hollow outline so "offline" reads as absence and stays distinguishable
+            // without relying on color alone. The gray is a glyph fill, not text.
+            offline: "border-2 border-fg-muted bg-transparent",
+            busy: "bg-error",
+            away: "bg-warning",
+            success: "bg-success",
+            warning: "bg-warning",
+            error: "bg-error",
+            info: "bg-info",
+            neutral: "bg-fg-muted",
+        },
+        size: {
+            xs: "size-1.5",
+            sm: "size-2",
+            md: "size-2.5",
+            lg: "size-3",
+        },
+        ring: {
+            // Surface-colored ring that cuts the dot out of whatever sits behind it
+            // (matches AvatarGroup's overlap ring) — for badge-on-avatar overlays.
+            true: "ring-2 ring-surface-base",
+            false: "",
+        },
+    },
+    defaultVariants: { status: "online", size: "md", ring: false },
+});
+/** Default English name per status; override via `label` for i18n. */
+const DEFAULT_STATUS_LABELS = {
+    online: "Online",
+    offline: "Offline",
+    busy: "Busy",
+    away: "Away",
+    success: "Success",
+    warning: "Warning",
+    error: "Error",
+    info: "Info",
+    neutral: "Neutral",
+};
+// Corner anchors for badge-on-avatar composition. "right" maps to the inline
+// end (`end-0`), so the dot mirrors automatically under RTL.
+const POSITION_CLASSES = {
+    "top-right": "absolute top-0 end-0",
+    "bottom-right": "absolute bottom-0 end-0",
+    none: "",
+};
+const GAP_CLASSES = {
+    xs: "gap-1",
+    sm: "gap-1.5",
+    md: "gap-1.5",
+    lg: "gap-2",
+};
+const LABEL_SIZE_CLASSES = {
+    xs: "text-xs",
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+};
+export const StatusDot = forwardRef(({ className, status, size, ring, label, withLabel = false, pulse = false, position = "none", ...props }, ref) => {
+    const resolvedStatus = status ?? "online";
+    const resolvedSize = size ?? "md";
+    const resolvedLabel = label ?? DEFAULT_STATUS_LABELS[resolvedStatus];
+    return (_jsxs("span", { ref: ref, "data-slot": "status-dot", "data-status": resolvedStatus, role: "status", className: cn("inline-flex items-center", GAP_CLASSES[resolvedSize], POSITION_CLASSES[position], className), ...props, children: [_jsx("span", { "aria-hidden": "true", "data-slot": "status-dot-indicator", className: statusDotVariants({ status: resolvedStatus, size: resolvedSize, ring }), children: pulse ? (_jsx("span", { "data-slot": "status-dot-ping", className: cn("absolute rounded-full opacity-75 motion-safe:animate-ping", resolvedStatus === "offline"
+                        ? "-inset-0.5 border-2 border-fg-muted"
+                        : "inset-0 bg-inherit") })) : null }), withLabel ? (_jsx("span", { "data-slot": "status-dot-label", className: cn("text-fg-secondary", LABEL_SIZE_CLASSES[resolvedSize]), children: resolvedLabel })) : (_jsx("span", { "data-slot": "status-dot-sr-label", className: "sr-only", children: resolvedLabel }))] }));
+});
+StatusDot.displayName = "StatusDot";
+export { statusDotVariants };
+//# sourceMappingURL=status-dot.js.map

package/dist/components/stepper.d.ts

@@ -0,0 +1,98 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes, type HTMLAttributes, type OlHTMLAttributes } from "react";
+type StepperOrientation = "horizontal" | "vertical";
+/**
+ * Screen-reader-only step-state announcements. Pass any subset via the
+ * `labels` prop on {@link Stepper} to localize; omitted keys keep their
+ * English defaults.
+ */
+export interface StepperLabels {
+    /** Announced after a completed step. */
+    completed: string;
+    /** Announced after the active step. */
+    current: string;
+    /** Announced after a step that has not started yet. */
+    upcoming: string;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Controlled active step index. When provided the stepper is fully controlled. */
+    value?: number;
+    /** Initial active step index for the uncontrolled case. Defaults to `0`. */
+    defaultValue?: number;
+    /** Called whenever a step should become active (controlled or not). */
+    onValueChange?: (value: number) => void;
+    /** Layout axis. Defaults to `"horizontal"`. */
+    orientation?: StepperOrientation;
+    /** Localize the sr-only step-state announcements. See {@link StepperLabels}. */
+    labels?: Partial<StepperLabels>;
+}
+/**
+ * Root of a multi-step / wizard progress indicator. Owns the active step index
+ * (controlled via `value` + `onValueChange`, or uncontrolled via `defaultValue`)
+ * and broadcasts the orientation through context. Renders nothing itself beyond
+ * a layout wrapper — compose {@link StepperItem}s (and an inner ordered list)
+ * inside it. SSR-safe: state is derived synchronously with no effects.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Ordered list landmark wrapping the steps. Pure layout — lays the items out
+ * along the stepper's axis. Optional (a consumer may bring their own `<ol>`),
+ * but provided for the common case so the steps read as an ordered list to AT.
+ */
+export declare const StepperList: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & import("react").RefAttributes<HTMLOListElement>>;
+export interface StepperItemProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * This step's zero-based index. Required so the item can derive its state
+     * (completed / active / upcoming) from the stepper's active value.
+     */
+    step: number;
+    /** Mark the step done explicitly. Overrides the index-derived "completed". */
+    completed?: boolean;
+    /** Disable interaction + dim the step. */
+    disabled?: boolean;
+}
+/**
+ * A single step. Computes its state relative to the active step — earlier steps
+ * are `completed`, the current one is `active`, later ones are `upcoming` — and
+ * exposes it (plus its index and disabled flag) to descendants through context.
+ * Renders an `<li>`; carries `aria-current="step"` on the active step and
+ * appends an sr-only state suffix ("completed" / "current" / "not started",
+ * localizable via the stepper's `labels` prop) — the visual state is otherwise
+ * color/icon-only, which screen readers cannot perceive.
+ */
+export declare const StepperItem: import("react").ForwardRefExoticComponent<StepperItemProps & import("react").RefAttributes<HTMLLIElement>>;
+declare const stepperIndicatorVariants: (props?: ({
+    state?: "active" | "completed" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StepperIndicatorProps extends HTMLAttributes<HTMLSpanElement>, Omit<VariantProps<typeof stepperIndicatorVariants>, "state"> {
+    /** Override the auto-rendered content (step number / check). */
+    children?: HTMLAttributes<HTMLSpanElement>["children"];
+}
+/**
+ * The numbered circle for a step. Shows a {@link Check} once the step is
+ * completed, the 1-based step number while it is active or upcoming, and styles
+ * itself from the item state (active = solid primary, completed = tinted, else
+ * muted). Pass `children` to render custom content (e.g. an icon).
+ */
+export declare const StepperIndicator: import("react").ForwardRefExoticComponent<StepperIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+/**
+ * The connector line between two steps. Fills with `bg-primary` once the
+ * preceding step is complete and stays `bg-border` otherwise; orients itself
+ * along the stepper axis. Decorative — hidden from assistive tech.
+ */
+export declare const StepperSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export interface StepperTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Optional clickable wrapper that activates its step on press. Inherits the
+ * item's `disabled` state, forwards keyboard/focus semantics as a real
+ * `<button>`, and is a no-op when the step is already active. Wrap the
+ * indicator + title/description in it to make a step navigable.
+ */
+export declare const StepperTrigger: import("react").ForwardRefExoticComponent<StepperTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** The short label for a step. Brightens to `text-fg` once active or completed. */
+export declare const StepperTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Optional secondary line under a {@link StepperTitle}. */
+export declare const StepperDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { stepperIndicatorVariants };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_LABELS = {
+    completed: "completed",
+    current: "current",
+    upcoming: "not started",
+};
+const StepperContext = createContext(null);
+function useStepper(component) {
+    const context = useContext(StepperContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <Stepper>.`);
+    }
+    return context;
+}
+const StepperItemContext = createContext(null);
+function useStepperItem(component) {
+    const context = useContext(StepperItemContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <StepperItem>.`);
+    }
+    return context;
+}
+/**
+ * Root of a multi-step / wizard progress indicator. Owns the active step index
+ * (controlled via `value` + `onValueChange`, or uncontrolled via `defaultValue`)
+ * and broadcasts the orientation through context. Renders nothing itself beyond
+ * a layout wrapper — compose {@link StepperItem}s (and an inner ordered list)
+ * inside it. SSR-safe: state is derived synchronously with no effects.
+ */
+export const Stepper = forwardRef(({ value: valueProp, defaultValue = 0, onValueChange, orientation = "horizontal", labels, className, children, ...props }, ref) => {
+    // Uncontrolled state lives here; a provided `value` makes it controlled.
+    // Plain useState (no effects) keeps the first paint correct on both the
+    // server and the client.
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const setValue = useCallback((next) => {
+        if (next === value) {
+            return;
+        }
+        if (!isControlled) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    }, [value, isControlled, onValueChange]);
+    const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+    const contextValue = useMemo(() => ({ value, setValue, orientation, labels: mergedLabels }), [value, setValue, orientation, mergedLabels]);
+    return (_jsx(StepperContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, "data-slot": "stepper", "data-orientation": orientation, className: cn("group/stepper flex w-full", orientation === "vertical" ? "flex-col" : "flex-row", className), ...props, children: children }) }));
+});
+Stepper.displayName = "Stepper";
+/* ------------------------------------------------------------------ *
+ * Stepper list
+ * ------------------------------------------------------------------ */
+/**
+ * Ordered list landmark wrapping the steps. Pure layout — lays the items out
+ * along the stepper's axis. Optional (a consumer may bring their own `<ol>`),
+ * but provided for the common case so the steps read as an ordered list to AT.
+ */
+export const StepperList = forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useStepper("StepperList");
+    return (_jsx("ol", { ref: ref, "data-slot": "stepper-list", "data-orientation": orientation, className: cn("flex w-full", orientation === "vertical" ? "flex-col" : "flex-row items-center", className), ...props }));
+});
+StepperList.displayName = "StepperList";
+/**
+ * A single step. Computes its state relative to the active step — earlier steps
+ * are `completed`, the current one is `active`, later ones are `upcoming` — and
+ * exposes it (plus its index and disabled flag) to descendants through context.
+ * Renders an `<li>`; carries `aria-current="step"` on the active step and
+ * appends an sr-only state suffix ("completed" / "current" / "not started",
+ * localizable via the stepper's `labels` prop) — the visual state is otherwise
+ * color/icon-only, which screen readers cannot perceive.
+ */
+export const StepperItem = forwardRef(({ step, completed, disabled = false, className, children, ...props }, ref) => {
+    const { value, orientation, labels } = useStepper("StepperItem");
+    const state = completed || step < value ? "completed" : step === value ? "active" : "upcoming";
+    const stateLabel = state === "completed"
+        ? labels.completed
+        : state === "active"
+            ? labels.current
+            : labels.upcoming;
+    const itemContext = useMemo(() => ({ step, state, disabled }), [step, state, disabled]);
+    return (_jsx(StepperItemContext.Provider, { value: itemContext, children: _jsxs("li", { ref: ref, "data-slot": "stepper-item", "data-state": state, "data-orientation": orientation, "data-disabled": disabled || undefined, "aria-current": state === "active" ? "step" : undefined, className: cn("group/step relative flex", orientation === "vertical" ? "flex-col" : "flex-row items-center not-last:flex-1", className), ...props, children: [children, _jsx("span", { "data-slot": "stepper-item-state", className: "sr-only", children: stateLabel })] }) }));
+});
+StepperItem.displayName = "StepperItem";
+/* ------------------------------------------------------------------ *
+ * Stepper indicator
+ * ------------------------------------------------------------------ */
+const stepperIndicatorVariants = cva(cn("inline-flex size-8 shrink-0 select-none items-center justify-center rounded-full text-sm font-medium", "transition-[background,color,border-color] duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "[&_svg]:size-4 [&_svg]:shrink-0"), {
+    variants: {
+        state: {
+            completed: "bg-primary/15 text-primary-strong",
+            active: "bg-primary text-white shadow-xs",
+            upcoming: "border border-border bg-surface-overlay text-fg-tertiary",
+        },
+    },
+    defaultVariants: { state: "upcoming" },
+});
+/**
+ * The numbered circle for a step. Shows a {@link Check} once the step is
+ * completed, the 1-based step number while it is active or upcoming, and styles
+ * itself from the item state (active = solid primary, completed = tinted, else
+ * muted). Pass `children` to render custom content (e.g. an icon).
+ */
+export const StepperIndicator = forwardRef(({ className, children, ...props }, ref) => {
+    const { step, state } = useStepperItem("StepperIndicator");
+    return (_jsx("span", { ref: ref, "data-slot": "stepper-indicator", "data-state": state, className: cn(stepperIndicatorVariants({ state }), className), ...props, children: children ??
+            (state === "completed" ? (_jsx(Check, { "aria-hidden": "true", strokeWidth: 2.5 })) : (_jsx("span", { children: step + 1 }))) }));
+});
+StepperIndicator.displayName = "StepperIndicator";
+/* ------------------------------------------------------------------ *
+ * Stepper separator
+ * ------------------------------------------------------------------ */
+/**
+ * The connector line between two steps. Fills with `bg-primary` once the
+ * preceding step is complete and stays `bg-border` otherwise; orients itself
+ * along the stepper axis. Decorative — hidden from assistive tech.
+ */
+export const StepperSeparator = forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useStepper("StepperSeparator");
+    const { state } = useStepperItem("StepperSeparator");
+    const filled = state === "completed";
+    return (_jsx("div", { ref: ref, "data-slot": "stepper-separator", "data-state": filled ? "completed" : "incomplete", "aria-hidden": "true", className: cn("shrink-0 rounded-full transition-colors duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", filled ? "bg-primary" : "bg-border", orientation === "vertical" ? "mx-auto my-1 w-px flex-1" : "mx-2 h-px flex-1", className), ...props }));
+});
+StepperSeparator.displayName = "StepperSeparator";
+/**
+ * Optional clickable wrapper that activates its step on press. Inherits the
+ * item's `disabled` state, forwards keyboard/focus semantics as a real
+ * `<button>`, and is a no-op when the step is already active. Wrap the
+ * indicator + title/description in it to make a step navigable.
+ */
+export const StepperTrigger = forwardRef(({ className, disabled, type, onClick, ...props }, ref) => {
+    const { setValue } = useStepper("StepperTrigger");
+    const { step, disabled: itemDisabled } = useStepperItem("StepperTrigger");
+    const isDisabled = disabled ?? itemDisabled;
+    return (_jsx("button", { ref: ref, type: type ?? "button", "data-slot": "stepper-trigger", disabled: isDisabled, className: cn("inline-flex items-center gap-3 rounded-lg text-left", "transition-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:pointer-events-none disabled:opacity-50", "not-disabled:cursor-pointer", className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            setValue(step);
+        }, ...props }));
+});
+StepperTrigger.displayName = "StepperTrigger";
+/* ------------------------------------------------------------------ *
+ * Stepper title / description
+ * ------------------------------------------------------------------ */
+/** The short label for a step. Brightens to `text-fg` once active or completed. */
+export const StepperTitle = forwardRef(({ className, ...props }, ref) => {
+    const { state } = useStepperItem("StepperTitle");
+    return (_jsx("div", { ref: ref, "data-slot": "stepper-title", className: cn("text-sm font-medium leading-none", state === "upcoming" ? "text-fg-tertiary" : "text-fg", className), ...props }));
+});
+StepperTitle.displayName = "StepperTitle";
+/** Optional secondary line under a {@link StepperTitle}. */
+export const StepperDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "stepper-description", className: cn("mt-1 text-xs text-fg-secondary", className), ...props }));
+});
+StepperDescription.displayName = "StepperDescription";
+export { stepperIndicatorVariants };
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+export interface SunburstNode {
+    name: string;
+    value?: number;
+    children?: SunburstNode[];
+}
+export interface SunburstChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: SunburstNode[];
+}
+export declare function SunburstChart({ data, className, ...props }: SunburstChartProps): import("react").JSX.Element;
+//# sourceMappingURL=sunburst-chart.d.ts.map

package/dist/components/sunburst-chart.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../lib/cn.js";
+function polar(cx, cy, r, a) {
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+}
+function arcPath(cx, cy, r0, r1, a0, a1) {
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    const [x0, y0] = polar(cx, cy, r1, a0);
+    const [x1, y1] = polar(cx, cy, r1, a1);
+    const [x2, y2] = polar(cx, cy, r0, a1);
+    const [x3, y3] = polar(cx, cy, r0, a0);
+    return `M ${x0} ${y0} A ${r1} ${r1} 0 ${large} 1 ${x1} ${y1} L ${x2} ${y2} A ${r0} ${r0} 0 ${large} 0 ${x3} ${y3} Z`;
+}
+export function SunburstChart({ data, className, ...props }) {
+    const slices = useMemo(() => {
+        const total = data.reduce((acc, node) => acc + (node.value ?? 0), 0) || 1;
+        let angle = -Math.PI / 2;
+        const out = [];
+        data.forEach((node, index) => {
+            const span = ((node.value ?? 0) / total) * Math.PI * 2;
+            out.push({
+                d: arcPath(100, 100, 36, 64, angle, angle + span),
+                color: `var(--cronus-chart-${(index % 5) + 1})`,
+                name: node.name,
+            });
+            const kids = node.children ?? [];
+            const kidTotal = kids.reduce((acc, child) => acc + (child.value ?? 0), 0) || 1;
+            let inner = angle;
+            for (const child of kids) {
+                const kidSpan = ((child.value ?? 0) / kidTotal) * span;
+                out.push({
+                    d: arcPath(100, 100, 66, 94, inner, inner + kidSpan),
+                    color: `var(--cronus-chart-${((index + 1) % 5) + 1})`,
+                    name: child.name,
+                });
+                inner += kidSpan;
+            }
+            angle += span;
+        });
+        return out;
+    }, [data]);
+    return (_jsx("div", { "data-slot": "sunburst-chart", className: cn("h-64 w-full", className), ...props, children: _jsx("svg", { viewBox: "0 0 200 200", className: "mx-auto h-full", role: "img", "aria-label": "Sunburst chart", children: slices.map((slice) => (_jsx("path", { d: slice.d, fill: slice.color, children: _jsx("title", { children: slice.name }) }, `${slice.name}-${slice.d.slice(0, 24)}`))) }) }));
+}
+//# sourceMappingURL=sunburst-chart.js.map

package/dist/components/switch.d.ts

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

package/dist/components/switch.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Switch = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(SwitchPrimitive.Root, { ref: ref, "data-slot": "switch", className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-fg-tertiary 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 aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block size-4 rounded-full bg-primary-foreground shadow-sm ring-0 transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" }) }));
+});
+Switch.displayName = "Switch";
+//# sourceMappingURL=switch.js.map

package/dist/components/table-of-contents.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes } from "react";
+/** One entry in the table of contents, linking to a heading by its `id`. */
+export interface TableOfContentsItem {
+    /** The `id` of the heading element this entry links to. */
+    id: string;
+    /** Visible link text. */
+    label: string;
+    /**
+     * Nesting level, `0`-based — each level indents the link one step further.
+     * Defaults to `0`.
+     */
+    depth?: number;
+}
+export interface TableOfContentsProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * The entries to render, in document order. When omitted, headings are
+     * auto-discovered from the DOM via {@link TableOfContentsProps.selector}.
+     */
+    items?: TableOfContentsItem[];
+    /**
+     * CSS selector used to auto-discover headings when
+     * {@link TableOfContentsProps.items} is omitted. Only elements with an `id`
+     * participate; depth is derived from the heading level (the shallowest level
+     * found becomes depth 0). Defaults to `"h2, h3"`.
+     */
+    selector?: string;
+    /**
+     * `id` of the element that scopes heading discovery. When that element is
+     * itself a scroll container (`overflow-y: auto | scroll`), it also becomes
+     * the scrollspy root and the target of click-to-scroll — otherwise the
+     * window scrolls. Defaults to the whole document.
+     */
+    containerId?: string;
+    /**
+     * Pixels between the top of the scroll root and the activation line — match
+     * your sticky-header height. Also subtracted when scrolling to a section on
+     * click. Defaults to `0`.
+     */
+    offset?: number;
+}
+/**
+ * A scrollspy "On this page" table of contents. Section headings are watched by
+ * a single `IntersectionObserver` whose root margin carves an activation band
+ * across the top quarter of the scroll root (the window, or the scrollable
+ * container named by `containerId`): the first observed heading inside the band
+ * is the active section, and when the band is empty — e.g. deep inside a long
+ * section body — the heading that last crossed above it stays active. Scroll
+ * position is never polled and no scroll listener is attached; React re-renders
+ * only when the active section actually changes.
+ *
+ * The active link gains `text-fg` + `aria-current="location"`, and a small
+ * indicator bar translates vertically to the active row — its `transform` /
+ * `height` are written straight to the DOM and animated by a CSS transition
+ * (`motion-reduce:transition-none`, so opted-out visitors get an instant cut).
+ * Clicking a link smooth-scrolls to its heading (instant under
+ * `prefers-reduced-motion`) and rewrites the URL hash without pushing a history
+ * entry per click.
+ *
+ * Entries come from {@link TableOfContentsProps.items}, or are auto-discovered
+ * once on mount from the headings matching {@link TableOfContentsProps.selector}
+ * — headings need an `id` to participate.
+ */
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<TableOfContentsProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=table-of-contents.d.ts.map

package/dist/components/table.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
+export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: import("react").ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: import("react").ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export const Table = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("section", { "data-slot": "table-container", 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region is intentionally focusable so keyboard users can scroll it.
+        tabIndex: 0, "aria-label": "Table", className: "relative w-full overflow-x-auto outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx("table", { ref: ref, "data-slot": "table", className: cn("w-full caption-bottom text-sm text-fg", className), ...props }) }));
+});
+Table.displayName = "Table";
+export const TableHeader = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("thead", { ref: ref, "data-slot": "table-header", className: cn("[&_tr]:border-b [&_tr]:border-border", className), ...props }));
+});
+TableHeader.displayName = "TableHeader";
+export const TableBody = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("tbody", { ref: ref, "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+});
+TableBody.displayName = "TableBody";
+export const TableFooter = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("tfoot", { ref: ref, "data-slot": "table-footer", className: cn("border-t border-border bg-surface-inset/50 font-medium", className), ...props }));
+});
+TableFooter.displayName = "TableFooter";
+export const TableRow = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("tr", { ref: ref, "data-slot": "table-row", className: cn("border-b border-border transition-colors hover:bg-surface-overlay/50 data-[state=selected]:bg-surface-overlay", className), ...props }));
+});
+TableRow.displayName = "TableRow";
+export const TableHead = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("th", { ref: ref, "data-slot": "table-head", className: cn("h-10 px-3 text-left align-middle font-medium text-fg-secondary whitespace-nowrap", className), ...props }));
+});
+TableHead.displayName = "TableHead";
+export const TableCell = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("td", { ref: ref, "data-slot": "table-cell", className: cn("p-3 align-middle whitespace-nowrap", className), ...props }));
+});
+TableCell.displayName = "TableCell";
+export const TableCaption = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("caption", { ref: ref, "data-slot": "table-caption", className: cn("mt-4 text-sm text-fg-tertiary", className), ...props }));
+});
+TableCaption.displayName = "TableCaption";
+//# sourceMappingURL=table.js.map

package/dist/components/tabs.d.ts

@@ -0,0 +1,6 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Tabs = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(TabsPrimitive.Root, { ref: ref, "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...props }));
+});
+Tabs.displayName = "Tabs";
+export const TabsList = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(TabsPrimitive.List, { ref: ref, "data-slot": "tabs-list", className: cn("inline-flex h-10 w-fit items-center justify-center gap-1 rounded-lg bg-surface-inset p-1 text-fg-secondary", className), ...props }));
+});
+TabsList.displayName = "TabsList";
+export const TabsTrigger = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(TabsPrimitive.Trigger, { ref: ref, "data-slot": "tabs-trigger", className: cn("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium 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=active]:bg-surface-floating data-[state=active]:text-fg data-[state=active]:shadow-xs [&_svg]:size-4", className), ...props }));
+});
+TabsTrigger.displayName = "TabsTrigger";
+export const TabsContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(TabsPrimitive.Content, { ref: ref, "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }));
+});
+TabsContent.displayName = "TabsContent";
+//# sourceMappingURL=tabs.js.map