@sia-ui/cli 0.7.0 → 0.8.0

package/dist/registry/package/components/DataTable/types.ts

@@ -1,6 +1,15 @@
 import type { Key, ReactNode } from "react";
 import type { PermissionRule } from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
+import type { SearchInputProps } from "../SearchInput";
+import type { EmptyStateProps } from "../EmptyState";
+import type { ErrorStateProps } from "../ErrorState";
+import type { SkeletonProps } from "../Skeleton";
+import type { CheckboxProps } from "../Checkbox";
+import type { ButtonProps } from "../Button";
+import type { IconButtonProps } from "../IconButton";
+import type { DropdownMenuProps } from "../DropdownMenu";
+import type { ConfirmDialogProps } from "../ConfirmDialog";
 
 /** Liste dense, ou grille de cartes. */
 export type DataTableView = "table" | "cards";
@@ -115,6 +124,18 @@ export interface DataTableProps<T> {
    * lettre ; Entrée et l'effacement déclenchent sans attendre.
    */
   searchDelay?: number;
+  /**
+   * Le champ de recherche : placeholder, libellés, `clearable`, classe.
+   *
+   * La valeur et les rappels restent au tableau — c'est lui qui filtre et
+   * qui temporise ; les déléguer ici ferait deux recherches concurrentes.
+   */
+  searchInputProps?: Partial<
+    Omit<
+      SearchInputProps,
+      "value" | "defaultValue" | "onValueChange" | "onSearch" | "searchDelay"
+    >
+  >;
 
   /* ─────────────────────────────────────────────────────── mise en page */
 
@@ -135,6 +156,40 @@ export interface DataTableProps<T> {
   actionsHeader?: ReactNode;
   /** `icon` garde la colonne étroite sur un tableau déjà large. */
   actionsDisplay?: "icon" | "label";
+  /**
+   * Les boutons d'action à libellé : variante, taille, classe.
+   *
+   * Le clic, le libellé et l'état désactivé viennent de chaque `RowAction`.
+   */
+  rowActionButtonProps?: Partial<
+    Omit<ButtonProps, "onClick" | "children" | "disabled">
+  >;
+  /**
+   * Les boutons d'action réduits à l'icône, déclencheur du menu « autres
+   * actions » compris. Une `tooltip` passée ici se fusionne avec celle de
+   * l'action, qui garde son libellé.
+   */
+  rowActionIconButtonProps?: Partial<
+    Omit<IconButtonProps, "onClick" | "label" | "icon" | "disabled">
+  >;
+  /**
+   * Le menu des actions qui ne tiennent pas en ligne : placement, décalage.
+   *
+   * Ni `open` ni `defaultOpen` : partagés par toutes les lignes, ils
+   * ouvriraient tous les menus à la fois.
+   */
+  rowActionsMenuProps?: Partial<
+    Omit<DropdownMenuProps, "items" | "children" | "onSelect" | "open" | "defaultOpen">
+  >;
+  /**
+   * La confirmation d'une action : libellés par défaut, `loading`.
+   *
+   * Ce que déclare `confirm` sur l'action l'emporte ; le ton suit
+   * `confirm.destructive`, l'ouverture et la validation restent au tableau.
+   */
+  confirmDialogProps?: Partial<
+    Omit<ConfirmDialogProps, "open" | "onOpenChange" | "onConfirm" | "title" | "tone">
+  >;
 
   /** Évalue les règles de permission des actions. */
   can?: (rule: PermissionRule) => boolean;
@@ -161,13 +216,28 @@ export interface DataTableProps<T> {
   loading?: boolean;
   /** Lignes fantômes pendant le premier chargement. */
   skeletonRows?: number;
+  /** Les blocs fantômes : rayon, classe, style. Leurs tailles ne sont que des défauts. */
+  skeletonProps?: Partial<SkeletonProps>;
   error?: ReactNode;
   onRetry?: () => void;
+  /**
+   * L'état d'erreur : titre, libellé du bouton, action, `compact`.
+   *
+   * Le message vient de `error` ; `onRetry` du tableau l'emporte s'il est
+   * fourni.
+   */
+  errorStateProps?: Partial<Omit<ErrorStateProps, "description" | "error">>;
   empty?: {
     title?: ReactNode;
     description?: ReactNode;
     action?: ReactNode;
+    icon?: ReactNode;
   };
+  /**
+   * L'état vide au complet : icône, `compact`, classe. Ce que déclare `empty`
+   * l'emporte sur les mêmes clés.
+   */
+  emptyStateProps?: Partial<EmptyStateProps>;
 
   /* ───────────────────────────────────────────────────────── sélection */
 
@@ -183,6 +253,25 @@ export interface DataTableProps<T> {
   defaultSelectedKeys?: Key[];
   onSelectionChange?: (keys: Key[], rows: T[]) => void;
   isRowSelectable?: (row: T, index: number) => boolean;
+  /**
+   * Les cases de sélection, en-tête comprise : taille, ton, classe.
+   *
+   * L'état coché, l'indétermination et le rappel sont calculés par le
+   * tableau ; le clic reste retenu pour ne pas déclencher `onRowClick`.
+   */
+  checkboxProps?: Partial<
+    Omit<
+      CheckboxProps,
+      | "checked"
+      | "defaultChecked"
+      | "indeterminate"
+      | "onValueChange"
+      | "onChange"
+      | "onClick"
+      | "disabled"
+      | "value"
+    >
+  >;
   /** Barre affichée dès qu'une ligne est cochée. */
   selectionActions?: (context: {
     keys: Key[];
@@ -200,3 +289,14 @@ export interface DataTableProps<T> {
   caption?: string;
   className?: string;
 }
+
+/**
+ * Les réglages des sous-composants d'une action de ligne. Regroupés, ils
+ * traversent la vue cartes sans une prop par sous-composant.
+ */
+export interface RowActionsSlots {
+  button: DataTableProps<unknown>["rowActionButtonProps"];
+  iconButton: DataTableProps<unknown>["rowActionIconButtonProps"];
+  menu: DataTableProps<unknown>["rowActionsMenuProps"];
+  confirmDialog: DataTableProps<unknown>["confirmDialogProps"];
+}

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

@@ -1,9 +1,10 @@
 import { forwardRef, useId, useRef, useState, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import { Calendar, type CalendarProps } from "../Calendar";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { CalendarIcon, ChevronDownIcon, XIcon } from "../Icons";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 
 export interface DatePickerProps
   extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
@@ -16,12 +17,15 @@ export interface DatePickerProps
   onValueChange?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
+  /** Par défaut, « Sélectionner une date » de la locale SIA. */
   placeholder?: string;
   formatValue?: (value: string, locale: string) => ReactNode;
   allowClear?: boolean;
   showToday?: boolean;
   renderExtraFooter?: () => ReactNode;
   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;
@@ -57,17 +61,18 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(functio
   onValueChange,
   onOpenChange,
   open: openProp,
-  placeholder = "Sélectionner une date",
+  placeholder: placeholderProp,
   formatValue = defaultFormat,
   allowClear = true,
   showToday = true,
   renderExtraFooter,
   placement = "bottom-start",
+  overlayProps,
   tone = "primary",
   invalid = false,
   disabled = false,
   required = false,
-  locale = "fr-FR",
+  locale: localeProp,
   firstDayOfWeek = 1,
   disabledDate,
   cellRender,
@@ -77,6 +82,9 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(functio
   "aria-required": ariaRequired,
   ...ariaProps
 }, forwardedRef) {
+  const messages = useSiaLocale();
+  const placeholder = placeholderProp ?? messages.selectDate;
+  const locale = localeProp ?? messages.language;
   const generatedId = useId();
   const controlId = id ?? `sia-date-picker-${generatedId.replace(/:/g, "")}`;
   const anchorRef = useRef<HTMLButtonElement>(null);
@@ -96,12 +104,12 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(functio
         <CalendarIcon className="sia-picker__icon" />
         <span className={cn("sia-picker__value", !current && "sia-picker__placeholder")}>{current ? formatValue(current, locale) : 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>}
+          {allowClear && current && <span className="sia-picker__clear" title={messages.clear} 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">
-        <Calendar value={current} defaultMonth={current} {...(min && max ? { validRange: [min, max] as [string, string] } : {})} disabledDate={(date) => Boolean((min && date < min) || (max && date > max) || disabledDate?.(date))} locale={locale} firstDayOfWeek={firstDayOfWeek} {...(cellRender ? { cellRender } : {})} {...(showWeek !== undefined ? { showWeek } : {})} tone={tone} onValueChange={(next) => { update(next); setOpen(false); }} renderExtraFooter={() => <div className="sia-picker__footer">{showToday && <button type="button" disabled={Boolean((min && todayValue < min) || (max && todayValue > max) || disabledDate?.(todayValue))} onClick={() => { update(todayValue); setOpen(false); }}>Aujourd'hui</button>}{renderExtraFooter?.()}</div>} />
+      <Overlay placement={placement} {...overlayProps} className={cn("sia-picker__overlay", overlayProps?.className)} open={open} anchorRef={anchorRef} onOpenChange={setOpen}>
+        <Calendar value={current} defaultMonth={current} {...(min && max ? { validRange: [min, max] as [string, string] } : {})} disabledDate={(date) => Boolean((min && date < min) || (max && date > max) || disabledDate?.(date))} locale={locale} firstDayOfWeek={firstDayOfWeek} {...(cellRender ? { cellRender } : {})} {...(showWeek !== undefined ? { showWeek } : {})} tone={tone} onValueChange={(next) => { update(next); setOpen(false); }} renderExtraFooter={() => <div className="sia-picker__footer">{showToday && <button type="button" disabled={Boolean((min && todayValue < min) || (max && todayValue > max) || disabledDate?.(todayValue))} onClick={() => { update(todayValue); setOpen(false); }}>{messages.today}</button>}{renderExtraFooter?.()}</div>} />
       </Overlay>
     </div>
   );

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

@@ -1,10 +1,19 @@
 import { type ReactNode } from "react";
-import { DateRangePicker, type DateRangeValue } from "../DateRangePicker";
+import { DateRangePicker, type DateRangePickerProps, type DateRangeValue } from "../DateRangePicker";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface DateRangePreset { label: ReactNode; value: DateRangeValue; }
-export interface DateRangeFilterProps { value: DateRangeValue; onValueChange: (value: DateRangeValue) => void; presets?: DateRangePreset[]; onClear?: () => void; className?: string; }
+export interface DateRangeFilterProps {
+  value: DateRangeValue;
+  onValueChange: (value: DateRangeValue) => void;
+  presets?: DateRangePreset[];
+  onClear?: () => void;
+  /** Réglages du sélecteur de période — bornes, libellés, jours désactivés. */
+  dateRangePickerProps?: Partial<Omit<DateRangePickerProps, "value" | "defaultValue" | "onValueChange">>;
+  className?: string;
+}
 /**
  * Une période, avec ses raccourcis.
  *
@@ -12,4 +21,4 @@ export interface DateRangeFilterProps { value: DateRangeValue; onValueChange: (v
  * l'exercice — et les proposer évite de saisir deux dates pour la question
  * que tout le monde pose en premier.
  */
-export function DateRangeFilter({ value, onValueChange, presets = [], onClear, className }: DateRangeFilterProps) { return <section className={cn("sia-date-range-filter", className)}><div className="sia-date-range-filter__presets">{presets.map((preset, index) => <button type="button" key={index} onClick={() => onValueChange(preset.value)}>{preset.label}</button>)}</div><DateRangePicker value={value} onValueChange={onValueChange} />{onClear && (value.start || value.end) && <button type="button" className="sia-date-range-filter__clear" onClick={onClear}>Effacer</button>}</section>; }
+export function DateRangeFilter({ value, onValueChange, presets = [], onClear, dateRangePickerProps, className }: DateRangeFilterProps) { const locale = useSiaLocale(); return <section className={cn("sia-date-range-filter", className)}><div className="sia-date-range-filter__presets">{presets.map((preset, index) => <button type="button" key={index} onClick={() => onValueChange(preset.value)}>{preset.label}</button>)}</div><DateRangePicker {...dateRangePickerProps} value={value} onValueChange={onValueChange} />{onClear && (value.start || value.end) && <button type="button" className="sia-date-range-filter__clear" onClick={onClear}>{locale.clear}</button>}</section>; }

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

@@ -1,9 +1,10 @@
 import { useRef, useState } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import { Calendar, type CalendarProps, type CalendarRangeValue } from "../Calendar";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { ArrowRightIcon, CalendarIcon, ChevronDownIcon, XIcon } from "../Icons";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 
 export type DateRangeValue = CalendarRangeValue;
 export interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
@@ -12,10 +13,14 @@ export interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "fi
   onValueChange?: (value: DateRangeValue) => void;
   min?: string;
   max?: string;
+  /** Par défaut, « Date de début » de la locale SIA. */
   startLabel?: string;
+  /** Par défaut, « Date de fin » de la locale SIA. */
   endLabel?: string;
   allowClear?: 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;
@@ -28,7 +33,11 @@ export interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "fi
  * faut alors décider lequel des deux avait tort. Ici les deux bornes sont
  * une seule valeur, et le calendrier les tient dans l'ordre.
  */
-export function DateRangePicker({ value, defaultValue = { start: "", end: "" }, onValueChange, min, max, startLabel = "Date de début", endLabel = "Date de fin", allowClear = true, placement = "bottom-start", tone = "primary", invalid, disabled, locale = "fr-FR", firstDayOfWeek = 1, disabledDate, cellRender, showWeek, className }: DateRangePickerProps) {
+export function DateRangePicker({ value, defaultValue = { start: "", end: "" }, onValueChange, min, max, startLabel: startLabelProp, endLabel: endLabelProp, allowClear = true, placement = "bottom-start", overlayProps, tone = "primary", invalid, disabled, locale: localeProp, firstDayOfWeek = 1, disabledDate, cellRender, showWeek, className }: DateRangePickerProps) {
+  const messages = useSiaLocale();
+  const startLabel = startLabelProp ?? messages.startDate;
+  const endLabel = endLabelProp ?? messages.endDate;
+  const locale = localeProp ?? messages.language;
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [internal, setInternal] = useState(defaultValue);
   const [open, setOpen] = useState(false);
@@ -37,7 +46,7 @@ export function DateRangePicker({ value, defaultValue = { start: "", end: "" },
   const rangeInvalid = Boolean(invalid || (current.start && current.end && current.start > current.end));
   const format = (date: string) => date ? new Intl.DateTimeFormat(locale, { day: "2-digit", month: "short", year: "numeric" }).format(new Date(`${date}T12:00:00`)) : null;
   return <div className={cn("sia-picker", "sia-range-picker", "sia-date-range-picker", toneClass("sia-tone", tone), rangeInvalid && "sia-picker--invalid", disabled && "sia-picker--disabled", className)}>
-    <button ref={anchorRef} type="button" className="sia-picker__trigger sia-range-picker__trigger" disabled={disabled} aria-haspopup="dialog" aria-expanded={open} aria-invalid={rangeInvalid || undefined} onClick={() => setOpen(!open)}><CalendarIcon className="sia-picker__icon" /><span className={cn("sia-range-picker__part", !current.start && "sia-picker__placeholder")}>{format(current.start) ?? startLabel}</span><ArrowRightIcon className="sia-range-picker__separator" /><span className={cn("sia-range-picker__part", !current.end && "sia-picker__placeholder")}>{format(current.end) ?? endLabel}</span><span className="sia-picker__actions">{allowClear && (current.start || current.end) && <span className="sia-picker__clear" title="Effacer" aria-hidden="true" onClick={(event) => { event.stopPropagation(); update({ start: "", end: "" }); }}><XIcon /></span>}<ChevronDownIcon /></span></button>
-    <Overlay open={open} anchorRef={anchorRef} onOpenChange={setOpen} placement={placement} className="sia-picker__overlay"><Calendar selectionMode="range" range={current} defaultMonth={current.start || current.end} locale={locale} firstDayOfWeek={firstDayOfWeek} disabledDate={(date) => Boolean((min && date < min) || (max && date > max) || disabledDate?.(date))} {...(cellRender ? { cellRender } : {})} {...(showWeek !== undefined ? { showWeek } : {})} tone={tone} onRangeChange={(next) => { update(next); if (next.end) setOpen(false); }} /></Overlay>
+    <button ref={anchorRef} type="button" className="sia-picker__trigger sia-range-picker__trigger" disabled={disabled} aria-haspopup="dialog" aria-expanded={open} aria-invalid={rangeInvalid || undefined} onClick={() => setOpen(!open)}><CalendarIcon className="sia-picker__icon" /><span className={cn("sia-range-picker__part", !current.start && "sia-picker__placeholder")}>{format(current.start) ?? startLabel}</span><ArrowRightIcon className="sia-range-picker__separator" /><span className={cn("sia-range-picker__part", !current.end && "sia-picker__placeholder")}>{format(current.end) ?? endLabel}</span><span className="sia-picker__actions">{allowClear && (current.start || current.end) && <span className="sia-picker__clear" title={messages.clear} aria-hidden="true" onClick={(event) => { event.stopPropagation(); update({ start: "", end: "" }); }}><XIcon /></span>}<ChevronDownIcon /></span></button>
+    <Overlay placement={placement} {...overlayProps} className={cn("sia-picker__overlay", overlayProps?.className)} open={open} anchorRef={anchorRef} onOpenChange={setOpen}><Calendar selectionMode="range" range={current} defaultMonth={current.start || current.end} locale={locale} firstDayOfWeek={firstDayOfWeek} disabledDate={(date) => Boolean((min && date < min) || (max && date > max) || disabledDate?.(date))} {...(cellRender ? { cellRender } : {})} {...(showWeek !== undefined ? { showWeek } : {})} tone={tone} onRangeChange={(next) => { update(next); if (next.end) setOpen(false); }} /></Overlay>
   </div>;
 }

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

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { DatePicker, type DatePickerProps } from "../DatePicker";
 import { TimePicker, type TimePickerProps } from "../TimePicker";
 import { cn, toneClass } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
 
 export interface DateTimeValue { date: string; time: string; }
@@ -31,9 +32,10 @@ export interface DateTimePickerProps {
  * celle de la veille.
  */
 export function DateTimePicker({ value, defaultValue = { date: "", time: "" }, onValueChange, minuteStep = 1, secondStep = 1, showSeconds = false, hourFormat = 24, needConfirm = false, minDate, maxDate, tone = "primary", invalid, disabled, dateProps, timeProps, className }: DateTimePickerProps) {
+  const locale = useSiaLocale();
   const [internal, setInternal] = useState(defaultValue);
   const current = value ?? internal;
   const update = (next: DateTimeValue) => { if (value === undefined) setInternal(next); onValueChange?.(next); };
   const stateProps = { ...(invalid !== undefined ? { invalid } : {}), ...(disabled !== undefined ? { disabled } : {}) };
-  return <div className={cn("sia-date-time-picker", toneClass("sia-tone", tone), className)}><DatePicker {...dateProps} value={current.date} {...(minDate ? { min: minDate } : {})} {...(maxDate ? { max: maxDate } : {})} tone={tone} {...stateProps} aria-label="Date" onValueChange={(date) => update({ ...current, date })} /><TimePicker {...timeProps} value={current.time} minuteStep={minuteStep} secondStep={secondStep} showSeconds={showSeconds} hourFormat={hourFormat} needConfirm={needConfirm} tone={tone} {...stateProps} aria-label="Heure" onValueChange={(time) => update({ ...current, time })} /></div>;
+  return <div className={cn("sia-date-time-picker", toneClass("sia-tone", tone), className)}><DatePicker {...dateProps} value={current.date} {...(minDate ? { min: minDate } : {})} {...(maxDate ? { max: maxDate } : {})} tone={tone} {...stateProps} aria-label={locale.dateTimePicker.date} onValueChange={(date) => update({ ...current, date })} /><TimePicker {...timeProps} value={current.time} minuteStep={minuteStep} secondStep={secondStep} showSeconds={showSeconds} hourFormat={hourFormat} needConfirm={needConfirm} tone={tone} {...stateProps} aria-label={locale.dateTimePicker.time} onValueChange={(time) => update({ ...current, time })} /></div>;
 }

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

@@ -11,7 +11,7 @@ import { Portal } from "@sia-ui/react";
 import "./styles.css";
 import { useOutsideClick } from "@sia-ui/react";
 import { DrawerContext } from "./context";
-import { overlayStack, useDisclosureState } from "@sia-ui/headless";
+import { overlayStack, useDisclosureState, useSiaLocale } from "@sia-ui/headless";
 import { XIcon } from "../Icons";
 /** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
 export type DrawerRef = {
@@ -76,10 +76,12 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
     // même mécanique.
     const {
       isOpen,
+      present,
       phase: state,
       open: doOpen,
       close: doClose,
       toggle,
+      recentlyOpened,
     } = useDisclosureState({
       ...(open !== undefined ? { open } : {}),
       defaultOpen,
@@ -107,9 +109,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       [isOpen, doOpen, doClose, toggle],
     );
 
-    /* Overlay stack */
+    /* Overlay stack — tenu tant que le tiroir est monté, sortie comprise :
+       rendu trop tôt, il passait sous la page à la fin de son animation. */
     useEffect(() => {
-      if (!isOpen) return;
+      if (!present) return;
 
       zIndexRef.current = overlayStack.acquire("drawer");
 
@@ -117,7 +120,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         overlayStack.release("drawer");
         zIndexRef.current = null;
       };
-    }, [isOpen]);
+    }, [present]);
 
     /* ESC + body lock */
     useEffect(() => {
@@ -145,13 +148,19 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
     useOutsideClick([drawerRef], () => {
       if (!closeOnOutsideClick || !isOpen) return;
 
+      // Le second clic d'un double clic sur la ligne qui ouvre le tiroir, ou
+      // le rebond d'une souris : il tombe sur le fond et refermait aussitôt.
+      if (recentlyOpened()) return;
+
       // 🔒 Seul le drawer au top peut se fermer
       if (!overlayStack.isTop(zIndexRef.current)) return;
 
       doClose();
     });
 
-    if (!isOpen) return null;
+    // Monté tant que la sortie se joue : `isOpen` est déjà faux, le parent
+    // a déjà été prévenu, mais l'animation n'est pas finie.
+    if (!present) return null;
 
     return (
       <Portal>
@@ -206,6 +215,7 @@ export function DrawerFooter({ children }: { children: React.ReactNode }) {
 
 export function DrawerClose() {
   const ctx = useContext(DrawerContext);
+  const locale = useSiaLocale();
   if (!ctx) return null;
 
   return (
@@ -213,7 +223,7 @@ export function DrawerClose() {
       type="button"
       className="sia-drawer-close"
       onClick={ctx.close}
-      aria-label="Fermer"
+      aria-label={locale.close}
     >
       <XIcon aria-hidden="true" />
     </button>

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

@@ -11,7 +11,7 @@ import {
 } from "react";
 import { cn } from "@sia-ui/utils";
 import { useRovingIndex } from "@sia-ui/headless";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 import { CheckIcon } from "../Icons";
 import "./styles.css";
 
@@ -40,7 +40,25 @@ export interface MenuLabel {
   label: ReactNode;
 }
 
-export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
+/**
+ * Un en-tête à contenu libre : le profil d'un menu de compte, un résumé.
+ *
+ * `label` est un titre de section — petit, en capitales, sur une ligne — et
+ * n'a pas vocation à porter un avatar, un nom, une adresse et un rôle.
+ * L'en-tête ne se sélectionne pas et le clavier le saute.
+ */
+export interface MenuHeader {
+  key: string;
+  type: "header";
+  content: ReactNode;
+}
+
+export type MenuEntry = MenuItem | MenuSeparator | MenuLabel | MenuHeader;
+
+/** Ce qu'on règle de l'`Overlay` d'un menu : tout sauf ce que le menu pilote. */
+export type MenuOverlayProps = Partial<
+  Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">
+>;
 
 function isActionable(entry: MenuEntry): entry is MenuItem {
   return !("type" in entry) && !entry.disabled;
@@ -78,6 +96,13 @@ export function MenuList({
         if ("type" in entry && entry.type === "separator") {
           return <div key={entry.key} className="sia-menu__separator" role="separator" />;
         }
+        if ("type" in entry && entry.type === "header") {
+          return (
+            <div key={entry.key} className="sia-menu__header">
+              {entry.content}
+            </div>
+          );
+        }
         if ("type" in entry && entry.type === "label") {
           return (
             <div key={entry.key} className="sia-menu__group-label">
@@ -203,6 +228,8 @@ export interface DropdownMenuProps {
   onOpenChange?: (open: boolean) => void;
   placement?: OverlayPlacement;
   matchTriggerWidth?: boolean;
+  /** Le positionnement du panneau : décalage, marge au bord de l'écran, id. */
+  overlayProps?: MenuOverlayProps;
   className?: string;
 }
 
@@ -222,6 +249,7 @@ export function DropdownMenu({
   onOpenChange,
   placement = "bottom-start",
   matchTriggerWidth = false,
+  overlayProps,
   className,
 }: DropdownMenuProps) {
   const anchorRef = useRef<HTMLElement>(null);
@@ -265,7 +293,8 @@ export function DropdownMenu({
         onOpenChange={setOpen}
         placement={placement}
         matchAnchorWidth={matchTriggerWidth}
-        className={cn("sia-menu-overlay", className)}
+        {...overlayProps}
+        className={cn("sia-menu-overlay", className, overlayProps?.className)}
       >
         <MenuList
           items={items}
@@ -283,6 +312,8 @@ export interface ContextMenuProps {
   items: MenuEntry[];
   children: ReactNode;
   onSelect?: (item: MenuItem) => void;
+  /** Le positionnement du panneau, comme pour `DropdownMenu`. */
+  overlayProps?: MenuOverlayProps;
   className?: string;
 }
 
@@ -297,6 +328,7 @@ export function ContextMenu({
   items,
   children,
   onSelect,
+  overlayProps,
   className,
 }: ContextMenuProps) {
   const anchorRef = useRef<HTMLSpanElement>(null);
@@ -335,7 +367,8 @@ export function ContextMenu({
         }}
         placement="bottom-start"
         offset={2}
-        className={cn("sia-menu-overlay", className)}
+        {...overlayProps}
+        className={cn("sia-menu-overlay", className, overlayProps?.className)}
       >
         <MenuList
           items={items}

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

@@ -90,6 +90,16 @@
 }
 
 .sia-menu__separator { height: 1px; margin: .3rem -.3rem; background: var(--sia-border); }
+/* L'en-tête libre : aucune typographie imposée, seulement de l'air et un
+   filet qui le sépare des entrées — il porte un profil, pas un titre. */
+.sia-menu__header {
+  padding: .55rem .6rem .6rem;
+  margin: -.3rem -.3rem .3rem;
+  border-bottom: 1px solid var(--sia-border);
+  color: var(--sia-foreground);
+  font-size: .875rem;
+}
+
 .sia-menu__group-label {
   padding: .4rem .55rem .25rem;
   color: var(--sia-muted);

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

@@ -1,9 +1,27 @@
 import { cn } from "@sia-ui/utils";
-export interface DurationDisplayProps { milliseconds: number; locale?: string; style?: "short" | "long" | "clock"; className?: string; }
+import { formatMessage, plural, useSiaLocale } from "@sia-ui/headless";
+export interface DurationDisplayProps { milliseconds: number; /** La langue des nombres et des unités. Par défaut, celle de la locale SIA. */ locale?: string; style?: "short" | "long" | "clock"; className?: string; }
 /**
  * Une durée, en mots ou en pendule.
  *
  * Trois styles pour trois usages : `clock` pour un chronomètre qu'on lit en
  * continu, `short` pour une colonne de tableau, `long` pour une phrase.
  */
-export function DurationDisplay({ milliseconds, locale = "fr-FR", style = "short", className }: DurationDisplayProps) { const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000)); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; if (style === "clock") return <span className={cn("sia-duration-display", className)}>{[hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":")}</span>; const formatter = new Intl.NumberFormat(locale); const parts = [[hours, style === "long" ? "heure" : "h"], [minutes, style === "long" ? "minute" : "min"], [seconds, style === "long" ? "seconde" : "s"]] as const; return <span className={cn("sia-duration-display", className)}>{parts.filter(([value]) => value > 0).map(([value, unit]) => `${formatter.format(value)} ${unit}${style === "long" && value > 1 ? "s" : ""}`).join(" ") || `0 ${style === "long" ? "seconde" : "s"}`}</span>; }
+export function DurationDisplay({ milliseconds, locale: localeProp, style = "short", className }: DurationDisplayProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
+  const unites = messages.durationDisplay;
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (style === "clock") return <span className={cn("sia-duration-display", className)}>{[hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":")}</span>;
+  const formatter = new Intl.NumberFormat(locale);
+  // Le nombre formaté remplace `{count}` ; le pluriel se choisit sur la valeur brute.
+  const dire = (value: number, cle: "hours" | "minutes" | "seconds") =>
+    style === "long"
+      ? plural(unites, cle, value, locale, { count: formatter.format(value) })
+      : formatMessage(unites[`${cle}Short`], { count: formatter.format(value) });
+  const parts = [[hours, "hours"], [minutes, "minutes"], [seconds, "seconds"]] as const;
+  return <span className={cn("sia-duration-display", className)}>{parts.filter(([value]) => value > 0).map(([value, cle]) => dire(value, cle)).join(" ") || dire(0, "seconds")}</span>;
+}

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { cn, formatDate, formatTimeAgo, normalizeIdentifier, truncate } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface EntityMetaProps {
@@ -9,6 +10,7 @@ export interface EntityMetaProps {
   updatedBy?: ReactNode;
   identifier?: string;
   status?: ReactNode;
+  /** La langue des dates. Par défaut, celle de la locale SIA. */
   locale?: string;
   className?: string;
 }
@@ -46,26 +48,29 @@ export function EntityMeta({
   updatedBy,
   identifier,
   status,
-  locale = "fr-FR",
+  locale: localeProp,
   className
 }: EntityMetaProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
+  const textes = messages.entityMeta;
   const normalizedIdentifier = identifier ? normalizeIdentifier(identifier) : undefined;
-  const createdLabel = createdAt ? formatTimeAgo(createdAt, { locale, prefix: "Créée" }) : undefined;
-  const updatedLabel = updatedAt ? formatTimeAgo(updatedAt, { locale, prefix: "Mise à jour" }) : undefined;
+  const createdLabel = createdAt ? formatTimeAgo(createdAt, { locale, prefix: textes.createdPrefix }) : undefined;
+  const updatedLabel = updatedAt ? formatTimeAgo(updatedAt, { locale, prefix: textes.updatedPrefix }) : undefined;
   const updatedDate = updatedAt ? formatDate(updatedAt, { locale, dateStyle: "medium", timeStyle: "short" }) : undefined;
 
   return (
-    <section className={cn("sia-entity-meta", className)} aria-label="Métadonnées">
+    <section className={cn("sia-entity-meta", className)} aria-label={textes.label}>
       <div className="sia-entity-meta__header">
         {status && <span className="sia-entity-meta__status">{status}</span>}
         {normalizedIdentifier && <code className="sia-entity-meta__identifier">{truncate(normalizedIdentifier, 36)}</code>}
       </div>
       <div className="sia-entity-meta__grid">
-        <Detail label="Création" value={createdLabel} emphasized />
-        <Detail label="Créé par" value={createdBy} />
-        <Detail label="Modification" value={updatedLabel} emphasized />
-        <Detail label="Modifié par" value={updatedBy} />
-        <Detail label="Dernière date" value={updatedDate} />
+        <Detail label={textes.created} value={createdLabel} emphasized />
+        <Detail label={textes.createdBy} value={createdBy} />
+        <Detail label={textes.updated} value={updatedLabel} emphasized />
+        <Detail label={textes.updatedBy} value={updatedBy} />
+        <Detail label={textes.lastDate} value={updatedDate} />
       </div>
     </section>
   );

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { Button } from "../Button";
+import { Button, type ButtonProps } from "../Button";
 import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
@@ -13,6 +13,12 @@ export interface ErrorStateProps {
   retryLabel?: string;
   compact?: boolean;
   className?: string;
+  /**
+   * Les props du bouton « Réessayer » — variante, taille, icône. Sans
+   * `onClick`, branché sur `onRetry`, ni `children` : le libellé passe par
+   * `retryLabel`.
+   */
+  retryButtonProps?: Partial<Omit<ButtonProps, "onClick" | "children">>;
 }
 
 function getErrorMessage(error: unknown): string | undefined {
@@ -29,10 +35,10 @@ function getErrorMessage(error: unknown): string | undefined {
  * exiger un type ferait écrire un `try` autour de chaque affichage
  * d'erreur.
  */
-export function ErrorState({ title: titleProp, description, error, action, onRetry, retryLabel: retryLabelProp, compact, className }: ErrorStateProps) {
+export function ErrorState({ title: titleProp, description, error, action, onRetry, retryLabel: retryLabelProp, compact, className, retryButtonProps }: ErrorStateProps) {
     const locale = useSiaLocale();
     const retryLabel = retryLabelProp ?? locale.retry;
     const title = titleProp ?? locale.error;
   const message = description ?? getErrorMessage(error);
-  return <section className={cn("sia-error-state", compact && "sia-error-state--compact", className)} role="alert"><div className="sia-error-state__icon" aria-hidden="true">!</div><strong className="sia-error-state__title">{title}</strong>{message && <p className="sia-error-state__description">{message}</p>}<div className="sia-error-state__actions">{action}{onRetry && <Button variant="outline" onClick={onRetry}>{retryLabel}</Button>}</div></section>;
+  return <section className={cn("sia-error-state", compact && "sia-error-state--compact", className)} role="alert"><div className="sia-error-state__icon" aria-hidden="true">!</div><strong className="sia-error-state__title">{title}</strong>{message && <p className="sia-error-state__description">{message}</p>}<div className="sia-error-state__actions">{action}{onRetry && <Button variant="outline" {...retryButtonProps} onClick={onRetry}>{retryLabel}</Button>}</div></section>;
 }