@sia-ui/cli 0.1.0

package/dist/lifecycle.mjs

@@ -0,0 +1,242 @@
+import { readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { lignesDiff } from "./diff.mjs";
+import { LOCK_FILE, ecrireLock, empreinte, lireLock, oublier } from "./lock.mjs";
+
+/**
+ * Ce qu'on peut faire d'un composant **après** l'avoir copié.
+ *
+ * Sans ces quatre commandes, le registre est une voie sans retour : on
+ * installe, et plus rien ne permet de savoir ce qu'on a, ce qu'on a retouché,
+ * ni ce qui a bougé en amont. Corriger ou déprécier une entrée n'atteindrait
+ * jamais personne.
+ *
+ * Toutes travaillent sur `sia-ui.lock.json` : c'est lui qui sait ce qui a été
+ * installé, dans quelle version, et sous quelle forme exacte.
+ */
+
+/** Un état, calculé une fois et lu par les quatre commandes. */
+async function etatDe(contexte, nom, entreeLock) {
+  const { cwd, registry } = contexte;
+  const item = registry.items.find((candidate) => candidate.name === nom);
+
+  const fichiers = [];
+  for (const [relatif, empreinteInstallee] of Object.entries(
+    entreeLock.files ?? {},
+  )) {
+    let actuel;
+    try {
+      actuel = await readFile(join(cwd, relatif));
+    } catch {
+      fichiers.push({ relatif, etat: "absent" });
+      continue;
+    }
+
+    const modifie = empreinte(actuel) !== empreinteInstallee;
+    fichiers.push({ relatif, etat: modifie ? "modifié" : "intact", actuel });
+  }
+
+  return {
+    nom,
+    item,
+    verrou: entreeLock,
+    fichiers,
+    inconnu: !item,
+    retire: item?.status === "removed",
+    deprecie: item?.status === "deprecated",
+    // Une version différente en amont, dans un sens comme dans l'autre : une
+    // version locale plus récente que le registre signale un verrou bricolé.
+    desynchronise: Boolean(item) && item.version !== entreeLock.version,
+  };
+}
+
+async function etats(contexte, noms) {
+  const lock = await lireLock(contexte.cwd);
+  const choisis =
+    noms.length > 0 ? noms : Object.keys(lock.items).sort();
+
+  const inconnusDuVerrou = choisis.filter((nom) => !lock.items[nom]);
+  if (inconnusDuVerrou.length > 0) {
+    throw new Error(
+      `Non installé${inconnusDuVerrou.length > 1 ? "s" : ""} d'après ${LOCK_FILE} : ${inconnusDuVerrou.join(", ")}`,
+    );
+  }
+
+  const resultat = [];
+  for (const nom of choisis) {
+    resultat.push(await etatDe(contexte, nom, lock.items[nom]));
+  }
+  return { lock, etats: resultat };
+}
+
+/**
+ * Le contenu que le registre sert aujourd'hui pour ce fichier installé.
+ *
+ * La lecture passe par la source choisie — copie embarquée ou registre HTTP —
+ * et non par un chemin de disque : `diff` doit pouvoir comparer avec ce que
+ * sert un registre distant.
+ */
+async function sourceAmont(contexte, item, relatif) {
+  const { config, cibleDe, lireSource } = contexte;
+  for (const fichier of item.files) {
+    if (cibleDe(fichier, config) === relatif) {
+      return (await lireSource(fichier)).toString("utf8");
+    }
+  }
+  return null;
+}
+
+export async function diff(contexte, noms) {
+  const { etats: liste } = await etats(contexte, noms);
+  let differences = 0;
+
+  for (const etat of liste) {
+    if (etat.inconnu) {
+      console.log(`\n${etat.nom} — absent du registre, rien à comparer.`);
+      continue;
+    }
+
+    for (const fichier of etat.fichiers) {
+      if (fichier.etat === "absent") {
+        console.log(`\n${fichier.relatif}\n  supprimé du projet`);
+        differences += 1;
+        continue;
+      }
+
+      const amont = await sourceAmont(contexte, etat.item, fichier.relatif);
+      if (amont === null) continue;
+
+      const local = fichier.actuel.toString("utf8");
+      if (local === amont) continue;
+
+      differences += 1;
+      console.log(`\n--- ${fichier.relatif} (registre ${etat.item.version})`);
+      console.log(`+++ ${fichier.relatif} (projet)`);
+      for (const { signe, ligne } of lignesDiff(amont, local)) {
+        console.log(`${signe} ${ligne}`);
+      }
+    }
+  }
+
+  if (differences === 0) {
+    console.log("Aucune différence avec le registre.");
+  }
+}
+
+export async function remove(contexte, noms, flags) {
+  if (noms.length === 0) {
+    throw new Error("Indiquer au moins un nom de composant à retirer.");
+  }
+
+  const { lock, etats: liste } = await etats(contexte, noms);
+  const force = flags.has("--force");
+  const aRetirer = new Set(noms);
+
+  // Retirer un composant dont un autre dépend casse silencieusement ce
+  // dernier : ses imports pointeraient sur un dossier vide.
+  const dependants = [];
+  for (const [nom, entree] of Object.entries(lock.items)) {
+    if (aRetirer.has(nom)) continue;
+    const item = contexte.registry.items.find((c) => c.name === nom);
+    for (const besoin of item?.registryDependencies ?? []) {
+      if (aRetirer.has(besoin)) dependants.push(`${nom} → ${besoin}`);
+    }
+    void entree;
+  }
+
+  if (dependants.length > 0 && !force) {
+    throw new Error(
+      `Encore utilisé par :\n  ${dependants.join("\n  ")}\n\n--force pour retirer quand même.`,
+    );
+  }
+
+  for (const etat of liste) {
+    for (const fichier of etat.fichiers) {
+      if (fichier.etat === "modifié" && !force) {
+        console.log(
+          `keep ${fichier.relatif} (modifié depuis l'installation — --force pour supprimer)`,
+        );
+        continue;
+      }
+      if (fichier.etat !== "absent") {
+        await rm(join(contexte.cwd, fichier.relatif), { force: true });
+        console.log(`rm   ${fichier.relatif}`);
+      }
+    }
+    oublier(lock, etat.nom);
+  }
+
+  await ecrireLock(contexte.cwd, lock);
+  console.log(`\nlock ${LOCK_FILE}`);
+}
+
+export async function doctor(contexte) {
+  const { etats: liste } = await etats(contexte, []);
+
+  if (liste.length === 0) {
+    console.log(`Rien d'installé d'après ${LOCK_FILE}.`);
+    return;
+  }
+
+  const problemes = [];
+
+  for (const etat of liste) {
+    if (etat.inconnu) {
+      problemes.push(`${etat.nom} — absent du registre de cette CLI`);
+    } else if (etat.retire) {
+      problemes.push(
+        `${etat.nom} — retiré du registre${etat.item.replacedBy ? `, remplacé par ${etat.item.replacedBy}` : ""}`,
+      );
+    } else if (etat.deprecie) {
+      problemes.push(
+        `${etat.nom} — déprécié${etat.item.replacedBy ? `, préférer ${etat.item.replacedBy}` : ""}`,
+      );
+    }
+
+    if (etat.desynchronise) {
+      problemes.push(
+        `${etat.nom} — installé en ${etat.verrou.version}, le registre est en ${etat.item.version}`,
+      );
+    }
+
+    for (const fichier of etat.fichiers) {
+      if (fichier.etat === "absent") {
+        problemes.push(`${etat.nom} — ${fichier.relatif} a disparu`);
+      } else if (fichier.etat === "modifié") {
+        // Ce n'est pas une erreur : posséder le code, c'est le droit de le
+        // modifier. Mais `add --overwrite` écraserait la modification.
+        problemes.push(
+          `${etat.nom} — ${fichier.relatif} modifié depuis l'installation`,
+        );
+      }
+    }
+  }
+
+  console.log(`${liste.length} entrée(s) installée(s).`);
+
+  if (problemes.length === 0) {
+    console.log("Rien à signaler.");
+    return;
+  }
+
+  console.log("");
+  for (const probleme of problemes) console.log(`  ${probleme}`);
+}
+
+export async function outdated(contexte) {
+  const { etats: liste } = await etats(contexte, []);
+  const enRetard = liste.filter((etat) => etat.desynchronise && !etat.inconnu);
+
+  if (enRetard.length === 0) {
+    console.log("Tout est à jour.");
+    return;
+  }
+
+  const largeur = Math.max(...enRetard.map((etat) => etat.nom.length));
+  for (const etat of enRetard) {
+    console.log(
+      `${etat.nom.padEnd(largeur)}  ${etat.verrou.version} → ${etat.item.version}`,
+    );
+  }
+  console.log(`\nMettre à jour :\n  sia-ui add ${enRetard.map((e) => e.nom).join(" ")} --overwrite`);
+}

package/dist/lock.mjs

@@ -0,0 +1,92 @@
+import { createHash } from "node:crypto";
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+/**
+ * Ce que le projet a installé, et dans quel état.
+ *
+ * Un composant copié cesse d'être suivi : il vit dans le dépôt de
+ * l'utilisateur, qui le modifie comme il veut. Sans trace écrite au moment de
+ * la copie, plus rien ne permet de répondre à « qu'est-ce que j'ai installé »,
+ * « l'ai-je retouché » ni « une version plus récente existe-t-elle ». On ne
+ * peut donc ni corriger ni déprécier quoi que ce soit après coup.
+ *
+ * L'empreinte est celle du fichier **tel qu'il a été copié**. Comparée au
+ * fichier sur le disque, elle dit si l'utilisateur l'a modifié; comparée à la
+ * source du registre, elle dit si l'entrée a bougé depuis.
+ */
+
+export const LOCK_FILE = "sia-ui.lock.json";
+
+/** La forme du fichier. Un entier, parce qu'il évoluera. */
+const FORMAT = 1;
+
+const VIDE = { format: FORMAT, items: {} };
+
+export function empreinte(contenu) {
+  return "sha256:" + createHash("sha256").update(contenu).digest("hex");
+}
+
+export async function empreinteFichier(chemin) {
+  return empreinte(await readFile(chemin));
+}
+
+export async function lireLock(cwd) {
+  try {
+    const brut = await readFile(join(cwd, LOCK_FILE), "utf8");
+    const lock = JSON.parse(brut);
+
+    // Un format inconnu vient d'une CLI plus récente : l'écraser ferait perdre
+    // ce qu'elle y avait noté.
+    if (lock.format !== FORMAT) {
+      throw new Error(
+        `${LOCK_FILE} est au format ${lock.format}, et cette CLI lit le format ${FORMAT}. Mettre la CLI à jour.`,
+      );
+    }
+
+    return { format: FORMAT, items: lock.items ?? {} };
+  } catch (error) {
+    if (error.code === "ENOENT") return structuredClone(VIDE);
+    if (error instanceof SyntaxError) {
+      throw new Error(`${LOCK_FILE} est illisible : ${error.message}`, {
+        cause: error,
+      });
+    }
+    throw error;
+  }
+}
+
+export async function ecrireLock(cwd, lock) {
+  // Les noms triés : le fichier est versionné chez l'utilisateur, et deux
+  // installations dans un ordre différent ne doivent pas produire un diff.
+  const items = Object.fromEntries(
+    Object.keys(lock.items)
+      .sort()
+      .map((nom) => [nom, lock.items[nom]]),
+  );
+
+  await writeFile(
+    join(cwd, LOCK_FILE),
+    `${JSON.stringify({ format: FORMAT, items }, null, 2)}\n`,
+  );
+}
+
+/**
+ * Note une entrée installée.
+ *
+ * `fichiers` associe le chemin relatif au projet à l'empreinte de ce qui y a
+ * été écrit.
+ */
+export function noter(lock, item, fichiers) {
+  lock.items[item.name] = {
+    version: item.version,
+    installedAt: new Date().toISOString(),
+    files: Object.fromEntries(Object.keys(fichiers).sort().map((f) => [f, fichiers[f]])),
+  };
+  return lock;
+}
+
+export function oublier(lock, nom) {
+  delete lock.items[nom];
+  return lock;
+}

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

@@ -0,0 +1,172 @@
+import { useId, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { useAccordionState } from "@sia-ui/headless";
+import { ChevronDownIcon } from "../Icons";
+import "./styles.css";
+
+export interface AccordionItem {
+  key: string;
+  title: ReactNode;
+  content: ReactNode;
+  /** Une ligne sous le titre, visible même replié. */
+  description?: ReactNode;
+  icon?: ReactNode;
+  /** À droite du titre : un compteur, un badge, un statut. */
+  meta?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  /** `single` referme la section précédente, `multiple` les cumule. */
+  type?: "single" | "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** En `single`, autorise à tout refermer. */
+  collapsible?: boolean;
+  variant?: "bordered" | "separated" | "plain";
+  className?: string;
+}
+
+/**
+ * Des sections dépliables.
+ *
+ * La hauteur s'anime sans être mesurée : le panneau est une grille dont la
+ * ligne passe de `0fr` à `1fr`. Pas de `scrollHeight`, pas de recalcul au
+ * redimensionnement, et un contenu qui change de taille suit tout seul.
+ */
+export function Accordion({
+  items,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  collapsible = true,
+  variant = "bordered",
+  className,
+}: AccordionProps) {
+  const baseId = useId();
+  const state = useAccordionState({
+    type,
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible,
+  });
+
+  return (
+    <div className={cn("sia-accordion", `sia-accordion--${variant}`, className)}>
+      {items.map((item) => {
+        const open = state.isOpen(item.key);
+        const triggerId = `${baseId}-${item.key}-trigger`;
+        const panelId = `${baseId}-${item.key}-panel`;
+
+        return (
+          <div
+            key={item.key}
+            className="sia-accordion__item"
+            data-open={open || undefined}
+          >
+            <button
+              type="button"
+              id={triggerId}
+              className="sia-accordion__trigger"
+              aria-expanded={open}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              onClick={() => state.toggle(item.key)}
+            >
+              {item.icon && (
+                <span className="sia-accordion__icon" aria-hidden="true">
+                  {item.icon}
+                </span>
+              )}
+              <span className="sia-accordion__heading">
+                <span className="sia-accordion__title">{item.title}</span>
+                {item.description && (
+                  <span className="sia-accordion__description">
+                    {item.description}
+                  </span>
+                )}
+              </span>
+              {item.meta && <span className="sia-accordion__meta">{item.meta}</span>}
+              <span className="sia-accordion__chevron" aria-hidden="true">
+                <ChevronDownIcon />
+              </span>
+            </button>
+
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={triggerId}
+              className="sia-accordion__panel"
+            >
+              {/* Le contenu reste monté : le démonter à chaque repli ferait
+                  perdre la position de défilement, le texte déjà saisi et
+                  l'état des sous-composants. `inert` le retire du parcours au
+                  clavier et de l'arbre d'accessibilité tant qu'il est replié —
+                  c'est la seule chose qui doit disparaître. */}
+              <div className="sia-accordion__content" inert={open ? undefined : true}>
+                <div className="sia-accordion__inner">{item.content}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export interface CollapseProps {
+  title: ReactNode;
+  children: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  variant?: AccordionProps["variant"];
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Une section seule. Le même rendu, pour le cas le plus courant. */
+export function Collapse({
+  title,
+  children,
+  description,
+  meta,
+  icon,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  variant = "bordered",
+  disabled = false,
+  className,
+}: CollapseProps) {
+  return (
+    <Accordion
+      {...(className !== undefined ? { className } : {})}
+      variant={variant}
+      type="multiple"
+      {...(open !== undefined ? { value: open ? ["only"] : [] } : {})}
+      {...(open === undefined ? { defaultValue: defaultOpen ? ["only"] : [] } : {})}
+      {...(onOpenChange
+        ? { onValueChange: (next: string[]) => onOpenChange(next.length > 0) }
+        : {})}
+      items={[
+        {
+          key: "only",
+          title,
+          content: children,
+          disabled,
+          ...(description !== undefined ? { description } : {}),
+          ...(meta !== undefined ? { meta } : {}),
+          ...(icon !== undefined ? { icon } : {}),
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,97 @@
+.sia-accordion { display: grid; }
+
+.sia-accordion--bordered {
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  overflow: hidden;
+}
+.sia-accordion--bordered .sia-accordion__item + .sia-accordion__item {
+  border-top: 1px solid var(--sia-border);
+}
+
+.sia-accordion--separated { gap: .5rem; }
+.sia-accordion--separated .sia-accordion__item {
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  overflow: hidden;
+  transition: box-shadow var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-accordion--separated .sia-accordion__item[data-open] {
+  box-shadow: var(--sia-elevation-rest);
+}
+
+.sia-accordion--plain .sia-accordion__item + .sia-accordion__item {
+  border-top: 1px solid var(--sia-border);
+}
+
+.sia-accordion__trigger {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  width: 100%;
+  padding: .875rem 1rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-foreground);
+  font-size: .925rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-accordion__trigger:hover:not(:disabled) { background: var(--sia-surface); }
+.sia-accordion__trigger:disabled { opacity: .5; cursor: not-allowed; }
+
+.sia-accordion__icon { display: grid; place-items: center; flex: none; color: var(--sia-muted); }
+.sia-accordion__heading { flex: 1; display: grid; gap: .1rem; min-width: 0; }
+.sia-accordion__title { font-weight: 600; }
+.sia-accordion__description { color: var(--sia-muted); font-size: .8rem; line-height: 1.4; }
+.sia-accordion__meta { flex: none; color: var(--sia-muted); font-size: .8rem; }
+
+.sia-accordion__chevron {
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--sia-muted);
+  transition: transform var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-accordion__item[data-open] .sia-accordion__chevron { transform: rotate(180deg); }
+
+/* La hauteur automatique, animée.
+
+   Une grille dont l'unique ligne passe de `0fr` à `1fr` interpole la hauteur
+   réelle du contenu — ce que `height: auto` ne sait pas faire. Aucun
+   `scrollHeight` n'est lu, donc rien à recalculer quand le contenu change ou
+   quand la fenêtre est redimensionnée. */
+.sia-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-accordion__item[data-open] .sia-accordion__panel { grid-template-rows: 1fr; }
+
+.sia-accordion__content {
+  overflow: hidden;
+  min-height: 0;
+  color: var(--sia-muted);
+  font-size: .875rem;
+  line-height: 1.6;
+  /* Le texte monte légèrement derrière l'ouverture de la hauteur : les deux
+     mouvements se recouvrent, l'ensemble paraît d'un seul tenant. */
+  opacity: 0;
+  transform: translateY(-4px);
+  transition:
+    opacity var(--sia-duration-base) var(--sia-easing-standard),
+    transform var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-accordion__item[data-open] .sia-accordion__content {
+  opacity: 1;
+  transform: none;
+  transition-delay: 40ms;
+}
+
+/* Le rembourrage vit sur un enfant, jamais sur `__content` : une marge
+   intérieure posée là garderait une hauteur résiduelle une fois replié — le
+   défaut classique de cette technique. */
+.sia-accordion__inner { padding: 0 1rem 1rem; }

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { useSiaLocale } from "@sia-ui/headless";
+import { XIcon } from "../Icons";
+import "./styles.css";
+
+export interface AlertProps {
+  tone?: ComponentTone;
+  title?: ReactNode;
+  children?: ReactNode;
+  action?: ReactNode;
+  dismissLabel?: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function Alert({ tone = "info", title, children, action, dismissLabel: dismissLabelProp, onDismiss, className }: AlertProps) {
+    const locale = useSiaLocale();
+    const dismissLabel = dismissLabelProp ?? locale.close;
+  return (
+    <div className={cn("sia-alert", `sia-alert--${tone}`, className)} role={tone === "danger" ? "alert" : "status"}>
+      <div className="sia-alert__content">
+        {title && <strong className="sia-alert__title">{title}</strong>}
+        {children && <div className="sia-alert__description">{children}</div>}
+      </div>
+      {action && <div className="sia-alert__action">{action}</div>}
+      {onDismiss && <button type="button" className="sia-alert__dismiss" aria-label={dismissLabel} onClick={onDismiss}><XIcon /></button>}
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+.sia-alert { display:flex; align-items:flex-start; gap:1rem; padding:1rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-surface); }
+.sia-alert__content { flex:1; display:grid; gap:.25rem; }
+.sia-alert__title { color:var(--sia-foreground); }
+.sia-alert__description { color:var(--sia-muted); font-size:.9rem; line-height:1.5; }
+.sia-alert__action { flex:none; }
+.sia-alert__dismiss { padding:.1rem .35rem; border:0; color:currentColor; background:transparent; font-size:1.25rem; cursor:pointer; }
+.sia-alert--neutral { border-color:var(--sia-border); }
+.sia-alert--primary { border-color:color-mix(in srgb,var(--sia-primary) 35%,var(--sia-border)); }
+.sia-alert--info { border-color:color-mix(in srgb,var(--sia-info) 35%,var(--sia-border)); }
+.sia-alert--success { border-color:color-mix(in srgb,var(--sia-success) 40%,var(--sia-border)); }
+.sia-alert--warning { border-color:color-mix(in srgb,var(--sia-warning) 45%,var(--sia-border)); }
+.sia-alert--danger { border-color:color-mix(in srgb,var(--sia-danger) 40%,var(--sia-border)); }

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { cn, formatCurrency } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface AmountDisplayProps { value: number; currency?: string; locale?: string; label?: ReactNode; secondary?: ReactNode; sign?: "auto" | "always"; tone?: ComponentTone; className?: string; }
+export function AmountDisplay({ value, currency = "XAF", locale = "fr-FR", label, secondary, sign = "auto", tone = "neutral", className }: AmountDisplayProps) {
+  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/AmountDisplay/styles.css

@@ -0,0 +1,9 @@
+.sia-amount-display { display:inline-grid; gap:.15rem; }
+.sia-amount-display strong { font-variant-numeric:tabular-nums; }
+.sia-amount-display__label,.sia-amount-display__secondary { color:var(--sia-muted); font-size:.8rem; }
+.sia-amount-display--neutral strong { color:var(--sia-foreground); }
+.sia-amount-display--primary strong { color:var(--sia-primary); }
+.sia-amount-display--info strong { color:var(--sia-info); }
+.sia-amount-display--success strong { color:var(--sia-success); }
+.sia-amount-display--warning strong { color:var(--sia-warning); }
+.sia-amount-display--danger strong { color:var(--sia-danger); }

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

@@ -0,0 +1,6 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface AppShellProps { logo?: ReactNode; navigation: ReactNode; header?: ReactNode; children: ReactNode; footer?: ReactNode; defaultCollapsed?: boolean; className?: string; }
+export function AppShell({ logo, navigation, header, children, footer, defaultCollapsed = false, className }: AppShellProps) { const [collapsed, setCollapsed] = useState(defaultCollapsed); return <div className={cn("sia-app-shell", collapsed && "sia-app-shell--collapsed", className)}><aside><div className="sia-app-shell__brand">{logo}<button type="button" aria-label={collapsed ? "Développer le menu" : "Réduire le menu"} onClick={() => setCollapsed(!collapsed)}>☰</button></div><nav>{navigation}</nav></aside><div className="sia-app-shell__main">{header && <header>{header}</header>}<main>{children}</main>{footer && <footer>{footer}</footer>}</div></div>; }

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

@@ -0,0 +1,7 @@
+.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; }