@sia-ui/cli 0.2.1 → 0.3.0

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

@@ -9,8 +9,12 @@
 }
 
 .sia-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: .125rem; align-content: start; }
+/* 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
+   reste sans conséquence. */
 .sia-sidebar__header,
-.sia-sidebar__footer { flex: none; padding: .25rem; }
+.sia-sidebar__footer { flex: none; padding: .25rem; overflow: hidden; }
 
 .sia-sidebar__section { display: grid; gap: .125rem; }
 .sia-sidebar__section + .sia-sidebar__section { margin-top: .75rem; }
@@ -112,8 +116,17 @@
 .sia-sidebar__node[data-open] .sia-sidebar__panel { grid-template-rows: 1fr; }
 .sia-sidebar__sub { overflow: hidden; min-height: 0; display: grid; gap: .125rem; }
 
+/* L'indentation suit la profondeur : `--sia-sidebar-depth` est posé par le
+   nœud, et vaut 1 au premier sous-niveau. Une marge figée aurait bloqué
+   l'arbre à deux étages.
+
+   Elle se fait en `padding`, jamais en `margin` : l'entrée est en
+   `width: 100%`, et une marge s'y ajoute au lieu de s'y prendre — la ligne
+   débordait alors du volet d'exactement son indentation, et la pastille de
+   droite se retrouvait coupée. La zone cliquable y gagne aussi : elle va
+   jusqu'au bord. */
 .sia-sidebar__item--child {
-  margin-left: 1.5rem;
+  padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .75rem);
   padding-block: .375rem;
   font-size: .825rem;
 }
@@ -136,5 +149,84 @@
 .sia-sidebar--collapsed .sia-sidebar__badge,
 .sia-sidebar--collapsed .sia-sidebar__chevron { display: none; }
 .sia-sidebar--collapsed .sia-sidebar__section-title { height: 0; padding: 0; opacity: 0; overflow: hidden; }
-/* Replier ferme les sous-entrées : elles n'auraient plus de libellé. */
-.sia-sidebar--collapsed .sia-sidebar__panel { grid-template-rows: 0fr; }
+/* Le rail ne déplie plus rien en ligne — et surtout, il ne force plus le
+   panneau à zéro. C'était le défaut central : les sous-entrées devenaient
+   inatteignables dès qu'on repliait la barre. Elles sortent maintenant en
+   volet, hors du flux, via `Overlay`. */
+.sia-sidebar--collapsed .sia-sidebar__item { position: relative; }
+
+/* La pastille ne tient pas sur un rail : elle devient un point. */
+.sia-sidebar__dot {
+  position: absolute;
+  top: .3rem;
+  right: .3rem;
+  width: .45rem;
+  height: .45rem;
+  border-radius: 50%;
+  background: var(--sia-danger, #e11d48);
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+
+/* ── Le volet du rail ──────────────────────────────────────────────────── */
+
+.sia-sidebar-flyout {
+  min-width: 13rem;
+  max-width: 18rem;
+  padding: .3rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-background);
+  box-shadow: var(--sia-shadow-lg, 0 12px 32px rgb(15 23 42 / .16));
+  font-size: .875rem;
+  animation: sia-sidebar-flyout var(--sia-duration-fast) var(--sia-easing-standard);
+}
+@keyframes sia-sidebar-flyout {
+  from { opacity: 0; transform: translateX(-.25rem); }
+}
+.sia-sidebar--right .sia-sidebar-flyout { animation-name: sia-sidebar-flyout-right; }
+@keyframes sia-sidebar-flyout-right {
+  from { opacity: 0; transform: translateX(.25rem); }
+}
+
+.sia-sidebar-flyout__title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .4rem .625rem .5rem;
+  color: var(--sia-foreground);
+  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 ─────────────────────────────────────────────────────────── */
+
+.sia-sidebar--filled { background: var(--sia-surface); }
+.sia-sidebar--filled .sia-sidebar__item:hover:not(:disabled) { background: var(--sia-background); }
+
+.sia-sidebar--floating {
+  margin: .5rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) * 1.5);
+  background: var(--sia-background);
+  box-shadow: var(--sia-shadow-sm, 0 1px 2px rgb(15 23 42 / .06));
+}
+
+/* ── Tailles ───────────────────────────────────────────────────────────── */
+
+.sia-sidebar--sm { font-size: .8125rem; }
+.sia-sidebar--sm .sia-sidebar__item { padding-block: .375rem; }
+.sia-sidebar--lg { font-size: .9375rem; }
+.sia-sidebar--lg .sia-sidebar__item { padding-block: .625rem; }
+.sia-sidebar--lg .sia-sidebar__icon { width: 1.25rem; font-size: 1.15rem; }
+
+/* Le ton pilote la couleur de l'entrée courante. */
+.sia-sidebar__item--active { color: var(--sia-accent, var(--sia-primary)); }
+.sia-sidebar__item--active::before { background: var(--sia-accent, var(--sia-primary)); }
+.sia-sidebar__item--active { background: color-mix(in srgb, var(--sia-accent, var(--sia-primary)) 10%, transparent); }
+
+/* Une branche repliée qui contient la page courante : assez pour la
+   retrouver, pas assez pour être confondue avec elle. */
+.sia-sidebar__item--in-branch { color: var(--sia-foreground); font-weight: 600; }

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

@@ -9,6 +9,13 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
   circle?: boolean;
 }
 
+/**
+ * La forme de ce qui n'est pas encore là.
+ *
+ * Aux dimensions du contenu attendu, et non d'une taille générique : c'est
+ * ce qui évite le sursaut de mise en page à l'arrivée des données, lequel
+ * fait cliquer à côté.
+ */
 export function Skeleton({ className, width = "100%", height = "1rem", radius, circle, style, ...props }: SkeletonProps) {
   return (
     <div

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

@@ -11,6 +11,13 @@ export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
   tone?: ComponentTone | "current";
 }
 
+/**
+ * Une attente sans durée connue.
+ *
+ * Quand la durée est connue, une barre de progression en dit plus. Le ton
+ * `current` reprend la couleur du texte environnant : un indicateur posé
+ * dans un bouton doit suivre la couleur du bouton, pas celle du thème.
+ */
 export function Spinner({ label: labelProp, size: sizeProp, variant: variantProp, tone: toneProp, className, ...props }: SpinnerProps) {
   const defaults = useComponentDefaults<SpinnerProps>("spinner");
   const label = labelProp ?? defaults.label ?? "Chargement";

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

@@ -10,6 +10,13 @@ export interface StatCardProps extends StatisticProps {
   action?: ReactNode;
 }
 
+/**
+ * Un indicateur, dans une carte.
+ *
+ * L'assemblage d'une `Card` et d'un `Statistic` — la forme qu'ils prennent
+ * presque toujours ensemble, et qu'il serait fastidieux de recomposer à
+ * chaque tableau de bord.
+ */
 export function StatCard({ icon, description, action, className, ...statisticProps }: StatCardProps) {
   return <Card className={cn("sia-stat-card", className)}><CardBody><div className="sia-stat-card__top">{icon && <span className="sia-stat-card__icon" aria-hidden="true">{icon}</span>}{action}</div><Statistic {...statisticProps} />{description && <div className="sia-stat-card__description">{description}</div>}</CardBody></Card>;
 }

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

@@ -15,6 +15,13 @@ export interface StatisticProps {
   className?: string;
 }
 
+/**
+ * Un nombre qu'on lit d'un coup d'œil.
+ *
+ * La tendance est un écart, pas une flèche : c'est le signe du nombre qui
+ * décide du sens et de la couleur. Une flèche passée en prop finit par
+ * pointer vers le haut sur une baisse.
+ */
 export function Statistic({ value, label, format = "number", locale = "fr-FR", currency = "XAF", precision, prefix, suffix, trend, className }: StatisticProps) {
   const formatted = format === "currency"
     ? formatCurrency(value, { locale, currency, ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) })

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

@@ -9,6 +9,13 @@ export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
   onCheckedChange?: (checked: boolean) => void;
 }
 
+/**
+ * Une bascule à effet immédiat.
+ *
+ * À la différence d'une case à cocher, elle n'attend pas de validation :
+ * ce qu'on bascule s'applique tout de suite. Une case dans un formulaire,
+ * une bascule dans des réglages.
+ */
 export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
   ({ className, checked, defaultChecked = false, label, disabled, onCheckedChange, onClick, ...props }, ref) => {
     const [internalChecked, setInternalChecked] = useState(defaultChecked);

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

@@ -7,6 +7,13 @@ const TabsContext = createContext<TabsContextValue | null>(null);
 
 export interface TabsProps { value?: string; defaultValue: string; onValueChange?: (value: string) => void; className?: string; children: ReactNode; }
 
+/**
+ * Des vues qui se remplacent au même endroit.
+ *
+ * Elles servent à des contenus de même rang — jamais à des étapes, qui ont
+ * un ordre et des `Steps`, ni à une navigation entre écrans, qui change
+ * l'adresse.
+ */
 export function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps) {
   const [internal, setInternal] = useState(defaultValue);
   const baseId = useId();

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

@@ -3,4 +3,11 @@ import { cn } from "@sia-ui/utils";
 import { XIcon } from "../Icons";
 import "./styles.css";
 export interface TagsInputProps { id?: string; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; placeholder?: string; separators?: string[]; maxTags?: number; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
+/**
+ * Une liste de mots, saisis à la volée.
+ *
+ * Les séparateurs sont déclarés : la virgule et l'entrée par défaut, parce
+ * que ce sont les deux touches que l'on presse sans y penser après avoir
+ * tapé un mot.
+ */
 export function TagsInput({ id, value, defaultValue = [], onValueChange, placeholder = "Ajouter un tag", separators = ["Enter", ","], maxTags, disabled, className, ...ariaProps }: TagsInputProps) { const [internal, setInternal] = useState(defaultValue); const [draft, setDraft] = useState(""); const current = value ?? internal; const update = (next: string[]) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; const add = () => { const tag = draft.trim().replace(/,$/, ""); if (!tag || current.includes(tag) || (maxTags !== undefined && current.length >= maxTags)) return; update([...current, tag]); setDraft(""); }; return <div id={id} className={cn("sia-tags-input", className)} {...ariaProps}>{current.map((tag) => <span key={tag}>{tag}<button type="button" disabled={disabled} aria-label={`Retirer ${tag}`} onClick={() => update(current.filter((item) => item !== tag))}><XIcon /></button></span>)}<input value={draft} disabled={disabled} placeholder={placeholder} onChange={(event) => setDraft(event.target.value)} onBlur={add} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (separators.includes(event.key)) { event.preventDefault(); add(); } if (event.key === "Backspace" && !draft && current.length) update(current.slice(0, -1)); }} /></div>; }

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

@@ -7,6 +7,13 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   resize?: "none" | "vertical" | "horizontal" | "both";
 }
 
+/**
+ * La saisie de plusieurs lignes.
+ *
+ * Elle garde la hauteur qu'on lui donne : un redimensionnement automatique
+ * fait sauter la page à chaque retour à la ligne, et déplace ce qu'on
+ * s'apprêtait à cliquer.
+ */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, invalid, resize = "vertical", ...props }, ref) => (
     <textarea

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

@@ -42,6 +42,13 @@ function steppedValues(limit: number, step: number) {
   return Array.from({ length: Math.ceil(limit / Math.max(step, 1)) }, (_, index) => index * Math.max(step, 1)).filter((value) => value < limit);
 }
 
+/**
+ * Une heure, au pas voulu.
+ *
+ * `minuteStep` évite de faire défiler soixante minutes pour un rendez-vous
+ * qui tombe au quart d'heure. Les secondes ne s'affichent que si on les
+ * demande — la plupart des heures métier n'en ont pas.
+ */
 export const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker({
   id, name, value, defaultValue = "", min, max, showSeconds = false, minuteStep = 1, secondStep = 1, hourFormat = 24, needConfirm = false, allowClear = true, placeholder = "Sélectionner une heure", disabledTime, renderExtraFooter, onValueChange, onOpenChange, open: openProp, placement = "bottom-start", tone = "primary", invalid = false, disabled = false, required = false, className, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...ariaProps
 }, forwardedRef) {

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

@@ -19,6 +19,12 @@ export interface TimeRangePickerProps extends Pick<TimePickerProps, "minuteStep"
   disabled?: boolean;
   className?: string;
 }
+/**
+ * Une heure de début et une heure de fin.
+ *
+ * `order` impose que la fin suive le début. On peut le lever — une garde
+ * de nuit finit le lendemain — mais il faut l'avoir écrit.
+ */
 export function TimeRangePicker({ value, defaultValue = { start: "", end: "" }, onValueChange, order = true, startLabel: startLabelProp, endLabel: endLabelProp, minuteStep = 1, secondStep = 1, showSeconds = false, hourFormat = 24, needConfirm = false, allowClear = true, tone = "primary", invalid, disabled, className }: TimeRangePickerProps) {
     const locale = useSiaLocale();
     const endLabel = endLabelProp ?? locale.endTime;

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

@@ -5,4 +5,11 @@ import "./styles.css";
 
 export interface TimelineItem { key: string; title: ReactNode; description?: ReactNode; time?: ReactNode; tone?: ComponentTone; }
 export interface TimelineProps { items: TimelineItem[]; pending?: ReactNode; className?: string; }
+/**
+ * Une suite d'événements, dans l'ordre.
+ *
+ * Le ton porte le sens de chaque étape : une chronologie de paiement se lit
+ * d'abord par ses couleurs — ce qui a abouti, ce qui a échoué — avant qu'on
+ * en lise les libellés.
+ */
 export function Timeline({ items, pending, className }: TimelineProps) { return <ol className={cn("sia-timeline", className)}>{items.map((item) => <li key={item.key} className={`sia-timeline__item sia-timeline__item--${item.tone ?? "primary"}`}><span className="sia-timeline__dot" /><div><strong>{item.title}</strong>{item.description && <p>{item.description}</p>}{item.time && <small>{item.time}</small>}</div></li>)}{pending && <li className="sia-timeline__item sia-timeline__item--pending"><span className="sia-timeline__dot" /><div>{pending}</div></li>}</ol>; }

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

@@ -6,4 +6,11 @@ export interface TimeParts { hours: number; minutes: number; seconds: number; }
 export function parseTimeValue(value = ""): TimeParts { const [hours = 0, minutes = 0, seconds = 0] = value.split(":").map(Number); return { hours: Math.min(Math.max(hours || 0, 0), 23), minutes: Math.min(Math.max(minutes || 0, 0), 59), seconds: Math.min(Math.max(seconds || 0, 0), 59) }; }
 export function formatTimeValue(parts: TimeParts, showSeconds = false) { const base = `${String(parts.hours).padStart(2, "0")}:${String(parts.minutes).padStart(2, "0")}`; return showSeconds ? `${base}:${String(parts.seconds).padStart(2, "0")}` : base; }
 export function formatDuration(milliseconds: number, showMilliseconds = false) { const total = Math.max(0, milliseconds); const hours = Math.floor(total / 3600000); const minutes = Math.floor((total % 3600000) / 60000); const seconds = Math.floor((total % 60000) / 1000); const ms = Math.floor((total % 1000) / 10); return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}${showMilliseconds ? `.${String(ms).padStart(2, "0")}` : ""}`; }
+/**
+ * Un temps qui s'écoule, dans un sens ou dans l'autre.
+ *
+ * L'intervalle est réglable et vaut 250 ms par défaut : une pendule au
+ * 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>; }

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

@@ -5,4 +5,11 @@ import "./styles.css";
 
 export interface TourStep { target: string; title: ReactNode; description?: ReactNode; }
 export interface TourProps { open: boolean; onOpenChange: (open: boolean) => void; steps: TourStep[]; initialStep?: number; onStepChange?: (step: number) => void; className?: string; }
+/**
+ * Une visite guidée de l'écran.
+ *
+ * Chaque étape vise un élément par son sélecteur plutôt que par une
+ * référence : une visite se déclare souvent loin des composants qu'elle
+ * montre, et parfois avant qu'ils n'existent.
+ */
 export function Tour({ open, onOpenChange, steps, initialStep = 0, onStepChange, className }: TourProps) { const [index, setIndex] = useState(initialStep); useEffect(() => { if (open) setIndex(initialStep); }, [open, initialStep]); useEffect(() => { if (!open) return; const target = document.querySelector<HTMLElement>(steps[index]?.target ?? ""); target?.scrollIntoView({ block: "center", behavior: "smooth" }); target?.setAttribute("data-sia-tour-active", "true"); return () => target?.removeAttribute("data-sia-tour-active"); }, [open, index, steps]); if (!open || typeof document === "undefined" || steps.length === 0) return null; const step = steps[index]; const move = (next: number) => { if (next >= steps.length) { onOpenChange(false); return; } setIndex(next); onStepChange?.(next); }; return createPortal(<div className="sia-tour-backdrop"><section className={cn("sia-tour", className)} role="dialog" aria-modal="true"><small>{index + 1} / {steps.length}</small><h2>{step?.title}</h2>{step?.description && <p>{step.description}</p>}<footer><button type="button" onClick={() => onOpenChange(false)}>Fermer</button><button type="button" disabled={index === 0} onClick={() => move(index - 1)}>Précédent</button><button type="button" onClick={() => move(index + 1)}>{index === steps.length - 1 ? "Terminer" : "Suivant"}</button></footer></section></div>, document.body); }

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

@@ -4,4 +4,11 @@ import "./styles.css";
 
 export interface TransferItem { key: Key; label: ReactNode; disabled?: boolean; }
 export interface TransferProps { items: TransferItem[]; targetKeys: Key[]; onChange: (targetKeys: Key[]) => void; sourceTitle?: string; targetTitle?: string; className?: string; }
+/**
+ * Deux listes, et ce qui passe de l'une à l'autre.
+ *
+ * La forme qui convient quand le choix se compte en dizaines : une liste à
+ * cocher de deux cents lignes ne montre plus ce qui est retenu, alors que
+ * la colonne de droite ne contient que cela.
+ */
 export function Transfer({ items, targetKeys, onChange, sourceTitle = "Disponibles", targetTitle = "Sélectionnés", className }: TransferProps) { const [checked, setChecked] = useState<Key[]>([]); const target = useMemo(() => new Set(targetKeys), [targetKeys]); const renderList = (list: TransferItem[], title: string) => <section><header>{title} <span>{list.length}</span></header>{list.map((item) => <label key={item.key}><input type="checkbox" disabled={item.disabled} checked={checked.includes(item.key)} onChange={(event) => setChecked((current) => event.target.checked ? [...current, item.key] : current.filter((key) => key !== item.key))} />{item.label}</label>)}</section>; const sourceItems = items.filter((item) => !target.has(item.key)); const targetItems = items.filter((item) => target.has(item.key)); return <div className={cn("sia-transfer", className)}>{renderList(sourceItems, sourceTitle)}<div className="sia-transfer__actions"><button type="button" aria-label="Ajouter" onClick={() => { onChange([...new Set([...targetKeys, ...checked])]); setChecked([]); }}>→</button><button type="button" aria-label="Retirer" onClick={() => { onChange(targetKeys.filter((key) => !checked.includes(key))); setChecked([]); }}>←</button></div>{renderList(targetItems, targetTitle)}</div>; }

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

@@ -5,4 +5,11 @@ import "./styles.css";
 export interface TreeNode { key: Key; label: ReactNode; children?: TreeNode[]; disabled?: boolean; }
 export interface TreeProps { nodes: TreeNode[]; defaultExpandedKeys?: Key[]; selectedKey?: Key | undefined; onSelect?: ((node: TreeNode) => void) | undefined; className?: string; }
 function TreeBranch({ nodes, level, expanded, toggle, selectedKey, onSelect }: { nodes: TreeNode[]; level: number; expanded: Set<Key>; toggle: (key: Key) => void; selectedKey?: Key | undefined; onSelect?: ((node: TreeNode) => void) | undefined }) { return <ul role={level === 1 ? "tree" : "group"}>{nodes.map((node) => { const hasChildren = Boolean(node.children?.length); const isExpanded = expanded.has(node.key); return <li key={node.key} role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined} aria-selected={selectedKey === node.key} aria-disabled={node.disabled || undefined}><div className="sia-tree__row" style={{ paddingInlineStart: `${(level - 1) * 1.25}rem` }}>{hasChildren ? <button type="button" aria-label={isExpanded ? "Réduire" : "Développer"} onClick={() => toggle(node.key)}>{isExpanded ? "−" : "+"}</button> : <span className="sia-tree__spacer" />}<button type="button" disabled={node.disabled} className="sia-tree__label" onClick={() => onSelect?.(node)}>{node.label}</button></div>{hasChildren && isExpanded && <TreeBranch nodes={node.children ?? []} level={level + 1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} />}</li>; })}</ul>; }
+/**
+ * Une arborescence qu'on déplie.
+ *
+ * Les branches ouvertes sont un état à part de la sélection : replier un
+ * nœud ne désélectionne pas ce qu'il contient, et rouvrir l'écran ne doit
+ * pas tout refermer.
+ */
 export function Tree({ nodes, defaultExpandedKeys = [], selectedKey, onSelect, className }: TreeProps) { const [expanded, setExpanded] = useState(new Set(defaultExpandedKeys)); const toggle = (key: Key) => setExpanded((current) => { const next = new Set(current); if (next.has(key)) next.delete(key); else next.add(key); return next; }); return <div className={cn("sia-tree", className)}><TreeBranch nodes={nodes} level={1} expanded={expanded} toggle={toggle} selectedKey={selectedKey} onSelect={onSelect} /></div>; }

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

@@ -5,6 +5,13 @@ import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
 export interface TreeSelectProps { nodes: TreeNode[]; value?: Key | undefined; onValueChange?: (value: Key, node: TreeNode) => void; placeholder?: string; className?: string; }
+/**
+ * Un choix dans une arborescence.
+ *
+ * Là où une liste plate perdrait le chemin : « Ventes › Règlements › En
+ * attente » ne se réduit pas à « En attente » sans devenir ambigu dès qu'un
+ * autre nœud porte le même nom.
+ */
 export function TreeSelect({ nodes, value, onValueChange, placeholder: placeholderProp, className }: TreeSelectProps) {
     const locale = useSiaLocale();
     const placeholder = placeholderProp ?? locale.select; const [open, setOpen] = useState(false); const find = (items: TreeNode[]): TreeNode | undefined => { for (const item of items) { if (item.key === value) return item; const child = item.children ? find(item.children) : undefined; if (child) return child; } }; const selected = find(nodes); return <div className={cn("sia-tree-select", className)}><button type="button" className="sia-tree-select__trigger" aria-expanded={open} onClick={() => setOpen(!open)}>{selected?.label ?? placeholder}</button>{open && <div className="sia-tree-select__panel"><Tree nodes={nodes} defaultExpandedKeys={nodes.map((node) => node.key)} selectedKey={value} onSelect={(node) => { onValueChange?.(node.key, node); setOpen(false); }} /></div>}</div>; }

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

@@ -8,6 +8,14 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   size?: "sm" | "md" | "lg" | "xl";
 }
 
+/**
+ * Un titre.
+ *
+ * Le niveau et la taille sont deux props distinctes : le niveau dit la
+ * place dans la hiérarchie du document, la taille ce qu'on voit. Les lier
+ * forcerait à sauter un niveau pour obtenir un titre plus petit — et à
+ * casser le parcours au lecteur d'écran.
+ */
 export function Heading({ level = 2, size = "lg", className, ...props }: HeadingProps) {
   const Component = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   return <Component className={cn("sia-heading", `sia-heading--${size}`, className)} {...props} />;

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

@@ -1,4 +1,12 @@
 import { useEffect } from "react";
 export interface UnsavedChangesGuardProps { when: boolean; message?: string; }
+/**
+ * L'avertissement avant de quitter une saisie en cours.
+ *
+ * Le navigateur n'autorise cette interruption que sur un geste explicite de
+ * quitter, et impose son propre libellé : le message passé ici sert à la
+ * confirmation interne, que `confirmUnsavedNavigation` déclenche avant une
+ * navigation du routeur.
+ */
 export function UnsavedChangesGuard({ when, message = "Des modifications non enregistrées seront perdues." }: UnsavedChangesGuardProps) { useEffect(() => { if (!when) return; const handler = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = message; return message; }; window.addEventListener("beforeunload", handler); return () => window.removeEventListener("beforeunload", handler); }, [when, message]); return null; }
 export function confirmUnsavedNavigation(when: boolean, message = "Des modifications non enregistrées seront perdues.") { return !when || window.confirm(message); }

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

@@ -1,5 +1,12 @@
 import { forwardRef, type InputHTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 export interface WeekPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> { onValueChange?: (value: string) => void; invalid?: boolean; }
+/**
+ * Une semaine, désignée par son numéro.
+ *
+ * Le numéro de semaine est l'unité des plannings et des relevés d'activité,
+ * et il ne se déduit pas d'une date sans convention — celle du navigateur
+ * est celle de la norme ISO.
+ */
 export const WeekPicker = forwardRef<HTMLInputElement, WeekPickerProps>(({ onValueChange, invalid, className, ...props }, ref) => <input {...props} ref={ref} type="week" className={cn("sia-week-picker", invalid && "sia-picker--invalid", className)} aria-invalid={invalid || undefined} onChange={(event) => onValueChange?.(event.target.value)} />);
 WeekPicker.displayName = "WeekPicker";

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

@@ -1,3 +1,10 @@
 import { cn } from "@sia-ui/utils";
 export interface YearPickerProps { value?: number; defaultValue?: number; min?: number; max?: number; onValueChange?: (year: number) => void; className?: string; }
+/**
+ * Une année, choisie dans une plage.
+ *
+ * Les bornes sont déclarées parce qu'elles dépendent du sujet : une année
+ * d'exercice comptable et une année de naissance n'ouvrent pas la même
+ * liste.
+ */
 export function YearPicker({ value, defaultValue = new Date().getFullYear(), min = 1970, max = new Date().getFullYear() + 20, onValueChange, className }: YearPickerProps) { const years = Array.from({ length: Math.max(0, max - min + 1) }, (_, index) => max - index); return <select className={cn("sia-year-picker", className)} value={value} defaultValue={value === undefined ? defaultValue : undefined} onChange={(event) => onValueChange?.(Number(event.target.value))}>{years.map((year) => <option key={year} value={year}>{year}</option>)}</select>; }

package/dist/registry/registry.json

@@ -60,17 +60,24 @@
     },
     {
       "name": "app-shell",
-      "description": "Responsive application shell with collapsible navigation.",
+      "description": "Application shell: three sidebar states, permission filtering, router-agnostic active route, and mobile drawer or bottom tabs.",
       "type": "pattern",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "status": "stable",
       "source": "package",
       "files": [
         "components/AppShell/index.tsx",
+        "components/AppShell/tab-bar.tsx",
         "components/AppShell/styles.css"
       ],
       "dependencies": [
+        "@sia-ui/headless",
+        "@sia-ui/react",
         "@sia-ui/utils"
+      ],
+      "registryDependencies": [
+        "drawer",
+        "sidebar"
       ]
     },
     {
@@ -155,9 +162,9 @@
     },
     {
       "name": "avatar",
-      "description": "Image avatar with automatic initials fallback.",
+      "description": "Avatar and stacked group: name-derived tint, initials, presence, three shapes and variants.",
       "type": "primitive",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -374,22 +381,30 @@
     },
     {
       "name": "crud-page",
-      "description": "CRUD page composition with header, async states and pagination.",
+      "description": "List page for a declared resource: create, view, edit and delete open their own dialogs, each removable and permission-aware.",
       "type": "pattern",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "status": "stable",
       "source": "package",
       "files": [
         "components/CrudPage/index.tsx",
+        "components/CrudPage/dialogs.tsx",
         "components/CrudPage/styles.css"
       ],
       "dependencies": [
+        "@sia-ui/headless",
         "@sia-ui/utils"
       ],
       "registryDependencies": [
-        "async-state",
+        "button",
+        "data-table",
+        "descriptions",
+        "form",
+        "icons",
+        "modal",
         "page-header",
-        "pagination"
+        "pagination",
+        "resource"
       ]
     },
     {
@@ -409,21 +424,35 @@
     },
     {
       "name": "data-table",
-      "description": "Generic typed table with loading and empty states.",
+      "description": "Data table: row actions with permissions and confirmation, selection, card view, density and sorting.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "status": "stable",
       "source": "package",
       "files": [
         "components/DataTable/index.tsx",
+        "components/DataTable/types.ts",
+        "components/DataTable/values.ts",
+        "components/DataTable/row-actions.tsx",
+        "components/DataTable/query.ts",
         "components/DataTable/styles.css"
       ],
       "dependencies": [
         "@sia-ui/headless",
+        "@sia-ui/react",
         "@sia-ui/utils"
       ],
       "registryDependencies": [
-        "icons"
+        "button",
+        "checkbox",
+        "confirm-dialog",
+        "dropdown-menu",
+        "empty-state",
+        "error-state",
+        "icon-button",
+        "icons",
+        "search-input",
+        "skeleton"
       ]
     },
     {
@@ -1276,6 +1305,30 @@
         "@sia-ui/utils"
       ]
     },
+    {
+      "name": "resource",
+      "description": "Declare a resource once: table columns, form fields, detail view, validation, search keys and permissions are all derived from it.",
+      "type": "pattern",
+      "version": "0.2.0",
+      "status": "stable",
+      "source": "package",
+      "files": [
+        "components/Resource/index.tsx"
+      ],
+      "dependencies": [
+        "@sia-ui/headless",
+        "@sia-ui/tokens",
+        "@sia-ui/utils"
+      ],
+      "registryDependencies": [
+        "amount-display",
+        "badge",
+        "data-table",
+        "field",
+        "form",
+        "select"
+      ]
+    },
     {
       "name": "rich-text-editor",
       "description": "Lightweight rich text input with basic formatting commands.",
@@ -1347,9 +1400,9 @@
     },
     {
       "name": "sidebar",
-      "description": "Collapsible application navigation with groups and sub-items.",
+      "description": "Application navigation: unlimited depth, permission filtering, and a rail whose sub-menus open in a flyout.",
       "type": "pattern",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1358,10 +1411,12 @@
       ],
       "dependencies": [
         "@sia-ui/headless",
+        "@sia-ui/tokens",
         "@sia-ui/utils"
       ],
       "registryDependencies": [
-        "icons"
+        "icons",
+        "overlay"
       ]
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/cli",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Install SIA UI components progressively into an application.",
   "keywords": [
     "sia-ui",
@@ -32,6 +32,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16",
+    "@sia-ui/tokens": "0.3.0",
+    "@sia-ui/react": "0.3.0",
+    "@sia-ui/headless": "0.3.0",
+    "@sia-ui/utils": "0.3.0"
+  },
   "scripts": {
     "build": "node scripts/build.mjs",
     "dev": "pnpm build && node dist/index.js",
@@ -39,17 +51,5 @@
     "test": "vitest run",
     "lint": "eslint src && node --check src/index.mjs",
     "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
-  },
-  "devDependencies": {
-    "@sia-ui/headless": "workspace:*",
-    "@sia-ui/react": "workspace:*",
-    "@sia-ui/tokens": "workspace:*",
-    "@sia-ui/utils": "workspace:*",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
   }
-}
+}