@sentropic/design-system-react 0.10.0 → 0.12.0

package/dist/KpiCard.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+export type KpiCardSize = "sm" | "md" | "lg";
+export type KpiCardTrend = "up" | "down" | "flat";
+export type KpiCardFormat = "number" | "currency" | "percent";
+export type KpiCardDeltaFormat = "percent" | "absolute";
+export type KpiCardTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type KpiCardProps = Omit<React.HTMLAttributes<HTMLElement>, "className"> & {
+    /**
+     * Valeur principale affichée en grand. Le formatage `format` ne s'applique
+     * qu'aux `number` (un `string` est rendu verbatim).
+     *
+     * Pour `format="percent"`, `Intl.NumberFormat` multiplie par 100 : passez une
+     * **fraction** (0–1). Ex. `0.42` → « 42 % », et non `42` (qui donnerait « 4 200 % »).
+     */
+    value: number | string;
+    /** Étiquette de l'indicateur (ex. « Revenu mensuel »). */
+    label: string;
+    /**
+     * Variation par rapport à la période précédente.
+     *
+     * En `deltaFormat="percent"` (défaut), la valeur est multipliée par 100 :
+     * passez une **fraction** (ex. `0.12` → « +12 % »).
+     */
+    delta?: number;
+    /** Comment exprimer le delta : en pourcentage ou en valeur absolue. */
+    deltaFormat?: KpiCardDeltaFormat;
+    /** Tendance ; déduite du signe du delta si absente. */
+    trend?: KpiCardTrend;
+    /** Formatage de la valeur principale via Intl.NumberFormat. */
+    format?: KpiCardFormat;
+    /** Unité suffixée à la valeur (ex. « ms », « €/mois »). */
+    unit?: string;
+    /** Code devise ISO 4217 pour format="currency" (défaut EUR). */
+    currency?: string;
+    /** Locale BCP 47 pour le formatage des nombres (défaut undefined = locale du runtime). */
+    locale?: string;
+    /** Mini-graphique de tendance optionnel. */
+    sparkline?: number[];
+    size?: KpiCardSize;
+    /** Couleur catégorielle pour l'accent (pastille discrète près de l'étiquette). */
+    tone?: KpiCardTone;
+    className?: string;
+};
+export declare function KpiCard({ value, label, delta, deltaFormat, trend, format, unit, currency, locale, sparkline, size, tone, className, ...rest }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=KpiCard.d.ts.map

package/dist/KpiCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.d.ts","sourceRoot":"","sources":["../src/KpiCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG;IAChF;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kFAAkF;IAClF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAuB,EACvB,KAAK,EACL,MAAiB,EACjB,IAAI,EACJ,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,IAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,2CAgId"}

package/dist/KpiCard.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "./classNames.js";
+import { Sparkline } from "./Sparkline.js";
+export function KpiCard({ value, label, delta, deltaFormat = "percent", trend, format = "number", unit, currency = "EUR", locale, sparkline, size = "md", tone, className, ...rest }) {
+    const resolvedTrend = trend ?? (delta == null ? undefined : delta > 0 ? "up" : delta < 0 ? "down" : "flat");
+    const formattedValue = (() => {
+        if (typeof value === "string") {
+            return value;
+        }
+        // Intl rend "NaN"/"∞" pour les valeurs non finies : préférer un tiret cadratin.
+        if (!Number.isFinite(value)) {
+            return "—";
+        }
+        if (format === "currency") {
+            try {
+                return new Intl.NumberFormat(locale, { style: "currency", currency }).format(value);
+            }
+            catch {
+                // Code devise invalide → repli sur un nombre brut plutôt qu'une exception.
+                return new Intl.NumberFormat(locale).format(value);
+            }
+        }
+        if (format === "percent") {
+            return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 2 }).format(value);
+        }
+        return new Intl.NumberFormat(locale).format(value);
+    })();
+    const formattedDelta = (() => {
+        if (delta == null || !Number.isFinite(delta)) {
+            return undefined;
+        }
+        const sign = delta > 0 ? "+" : "";
+        if (deltaFormat === "percent") {
+            const pct = new Intl.NumberFormat(locale, {
+                style: "percent",
+                maximumFractionDigits: 1,
+            }).format(delta);
+            return `${sign}${pct}`;
+        }
+        return `${sign}${new Intl.NumberFormat(locale).format(delta)}`;
+    })();
+    /** Le sparkline emprunte la couleur sémantique de la tendance. */
+    const sparklineTone = resolvedTrend === "up" ? "success" : resolvedTrend === "down" ? "error" : "neutral";
+    const arrow = resolvedTrend === "up"
+        ? "M3 8.5 7 4l4 4.5"
+        : resolvedTrend === "down"
+            ? "M3 5.5 7 10l4-4.5"
+            : "M3 7h8";
+    const trendLabel = resolvedTrend === "up"
+        ? "en hausse"
+        : resolvedTrend === "down"
+            ? "en baisse"
+            : resolvedTrend === "flat"
+                ? "stable"
+                : undefined;
+    const ariaLabel = [
+        label,
+        formattedValue,
+        unit,
+        formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim(),
+    ]
+        .filter(Boolean)
+        .join(", ");
+    return (_jsxs("article", { ...rest, className: classNames("st-kpiCard", `st-kpiCard--${size}`, tone && `st-kpiCard--${tone}`, tone && "st-kpiCard--toned", className), role: "group", "aria-label": ariaLabel, children: [_jsxs("p", { className: "st-kpiCard__label", children: [tone ? _jsx("span", { className: "st-kpiCard__swatch", "aria-hidden": "true" }) : null, label] }), _jsxs("p", { className: "st-kpiCard__value", children: [_jsx("span", { className: "st-kpiCard__number", children: formattedValue }), unit ? _jsx("span", { className: "st-kpiCard__unit", children: unit }) : null] }), formattedDelta || sparkline ? (_jsxs("div", { className: "st-kpiCard__footer", children: [formattedDelta ? (_jsxs("span", { className: `st-kpiCard__delta st-kpiCard__delta--${resolvedTrend ?? "flat"}`, "aria-hidden": "true", children: [_jsx("svg", { className: "st-kpiCard__arrow", width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: arrow, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "st-kpiCard__deltaValue", children: formattedDelta })] })) : null, sparkline && sparkline.length > 0 ? (_jsx(Sparkline, { className: "st-kpiCard__sparkline", data: sparkline, tone: sparklineTone, area: true })) : null] })) : null] }));
+}
+//# sourceMappingURL=KpiCard.js.map

package/dist/KpiCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.js","sourceRoot":"","sources":["../src/KpiCard.tsx"],"names":[],"mappings":"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"}

package/dist/SelectableList.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+export type SelectableListProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Accessible name for the listbox (required for SR users). */
+    label?: string;
+    /** References the id of an external visible label (alternative to `label`). */
+    labelledby?: string;
+    /**
+     * Allow more than one selected row. Adds aria-multiselectable and toggles
+     * each row independently. Defaults to false (single-select).
+     */
+    multiple?: boolean;
+    /**
+     * Selected value(s). Controlled when provided. For single-select pass a
+     * string (or null); for multiple pass a string[]. When omitted the list is
+     * uncontrolled and keeps its own internal selection.
+     */
+    value?: string | string[] | null;
+    /**
+     * Fired with the new selection on every change. Receives a string|null for
+     * single-select and a string[] for multiple. Required for the controlled
+     * pattern; also fires for uncontrolled lists.
+     */
+    onChange?: (value: string | string[] | null) => void;
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * Accessible listbox that owns selection + a roving tabindex for its
+ * {@link SelectableRow} children. Arrow / Home / End move focus (roving),
+ * Space / Enter / click toggle the focused row. Single-select by default;
+ * `multiple` toggles rows independently. Controlled via `value`/`onChange`,
+ * otherwise it keeps its own internal selection. Pilots each child row through
+ * a STABLE React context (so a row's registration effect never re-runs in a
+ * loop) plus a `version` counter the rows read to recompute role / tabindex /
+ * aria-selected on every selection / focus / registry change.
+ */
+export declare function SelectableList({ label, labelledby, multiple, value, onChange, children, className, ...rest }: SelectableListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectableList {
+    var displayName: string;
+}
+//# sourceMappingURL=SelectableList.d.ts.map

package/dist/SelectableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.d.ts","sourceRoot":"","sources":["../src/SelectableList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX,GAAG;IACF,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkBF;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA4IrB;yBArJe,cAAc"}

package/dist/SelectableList.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "./classNames.js";
+import { SelectableListContext, SelectableListVersionContext, } from "./SelectableRow.js";
+function toSet(v) {
+    if (v == null)
+        return new Set();
+    return new Set(Array.isArray(v) ? v : [v]);
+}
+function sortByDom(list) {
+    return [...list].sort((a, b) => {
+        const pos = a.el.compareDocumentPosition(b.el);
+        if (pos & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        if (pos & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+/**
+ * Accessible listbox that owns selection + a roving tabindex for its
+ * {@link SelectableRow} children. Arrow / Home / End move focus (roving),
+ * Space / Enter / click toggle the focused row. Single-select by default;
+ * `multiple` toggles rows independently. Controlled via `value`/`onChange`,
+ * otherwise it keeps its own internal selection. Pilots each child row through
+ * a STABLE React context (so a row's registration effect never re-runs in a
+ * loop) plus a `version` counter the rows read to recompute role / tabindex /
+ * aria-selected on every selection / focus / registry change.
+ */
+export function SelectableList({ label, labelledby, multiple = false, value, onChange, children, className, ...rest }) {
+    // Controlled when the consumer passes `value` (including null).
+    const controlled = value !== undefined;
+    // --- Mutable state lives in refs (read by the STABLE context methods); a
+    //     `version` counter drives re-renders so rows recompute their derived
+    //     attributes. This keeps the context object identity-stable, which is what
+    //     prevents the rows' registration effect from re-running in a loop. ------
+    const entriesRef = React.useRef([]);
+    const tabStopRef = React.useRef(null);
+    const internalRef = React.useRef(new Set());
+    // `version` is provided to rows so they re-render on every selection / focus /
+    // registry change (the actions context stays identity-stable).
+    const [version, force] = React.useReducer((n) => n + 1, 0);
+    const bump = React.useCallback(() => force(), []);
+    // Latest controlled inputs, read by stable callbacks without stale closures.
+    const controlledRef = React.useRef(controlled);
+    controlledRef.current = controlled;
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+    const multipleRef = React.useRef(multiple);
+    multipleRef.current = multiple;
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    function currentSelection() {
+        return controlledRef.current ? toSet(valueRef.current) : internalRef.current;
+    }
+    // Default roving stop = first registered (DOM-ordered) row when none focused.
+    function effectiveTabStop() {
+        return tabStopRef.current ?? entriesRef.current[0]?.el ?? null;
+    }
+    function valueOf(el) {
+        return entriesRef.current.find((e) => e.el === el)?.value;
+    }
+    // Stable context methods — created ONCE so the context object never changes
+    // identity. They read mutable state from refs and bump the version to re-render.
+    const context = React.useMemo(() => {
+        const register = (el, rowValue) => {
+            entriesRef.current = sortByDom([
+                ...entriesRef.current.filter((e) => e.el !== el),
+                { el, value: rowValue },
+            ]);
+            bump();
+            return () => {
+                entriesRef.current = entriesRef.current.filter((e) => e.el !== el);
+                if (tabStopRef.current === el)
+                    tabStopRef.current = null;
+                bump();
+            };
+        };
+        const isSelected = (el) => {
+            const v = valueOf(el);
+            return v !== undefined && currentSelection().has(v);
+        };
+        const isTabStop = (el) => el === effectiveTabStop();
+        const emit = (next) => {
+            if (!controlledRef.current)
+                internalRef.current = next;
+            if (multipleRef.current)
+                onChangeRef.current?.([...next]);
+            else
+                onChangeRef.current?.(next.size ? [...next][0] : null);
+            bump();
+        };
+        const activate = (el) => {
+            const v = valueOf(el);
+            if (v === undefined)
+                return;
+            const current = currentSelection();
+            let next;
+            if (multipleRef.current) {
+                next = new Set(current);
+                if (next.has(v))
+                    next.delete(v);
+                else
+                    next.add(v);
+            }
+            else {
+                // Single-select toggles off when re-activating the selected row.
+                next = current.has(v) && current.size === 1 ? new Set() : new Set([v]);
+            }
+            emit(next);
+        };
+        const focusRow = (el) => {
+            tabStopRef.current = el;
+            bump();
+        };
+        const navigate = (el, key) => {
+            const list = entriesRef.current;
+            if (list.length === 0)
+                return;
+            const idx = list.findIndex((e) => e.el === el);
+            if (idx === -1)
+                return;
+            let targetIdx = idx;
+            if (key === "ArrowDown" || key === "ArrowRight")
+                targetIdx = idx + 1;
+            else if (key === "ArrowUp" || key === "ArrowLeft")
+                targetIdx = idx - 1;
+            else if (key === "Home")
+                targetIdx = 0;
+            else if (key === "End")
+                targetIdx = list.length - 1;
+            // Clamp (no wrap) so Home/End and arrows stay within bounds.
+            targetIdx = Math.max(0, Math.min(list.length - 1, targetIdx));
+            const target = list[targetIdx]?.el;
+            if (target) {
+                tabStopRef.current = target;
+                target.focus();
+                bump();
+            }
+        };
+        return {
+            managed: true,
+            itemRole: "option",
+            register,
+            isSelected,
+            isTabStop,
+            activate,
+            focusRow,
+            navigate,
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bump]);
+    return (_jsx("div", { ...rest, className: classNames("st-selectableList", className), role: "listbox", "aria-label": labelledby ? undefined : label, "aria-labelledby": labelledby, "aria-multiselectable": multiple ? "true" : undefined, children: _jsx(SelectableListContext.Provider, { value: context, children: _jsx(SelectableListVersionContext.Provider, { value: version, children: children }) }) }));
+}
+SelectableList.displayName = "SelectableList";
+//# sourceMappingURL=SelectableList.js.map

package/dist/SelectableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.js","sourceRoot":"","sources":["../src/SelectableList.tsx"],"names":[],"mappings":"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"}

package/dist/SelectableRow.d.ts

@@ -0,0 +1,107 @@
+import React from "react";
+/**
+ * Shared context between {@link SelectableList} and its {@link SelectableRow}
+ * children. The list owns selection + the roving tabindex and exposes the
+ * getters/callbacks the rows read to derive their own `role` / `tabindex` /
+ * `aria-selected`. When a row is used STANDALONE (no provider) the context is
+ * null and the row falls back to its own `role` / `tabindex` / selection state.
+ */
+export type SelectableListContextValue = {
+    /** True when the list manages selection/roving for its rows. */
+    readonly managed: true;
+    /** listbox role for the wrapper → rows are "option". */
+    readonly itemRole: "option";
+    /** Register a row element; returns an unregister callback. */
+    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Is the row with this element currently selected? */
+    isSelected: (el: HTMLElement) => boolean;
+    /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
+    isTabStop: (el: HTMLElement) => boolean;
+    /** Row was activated (click / Space / Enter). The list toggles selection. */
+    activate: (el: HTMLElement) => void;
+    /** Row received focus → becomes the roving tab stop. */
+    focusRow: (el: HTMLElement) => void;
+    /** Arrow / Home / End navigation from a row. */
+    navigate: (el: HTMLElement, key: string) => void;
+};
+export declare const SelectableListContext: React.Context<SelectableListContextValue | null>;
+/**
+ * Changing version context, bumped by the list on every selection / focus /
+ * registry change. Rows read it during render so they re-render and recompute
+ * their derived attributes. Kept SEPARATE from {@link SelectableListContext} so
+ * the actions context stays identity-stable (a row's registration effect must
+ * not re-run — and re-register — in a loop).
+ */
+export declare const SelectableListVersionContext: React.Context<number>;
+export type SelectableRowProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    /**
+     * Selected state. Honoured when the row is used STANDALONE; inside a
+     * {@link SelectableList} the list is the source of truth and drives the
+     * selected styling, so this prop is ignored for managed rows.
+     */
+    selected?: boolean;
+    /** Notified on every toggle with the new selected state (standalone rows). */
+    onSelect?: (selected: boolean) => void;
+    /** Non-interactive when true. */
+    disabled?: boolean;
+    /** Stable value, surfaced as `data-value` and used by the list for `value`. */
+    value?: string;
+    /**
+     * ARIA role for the standalone row. Defaults to "option" so a lone row still
+     * reads as a selectable item. Inside a list the role is forced to "option".
+     */
+    role?: string;
+    /**
+     * Opt-in left accent bar on the selected state. Off by default so the
+     * selected item is a calm tinted surface + accented text (two signals only).
+     */
+    accentBar?: boolean;
+    /** Leading content (icon / avatar). */
+    leading?: React.ReactNode;
+    /** Trailing content (meta / icon). */
+    trailing?: React.ReactNode;
+    /** Main content. */
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * Compact, full-width selectable list/rail row. By DEFAULT the selected state
+ * is two calm signals — a tinted surface + accented text — deliberately NOT the
+ * off-theme "boudin box" it replaces, and NOT a reflow-causing font-weight
+ * bump. The fine left accent bar is OPT-IN via the `accentBar` prop. Focus is an
+ * EXTERNAL offset outline. role="option" + aria-selected, keyboard-activatable
+ * (Enter / Space), inert when disabled. Inside a {@link SelectableList} the list
+ * (via context) owns selection and the roving tabindex.
+ */
+export declare const SelectableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    /**
+     * Selected state. Honoured when the row is used STANDALONE; inside a
+     * {@link SelectableList} the list is the source of truth and drives the
+     * selected styling, so this prop is ignored for managed rows.
+     */
+    selected?: boolean;
+    /** Notified on every toggle with the new selected state (standalone rows). */
+    onSelect?: (selected: boolean) => void;
+    /** Non-interactive when true. */
+    disabled?: boolean;
+    /** Stable value, surfaced as `data-value` and used by the list for `value`. */
+    value?: string;
+    /**
+     * ARIA role for the standalone row. Defaults to "option" so a lone row still
+     * reads as a selectable item. Inside a list the role is forced to "option".
+     */
+    role?: string;
+    /**
+     * Opt-in left accent bar on the selected state. Off by default so the
+     * selected item is a calm tinted surface + accented text (two signals only).
+     */
+    accentBar?: boolean;
+    /** Leading content (icon / avatar). */
+    leading?: React.ReactNode;
+    /** Trailing content (meta / icon). */
+    trailing?: React.ReactNode;
+    /** Main content. */
+    children?: React.ReactNode;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SelectableRow.d.ts.map

package/dist/SelectableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.d.ts","sourceRoot":"","sources":["../src/SelectableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;GAMG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,CAAC;IACrE,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,qBAAqB,kDAC4B,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,4BAA4B,uBAAyB,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa;IAxCxB;;;;OAIG;eACQ,OAAO;IAClB,8EAA8E;eACnE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;IACtC,iCAAiC;eACtB,OAAO;IAClB,+EAA+E;YACvE,MAAM;IACd;;;OAGG;WACI,MAAM;IACb;;;OAGG;gBACS,OAAO;IACnB,uCAAuC;cAC7B,KAAK,CAAC,SAAS;IACzB,sCAAsC;eAC3B,KAAK,CAAC,SAAS;IAC1B,oBAAoB;eACT,KAAK,CAAC,SAAS;gBACd,MAAM;wCAmInB,CAAC"}

package/dist/SelectableRow.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "./classNames.js";
+export const SelectableListContext = React.createContext(null);
+/**
+ * Changing version context, bumped by the list on every selection / focus /
+ * registry change. Rows read it during render so they re-render and recompute
+ * their derived attributes. Kept SEPARATE from {@link SelectableListContext} so
+ * the actions context stays identity-stable (a row's registration effect must
+ * not re-run — and re-register — in a loop).
+ */
+export const SelectableListVersionContext = React.createContext(0);
+/**
+ * Compact, full-width selectable list/rail row. By DEFAULT the selected state
+ * is two calm signals — a tinted surface + accented text — deliberately NOT the
+ * off-theme "boudin box" it replaces, and NOT a reflow-causing font-weight
+ * bump. The fine left accent bar is OPT-IN via the `accentBar` prop. Focus is an
+ * EXTERNAL offset outline. role="option" + aria-selected, keyboard-activatable
+ * (Enter / Space), inert when disabled. Inside a {@link SelectableList} the list
+ * (via context) owns selection and the roving tabindex.
+ */
+export const SelectableRow = React.forwardRef(({ selected = false, onSelect, disabled = false, value, role = "option", accentBar = false, leading, trailing, children, className, ...rest }, ref) => {
+    const list = React.useContext(SelectableListContext);
+    // Subscribe to the list's version so this row re-renders (and recomputes
+    // role / tabindex / aria-selected) on every selection / focus / registry
+    // change. The value itself is unused — reading the context is the subscription.
+    React.useContext(SelectableListVersionContext);
+    const innerRef = React.useRef(null);
+    // Merge the forwarded ref with our own so the list can register the element.
+    const setRef = React.useCallback((el) => {
+        innerRef.current = el;
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    }, [ref]);
+    // Register with the parent list (if any) so it can order rows for arrow nav
+    // and compute the roving tab stop. Re-registers if value changes.
+    React.useEffect(() => {
+        const el = innerRef.current;
+        if (!list || !el || disabled)
+            return;
+        return list.register(el, value);
+    }, [list, value, disabled]);
+    // Subscribe to list re-renders so managed rows recompute selected/tabstop.
+    // The list bumps this version on every selection / focus change.
+    const el = innerRef.current;
+    const isSelected = list && el ? list.isSelected(el) : selected;
+    const effectiveRole = list ? list.itemRole : role;
+    const tabIndex = disabled ? -1 : list && el ? (list.isTabStop(el) ? 0 : -1) : 0;
+    function activate() {
+        if (disabled)
+            return;
+        const node = innerRef.current;
+        if (list && node) {
+            list.activate(node);
+            return;
+        }
+        onSelect?.(!selected);
+    }
+    function handleKeyDown(e) {
+        if (disabled)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activate();
+            return;
+        }
+        // Roving navigation is owned by the list; forward the relevant keys.
+        const node = innerRef.current;
+        if (list &&
+            node &&
+            (e.key === "ArrowDown" ||
+                e.key === "ArrowUp" ||
+                e.key === "ArrowLeft" ||
+                e.key === "ArrowRight" ||
+                e.key === "Home" ||
+                e.key === "End")) {
+            e.preventDefault();
+            list.navigate(node, e.key);
+        }
+    }
+    function handleFocus() {
+        if (disabled)
+            return;
+        const node = innerRef.current;
+        if (list && node)
+            list.focusRow(node);
+    }
+    return (_jsxs("div", { ...rest, ref: setRef, className: classNames("st-selectableRow", isSelected && "st-selectableRow--selected", disabled && "st-selectableRow--disabled", accentBar && "st-selectableRow--accentBar", className), role: effectiveRole, "aria-selected": effectiveRole === "option" ? isSelected : undefined, "aria-disabled": disabled ? "true" : undefined, "data-value": value, tabIndex: tabIndex, onClick: activate, onKeyDown: handleKeyDown, onFocus: handleFocus, children: [leading != null ? (_jsx("span", { className: "st-selectableRow__leading", children: leading })) : null, _jsx("span", { className: "st-selectableRow__content", children: children }), trailing != null ? (_jsx("span", { className: "st-selectableRow__trailing", children: trailing })) : null] }));
+});
+SelectableRow.displayName = "SelectableRow";
+//# sourceMappingURL=SelectableRow.js.map

package/dist/SelectableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.js","sourceRoot":"","sources":["../src/SelectableRow.tsx"],"names":[],"mappings":"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"}

package/dist/TreemapChart.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export type TreemapChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type TreemapChartDatum = {
+    label: string;
+    value: number;
+    tone?: TreemapChartTone;
+    children?: TreemapChartDatum[];
+};
+export type TreemapTiling = "squarified";
+export type TreemapChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    /** Données hiérarchiques : 1 ou 2 niveaux. Un nœud avec `children` est subdivisé. */
+    data: TreemapChartDatum[];
+    /** Algorithme de pavage (squarified uniquement pour l'instant). */
+    tiling?: TreemapTiling;
+    /** Affiche les labels dans les rectangles suffisamment grands. */
+    showLabels?: boolean;
+    /** Affiche une légende sous le graphique. */
+    legend?: boolean;
+    width?: number;
+    height?: number;
+    label: string;
+    className?: string;
+};
+export declare function TreemapChart({ data, tiling, showLabels, legend, width, height, label, className, ...rest }: TreemapChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TreemapChart.d.ts.map

package/dist/TreemapChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreemapChart.d.ts","sourceRoot":"","sources":["../src/TreemapChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACxF,qFAAqF;IACrF,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqHF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAqB,EACrB,UAAiB,EACjB,MAAc,EACd,KAAW,EACX,MAAY,EACZ,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAqLnB"}