@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/charts/test-utils.js

@@ -0,0 +1,38 @@
+// Test helpers for the charts subpath: give Recharts a measurable box in jsdom.
+import { vi } from "vitest";
+/** Makes every ResizeObserver report a fixed size, so ResponsiveContainer renders its chart. */
+export function mockChartSize(width = 640, height = 260) {
+    class SizedRO {
+        cb;
+        constructor(cb) {
+            this.cb = cb;
+        }
+        observe(target) {
+            const entry = { target, contentRect: { width, height, top: 0, left: 0, bottom: height, right: width, x: 0, y: 0 }, contentBoxSize: [{ inlineSize: width, blockSize: height }], borderBoxSize: [{ inlineSize: width, blockSize: height }] };
+            this.cb([entry], this);
+        }
+        unobserve() { }
+        disconnect() { }
+    }
+    const prevRO = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = SizedRO;
+    // Only chart containers report a size; text measurement spans stay 0 so ticks are not culled.
+    const realRect = HTMLElement.prototype.getBoundingClientRect;
+    const rect = vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function () {
+        if (this.classList.contains("recharts-responsive-container") || this.dataset.slot === "chart-frame")
+            return { width, height, top: 0, left: 0, bottom: height, right: width, x: 0, y: 0, toJSON() { } };
+        return realRect.call(this);
+    });
+    const ow = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(width);
+    const oh = vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(height);
+    const cw = vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(width);
+    const ch = vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(height);
+    return () => {
+        globalThis.ResizeObserver = prevRO;
+        rect.mockRestore();
+        ow.mockRestore();
+        oh.mockRestore();
+        cw.mockRestore();
+        ch.mockRestore();
+    };
+}

package/dist/charts/utils.d.ts

@@ -0,0 +1,130 @@
+import type { ComponentType, ReactNode } from "react";
+import type { DatePreset, Formatter } from "../format/core.js";
+/** A colour token a series can use. Never a hex value — the token follows every theme axis. */
+export type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "accent" | "accent-ink" | "success" | "warning" | "danger" | "info" | "fg-subtle" | "fg-muted";
+/** Date presets for chart axes and tooltips (the format module's presets + short axis forms). */
+export type ChartDatePreset = DatePreset | "day-month" | "month" | "month-short-year" | "hour" | "weekday-short";
+/**
+ * How a value is written. Strings use the locale formatter; objects pick a currency or a date preset;
+ * a function gets the raw value and the locale.
+ */
+export type FormatSpec = "number" | "integer" | "compact" | "percent" | "currency" | "duration" | "bytes" | {
+    currency: string;
+    compact?: boolean;
+} | {
+    date: ChartDatePreset | Intl.DateTimeFormatOptions;
+    timeZoneName?: "short";
+} | {
+    relative: true;
+} | ((value: unknown, locale: string) => string);
+export type SeriesPattern = "solid" | "dashed" | "dotted";
+export interface SeriesConfig {
+    /** Shown in legend, tooltip, table header and summary. */
+    label: string;
+    /** Colour token. Default: chart-1…chart-6 in config order. */
+    color?: ChartColor;
+    /** How values of this series are written. Default `"number"`. */
+    format?: FormatSpec;
+    /** Value axis side (Combo). Logical: `start` is left in LTR, right in RTL. */
+    axis?: "start" | "end";
+    /** Stroke pattern. Auto-assigned when a chart has more than 3 series (colour-blind safety). */
+    pattern?: SeriesPattern;
+    /** Small icon before the legend label (a lucide icon or any component taking className). */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Start hidden (the legend can show it again). */
+    hidden?: boolean;
+}
+/** Series key → its settings. Key order is legend and colour order. */
+export type ChartConfig = Record<string, SeriesConfig>;
+export type ChartState = {
+    status: "ready";
+} | {
+    status: "loading";
+} | {
+    status: "refreshing";
+} | {
+    status: "empty";
+    message?: ReactNode;
+    action?: ReactNode;
+} | {
+    status: "error";
+    message?: ReactNode;
+    onRetry?: () => void;
+};
+export type ChartHeight = number | "sm" | "md" | "lg";
+export declare const CHART_HEIGHTS: {
+    readonly sm: 160;
+    readonly md: 260;
+    readonly lg: 360;
+};
+/** `"chart-2"` → `"var(--chart-2)"`. */
+export declare function resolveChartColor(color: ChartColor): string;
+/** The first `n` palette tokens (wraps after 6). */
+export declare function seriesPalette(n: number): ChartColor[];
+/** A CSS-identifier-safe version of a series key, used in `--series-<key>` variables. */
+export declare function seriesVarName(key: string): string;
+/** `var(--series-<key>)` — the colour of a series inside a Chart. */
+export declare function seriesColor(key: string): string;
+export interface ResolvedSeries extends SeriesConfig {
+    key: string;
+    color: ChartColor;
+    pattern: SeriesPattern;
+    index: number;
+}
+/** Fills in colour and pattern defaults for every series of a config. */
+export declare function resolveSeries(config: ChartConfig): ResolvedSeries[];
+/** SVG dash array for a pattern. */
+export declare function patternDash(pattern: SeriesPattern | undefined): string | undefined;
+/**
+ * Writes a value with a FormatSpec. `compact` shortens numbers and money for axis ticks
+ * ("$1.2M", "₺1,2 Mn"); tooltips and tables use the full form. Missing values → "—".
+ */
+export declare function formatValue(f: Formatter, spec: FormatSpec | undefined, value: unknown, options?: {
+    compact?: boolean;
+    compactFrom?: number;
+}): string;
+/** Default x formatter: `YYYY-MM-DD` strings become "Nov 1", everything else is printed as is. */
+export declare function formatCategory(f: Formatter, spec: FormatSpec | undefined, value: unknown, long?: boolean): string;
+/** Estimated pixel width of a y-axis from its longest formatted tick (11px tabular text). */
+export declare function estimateAxisWidth(labels: string[], fontSize?: number): number;
+/** Numeric min / max over some keys of the rows (stacked → per-row sums). */
+export declare function extent(rows: Record<string, unknown>[], keys: string[], stacked?: boolean): [number, number];
+/** Rounds a max up to a "nice" tick (1, 2, 2.5, 5 × 10ⁿ). */
+export declare function niceCeil(v: number): number;
+/** A "nice" tick step at or above `v` (1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 × 10ⁿ). */
+export declare function niceStep(v: number): number;
+/**
+ * Two value-axis domains whose zero lines meet (Combo). Each input is a `[min, max]` extent.
+ * Returns domains with the same negative share, so neither axis exaggerates.
+ */
+export declare function alignZeroDomains(a: [number, number], b: [number, number]): [[number, number], [number, number]];
+export interface SeriesStats {
+    key: string;
+    min: number;
+    max: number;
+    avg: number;
+    minIndex: number;
+    maxIndex: number;
+    count: number;
+}
+/** Min / max / average of one series (nulls skipped). `null` when the series has no numbers. */
+export declare function seriesStats(rows: Record<string, unknown>[], key: string): SeriesStats | null;
+/**
+ * A one-paragraph text summary of a chart for screen readers:
+ * "Nov 1 – Nov 30. Visits: low 812 (Nov 3), high 1,402 (Nov 28), average 1,090."
+ */
+export declare function summarizeSeries(options: {
+    f: Formatter;
+    rows: Record<string, unknown>[];
+    series: Pick<ResolvedSeries, "key" | "label" | "format">[];
+    x?: string;
+    xFormat?: FormatSpec;
+    templates?: {
+        range?: string;
+        series?: string;
+    };
+}): string;
+/** Equal-count (quantile) break points for `steps` buckets. Returns `steps - 1` thresholds. */
+export declare function quantileBreaks(values: number[], steps: number): number[];

package/dist/charts/utils.js

@@ -0,0 +1,262 @@
+export const CHART_HEIGHTS = { sm: 160, md: 260, lg: 360 };
+const PALETTE = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6"];
+/** `"chart-2"` → `"var(--chart-2)"`. */
+export function resolveChartColor(color) {
+    return `var(--${color})`;
+}
+/** The first `n` palette tokens (wraps after 6). */
+export function seriesPalette(n) {
+    return Array.from({ length: n }, (_, i) => PALETTE[i % PALETTE.length]);
+}
+/** A CSS-identifier-safe version of a series key, used in `--series-<key>` variables. */
+export function seriesVarName(key) {
+    return `--series-${key.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+}
+/** `var(--series-<key>)` — the colour of a series inside a Chart. */
+export function seriesColor(key) {
+    return `var(${seriesVarName(key)})`;
+}
+const AUTO_PATTERNS = ["solid", "dashed", "dotted"];
+/** Fills in colour and pattern defaults for every series of a config. */
+export function resolveSeries(config) {
+    const keys = Object.keys(config);
+    const auto = keys.length > 3;
+    return keys.map((key, index) => {
+        const s = config[key];
+        return {
+            ...s,
+            key,
+            index,
+            color: s.color ?? PALETTE[index % PALETTE.length],
+            pattern: s.pattern ?? (auto ? AUTO_PATTERNS[index % AUTO_PATTERNS.length] : "solid"),
+        };
+    });
+}
+/** SVG dash array for a pattern. */
+export function patternDash(pattern) {
+    if (pattern === "dashed")
+        return "6 4";
+    if (pattern === "dotted")
+        return "1.5 3.5";
+    return undefined;
+}
+const CHART_DATE_PRESETS = {
+    "day-month": { month: "short", day: "numeric" },
+    month: { month: "short" },
+    "month-short-year": { month: "short", year: "2-digit" },
+    hour: { hour: "numeric" },
+    "weekday-short": { weekday: "short" },
+};
+const isMissing = (v) => v === null || v === undefined || (typeof v === "number" && Number.isNaN(v));
+/**
+ * Writes a value with a FormatSpec. `compact` shortens numbers and money for axis ticks
+ * ("$1.2M", "₺1,2 Mn"); tooltips and tables use the full form. Missing values → "—".
+ */
+export function formatValue(f, spec, value, options = {}) {
+    if (isMissing(value))
+        return "—";
+    // compactFrom: plain numbers shorten from this size (axes whose top tick is ≥ 10K pass 1000 so every tick reads alike)
+    const { compact, compactFrom = 10000 } = options;
+    if (typeof spec === "function")
+        return spec(value, f.locale);
+    const num = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" && !Number.isNaN(Number(value)) ? Number(value) : NaN;
+    if (spec && typeof spec === "object") {
+        if ("date" in spec) {
+            const preset = spec.date;
+            const o = typeof preset === "string" ? (CHART_DATE_PRESETS[preset] ?? {}) : preset;
+            const opts = { ...o, ...(spec.timeZoneName ? { timeZoneName: spec.timeZoneName } : {}) };
+            if (typeof preset === "string" && !CHART_DATE_PRESETS[preset])
+                return f.date(value, preset);
+            return f.date(value, opts);
+        }
+        if ("relative" in spec)
+            return f.relative(value);
+        if ("currency" in spec) {
+            const c = compact || spec.compact;
+            return f.currency(value, { currency: spec.currency, ...(c ? { notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1 } : {}) });
+        }
+    }
+    if (Number.isNaN(num))
+        return String(value);
+    switch (spec) {
+        case "integer":
+            return compact && Math.abs(num) >= compactFrom ? f.compact(num) : f.number(num, { maximumFractionDigits: 0 });
+        case "compact":
+            return f.compact(num);
+        case "percent":
+            return f.percent(num);
+        case "currency":
+            return compact ? f.currency(num, { notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1 }) : f.currency(num);
+        case "duration":
+            return f.duration(num, compact ? { maxParts: 1 } : undefined);
+        case "bytes":
+            return f.bytes(num);
+        case "number":
+        default:
+            return compact && Math.abs(num) >= compactFrom ? f.compact(num) : f.number(num, { maximumFractionDigits: 2 });
+    }
+}
+/** Default x formatter: `YYYY-MM-DD` strings become "Nov 1", everything else is printed as is. */
+export function formatCategory(f, spec, value, long = false) {
+    if (spec)
+        return formatValue(f, spec, value);
+    if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value))
+        return f.date(value, long ? "medium" : { month: "short", day: "numeric" });
+    return isMissing(value) ? "—" : String(value);
+}
+/** Estimated pixel width of a y-axis from its longest formatted tick (11px tabular text). */
+export function estimateAxisWidth(labels, fontSize = 11) {
+    const longest = labels.reduce((m, s) => Math.max(m, s.length), 0);
+    return Math.min(128, Math.max(32, Math.ceil(longest * fontSize * 0.68) + 16));
+}
+/** Numeric min / max over some keys of the rows (stacked → per-row sums). */
+export function extent(rows, keys, stacked = false) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const row of rows) {
+        if (stacked) {
+            let pos = 0;
+            let neg = 0;
+            for (const k of keys) {
+                const v = Number(row[k]);
+                if (!Number.isFinite(v))
+                    continue;
+                if (v >= 0)
+                    pos += v;
+                else
+                    neg += v;
+            }
+            min = Math.min(min, neg);
+            max = Math.max(max, pos);
+        }
+        else {
+            for (const k of keys) {
+                const v = row[k];
+                if (v === null || v === undefined)
+                    continue;
+                const n = Number(v);
+                if (!Number.isFinite(n))
+                    continue;
+                min = Math.min(min, n);
+                max = Math.max(max, n);
+            }
+        }
+    }
+    if (min === Infinity)
+        return [0, 0];
+    return [min, max];
+}
+/** Rounds a max up to a "nice" tick (1, 2, 2.5, 5 × 10ⁿ). */
+export function niceCeil(v) {
+    if (v <= 0)
+        return 0;
+    const exp = Math.floor(Math.log10(v));
+    const base = 10 ** exp;
+    const f = v / base;
+    const nice = f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10;
+    return nice * base;
+}
+/** A "nice" tick step at or above `v` (1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 × 10ⁿ). */
+export function niceStep(v) {
+    if (v <= 0)
+        return 0;
+    const exp = Math.floor(Math.log10(v));
+    const base = 10 ** exp;
+    const f = v / base;
+    const steps = [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10];
+    const nice = steps.find((s) => f <= s + 1e-9) ?? 10;
+    return Number((nice * base).toPrecision(12));
+}
+/**
+ * Two value-axis domains whose zero lines meet (Combo). Each input is a `[min, max]` extent.
+ * Returns domains with the same negative share, so neither axis exaggerates.
+ */
+export function alignZeroDomains(a, b) {
+    const norm = ([lo, hi]) => [Math.min(0, lo), Math.max(0, hi, lo < 0 && hi <= 0 ? 0 : hi)];
+    const [aLo, aHi] = norm(a);
+    const [bLo, bHi] = norm(b);
+    const share = (lo, hi) => (hi - lo === 0 ? 0 : -lo / (hi - lo));
+    const s = Math.max(share(aLo, aHi), share(bLo, bHi));
+    const fit = (lo, hi) => {
+        if (s === 0)
+            return [0, niceStep(hi / 4) * 4 || 1];
+        if (s >= 1)
+            return [lo || -1, 0];
+        const top = Math.max(hi, (-lo * (1 - s)) / s);
+        const bottom = -(top * s) / (1 - s);
+        return [Math.min(lo, bottom), top];
+    };
+    return [fit(aLo, aHi), fit(bLo, bHi)];
+}
+/** Min / max / average of one series (nulls skipped). `null` when the series has no numbers. */
+export function seriesStats(rows, key) {
+    let min = Infinity;
+    let max = -Infinity;
+    let sum = 0;
+    let count = 0;
+    let minIndex = 0;
+    let maxIndex = 0;
+    rows.forEach((row, i) => {
+        const raw = row[key];
+        if (raw === null || raw === undefined)
+            return;
+        const v = Number(raw);
+        if (!Number.isFinite(v))
+            return;
+        if (v < min) {
+            min = v;
+            minIndex = i;
+        }
+        if (v > max) {
+            max = v;
+            maxIndex = i;
+        }
+        sum += v;
+        count++;
+    });
+    if (!count)
+        return null;
+    return { key, min, max, avg: sum / count, minIndex, maxIndex, count };
+}
+/**
+ * A one-paragraph text summary of a chart for screen readers:
+ * "Nov 1 – Nov 30. Visits: low 812 (Nov 3), high 1,402 (Nov 28), average 1,090."
+ */
+export function summarizeSeries(options) {
+    const { f, rows, series, x, xFormat } = options;
+    if (!rows.length)
+        return "";
+    const xText = (i) => (x ? formatCategory(f, xFormat, rows[i]?.[x]) : String(i + 1));
+    const fill = (tpl, vars) => tpl.replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? "");
+    const parts = [];
+    if (x && rows.length > 1)
+        parts.push(fill(options.templates?.range ?? "{from} – {to}.", { from: xText(0), to: xText(rows.length - 1) }));
+    for (const s of series) {
+        const st = seriesStats(rows, s.key);
+        if (!st)
+            continue;
+        const fmt = (v) => formatValue(f, s.format, v);
+        parts.push(fill(options.templates?.series ?? "{label}: low {min} ({minAt}), high {max} ({maxAt}), average {avg}.", {
+            label: s.label,
+            min: fmt(st.min),
+            minAt: xText(st.minIndex),
+            max: fmt(st.max),
+            maxAt: xText(st.maxIndex),
+            avg: fmt(Math.round(st.avg * 100) / 100),
+        }));
+    }
+    return parts.join(" ");
+}
+/** Equal-count (quantile) break points for `steps` buckets. Returns `steps - 1` thresholds. */
+export function quantileBreaks(values, steps) {
+    const sorted = values.filter((v) => Number.isFinite(v) && v > 0).sort((a, b) => a - b);
+    if (!sorted.length)
+        return Array.from({ length: steps - 2 }, () => Infinity);
+    const out = [];
+    // bucket 0 is reserved for zero; the rest split the positive values.
+    for (let i = 1; i < steps - 1; i++) {
+        const q = sorted[Math.min(sorted.length - 1, Math.floor((i / (steps - 1)) * sorted.length))];
+        out.push(q);
+    }
+    return out;
+}

package/dist/components/accordion.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Accordion as RadixAccordion } from "radix-ui";
+type AccordionVariant = "plain" | "separated" | "card";
+type AccordionSize = "sm" | "md";
+type AccordionRootProps = React.ComponentPropsWithoutRef<typeof RadixAccordion.Root>;
+export type AccordionProps = AccordionRootProps & {
+    /** `plain` (ruled list, default) · `separated` (boxed items) · `card` (one panel). */
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    /** Heading level wrapping each trigger, to fit the page outline. Default 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+/**
+ * Collapsible sections (WAI-ARIA Accordion: a heading containing a button, arrow keys / Home / End
+ * move between headers). `type="single"` (add `collapsible` to allow closing the open one) or `type="multiple"`.
+ *
+ * ```tsx
+ * <Accordion type="single" collapsible defaultValue="refunds">
+ *   <AccordionItem value="refunds">
+ *     <AccordionTrigger>How do refunds work?</AccordionTrigger>
+ *     <AccordionContent>Refunds go back to the original card within 5–10 business days.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Persisting the open sections is the consumer's job: control `value` and store it.
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Item> {
+}
+/** One section. `value` identifies it; `disabled` locks it. */
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger> {
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Right-side summary shown in the header, e.g. "3 selected" or "Scheduled". Part of the button's name. */
+    meta?: React.ReactNode;
+    /** Buttons next to the header (outside the toggle button, so they stay separate controls). */
+    actions?: React.ReactNode;
+}
+/** The section header: a heading with the toggle button (and optional actions beside it). */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Content> {
+}
+/** The collapsible body. Animates its height (`ui-collapse`, reduced-motion safe). */
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/accordion.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Accordion as RadixAccordion } from "radix-ui";
+import { ChevronDown } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+const AccordionContext = React.createContext({
+    variant: "plain",
+    size: "md",
+    headingLevel: 3,
+});
+const rootVariants = cva("w-full", {
+    variants: {
+        variant: {
+            /** Ruled list: hairlines between items. */
+            plain: "",
+            /** Each item in its own inset box. */
+            separated: "flex flex-col gap-2",
+            /** All items inside one surface (panel style). */
+            card: "surface overflow-hidden rounded-ui-lg",
+        },
+    },
+    defaultVariants: { variant: "plain" },
+});
+/**
+ * Collapsible sections (WAI-ARIA Accordion: a heading containing a button, arrow keys / Home / End
+ * move between headers). `type="single"` (add `collapsible` to allow closing the open one) or `type="multiple"`.
+ *
+ * ```tsx
+ * <Accordion type="single" collapsible defaultValue="refunds">
+ *   <AccordionItem value="refunds">
+ *     <AccordionTrigger>How do refunds work?</AccordionTrigger>
+ *     <AccordionContent>Refunds go back to the original card within 5–10 business days.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Persisting the open sections is the consumer's job: control `value` and store it.
+ */
+export const Accordion = React.forwardRef(function Accordion({ variant = "plain", size = "md", headingLevel = 3, className, ...props }, ref) {
+    const ctx = React.useMemo(() => ({ variant, size, headingLevel }), [variant, size, headingLevel]);
+    return (_jsx(AccordionContext.Provider, { value: ctx, children: _jsx(RadixAccordion.Root, { ref: ref, "data-slot": "accordion", "data-variant": variant, className: cn(rootVariants({ variant }), className), ...props }) }));
+});
+const accordionItemVariants = cva("group/acc-item", {
+    variants: {
+        variant: {
+            plain: "border-b border-line last:border-b-0",
+            separated: "surface-2 rounded-ui",
+            card: "border-b border-line last:border-b-0",
+        },
+    },
+});
+/** One section. `value` identifies it; `disabled` locks it. */
+export const AccordionItem = React.forwardRef(function AccordionItem({ className, ...props }, ref) {
+    const { variant } = React.useContext(AccordionContext);
+    return _jsx(RadixAccordion.Item, { ref: ref, "data-slot": "accordion-item", className: cn(accordionItemVariants({ variant }), className), ...props });
+});
+const pad = { plain: "", separated: "px-4", card: "px-(--gap)" };
+/** The section header: a heading with the toggle button (and optional actions beside it). */
+export const AccordionTrigger = React.forwardRef(function AccordionTrigger({ icon, meta, actions, className, children, ...props }, ref) {
+    const { variant, size, headingLevel } = React.useContext(AccordionContext);
+    const Heading = `h${headingLevel}`;
+    return (_jsx(RadixAccordion.Header, { asChild: true, children: _jsxs(Heading, { "data-slot": "accordion-header", className: cn("flex items-center gap-1", pad[variant], actions && "pe-2"), children: [_jsxs(RadixAccordion.Trigger, { ref: ref, "data-slot": "accordion-trigger", className: cn("group/acc flex min-w-0 flex-1 items-center gap-3 rounded-ui-sm text-start font-medium text-fg outline-none transition-colors focus-ring", "disabled:cursor-not-allowed disabled:opacity-45", "hover:[&_[data-slot=accordion-title]]:underline hover:[&_[data-slot=accordion-title]]:decoration-line hover:[&_[data-slot=accordion-title]]:underline-offset-4", size === "sm" ? "py-2.5 text-[13px] [&_svg]:size-3.5" : "py-3.5 text-sm [&_svg]:size-4", variant === "plain" && (size === "sm" ? "py-2" : "py-3"), className), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 text-fg-muted [&_svg]:shrink-0", children: icon }) : null, _jsx("span", { "data-slot": "accordion-title", className: "min-w-0 flex-1 text-pretty", children: children }), meta ? _jsx("span", { className: "sr-only", children: ", " }) : null, meta ? (_jsx("span", { "data-slot": "accordion-meta", className: "tabular shrink-0 truncate text-[13px] font-normal text-fg-subtle", children: meta })) : null, _jsx(ChevronDown, { "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]/acc:rotate-180" })] }), actions ? (_jsx("span", { "data-slot": "accordion-actions", className: "flex shrink-0 items-center gap-0.5", children: actions })) : null] }) }));
+});
+/** The collapsible body. Animates its height (`ui-collapse`, reduced-motion safe). */
+export const AccordionContent = React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
+    const { variant, size } = React.useContext(AccordionContext);
+    return (_jsx(RadixAccordion.Content, { ref: ref, "data-slot": "accordion-content", className: "ui-collapse", ...props, children: _jsx("div", { className: cn("text-fg-muted", size === "sm" ? "pb-3 text-[13px]" : "pb-4 text-sm leading-relaxed", pad[variant], className), children: children }) }));
+});