@sia-ui/cli 0.7.1 → 0.8.0

package/dist/registry/package/components/Spinner/index.tsx

@@ -1,7 +1,7 @@
 import { type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
-import { useComponentDefaults } from "@sia-ui/headless";
+import { useComponentDefaults, useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
@@ -20,7 +20,8 @@ export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
  */
 export function Spinner({ label: labelProp, size: sizeProp, variant: variantProp, tone: toneProp, className, ...props }: SpinnerProps) {
   const defaults = useComponentDefaults<SpinnerProps>("spinner");
-  const label = labelProp ?? defaults.label ?? "Chargement";
+  const locale = useSiaLocale();
+  const label = labelProp ?? defaults.label ?? locale.loading;
   const size = sizeProp ?? defaults.size ?? "md";
   const variant = variantProp ?? defaults.variant ?? "ring";
   const tone = toneProp ?? defaults.tone ?? "current";

package/dist/registry/package/components/StatCard/index.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { Card, CardBody } from "../Card";
+import { Card, CardBody, type CardBodyProps, type CardProps } from "../Card";
 import { Statistic, type StatisticProps } from "../Statistic";
 import "./styles.css";
 
@@ -8,6 +8,14 @@ export interface StatCardProps extends StatisticProps {
   icon?: ReactNode;
   description?: ReactNode;
   action?: ReactNode;
+  /**
+   * Les props de la `Card` qui entoure l'indicateur — un `id`, un
+   * `aria-label`, un gestionnaire de clic. Sans `children` : le contenu est
+   * celui de l'indicateur. `className` s'ajoute à celui de la carte.
+   */
+  cardProps?: Partial<Omit<CardProps, "children">>;
+  /** Les props du `CardBody`, sans `children`, rempli par l'indicateur. */
+  cardBodyProps?: Partial<Omit<CardBodyProps, "children">>;
 }
 
 /**
@@ -17,6 +25,6 @@ export interface StatCardProps extends StatisticProps {
  * presque toujours ensemble, et qu'il serait fastidieux de recomposer à
  * chaque tableau de bord.
  */
-export function StatCard({ icon, description, action, className, ...statisticProps }: StatCardProps) {
-  return <Card className={cn("sia-stat-card", className)}><CardBody><div className="sia-stat-card__top">{icon && <span className="sia-stat-card__icon" aria-hidden="true">{icon}</span>}{action}</div><Statistic {...statisticProps} />{description && <div className="sia-stat-card__description">{description}</div>}</CardBody></Card>;
+export function StatCard({ icon, description, action, className, cardProps, cardBodyProps, ...statisticProps }: StatCardProps) {
+  return <Card {...cardProps} className={cn("sia-stat-card", className, cardProps?.className)}><CardBody {...cardBodyProps}><div className="sia-stat-card__top">{icon && <span className="sia-stat-card__icon" aria-hidden="true">{icon}</span>}{action}</div><Statistic {...statisticProps} />{description && <div className="sia-stat-card__description">{description}</div>}</CardBody></Card>;
 }

package/dist/registry/package/components/Statistic/index.tsx

@@ -1,11 +1,13 @@
 import { type ReactNode } from "react";
 import { cn, formatCurrency } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface StatisticProps {
   value: number;
   label?: ReactNode;
   format?: "number" | "currency" | "percent";
+  /** La langue du format. Par défaut, celle de la locale SIA. */
   locale?: string;
   currency?: string;
   precision?: number;
@@ -22,7 +24,9 @@ export interface StatisticProps {
  * décide du sens et de la couleur. Une flèche passée en prop finit par
  * pointer vers le haut sur une baisse.
  */
-export function Statistic({ value, label, format = "number", locale = "fr-FR", currency = "XAF", precision, prefix, suffix, trend, className }: StatisticProps) {
+export function Statistic({ value, label, format = "number", locale: localeProp, currency = "XAF", precision, prefix, suffix, trend, className }: StatisticProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
   const formatted = format === "currency"
     ? formatCurrency(value, { locale, currency, ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) })
     : new Intl.NumberFormat(locale, format === "percent" ? { style: "percent", ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) } : { ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) }).format(value);

package/dist/registry/package/components/Steps/styles.css

@@ -34,7 +34,7 @@
 .sia-steps__item[data-status="done"] .sia-steps__bullet {
   border-color: var(--sia-success);
   background: var(--sia-success);
-  color: #fff;
+  color: var(--sia-success-foreground);
   /* La coche tombe avec un léger rebond quand l'étape bascule. */
   animation: sia-step-done var(--sia-duration-slow) var(--sia-easing-spring);
 }
@@ -68,7 +68,7 @@
 .sia-steps__item[data-status="error"] .sia-steps__bullet {
   border-color: var(--sia-danger);
   background: var(--sia-danger);
-  color: #fff;
+  color: var(--sia-danger-foreground);
 }
 
 .sia-steps__connector { position: relative; overflow: hidden; background: var(--sia-border); }

package/dist/registry/package/components/TagsInput/index.tsx

@@ -1,5 +1,6 @@
 import { useState, type KeyboardEvent } from "react";
 import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
 import { XIcon } from "../Icons";
 import "./styles.css";
 export interface TagsInputProps { id?: string; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; placeholder?: string; separators?: string[]; maxTags?: number; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
@@ -10,4 +11,4 @@ export interface TagsInputProps { id?: string; value?: string[]; defaultValue?:
  * que ce sont les deux touches que l'on presse sans y penser après avoir
  * tapé un mot.
  */
-export function TagsInput({ id, value, defaultValue = [], onValueChange, placeholder = "Ajouter un tag", separators = ["Enter", ","], maxTags, disabled, className, ...ariaProps }: TagsInputProps) { const [internal, setInternal] = useState(defaultValue); const [draft, setDraft] = useState(""); const current = value ?? internal; const update = (next: string[]) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; const add = () => { const tag = draft.trim().replace(/,$/, ""); if (!tag || current.includes(tag) || (maxTags !== undefined && current.length >= maxTags)) return; update([...current, tag]); setDraft(""); }; return <div id={id} className={cn("sia-tags-input", className)} {...ariaProps}>{current.map((tag) => <span key={tag}>{tag}<button type="button" disabled={disabled} aria-label={`Retirer ${tag}`} onClick={() => update(current.filter((item) => item !== tag))}><XIcon /></button></span>)}<input value={draft} disabled={disabled} placeholder={placeholder} onChange={(event) => setDraft(event.target.value)} onBlur={add} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (separators.includes(event.key)) { event.preventDefault(); add(); } if (event.key === "Backspace" && !draft && current.length) update(current.slice(0, -1)); }} /></div>; }
+export function TagsInput({ id, value, defaultValue = [], onValueChange, placeholder: placeholderProp, separators = ["Enter", ","], maxTags, disabled, className, ...ariaProps }: TagsInputProps) { const messages = useSiaLocale().tagsInput; const placeholder = placeholderProp ?? messages.placeholder; const [internal, setInternal] = useState(defaultValue); const [draft, setDraft] = useState(""); const current = value ?? internal; const update = (next: string[]) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; const add = () => { const tag = draft.trim().replace(/,$/, ""); if (!tag || current.includes(tag) || (maxTags !== undefined && current.length >= maxTags)) return; update([...current, tag]); setDraft(""); }; return <div id={id} className={cn("sia-tags-input", className)} {...ariaProps}>{current.map((tag) => <span key={tag}>{tag}<button type="button" disabled={disabled} aria-label={formatMessage(messages.removeTag, { name: tag })} onClick={() => update(current.filter((item) => item !== tag))}><XIcon /></button></span>)}<input value={draft} disabled={disabled} placeholder={placeholder} onChange={(event) => setDraft(event.target.value)} onBlur={add} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (separators.includes(event.key)) { event.preventDefault(); add(); } if (event.key === "Backspace" && !draft && current.length) update(current.slice(0, -1)); }} /></div>; }

package/dist/registry/package/components/TimePicker/index.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { CheckIcon, ChevronDownIcon, ClockIcon, XIcon } from "../Icons";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 import { formatTimeValue, parseTimeValue, type TimeParts } from "../Timer";
 import "./styles.css";
 
@@ -19,6 +20,7 @@ export interface TimePickerProps {
   hourFormat?: 12 | 24;
   needConfirm?: boolean;
   allowClear?: boolean;
+  /** Par défaut, « Sélectionner une heure » de la locale SIA. */
   placeholder?: string;
   disabledTime?: (value: TimeParts) => boolean;
   renderExtraFooter?: () => ReactNode;
@@ -26,6 +28,8 @@ export interface TimePickerProps {
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
   placement?: OverlayPlacement;
+  /** Réglages du panneau flottant — décalage, marge au bord, classe. */
+  overlayProps?: Partial<Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">>;
   tone?: ComponentTone;
   invalid?: boolean;
   disabled?: boolean;
@@ -50,8 +54,10 @@ function steppedValues(limit: number, step: number) {
  * demande — la plupart des heures métier n'en ont pas.
  */
 export const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker({
-  id, name, value, defaultValue = "", min, max, showSeconds = false, minuteStep = 1, secondStep = 1, hourFormat = 24, needConfirm = false, allowClear = true, placeholder = "Sélectionner une heure", disabledTime, renderExtraFooter, onValueChange, onOpenChange, open: openProp, placement = "bottom-start", tone = "primary", invalid = false, disabled = false, required = false, className, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...ariaProps
+  id, name, value, defaultValue = "", min, max, showSeconds = false, minuteStep = 1, secondStep = 1, hourFormat = 24, needConfirm = false, allowClear = true, placeholder: placeholderProp, disabledTime, renderExtraFooter, onValueChange, onOpenChange, open: openProp, placement = "bottom-start", overlayProps, tone = "primary", invalid = false, disabled = false, required = false, className, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...ariaProps
 }, forwardedRef) {
+  const locale = useSiaLocale();
+  const placeholder = placeholderProp ?? locale.selectTime;
   const generatedId = useId();
   const controlId = id ?? `sia-time-picker-${generatedId.replace(/:/g, "")}`;
   const anchorRef = useRef<HTMLButtonElement>(null);
@@ -76,8 +82,8 @@ export const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(functio
   const renderColumn = (label: string, values: number[], selected: number, key: keyof TimeParts) => <div className="sia-time-panel__column" role="listbox" aria-label={label}>{values.map((option) => { const candidate = { ...draft, [key]: option }; const serialized = formatTimeValue(candidate, showSeconds); const optionDisabled = Boolean((min && serialized < min) || (max && serialized > max) || disabledTime?.(candidate)); const display = key === "hours" && hourFormat === 12 ? ((option + 11) % 12) + 1 : option; return <button type="button" role="option" aria-selected={selected === option} disabled={optionDisabled} key={option} onClick={() => select({ [key]: option })}><span>{String(display).padStart(2, "0")}</span>{selected === option && <CheckIcon />}</button>; })}</div>;
   return <div className={cn("sia-picker", "sia-time-picker", toneClass("sia-tone", tone), invalid && "sia-picker--invalid", disabled && "sia-picker--disabled", className)}>
     {name && <input type="hidden" name={name} value={current} />}
-    <button ref={setRef} id={controlId} type="button" className="sia-picker__trigger" disabled={disabled} aria-haspopup="dialog" aria-expanded={open} aria-invalid={ariaInvalid ?? (invalid || undefined)} aria-required={ariaRequired ?? (required || undefined)} onClick={() => setOpen(!open)} {...ariaProps}><ClockIcon className="sia-picker__icon" /><span className={cn("sia-picker__value", !current && "sia-picker__placeholder")}>{current || placeholder}</span><span className="sia-picker__actions">{allowClear && current && <span className="sia-picker__clear" title="Effacer" aria-hidden="true" onClick={(event) => { event.stopPropagation(); update(""); }}><XIcon /></span>}<ChevronDownIcon /></span></button>
-    <Overlay open={open} anchorRef={anchorRef} onOpenChange={setOpen} placement={placement} className="sia-picker__overlay"><div className={cn("sia-time-panel", toneClass("sia-tone", tone))}><div className="sia-time-panel__columns">{renderColumn("Heures", hours, draft.hours, "hours")}{renderColumn("Minutes", minutes, draft.minutes, "minutes")}{showSeconds && renderColumn("Secondes", seconds, draft.seconds, "seconds")}</div><footer className="sia-time-panel__footer">{renderExtraFooter?.()}<button type="button" className="sia-time-panel__now" onClick={() => setDraft(parseTimeValue(new Date().toTimeString().slice(0, 8)))}>Maintenant</button>{needConfirm && <button type="button" className="sia-time-panel__confirm" onClick={confirm}>OK</button>}</footer></div></Overlay>
+    <button ref={setRef} id={controlId} type="button" className="sia-picker__trigger" disabled={disabled} aria-haspopup="dialog" aria-expanded={open} aria-invalid={ariaInvalid ?? (invalid || undefined)} aria-required={ariaRequired ?? (required || undefined)} onClick={() => setOpen(!open)} {...ariaProps}><ClockIcon className="sia-picker__icon" /><span className={cn("sia-picker__value", !current && "sia-picker__placeholder")}>{current || placeholder}</span><span className="sia-picker__actions">{allowClear && current && <span className="sia-picker__clear" title={locale.clear} aria-hidden="true" onClick={(event) => { event.stopPropagation(); update(""); }}><XIcon /></span>}<ChevronDownIcon /></span></button>
+    <Overlay placement={placement} {...overlayProps} className={cn("sia-picker__overlay", overlayProps?.className)} open={open} anchorRef={anchorRef} onOpenChange={setOpen}><div className={cn("sia-time-panel", toneClass("sia-tone", tone))}><div className="sia-time-panel__columns">{renderColumn(locale.timePicker.hours, hours, draft.hours, "hours")}{renderColumn(locale.timePicker.minutes, minutes, draft.minutes, "minutes")}{showSeconds && renderColumn(locale.timePicker.seconds, seconds, draft.seconds, "seconds")}</div><footer className="sia-time-panel__footer">{renderExtraFooter?.()}<button type="button" className="sia-time-panel__now" onClick={() => setDraft(parseTimeValue(new Date().toTimeString().slice(0, 8)))}>{locale.timePicker.now}</button>{needConfirm && <button type="button" className="sia-time-panel__confirm" onClick={confirm}>{locale.timePicker.ok}</button>}</footer></div></Overlay>
   </div>;
 });
 TimePicker.displayName = "TimePicker";

package/dist/registry/package/components/Toast/index.tsx

@@ -24,7 +24,7 @@ import {
 } from "@sia-ui/headless";
 import { usePortal } from "@sia-ui/react";
 import { AlertCircleIcon, CheckIcon, InfoIcon, XIcon } from "../Icons";
-import { Spinner } from "../Spinner";
+import { Spinner, type SpinnerProps } from "../Spinner";
 import "./styles.css";
 
 export type { ToastId, ToastOptions, ToastPlacement, ToastTone };
@@ -38,14 +38,15 @@ export type { ToastId, ToastOptions, ToastPlacement, ToastTone };
  */
 export { toast, toastStore };
 
-const TONE_ICON: Record<ToastTone, ReactNode> = {
+// Le ton `loading` n'y figure pas : son `Spinner` se règle par
+// `spinnerProps`, il est donc rendu par l'annonce elle-même.
+const TONE_ICON: Record<Exclude<ToastTone, "loading">, ReactNode> = {
   neutral: null,
   primary: <InfoIcon />,
   info: <InfoIcon />,
   success: <CheckIcon />,
   warning: <AlertCircleIcon />,
   danger: <AlertCircleIcon />,
-  loading: <Spinner size="sm" tone="current" />,
 };
 
 /** Le temps laissé à l'animation de sortie avant le retrait définitif. */
@@ -80,6 +81,12 @@ export interface ToasterProps {
    */
   container?: HTMLElement | null | undefined;
   className?: string;
+  /**
+   * Les props du `Spinner` des annonces en attente (`toast.loading`,
+   * `toast.promise`) — variante, taille. Sans effet sur une annonce qui
+   * fournit sa propre `icon`.
+   */
+  spinnerProps?: Partial<SpinnerProps>;
 }
 
 /**
@@ -98,6 +105,7 @@ export function Toaster({
   offset = "1rem",
   container,
   className,
+  spinnerProps,
 }: ToasterProps) {
   const records = useToasts<ReactNode>();
   const node = usePortal(container ? { container } : { id: "sia-toaster" });
@@ -152,6 +160,7 @@ export function Toaster({
                 record={record}
                 placement={corner}
                 closeLabel={locale.close}
+                {...(spinnerProps ? { spinnerProps } : {})}
               />
             ))}
           </div>
@@ -166,11 +175,17 @@ interface ToastItemProps {
   record: ToastRecord<ReactNode>;
   placement: ToastPlacement;
   closeLabel: string;
+  spinnerProps?: Partial<SpinnerProps>;
 }
 
-function ToastItem({ record, placement, closeLabel }: ToastItemProps) {
+function ToastItem({ record, placement, closeLabel, spinnerProps }: ToastItemProps) {
   const tone = record.tone ?? "neutral";
-  const icon = record.icon === undefined ? TONE_ICON[tone] : record.icon;
+  const icon =
+    record.icon !== undefined
+      ? record.icon
+      : tone === "loading"
+        ? <Spinner size="sm" tone="current" {...spinnerProps} />
+        : TONE_ICON[tone];
   const closable = record.closable ?? tone !== "loading";
   const duration = toastStore.durationOf(record);
   const timed = Number.isFinite(duration) && duration > 0;

package/dist/registry/package/components/Tour/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface TourStep { target: string; title: ReactNode; description?: ReactNode; }
@@ -12,4 +13,4 @@ export interface TourProps { open: boolean; onOpenChange: (open: boolean) => voi
  * référence : une visite se déclare souvent loin des composants qu'elle
  * montre, et parfois avant qu'ils n'existent.
  */
-export function Tour({ open, onOpenChange, steps, initialStep = 0, onStepChange, className }: TourProps) { const [index, setIndex] = useState(initialStep); useEffect(() => { if (open) setIndex(initialStep); }, [open, initialStep]); useEffect(() => { if (!open) return; const target = document.querySelector<HTMLElement>(steps[index]?.target ?? ""); target?.scrollIntoView({ block: "center", behavior: "smooth" }); target?.setAttribute("data-sia-tour-active", "true"); return () => target?.removeAttribute("data-sia-tour-active"); }, [open, index, steps]); if (!open || typeof document === "undefined" || steps.length === 0) return null; const step = steps[index]; const move = (next: number) => { if (next >= steps.length) { onOpenChange(false); return; } setIndex(next); onStepChange?.(next); }; return createPortal(<div className="sia-tour-backdrop"><section className={cn("sia-tour", className)} role="dialog" aria-modal="true"><small>{index + 1} / {steps.length}</small><h2>{step?.title}</h2>{step?.description && <p>{step.description}</p>}<footer><button type="button" onClick={() => onOpenChange(false)}>Fermer</button><button type="button" disabled={index === 0} onClick={() => move(index - 1)}>Précédent</button><button type="button" onClick={() => move(index + 1)}>{index === steps.length - 1 ? "Terminer" : "Suivant"}</button></footer></section></div>, document.body); }
+export function Tour({ open, onOpenChange, steps, initialStep = 0, onStepChange, className }: TourProps) { const locale = useSiaLocale(); const [index, setIndex] = useState(initialStep); useEffect(() => { if (open) setIndex(initialStep); }, [open, initialStep]); useEffect(() => { if (!open) return; const target = document.querySelector<HTMLElement>(steps[index]?.target ?? ""); target?.scrollIntoView({ block: "center", behavior: "smooth" }); target?.setAttribute("data-sia-tour-active", "true"); return () => target?.removeAttribute("data-sia-tour-active"); }, [open, index, steps]); if (!open || typeof document === "undefined" || steps.length === 0) return null; const step = steps[index]; const move = (next: number) => { if (next >= steps.length) { onOpenChange(false); return; } setIndex(next); onStepChange?.(next); }; return createPortal(<div className="sia-tour-backdrop"><section className={cn("sia-tour", className)} role="dialog" aria-modal="true"><small>{formatMessage(locale.tour.progress, { current: index + 1, total: steps.length })}</small><h2>{step?.title}</h2>{step?.description && <p>{step.description}</p>}<footer><button type="button" onClick={() => onOpenChange(false)}>{locale.close}</button><button type="button" disabled={index === 0} onClick={() => move(index - 1)}>{locale.previous}</button><button type="button" onClick={() => move(index + 1)}>{index === steps.length - 1 ? locale.tour.finish : locale.next}</button></footer></section></div>, document.body); }

package/dist/registry/package/components/Transfer/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface TransferItem { key: Key; label: ReactNode; disabled?: boolean; }
@@ -11,4 +12,4 @@ export interface TransferProps { items: TransferItem[]; targetKeys: Key[]; onCha
  * cocher de deux cents lignes ne montre plus ce qui est retenu, alors que
  * la colonne de droite ne contient que cela.
  */
-export function Transfer({ items, targetKeys, onChange, sourceTitle = "Disponibles", targetTitle = "Sélectionnés", className }: TransferProps) { const [checked, setChecked] = useState<Key[]>([]); const target = useMemo(() => new Set(targetKeys), [targetKeys]); const renderList = (list: TransferItem[], title: string) => <section><header>{title} <span>{list.length}</span></header>{list.map((item) => <label key={item.key}><input type="checkbox" disabled={item.disabled} checked={checked.includes(item.key)} onChange={(event) => setChecked((current) => event.target.checked ? [...current, item.key] : current.filter((key) => key !== item.key))} />{item.label}</label>)}</section>; const sourceItems = items.filter((item) => !target.has(item.key)); const targetItems = items.filter((item) => target.has(item.key)); return <div className={cn("sia-transfer", className)}>{renderList(sourceItems, sourceTitle)}<div className="sia-transfer__actions"><button type="button" aria-label="Ajouter" onClick={() => { onChange([...new Set([...targetKeys, ...checked])]); setChecked([]); }}>→</button><button type="button" aria-label="Retirer" onClick={() => { onChange(targetKeys.filter((key) => !checked.includes(key))); setChecked([]); }}>←</button></div>{renderList(targetItems, targetTitle)}</div>; }
+export function Transfer({ items, targetKeys, onChange, sourceTitle: sourceTitleProp, targetTitle: targetTitleProp, className }: TransferProps) { const messages = useSiaLocale().transfer; const sourceTitle = sourceTitleProp ?? messages.sourceTitle; const targetTitle = targetTitleProp ?? messages.targetTitle; const [checked, setChecked] = useState<Key[]>([]); const target = useMemo(() => new Set(targetKeys), [targetKeys]); const renderList = (list: TransferItem[], title: string) => <section><header>{title} <span>{list.length}</span></header>{list.map((item) => <label key={item.key}><input type="checkbox" disabled={item.disabled} checked={checked.includes(item.key)} onChange={(event) => setChecked((current) => event.target.checked ? [...current, item.key] : current.filter((key) => key !== item.key))} />{item.label}</label>)}</section>; const sourceItems = items.filter((item) => !target.has(item.key)); const targetItems = items.filter((item) => target.has(item.key)); return <div className={cn("sia-transfer", className)}>{renderList(sourceItems, sourceTitle)}<div className="sia-transfer__actions"><button type="button" aria-label={messages.moveToTarget} onClick={() => { onChange([...new Set([...targetKeys, ...checked])]); setChecked([]); }}>→</button><button type="button" aria-label={messages.moveToSource} onClick={() => { onChange(targetKeys.filter((key) => !checked.includes(key))); setChecked([]); }}>←</button></div>{renderList(targetItems, targetTitle)}</div>; }

package/dist/registry/package/components/Tree/index.tsx

@@ -1,10 +1,11 @@
 import { useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale, type TreeMessages } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface TreeNode { key: Key; label: ReactNode; children?: TreeNode[]; disabled?: boolean; }
 export interface TreeProps { nodes: TreeNode[]; defaultExpandedKeys?: Key[]; selectedKey?: Key | undefined; onSelect?: ((node: TreeNode) => void) | undefined; className?: string; }
-function TreeBranch({ nodes, level, expanded, toggle, selectedKey, onSelect }: { nodes: TreeNode[]; level: number; expanded: Set<Key>; toggle: (key: Key) => void; selectedKey?: Key | undefined; onSelect?: ((node: TreeNode) => void) | undefined }) { return <ul role={level === 1 ? "tree" : "group"}>{nodes.map((node) => { const hasChildren = Boolean(node.children?.length); const isExpanded = expanded.has(node.key); return <li key={node.key} role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined} aria-selected={selectedKey === node.key} aria-disabled={node.disabled || undefined}><div className="sia-tree__row" style={{ paddingInlineStart: `${(level - 1) * 1.25}rem` }}>{hasChildren ? <button type="button" aria-label={isExpanded ? "Réduire" : "Développer"} onClick={() => toggle(node.key)}>{isExpanded ? "−" : "+"}</button> : <span className="sia-tree__spacer" />}<button type="button" disabled={node.disabled} className="sia-tree__label" onClick={() => onSelect?.(node)}>{node.label}</button></div>{hasChildren && isExpanded && <TreeBranch nodes={node.children ?? []} level={level + 1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} />}</li>; })}</ul>; }
+function TreeBranch({ nodes, level, expanded, toggle, selectedKey, onSelect, messages }: { nodes: TreeNode[]; level: number; expanded: Set<Key>; toggle: (key: Key) => void; selectedKey?: Key | undefined; onSelect?: ((node: TreeNode) => void) | undefined; messages: TreeMessages }) { return <ul role={level === 1 ? "tree" : "group"}>{nodes.map((node) => { const hasChildren = Boolean(node.children?.length); const isExpanded = expanded.has(node.key); return <li key={node.key} role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined} aria-selected={selectedKey === node.key} aria-disabled={node.disabled || undefined}><div className="sia-tree__row" style={{ paddingInlineStart: `${(level - 1) * 1.25}rem` }}>{hasChildren ? <button type="button" aria-label={isExpanded ? messages.collapse : messages.expand} onClick={() => toggle(node.key)}>{isExpanded ? "−" : "+"}</button> : <span className="sia-tree__spacer" />}<button type="button" disabled={node.disabled} className="sia-tree__label" onClick={() => onSelect?.(node)}>{node.label}</button></div>{hasChildren && isExpanded && <TreeBranch nodes={node.children ?? []} level={level + 1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} messages={messages} />}</li>; })}</ul>; }
 /**
  * Une arborescence qu'on déplie.
  *
@@ -12,4 +13,4 @@ function TreeBranch({ nodes, level, expanded, toggle, selectedKey, onSelect }: {
  * nœud ne désélectionne pas ce qu'il contient, et rouvrir l'écran ne doit
  * pas tout refermer.
  */
-export function Tree({ nodes, defaultExpandedKeys = [], selectedKey, onSelect, className }: TreeProps) { const [expanded, setExpanded] = useState(new Set(defaultExpandedKeys)); const toggle = (key: Key) => setExpanded((current) => { const next = new Set(current); if (next.has(key)) next.delete(key); else next.add(key); return next; }); return <div className={cn("sia-tree", className)}><TreeBranch nodes={nodes} level={1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} /></div>; }
+export function Tree({ nodes, defaultExpandedKeys = [], selectedKey, onSelect, className }: TreeProps) { const messages = useSiaLocale().tree; const [expanded, setExpanded] = useState(new Set(defaultExpandedKeys)); const toggle = (key: Key) => setExpanded((current) => { const next = new Set(current); if (next.has(key)) next.delete(key); else next.add(key); return next; }); return <div className={cn("sia-tree", className)}><TreeBranch nodes={nodes} level={1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} messages={messages} /></div>; }

package/dist/registry/package/components/TreeSelect/index.tsx

@@ -1,10 +1,23 @@
 import { useState, type Key } from "react";
-import { Tree, type TreeNode } from "../Tree";
+import { Tree, type TreeNode, type TreeProps } from "../Tree";
 import { cn } from "@sia-ui/utils";
 import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
-export interface TreeSelectProps { nodes: TreeNode[]; value?: Key | undefined; onValueChange?: (value: Key, node: TreeNode) => void; placeholder?: string; className?: string; }
+export interface TreeSelectProps {
+  nodes: TreeNode[];
+  value?: Key | undefined;
+  onValueChange?: (value: Key, node: TreeNode) => void;
+  placeholder?: string;
+  className?: string;
+  /**
+   * L'arbre du panneau : nœuds dépliés à l'ouverture, classe.
+   *
+   * Les nœuds, la sélection et son rappel restent au sélecteur, qui se
+   * referme sur le choix.
+   */
+  treeProps?: Partial<Omit<TreeProps, "nodes" | "selectedKey" | "onSelect">>;
+}
 /**
  * Un choix dans une arborescence.
  *
@@ -12,6 +25,6 @@ export interface TreeSelectProps { nodes: TreeNode[]; value?: Key | undefined; o
  * attente » ne se réduit pas à « En attente » sans devenir ambigu dès qu'un
  * autre nœud porte le même nom.
  */
-export function TreeSelect({ nodes, value, onValueChange, placeholder: placeholderProp, className }: TreeSelectProps) {
+export function TreeSelect({ nodes, value, onValueChange, placeholder: placeholderProp, className, treeProps }: TreeSelectProps) {
     const locale = useSiaLocale();
-    const placeholder = placeholderProp ?? locale.select; const [open, setOpen] = useState(false); const find = (items: TreeNode[]): TreeNode | undefined => { for (const item of items) { if (item.key === value) return item; const child = item.children ? find(item.children) : undefined; if (child) return child; } }; const selected = find(nodes); return <div className={cn("sia-tree-select", className)}><button type="button" className="sia-tree-select__trigger" aria-expanded={open} onClick={() => setOpen(!open)}>{selected?.label ?? placeholder}</button>{open && <div className="sia-tree-select__panel"><Tree nodes={nodes} defaultExpandedKeys={nodes.map((node) => node.key)} selectedKey={value} onSelect={(node) => { onValueChange?.(node.key, node); setOpen(false); }} /></div>}</div>; }
+    const placeholder = placeholderProp ?? locale.select; const [open, setOpen] = useState(false); const find = (items: TreeNode[]): TreeNode | undefined => { for (const item of items) { if (item.key === value) return item; const child = item.children ? find(item.children) : undefined; if (child) return child; } }; const selected = find(nodes); return <div className={cn("sia-tree-select", className)}><button type="button" className="sia-tree-select__trigger" aria-expanded={open} onClick={() => setOpen(!open)}>{selected?.label ?? placeholder}</button>{open && <div className="sia-tree-select__panel"><Tree defaultExpandedKeys={nodes.map((node) => node.key)} {...treeProps} nodes={nodes} selectedKey={value} onSelect={(node) => { onValueChange?.(node.key, node); setOpen(false); }} /></div>}</div>; }

package/dist/registry/package/components/UnsavedChangesGuard/index.tsx

@@ -1,5 +1,10 @@
 import { useEffect } from "react";
-export interface UnsavedChangesGuardProps { when: boolean; message?: string; }
+import { FRENCH, useSiaLocale } from "@sia-ui/headless";
+export interface UnsavedChangesGuardProps {
+  when: boolean;
+  /** Le message de la confirmation. Par défaut, `unsavedChangesGuard.message` de la locale. */
+  message?: string;
+}
 /**
  * L'avertissement avant de quitter une saisie en cours.
  *
@@ -8,5 +13,31 @@ export interface UnsavedChangesGuardProps { when: boolean; message?: string; }
  * confirmation interne, que `confirmUnsavedNavigation` déclenche avant une
  * navigation du routeur.
  */
-export function UnsavedChangesGuard({ when, message = "Des modifications non enregistrées seront perdues." }: UnsavedChangesGuardProps) { useEffect(() => { if (!when) return; const handler = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = message; return message; }; window.addEventListener("beforeunload", handler); return () => window.removeEventListener("beforeunload", handler); }, [when, message]); return null; }
-export function confirmUnsavedNavigation(when: boolean, message = "Des modifications non enregistrées seront perdues.") { return !when || window.confirm(message); }
+export function UnsavedChangesGuard({ when, message: messageProp }: UnsavedChangesGuardProps) {
+  const locale = useSiaLocale();
+  const message = messageProp ?? locale.unsavedChangesGuard.message;
+  useEffect(() => {
+    if (!when) return;
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = message;
+      return message;
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [when, message]);
+  return null;
+}
+/**
+ * La confirmation avant une navigation du routeur.
+ *
+ * Hors d'un composant, la locale n'est pas lisible : passer
+ * `locale.unsavedChangesGuard.message` (lu avec `useSiaLocale()`) pour un
+ * message dans la langue de l'application. À défaut, le message français.
+ */
+export function confirmUnsavedNavigation(
+  when: boolean,
+  message: string = FRENCH.unsavedChangesGuard.message,
+) {
+  return !when || window.confirm(message);
+}