@sia-ui/cli 0.1.0

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

@@ -0,0 +1,181 @@
+import { useCallback, type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentSize, ComponentTone } from "@sia-ui/tokens";
+import { useControllableState } from "@sia-ui/react";
+import "./styles.css";
+
+export interface ToggleProps {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  children?: ReactNode;
+  icon?: ReactNode;
+  /** Obligatoire quand le contenu se réduit à une icône. */
+  ariaLabel?: string;
+  size?: ComponentSize;
+  tone?: ComponentTone;
+  variant?: "solid" | "outline" | "ghost";
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Un bouton à deux états.
+ *
+ * Ce n'est pas un `Switch` : un interrupteur décrit un réglage qui persiste,
+ * une bascule décrit un état de l'interface ici et maintenant — gras, filtre
+ * actif, colonne affichée. `aria-pressed` porte cette différence.
+ */
+export function Toggle({
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  children,
+  icon,
+  ariaLabel,
+  size = "md",
+  tone = "primary",
+  variant = "ghost",
+  disabled = false,
+  className,
+}: ToggleProps) {
+  const [pressed, setPressed] = useControllableState({
+    value: pressedProp,
+    defaultValue: defaultPressed,
+    onChange: onPressedChange,
+  });
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "sia-toggle",
+        `sia-toggle--${size}`,
+        `sia-toggle--${variant}`,
+        toneClass("sia-toggle", tone),
+        className,
+      )}
+      aria-pressed={pressed}
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
+      disabled={disabled}
+      onClick={() => setPressed(!pressed)}
+    >
+      {icon && <span className="sia-toggle__icon" aria-hidden="true">{icon}</span>}
+      {children && <span className="sia-toggle__label">{children}</span>}
+    </button>
+  );
+}
+
+export interface ToggleGroupOption {
+  value: string;
+  label?: ReactNode;
+  icon?: ReactNode;
+  ariaLabel?: string;
+  disabled?: boolean;
+}
+
+export interface ToggleGroupProps {
+  options: ToggleGroupOption[];
+  /** `single` : une valeur ou aucune. `multiple` : un tableau. */
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  /** Une chaîne en `single`, un tableau en `multiple` — comme `value`. */
+  onValueChange?: (value: string | string[]) => void;
+  size?: ComponentSize;
+  tone?: ComponentTone;
+  /** Autorise à tout désélectionner en `single`. */
+  deselectable?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * Plusieurs bascules qui partagent une valeur.
+ *
+ * Le repère glisse d'une option à l'autre au lieu de sauter : c'est la même
+ * idée que les onglets, et c'est ce qui rend le changement lisible.
+ */
+export function ToggleGroup({
+  options,
+  type = "single",
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  tone = "primary",
+  deselectable = true,
+  disabled = false,
+  ariaLabel,
+  className,
+}: ToggleGroupProps) {
+  const fallback: string | string[] = type === "single" ? "" : [];
+  const [value, setValue] = useControllableState<string | string[]>({
+    value: valueProp,
+    defaultValue: defaultValue ?? fallback,
+    ...(onValueChange ? { onChange: onValueChange } : {}),
+  });
+
+  const selected = useCallback(
+    (option: string) =>
+      Array.isArray(value) ? value.includes(option) : value === option,
+    [value],
+  );
+
+  const toggle = useCallback(
+    (option: string) => {
+      if (Array.isArray(value)) {
+        setValue(
+          value.includes(option)
+            ? value.filter((entry) => entry !== option)
+            : [...value, option],
+        );
+        return;
+      }
+      if (value === option) setValue(deselectable ? "" : option);
+      else setValue(option);
+    },
+    [deselectable, setValue, value],
+  );
+
+  return (
+    <div
+      className={cn(
+        "sia-toggle-group",
+        `sia-toggle-group--${size}`,
+        toneClass("sia-toggle-group", tone),
+        className,
+      )}
+      role={type === "single" ? "radiogroup" : "group"}
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
+    >
+      {options.map((option) => {
+        const on = selected(option.value);
+        return (
+          <button
+            key={option.value}
+            type="button"
+            className="sia-toggle-group__item"
+            data-selected={on || undefined}
+            {...(type === "single"
+              ? { role: "radio" as const, "aria-checked": on }
+              : { "aria-pressed": on })}
+            {...(option.ariaLabel ? { "aria-label": option.ariaLabel } : {})}
+            disabled={disabled || option.disabled}
+            onClick={() => toggle(option.value)}
+          >
+            {option.icon && (
+              <span className="sia-toggle-group__icon" aria-hidden="true">
+                {option.icon}
+              </span>
+            )}
+            {option.label && (
+              <span className="sia-toggle-group__label">{option.label}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,124 @@
+.sia-toggle {
+  --sia-toggle-color: var(--sia-primary);
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  border: 1px solid transparent;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    transform var(--sia-duration-instant) var(--sia-easing-standard);
+}
+.sia-toggle:active:not(:disabled) { transform: scale(.96); }
+.sia-toggle:disabled { opacity: .5; cursor: not-allowed; }
+
+.sia-toggle--sm { padding: .25rem .5rem; font-size: .8rem; }
+.sia-toggle--md { padding: .4rem .7rem; font-size: .875rem; }
+.sia-toggle--lg { padding: .55rem .9rem; font-size: .95rem; }
+
+.sia-toggle__icon { display: grid; place-items: center; font-size: 1.05em; }
+
+.sia-toggle--ghost:hover:not(:disabled) { background: var(--sia-surface); color: var(--sia-foreground); }
+.sia-toggle--outline { border-color: var(--sia-border); }
+.sia-toggle--outline:hover:not(:disabled) { border-color: var(--sia-border-strong); color: var(--sia-foreground); }
+.sia-toggle--solid { background: var(--sia-surface); color: var(--sia-foreground); }
+
+.sia-toggle[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--sia-toggle-color) 12%, transparent);
+  border-color: color-mix(in srgb, var(--sia-toggle-color) 30%, transparent);
+  color: var(--sia-toggle-color);
+}
+.sia-toggle--solid[aria-pressed="true"] {
+  background: var(--sia-toggle-color);
+  border-color: var(--sia-toggle-color);
+  color: var(--sia-primary-foreground);
+}
+/* L'icône marque le basculement d'un rebond court : le contraste seul se voit
+   mal sur un bouton de barre d'outils. */
+.sia-toggle[aria-pressed="true"] .sia-toggle__icon {
+  animation: sia-toggle-pop var(--sia-duration-base) var(--sia-easing-spring);
+}
+@keyframes sia-toggle-pop {
+  0% { transform: scale(.8); }
+  60% { transform: scale(1.15); }
+  100% { transform: scale(1); }
+}
+
+.sia-toggle--neutral { --sia-toggle-color: var(--sia-foreground); }
+.sia-toggle--primary { --sia-toggle-color: var(--sia-primary); }
+.sia-toggle--info { --sia-toggle-color: var(--sia-info); }
+.sia-toggle--success { --sia-toggle-color: var(--sia-success); }
+.sia-toggle--warning { --sia-toggle-color: var(--sia-warning); }
+.sia-toggle--danger { --sia-toggle-color: var(--sia-danger); }
+
+/* ── Groupe ────────────────────────────────────────────────────────────── */
+
+.sia-toggle-group {
+  --sia-toggle-color: var(--sia-primary);
+  display: inline-flex;
+  padding: .2rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface);
+}
+
+.sia-toggle-group__item {
+  position: relative;
+  /* La pastille se dessine en `z-index: -1`; sans contexte d'empilement
+     propre elle passerait derrière le fond du groupe. */
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-toggle-group__item:hover:not(:disabled) { color: var(--sia-foreground); }
+.sia-toggle-group__item:disabled { opacity: .45; cursor: not-allowed; }
+
+.sia-toggle-group--sm .sia-toggle-group__item { padding: .25rem .55rem; font-size: .8rem; }
+.sia-toggle-group--md .sia-toggle-group__item { padding: .4rem .75rem; font-size: .875rem; }
+.sia-toggle-group--lg .sia-toggle-group__item { padding: .55rem .95rem; font-size: .95rem; }
+
+/* La pastille est un fond posé derrière le texte, pas un changement de
+   couleur du bouton : elle peut ainsi se dessiner en grandissant. */
+.sia-toggle-group__item::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--sia-surface-raised);
+  box-shadow: var(--sia-elevation-rest);
+  opacity: 0;
+  transform: scale(.9);
+  transition:
+    opacity var(--sia-duration-base) var(--sia-easing-standard),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-toggle-group__item[data-selected] {
+  color: var(--sia-toggle-color);
+  font-weight: 600;
+}
+.sia-toggle-group__item[data-selected]::before { opacity: 1; transform: none; }
+
+.sia-toggle-group__icon { display: grid; place-items: center; font-size: 1.05em; }
+
+.sia-toggle-group--neutral { --sia-toggle-color: var(--sia-foreground); }
+.sia-toggle-group--primary { --sia-toggle-color: var(--sia-primary); }
+.sia-toggle-group--info { --sia-toggle-color: var(--sia-info); }
+.sia-toggle-group--success { --sia-toggle-color: var(--sia-success); }
+.sia-toggle-group--warning { --sia-toggle-color: var(--sia-warning); }
+.sia-toggle-group--danger { --sia-toggle-color: var(--sia-danger); }

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

@@ -0,0 +1,163 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import type { ComponentSize, ComponentTone } from "@sia-ui/tokens";
+import { cn } from "@sia-ui/utils";
+import { computeFloatingPosition, type Placement } from "@sia-ui/headless";
+import { Portal } from "@sia-ui/react";
+import "./styles.css";
+
+export type TooltipVariant = "solid" | "outline";
+
+export interface TooltipProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
+  content?: ReactNode;
+  children: ReactNode;
+  tone?: ComponentTone;
+  /** Seules `sm`, `md` et `lg` sont dessinées — voir `styles.css`. */
+  size?: ComponentSize;
+  placement?: Placement;
+  variant?: TooltipVariant;
+  /** Délai avant apparition, en millisecondes. */
+  delay?: number;
+  disabled?: boolean;
+}
+
+/** Alias historique, conservé pour les composants venus du registre. */
+export type ITooltipProps = TooltipProps;
+export type ITooltipVariant = TooltipVariant;
+
+/**
+ * Bulle d'aide positionnée hors du flux.
+ *
+ * Le contenu passe par un portail plutôt que par un `position: absolute` dans
+ * le flux : un tooltip posé dans une `Card` ou une cellule de `DataTable` —
+ * toutes deux en `overflow: hidden` — serait sinon rogné.
+ */
+export function Tooltip({
+  content,
+  children,
+  placement = "top",
+  variant = "solid",
+  tone = "neutral",
+  size = "md",
+  delay = 150,
+  disabled,
+  className,
+  ...props
+}: TooltipProps) {
+  const id = useId();
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const bubbleRef = useRef<HTMLSpanElement>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+    placement: Placement;
+  } | null>(null);
+
+  const clear = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  const show = useCallback(() => {
+    if (disabled) return;
+    clear();
+    timer.current = setTimeout(() => setOpen(true), delay);
+  }, [clear, delay, disabled]);
+
+  const hide = useCallback(() => {
+    clear();
+    setOpen(false);
+    setPosition(null);
+  }, [clear]);
+
+  useEffect(() => clear, [clear]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const update = () => {
+      const trigger = triggerRef.current?.getBoundingClientRect();
+      const bubble = bubbleRef.current?.getBoundingClientRect();
+      if (!trigger || !bubble) return;
+      setPosition(
+        computeFloatingPosition(
+          trigger,
+          { width: bubble.width, height: bubble.height },
+          // La mesure de la fenêtre est le seul apport du web ici : le calcul
+          // lui-même ne connaît aucune plateforme.
+          { width: window.innerWidth, height: window.innerHeight },
+          (placement ?? "top") as Placement,
+          { offset: 6 },
+        ),
+      );
+    };
+
+    const frame = requestAnimationFrame(update);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [hide, open, placement]);
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className={cn("sia-tooltip-trigger", className)}
+        aria-describedby={open ? id : undefined}
+        onPointerEnter={show}
+        onPointerLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+        {...props}
+      >
+        {children}
+      </span>
+
+      {open && !disabled && content != null && (
+        <Portal>
+          <span
+            ref={bubbleRef}
+            id={id}
+            role="tooltip"
+            className={cn(
+              "sia-tooltip",
+              `sia-tooltip-${variant}`,
+              `sia-tooltip-${tone}`,
+              `sia-tooltip-size-${size}`,
+              position && `sia-tooltip-at-${position.placement}`,
+            )}
+            style={{
+              top: position?.top ?? 0,
+              left: position?.left ?? 0,
+              visibility: position ? "visible" : "hidden",
+            }}
+          >
+            {content}
+          </span>
+        </Portal>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,57 @@
+.sia-tooltip-trigger {
+  display: inline-flex;
+}
+
+.sia-tooltip {
+  position: fixed;
+  z-index: 1500;
+  width: max-content;
+  max-width: 16rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid transparent;
+  border-radius: 0.4rem;
+  line-height: 1.35;
+  pointer-events: none;
+  animation: sia-tooltip-in 120ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+
+.sia-tooltip-size-sm { font-size: 0.7rem; }
+.sia-tooltip-size-md { font-size: 0.75rem; }
+.sia-tooltip-size-lg { font-size: 0.85rem; padding: 0.45rem 0.7rem; }
+
+.sia-tooltip-solid {
+  color: var(--sia-background, #fff);
+  background: var(--sia-foreground, #0f172a);
+}
+
+.sia-tooltip-outline {
+  color: var(--sia-foreground, #0f172a);
+  background: var(--sia-background, #fff);
+  border-color: var(--sia-border, #e2e8f0);
+  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
+}
+
+/* Le ton neutre manquait : il tombait sur le `solid` par défaut, ce qui
+   marchait par accident. Il est désormais écrit. */
+.sia-tooltip-neutral.sia-tooltip-solid { background: var(--sia-foreground); }
+.sia-tooltip-primary.sia-tooltip-solid { background: var(--sia-primary, #2563eb); }
+.sia-tooltip-danger.sia-tooltip-solid { background: var(--sia-danger, #dc2626); }
+.sia-tooltip-success.sia-tooltip-solid { background: var(--sia-success, #059669); }
+.sia-tooltip-warning.sia-tooltip-solid { background: var(--sia-warning, #d97706); }
+.sia-tooltip-info.sia-tooltip-solid { background: var(--sia-info, #0284c7); }
+
+.sia-tooltip-neutral.sia-tooltip-outline { color: var(--sia-foreground); }
+.sia-tooltip-primary.sia-tooltip-outline { color: var(--sia-primary, #2563eb); border-color: currentColor; }
+.sia-tooltip-danger.sia-tooltip-outline { color: var(--sia-danger, #dc2626); border-color: currentColor; }
+.sia-tooltip-success.sia-tooltip-outline { color: var(--sia-success, #059669); border-color: currentColor; }
+.sia-tooltip-warning.sia-tooltip-outline { color: var(--sia-warning, #d97706); border-color: currentColor; }
+.sia-tooltip-info.sia-tooltip-outline { color: var(--sia-info, #0284c7); border-color: currentColor; }
+
+@keyframes sia-tooltip-in {
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sia-tooltip { animation-duration: 0.01ms; }
+}

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

@@ -0,0 +1,8 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@sia-ui/utils";
+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; }
+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/Tour/styles.css

@@ -0,0 +1,6 @@
+.sia-tour-backdrop { position:fixed; inset:0; z-index:1700; display:grid; place-items:end center; padding:2rem; pointer-events:none; background:rgb(2 6 23 / .45); }
+.sia-tour { width:min(100%,28rem); padding:1.25rem; border-radius:var(--sia-radius); background:var(--sia-background); box-shadow:0 20px 60px rgb(2 6 23 / .35); pointer-events:auto; }
+.sia-tour h2 { margin:.4rem 0; }
+.sia-tour p,.sia-tour small { color:var(--sia-muted); }
+.sia-tour footer { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
+.sia-tour footer button { min-height:2.25rem; padding:0 .75rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); }

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

@@ -0,0 +1,7 @@
+import { useMemo, useState, type Key, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+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; }
+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/Transfer/styles.css

@@ -0,0 +1,6 @@
+.sia-transfer { display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem; align-items:center; }
+.sia-transfer section { min-height:14rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); overflow:hidden; }
+.sia-transfer section header { display:flex; justify-content:space-between; padding:.75rem; background:var(--sia-surface); font-weight:700; }
+.sia-transfer label { display:flex; gap:.5rem; padding:.55rem .75rem; }
+.sia-transfer__actions { display:grid; gap:.5rem; }
+.sia-transfer__actions button { width:2.25rem; height:2.25rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); }

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

@@ -0,0 +1,8 @@
+import { useState, type Key, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+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>; }
+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/Tree/styles.css

@@ -0,0 +1,6 @@
+.sia-tree ul { padding:0; margin:0; list-style:none; }
+.sia-tree__row { display:flex; align-items:center; gap:.25rem; }
+.sia-tree__row > button { min-height:2rem; border:0; background:transparent; cursor:pointer; }
+.sia-tree__label { flex:1; text-align:left; border-radius:.35rem; }
+.sia-tree [aria-selected="true"] > .sia-tree__row .sia-tree__label { color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 9%,transparent); }
+.sia-tree__spacer { width:2rem; }

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

@@ -0,0 +1,10 @@
+import { useState, type Key } from "react";
+import { Tree, type TreeNode } from "../Tree";
+import { cn } from "@sia-ui/utils";
+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; }
+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/TreeSelect/styles.css

@@ -0,0 +1,3 @@
+.sia-tree-select { position:relative; }
+.sia-tree-select__trigger { width:100%; min-height:2.5rem; padding:0 .75rem; text-align:left; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); }
+.sia-tree-select__panel { position:absolute; z-index:50; top:calc(100% + .35rem); width:100%; max-height:18rem; overflow:auto; padding:.5rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); box-shadow:0 12px 30px rgb(2 6 23 / .15); }

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

@@ -0,0 +1,27 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+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} />;
+}
+
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+  tone?: ComponentTone;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Text({ tone = "neutral", size = "md", className, ...props }: TextProps) {
+  return <p className={cn("sia-text", `sia-text--${tone}`, `sia-text--${size}`, className)} {...props} />;
+}
+
+export function InlineCode({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return <code className={cn("sia-inline-code", className)} {...props} />;
+}

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

@@ -0,0 +1,16 @@
+.sia-heading { margin:0; color:var(--sia-foreground); font-weight:750; line-height:1.15; letter-spacing:-.025em; }
+.sia-heading--sm { font-size:1.125rem; }
+.sia-heading--md { font-size:1.5rem; }
+.sia-heading--lg { font-size:2rem; }
+.sia-heading--xl { font-size:clamp(2.25rem,5vw,3.5rem); }
+.sia-text { margin:0; line-height:1.6; }
+.sia-text--sm { font-size:.875rem; }
+.sia-text--md { font-size:1rem; }
+.sia-text--lg { font-size:1.125rem; }
+.sia-text--neutral { color:var(--sia-foreground); }
+.sia-text--primary { color:var(--sia-primary); }
+.sia-text--info { color:var(--sia-info); }
+.sia-text--danger { color:var(--sia-danger); }
+.sia-text--success { color:var(--sia-success); }
+.sia-text--warning { color:var(--sia-warning); }
+.sia-inline-code { padding:.15rem .4rem; border:1px solid var(--sia-border); border-radius:.35rem; color:var(--sia-foreground); background:var(--sia-surface); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875em; }

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

@@ -0,0 +1,4 @@
+import { useEffect } from "react";
+export interface UnsavedChangesGuardProps { when: boolean; message?: string; }
+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

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

@@ -0,0 +1,3 @@
+import { cn } from "@sia-ui/utils";
+export interface YearPickerProps { value?: number; defaultValue?: number; min?: number; max?: number; onValueChange?: (year: number) => void; className?: string; }
+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>; }