@sia-ui/cli 0.4.0 → 0.6.0

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

@@ -29,7 +29,7 @@ import type { SelectOption } from "../Select";
 import type { FormEntry, FormFieldConfig, FormShape } from "../Form";
 import type { ColumnCardRole, DataTableColumn } from "../DataTable/types";
 import { AmountDisplay } from "../AmountDisplay";
-import { Badge } from "../Badge";
+import { Badge, toneOf } from "../Badge";
 
 /**
  * Une propriété d'une ressource.
@@ -40,6 +40,9 @@ import { Badge } from "../Badge";
  * même client finissent toujours par diverger, et c'est le formulaire qui
  * oublie le champ que le tableau affiche.
  */
+/** Le formulaire ouvert : une création, ou la modification d'une ligne. */
+export type ResourceFormMode = "create" | "edit";
+
 export interface ResourceField<T = unknown> {
   /** Le contrôle de saisie et le rendu par défaut. `text` sans précision. */
   type?: FieldType;
@@ -49,7 +52,13 @@ export interface ResourceField<T = unknown> {
   helpText?: ReactNode;
   placeholder?: string;
 
-  required?: boolean;
+  /**
+   * Obligatoire toujours, ou dans un seul mode.
+   *
+   * `"create"` sert au mot de passe initial : exigé à la création, facultatif
+   * ensuite — le laisser vide en modification veut dire « inchangé ».
+   */
+  required?: boolean | ResourceFormMode;
   /** Les règles en plus de `required`. Celles du type sont ajoutées seules. */
   rules?: Array<Rule<never>>;
 
@@ -71,8 +80,11 @@ export interface ResourceField<T = unknown> {
 
   /** Par défaut, tout sauf les types trop longs pour une cellule. */
   inTable?: boolean;
-  /** Par défaut, tout sauf `readOnly`. */
-  inForm?: boolean;
+  /**
+   * Par défaut, tout sauf `readOnly` et les valeurs calculées. `"create"` ou
+   * `"edit"` limitent le champ à l'un des deux formulaires.
+   */
+  inForm?: boolean | ResourceFormMode;
   /** Par défaut, tout. */
   inDetail?: boolean;
   /** Par défaut, les types textuels. */
@@ -105,6 +117,16 @@ export interface ResourceField<T = unknown> {
 
   /** Le rendu en tableau et en détail. Écrase celui déduit du type. */
   render?: (row: T, index: number) => ReactNode;
+
+  /**
+   * Une valeur calculée plutôt que lue sur la ligne.
+   *
+   * La colonne peut alors porter une clé qui n'est pas une propriété de `T`
+   * — un nom complet, un solde — sans élargir le type de la ligne. Le rendu
+   * par défaut, la carte et la recherche locale passent par elle. Une valeur
+   * calculée ne se saisit pas : elle sort du formulaire, sauf `inForm`.
+   */
+  value?: (row: T) => unknown;
 }
 
 export interface ResourceDefinition<T> {
@@ -221,13 +243,29 @@ function libelleParDefaut(cle: string): string {
   return mots.charAt(0).toUpperCase() + mots.slice(1);
 }
 
-function estVisible(champ: ResourceField<never>, ou: "table" | "form" | "detail") {
+function estVisible(
+  champ: ResourceField<never>,
+  ou: "table" | "form" | "detail",
+  mode: ResourceFormMode = "create",
+) {
   const type = champ.type ?? "text";
   if (ou === "table") return champ.inTable ?? !HORS_TABLEAU.has(type);
-  if (ou === "form") return champ.inForm ?? !champ.readOnly;
+  if (ou === "form") {
+    const inForm = champ.inForm ?? (!champ.readOnly && !champ.value);
+    return typeof inForm === "string" ? inForm === mode : inForm;
+  }
   return champ.inDetail ?? true;
 }
 
+function estRequis(champ: ResourceField<never>, mode: ResourceFormMode) {
+  return champ.required === true || champ.required === mode;
+}
+
+/** Comment lire la valeur d'une propriété : calculée, ou sur la ligne. */
+function lecteur<T>(cle: string, champ: ResourceField<T>): (row: T) => unknown {
+  return champ.value ?? ((row) => (row as Record<string, unknown>)[cle]);
+}
+
 /** Les propriétés dans l'ordre de déclaration, avec leur clé. */
 function entrees<T>(resource: ResourceDefinition<T>) {
   return Object.entries(resource.fields) as Array<[string, ResourceField<T>]>;
@@ -247,10 +285,11 @@ function renduParDefaut<T>(
   champ: ResourceField<T>,
 ): ((row: T, index: number) => ReactNode) | undefined {
   const type = champ.type ?? "text";
+  const lire = lecteur(cle, champ);
 
   if (type === "currency") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "number") return null;
       return (
         <AmountDisplay
@@ -263,23 +302,28 @@ function renduParDefaut<T>(
 
   if (type === "select" || type === "radio") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (valeur === null || valeur === undefined || valeur === "") return null;
       const brut = String(valeur);
       const option = champ.options?.find((o) => o.value === brut);
       const libelle = option?.label ?? brut;
-      const ton = champ.tones?.[brut];
-      return ton ? <Badge tone={ton}>{libelle}</Badge> : <>{libelle}</>;
+      // Sans ton déclaré pour cette valeur, un mot plutôt qu'une pastille
+      // neutre : la colonne n'a pas demandé à être lue comme un statut.
+      return champ.tones?.[brut] ? (
+        <Badge tone={toneOf(champ.tones, brut)}>{libelle}</Badge>
+      ) : (
+        <>{libelle}</>
+      );
     };
   }
 
   if (type === "checkbox" || type === "switch") {
-    return (row) => ((row as Record<string, unknown>)[cle] ? "Oui" : "Non");
+    return (row) => (lire(row) ? "Oui" : "Non");
   }
 
   if (type === "date" || type === "datetime") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "string" && !(valeur instanceof Date)) return null;
       return type === "date" ? formatDate(valeur) : formatDateTime(valeur);
     };
@@ -287,7 +331,7 @@ function renduParDefaut<T>(
 
   if (type === "number") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "number") return null;
       return formatNumber(valeur, {
         ...(champ.decimals !== undefined
@@ -302,7 +346,7 @@ function renduParDefaut<T>(
 
   if (type === "multiselect" || type === "tags") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (!Array.isArray(valeur)) return null;
       return valeur
         .map((v) => {
@@ -345,6 +389,7 @@ export function resourceColumns<T>(
     colonnes.push({
       key: cle,
       header: champ.label ?? libelleParDefaut(cle),
+      ...(champ.value ? { accessor: champ.value } : {}),
       ...(rendu ? { cell: rendu } : {}),
       align: champ.align ?? (NUMERIQUES.has(type) ? "end" : "start"),
       ...(champ.width ? { width: champ.width } : {}),
@@ -376,6 +421,7 @@ export function resourceDetailColumns<T>(
     lignes.push({
       key: cle,
       header: champ.label ?? libelleParDefaut(cle),
+      ...(champ.value ? { accessor: champ.value } : {}),
       ...(rendu ? { cell: rendu } : {}),
     });
   }
@@ -386,18 +432,19 @@ export function resourceDetailColumns<T>(
 /** Les champs du formulaire, groupés si la déclaration les groupe. */
 export function resourceFormFields<T>(
   resource: ResourceDefinition<T>,
+  mode: ResourceFormMode = "create",
 ): FormEntry[] {
   const libres: FormFieldConfig[] = [];
   const groupes = new Map<string, FormFieldConfig[]>();
 
   for (const [cle, champ] of entrees(resource)) {
-    if (!estVisible(champ as ResourceField<never>, "form")) continue;
+    if (!estVisible(champ as ResourceField<never>, "form", mode)) continue;
 
     const config: FormFieldConfig = {
       name: cle,
       label: champ.label ?? libelleParDefaut(cle),
       ...(champ.type ? { type: champ.type } : {}),
-      ...(champ.required ? { required: champ.required } : {}),
+      ...(estRequis(champ as ResourceField<never>, mode) ? { required: true } : {}),
       ...(champ.placeholder ? { placeholder: champ.placeholder } : {}),
       ...(champ.helpText ? { helpText: champ.helpText } : {}),
       ...(champ.description ? { description: champ.description } : {}),
@@ -428,14 +475,17 @@ export function resourceFormFields<T>(
  */
 export function resourceValidator<T>(
   resource: ResourceDefinition<T>,
+  mode: ResourceFormMode = "create",
 ): FormValidator<FormShape> | undefined {
   const schema: Record<string, Array<Rule<never>>> = {};
 
   for (const [cle, champ] of entrees(resource)) {
-    if (!estVisible(champ as ResourceField<never>, "form")) continue;
+    if (!estVisible(champ as ResourceField<never>, "form", mode)) continue;
 
     const regles: Array<Rule<never>> = [];
-    if (champ.required) regles.push(regleRequise() as Rule<never>);
+    if (estRequis(champ as ResourceField<never>, mode)) {
+      regles.push(regleRequise() as Rule<never>);
+    }
 
     const duType = REGLE_DU_TYPE[champ.type ?? "text"];
     if (duType) regles.push(duType());
@@ -459,7 +509,7 @@ export function resourceSearchKeys<T>(
     .map(([cle]) => cle);
 }
 
-/** Les valeurs de départ d'une création. */
+/** Les valeurs de départ d'une création : les champs du mode `create`. */
 export function resourceDefaults<T>(resource: ResourceDefinition<T>): FormShape {
   const valeurs: FormShape = {};
   for (const [cle, champ] of entrees(resource)) {

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

@@ -0,0 +1,193 @@
+import { useId, useMemo, useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { Input } from "../Input";
+import { PasswordInput } from "../PasswordInput";
+import { PlusIcon, TrashIcon } from "../Icons";
+import "./styles.css";
+
+/** Une paire nom / valeur. La valeur n'est jamais relue du serveur. */
+export interface SecretEntry {
+  key: string;
+  value: string;
+}
+
+export interface SecretFieldsProps {
+  value?: SecretEntry[];
+  defaultValue?: SecretEntry[];
+  onValueChange?: (entries: SecretEntry[]) => void;
+  /**
+   * Les noms déjà enregistrés côté serveur.
+   *
+   * Affichés, mais leur valeur reste vide : un secret ne revient jamais au
+   * navigateur. Une valeur laissée vide sur l'un d'eux veut dire « inchangé » ;
+   * en saisir une, c'est le remplacer — une rotation.
+   */
+  storedKeys?: string[];
+  /** Des noms proposés d'un clic : `DATABASE_URL`, `API_KEY`… */
+  templates?: string[];
+  /** La forme d'un nom valide. Par défaut, aucune contrainte. */
+  keyPattern?: RegExp;
+  keyPatternMessage?: string;
+  keyLabel?: string;
+  valueLabel?: string;
+  addLabel?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Les valeurs effacées, les noms gardés — ce qu'on affiche après l'envoi. */
+export function clearSecretValues(entries: SecretEntry[]): SecretEntry[] {
+  return entries.map((entry) => ({ ...entry, value: "" }));
+}
+
+/**
+ * Des secrets en écriture seule : les noms se lisent, les valeurs jamais.
+ *
+ * Chaque ligne est un nom et une valeur masquée. Les noms déjà enregistrés
+ * s'affichent sans leur valeur — le serveur ne la renvoie pas, et ne doit pas
+ * la renvoyer. Les champs refusent l'autocomplétion du navigateur, qui
+ * proposerait sinon le mot de passe du compte à la place d'une clé d'API.
+ *
+ * Après l'envoi, `clearSecretValues` vide les valeurs : un secret ne reste pas
+ * affiché dans un formulaire ouvert.
+ */
+export function SecretFields({
+  value,
+  defaultValue,
+  onValueChange,
+  storedKeys = [],
+  templates = [],
+  keyPattern,
+  keyPatternMessage = "Nom invalide",
+  keyLabel = "Nom",
+  valueLabel = "Valeur",
+  addLabel = "Ajouter un secret",
+  disabled = false,
+  className,
+}: SecretFieldsProps) {
+  const id = useId();
+  const [interne, setInterne] = useState<SecretEntry[]>(
+    () => defaultValue ?? storedKeys.map((key) => ({ key, value: "" })),
+  );
+  const lignes = value ?? interne;
+  const enregistres = useMemo(() => new Set(storedKeys), [storedKeys]);
+
+  const changer = (suivantes: SecretEntry[]) => {
+    if (value === undefined) setInterne(suivantes);
+    onValueChange?.(suivantes);
+  };
+
+  /** Un doublon ou un nom mal formé, ligne par ligne. */
+  const erreurs = useMemo(() => {
+    const vus = new Map<string, number>();
+    for (const ligne of lignes) {
+      const nom = ligne.key.trim();
+      if (nom) vus.set(nom, (vus.get(nom) ?? 0) + 1);
+    }
+    return lignes.map((ligne) => {
+      const nom = ligne.key.trim();
+      if (!nom) return undefined;
+      if ((vus.get(nom) ?? 0) > 1) return "Ce nom est déjà utilisé";
+      if (keyPattern && !keyPattern.test(nom)) return keyPatternMessage;
+      return undefined;
+    });
+  }, [keyPattern, keyPatternMessage, lignes]);
+
+  const presents = new Set(lignes.map((ligne) => ligne.key.trim()));
+  const proposes = templates.filter((nom) => !presents.has(nom));
+
+  const modifier = (index: number, patch: Partial<SecretEntry>) =>
+    changer(lignes.map((ligne, i) => (i === index ? { ...ligne, ...patch } : ligne)));
+
+  return (
+    <div className={cn("sia-secrets", className)}>
+      {lignes.length > 0 && (
+        <div className="sia-secrets__head" aria-hidden="true">
+          <span>{keyLabel}</span>
+          <span>{valueLabel}</span>
+        </div>
+      )}
+
+      {lignes.map((ligne, index) => {
+        const erreur = erreurs[index];
+        const garde = enregistres.has(ligne.key.trim());
+        const idErreur = `${id}-erreur-${index}`;
+
+        return (
+          <div className="sia-secrets__row" key={index}>
+            <div className="sia-secrets__key">
+              <Input
+                value={ligne.key}
+                aria-label={`${keyLabel} ${index + 1}`}
+                placeholder="NOM_DU_SECRET"
+                autoComplete="off"
+                spellCheck={false}
+                disabled={disabled}
+                invalid={Boolean(erreur)}
+                {...(erreur ? { "aria-describedby": idErreur } : {})}
+                onChange={(event) => modifier(index, { key: event.target.value })}
+              />
+              {erreur && (
+                <span id={idErreur} className="sia-secrets__error" role="alert">
+                  {erreur}
+                </span>
+              )}
+            </div>
+
+            <PasswordInput
+              value={ligne.value}
+              aria-label={`${valueLabel} ${ligne.key || index + 1}`}
+              placeholder={garde ? "Inchangée si vide" : "Valeur"}
+              // `new-password` : le seul réglage que les navigateurs
+              // respectent pour ne pas proposer un mot de passe enregistré.
+              autoComplete="new-password"
+              spellCheck={false}
+              disabled={disabled}
+              onChange={(event) => modifier(index, { value: event.target.value })}
+            />
+
+            <IconButton
+              label={`Retirer ${ligne.key || "la ligne"}`}
+              icon={<TrashIcon />}
+              variant="ghost"
+              disabled={disabled}
+              onClick={() => changer(lignes.filter((_, i) => i !== index))}
+            />
+          </div>
+        );
+      })}
+
+      <div className="sia-secrets__footer">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+          leftIcon={<PlusIcon />}
+          onClick={() => changer([...lignes, { key: "", value: "" }])}
+        >
+          {addLabel}
+        </Button>
+
+        {proposes.length > 0 && (
+          <div className="sia-secrets__templates">
+            {proposes.map((nom) => (
+              <button
+                key={nom}
+                type="button"
+                className="sia-secrets__template"
+                disabled={disabled}
+                onClick={() => changer([...lignes, { key: nom, value: "" }])}
+              >
+                <PlusIcon aria-hidden="true" />
+                {nom}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+/* Trois colonnes alignées sur toutes les lignes : nom, valeur, retrait. Le
+   nom est en chasse fixe — MAJUSCULES_ET_SOULIGNÉS se relisent mieux, et une
+   faute de frappe s'y voit. */
+.sia-secrets {
+  container: sia-secrets / inline-size;
+  display: grid;
+  gap: .5rem;
+}
+
+.sia-secrets__head,
+.sia-secrets__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 2.5rem;
+  align-items: start;
+  gap: .5rem;
+}
+
+.sia-secrets__head {
+  color: var(--sia-muted);
+  font-size: .75rem;
+  font-weight: 600;
+  letter-spacing: .02em;
+}
+
+.sia-secrets__key { display: grid; gap: .25rem; min-width: 0; }
+.sia-secrets__key input {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: .85rem;
+}
+.sia-secrets__error { color: var(--sia-danger); font-size: .78rem; }
+
+/* Le bouton de retrait a la hauteur d'un champ, pour tomber en face. */
+.sia-secrets__row > .sia-icon-button { width: 2.5rem; height: 2.5rem; }
+
+.sia-secrets__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem .75rem;
+  margin-top: .25rem;
+}
+
+.sia-secrets__templates { display: flex; flex-wrap: wrap; gap: .375rem; }
+.sia-secrets__template {
+  display: inline-flex;
+  align-items: center;
+  gap: .3rem;
+  height: 1.75rem;
+  padding: 0 .6rem;
+  border: 1px dashed var(--sia-border-strong);
+  border-radius: var(--sia-radius-full);
+  color: var(--sia-muted);
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: .75rem;
+  cursor: pointer;
+  transition:
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-secrets__template:hover:not(:disabled) {
+  border-color: var(--sia-primary);
+  color: var(--sia-primary);
+  background: color-mix(in srgb, var(--sia-primary) 6%, transparent);
+}
+.sia-secrets__template:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 2px;
+}
+.sia-secrets__template:disabled { cursor: not-allowed; opacity: .5; }
+
+/* Étroit : le nom au-dessus, la valeur et le retrait en dessous. Chaque
+   ligne se sépare de la suivante par un filet, sans quoi les paires se
+   confondent. */
+@container sia-secrets (max-width: 30rem) {
+  .sia-secrets__head { display: none; }
+  .sia-secrets__row {
+    grid-template-columns: minmax(0, 1fr) 2.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 1px solid var(--sia-border);
+  }
+  .sia-secrets__key { grid-column: 1 / -1; }
+}

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

@@ -10,7 +10,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
-import { cn } from "@sia-ui/utils";
+import { cn, looseIncludes } from "@sia-ui/utils";
 import { Overlay, type OverlayPlacement } from "../Overlay";
 import { Spinner } from "../Spinner";
 import { ChevronDownIcon, SearchIcon, CheckIcon, XIcon } from "../Icons";
@@ -46,6 +46,19 @@ export interface SelectProps {
   invalid?: boolean;
   required?: boolean;
   placement?: OverlayPlacement;
+  /**
+   * Ce que montre le déclencheur. Par défaut, le libellé de l'option.
+   *
+   * La liste garde ses libellés complets — « 🇨🇲 Cameroun (+237) » — pendant
+   * que le champ fermé n'affiche que ce qui tient : « 🇨🇲 +237 ».
+   */
+  renderValue?: (option: SelectOption | undefined) => ReactNode;
+  /**
+   * `embedded` retire bordure, fond et largeur pleine du déclencheur : le
+   * `Select` se loge alors dans un autre contrôle — l'indicatif d'un
+   * `PhoneInput`, la taille de page d'une `Pagination`.
+   */
+  variant?: "default" | "embedded";
   className?: string;
   "aria-label"?: string;
   "aria-describedby"?: string;
@@ -71,8 +84,7 @@ function optionsFromChildren(children: ReactNode): SelectOption[] {
 function optionText(option: SelectOption) {
   return [option.label, option.description, ...(option.keywords ?? [])]
     .map((value) => (typeof value === "string" || typeof value === "number" ? String(value) : ""))
-    .join(" ")
-    .toLocaleLowerCase();
+    .join(" ");
 }
 
 /**
@@ -108,6 +120,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
     invalid = false,
     required = false,
     placement = "bottom-start",
+    renderValue,
+    variant = "default",
     className,
     "aria-invalid": ariaInvalid,
     "aria-required": ariaRequired,
@@ -136,9 +150,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const sourceOptions = fetcher ? remoteOptions : staticOptions;
   const visibleOptions = useMemo(() => {
     if (fetcher) return sourceOptions;
-    const needle = query.trim().toLocaleLowerCase();
+    // Accents et casse ignorés : « sen » trouve « Sénégal ».
+    const needle = query.trim();
     return needle
-      ? sourceOptions.filter((option) => optionText(option).includes(needle))
+      ? sourceOptions.filter((option) => looseIncludes(optionText(option), needle))
       : sourceOptions;
   }, [fetcher, query, sourceOptions]);
   const selectedOption = [...staticOptions, ...remoteOptions].find(
@@ -168,7 +183,11 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
 
   useEffect(() => {
     if (!open) return;
-    setActiveIndex(visibleOptions.findIndex((option) => option.value === currentValue));
+    // La valeur en vigueur si elle est dans la liste, la première option
+    // sinon : après une recherche qui l'écarte, Entrée doit choisir le premier
+    // résultat plutôt que ne rien faire.
+    const selected = visibleOptions.findIndex((option) => option.value === currentValue);
+    setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
 
@@ -234,7 +253,14 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : undefined;
 
   return (
-    <div className={cn("sia-select", disabled && "sia-select--disabled", className)}>
+    <div
+      className={cn(
+        "sia-select",
+        variant === "embedded" && "sia-select--embedded",
+        disabled && "sia-select--disabled",
+        className,
+      )}
+    >
       {name && <input type="hidden" name={name} value={currentValue} />}
       <button
         ref={setTriggerRef}
@@ -253,7 +279,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
         onKeyDown={handleKeyDown}
         {...ariaProps}
       >
-        <span className={cn("sia-select__value", !selectedOption && "sia-select__placeholder")}>{selectedOption?.label ?? placeholder}</span>
+        <span className={cn("sia-select__value", !selectedOption && "sia-select__placeholder")}>{renderValue ? renderValue(selectedOption) : (selectedOption?.label ?? placeholder)}</span>
         <span className="sia-select__actions">
           {clearable && currentValue && !disabled && (
             <span

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

@@ -56,3 +56,21 @@
   transform-origin: top center;
   box-shadow: var(--sia-elevation-overlay);
 }
+
+/* ── Logé dans un autre contrôle ───────────────────────────────────────────
+   Le déclencheur prend la largeur de son contenu et laisse bordure et fond au
+   contrôle hôte. Le panneau, lui, reste celui du Select : `matchAnchorWidth`
+   n'impose qu'une largeur minimale, il s'élargit à ses options. */
+.sia-select--embedded { width: auto; }
+.sia-select--embedded .sia-select__trigger {
+  width: auto;
+  min-height: 0;
+  gap: .35rem;
+  padding: 0 .35rem;
+  border-color: transparent;
+  background: transparent;
+}
+.sia-select--embedded .sia-select__trigger:hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--sia-surface);
+}

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

@@ -13,4 +13,4 @@ export function formatDuration(milliseconds: number, showMilliseconds = false) {
  * dixième de seconde redessine quarante fois par seconde pour un chiffre
  * que personne ne lit.
  */
-export function Timer({ duration = 60000, initialValue = 0, direction = "down", running = true, interval = 250, onChange, onFinish, format = formatDuration, className }: TimerProps) { const initial = direction === "down" ? duration : initialValue; const [value, setValue] = useState(initial); const finishCalled = useRef(false); useEffect(() => { setValue(direction === "down" ? duration : initialValue); finishCalled.current = false; }, [direction, duration, initialValue]); useEffect(() => { if (!running) return; const startedAt = Date.now(); const base = value; const update = () => { const elapsed = Date.now() - startedAt; const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed; setValue(next); onChange?.(next); if (direction === "down" && next === 0 && !finishCalled.current) { finishCalled.current = true; onFinish?.(); } }; update(); const id = window.setInterval(update, interval); return () => window.clearInterval(id); }, [running, direction, interval]); return <time className={cn("sia-timer", className)} aria-live="polite">{format(value)}</time>; }
+export function Timer({ duration = 60000, initialValue = 0, direction = "down", running = true, interval = 250, onChange, onFinish, format = formatDuration, className }: TimerProps) { const initial = direction === "down" ? duration : initialValue; const [value, setValue] = useState(initial); const finishCalled = useRef(false); /* Lus au démarrage et à chaque tic, sans relancer l'intervalle : la valeur de reprise et des rappels souvent écrits en ligne. */ const latest = useRef({ value, onChange, onFinish }); latest.current = { value, onChange, onFinish }; useEffect(() => { setValue(direction === "down" ? duration : initialValue); finishCalled.current = false; }, [direction, duration, initialValue]); useEffect(() => { if (!running) return; const startedAt = Date.now(); const base = latest.current.value; const update = () => { const elapsed = Date.now() - startedAt; const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed; setValue(next); latest.current.onChange?.(next); if (direction === "down" && next === 0 && !finishCalled.current) { finishCalled.current = true; latest.current.onFinish?.(); } }; update(); const id = window.setInterval(update, interval); return () => window.clearInterval(id); }, [running, direction, interval]); return <time className={cn("sia-timer", className)} aria-live="polite">{format(value)}</time>; }