@sia-ui/cli 0.7.0 → 0.8.0

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

@@ -8,6 +8,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -22,13 +23,6 @@ export type AvatarVariant = "soft" | "solid" | "outline";
  */
 export type AvatarStatus = "online" | "offline" | "busy" | "away";
 
-const LIBELLES_STATUT: Record<AvatarStatus, string> = {
-  online: "en ligne",
-  offline: "hors ligne",
-  busy: "occupé",
-  away: "absent",
-};
-
 /**
  * Les teintes dérivées du nom.
  *
@@ -121,7 +115,7 @@ export interface AvatarProps
   initials?: 1 | 2;
 
   status?: AvatarStatus;
-  /** Le libellé du statut, pour les lecteurs d'écran. */
+  /** Le libellé du statut, pour les lecteurs d'écran. Par défaut, celui de la locale. */
   statusLabel?: string;
 
   /** Un liseré qui détache l'avatar de son fond. */
@@ -159,6 +153,7 @@ export function Avatar({
   style,
   ...props
 }: AvatarProps) {
+  const libellesStatut = useSiaLocale().avatar;
   const groupe = useContext(AvatarGroupContext);
   const [etatImage, setEtatImage] = useState<"attente" | "prete" | "echouee">(
     src ? "attente" : "echouee",
@@ -227,7 +222,7 @@ export function Avatar({
           annoncent la personne une seule fois, statut compris. */}
       <span className="sia-visually-hidden">
         {name}
-        {status ? ` — ${statusLabel ?? LIBELLES_STATUT[status]}` : ""}
+        {status ? ` — ${statusLabel ?? libellesStatut[status]}` : ""}
       </span>
     </>
   );

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

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import { Spinner, type SpinnerProps } from "../Spinner";
 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 BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -37,7 +37,8 @@ export function Badge({
   const defaults = useComponentDefaults<BadgeProps>("badge");
   const tone = toneProp ?? defaults.tone ?? "neutral";
   const variant = variantProp ?? defaults.variant ?? "soft";
-  const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+  const locale = useSiaLocale();
+  const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? locale.loading;
   return (
     <span
       className={cn(

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

@@ -6,9 +6,9 @@
 .sia-badge--soft.sia-badge--danger { color:var(--sia-danger); background:color-mix(in srgb,var(--sia-danger) 12%,transparent); }
 .sia-badge--solid.sia-badge--neutral { color:var(--sia-background); background:var(--sia-foreground); }
 .sia-badge--solid.sia-badge--primary { color:var(--sia-primary-foreground); background:var(--sia-primary); }
-.sia-badge--solid.sia-badge--success { color:#fff; background:var(--sia-success); }
-.sia-badge--solid.sia-badge--warning { color:#fff; background:var(--sia-warning); }
-.sia-badge--solid.sia-badge--danger { color:#fff; background:var(--sia-danger); }
+.sia-badge--solid.sia-badge--success { color:var(--sia-success-foreground); background:var(--sia-success); }
+.sia-badge--solid.sia-badge--warning { color:var(--sia-warning-foreground); background:var(--sia-warning); }
+.sia-badge--solid.sia-badge--danger { color:var(--sia-danger-foreground); background:var(--sia-danger); }
 .sia-badge--outline { border-color:currentColor; background:transparent; }
 .sia-badge--outline.sia-badge--primary { color:var(--sia-primary); }
 .sia-badge--outline.sia-badge--success { color:var(--sia-success); }
@@ -21,6 +21,6 @@
 .sia-badge--loading { cursor:progress; }
 /* ComponentTone completeness for components created before the shared contract. */
 .sia-badge--soft.sia-badge--info { color:var(--sia-info); background:color-mix(in srgb,var(--sia-info) 12%,transparent); }
-.sia-badge--solid.sia-badge--info { color:#fff; background:var(--sia-info); }
+.sia-badge--solid.sia-badge--info { color:var(--sia-info-foreground); background:var(--sia-info); }
 .sia-badge--outline.sia-badge--neutral { color:var(--sia-muted); }
 .sia-badge--outline.sia-badge--info { color:var(--sia-info); }

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

@@ -0,0 +1,100 @@
+import { type CSSProperties, type SVGAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import { luminance } from "@sia-ui/tokens";
+import "./styles.css";
+
+/**
+ * Une icône de marque, dans la forme d'un objet `simple-icons` : `path` est
+ * le tracé d'un SVG 24×24, `hex` la couleur de la marque, sans dièse.
+ */
+export interface BrandIconData {
+  title: string;
+  path: string;
+  hex: string;
+}
+
+export interface BrandIconProps
+  extends Omit<SVGAttributes<SVGSVGElement>, "children" | "title"> {
+  icon: BrandIconData;
+  /** La taille du carré. `1em` par défaut : l'icône suit le texte. */
+  size?: number | string;
+  /** La couleur de la marque (défaut), ou `currentColor` quand il vaut `false`. */
+  colored?: boolean;
+  /** Le nom accessible. Par défaut, `icon.title`. */
+  title?: string;
+  /** Masquée des lecteurs d'écran : l'icône accompagne un texte qui la nomme déjà. */
+  decorative?: boolean;
+}
+
+/** En dessous, la marque est quasi noire ; au-dessus, quasi blanche. */
+const SOMBRE = 0.08;
+const CLAIRE = 0.85;
+
+/**
+ * Le logo d'un service tiers — Vercel, Supabase, GitHub — sans dépendance.
+ *
+ * Le système ne livre aucun logo : il prend l'objet d'icône que le projet
+ * importe lui-même, et ne dépend donc ni d'un paquet d'icônes ni de sa
+ * version.
+ *
+ * ```tsx
+ * import { siVercel } from "simple-icons";
+ * <BrandIcon icon={siVercel} />
+ * ```
+ *
+ * Une marque quasi noire (Vercel, GitHub) disparaîtrait sur un fond sombre,
+ * une marque quasi blanche sur un fond clair : sur le thème où elle serait
+ * illisible, elle prend la couleur du texte plutôt que la sienne.
+ */
+export function BrandIcon({
+  icon,
+  size = "1em",
+  colored = true,
+  title,
+  decorative = false,
+  className,
+  style,
+  ...props
+}: BrandIconProps) {
+  const name = title ?? icon.title;
+  const lum = colored ? luminance(icon.hex) : undefined;
+  const contrast =
+    lum === undefined || Number.isNaN(lum)
+      ? undefined
+      : lum < SOMBRE
+        ? "dark"
+        : lum > CLAIRE
+          ? "light"
+          : undefined;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      focusable="false"
+      {...(decorative
+        ? { "aria-hidden": true }
+        : { role: "img", "aria-label": name })}
+      {...props}
+      className={cn(
+        "sia-brand-icon",
+        colored && "sia-brand-icon--colored",
+        contrast && `sia-brand-icon--${contrast}`,
+        className,
+      )}
+      style={
+        colored
+          ? ({
+              "--sia-brand-icon-color": `#${icon.hex.replace(/^#/, "")}`,
+              ...style,
+            } as CSSProperties)
+          : style
+      }
+    >
+      {!decorative && <title>{name}</title>}
+      <path d={icon.path} />
+    </svg>
+  );
+}

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

@@ -0,0 +1,31 @@
+/* Un glyphe dans le texte : aligné sur la ligne de base comme une lettre,
+   jamais étiré ni rétréci par un parent flex. */
+.sia-brand-icon {
+  display: inline-block;
+  flex: none;
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+/* La couleur de la marque arrive par une variable posée sur l'élément : la
+   feuille garde la main pour la retirer là où elle serait illisible. */
+.sia-brand-icon--colored { fill: var(--sia-brand-icon-color, currentColor); }
+
+/* Quasi blanche : illisible sur le thème clair, qui est celui par défaut. */
+.sia-brand-icon--colored.sia-brand-icon--light { fill: currentColor; }
+
+/* Thème sombre, choisi par l'utilisateur ou suivi du système : la marque
+   claire retrouve sa couleur, la marque quasi noire prend celle du texte. */
+[data-sia-color-mode="dark"] .sia-brand-icon--colored.sia-brand-icon--light {
+  fill: var(--sia-brand-icon-color, currentColor);
+}
+[data-sia-color-mode="dark"] .sia-brand-icon--colored.sia-brand-icon--dark { fill: currentColor; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-sia-color-mode="light"]) .sia-brand-icon--colored.sia-brand-icon--light {
+    fill: var(--sia-brand-icon-color, currentColor);
+  }
+  :root:not([data-sia-color-mode="light"]) .sia-brand-icon--colored.sia-brand-icon--dark {
+    fill: currentColor;
+  }
+}

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

@@ -2,7 +2,11 @@ import { Fragment, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import { useSiaLocale } from "@sia-ui/headless";
 import { ChevronRightIcon, MoreHorizontalIcon } from "../Icons";
-import { DropdownMenu, type MenuEntry } from "../DropdownMenu";
+import {
+  DropdownMenu,
+  type DropdownMenuProps,
+  type MenuEntry,
+} from "../DropdownMenu";
 import "./styles.css";
 
 export interface BreadcrumbItem {
@@ -24,6 +28,13 @@ export interface BreadcrumbProps {
   separator?: ReactNode;
   ariaLabel?: string;
   className?: string;
+  /**
+   * Le menu des niveaux repliés : placement, décalage, classe. Ses entrées
+   * et son déclencheur viennent de `items`.
+   */
+  dropdownMenuProps?: Partial<
+    Omit<DropdownMenuProps, "items" | "children" | "onSelect">
+  >;
 }
 
 /**
@@ -38,6 +49,7 @@ export function Breadcrumb({
   separator,
   ariaLabel,
   className,
+  dropdownMenuProps,
 }: BreadcrumbProps) {
   const locale = useSiaLocale();
   const mark = separator ?? <ChevronRightIcon />;
@@ -71,7 +83,7 @@ export function Breadcrumb({
             <Fragment key={item ? (item.key ?? index) : "overflow"}>
               <li className="sia-breadcrumb__item">
                 {item === null ? (
-                  <DropdownMenu items={hidden}>
+                  <DropdownMenu {...dropdownMenuProps} items={hidden}>
                     <button
                       type="button"
                       className="sia-breadcrumb__more"

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

@@ -2,7 +2,7 @@ import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import { Spinner, type SpinnerProps } from "../Spinner";
 import { Tooltip, type TooltipProps } from "../Tooltip";
-import { useComponentDefaults } from "@sia-ui/headless";
+import { useComponentDefaults, useSiaLocale } from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
 import "./styles.css";
 
@@ -58,8 +58,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const tone = toneProp ?? defaults.tone ?? "primary";
     const size = sizeProp ?? defaults.size ?? "md";
     const radius = radiusProp ?? defaults.radius ?? "default";
+    const locale = useSiaLocale();
     const loadingLabel =
-      loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+      loadingLabelProp ?? defaults.loadingLabel ?? locale.loading;
     const button = (
       <button
         ref={ref}

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

@@ -35,10 +35,10 @@
 
 .sia-button--primary { --sia-button-accent: var(--sia-primary); }
 .sia-button--neutral { --sia-button-accent: var(--sia-foreground); --sia-button-on-accent: var(--sia-background); }
-.sia-button--info { --sia-button-accent: var(--sia-info); }
-.sia-button--success { --sia-button-accent: var(--sia-success); }
-.sia-button--warning { --sia-button-accent: var(--sia-warning); }
-.sia-button--danger { --sia-button-accent: var(--sia-danger); }
+.sia-button--info { --sia-button-accent: var(--sia-info); --sia-button-on-accent: var(--sia-info-foreground); }
+.sia-button--success { --sia-button-accent: var(--sia-success); --sia-button-on-accent: var(--sia-success-foreground); }
+.sia-button--warning { --sia-button-accent: var(--sia-warning); --sia-button-on-accent: var(--sia-warning-foreground); }
+.sia-button--danger { --sia-button-accent: var(--sia-danger); --sia-button-on-accent: var(--sia-danger-foreground); }
 
 /* Variantes ----------------------------------------------------------- */
 

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

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, 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 { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
 
@@ -36,6 +37,7 @@ export interface CalendarProps {
   cellRender?: (day: CalendarDay, originNode: ReactNode) => ReactNode;
   headerRender?: (props: { month: string; mode: CalendarMode; onMonthChange: (month: string) => void; onModeChange: (mode: CalendarMode) => void }) => ReactNode;
   renderExtraFooter?: () => ReactNode;
+  /** La langue des jours et des mois. Par défaut, celle de la locale SIA. */
   locale?: string;
   firstDayOfWeek?: 0 | 1;
   showWeek?: boolean;
@@ -91,13 +93,15 @@ export function Calendar({
   cellRender,
   headerRender,
   renderExtraFooter,
-  locale = "fr-FR",
+  locale: localeProp,
   firstDayOfWeek = 1,
   showWeek = false,
   fullscreen = false,
   tone = "primary",
   className,
 }: CalendarProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
   const [selected, setSelected] = useState(defaultValue ?? "");
   const [selectedRange, setSelectedRange] = useState(defaultRange);
   const [view, setView] = useState(() => parseMonth(month ?? defaultMonth ?? value ?? defaultValue));
@@ -169,12 +173,12 @@ export function Calendar({
     <section className={cn("sia-calendar", `sia-calendar--${currentMode}`, fullscreen && "sia-calendar--fullscreen", toneClass("sia-tone", tone), className)}>
       {headerRender?.({ month: monthIso(controlledMonth), mode: currentMode, onMonthChange: updateFromString, onModeChange: changeMode }) ?? (
         <header className="sia-calendar__header">
-          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? "Mois précédent" : "Année précédente"} onClick={() => currentMode === "month" ? changeMonth(-1) : setMonth(new Date(year - 1, monthIndex, 1, 12))}><ChevronLeftIcon /></button>
+          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? messages.calendar.previousMonth : messages.calendar.previousYear} onClick={() => currentMode === "month" ? changeMonth(-1) : setMonth(new Date(year - 1, monthIndex, 1, 12))}><ChevronLeftIcon /></button>
           <div className="sia-calendar__heading">
             <button type="button" onClick={() => changeMode(currentMode === "month" ? "year" : "month")}>{currentMode === "month" ? monthName : year}</button>
             {currentMode === "month" && <button type="button" onClick={() => changeMode("year")}>{year}</button>}
           </div>
-          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? "Mois suivant" : "Année suivante"} onClick={() => currentMode === "month" ? changeMonth(1) : setMonth(new Date(year + 1, monthIndex, 1, 12))}><ChevronRightIcon /></button>
+          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? messages.calendar.nextMonth : messages.calendar.nextYear} onClick={() => currentMode === "month" ? changeMonth(1) : setMonth(new Date(year + 1, monthIndex, 1, 12))}><ChevronRightIcon /></button>
         </header>
       )}
       {currentMode === "year" ? (

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

@@ -2,6 +2,16 @@ import { type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import "./styles.css";
 
+/*
+  Les quatre parties ne sont que des `div` : ces alias ne changent rien au
+  typage, ils donnent un nom aux props qu'un composant composé laisse passer
+  (`cardBodyProps?: Partial<CardBodyProps>`).
+*/
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+export type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+export type CardBodyProps = HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+
 /**
  * Une surface qui regroupe ce qui va ensemble.
  *
@@ -10,7 +20,7 @@ import "./styles.css";
  * deux boutons et une pastille, une prop ne suffit plus, et l'on se retrouve
  * à passer du JSX à travers une chaîne.
  */
-export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card", className)} {...props} />; }
-export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__header", className)} {...props} />; }
-export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__body", className)} {...props} />; }
-export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__footer", className)} {...props} />; }
+export function Card({ className, ...props }: CardProps) { return <div className={cn("sia-card", className)} {...props} />; }
+export function CardHeader({ className, ...props }: CardHeaderProps) { return <div className={cn("sia-card__header", className)} {...props} />; }
+export function CardBody({ className, ...props }: CardBodyProps) { return <div className={cn("sia-card__body", className)} {...props} />; }
+export function CardFooter({ className, ...props }: CardFooterProps) { return <div className={cn("sia-card__footer", className)} {...props} />; }

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

@@ -0,0 +1,44 @@
+import { useSiaLocale } from "@sia-ui/headless";
+import { useColorMode } from "@sia-ui/react";
+import { IconButton, type IconButtonProps } from "../IconButton";
+import { MoonIcon, SunIcon } from "../Icons";
+
+export interface ColorModeToggleProps
+  extends Partial<Omit<IconButtonProps, "icon" | "onClick" | "aria-pressed">> {
+  /** Le nom du bouton en mode clair. Par défaut, celui de la locale. */
+  darkLabel?: string;
+  /** Le nom du bouton en mode sombre. Par défaut, celui de la locale. */
+  lightLabel?: string;
+}
+
+/**
+ * Le bouton de bascule clair / sombre.
+ *
+ * Il lit et écrit le mode de `SiaProvider` — persistance et script
+ * anti-clignotement compris — plutôt que de tenir le sien. L'icône montre le
+ * mode vers lequel on part, comme le libellé : le soleil en mode sombre.
+ * Toutes les props d'`IconButton` passent, sauf ce qu'il pilote.
+ */
+export function ColorModeToggle({
+  darkLabel: darkLabelProp,
+  lightLabel: lightLabelProp,
+  variant = "ghost",
+  ...props
+}: ColorModeToggleProps) {
+  const m = useSiaLocale().colorModeToggle;
+  const darkLabel = darkLabelProp ?? m.toDark;
+  const lightLabel = lightLabelProp ?? m.toLight;
+  const { resolvedColorMode, toggleColorMode } = useColorMode();
+  const sombre = resolvedColorMode === "dark";
+
+  return (
+    <IconButton
+      variant={variant}
+      {...props}
+      label={props.label ?? (sombre ? lightLabel : darkLabel)}
+      icon={sombre ? <SunIcon /> : <MoonIcon />}
+      aria-pressed={sombre}
+      onClick={toggleColorMode}
+    />
+  );
+}

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

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface CommandItem { id: string; label: string; description?: string; keywords?: string[]; icon?: ReactNode; disabled?: boolean; onSelect: () => void; }
-export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boolean) => void; items: CommandItem[]; placeholder?: string; emptyLabel?: string; className?: string; }
+export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boolean) => void; items: CommandItem[]; /** Par défaut, celui de la locale. */ placeholder?: string; /** Par défaut, celui de la locale. */ emptyLabel?: string; className?: string; }
 /**
  * Tout ce que l'application sait faire, au clavier.
  *
@@ -11,4 +12,4 @@ export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boole
  * « facture » doit trouver « Nouvelle vente » sans avoir appris comment
  * l'action s'appelle ici.
  */
-export function CommandPalette({ open, onOpenChange, items, placeholder = "Rechercher une commande...", emptyLabel = "Aucune commande", className }: CommandPaletteProps) { const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef<HTMLInputElement>(null); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); return items.filter((item) => !needle || [item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(needle)); }, [items, query]); useEffect(() => { if (!open) return; setQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); }, [open]); if (!open) return null; const select = (item: CommandItem | undefined) => { if (!item || item.disabled) return; item.onSelect(); onOpenChange(false); }; return <div className="sia-command-palette__backdrop" onMouseDown={(event) => event.target === event.currentTarget && onOpenChange(false)}><section className={cn("sia-command-palette", className)} role="dialog" aria-modal="true" aria-label="Palette de commandes"><input ref={inputRef} value={query} placeholder={placeholder} aria-label={placeholder} onChange={(event) => { setQuery(event.target.value); setActive(0); }} onKeyDown={(event) => { if (event.key === "Escape") onOpenChange(false); if (event.key === "ArrowDown") { event.preventDefault(); setActive((value) => Math.min(value + 1, filtered.length - 1)); } if (event.key === "ArrowUp") { event.preventDefault(); setActive((value) => Math.max(value - 1, 0)); } if (event.key === "Enter") select(filtered[active]); }} /><div role="listbox">{filtered.length === 0 ? <p>{emptyLabel}</p> : filtered.map((item, index) => <button type="button" role="option" aria-selected={index === active} key={item.id} disabled={item.disabled} onMouseEnter={() => setActive(index)} onClick={() => select(item)}>{item.icon}<span><strong>{item.label}</strong>{item.description && <small>{item.description}</small>}</span></button>)}</div></section></div>; }
+export function CommandPalette({ open, onOpenChange, items, placeholder: placeholderProp, emptyLabel: emptyLabelProp, className }: CommandPaletteProps) { const m = useSiaLocale().commandPalette; const placeholder = placeholderProp ?? m.placeholder; const emptyLabel = emptyLabelProp ?? m.empty; const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef<HTMLInputElement>(null); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); return items.filter((item) => !needle || [item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(needle)); }, [items, query]); useEffect(() => { if (!open) return; setQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); }, [open]); if (!open) return null; const select = (item: CommandItem | undefined) => { if (!item || item.disabled) return; item.onSelect(); onOpenChange(false); }; return <div className="sia-command-palette__backdrop" onMouseDown={(event) => event.target === event.currentTarget && onOpenChange(false)}><section className={cn("sia-command-palette", className)} role="dialog" aria-modal="true" aria-label={m.ariaLabel}><input ref={inputRef} value={query} placeholder={placeholder} aria-label={placeholder} onChange={(event) => { setQuery(event.target.value); setActive(0); }} onKeyDown={(event) => { if (event.key === "Escape") onOpenChange(false); if (event.key === "ArrowDown") { event.preventDefault(); setActive((value) => Math.min(value + 1, filtered.length - 1)); } if (event.key === "ArrowUp") { event.preventDefault(); setActive((value) => Math.max(value - 1, 0)); } if (event.key === "Enter") select(filtered[active]); }} /><div role="listbox">{filtered.length === 0 ? <p>{emptyLabel}</p> : filtered.map((item, index) => <button type="button" role="option" aria-selected={index === active} key={item.id} disabled={item.disabled} onMouseEnter={() => setActive(index)} onClick={() => select(item)}>{item.icon}<span><strong>{item.label}</strong>{item.description && <small>{item.description}</small>}</span></button>)}</div></section></div>; }

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

@@ -1,7 +1,8 @@
 import { type ReactNode } from "react";
-import { Button } from "../Button";
+import { cn } from "@sia-ui/utils";
+import { Button, type ButtonProps } from "../Button";
 import type { ComponentTone } from "@sia-ui/tokens";
-import { Modal } from "../Modal";
+import { Modal, type ModalProps } from "../Modal";
 import { useSiaLocale } from "@sia-ui/headless";
 
 export interface ConfirmDialogProps {
@@ -14,6 +15,24 @@ export interface ConfirmDialogProps {
   tone?: Extract<ComponentTone, "primary" | "danger">;
   loading?: boolean;
   onConfirm: () => void | Promise<void>;
+  /**
+   * Les props de la `Modal`. Sans `open`, `onOpenChange`, `children` ni
+   * `footer`, que la boîte de confirmation tient elle-même. Pendant
+   * `loading`, un clic sur le voile ne ferme jamais, quel que soit
+   * `closeOnBackdrop` : ce serait abandonner un appel encore en vol.
+   */
+  modalProps?: Partial<Omit<ModalProps, "open" | "onOpenChange" | "children" | "footer">>;
+  /**
+   * Les props du bouton de confirmation. Sans `onClick` ni `loading`,
+   * branchés sur `onConfirm` et `loading` ; le libellé passe par
+   * `confirmLabel`.
+   */
+  confirmButtonProps?: Partial<Omit<ButtonProps, "onClick" | "loading" | "children">>;
+  /**
+   * Les props du bouton d'annulation. Sans `onClick`, qui referme la boîte ;
+   * `disabled` s'ajoute à `loading` au lieu de le remplacer.
+   */
+  cancelButtonProps?: Partial<Omit<ButtonProps, "onClick" | "children">>;
 }
 
 /**
@@ -23,9 +42,10 @@ export interface ConfirmDialogProps {
  * n'a pas abouti. Sans cela, la boîte se referme sur un appel encore en
  * vol, et l'on ignore si la suppression a eu lieu.
  */
-export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone = "primary", loading = false, onConfirm }: ConfirmDialogProps) {
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone = "primary", loading = false, onConfirm, modalProps, confirmButtonProps, cancelButtonProps }: ConfirmDialogProps) {
     const locale = useSiaLocale();
     const cancelLabel = cancelLabelProp ?? locale.cancel;
     const confirmLabel = confirmLabelProp ?? locale.confirm;
-  return <Modal open={open} onOpenChange={onOpenChange} title={title} description={description} closeOnBackdrop={!loading} footer={<><Button variant="ghost" disabled={loading} onClick={() => onOpenChange(false)}>{cancelLabel}</Button><Button className={tone === "danger" ? "sia-button--danger" : undefined} loading={loading} onClick={() => void onConfirm()}>{confirmLabel}</Button></>}>{description ? null : <p>Cette action nécessite votre confirmation.</p>}</Modal>;
+    const confirmClassName = cn(tone === "danger" && "sia-button--danger", confirmButtonProps?.className);
+  return <Modal title={title} description={description} {...modalProps} open={open} onOpenChange={onOpenChange} closeOnBackdrop={!loading && (modalProps?.closeOnBackdrop ?? true)} footer={<><Button variant="ghost" {...cancelButtonProps} disabled={loading || Boolean(cancelButtonProps?.disabled)} onClick={() => onOpenChange(false)}>{cancelLabel}</Button><Button {...confirmButtonProps} {...(confirmClassName ? { className: confirmClassName } : {})} loading={loading} onClick={() => void onConfirm()}>{confirmLabel}</Button></>}>{description ? null : <p>{locale.confirmDialog.defaultDescription}</p>}</Modal>;
 }

package/dist/registry/package/components/CrudPage/dialogs.tsx

@@ -1,17 +1,20 @@
 import { type Key, type ReactNode } from "react";
 import {
   hasFormErrors,
+  useSiaLocale,
   type FormSubmitResult,
   type FormValidator,
 } from "@sia-ui/headless";
-import { Modal } from "../Modal";
+import { cn } from "@sia-ui/utils";
+import { Modal, type ModalProps } from "../Modal";
 import {
   Form,
   formFieldNames,
   type FormEntry,
+  type FormProps,
   type FormShape,
 } from "../Form";
-import { Descriptions } from "../Descriptions";
+import { Descriptions, type DescriptionsProps } from "../Descriptions";
 import type { DataTableColumn } from "../DataTable/types";
 import { renduCellule } from "../DataTable/values";
 
@@ -70,6 +73,33 @@ export function valeursDeLigne<T>(row: T, fields: FormEntry[]): FormShape {
   return valeurs;
 }
 
+/**
+ * Les props des deux `Modal` — formulaire et détail — qu'on peut régler.
+ *
+ * Sans `open` ni `onOpenChange`, qui suivent l'état des boîtes, ni
+ * `children`. Sans `title` ni `description` non plus : ils diffèrent d'une
+ * boîte à l'autre et se règlent par `dialog`. `className` s'ajoute à celui
+ * des boîtes.
+ */
+export type CrudModalProps = Partial<
+  Omit<ModalProps, "open" | "onOpenChange" | "children" | "title" | "description">
+>;
+
+/**
+ * Les props du `Form` de création et de modification qu'on peut régler —
+ * `showClear`, `submitProps`, `fieldProps`.
+ *
+ * Sans ce que la boîte branche elle-même : les champs, les valeurs de
+ * départ, la validation et l'envoi, qui ont leurs props sur la page ; ni
+ * l'adaptateur `form`, qui couperait la boîte de ses propres valeurs.
+ */
+export type CrudFormProps = Partial<
+  Omit<FormProps, "fields" | "defaultValues" | "validate" | "onSubmit" | "form">
+>;
+
+/** Les props de la vue de détail par défaut. Sans `items`, tirés des colonnes. */
+export type CrudDescriptionsProps = Partial<Omit<DescriptionsProps, "items">>;
+
 export interface CrudDialogsProps<T> {
   state: CrudDialogState<T> | null;
   onClose: () => void;
@@ -97,6 +127,13 @@ export interface CrudDialogsProps<T> {
 
   getRowKey?: ((row: T, index: number) => Key) | undefined;
   dialog?: CrudDialogOptions | undefined;
+
+  /** Voir `CrudModalProps`. */
+  modalProps?: CrudModalProps | undefined;
+  /** Voir `CrudFormProps`. */
+  formProps?: CrudFormProps | undefined;
+  /** Voir `CrudDescriptionsProps`. */
+  descriptionsProps?: CrudDescriptionsProps | undefined;
 }
 
 /**
@@ -121,7 +158,11 @@ export function CrudDialogs<T>({
   renderDetail,
   getRowKey,
   dialog,
+  modalProps,
+  formProps,
+  descriptionsProps,
 }: CrudDialogsProps<T>) {
+  const locale = useSiaLocale();
   const creation = state?.mode === "create";
   const modification = state?.mode === "edit";
   const consultation = state?.mode === "view";
@@ -155,14 +196,15 @@ export function CrudDialogs<T>({
     <>
       {fields && (creation || modification) && (
         <Modal
+          {...modalProps}
           open
           onOpenChange={(ouvert) => {
             if (!ouvert) onClose();
           }}
           title={
             creation
-              ? (dialog?.createTitle ?? "Créer")
-              : (dialog?.editTitle ?? "Modifier")
+              ? (dialog?.createTitle ?? locale.create)
+              : (dialog?.editTitle ?? locale.edit)
           }
           {...(creation
             ? dialog?.createDescription
@@ -171,7 +213,7 @@ export function CrudDialogs<T>({
             : dialog?.editDescription
               ? { description: dialog.editDescription }
               : {})}
-          className="sia-crud-dialog"
+          className={cn("sia-crud-dialog", modalProps?.className)}
         >
           <Form
             key={cle}
@@ -180,12 +222,13 @@ export function CrudDialogs<T>({
             {...(validate ? { validate } : {})}
             columns={dialog?.columns ?? 1}
             submitText={
-              dialog?.submitText ?? (creation ? "Créer" : "Enregistrer")
+              dialog?.submitText ?? (creation ? locale.create : locale.save)
             }
             // Une création part de champs vides : exiger une modification
             // bloquerait l'envoi d'un formulaire dont tous les défauts
             // conviennent.
             requireDirty={modification}
+            {...formProps}
             onSubmit={async (values) => {
               const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
@@ -203,15 +246,16 @@ export function CrudDialogs<T>({
 
       {consultation && state?.row !== undefined && (
         <Modal
+          {...modalProps}
           open
           onOpenChange={(ouvert) => {
             if (!ouvert) onClose();
           }}
-          title={dialog?.viewTitle ?? "Détail"}
+          title={dialog?.viewTitle ?? locale.crudPage.detailTitle}
           {...(dialog?.viewDescription
             ? { description: dialog.viewDescription }
             : {})}
-          className="sia-crud-dialog"
+          className={cn("sia-crud-dialog", modalProps?.className)}
         >
           {renderDetail?.(state.row, state.index ?? 0) ?? (
             /*
@@ -223,6 +267,7 @@ export function CrudDialogs<T>({
             */
             <Descriptions
               columns={dialog?.detailColumns ?? 2}
+              {...descriptionsProps}
               items={columns
                 .filter((colonne) => colonne.card !== "hidden")
                 .map((colonne) => ({