@sia-ui/cli 0.2.1 → 0.3.0

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

@@ -1,7 +1,259 @@
-.sia-app-shell { min-height:32rem; display:grid; grid-template-columns:16rem 1fr; border:1px solid var(--sia-border); }
-.sia-app-shell--collapsed { grid-template-columns:4rem 1fr; }
-.sia-app-shell > aside { overflow:hidden; border-right:1px solid var(--sia-border); background:var(--sia-surface); }
-.sia-app-shell__brand { display:flex; align-items:center; justify-content:space-between; min-height:4rem; padding:.75rem; }
-.sia-app-shell__main { min-width:0; display:flex; flex-direction:column; }
-.sia-app-shell__main > header,.sia-app-shell__main > footer { padding:1rem; border-bottom:1px solid var(--sia-border); }
-.sia-app-shell__main > main { flex:1; padding:1rem; }
+/**
+ * La coquille.
+ *
+ * Deux variables portent les largeurs — `--sia-shell-sidebar` et
+ * `--sia-shell-rail` — et l'appelant peut les redéfinir en ligne. La grille
+ * les lit sans jamais les coder en dur : changer la largeur ne demande donc
+ * pas de toucher au composant.
+ */
+
+.sia-shell {
+  --sia-shell-sidebar: 16rem;
+  --sia-shell-rail: 4rem;
+  --sia-shell-header: 3.5rem;
+  --sia-shell-tabs: 4rem;
+
+  display: grid;
+  grid-template-columns: var(--sia-shell-sidebar) minmax(0, 1fr);
+  min-height: 100%;
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  transition: grid-template-columns var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-shell--rail { grid-template-columns: var(--sia-shell-rail) minmax(0, 1fr); }
+.sia-shell--hidden,
+.sia-shell--compact { grid-template-columns: minmax(0, 1fr); }
+
+/* Posée à droite, la barre passe en seconde colonne : l'ordre du DOM ne
+   change pas, donc l'ordre de lecture au clavier non plus. */
+.sia-shell--right { grid-template-columns: minmax(0, 1fr) var(--sia-shell-sidebar); }
+.sia-shell--right.sia-shell--rail { grid-template-columns: minmax(0, 1fr) var(--sia-shell-rail); }
+.sia-shell--right .sia-shell__aside { order: 2; }
+
+.sia-shell__aside {
+  min-width: 0;
+  height: 100vh;
+  /* Collée : le contenu défile, la navigation reste. Sans cela, revenir en
+     haut d'une longue liste devient un préalable à tout déplacement. */
+  position: sticky;
+  top: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--sia-border);
+  background: var(--sia-surface);
+}
+.sia-shell--right .sia-shell__aside {
+  border-right: 0;
+  border-left: 1px solid var(--sia-border);
+}
+
+.sia-shell--filled .sia-shell__aside { background: var(--sia-surface-raised, var(--sia-surface)); }
+
+/* La barre flottante se détache de son bord : la coquille lui rend la marge
+   que le composant seul ne peut pas prendre. */
+.sia-shell--floating .sia-shell__aside {
+  border: 0;
+  background: transparent;
+  padding: .5rem;
+}
+
+.sia-shell__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 100vh;
+}
+
+/* ── L'en-tête ──────────────────────────────────────────────────────────── */
+
+.sia-shell__header {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: none;
+  min-height: var(--sia-shell-header);
+  padding: .5rem 1rem;
+  border-bottom: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 88%, transparent);
+}
+
+/* Le titre d'écran et l'identité servent de repère pendant le défilement.
+   `backdrop-filter` n'est posé qu'ici, où il couvre une bande étroite : sur
+   une grande surface il coûte une couche de composition à chaque image. */
+.sia-shell__header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  backdrop-filter: blur(8px);
+}
+
+.sia-shell__header-content {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.sia-shell__toggle {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-shell__toggle:hover { background: var(--sia-surface); color: var(--sia-foreground); }
+.sia-shell__toggle:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+
+/* ── Le contenu ─────────────────────────────────────────────────────────── */
+
+.sia-shell__content {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  margin-inline: auto;
+  padding: 1.25rem 1rem 2rem;
+}
+
+/* Assez large pour deux colonnes de cartes, assez borné pour qu'une ligne de
+   texte reste lisible. */
+.sia-shell__content--wide { max-width: 87.5rem; }
+/* Pour un écran qui n'est qu'un formulaire. */
+.sia-shell__content--narrow { max-width: 48rem; }
+/* Pour un tableau qui a besoin de toute la place. */
+.sia-shell__content--full { max-width: none; }
+
+.sia-shell__page { margin-bottom: 1.25rem; }
+
+.sia-shell__footer {
+  flex: none;
+  padding: 1rem;
+  border-top: 1px solid var(--sia-border);
+  color: var(--sia-muted);
+  font-size: .85rem;
+}
+
+/* ── Petit écran ────────────────────────────────────────────────────────── */
+
+.sia-shell--compact .sia-shell__content { padding-inline: .875rem; }
+
+/* La barre d'onglets couvre le bas : sans cette réserve, la dernière ligne
+   d'un tableau reste inatteignable. */
+.sia-shell--with-tabs .sia-shell__main {
+  padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
+}
+
+.sia-shell__drawer .sia-sidebar { height: 100%; }
+
+/* ── La barre d'onglets ─────────────────────────────────────────────────── */
+
+/* `sia-bottom-tabs` et non `sia-tabs` : ce dernier appartient au composant
+   `Tabs`, dont la première règle est `display: grid`. La collision jouait
+   dans les deux sens — mes onglets héritaient de sa grille, et mes règles
+   fixaient ses onglets en bas de l'écran. */
+
+.sia-bottom-tabs {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  align-items: stretch;
+  height: var(--sia-shell-tabs);
+  /* La barre d'accueil des téléphones sans bouton mange le bas de l'écran. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  border-top: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 92%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.sia-bottom-tabs__cell { display: contents; }
+
+.sia-bottom-tabs__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .15rem;
+  min-width: 0;
+  padding: .25rem .25rem .3rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .68rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/**
+ * L'onglet actif reçoit une pastille qui grandit sous l'icône.
+ *
+ * Une simple bascule de couleur passe inaperçue sur un téléphone tenu à bout
+ * de bras ; un changement de forme, non.
+ */
+.sia-bottom-tabs__pastille {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 1.75rem;
+  border-radius: 999px;
+  background: transparent;
+  font-size: 1.1rem;
+  transform: scale(.9);
+  transition:
+    background-color var(--sia-duration-base) var(--sia-easing-spring),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+
+.sia-bottom-tabs__item--active { color: var(--sia-primary); }
+.sia-bottom-tabs__item--active .sia-bottom-tabs__pastille {
+  background: color-mix(in srgb, var(--sia-primary) 14%, transparent);
+  transform: scale(1);
+}
+
+.sia-bottom-tabs__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Le compte exact ne tient pas sous une icône d'onglet : il devient un point,
+   comme sur le rail. */
+.sia-bottom-tabs__point {
+  position: absolute;
+  top: .05rem;
+  right: .65rem;
+  width: .4rem;
+  height: .4rem;
+  border-radius: 50%;
+  background: var(--sia-danger);
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+
+.sia-bottom-tabs__item:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: -3px;
+  border-radius: var(--sia-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sia-shell,
+  .sia-bottom-tabs__pastille { transition: none; }
+}

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

@@ -0,0 +1,134 @@
+import { memo, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { navLeaves, navSome } from "@sia-ui/headless";
+import type { SidebarItem, SidebarRenderLink } from "../Sidebar";
+
+export interface BottomTabsProps {
+  /** Attendu déjà filtré : la coquille a fait le tri une seule fois. */
+  items: SidebarItem[];
+  activeKey?: string;
+
+  /**
+   * Nombre d'onglets avant le bouton « Plus ».
+   *
+   * Quatre au maximum sur un téléphone : au-delà, les cibles tactiles
+   * descendent sous les quarante-quatre pixels recommandés, et on rate
+   * l'onglet voisin une fois sur trois.
+   */
+  max?: number;
+
+  renderLink?: SidebarRenderLink;
+  onNavigate?: (item: SidebarItem) => void;
+
+  /** Le bouton qui ouvre l'arborescence complète. */
+  more?: ReactNode;
+  onMore?: () => void;
+  moreLabel?: string;
+
+  className?: string;
+}
+
+/**
+ * La navigation d'un téléphone.
+ *
+ * Un rail d'icônes muettes n'est pas utilisable au comptoir : sur petit écran
+ * la navigation descend en bas, à portée du pouce, avec des libellés.
+ *
+ * Les onglets ne montrent que des **feuilles**. Un onglet qui ouvrirait un
+ * sous-menu depuis une barre basse serait un piège tactile — on vise une
+ * destination, on obtient un menu. Le reste de l'arborescence passe par
+ * « Plus ».
+ */
+export const BottomTabs = memo(function BottomTabs({
+  items,
+  activeKey,
+  max = 4,
+  renderLink,
+  onNavigate,
+  more,
+  onMore,
+  moreLabel = "Plus",
+  className,
+}: BottomTabsProps) {
+  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">
+      {onglets.map((item) => {
+        const actif = item.key === activeKey;
+        const contenu = (
+          <>
+            <span className="sia-bottom-tabs__pastille" aria-hidden="true">
+              {item.icon}
+              {navSome(item, (e) => e.badge !== undefined && e.badge !== null) && (
+                <span className="sia-bottom-tabs__point" />
+              )}
+            </span>
+            <span className="sia-bottom-tabs__label">{item.label}</span>
+          </>
+        );
+
+        const classe = cn("sia-bottom-tabs__item", actif && "sia-bottom-tabs__item--active");
+        const naviguer = () => {
+          item.onClick?.();
+          onNavigate?.(item);
+        };
+
+        if (item.href && renderLink) {
+          return (
+            <span key={item.key} className="sia-bottom-tabs__cell">
+              {renderLink({
+                item,
+                children: contenu,
+                props: {
+                  className: classe,
+                  onClick: naviguer,
+                  ...(actif ? { "aria-current": "page" as const } : {}),
+                },
+              })}
+            </span>
+          );
+        }
+
+        return item.href ? (
+          <a
+            key={item.key}
+            href={item.href}
+            className={classe}
+            {...(actif ? { "aria-current": "page" as const } : {})}
+            onClick={naviguer}
+          >
+            {contenu}
+          </a>
+        ) : (
+          <button
+            key={item.key}
+            type="button"
+            className={classe}
+            {...(actif ? { "aria-current": "page" as const } : {})}
+            onClick={naviguer}
+          >
+            {contenu}
+          </button>
+        );
+      })}
+
+      {afficherPlus && (
+        <button
+          type="button"
+          className="sia-bottom-tabs__item"
+          onClick={onMore}
+          aria-label={`${moreLabel}${reste > 0 ? ` (${reste})` : ""}`}
+        >
+          <span className="sia-bottom-tabs__pastille" aria-hidden="true">
+            {more ?? "···"}
+          </span>
+          <span className="sia-bottom-tabs__label">{moreLabel}</span>
+        </button>
+      )}
+    </nav>
+  );
+});

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

@@ -14,6 +14,13 @@ export interface AsyncStateProps {
   children: ReactNode;
 }
 
+/**
+ * Les trois états d'un chargement, au même endroit.
+ *
+ * En attente, en erreur, ou vide : ce sont les mêmes trois cas à chaque
+ * é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>;

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

@@ -17,6 +17,14 @@ export interface AuditMetaProps {
   className?: string;
 }
 
+/**
+ * Qui a fait quoi, et quand.
+ *
+ * Une liste d'événements plutôt qu'un dernier état : savoir qu'une facture
+ * a été validée n'apprend rien si l'on ignore qu'elle avait été rejetée la
+ * 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) {
   return (
     <section className={cn("sia-audit-meta", className)}>

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

@@ -11,6 +11,13 @@ export interface AuthLayoutProps {
   footer?: ReactNode;
   className?: string;
 }
+/**
+ * La page qui précède l'application : connexion, inscription, mot de passe
+ * oublié.
+ *
+ * Elle n'a ni navigation ni coquille, et c'est délibéré : tout ce qui mène
+ * ailleurs est hors de portée de quelqu'un qui n'est pas encore entré.
+ */
 export function AuthLayout({
   title,
   description,

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

@@ -3,6 +3,13 @@ import { cn } from "@sia-ui/utils";
 import type { SelectOption } from "../Select";
 import { useSiaLocale } from "@sia-ui/headless";
 export interface AutocompleteProps { id?: string; options: SelectOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string, option?: SelectOption) => void; placeholder?: string; allowCustomValue?: boolean; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
+/**
+ * Un champ qui propose, sans imposer.
+ *
+ * `allowCustomValue` est vrai par défaut : la liste aide à trouver, elle ne
+ * dit pas ce qui existe. Un nom de client absent du référentiel reste
+ * saisissable, quitte à être créé ensuite.
+ */
 export function Autocomplete({ id, options, value, defaultValue = "", onValueChange, placeholder: placeholderProp, allowCustomValue = true, disabled, className, ...ariaProps }: AutocompleteProps) {
     const locale = useSiaLocale();
     const placeholder = placeholderProp ?? locale.searchPlaceholder; const initialLabel = options.find((option) => option.value === defaultValue)?.label; const [internal, setInternal] = useState(defaultValue); const [query, setQuery] = useState(initialLabel ? String(initialLabel) : defaultValue); const [open, setOpen] = useState(false); const current = value ?? internal; const filtered = useMemo(() => { const needle = query.toLowerCase(); return options.filter((option) => [String(option.label), ...(option.keywords ?? [])].join(" ").toLowerCase().includes(needle)); }, [options, query]); const select = (option: SelectOption) => { if (value === undefined) setInternal(option.value); setQuery(String(option.label)); setOpen(false); onValueChange?.(option.value, option); }; return <div id={id} className={cn("sia-autocomplete", className)} {...ariaProps}><input value={query} placeholder={placeholder} disabled={disabled} role="combobox" aria-expanded={open} aria-controls={`${id ?? "sia-autocomplete"}-list`} onFocus={() => setOpen(true)} onChange={(event) => { const next = event.target.value; setQuery(next); setOpen(true); if (allowCustomValue) { if (value === undefined) setInternal(next); onValueChange?.(next); } }} onBlur={() => window.setTimeout(() => setOpen(false), 120)} />{open && <div id={`${id ?? "sia-autocomplete"}-list`} role="listbox">{filtered.map((option) => <button type="button" role="option" aria-selected={current === option.value} key={option.value} disabled={option.disabled} onMouseDown={(event) => event.preventDefault()} onClick={() => select(option)}>{option.label}</button>)}</div>}</div>; }