@sia-ui/cli 0.7.1 → 0.8.0

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

@@ -1,7 +1,18 @@
 import { useState, type ReactNode, type TextareaHTMLAttributes } from "react";
-import { Textarea } from "../Textarea";
+import { Textarea, type TextareaProps } from "../Textarea";
 import { cn } from "@sia-ui/utils";
-export interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; preview?: (value: string) => ReactNode; }
+import { useSiaLocale } from "@sia-ui/headless";
+export interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  preview?: (value: string) => ReactNode;
+  /**
+   * La zone de saisie elle-même : `resize`, `invalid`, classe. La valeur et
+   * la saisie restent à l'éditeur, qui les partage avec l'aperçu.
+   */
+  textareaProps?: Partial<Omit<TextareaProps, "value" | "defaultValue" | "onChange">>;
+}
 /**
  * Une saisie Markdown, avec son aperçu.
  *
@@ -9,4 +20,4 @@ export interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTex
  * veut. Embarquer un moteur Markdown imposerait le nôtre à un projet qui a
  * déjà le sien — et ferait grossir le paquet pour tous les autres.
  */
-export function MarkdownEditor({ value, defaultValue = "", onValueChange, preview, className, ...props }: MarkdownEditorProps) { const [internal, setInternal] = useState(defaultValue); const [mode, setMode] = useState<"write" | "preview">("write"); const current = value ?? internal; const update = (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; return <div className={cn("sia-markdown-editor", className)}><div className="sia-editor-toolbar"><button type="button" aria-pressed={mode === "write"} onClick={() => setMode("write")}>Écrire</button><button type="button" aria-pressed={mode === "preview"} onClick={() => setMode("preview")}>Aperçu</button></div>{mode === "write" ? <Textarea {...props} value={current} onChange={(event) => update(event.target.value)} /> : <div className="sia-editor-preview">{preview ? preview(current) : <pre>{current}</pre>}</div>}</div>; }
+export function MarkdownEditor({ value, defaultValue = "", onValueChange, preview, className, textareaProps, ...props }: MarkdownEditorProps) { const messages = useSiaLocale().markdownEditor; const [internal, setInternal] = useState(defaultValue); const [mode, setMode] = useState<"write" | "preview">("write"); const current = value ?? internal; const update = (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; return <div className={cn("sia-markdown-editor", className)}><div className="sia-editor-toolbar"><button type="button" aria-pressed={mode === "write"} onClick={() => setMode("write")}>{messages.write}</button><button type="button" aria-pressed={mode === "preview"} onClick={() => setMode("preview")}>{messages.preview}</button></div>{mode === "write" ? <Textarea {...props} {...textareaProps} value={current} onChange={(event) => update(event.target.value)} /> : <div className="sia-editor-preview">{preview ? preview(current) : <pre>{current}</pre>}</div>}</div>; }

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

@@ -41,9 +41,13 @@ export function Modal({
   const titleId = useId();
   const descriptionId = useId();
   const dialogRef = useRef<HTMLElement>(null);
+  // L'instant d'ouverture : un appui sur le voile qui le suit de près est le
+  // second clic d'un double clic, ou un rebond — pas une demande de fermeture.
+  const ouverteA = useRef(0);
 
   useEffect(() => {
     if (!open) return;
+    ouverteA.current = Date.now();
     const previousFocus = document.activeElement as HTMLElement | null;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -85,7 +89,9 @@ export function Modal({
     <div
       className="sia-modal-backdrop"
       onMouseDown={(event) => {
-        if (closeOnBackdrop && event.target === event.currentTarget) onOpenChange(false);
+        if (!closeOnBackdrop || event.target !== event.currentTarget) return;
+        if (Date.now() - ouverteA.current < 400) return;
+        onOpenChange(false);
       }}
     >
       <section

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
 import type { SelectOption } from "../Select";
 import "./styles.css";
 
@@ -11,7 +12,10 @@ export interface MultiSelectProps {
   value?: string[];
   defaultValue?: string[];
   onValueChange?: (value: string[]) => void;
+  /** Le texte du champ vide. Par défaut, `select` de la locale. */
   placeholder?: string;
+  /** Le texte indicatif de la recherche. Par défaut, `searchPlaceholder` de la locale. */
+  searchPlaceholder?: string;
   searchable?: boolean;
   disabled?: boolean;
   className?: string;
@@ -33,12 +37,16 @@ export function MultiSelect({
   value,
   defaultValue = [],
   onValueChange,
-  placeholder = "Sélectionner",
+  placeholder: placeholderProp,
+  searchPlaceholder: searchPlaceholderProp,
   searchable = true,
   disabled,
   className,
   ...ariaProps
 }: MultiSelectProps) {
+  const locale = useSiaLocale();
+  const placeholder = placeholderProp ?? locale.select;
+  const searchPlaceholder = searchPlaceholderProp ?? locale.searchPlaceholder;
   const [internal, setInternal] = useState(defaultValue);
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -92,7 +100,9 @@ export function MultiSelect({
                   {option.label}
                   <button
                     type="button"
-                    aria-label={`Retirer ${String(option.label)}`}
+                    aria-label={formatMessage(locale.multiSelect.removeItem, {
+                      name: String(option.label),
+                    })}
                     onClick={(event) => {
                       event.stopPropagation();
                       update(current.filter((item) => item !== option.value));
@@ -112,7 +122,8 @@ export function MultiSelect({
           {searchable && (
             <input
               value={query}
-              placeholder="Rechercher..."
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
               onChange={(event) => setQuery(event.target.value)}
             />
           )}

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

@@ -1,5 +1,6 @@
 import { useRef, useState, type ClipboardEvent, type KeyboardEvent } from "react";
 import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 export interface OtpInputProps { id?: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; length?: number; inputMode?: "numeric" | "text"; mask?: boolean; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
 /**
@@ -9,4 +10,4 @@ export interface OtpInputProps { id?: string; value?: string; defaultValue?: str
  * ainsi qu'on le récupère d'un SMS, et le forcer à être retapé serait une
  * punition pour rien.
  */
-export function OtpInput({ id, value, defaultValue = "", onValueChange, length = 6, inputMode = "numeric", mask, disabled, className, ...ariaProps }: OtpInputProps) { const [internal, setInternal] = useState(defaultValue); const refs = useRef<Array<HTMLInputElement | null>>([]); const current = (value ?? internal).padEnd(length, " ").slice(0, length).split(""); const update = (chars: string[]) => { const next = chars.join("").trimEnd(); if (value === undefined) setInternal(next); onValueChange?.(next); }; const accept = (text: string) => inputMode === "numeric" ? text.replace(/\D/g, "") : text; const paste = (event: ClipboardEvent<HTMLDivElement>) => { event.preventDefault(); const next = accept(event.clipboardData.getData("text")).slice(0, length).padEnd(length, " ").split(""); update(next); refs.current[Math.min(next.join("").trimEnd().length, length - 1)]?.focus(); }; return <div id={id} className={cn("sia-otp-input", className)} onPaste={paste} {...ariaProps}>{current.map((char, index) => <input key={index} ref={(node) => { refs.current[index] = node; }} value={char.trim()} type={mask ? "password" : "text"} inputMode={inputMode} maxLength={1} disabled={disabled} aria-label={`Caractère ${index + 1}`} onChange={(event) => { const next = [...current]; next[index] = accept(event.target.value).slice(-1) || " "; update(next); if (next[index]?.trim()) refs.current[index + 1]?.focus(); }} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (event.key === "Backspace" && !current[index]?.trim()) refs.current[index - 1]?.focus(); if (event.key === "ArrowLeft") refs.current[index - 1]?.focus(); if (event.key === "ArrowRight") refs.current[index + 1]?.focus(); }} />)}</div>; }
+export function OtpInput({ id, value, defaultValue = "", onValueChange, length = 6, inputMode = "numeric", mask, disabled, className, ...ariaProps }: OtpInputProps) { const messages = useSiaLocale().otpInput; const [internal, setInternal] = useState(defaultValue); const refs = useRef<Array<HTMLInputElement | null>>([]); const current = (value ?? internal).padEnd(length, " ").slice(0, length).split(""); const update = (chars: string[]) => { const next = chars.join("").trimEnd(); if (value === undefined) setInternal(next); onValueChange?.(next); }; const accept = (text: string) => inputMode === "numeric" ? text.replace(/\D/g, "") : text; const paste = (event: ClipboardEvent<HTMLDivElement>) => { event.preventDefault(); const next = accept(event.clipboardData.getData("text")).slice(0, length).padEnd(length, " ").split(""); update(next); refs.current[Math.min(next.join("").trimEnd().length, length - 1)]?.focus(); }; return <div id={id} className={cn("sia-otp-input", className)} onPaste={paste} {...ariaProps}>{current.map((char, index) => <input key={index} ref={(node) => { refs.current[index] = node; }} value={char.trim()} type={mask ? "password" : "text"} inputMode={inputMode} maxLength={1} disabled={disabled} aria-label={formatMessage(messages.character, { index: index + 1 })} onChange={(event) => { const next = [...current]; next[index] = accept(event.target.value).slice(-1) || " "; update(next); if (next[index]?.trim()) refs.current[index + 1]?.focus(); }} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (event.key === "Backspace" && !current[index]?.trim()) refs.current[index - 1]?.focus(); if (event.key === "ArrowLeft") refs.current[index - 1]?.focus(); if (event.key === "ArrowRight") refs.current[index + 1]?.focus(); }} />)}</div>; }

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

@@ -9,7 +9,7 @@ import {
 import { cn } from "@sia-ui/utils";
 import { paginationItems, useSiaLocale } from "@sia-ui/headless";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
-import { Select } from "../Select";
+import { Select, type SelectProps } from "../Select";
 import "./styles.css";
 
 export interface PaginationProps {
@@ -55,6 +55,15 @@ export interface PaginationProps {
    * Le choix des tailles et leur tri sont déjà faits.
    */
   renderPageSize?: (context: PageSizeContext) => ReactNode;
+  /**
+   * Le `Select` de taille de page : placement, variante, classe.
+   *
+   * La valeur, les options et le rappel restent calculés ici — on les règle
+   * par `pageSize`, `pageSizeOptions` et `onPageSizeChange`.
+   */
+  pageSizeSelectProps?: Partial<
+    Omit<SelectProps, "value" | "defaultValue" | "options" | "children" | "onValueChange">
+  >;
 
   ariaLabel?: string;
   className?: string;
@@ -91,6 +100,7 @@ export function Pagination({
   pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
   pageSizeLabel,
   renderPageSize,
+  pageSizeSelectProps,
   ariaLabel,
   className,
 }: PaginationProps) {
@@ -147,7 +157,7 @@ export function Pagination({
         compact && "sia-pagination--compact",
         className,
       )}
-      aria-label={ariaLabel ?? "Pagination"}
+      aria-label={ariaLabel ?? locale.pagination.label}
     >
       {/*
         Deux groupes, qui passent à la ligne chacun d'un seul tenant : la
@@ -223,6 +233,7 @@ export function Pagination({
                     variant="embedded"
                     aria-label={tailleLibelle}
                     placement="top-end"
+                    {...pageSizeSelectProps}
                     value={String(pageSize)}
                     options={tailles.map((taille) => ({
                       value: String(taille),

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

@@ -1,6 +1,6 @@
 import { forwardRef, useMemo, useState } from "react";
 import { cn } from "@sia-ui/utils";
-import { useSiaLocale } from "@sia-ui/headless";
+import { useSiaLocale, type PasswordInputMessages } from "@sia-ui/headless";
 import { Input, type InputProps } from "../Input";
 import { EyeIcon, EyeOffIcon } from "../Icons";
 import "./styles.css";
@@ -18,13 +18,12 @@ export interface PasswordInputProps extends Omit<InputProps, "type" | "right"> {
   hideToggle?: boolean;
   /**
    * Remplace l'évaluation par défaut. Un projet qui utilise `zxcvbn` branche
-   * son résultat ici; le composant ne dépend de rien.
+   * son résultat ici; le composant ne dépend de rien. Les libellés de
+   * l'évaluation par défaut viennent de la locale (`passwordInput`).
    */
   evaluate?: (value: string) => PasswordStrength;
 }
 
-const LABELS = ["Très faible", "Faible", "Moyen", "Bon", "Excellent"];
-
 /**
  * L'évaluation par défaut : longueur et variété.
  *
@@ -32,7 +31,10 @@ const LABELS = ["Très faible", "Faible", "Moyen", "Bon", "Excellent"];
  * `zxcvbn`, qui pèse 800 ko. Elle décourage les mots de passe visiblement
  * courts, ce qui est déjà l'essentiel du gain.
  */
-function defaultEvaluate(value: string): PasswordStrength {
+function defaultEvaluate(
+  value: string,
+  messages: PasswordInputMessages,
+): PasswordStrength {
   if (!value) return { score: 0, label: "" };
 
   let score = 0;
@@ -41,7 +43,14 @@ function defaultEvaluate(value: string): PasswordStrength {
   if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;
   if (/\d/.test(value) && /[^\w\s]/.test(value)) score += 1;
 
-  return { score, label: LABELS[score] ?? "" };
+  const labels = [
+    messages.strengthVeryWeak,
+    messages.strengthWeak,
+    messages.strengthFair,
+    messages.strengthGood,
+    messages.strengthExcellent,
+  ];
+  return { score, label: labels[score] ?? "" };
 }
 
 /**
@@ -56,7 +65,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     {
       showStrength = false,
       hideToggle = false,
-      evaluate = defaultEvaluate,
+      evaluate,
       className,
       value,
       onChange,
@@ -70,8 +79,13 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     const current = value !== undefined ? String(value) : internal;
 
     const strength = useMemo(
-      () => (showStrength ? evaluate(current) : null),
-      [current, evaluate, showStrength],
+      () =>
+        showStrength
+          ? evaluate
+            ? evaluate(current)
+            : defaultEvaluate(current, locale.passwordInput)
+          : null,
+      [current, evaluate, locale.passwordInput, showStrength],
     );
 
     return (

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

@@ -2,7 +2,7 @@ import { forwardRef, useMemo, useState } from "react";
 import { cn } from "@sia-ui/utils";
 import { useSiaLocale } from "@sia-ui/headless";
 import { Input, type InputProps } from "../Input";
-import { Select, type SelectOption } from "../Select";
+import { Select, type SelectOption, type SelectProps } from "../Select";
 import "./styles.css";
 
 export interface PhoneCountry {
@@ -10,7 +10,11 @@ export interface PhoneCountry {
   code: string;
   /** Indicatif, avec le `+`. */
   dial: string;
-  label: string;
+  /**
+   * Le nom affiché. Par défaut, celui que donne `Intl.DisplayNames` dans la
+   * langue de la locale — « Cameroun », « Cameroon ».
+   */
+  label?: string;
   flag: string;
   /** Nombre de chiffres attendus après l'indicatif. */
   digits?: number;
@@ -26,20 +30,20 @@ export interface PhoneCountry {
  * entièrement quand un projet en a besoin d'une autre.
  */
 export const DEFAULT_COUNTRIES: PhoneCountry[] = [
-  { code: "CM", dial: "+237", label: "Cameroun", flag: "🇨🇲", digits: 9, groups: [1, 2, 2, 2, 2] },
-  { code: "CI", dial: "+225", label: "Côte d'Ivoire", flag: "🇨🇮", digits: 10, groups: [2, 2, 2, 2, 2] },
-  { code: "SN", dial: "+221", label: "Sénégal", flag: "🇸🇳", digits: 9, groups: [2, 3, 2, 2] },
-  { code: "GA", dial: "+241", label: "Gabon", flag: "🇬🇦", digits: 8, groups: [2, 2, 2, 2] },
-  { code: "CG", dial: "+242", label: "Congo", flag: "🇨🇬", digits: 9, groups: [2, 3, 2, 2] },
-  { code: "CD", dial: "+243", label: "RD Congo", flag: "🇨🇩", digits: 9, groups: [3, 3, 3] },
-  { code: "BF", dial: "+226", label: "Burkina Faso", flag: "🇧🇫", digits: 8, groups: [2, 2, 2, 2] },
-  { code: "ML", dial: "+223", label: "Mali", flag: "🇲🇱", digits: 8, groups: [2, 2, 2, 2] },
-  { code: "BJ", dial: "+229", label: "Bénin", flag: "🇧🇯", digits: 10, groups: [2, 2, 2, 2, 2] },
-  { code: "TG", dial: "+228", label: "Togo", flag: "🇹🇬", digits: 8, groups: [2, 2, 2, 2] },
-  { code: "TD", dial: "+235", label: "Tchad", flag: "🇹🇩", digits: 8, groups: [2, 2, 2, 2] },
-  { code: "FR", dial: "+33", label: "France", flag: "🇫🇷", digits: 9, groups: [1, 2, 2, 2, 2] },
-  { code: "BE", dial: "+32", label: "Belgique", flag: "🇧🇪", digits: 9, groups: [3, 2, 2, 2] },
-  { code: "CA", dial: "+1", label: "Canada", flag: "🇨🇦", digits: 10, groups: [3, 3, 4] },
+  { code: "CM", dial: "+237", flag: "🇨🇲", digits: 9, groups: [1, 2, 2, 2, 2] },
+  { code: "CI", dial: "+225", flag: "🇨🇮", digits: 10, groups: [2, 2, 2, 2, 2] },
+  { code: "SN", dial: "+221", flag: "🇸🇳", digits: 9, groups: [2, 3, 2, 2] },
+  { code: "GA", dial: "+241", flag: "🇬🇦", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "CG", dial: "+242", flag: "🇨🇬", digits: 9, groups: [2, 3, 2, 2] },
+  { code: "CD", dial: "+243", flag: "🇨🇩", digits: 9, groups: [3, 3, 3] },
+  { code: "BF", dial: "+226", flag: "🇧🇫", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "ML", dial: "+223", flag: "🇲🇱", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "BJ", dial: "+229", flag: "🇧🇯", digits: 10, groups: [2, 2, 2, 2, 2] },
+  { code: "TG", dial: "+228", flag: "🇹🇬", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "TD", dial: "+235", flag: "🇹🇩", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "FR", dial: "+33", flag: "🇫🇷", digits: 9, groups: [1, 2, 2, 2, 2] },
+  { code: "BE", dial: "+32", flag: "🇧🇪", digits: 9, groups: [3, 2, 2, 2] },
+  { code: "CA", dial: "+1", flag: "🇨🇦", digits: 10, groups: [3, 3, 4] },
 ];
 
 export interface PhoneInputProps
@@ -54,6 +58,36 @@ export interface PhoneInputProps
   defaultCountry?: string;
   /** Verrouille le pays et masque le sélecteur. */
   lockCountry?: boolean;
+  /**
+   * Le sélecteur d'indicatif : placement, recherche, rendu, classe.
+   *
+   * La valeur, les options et le rappel viennent de `countries` et du
+   * numéro ; `disabled` suit celui du champ — pour figer le pays seul,
+   * `lockCountry`.
+   */
+  countrySelectProps?: Partial<
+    Omit<
+      SelectProps,
+      "value" | "defaultValue" | "options" | "children" | "onValueChange" | "disabled"
+    >
+  >;
+}
+
+// Un `Intl.DisplayNames` par langue, pour toute la durée de la page.
+const regionNamesCache = new Map<string, Intl.DisplayNames | undefined>();
+
+/** Les noms de pays dans une langue — `undefined` si Intl ne les connaît pas. */
+function regionNames(language: string) {
+  if (!regionNamesCache.has(language)) {
+    let names: Intl.DisplayNames | undefined;
+    try {
+      names = new Intl.DisplayNames([language], { type: "region" });
+    } catch {
+      names = undefined;
+    }
+    regionNamesCache.set(language, names);
+  }
+  return regionNamesCache.get(language);
 }
 
 function digitsOnly(value: string) {
@@ -101,6 +135,7 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       countries = DEFAULT_COUNTRIES,
       defaultCountry,
       lockCountry = false,
+      countrySelectProps,
       disabled,
       className,
       ...props
@@ -130,16 +165,16 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       : digitsOnly(value);
 
     // La recherche porte sur le nom, l'indicatif et le code ISO : « cam »,
-    // « 237 » et « cm » trouvent tous le Cameroun.
-    const options = useMemo<SelectOption[]>(
-      () =>
-        countries.map((entry) => ({
-          value: entry.code,
-          label: `${entry.flag} ${entry.label} (${entry.dial})`,
-          keywords: [entry.code],
-        })),
-      [countries],
-    );
+    // « 237 » et « cm » trouvent tous le Cameroun. Le nom vient d'Intl dans
+    // la langue de la locale, sauf si le pays en porte un.
+    const options = useMemo<SelectOption[]>(() => {
+      const names = regionNames(locale.language);
+      return countries.map((entry) => ({
+        value: entry.code,
+        label: `${entry.flag} ${entry.label ?? names?.of(entry.code) ?? entry.code} (${entry.dial})`,
+        keywords: [entry.code],
+      }));
+    }, [countries, locale.language]);
 
     const commit = (next: string) => {
       if (!controlled) setInternal(next);
@@ -174,11 +209,7 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
             <Select
               variant="embedded"
               searchable
-              className="sia-phone__country"
               aria-label={locale.countryCode}
-              options={options}
-              value={country.code}
-              disabled={disabled ?? false}
               renderValue={() => (
                 <span className="sia-phone__value">
                   <span className="sia-phone__flag" aria-hidden="true">
@@ -187,6 +218,11 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
                   <span className="sia-phone__dial">{country.dial}</span>
                 </span>
               )}
+              {...countrySelectProps}
+              className={cn("sia-phone__country", countrySelectProps?.className)}
+              options={options}
+              value={country.code}
+              disabled={disabled ?? false}
               onValueChange={(code) => {
                 const next = countries.find((entry) => entry.code === code);
                 if (!next) return;

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

@@ -1,10 +1,25 @@
 import { cloneElement, isValidElement, useRef, useState, type ReactElement, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 import "./styles.css";
 
-export interface PopoverProps { content: ReactNode; title?: ReactNode; children: ReactElement<{ onClick?: () => void; "aria-expanded"?: boolean }>; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; placement?: OverlayPlacement; trigger?: "click" | "hover"; variant?: "solid" | "outline"; tone?: ComponentTone; disabled?: boolean; className?: string; }
+export interface PopoverProps {
+  content: ReactNode;
+  title?: ReactNode;
+  children: ReactElement<{ onClick?: () => void; "aria-expanded"?: boolean }>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: OverlayPlacement;
+  /** Réglages du panneau flottant — décalage, marge au bord, rôle, classe. */
+  overlayProps?: Partial<Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">>;
+  trigger?: "click" | "hover";
+  variant?: "solid" | "outline";
+  tone?: ComponentTone;
+  disabled?: boolean;
+  className?: string;
+}
 /**
  * Un panneau attaché à un élément, avec du contenu qu'on peut viser.
  *
@@ -12,8 +27,8 @@ export interface PopoverProps { content: ReactNode; title?: ReactNode; children:
  * bouton, un petit formulaire. Une infobulle qui contient un bouton est une
  * infobulle cassée — elle disparaît dès qu'on va vers lui.
  */
-export function Popover({ content, title, children, open: openProp, defaultOpen = false, onOpenChange, placement = "bottom-start", trigger = "click", variant = "outline", tone = "neutral", disabled = false, className }: PopoverProps) {
+export function Popover({ content, title, children, open: openProp, defaultOpen = false, onOpenChange, placement = "bottom-start", overlayProps, trigger = "click", variant = "outline", tone = "neutral", disabled = false, className }: PopoverProps) {
   const anchorRef = useRef<HTMLElement>(null); const [internalOpen, setInternalOpen] = useState(defaultOpen); const open = openProp ?? internalOpen; const setOpen = (next: boolean) => { if (disabled) return; if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); };
   const child = isValidElement(children) ? cloneElement(children, { ref: anchorRef, "aria-expanded": open, ...(trigger === "click" ? { onClick: () => { children.props.onClick?.(); setOpen(!open); } } : {}) } as never) : children;
-  return <span className="sia-popover-anchor" onMouseEnter={trigger === "hover" ? () => setOpen(true) : undefined} onMouseLeave={trigger === "hover" ? () => setOpen(false) : undefined}>{child}<Overlay open={open} anchorRef={anchorRef} onOpenChange={setOpen} placement={placement} className={cn("sia-popover", `sia-popover--${variant}`, toneClass("sia-tone", tone), className)} role="dialog">{title && <strong className="sia-popover__title">{title}</strong>}<div className="sia-popover__content">{content}</div></Overlay></span>;
+  return <span className="sia-popover-anchor" onMouseEnter={trigger === "hover" ? () => setOpen(true) : undefined} onMouseLeave={trigger === "hover" ? () => setOpen(false) : undefined}>{child}<Overlay placement={placement} role="dialog" {...overlayProps} className={cn("sia-popover", `sia-popover--${variant}`, toneClass("sia-tone", tone), className, overlayProps?.className)} open={open} anchorRef={anchorRef} onOpenChange={setOpen}>{title && <strong className="sia-popover__title">{title}</strong>}<div className="sia-popover__content">{content}</div></Overlay></span>;
 }

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

@@ -1,8 +1,9 @@
 import { type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
-export interface QRCodeProps { value: string; size?: number; label?: string; render?: (value: string, size: number) => ReactNode; className?: string; }
+export interface QRCodeProps { value: string; size?: number; /** Par défaut, celui de la locale. */ label?: string; render?: (value: string, size: number) => ReactNode; className?: string; }
 /**
  * Un code à scanner.
  *
@@ -10,4 +11,4 @@ export interface QRCodeProps { value: string; size?: number; label?: string; ren
  * dépendance à tous ceux qui ne s'en servent pas, alors que les projets qui
  * en ont besoin ont déjà le leur.
  */
-export function QRCode({ value, size = 160, label = "Code QR", render, className }: QRCodeProps) { return <figure className={cn("sia-qr-code", className)} aria-label={label} style={{ width: size }}><div className="sia-qr-code__frame" style={{ width: size, height: size }}>{render ? render(value, size) : <div className="sia-qr-code__adapter"><strong>QR</strong><span>Encodeur requis</span></div>}</div><figcaption>{value}</figcaption></figure>; }
+export function QRCode({ value, size = 160, label: labelProp, render, className }: QRCodeProps) { const m = useSiaLocale().qrCode; const label = labelProp ?? m.label; return <figure className={cn("sia-qr-code", className)} aria-label={label} style={{ width: size }}><div className="sia-qr-code__frame" style={{ width: size, height: size }}>{render ? render(value, size) : <div className="sia-qr-code__adapter"><strong>QR</strong><span>{m.encoderRequired}</span></div>}</div><figcaption>{value}</figcaption></figure>; }

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

@@ -1,6 +1,9 @@
 .sia-radio-group { display:flex; gap:.75rem; padding:0; margin:0; border:0; }
 .sia-radio-group--vertical { flex-direction:column; }
 .sia-radio-group--horizontal { flex-direction:row; flex-wrap:wrap; }
+/* Des `RadioButton` forment un seul contrôle segmenté : bordures communes,
+   coins arrondis aux seules extrémités. L'écart entre radios les séparait. */
+.sia-radio-group:has(> .sia-radio-button) { gap:0; }
 .sia-radio-group__legend { margin-bottom:.65rem; font-weight:600; }
 .sia-radio { --sia-accent:var(--sia-primary); display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; }
 .sia-radio__dot { display:grid; place-items:center; width:1.1rem; height:1.1rem; border:1.5px solid var(--sia-border); border-radius:50%; }

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

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
 import { StarIcon } from "../Icons";
 import "./styles.css";
 export interface RatingProps {
@@ -12,6 +13,7 @@ export interface RatingProps {
   allowHalf?: boolean;
   allowClear?: boolean;
   disabled?: boolean;
+  /** Le nom du groupe d'étoiles. Par défaut, celui de la locale. */
   label?: string;
   className?: string;
   "aria-describedby"?: string;
@@ -34,10 +36,12 @@ export function Rating({
   allowHalf = false,
   allowClear = true,
   disabled,
-  label = "Note",
+  label: labelProp,
   className,
   ...ariaProps
 }: RatingProps) {
+  const m = useSiaLocale().rating;
+  const label = labelProp ?? m.label;
   const [internal, setInternal] = useState(defaultValue);
   const current = value ?? internal;
   const update = (next: number) => {
@@ -64,7 +68,7 @@ export function Rating({
             type="button"
             role="radio"
             aria-checked={current === item}
-            aria-label={`${item} sur ${max}`}
+            aria-label={formatMessage(m.star, { value: item, max })}
             disabled={disabled}
             className={filled > 0 ? "is-active" : ""}
             style={{ "--sia-rating-fill": `${filled * 100}%` } as React.CSSProperties}

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

@@ -3,7 +3,14 @@ import { Autocomplete, type AutocompleteProps } from "../Autocomplete";
 import type { SelectOption } from "../Select";
 import "./styles.css";
 export interface ReferenceOption extends SelectOption { description?: ReactNode; }
-export interface ReferenceSelectProps extends Omit<AutocompleteProps, "options"> { options: ReferenceOption[]; }
+/**
+ * Les props d'`Autocomplete`, transmises telles quelles : le composant n'est
+ * qu'une mise en forme de ses options. Seules `options` changent de forme,
+ * pour porter une description.
+ */
+export interface ReferenceSelectProps extends Omit<AutocompleteProps, "options"> {
+  options: ReferenceOption[];
+}
 /**
  * Un choix parmi des objets métier, pas parmi des mots.
  *

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

@@ -1,9 +1,11 @@
 import { useEffect, useState, type HTMLAttributes } from "react";
 import { cn, formatDate, formatTimeAgo } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "dateTime"> {
   value: Date | string | number;
+  /** La langue de la phrase. Par défaut, celle de la locale SIA. */
   locale?: string;
   prefix?: string;
   refreshInterval?: number;
@@ -15,7 +17,9 @@ export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>,
  * Elle se rafraîchit d'elle-même : « il y a une minute » affiché une heure
  * plus tard est faux, et rien ne le signale à qui lit l'écran resté ouvert.
  */
-export function RelativeTime({ value, locale = "fr-FR", prefix, refreshInterval = 60_000, className, title, ...props }: RelativeTimeProps) {
+export function RelativeTime({ value, locale: localeProp, prefix, refreshInterval = 60_000, className, title, ...props }: RelativeTimeProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
   const [, refresh] = useState(0);
   useEffect(() => {
     if (refreshInterval <= 0) return;

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

@@ -6,7 +6,7 @@ import {
   type SessionState,
   type SessionStore,
 } from "@sia-ui/headless";
-import { Spinner } from "../Spinner";
+import { Spinner, type SpinnerProps } from "../Spinner";
 import "./styles.css";
 
 export interface RequireSessionProps<TUser, TTenant, TRule> {
@@ -39,13 +39,18 @@ export interface RequireSessionProps<TUser, TTenant, TRule> {
   onForbidden?: (state: SessionState<TUser, TTenant>) => void;
   onIncomplete?: (state: SessionState<TUser, TTenant>) => void;
   className?: string;
+  /**
+   * Les props du `Spinner` d'attente par défaut — taille, variante, libellé
+   * lu par les lecteurs d'écran. Sans effet quand `pending` est fourni.
+   */
+  spinnerProps?: Partial<SpinnerProps>;
 }
 
 /**
  * Ce qui se trouve derrière une session valide.
  *
- * Écrite cinq fois dans les projets du disque D, cinq fois de la même façon
- * à la cible de redirection près. Elle ne dépend d'aucun routeur : elle rend
+ * Chaque application l'écrit, presque toujours de la même façon, à la cible
+ * de redirection près. Elle ne dépend d'aucun routeur : elle rend
  * un état et prévient, l'application décide où aller.
  *
  * > Ceci protège l'interface, pas les données. Une route masquée reste une
@@ -63,6 +68,7 @@ export function RequireSession<TUser, TTenant, TRule = PermissionRule>({
   onForbidden,
   onIncomplete,
   className,
+  spinnerProps,
 }: RequireSessionProps<TUser, TTenant, TRule>) {
   const state = useSession(session);
 
@@ -88,7 +94,7 @@ export function RequireSession<TUser, TTenant, TRule = PermissionRule>({
       <div className={cn("sia-require-session", className)} aria-busy="true">
         {pending ?? (
           <div className="sia-require-session__pending">
-            <Spinner />
+            <Spinner {...spinnerProps} />
           </div>
         )}
       </div>