@sia-ui/cli 0.3.2 → 0.5.0

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

@@ -1,19 +1,58 @@
-.sia-pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
+/* ── Disposition ──────────────────────────────────────────────────────────
+   Deux groupes : la navigation à gauche, les réglages à droite. Chacun passe
+   à la ligne d'un seul tenant — jamais un libellé séparé de son champ. Tout
+   partage une hauteur, `--sia-pagination-size`, pour que boutons, liste et
+   champ s'alignent au pixel. */
+.sia-pagination {
+  --sia-pagination-size: 2.25rem;
+  container: sia-pagination / inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem 1.5rem;
+  width: 100%;
+}
+
+.sia-pagination__pages {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .3rem;
+  min-width: 0;
+}
+
+.sia-pagination__settings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: .5rem 1.25rem;
+  margin-left: auto;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  white-space: nowrap;
+}
+
+/* ── Boutons de page ──────────────────────────────────────────────────── */
 
-.sia-pagination button {
+.sia-pagination__step,
+.sia-pagination__page {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .35rem;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
+  min-width: var(--sia-pagination-size);
+  height: var(--sia-pagination-size);
   padding: 0 .65rem;
   border: 1px solid var(--sia-border);
   border-radius: var(--sia-radius);
   color: var(--sia-foreground);
   background: var(--sia-background);
   font: inherit;
+  font-size: .875rem;
   font-variant-numeric: tabular-nums;
+  line-height: 1;
   cursor: pointer;
   transition:
     background-color var(--sia-duration-fast) var(--sia-easing-standard),
@@ -21,15 +60,24 @@
     color var(--sia-duration-fast) var(--sia-easing-standard),
     transform var(--sia-duration-instant) var(--sia-easing-standard);
 }
-.sia-pagination button:hover:not(:disabled) { background: var(--sia-surface); }
-.sia-pagination button:active:not(:disabled) { transform: scale(.94); }
-.sia-pagination button:disabled { cursor: not-allowed; opacity: .5; }
-.sia-pagination button:focus-visible {
+/* Le survol ne touche pas la page courante. Écrit `button:hover`, il passait
+   devant `[aria-current]` par spécificité : fond clair sous un chiffre resté
+   blanc, donc illisible. */
+.sia-pagination__step:hover:not(:disabled),
+.sia-pagination__page:hover:not([aria-current="page"]) {
+  border-color: var(--sia-border-strong);
+  background: var(--sia-surface);
+}
+.sia-pagination__step:active:not(:disabled),
+.sia-pagination__page:active { transform: scale(.94); }
+.sia-pagination__step:disabled { cursor: not-allowed; opacity: .5; }
+.sia-pagination__step:focus-visible,
+.sia-pagination__page:focus-visible {
   outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
   outline-offset: 2px;
 }
 
-.sia-pagination button[aria-current="page"] {
+.sia-pagination__page[aria-current="page"] {
   color: var(--sia-primary-foreground);
   border-color: var(--sia-primary);
   background: var(--sia-primary);
@@ -38,6 +86,14 @@
      le seul changement de couleur se remarque mal. */
   animation: sia-pagination-current var(--sia-duration-base) var(--sia-easing-spring);
 }
+/* La page courante garde sa couleur au survol, un ton plus sombre pour dire
+   qu'elle reste un bouton. */
+.sia-pagination__page[aria-current="page"]:hover {
+  color: var(--sia-primary-foreground);
+  border-color: color-mix(in srgb, var(--sia-primary) 85%, var(--sia-foreground));
+  background: color-mix(in srgb, var(--sia-primary) 85%, var(--sia-foreground));
+}
+
 @keyframes sia-pagination-current {
   0% { transform: scale(.85); }
   60% { transform: scale(1.06); }
@@ -45,49 +101,64 @@
 }
 
 .sia-pagination__step svg { flex: none; font-size: .9em; }
-.sia-pagination__gap { padding: 0 .25rem; color: var(--sia-muted); }
+.sia-pagination__gap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: var(--sia-pagination-size);
+  color: var(--sia-muted);
+}
 
 .sia-pagination--compact .sia-pagination__step { padding: 0 .5rem; }
 
-@media (max-width: 480px) {
-  /* Sur un écran étroit, seuls les pas et la page courante tiennent. */
-  .sia-pagination__step span { display: none; }
-}
+/* ── Réglages ─────────────────────────────────────────────────────────────
+   Libellé discret à gauche, contrôle à droite, même hauteur que les boutons.
+   Taille de page et saut direct sont habillés à l'identique. */
 
-/* ── Saut direct ───────────────────────────────────────────────────────── */
-
-.sia-pagination__total {
-  margin-left: .5rem;
-  color: var(--sia-muted);
-  font-size: .8rem;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
+.sia-pagination__total { font-variant-numeric: tabular-nums; }
 
+.sia-pagination__size,
 .sia-pagination__jump {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: .4rem;
-  margin-left: .5rem;
-  color: var(--sia-muted);
-  font-size: .8rem;
-  white-space: nowrap;
+  gap: .5rem;
 }
 .sia-pagination__jump label { cursor: pointer; }
 
+.sia-pagination__size .sia-select__trigger,
 .sia-pagination__jump input {
-  width: 3.25rem;
-  min-height: 2.25rem;
-  padding: 0 .5rem;
+  height: var(--sia-pagination-size);
   border: 1px solid var(--sia-border);
   border-radius: var(--sia-radius);
-  background: var(--sia-background);
   color: var(--sia-foreground);
+  background: var(--sia-background);
   font: inherit;
+  font-size: .875rem;
   font-variant-numeric: tabular-nums;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/* Le Select logé prend l'allure d'un champ de la barre. */
+.sia-pagination__size .sia-select__trigger {
+  min-height: 0;
+  min-width: 4.25rem;
+  padding: 0 .5rem 0 .7rem;
+  justify-content: space-between;
+}
+.sia-pagination__size .sia-select__trigger:hover:not(:disabled) {
+  border-color: var(--sia-border-strong);
+  background: var(--sia-surface);
+}
+
+.sia-pagination__jump input {
+  width: 3.25rem;
+  padding: 0 .5rem;
   text-align: center;
-  transition: border-color var(--sia-duration-fast) var(--sia-easing-standard);
 }
+.sia-pagination__jump input:hover { border-color: var(--sia-border-strong); }
 .sia-pagination__jump input:focus-visible {
   border-color: var(--sia-primary);
   outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
@@ -96,8 +167,32 @@
 
 .sia-pagination__jump-total { font-variant-numeric: tabular-nums; }
 
-@media (max-width: 480px) {
-  /* Le saut direct vaut mieux que la liste des numéros sur un écran étroit :
-     il passe à la ligne entier plutôt que d'être tronqué. */
-  .sia-pagination__jump { width: 100%; margin-left: 0; justify-content: flex-end; }
+/* ── Largeur disponible ───────────────────────────────────────────────────
+   Réglé sur la largeur de la barre, pas de l'écran : une pagination posée
+   dans une carte étroite se replie comme sur un téléphone.
+
+   Sous 52rem, les deux groupes ne tiennent plus côte à côte : les réglages
+   prennent leur propre ligne, pleine largeur : le total à gauche, sous la
+   navigation, les contrôles groupés à droite. */
+@container sia-pagination (max-width: 52rem) {
+  .sia-pagination__settings {
+    justify-content: flex-end;
+    width: 100%;
+    margin-left: 0;
+  }
+  /* L'information à gauche, les contrôles groupés à droite. */
+  .sia-pagination__total { margin-right: auto; }
+}
+
+/* Sous 34rem, tout se centre : la navigation sur sa ligne, les réglages sur
+   les suivantes, sans élément isolé contre un bord. */
+@container sia-pagination (max-width: 34rem) {
+  .sia-pagination__pages { justify-content: center; width: 100%; }
+  .sia-pagination__settings { justify-content: center; column-gap: 1.5rem; }
+  .sia-pagination__total { margin-right: 0; }
+}
+
+/* Sous 26rem, les libellés des flèches tombent ; les flèches restent. */
+@container sia-pagination (max-width: 26rem) {
+  .sia-pagination__step span { display: none; }
 }

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

@@ -2,6 +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 "./styles.css";
 
 export interface PhoneCountry {
@@ -128,6 +129,18 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       ? value.slice(country.dial.length)
       : 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],
+    );
+
     const commit = (next: string) => {
       if (!controlled) setInternal(next);
       onValueChange?.(next);
@@ -150,36 +163,40 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
           commit(next ? `${country.dial}${next}` : "");
         }}
         left={
-          <span className="sia-phone__country">
-            <span className="sia-phone__flag" aria-hidden="true">
-              {country.flag}
+          lockCountry ? (
+            <span className="sia-phone__country">
+              <span className="sia-phone__flag" aria-hidden="true">
+                {country.flag}
+              </span>
+              <span className="sia-phone__dial">{country.dial}</span>
             </span>
-            <span className="sia-phone__dial">{country.dial}</span>
-            {!lockCountry && (
-              <select
-                className="sia-phone__select"
-                aria-label={locale.countryCode}
-                value={country.code}
-                disabled={disabled}
-                onChange={(event) => {
-                  const next = countries.find(
-                    (entry) => entry.code === event.target.value,
-                  );
-                  if (!next) return;
-                  setPicked(next.code);
-                  // Le numéro national suit le changement d'indicatif : il
-                  // est rare mais courant de corriger le pays après coup.
-                  commit(national ? `${next.dial}${national}` : "");
-                }}
-              >
-                {countries.map((entry) => (
-                  <option key={entry.code} value={entry.code}>
-                    {entry.flag} {entry.label} ({entry.dial})
-                  </option>
-                ))}
-              </select>
-            )}
-          </span>
+          ) : (
+            <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">
+                    {country.flag}
+                  </span>
+                  <span className="sia-phone__dial">{country.dial}</span>
+                </span>
+              )}
+              onValueChange={(code) => {
+                const next = countries.find((entry) => entry.code === code);
+                if (!next) return;
+                setPicked(next.code);
+                // Le numéro national suit le changement d'indicatif : il est
+                // rare mais courant de corriger le pays après coup.
+                commit(national ? `${next.dial}${national}` : "");
+              }}
+            />
+          )
         }
       />
     );

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

@@ -1,35 +1,21 @@
 .sia-phone__field { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
 
+/* L'indicatif, séparé du numéro par un filet. Choisi dans le `Select` du
+   système, en variante logée : même panneau, même recherche, même clavier
+   que partout ailleurs — là où le `<select>` natif n'offrait ni recherche ni
+   le thème. */
 .sia-phone__country {
-  position: relative;
   display: inline-flex;
   align-items: center;
   gap: .3rem;
-  padding-right: .6rem;
+  padding-right: .35rem;
   border-right: 1px solid var(--sia-border);
   color: var(--sia-foreground);
   font-size: .85rem;
   white-space: nowrap;
-  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
-  border-radius: var(--sia-radius) 0 0 var(--sia-radius);
 }
-.sia-phone__country:hover { background: var(--sia-surface); }
+.sia-phone__country .sia-select__trigger { align-self: stretch; }
 
+.sia-phone__value { display: inline-flex; align-items: center; gap: .3rem; }
 .sia-phone__flag { font-size: 1.05rem; line-height: 1; }
 .sia-phone__dial { color: var(--sia-muted); font-variant-numeric: tabular-nums; }
-
-/* Le `select` natif recouvre l'affichage : il ouvre la liste du système, qui
-   est la seule à fonctionner correctement sur mobile — un menu réimplémenté
-   se retrouve sous le clavier virtuel. */
-.sia-phone__select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-  appearance: none;
-}
-.sia-phone__select:disabled { cursor: not-allowed; }
-.sia-phone__select:focus-visible + * { outline: 2px solid var(--sia-primary); }

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/Sidebar/index.tsx

@@ -358,7 +358,8 @@ function Ligne({
   aDesEnfants: boolean;
 }) {
   const porteUnePastille =
-    collapsed && navSome(item, (e) => e.badge !== undefined && e.badge !== null);
+    collapsed &&
+    navSome(item, (e) => e.badge !== undefined && e.badge !== null);
 
   return (
     <>
@@ -370,7 +371,16 @@ function Ligne({
       <span className="sia-sidebar__label">{item.label}</span>
 
       {item.badge !== undefined && !collapsed && (
-        <span className="sia-sidebar__badge">{item.badge}</span>
+        <span
+          className="sia-sidebar__badge"
+          data-sia-badge={
+            typeof item.badge === "string" || typeof item.badge === "number"
+              ? String(item.badge)
+              : undefined
+          }
+        >
+          {item.badge}
+        </span>
       )}
 
       {/* Le compte exact ne tient pas sur un rail : il devient un point, et se
@@ -571,7 +581,17 @@ function NoeudRail(props: NoeudProps) {
           <div className="sia-sidebar-flyout__title">
             {item.label}
             {item.badge !== undefined && (
-              <span className="sia-sidebar__badge">{item.badge}</span>
+              <span
+                className="sia-sidebar__badge"
+                data-sia-badge={
+                  typeof item.badge === "string" ||
+                  typeof item.badge === "number"
+                    ? String(item.badge)
+                    : undefined
+                }
+              >
+                {item.badge}
+              </span>
             )}
           </div>
 

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

@@ -8,7 +8,7 @@
   font-size: .875rem;
 }
 
-.sia-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: .125rem; align-content: start; }
+.sia-sidebar__body { flex:1; min-height:0; padding-inline-end:.375rem; overflow-y:auto; display:grid; gap:.125rem; align-content:start; scrollbar-gutter:stable; }
 /* Rognés plutôt que débordants : en mode rail, un en-tête ou un pied qui
    n'a pas été adapté déborderait sur le contenu. Le `data-collapsed` posé
    par `AppShell` permet de l'adapter; ceci garantit que ne pas l'adapter
@@ -130,17 +130,7 @@
   padding-block: .375rem;
   font-size: .825rem;
 }
-/* Le filet qui relie les sous-entrées à leur parent. */
 .sia-sidebar__sub { position: relative; }
-.sia-sidebar__sub::before {
-  content: "";
-  position: absolute;
-  top: .375rem;
-  bottom: .375rem;
-  left: 1.25rem;
-  width: 1px;
-  background: var(--sia-border);
-}
 
 /* ── Mode réduit ───────────────────────────────────────────────────────── */
 
@@ -197,8 +187,6 @@
   font-weight: 650;
 }
 .sia-sidebar-flyout__body { display: grid; gap: .125rem; }
-/* Dans le volet, le filet vertical du parent n'a plus de parent à relier. */
-.sia-sidebar-flyout .sia-sidebar__sub::before { display: none; }
 .sia-sidebar-flyout .sia-sidebar__item--child { padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .6rem); }
 
 /* ── Variantes ─────────────────────────────────────────────────────────── */

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>; }

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

@@ -63,9 +63,10 @@
   --sia-toggle-color: var(--sia-primary);
   display: inline-flex;
   padding: .2rem;
-  border: 1px solid var(--sia-border);
+  border: 1px solid color-mix(in srgb, var(--sia-muted) 28%, var(--sia-border));
   border-radius: calc(var(--sia-radius) + 2px);
-  background: var(--sia-surface);
+  background: color-mix(in srgb, var(--sia-muted) 12%, var(--sia-background));
+  box-shadow: inset 0 1px 2px rgb(15 23 42 / .05);
 }
 
 .sia-toggle-group__item {

package/dist/registry/package/lib/form-adapter-rhf.tsx

@@ -22,11 +22,21 @@ import {
   type UseFormProps,
   type UseFormReturn,
 } from "react-hook-form";
-import type { FieldBindOptions, FieldBinding, FormAdapter, FormErrors, FormState } from "@sia-ui/headless";
+import {
+  hasFormErrors,
+  type FieldBindOptions,
+  type FieldBinding,
+  type FormAdapter,
+  type FormErrors,
+  type FormState,
+  type FormSubmitResult,
+} from "@sia-ui/headless";
 
 export interface RhfAdapterOptions<TValues extends FieldValues>
   extends UseFormProps<TValues> {
-  onSubmit?: (values: TValues) => void | Promise<void>;
+  onSubmit?: (
+    values: TValues,
+  ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
 }
 
 export interface RhfAdapter<TValues extends FieldValues>
@@ -94,6 +104,12 @@ export function useRhfFormAdapter<TValues extends FieldValues>(
     [formOptions.mode, formState.errors, setValue, trigger, watch],
   );
 
+  const poserErreurs = (next: FormErrors<TValues>) => {
+    for (const [key, message] of Object.entries(next)) {
+      if (message) setError(key as Path<TValues>, { message: String(message) });
+    }
+  };
+
   const state: FormState<TValues> = {
     values: values as TValues,
     errors,
@@ -123,17 +139,14 @@ export function useRhfFormAdapter<TValues extends FieldValues>(
       if (message) setError(name as Path<TValues>, { message });
       else clearErrors(name as Path<TValues>);
     },
-    // Ce que rend `HttpError.fields` de `@sia-ui/api` entre directement ici :
-    // les erreurs du serveur se posent sous les champs, pas dans un bandeau.
-    setErrors: (next) => {
-      for (const [key, message] of Object.entries(next)) {
-        if (message) setError(key as Path<TValues>, { message: String(message) });
-      }
-    },
+    // Ce que rend `HttpError.toFormErrors()` de `@sia-ui/api` entre directement
+    // ici : les erreurs du serveur se posent sous les champs, pas dans un bandeau.
+    setErrors: poserErreurs,
     reset: (next) => reset(next as TValues | undefined),
     submit: async () => {
       await handleSubmit(async (formValues) => {
-        await onSubmit?.(formValues);
+        const result = await onSubmit?.(formValues);
+        if (hasFormErrors(result)) poserErreurs(result);
       })();
     },
     validate: () => trigger(),