@sia-ui/cli 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sia-ui/cli
 
+## 0.8.0
+
+### Minor Changes
+
+- Version alignée sur les autres paquets SIA UI : tous sortent désormais ensemble, au même numéro.
+
 ## 0.7.1
 
 ### Patch Changes

package/README.md

@@ -68,6 +68,12 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.8.0
+
+### Minor Changes
+
+- Version alignée sur les autres paquets SIA UI : tous sortent désormais ensemble, au même numéro.
+
 ## 0.7.1
 
 ### Patch Changes

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

@@ -0,0 +1,107 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
+import { Avatar, type AvatarProps } from "../Avatar";
+import { Badge, type BadgeProps } from "../Badge";
+import {
+  DropdownMenu,
+  type DropdownMenuProps,
+  type MenuEntry,
+  type MenuItem,
+} from "../DropdownMenu";
+import "./styles.css";
+
+export interface AccountMenuProps {
+  /** Le nom de la personne connectée : avatar, en-tête et libellé du bouton. */
+  name: string;
+  email?: ReactNode;
+  /** Le rôle, en pastille sous le nom : « Administrateur ». */
+  role?: ReactNode;
+  /** La photo. À défaut, les initiales de `name`. */
+  avatarSrc?: string;
+  /** Les entrées sous l'en-tête : profil, préférences, déconnexion. */
+  items: MenuEntry[];
+  onSelect?: (item: MenuItem) => void;
+  /** Le nom accessible du déclencheur. Par défaut, celui de la locale, `accountMenu.trigger` (« Compte de {name} »). */
+  triggerLabel?: string;
+  /** L'avatar du déclencheur — taille, forme, variante. */
+  avatarProps?: Partial<Omit<AvatarProps, "name">>;
+  /** L'avatar de l'en-tête du menu. */
+  headerAvatarProps?: Partial<Omit<AvatarProps, "name">>;
+  /** La pastille du rôle — ton, variante. */
+  roleBadgeProps?: Partial<Omit<BadgeProps, "children">>;
+  /** Le menu lui-même, hors entrées et déclencheur qu'il reçoit d'ici. */
+  dropdownMenuProps?: Partial<Omit<DropdownMenuProps, "items" | "children" | "onSelect">>;
+  className?: string;
+}
+
+/**
+ * Le menu du compte connecté : un avatar qui ouvre un menu à en-tête de profil.
+ *
+ * Chaque application le recomposait — avatar dans un bouton qui lui
+ * ajoutait un cadre, en-tête forcé dans un titre de section en capitales.
+ * Ici, le déclencheur est l'avatar seul, rond et sans fond, et l'en-tête une
+ * entrée `header` à contenu libre du `DropdownMenu`.
+ */
+export function AccountMenu({
+  name,
+  email,
+  role,
+  avatarSrc,
+  items,
+  onSelect,
+  triggerLabel,
+  avatarProps,
+  headerAvatarProps,
+  roleBadgeProps,
+  dropdownMenuProps,
+  className,
+}: AccountMenuProps) {
+  const locale = useSiaLocale();
+  const entete: MenuEntry = {
+    key: "__sia-account-header",
+    type: "header",
+    content: (
+      <div className="sia-account__who">
+        <Avatar
+          name={name}
+          size="md"
+          {...(avatarSrc ? { src: avatarSrc } : {})}
+          {...headerAvatarProps}
+        />
+        <div className="sia-account__identity">
+          <strong className="sia-account__name">{name}</strong>
+          {email && <span className="sia-account__email">{email}</span>}
+          {role && (
+            <Badge tone="primary" {...roleBadgeProps} className={cn("sia-account__role", roleBadgeProps?.className)}>
+              {role}
+            </Badge>
+          )}
+        </div>
+      </div>
+    ),
+  };
+
+  return (
+    <DropdownMenu
+      placement="bottom-end"
+      {...dropdownMenuProps}
+      items={[entete, ...items]}
+      {...(onSelect ? { onSelect } : {})}
+      className={cn("sia-account__menu", dropdownMenuProps?.className)}
+    >
+      <button
+        type="button"
+        className={cn("sia-account__trigger", className)}
+        aria-label={triggerLabel ?? formatMessage(locale.accountMenu.trigger, { name })}
+      >
+        <Avatar
+          name={name}
+          size="sm"
+          {...(avatarSrc ? { src: avatarSrc } : {})}
+          {...avatarProps}
+        />
+      </button>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,30 @@
+/* Le déclencheur est l'avatar, rien d'autre : pas de cadre ni de fond de
+   bouton autour d'un cercle. L'anneau de focus suit sa forme. */
+.sia-account__trigger {
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  cursor: pointer;
+  transition: box-shadow var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-account__trigger:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sia-foreground) 8%, transparent); }
+.sia-account__trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--sia-primary) 35%, transparent); outline-offset: 2px; }
+.sia-account__trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sia-primary) 25%, transparent); }
+
+.sia-account__menu { min-width: 15rem; }
+
+.sia-account__who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
+.sia-account__identity { display: grid; justify-items: start; gap: .15rem; min-width: 0; }
+.sia-account__name { font-weight: 600; line-height: 1.3; }
+.sia-account__email {
+  max-width: 14rem;
+  overflow: hidden;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-account__role { margin-top: .2rem; }

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

@@ -1,15 +1,15 @@
 import { useMemo, type Key, type ReactNode } from "react";
 import { cn, formatDateTime } from "@sia-ui/utils";
-import type { TableQuery } from "@sia-ui/headless";
+import { FRENCH, useSiaLocale, type ActivityLogMessages, type TableQuery } from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { DataTable } from "../DataTable";
 import type { DataTableColumn, DataTableProps } from "../DataTable/types";
-import { FiltersBar } from "../FiltersBar";
-import { PageHeader } from "../PageHeader";
-import { Pagination } from "../Pagination";
-import { SearchInput } from "../SearchInput";
-import { Select, type SelectOption } from "../Select";
-import { StatusBadge } from "../Badge";
+import { FiltersBar, type FiltersBarProps } from "../FiltersBar";
+import { PageHeader, type PageHeaderProps } from "../PageHeader";
+import { Pagination, type PaginationProps } from "../Pagination";
+import { SearchInput, type SearchInputProps } from "../SearchInput";
+import { Select, type SelectOption, type SelectProps } from "../Select";
+import { StatusBadge, type StatusBadgeProps } from "../Badge";
 import "./styles.css";
 
 /** Une entrée de journal, dans sa forme la plus courante. */
@@ -71,6 +71,51 @@ export interface ActivityLogProps<T = ActivityEntry> {
   onRetry?: () => void;
   empty?: DataTableProps<T>["empty"];
   className?: string;
+
+  /** Les props du `PageHeader`, rendu quand `title` est fourni. */
+  pageHeaderProps?: Partial<PageHeaderProps>;
+  /**
+   * Les props de la `FiltersBar` — des actions, un autre libellé de
+   * réinitialisation. Sans `search`, `filters`, `activeCount` ni `onReset`,
+   * que le journal compose à partir de la requête.
+   */
+  filtersBarProps?: Partial<
+    Omit<FiltersBarProps, "search" | "filters" | "activeCount" | "onReset">
+  >;
+  /**
+   * Les props du champ de recherche. Sans `value`, `defaultValue`,
+   * `onValueChange` ni `onSearch` : la recherche en vigueur vit dans la
+   * requête.
+   */
+  searchInputProps?: Partial<
+    Omit<SearchInputProps, "value" | "defaultValue" | "onValueChange" | "onSearch">
+  >;
+  /**
+   * Les props communes aux `Select` des filtres. Sans `value`,
+   * `onValueChange` ni `options`, propres à chaque filtre et branchés sur la
+   * requête.
+   */
+  filterSelectProps?: Partial<Omit<SelectProps, "value" | "onValueChange" | "options">>;
+  /**
+   * Les props du `StatusBadge` de la colonne « Action » par défaut. Sans
+   * `value`, lue sur l'entrée. Sans effet quand `columns` est fourni.
+   */
+  actionBadgeProps?: Partial<Omit<StatusBadgeProps, "value">>;
+  /**
+   * Les props du `DataTable` — densité, mode cartes, sélection. Sans
+   * `columns` ni `data`, qui ont leurs props ici.
+   */
+  tableProps?: Partial<Omit<DataTableProps<T>, "columns" | "data">>;
+  /**
+   * Les props de la `Pagination` — `jumpTo`, `pageSizeOptions`. Sans la page
+   * et la taille de page ni leurs changements, branchés sur la requête.
+   */
+  paginationProps?: Partial<
+    Omit<
+      PaginationProps,
+      "page" | "totalPages" | "onPageChange" | "pageSize" | "onPageSizeChange"
+    >
+  >;
 }
 
 /** Les colonnes d'une `ActivityEntry` : quand, qui, quoi, sur quoi. */
@@ -78,36 +123,45 @@ export function activityColumns(
   options: {
     actionTones?: Record<string, ComponentTone> | undefined;
     actionLabels?: Record<string, ReactNode> | undefined;
+    /** Les props du `StatusBadge` de la colonne « Action », sans `value`. */
+    actionBadgeProps?: Partial<Omit<StatusBadgeProps, "value">> | undefined;
+    /** Les en-têtes : le groupe `activityLog` de la locale. Français par défaut. */
+    messages?: ActivityLogMessages | undefined;
+    /** La langue des dates. Par défaut, `fr-FR`. */
+    language?: string | undefined;
   } = {},
 ): Array<DataTableColumn<ActivityEntry>> {
+  const textes = options.messages ?? FRENCH.activityLog;
+  const language = options.language ?? FRENCH.language;
   return [
     {
       key: "at",
-      header: "Date",
+      header: textes.date,
       width: "11rem",
       cell: (entry) => (
         <time className="sia-activity__date" dateTime={new Date(entry.at).toISOString()}>
-          {formatDateTime(entry.at)}
+          {formatDateTime(entry.at, { locale: language })}
         </time>
       ),
       card: "meta",
     },
-    { key: "actor", header: "Acteur", card: "title" },
+    { key: "actor", header: textes.actor, card: "title" },
     {
       key: "action",
-      header: "Action",
+      header: textes.action,
       cell: (entry) => (
         <StatusBadge
-          value={entry.action}
           {...(options.actionTones ? { tones: options.actionTones } : {})}
           {...(options.actionLabels ? { labels: options.actionLabels } : {})}
+          {...options.actionBadgeProps}
+          value={entry.action}
         />
       ),
       card: "meta",
     },
     {
       key: "target",
-      header: "Cible",
+      header: textes.target,
       cell: (entry) =>
         entry.target || entry.summary ? (
           <span className="sia-activity__target">
@@ -146,14 +200,27 @@ export function ActivityLog<T = ActivityEntry>({
   onRetry,
   empty,
   className,
+  pageHeaderProps,
+  filtersBarProps,
+  searchInputProps,
+  filterSelectProps,
+  actionBadgeProps,
+  tableProps,
+  paginationProps,
 }: ActivityLogProps<T>) {
+  const locale = useSiaLocale();
+  const textes = locale.activityLog;
   const colonnes = useMemo(
     () =>
       columns ??
-      (activityColumns({ actionTones, actionLabels }) as unknown as Array<
-        DataTableColumn<T>
-      >),
-    [actionLabels, actionTones, columns],
+      (activityColumns({
+        actionTones,
+        actionLabels,
+        actionBadgeProps,
+        messages: textes,
+        language: locale.language,
+      }) as unknown as Array<DataTableColumn<T>>),
+    [actionBadgeProps, actionLabels, actionTones, columns, textes, locale.language],
   );
 
   const actifs =
@@ -171,11 +238,13 @@ export function ActivityLog<T = ActivityEntry>({
           title={title}
           {...(description ? { description } : {})}
           {...(headingLevel ? { level: headingLevel } : {})}
+          {...pageHeaderProps}
         />
       )}
 
       {(filters.length > 0 || searchPlaceholder) && (
         <FiltersBar
+          {...filtersBarProps}
           {...(searchPlaceholder
             ? {
                 search: (
@@ -183,9 +252,10 @@ export function ActivityLog<T = ActivityEntry>({
                     // Remonté à la réinitialisation : le champ reprend la
                     // recherche en vigueur plutôt que sa saisie d'avant.
                     key={query.state.search === "" ? "vide" : "saisie"}
-                    defaultValue={query.state.search}
                     placeholder={searchPlaceholder}
                     searchDelay={300}
+                    {...searchInputProps}
+                    defaultValue={query.state.search}
                     onSearch={query.setSearch}
                   />
                 ),
@@ -196,10 +266,11 @@ export function ActivityLog<T = ActivityEntry>({
               <Select
                 aria-label={filtre.label}
                 placeholder={filtre.label}
-                options={filtre.options}
-                value={query.state.filters[filtre.key] ?? ""}
                 clearable
                 searchable={filtre.searchable ?? filtre.options.length > 10}
+                {...filterSelectProps}
+                options={filtre.options}
+                value={query.state.filters[filtre.key] ?? ""}
                 onValueChange={(valeur) => query.setFilter(filtre.key, valeur)}
               />
             </div>
@@ -218,22 +289,22 @@ export function ActivityLog<T = ActivityEntry>({
         {...(onRetry ? { onRetry } : {})}
         empty={
           empty ?? {
-            title: actifs > 0 ? "Aucune activité pour ces filtres" : "Aucune activité",
-            ...(actifs > 0
-              ? { description: "Élargissez la période ou retirez un filtre." }
-              : {}),
+            title: actifs > 0 ? textes.emptyFiltered : textes.empty,
+            ...(actifs > 0 ? { description: textes.emptyFilteredHint } : {}),
           }
         }
+        {...tableProps}
       />
 
       {totalPages !== undefined && (
         <Pagination
+          showTotal
+          {...paginationProps}
           page={query.state.page}
           totalPages={totalPages}
           onPageChange={query.setPage}
           pageSize={query.state.perPage}
           onPageSizeChange={query.setPerPage}
-          showTotal
         />
       )}
     </section>

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

@@ -1,9 +1,10 @@
 import { type ReactNode } from "react";
 import { cn, formatCurrency } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
-export interface AmountDisplayProps { value: number; currency?: string; locale?: string; label?: ReactNode; secondary?: ReactNode; sign?: "auto" | "always"; tone?: ComponentTone; className?: string; }
+export interface AmountDisplayProps { value: number; currency?: string; /** La langue du format. Par défaut, celle de la locale SIA. */ locale?: string; label?: ReactNode; secondary?: ReactNode; sign?: "auto" | "always"; tone?: ComponentTone; className?: string; }
 /**
  * Un montant, lisible d'un coup d'œil.
  *
@@ -12,7 +13,9 @@ export interface AmountDisplayProps { value: number; currency?: string; locale?:
  * rouge seul. La couleur peut manquer — un daltonien, une impression en
  * noir et blanc — le signe, lui, reste.
  */
-export function AmountDisplay({ value, currency = "XAF", locale = "fr-FR", label, secondary, sign = "auto", tone = "neutral", className }: AmountDisplayProps) {
+export function AmountDisplay({ value, currency = "XAF", locale: localeProp, label, secondary, sign = "auto", tone = "neutral", className }: AmountDisplayProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
   const formatted = formatCurrency(Math.abs(value), { locale, currency });
   const prefix = sign === "always" || value < 0 ? value < 0 ? "-" : "+" : "";
   return <span className={cn("sia-amount-display", `sia-amount-display--${tone}`, className)}>{label && <span className="sia-amount-display__label">{label}</span>}<strong>{prefix}{formatted}</strong>{secondary && <span className="sia-amount-display__secondary">{secondary}</span>}</span>;

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

@@ -11,14 +11,16 @@ import { cn } from "@sia-ui/utils";
 import {
   filterNavTree,
   navKeyForPath,
+  useSiaLocale,
   type PermissionRule,
 } from "@sia-ui/headless";
 import { useMediaQuery } from "@sia-ui/react";
-import { Drawer } from "../Drawer";
+import { Drawer, type DrawerProps } from "../Drawer";
 import {
   Sidebar,
   type SidebarEntry,
   type SidebarItem,
+  type SidebarProps,
   type SidebarRenderLink,
 } from "../Sidebar";
 import { BottomTabs } from "./tab-bar";
@@ -236,6 +238,35 @@ export interface AppShellProps {
   /** Sous cette largeur, la barre latérale cède la place. */
   mobileBreakpoint?: number;
 
+  /**
+   * Réglages de la barre latérale — taille, ton, accordéon, branches
+   * ouvertes, volets du rail.
+   *
+   * Ce que la coquille décide seule en est retiré : les entrées filtrées,
+   * l'entrée active, l'état réduit, les liens, l'en-tête et le pied, le côté
+   * et la variante — tous déjà réglables ici, et qui doivent rester
+   * d'accord avec la mise en page de la coquille.
+   */
+  sidebarProps?: Partial<
+    Omit<
+      SidebarProps,
+      | "items"
+      | "can"
+      | "activeKey"
+      | "collapsed"
+      | "side"
+      | "variant"
+      | "renderLink"
+      | "onNavigate"
+      | "header"
+      | "footer"
+      | "ariaLabel"
+    >
+  >;
+
+  /** Réglages du tiroir mobile — taille, fermeture au clic extérieur, classe. */
+  drawerProps?: Partial<Omit<DrawerProps, "open" | "defaultOpen" | "onOpenChange" | "children">>;
+
   ariaLabel?: string;
   className?: string;
 }
@@ -273,9 +304,12 @@ export function AppShell({
   sidebarCollapsedWidth,
   mobileNav = "drawer",
   mobileBreakpoint = 768,
+  sidebarProps,
+  drawerProps,
   ariaLabel,
   className,
 }: AppShellProps) {
+  const m = useSiaLocale().appShell;
   const compact = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
 
   // Filtré une fois, consommé par la barre et par les onglets.
@@ -339,6 +373,7 @@ export function AppShell({
 
   const barre = (
     <Sidebar
+      {...sidebarProps}
       items={visibles}
       collapsed={reduite && !compact}
       side={side}
@@ -405,7 +440,7 @@ export function AppShell({
               <button
                 type="button"
                 className="sia-shell__toggle"
-                aria-label="Ouvrir la navigation"
+                aria-label={m.openNavigation}
                 aria-expanded={tiroirOuvert}
                 onClick={() => setTiroirOuvert(true)}
               >
@@ -418,8 +453,8 @@ export function AppShell({
                   className="sia-shell__toggle"
                   aria-label={
                     etat === "expanded"
-                      ? "Réduire la navigation"
-                      : "Déployer la navigation"
+                      ? m.collapseNavigation
+                      : m.expandNavigation
                   }
                   aria-expanded={etat === "expanded"}
                   onClick={basculer}
@@ -458,14 +493,15 @@ export function AppShell({
 
       {compact && montrerTiroir && (
         <Drawer
-          open={tiroirOuvert}
-          onOpenChange={setTiroirOuvert}
           position={side}
           size="sm"
-          className="sia-shell__drawer"
+          {...drawerProps}
+          className={cn("sia-shell__drawer", drawerProps?.className)}
+          open={tiroirOuvert}
+          onOpenChange={setTiroirOuvert}
         >
           <Drawer.Header>
-            <Drawer.Title>Navigation</Drawer.Title>
+            <Drawer.Title>{m.navigationTitle}</Drawer.Title>
             <Drawer.Close />
           </Drawer.Header>
           <Drawer.Body>{barre}</Drawer.Body>

package/dist/registry/package/components/AppShell/tab-bar.tsx

@@ -1,6 +1,6 @@
 import { memo, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { navLeaves, navSome } from "@sia-ui/headless";
+import { navLeaves, navSome, useSiaLocale } from "@sia-ui/headless";
 import type { SidebarItem, SidebarRenderLink } from "../Sidebar";
 
 export interface BottomTabsProps {
@@ -23,6 +23,7 @@ export interface BottomTabsProps {
   /** Le bouton qui ouvre l'arborescence complète. */
   more?: ReactNode;
   onMore?: () => void;
+  /** Le libellé de « Plus ». Par défaut, celui de la locale. */
   moreLabel?: string;
 
   className?: string;
@@ -47,16 +48,18 @@ export const BottomTabs = memo(function BottomTabs({
   onNavigate,
   more,
   onMore,
-  moreLabel = "Plus",
+  moreLabel: moreLabelProp,
   className,
 }: BottomTabsProps) {
+  const m = useSiaLocale().appShell;
+  const moreLabel = moreLabelProp ?? m.more;
   const feuilles = navLeaves(items);
   const onglets = feuilles.slice(0, max);
   const reste = feuilles.length - onglets.length;
   const afficherPlus = reste > 0 || Boolean(onMore);
 
   return (
-    <nav className={cn("sia-bottom-tabs", className)} aria-label="Navigation principale">
+    <nav className={cn("sia-bottom-tabs", className)} aria-label={m.bottomTabsLabel}>
       {onglets.map((item) => {
         const actif = item.key === activeKey;
         const contenu = (

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

@@ -1,7 +1,9 @@
 import { type ReactNode } from "react";
-import { Alert } from "../Alert";
-import { Button } from "../Button";
-import { EmptyState } from "../EmptyState";
+import { useSiaLocale } from "@sia-ui/headless";
+import { Alert, type AlertProps } from "../Alert";
+import { Button, type ButtonProps } from "../Button";
+import { EmptyState, type EmptyStateProps } from "../EmptyState";
+import { Spinner, type SpinnerProps } from "../Spinner";
 import "./styles.css";
 
 export interface AsyncStateProps {
@@ -12,6 +14,21 @@ export interface AsyncStateProps {
   emptyDescription?: ReactNode;
   onRetry?: () => void;
   children: ReactNode;
+  /**
+   * Les props de l'`Alert` d'erreur — un autre titre, un autre ton. Sans
+   * `children` : le message est `error`.
+   */
+  alertProps?: Partial<Omit<AlertProps, "children">>;
+  /**
+   * Les props du bouton « Réessayer ». Sans `onClick`, branché sur
+   * `onRetry` : un bouton de reprise qui ne reprend rien serait pire que
+   * pas de bouton.
+   */
+  retryButtonProps?: Partial<Omit<ButtonProps, "onClick">>;
+  /** Les props de l'`EmptyState` — une icône, une action, la taille. */
+  emptyStateProps?: Partial<EmptyStateProps>;
+  /** Le témoin de chargement. Son libellé vient de la locale. */
+  spinnerProps?: Partial<Omit<SpinnerProps, "label">>;
 }
 
 /**
@@ -21,9 +38,14 @@ export interface AsyncStateProps {
  * écran, et les écrire à la main en oublie toujours un — le plus souvent le
  * vide, qui ressemble à un chargement qui n'en finit pas.
  */
-export function AsyncState({ loading, error, empty, emptyTitle = "No data", emptyDescription, onRetry, children }: AsyncStateProps) {
-  if (loading) return <div className="sia-async-state" role="status"><span className="sia-spinner" /><span>Loading...</span></div>;
-  if (error) return <Alert tone="danger" title="Unable to load data" action={onRetry && <Button variant="outline" onClick={onRetry}>Retry</Button>}>{error}</Alert>;
-  if (empty) return <EmptyState compact title={emptyTitle} description={emptyDescription} />;
+export function AsyncState({ loading, error, empty, emptyTitle, emptyDescription, onRetry, children, alertProps, retryButtonProps, emptyStateProps, spinnerProps }: AsyncStateProps) {
+  // Les libellés viennent de la locale, comme partout ailleurs : ils étaient
+  // restés en anglais ici, seuls de toute la bibliothèque.
+  const locale = useSiaLocale();
+  // Le vrai `Spinner` : un `<span class="sia-spinner">` brut ignorait ses
+  // réglages par défaut (`SiaProvider defaults.spinner`).
+  if (loading) return <div className="sia-async-state" role="status"><Spinner size="sm" {...spinnerProps} label={locale.loading} /><span aria-hidden="true">{locale.loading}</span></div>;
+  if (error) return <Alert tone="danger" title={locale.error} action={onRetry && <Button variant="outline" {...retryButtonProps} onClick={onRetry}>{retryButtonProps?.children ?? locale.retry}</Button>} {...alertProps}>{error}</Alert>;
+  if (empty) return <EmptyState compact title={emptyTitle ?? locale.empty} description={emptyDescription} {...emptyStateProps} />;
   return <>{children}</>;
 }

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { cn, formatDate, formatTimeAgo } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface AuditEvent {
@@ -11,8 +12,11 @@ export interface AuditEvent {
 
 export interface AuditMetaProps {
   events: AuditEvent[];
+  /** La langue des dates. Par défaut, celle de la locale SIA. */
   locale?: string;
+  /** Par défaut, « Historique » de la locale SIA. */
   title?: ReactNode;
+  /** Par défaut, « Aucune activité » de la locale SIA. */
   emptyLabel?: ReactNode;
   className?: string;
 }
@@ -25,7 +29,13 @@ export interface AuditMetaProps {
  * veille. Les dates sont relatives — « il y a deux jours » se compare sans
  * calcul mental.
  */
-export function AuditMeta({ events, locale = "fr-FR", title = "Historique", emptyLabel = "Aucune activité", className }: AuditMetaProps) {
+export function AuditMeta({ events, locale: localeProp, title: titleProp, emptyLabel: emptyLabelProp, className }: AuditMetaProps) {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
+  const title = titleProp ?? messages.auditMeta.title;
+  const emptyLabel = emptyLabelProp ?? messages.auditMeta.empty;
+  // « par {name} » : l'auteur est un nœud React, le texte l'entoure.
+  const [avantAuteur = "", apresAuteur = ""] = messages.auditMeta.by.split("{name}");
   return (
     <section className={cn("sia-audit-meta", className)}>
       <h2 className="sia-audit-meta__title">{title}</h2>
@@ -37,7 +47,7 @@ export function AuditMeta({ events, locale = "fr-FR", title = "Historique", empt
             <li className="sia-audit-meta__event" key={`${new Date(event.at).getTime()}-${index}`}>
               <span className="sia-audit-meta__marker" aria-hidden="true" />
               <div className="sia-audit-meta__content">
-                <div className="sia-audit-meta__heading"><strong>{event.label}</strong>{event.by && <span>par {event.by}</span>}</div>
+                <div className="sia-audit-meta__heading"><strong>{event.label}</strong>{event.by && <span>{avantAuteur}{event.by}{apresAuteur}</span>}</div>
                 {event.detail && <div className="sia-audit-meta__detail">{event.detail}</div>}
                 <time className="sia-audit-meta__time" dateTime={new Date(event.at).toISOString()} title={formatDate(event.at, { locale, dateStyle: "full", timeStyle: "short" })}>
                   {formatTimeAgo(event.at, { locale })}