@sia-ui/cli 0.7.1 → 0.8.0

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { useSiaLocale } from "@sia-ui/headless";
+import { plural, useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface FiltersBarProps {
@@ -10,6 +10,11 @@ export interface FiltersBarProps {
   activeCount?: number;
   onReset?: () => void;
   resetLabel?: string;
+  /**
+   * La largeur de chaque filtre — `12rem` par défaut. Les filtres se placent
+   * côte à côte à cette largeur, et passent à la ligne quand elle manque.
+   */
+  filterWidth?: string;
   className?: string;
 }
 
@@ -20,8 +25,8 @@ export interface FiltersBarProps {
  * une liste filtrée ressemble à une liste vide, et l'on cherche la panne
  * avant de penser au filtre posé la veille.
  */
-export function FiltersBar({ search, filters, actions, activeCount = 0, onReset, resetLabel: resetLabelProp, className }: FiltersBarProps) {
+export function FiltersBar({ search, filters, actions, activeCount = 0, onReset, resetLabel: resetLabelProp, filterWidth, className }: FiltersBarProps) {
     const locale = useSiaLocale();
     const resetLabel = resetLabelProp ?? locale.reset;
-  return <section className={cn("sia-filters-bar", className)} aria-label="Filtres"><div className="sia-filters-bar__main">{search && <div className="sia-filters-bar__search">{search}</div>}{filters && <div className="sia-filters-bar__filters">{filters}</div>}</div><div className="sia-filters-bar__actions">{activeCount > 0 && <span className="sia-filters-bar__count">{activeCount} actif{activeCount > 1 ? "s" : ""}</span>}{onReset && activeCount > 0 && <button type="button" className="sia-filters-bar__reset" onClick={onReset}>{resetLabel}</button>}{actions}</div></section>;
+  return <section className={cn("sia-filters-bar", className)} aria-label={locale.filtersBar.label} {...(filterWidth ? { style: { ["--sia-filter-width" as string]: filterWidth } } : {})}><div className="sia-filters-bar__main">{search && <div className="sia-filters-bar__search">{search}</div>}{filters && <div className="sia-filters-bar__filters">{filters}</div>}</div><div className="sia-filters-bar__actions">{activeCount > 0 && <span className="sia-filters-bar__count">{plural(locale.filtersBar, "active", activeCount, locale.language)}</span>}{onReset && activeCount > 0 && <button type="button" className="sia-filters-bar__reset" onClick={onReset}>{resetLabel}</button>}{actions}</div></section>;
 }

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

@@ -2,5 +2,12 @@
 .sia-filters-bar__main,.sia-filters-bar__filters,.sia-filters-bar__actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
 .sia-filters-bar__main { flex:1; min-width:min(100%,18rem); }
 .sia-filters-bar__search { flex:1; min-width:min(100%,16rem); }
+/* Les filtres occupent la place restante et s'y rangent en ligne : sans
+   cela le conteneur gardait la largeur de son contenu, et deux `Select` en
+   largeur pleine s'empilaient au lieu de s'aligner. Chaque filtre garde sa
+   largeur de base — une liste de 60rem pour trois options serait absurde —
+   et passe à la ligne quand la place manque. */
+.sia-filters-bar__filters { flex:1 1 auto; min-width:0; }
+.sia-filters-bar__filters > * { flex:0 1 var(--sia-filter-width,12rem); min-width:0; max-width:100%; }
 .sia-filters-bar__count { color:var(--sia-muted); font-size:.8rem; font-weight:650; }
 .sia-filters-bar__reset { border:0; color:var(--sia-primary); background:transparent; font:inherit; font-weight:650; cursor:pointer; }

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

@@ -2,16 +2,19 @@ import { useState, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import {
   readSubmitError,
+  useAsyncValidation,
   useLocalForm,
   useSiaLocale,
+  type AsyncFieldValidator,
   type FormAdapter,
   type FormErrors,
   type FormSubmitResult,
   type FormValidator,
 } from "@sia-ui/headless";
-import { Alert } from "../Alert";
+import { Alert, type AlertProps } from "../Alert";
 import { Button, type ButtonProps } from "../Button";
 import { Field, type FieldProps, type FieldValue } from "../Field";
+import { Spinner, type SpinnerProps } from "../Spinner";
 import "./styles.css";
 
 /** Un champ du formulaire : les props de `Field`, plus sa place. */
@@ -21,6 +24,17 @@ export interface FormFieldConfig extends Omit<FieldProps, "field" | "name"> {
   /** Nombre de colonnes occupées. Ignoré sur une seule colonne. */
   colSpan?: number;
   rowSpan?: number;
+  /**
+   * Une vérification qui demande le serveur — un identifiant libre, un nom
+   * de domaine disponible. Rend le message d'erreur, ou rien.
+   *
+   * Relancée après la frappe (`asyncValidationDelay`), annulée à la frappe
+   * suivante par son `signal`. Pendant la vérification le champ l'annonce,
+   * et l'envoi attend ; une valeur refusée bloque l'envoi.
+   */
+  validateAsync?: AsyncFieldValidator<FieldValue>;
+  /** Affiché sous le champ quand `validateAsync` accepte la valeur. */
+  validText?: ReactNode;
 }
 
 /** Un groupe de champs, avec son titre et sa propre grille. */
@@ -37,14 +51,14 @@ function isGroup(entry: FormEntry): entry is FormFieldGroup {
   return "group" in entry;
 }
 
+/** Les champs, groupes aplatis. */
+function champsAplatis(fields: FormEntry[]): FormFieldConfig[] {
+  return fields.flatMap((entree) => (isGroup(entree) ? entree.fields : [entree]));
+}
+
 /** Les noms de champs, groupes aplatis. */
 export function formFieldNames(fields: FormEntry[]): string[] {
-  const noms: string[] = [];
-  for (const entree of fields) {
-    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
+  return champsAplatis(fields).map((champ) => champ.name);
 }
 
 /**
@@ -80,10 +94,18 @@ export interface FormProps<TValues extends FormShape = FormShape> {
     values: TValues,
   ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
   columns?: number;
+  /** Le texte du bouton d'envoi. Par défaut, `save` de la locale. */
   submitText?: ReactNode;
+  /** Le texte du bouton de remise à zéro. Par défaut, `reset` de la locale. */
   clearText?: ReactNode;
   showClear?: boolean;
+  /**
+   * Les props du bouton d'envoi. `disabled` s'ajoute aux conditions du
+   * formulaire au lieu d'être remplacé par elles.
+   */
   submitProps?: ButtonProps;
+  /** Millisecondes sans frappe avant une vérification `validateAsync`. 400 par défaut. */
+  asyncValidationDelay?: number;
   /** Remplace entièrement la barre de boutons. */
   actions?: ReactNode;
   loading?: boolean;
@@ -92,6 +114,39 @@ export interface FormProps<TValues extends FormShape = FormShape> {
   /** Désactive l'envoi tant qu'une erreur est en vigueur. */
   requireValid?: boolean;
   className?: string;
+  /**
+   * Les props communes à tous les champs — orientation, libellé
+   * « facultatif », `controlProps`. Chaque champ déclaré dans `fields`
+   * l'emporte sur elles.
+   *
+   * Sans ce que le formulaire branche lui-même : le nom, la valeur, le
+   * changement et la sortie de champ (`field`), ni les messages d'erreur et
+   * de validation, qui sont propres à chaque champ.
+   */
+  fieldProps?: Partial<
+    Omit<
+      FieldProps,
+      | "field"
+      | "name"
+      | "value"
+      | "defaultValue"
+      | "onValueChange"
+      | "onBlur"
+      | "error"
+      | "success"
+      | "message"
+    >
+  >;
+  /**
+   * Les props de l'`Alert` qui annonce un échec d'envoi. Sans `children`, le
+   * message d'échec, ni `onDismiss`, qui l'efface.
+   */
+  alertProps?: Partial<Omit<AlertProps, "children" | "onDismiss">>;
+  /**
+   * Les props du `Spinner` d'une vérification `validateAsync` en cours.
+   * Sans `label`, repris de la locale comme le texte qui l'accompagne.
+   */
+  spinnerProps?: Partial<Omit<SpinnerProps, "label">>;
 }
 
 const VIDE = {} as FormShape;
@@ -123,15 +178,19 @@ export function Form<TValues extends FormShape = FormShape>({
   validate,
   onSubmit,
   columns = 1,
-  submitText = "Enregistrer",
-  clearText = "Réinitialiser",
+  submitText,
+  clearText,
   showClear = false,
   submitProps,
   actions,
   loading = false,
   requireDirty = true,
   requireValid = true,
+  asyncValidationDelay = 400,
   className,
+  fieldProps,
+  alertProps,
+  spinnerProps,
 }: FormProps<TValues>) {
   // Le hook est appelé sans condition, comme il se doit; son résultat n'est
   // utilisé que si aucun adaptateur n'a été fourni. Un `useLocalForm` inerte
@@ -152,7 +211,21 @@ export function Form<TValues extends FormShape = FormShape>({
    */
   const [echec, setEchec] = useState<string | null>(null);
 
+  // Les vérifications serveur déclarées sur les champs.
+  const verifications: Record<string, AsyncFieldValidator> = {};
+  for (const champ of champsAplatis(fields)) {
+    if (champ.validateAsync) {
+      verifications[champ.name] = champ.validateAsync as AsyncFieldValidator;
+    }
+  }
+  const asynchrone = useAsyncValidation(verifications, form.state.values, {
+    delay: asyncValidationDelay,
+  });
+
   const envoyer = () => {
+    // Entrée dans un champ envoie le formulaire même bouton désactivé : la
+    // garde est ici, pas seulement sur le bouton.
+    if (asynchrone.pending || asynchrone.invalid || submitProps?.disabled) return;
     setEchec(null);
     form.submit().catch((error: unknown) => {
       const { fields: erreurs, message } = readSubmitError(error);
@@ -178,6 +251,9 @@ export function Form<TValues extends FormShape = FormShape>({
   const busy = loading || form.state.isSubmitting;
   const submitDisabled =
     busy ||
+    Boolean(submitProps?.disabled) ||
+    asynchrone.pending ||
+    asynchrone.invalid ||
     (requireDirty && !form.state.isDirty) ||
     (requireValid && !form.state.isValid);
 
@@ -186,7 +262,29 @@ export function Form<TValues extends FormShape = FormShape>({
   });
 
   const rendre = (config: FormFieldConfig) => {
-    const { name, colSpan, rowSpan, ...props } = config;
+    const { name, colSpan, rowSpan, validateAsync, validText, ...props } = config;
+    const binding = form.bind(name as keyof TValues & string);
+    const verification = validateAsync ? asynchrone.states[name] : undefined;
+
+    // L'erreur locale passe devant : une valeur mal formée n'a pas à être
+    // vérifiée auprès du serveur pour être refusée.
+    const etat =
+      binding.error || !verification
+        ? {}
+        : verification.status === "checking"
+          ? {
+              message: (
+                <span className="sia-form-checking">
+                  <Spinner size="xs" {...spinnerProps} label={locale.checking} />
+                  {locale.checking}
+                </span>
+              ),
+            }
+          : verification.status === "invalid"
+            ? { error: verification.error }
+            : verification.status === "valid" && validText
+              ? { success: validText }
+              : {};
 
     return (
       <div
@@ -198,8 +296,13 @@ export function Form<TValues extends FormShape = FormShape>({
         }}
       >
         <Field
+          {...fieldProps}
           {...props}
-          field={form.bind(name as keyof TValues & string)}
+          {...(fieldProps?.className || props.className
+            ? { className: cn(fieldProps?.className, props.className) }
+            : {})}
+          {...etat}
+          field={binding}
           {...(busy ? { disabled: true } : {})}
         />
       </div>
@@ -243,7 +346,8 @@ export function Form<TValues extends FormShape = FormShape>({
       {echec && (
         <Alert
           tone="danger"
-          className="sia-form-error"
+          {...alertProps}
+          className={cn("sia-form-error", alertProps?.className)}
           onDismiss={() => setEchec(null)}
         >
           {echec}
@@ -259,7 +363,7 @@ export function Form<TValues extends FormShape = FormShape>({
               disabled={busy}
               onClick={() => form.reset()}
             >
-              {clearText}
+              {clearText ?? locale.reset}
             </Button>
           )}
           <Button
@@ -268,7 +372,7 @@ export function Form<TValues extends FormShape = FormShape>({
             loading={busy}
             disabled={submitDisabled}
           >
-            {submitText}
+            {submitText ?? locale.save}
           </Button>
         </div>
       )}

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

@@ -78,3 +78,6 @@
   .sia-form-actions { flex-direction: column-reverse; }
   .sia-form-actions > * { width: 100%; }
 }
+
+/* « Vérification… » sous un champ : le témoin aligné sur le texte. */
+.sia-form-checking { display: inline-flex; align-items: center; gap: .4rem; color: var(--sia-muted); }

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

@@ -7,7 +7,7 @@ import {
 } from "react";
 import { cn } from "@sia-ui/utils";
 import { useHoverIntent } from "@sia-ui/headless";
-import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
 import "./styles.css";
 
 export interface HoverCardProps {
@@ -21,6 +21,8 @@ export interface HoverCardProps {
   /** Délai avant fermeture, le temps d'atteindre le panneau à la souris. */
   closeDelay?: number;
   placement?: OverlayPlacement;
+  /** Réglages du panneau flottant — décalage, marge au bord, rôle, classe. */
+  overlayProps?: Partial<Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">>;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   width?: number | string;
@@ -40,6 +42,7 @@ export function HoverCard({
   openDelay = 300,
   closeDelay = 150,
   placement = "bottom-start",
+  overlayProps,
   open: openProp,
   onOpenChange,
   width = 20 * 16,
@@ -76,12 +79,13 @@ export function HoverCard({
     <span className="sia-hover-card-anchor">
       {trigger}
       <Overlay
+        placement={placement}
+        role="dialog"
+        {...overlayProps}
+        className={cn("sia-hover-card", className, overlayProps?.className)}
         open={open}
         anchorRef={anchorRef}
         onOpenChange={setOpen}
-        placement={placement}
-        className={cn("sia-hover-card", className)}
-        role="dialog"
       >
         <div
           style={{ width }}

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

@@ -291,3 +291,21 @@ export function PencilIcon(props: IconProps) {
     </IconBase>
   );
 }
+
+/* ── Mode de couleur ───────────────────────────────────────────────────── */
+
+export function SunIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" />
+    </IconBase>
+  );
+}
+export function MoonIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z" />
+    </IconBase>
+  );
+}

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

@@ -1,8 +1,23 @@
 import { useEffect, useState } from "react";
 import { FileUpload, type FileUploadProps } from "../FileUpload";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
-export interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFilesChange"> { accept?: string; value?: string; onValueChange?: (file: File | null, previewUrl?: string) => void; previewAlt?: string; }
+/**
+ * Les props de `FileUpload`, transmises telles quelles au dépôt : libellé,
+ * description, désactivation. `onFilesChange` cède la place à
+ * `onValueChange`, qui porte l'aperçu, et `multiple` est forcé à `false` —
+ * un aperçu ne montre qu'une image.
+ */
+export interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFilesChange"> {
+  accept?: string;
+  value?: string;
+  onValueChange?: (file: File | null, previewUrl?: string) => void;
+  /** Le texte alternatif de l'aperçu. Par défaut, celui de la locale (`imageUpload.previewAlt`). */
+  previewAlt?: string;
+  /** Le bouton qui retire l'image. Par défaut, `delete` de la locale. */
+  removeLabel?: string;
+}
 /**
  * Un dépôt de fichier qui montre ce qu'on vient de choisir.
  *
@@ -10,4 +25,4 @@ export interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFi
  * serveur pour afficher l'image laisse un carré vide au moment précis où
  * l'on veut vérifier qu'on n'a pas pris la mauvaise.
  */
-export function ImageUpload({ accept = "image/*", value, onValueChange, previewAlt = "Aperçu de l'image", className, ...props }: ImageUploadProps) { const [preview, setPreview] = useState(value); useEffect(() => setPreview(value), [value]); useEffect(() => () => { if (preview?.startsWith("blob:")) URL.revokeObjectURL(preview); }, [preview]); const select = (files: File[]) => { const file = files[0]; if (!file) return; const next = URL.createObjectURL(file); setPreview(next); onValueChange?.(file, next); }; return <div className={cn("sia-image-upload", className)}>{preview && <div className="sia-image-upload__preview"><img src={preview} alt={previewAlt} /><button type="button" onClick={() => { setPreview(undefined); onValueChange?.(null); }}>Supprimer</button></div>}<FileUpload {...props} accept={accept} multiple={false} onFilesChange={select} /></div>; }
+export function ImageUpload({ accept = "image/*", value, onValueChange, previewAlt: previewAltProp, removeLabel: removeLabelProp, className, ...props }: ImageUploadProps) { const locale = useSiaLocale(); const previewAlt = previewAltProp ?? locale.imageUpload.previewAlt; const removeLabel = removeLabelProp ?? locale.delete; const [preview, setPreview] = useState(value); useEffect(() => setPreview(value), [value]); useEffect(() => () => { if (preview?.startsWith("blob:")) URL.revokeObjectURL(preview); }, [preview]); const select = (files: File[]) => { const file = files[0]; if (!file) return; const next = URL.createObjectURL(file); setPreview(next); onValueChange?.(file, next); }; return <div className={cn("sia-image-upload", className)}>{preview && <div className="sia-image-upload__preview"><img src={preview} alt={previewAlt} /><button type="button" onClick={() => { setPreview(undefined); onValueChange?.(null); }}>{removeLabel}</button></div>}<FileUpload {...props} accept={accept} multiple={false} onFilesChange={select} /></div>; }

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

@@ -7,7 +7,7 @@ import {
 import { cn, toneClass } from "@sia-ui/utils";
 import { Spinner, type SpinnerProps } from "../Spinner";
 import type { ComponentTone } from "@sia-ui/tokens";
-import { useComponentDefaults } from "@sia-ui/headless";
+import { useComponentDefaults, useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -50,7 +50,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     const defaults = useComponentDefaults<InputProps>("input");
-    const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+    const locale = useSiaLocale();
+    const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? locale.loading;
     const generatedId = useId();
     const id = providedId ?? generatedId;
     const decorated = Boolean(left || right || loading);