@sia-ui/cli 0.1.0

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

@@ -0,0 +1,98 @@
+/* Waves 3 and 4: data, advanced date/time and application patterns */
+.sia-data-table { width:100%; overflow:auto; border:1px solid var(--sia-border); border-radius:var(--sia-radius); }
+.sia-data-table table { width:100%; border-collapse:collapse; }
+.sia-data-table caption { padding:.75rem; text-align:left; font-weight:700; }
+.sia-data-table th,.sia-data-table td { padding:.75rem 1rem; border-bottom:1px solid var(--sia-border); }
+.sia-data-table th { color:var(--sia-muted); background:var(--sia-surface); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
+.sia-data-table tbody tr:last-child td { border-bottom:0; }
+.sia-data-table__state { color:var(--sia-muted); text-align:center; }
+
+/* Les lignes répondent au survol et à la sélection : sans ça, un tableau de
+   trente lignes ne dit pas où se trouve le curseur. */
+.sia-data-table tbody tr {
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+.sia-data-table tbody tr:hover {
+  background: color-mix(in srgb, var(--sia-primary) 4%, transparent);
+}
+
+.sia-data-table tbody tr[aria-selected="true"] {
+  background: color-mix(in srgb, var(--sia-primary) 9%, transparent);
+}
+
+
+/* ── Tri, servi par le serveur ─────────────────────────────────────────── */
+
+.sia-data-table { position: relative; }
+
+.sia-data-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: .35rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-data-table__sort:hover { color: var(--sia-foreground); }
+.sia-data-table__sort[data-active] { color: var(--sia-primary); }
+
+/* La flèche n'apparaît qu'au survol ou quand le tri est actif : trois
+   chevrons gris en permanence dans un entête n'aident personne. */
+.sia-data-table__arrow {
+  display: grid;
+  place-items: center;
+  font-size: .75rem;
+  opacity: 0;
+  transform: translateY(2px);
+  transition:
+    opacity var(--sia-duration-fast) var(--sia-easing-standard),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-data-table__sort:hover .sia-data-table__arrow { opacity: .45; transform: none; }
+.sia-data-table__sort[data-active] .sia-data-table__arrow { opacity: 1; transform: none; }
+
+.sia-data-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  /* Sans fond opaque, les lignes défilent visiblement sous l'entête. */
+  background: var(--sia-surface);
+  box-shadow: inset 0 -1px var(--sia-border);
+}
+
+.sia-data-table--clickable tbody tr { cursor: pointer; }
+
+/* ── Chargement ────────────────────────────────────────────────────────── */
+
+.sia-data-table__ghost-bar {
+  display: block;
+  height: .75rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    var(--sia-surface) 25%,
+    var(--sia-border) 37%,
+    var(--sia-surface) 63%
+  );
+  background-size: 400% 100%;
+  animation: sia-skeleton 1.4s ease infinite;
+}
+/* Chaque ligne fantôme est un peu plus courte : une colonne de barres
+   strictement identiques se lit comme un défaut d'affichage. */
+.sia-data-table__ghost:nth-child(2n) .sia-data-table__ghost-bar { width: 78%; }
+.sia-data-table__ghost:nth-child(3n) .sia-data-table__ghost-bar { width: 62%; }
+
+.sia-data-table__veil {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--sia-background) 55%, transparent);
+  animation: sia-fade-in var(--sia-duration-fast) var(--sia-easing-standard);
+  pointer-events: none;
+}

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

@@ -0,0 +1,102 @@
+import { forwardRef, useId, useRef, useState, type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+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";
+
+export interface DatePickerProps
+  extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
+  id?: string;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  min?: string;
+  max?: string;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  placeholder?: string;
+  formatValue?: (value: string, locale: string) => ReactNode;
+  allowClear?: boolean;
+  showToday?: boolean;
+  renderExtraFooter?: () => ReactNode;
+  placement?: OverlayPlacement;
+  tone?: ComponentTone;
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-required"?: boolean;
+}
+
+function defaultFormat(value: string, locale: string) {
+  if (!value) return null;
+  const date = new Date(`${value}T12:00:00`);
+  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(locale, { day: "2-digit", month: "short", year: "numeric" }).format(date);
+}
+
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker({
+  id,
+  name,
+  value,
+  defaultValue = "",
+  min,
+  max,
+  onValueChange,
+  onOpenChange,
+  open: openProp,
+  placeholder = "Sélectionner une date",
+  formatValue = defaultFormat,
+  allowClear = true,
+  showToday = true,
+  renderExtraFooter,
+  placement = "bottom-start",
+  tone = "primary",
+  invalid = false,
+  disabled = false,
+  required = false,
+  locale = "fr-FR",
+  firstDayOfWeek = 1,
+  disabledDate,
+  cellRender,
+  showWeek,
+  className,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...ariaProps
+}, forwardedRef) {
+  const generatedId = useId();
+  const controlId = id ?? `sia-date-picker-${generatedId.replace(/:/g, "")}`;
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const current = value ?? internalValue;
+  const open = openProp ?? internalOpen;
+  const setOpen = (next: boolean) => { if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); };
+  const update = (next: string) => { if (value === undefined) setInternalValue(next); onValueChange?.(next); };
+  const setRef = (node: HTMLButtonElement | null) => { anchorRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; };
+  const today = new Date();
+  const todayValue = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+  return (
+    <div className={cn("sia-picker", "sia-date-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}>
+        <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>}
+          <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>
+    </div>
+  );
+});
+DatePicker.displayName = "DatePicker";

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { DateRangePicker, type DateRangeValue } from "../DateRangePicker";
+import { cn } from "@sia-ui/utils";
+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 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>; }

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

@@ -0,0 +1,4 @@
+.sia-date-range-filter { display:flex; align-items:end; gap:.75rem; flex-wrap:wrap; }
+.sia-date-range-filter__presets { display:flex; gap:.4rem; flex-wrap:wrap; }
+.sia-date-range-filter button { min-height:2.25rem; padding:0 .7rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); }
+.sia-date-range-filter__clear { color:var(--sia-danger); }

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

@@ -0,0 +1,36 @@
+import { useRef, useState } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+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";
+
+export type DateRangeValue = CalendarRangeValue;
+export interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
+  value?: DateRangeValue;
+  defaultValue?: DateRangeValue;
+  onValueChange?: (value: DateRangeValue) => void;
+  min?: string;
+  max?: string;
+  startLabel?: string;
+  endLabel?: string;
+  allowClear?: boolean;
+  placement?: OverlayPlacement;
+  tone?: ComponentTone;
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+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) {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [internal, setInternal] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const current = value ?? internal;
+  const update = (next: DateRangeValue) => { if (value === undefined) setInternal(next); onValueChange?.(next); };
+  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>
+  </div>;
+}

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

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { DatePicker, type DatePickerProps } from "../DatePicker";
+import { TimePicker, type TimePickerProps } from "../TimePicker";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+
+export interface DateTimeValue { date: string; time: string; }
+export interface DateTimePickerProps {
+  value?: DateTimeValue;
+  defaultValue?: DateTimeValue;
+  onValueChange?: (value: DateTimeValue) => void;
+  minuteStep?: number;
+  secondStep?: number;
+  showSeconds?: boolean;
+  hourFormat?: 12 | 24;
+  needConfirm?: boolean;
+  minDate?: string;
+  maxDate?: string;
+  tone?: ComponentTone;
+  invalid?: boolean;
+  disabled?: boolean;
+  dateProps?: Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange" | "tone" | "invalid" | "disabled">;
+  timeProps?: Omit<TimePickerProps, "value" | "defaultValue" | "onValueChange" | "tone" | "invalid" | "disabled">;
+  className?: string;
+}
+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 [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>;
+}

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface DescriptionItem { key: string; label: ReactNode; value: ReactNode; span?: 1 | 2 | 3; }
+export interface DescriptionsProps { items: DescriptionItem[]; title?: ReactNode; columns?: 1 | 2 | 3; bordered?: boolean; className?: string; }
+export function Descriptions({ items, title, columns = 2, bordered = false, className }: DescriptionsProps) { return <section className={cn("sia-descriptions", bordered && "sia-descriptions--bordered", className)}>{title && <h3>{title}</h3>}<dl className={`sia-descriptions__grid sia-descriptions__grid--${columns}`}>{items.map((item) => <div key={item.key} style={{ gridColumn: `span ${item.span ?? 1}` }}><dt>{item.label}</dt><dd>{item.value}</dd></div>)}</dl></section>; }

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

@@ -0,0 +1,8 @@
+.sia-descriptions { display:grid; gap:1rem; }
+.sia-descriptions h3 { margin:0; }
+.sia-descriptions__grid { display:grid; gap:1rem; margin:0; }
+.sia-descriptions__grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
+.sia-descriptions__grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
+.sia-descriptions dt { color:var(--sia-muted); font-size:.78rem; font-weight:700; }
+.sia-descriptions dd { margin:.25rem 0 0; }
+.sia-descriptions--bordered .sia-descriptions__grid > div { padding:1rem; border:1px solid var(--sia-border); }

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

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+export function Divider({ orientation = "horizontal", decorative = true, className, ...props }: DividerProps) {
+  return <div className={cn("sia-divider", `sia-divider--${orientation}`, className)} role={decorative ? "presentation" : "separator"} aria-orientation={decorative ? undefined : orientation} {...props} />;
+}

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

@@ -0,0 +1,3 @@
+.sia-divider { flex:none; background:var(--sia-border); }
+.sia-divider--horizontal { width:100%; height:1px; }
+.sia-divider--vertical { align-self:stretch; width:1px; min-height:1.5rem; }

package/dist/registry/package/components/Drawer/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+/**
+ * Ce que les sous-composants du tiroir ont besoin de savoir.
+ *
+ * Déclaré ici plutôt que dans un dossier `contexts/` partagé : le registre ne
+ * copie que `components/<Nom>/`, et un import hors de ce dossier rendait
+ * l'entrée `drawer` impossible à installer.
+ */
+export type DrawerContextValue = {
+  close: () => void;
+};
+
+export const DrawerContext = createContext<DrawerContextValue | null>(null);

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

@@ -0,0 +1,209 @@
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+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";
+/** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
+export type DrawerRef = {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  isOpen: () => boolean;
+};
+
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg" | "xl";
+
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: DrawerPosition;
+  size?: DrawerSize;
+  closeOnOutsideClick?: boolean;
+  closeOnEsc?: boolean;
+}
+
+/** Alias historique, attendu par les composants venus du registre. */
+export type IDrawerProps = DrawerProps;
+
+export type DrawerComponent = ForwardRefExoticComponent<
+  IDrawerProps & RefAttributes<DrawerRef>
+> & {
+  Header: typeof DrawerHeader;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+  Title: typeof DrawerTitle;
+  Close: typeof DrawerClose;
+};
+
+export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
+  (
+    {
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      position = "right",
+      size = "md",
+      closeOnOutsideClick = true,
+      closeOnEsc = true,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    // Ouverture, fermeture et phase de sortie vivent dans @sia-ui/headless :
+    // rien là-dedans n'est propre au DOM, et le pendant mobile réutilisera la
+    // même mécanique.
+    const {
+      isOpen,
+      phase: state,
+      open: doOpen,
+      close: doClose,
+    } = useDisclosureState({
+      ...(open !== undefined ? { open } : {}),
+      defaultOpen,
+      ...(onOpenChange ? { onOpenChange } : {}),
+      exitMs: 200,
+    });
+
+    const drawerRef = useRef<HTMLDivElement | null>(null);
+    const zIndexRef = useRef<number | null>(null);
+
+    /* 🔌 API IMPÉRATIVE */
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: doOpen,
+        close: doClose,
+        toggle: () => (isOpen ? doClose() : doOpen()),
+        isOpen: () => isOpen,
+      }),
+      [isOpen, open]
+    );
+
+    /* Overlay stack */
+    useEffect(() => {
+      if (!isOpen) return;
+
+      zIndexRef.current = overlayStack.acquire("drawer");
+
+      return () => {
+        overlayStack.release("drawer");
+        zIndexRef.current = null;
+      };
+    }, [isOpen]);
+
+    /* ESC + body lock */
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (!closeOnEsc || e.key !== "Escape") return;
+        if (overlayStack.isTop(zIndexRef.current)) {
+          doClose();
+        }
+      };
+
+      window.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        document.body.style.overflow = prevOverflow;
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }, [isOpen, closeOnEsc]);
+
+    /* Outside click */
+    useOutsideClick([drawerRef], () => {
+      if (!closeOnOutsideClick || !isOpen) return;
+
+      // 🔒 Seul le drawer au top peut se fermer
+      if (!overlayStack.isTop(zIndexRef.current)) return;
+
+      doClose();
+    });
+
+    if (!isOpen) return null;
+
+    return (
+      <Portal>
+        <DrawerContext.Provider value={{ close: doClose }}>
+          <div
+            className="sia-drawer-root"
+            style={{ zIndex: zIndexRef.current ?? undefined }}
+          >
+            <div className="sia-drawer-overlay" />
+
+            <div
+              ref={drawerRef}
+              role="dialog"
+              aria-modal="true"
+              data-state={state}
+              className={cn(
+                "sia-drawer",
+                `sia-drawer-${position}`,
+                `sia-drawer-${size}`,
+                state === "closing" && "is-closing"
+              )}
+              {...rest}
+            >
+              {children}
+            </div>
+          </div>
+        </DrawerContext.Provider>
+      </Portal>
+    );
+  }
+) as DrawerComponent;
+
+Drawer.displayName = "SiaDrawer";
+
+export function DrawerHeader({ children }: { children: React.ReactNode }) {
+  return <div className="sia-drawer-header">{children}</div>;
+}
+
+export function DrawerTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="sia-drawer-title">{children}</h2>;
+}
+
+export function DrawerBody({ children }: { children: React.ReactNode }) {
+  return <div className="sia-drawer-body">{children}</div>;
+}
+
+export function DrawerFooter({ children }: { children: React.ReactNode }) {
+  return <div className="sia-drawer-footer">{children}</div>;
+}
+
+export function DrawerClose() {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) return null;
+
+  return (
+    <button
+      type="button"
+      className="sia-drawer-close"
+      onClick={ctx.close}
+      aria-label="Fermer"
+    >
+      ✕
+    </button>
+  );
+}
+
+Drawer.Header = DrawerHeader;
+Drawer.Title = DrawerTitle;
+Drawer.Body = DrawerBody;
+Drawer.Footer = DrawerFooter;
+Drawer.Close = DrawerClose;