@sia-ui/cli 0.1.0

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

@@ -0,0 +1,185 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function IconBase({ children, ...props }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function CalendarIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M7 2v3M17 2v3M3.5 9h17" />
+      <rect x="3.5" y="4" width="17" height="17" rx="2.5" />
+      <path d="M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01" />
+    </IconBase>
+  );
+}
+export function ClockIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </IconBase>
+  );
+}
+export function ChevronLeftIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m15 18-6-6 6-6" />
+    </IconBase>
+  );
+}
+export function ChevronRightIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m9 18 6-6-6-6" />
+    </IconBase>
+  );
+}
+export function ChevronDownIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m6 9 6 6 6-6" />
+    </IconBase>
+  );
+}
+export function XIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m6 6 12 12M18 6 6 18" />
+    </IconBase>
+  );
+}
+export function ArrowRightIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M5 12h14M13 6l6 6-6 6" />
+    </IconBase>
+  );
+}
+export function CheckIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m5 12 4 4L19 6" />
+    </IconBase>
+  );
+}
+
+/* Ajoutées pour remplacer les caractères de texte qui servaient d'icônes.
+   Un glyphe hérite de la police du système : il ne se dimensionne pas, ne
+   s'anime pas, et sur certaines fontes il ne s'affiche pas du tout. */
+
+export function ChevronUpIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m18 15-6-6-6 6" />
+    </IconBase>
+  );
+}
+export function SearchIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </IconBase>
+  );
+}
+export function StarIcon({ fill = "none", ...props }: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path
+        fill={fill}
+        d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z"
+      />
+    </IconBase>
+  );
+}
+export function PlusIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 5v14M5 12h14" />
+    </IconBase>
+  );
+}
+export function MinusIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M5 12h14" />
+    </IconBase>
+  );
+}
+export function MoreHorizontalIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="5" cy="12" r="1" />
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+    </IconBase>
+  );
+}
+export function TrashIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M4 7h16M10 11v6M14 11v6" />
+      <path d="M6 7l1 13h10l1-13" />
+      <path d="M9 7V4h6v3" />
+    </IconBase>
+  );
+}
+export function UploadIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 16V4M8 8l4-4 4 4" />
+      <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
+    </IconBase>
+  );
+}
+export function AlertCircleIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v6M12 16.5h.01" />
+    </IconBase>
+  );
+}
+export function InfoIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 7.5h.01" />
+    </IconBase>
+  );
+}
+export function EyeIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12Z" />
+      <circle cx="12" cy="12" r="3" />
+    </IconBase>
+  );
+}
+export function EyeOffIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M3 3l18 18" />
+      <path d="M10.6 6.1A9.9 9.9 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3.1 3.9M6.6 6.7A17 17 0 0 0 2 12s3.5 6 10 6a9.6 9.6 0 0 0 3.4-.6" />
+    </IconBase>
+  );
+}

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

@@ -0,0 +1,6 @@
+import { useEffect, useState } from "react";
+import { FileUpload, type FileUploadProps } from "../FileUpload";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+export interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFilesChange"> { accept?: string; value?: string; onValueChange?: (file: File | null, previewUrl?: string) => void; previewAlt?: string; }
+export function ImageUpload({ accept = "image/*", value, onValueChange, previewAlt = "Aperçu de l'image", className, ...props }: ImageUploadProps) { const [preview, setPreview] = useState(value); useEffect(() => setPreview(value), [value]); useEffect(() => () => { if (preview?.startsWith("blob:")) URL.revokeObjectURL(preview); }, [preview]); const select = (files: File[]) => { const file = files[0]; if (!file) return; const next = URL.createObjectURL(file); setPreview(next); onValueChange?.(file, next); }; return <div className={cn("sia-image-upload", className)}>{preview && <div className="sia-image-upload__preview"><img src={preview} alt={previewAlt} /><button type="button" onClick={() => { setPreview(undefined); onValueChange?.(null); }}>Supprimer</button></div>}<FileUpload {...props} accept={accept} multiple={false} onFilesChange={select} /></div>; }

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

@@ -0,0 +1,4 @@
+.sia-image-upload { display:grid; gap:.75rem; }
+.sia-image-upload__preview { position:relative; width:min(100%,20rem); overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); }
+.sia-image-upload__preview img { display:block; width:100%; max-height:16rem; object-fit:cover; }
+.sia-image-upload__preview button { position:absolute; top:.5rem; right:.5rem; padding:.35rem .55rem; border:0; border-radius:.35rem; color:#fff; background:rgb(15 23 42 / .75); }

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

@@ -0,0 +1,103 @@
+import {
+  forwardRef,
+  useId,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import { Spinner, type SpinnerProps } from "../Spinner";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { useComponentDefaults } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  invalid?: boolean;
+  left?: ReactNode;
+  right?: ReactNode;
+  loading?: boolean;
+  loadingLabel?: string;
+  spinnerProps?: Omit<SpinnerProps, "label">;
+  variant?: "solid" | "outline" | "ghost" | "underline";
+  tone?: ComponentTone;
+  inputSize?: "sm" | "md" | "lg";
+  radius?: "default" | "none" | "sm" | "lg" | "full";
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      invalid,
+      left,
+      right,
+      loading = false,
+      loadingLabel: loadingLabelProp,
+      spinnerProps,
+      id: providedId,
+      variant = "outline",
+      tone = "neutral",
+      inputSize = "md",
+      radius = "default",
+      ...props
+    },
+    ref,
+  ) => {
+    const defaults = useComponentDefaults<InputProps>("input");
+    const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const decorated = Boolean(left || right || loading);
+    const visualClasses = [
+      `sia-input--${variant}`,
+      `sia-input--${inputSize}`,
+      `sia-radius--${radius}`,
+      toneClass("sia-tone", tone),
+    ];
+    const input = (
+      <input
+        ref={ref}
+        id={id}
+        className={cn(
+          "sia-input",
+          ...visualClasses,
+          decorated && "sia-input--embedded",
+          invalid && "sia-input--invalid",
+          className,
+        )}
+        aria-invalid={invalid || undefined}
+        aria-busy={loading || undefined}
+        {...props}
+      />
+    );
+
+    if (!decorated) return input;
+
+    return (
+      <span
+        className={cn(
+          "sia-input-wrapper",
+          ...visualClasses,
+          invalid && "sia-input-wrapper--invalid",
+          loading && "sia-input-wrapper--loading",
+        )}
+      >
+        {loading ? (
+          <span className="sia-input-wrapper__left">
+            <Spinner
+              size="sm"
+              tone="current"
+              {...spinnerProps}
+              label={loadingLabel}
+            />
+          </span>
+        ) : (
+          left && <span className="sia-input-wrapper__left">{left}</span>
+        )}
+        {input}
+        {right && <span className="sia-input-wrapper__right">{right}</span>}
+      </span>
+    );
+  },
+);
+
+Input.displayName = "Input";

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

@@ -0,0 +1,8 @@
+.sia-input-wrapper { display:flex; align-items:center; width:100%; min-height:2.5rem; overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-muted); background:var(--sia-background); }
+.sia-input-wrapper:focus-within { outline:3px solid color-mix(in srgb,var(--sia-primary) 30%,transparent); outline-offset:2px; }
+.sia-input-wrapper--invalid { border-color:var(--sia-danger); }
+.sia-input-wrapper--loading { cursor:progress; }
+.sia-input-wrapper__left,.sia-input-wrapper__right { display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0 .75rem; }
+.sia-input-wrapper__left { padding-right:0; }
+.sia-input-wrapper__right { padding-left:0; }
+.sia-input-wrapper__left svg,.sia-input-wrapper__right svg { display:block; width:1rem; height:1rem; flex:none; }

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

@@ -0,0 +1,196 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { Input, type InputProps } from "../Input";
+import { MinusIcon, PlusIcon } from "../Icons";
+import "./styles.css";
+
+export interface InputNumberProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "right"> {
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Nombre de décimales. Omis, la saisie est laissée telle quelle. */
+  precision?: number;
+  /** Cache les boutons et ne garde que les flèches du clavier. */
+  hideControls?: boolean;
+  /** Unité affichée à droite : kg, %, jours. */
+  suffix?: string;
+}
+
+function clamp(value: number, min: number | undefined, max: number | undefined) {
+  if (min !== undefined && value < min) return min;
+  if (max !== undefined && value > max) return max;
+  return value;
+}
+
+/**
+ * Une saisie numérique avec incrément.
+ *
+ * Le champ reste en `type="text"` avec `inputMode="decimal"` : le `number`
+ * natif refuse `maxLength`, accepte `1e5` et `--`, et perd silencieusement sa
+ * valeur quand elle ne lui plaît pas. On garde le clavier numérique sur
+ * mobile, on renonce au reste.
+ */
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      value: valueProp,
+      defaultValue = null,
+      onValueChange,
+      min,
+      max,
+      step = 1,
+      precision,
+      hideControls = false,
+      suffix,
+      disabled,
+      className,
+      onBlur,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const locale = useSiaLocale();
+    const controlled = valueProp !== undefined;
+    const [internal, setInternal] = useState<number | null>(defaultValue);
+    const value = controlled ? valueProp : internal;
+
+    const format = useCallback(
+      (next: number | null) =>
+        next === null
+          ? ""
+          : precision !== undefined
+            ? next.toFixed(precision)
+            : String(next),
+      [precision],
+    );
+
+    // Le texte est tenu à part du nombre : « 12, » et « 0, » sont des états
+    // de frappe valides qui ne correspondent encore à aucune valeur.
+    const [text, setText] = useState(() => format(value));
+    const editing = useRef(false);
+
+    useEffect(() => {
+      if (!editing.current) setText(format(value));
+    }, [format, value]);
+
+    const commit = useCallback(
+      (next: number | null) => {
+        if (!controlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [controlled, onValueChange],
+    );
+
+    const nudge = useCallback(
+      (direction: 1 | -1) => {
+        const base = value ?? min ?? 0;
+        const raw = base + direction * step;
+        // Le pas flottant produit 0.30000000000000004 : on arrondit au
+        // nombre de décimales du pas, qui est la précision voulue.
+        const decimals =
+          precision ?? (String(step).split(".")[1]?.length ?? 0);
+        const next = clamp(Number(raw.toFixed(decimals)), min, max);
+        commit(next);
+        setText(format(next));
+      },
+      [commit, format, max, min, precision, step, value],
+    );
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        nudge(1);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        nudge(-1);
+      }
+    };
+
+    const atMin = min !== undefined && value !== null && value <= min;
+    const atMax = max !== undefined && value !== null && value >= max;
+
+    return (
+      <Input
+        {...props}
+        ref={ref}
+        type="text"
+        inputMode="decimal"
+        className={cn("sia-input-number", className)}
+        disabled={disabled}
+        value={text}
+        role="spinbutton"
+        {...(min !== undefined ? { "aria-valuemin": min } : {})}
+        {...(max !== undefined ? { "aria-valuemax": max } : {})}
+        {...(value !== null ? { "aria-valuenow": value } : {})}
+        onChange={(event) => {
+          editing.current = true;
+          const raw = event.target.value;
+          setText(raw);
+          if (raw.trim() === "") {
+            commit(null);
+            return;
+          }
+          // La virgule est le séparateur décimal du clavier français.
+          const parsed = Number(raw.replace(",", "."));
+          if (Number.isFinite(parsed)) commit(parsed);
+        }}
+        onBlur={(event) => {
+          editing.current = false;
+          // Le recadrage attend la sortie du champ : borner pendant la frappe
+          // transforme un « 5 » en route vers « 50 » en « 9 » sous les doigts.
+          const next = value === null ? null : clamp(value, min, max);
+          if (next !== value) commit(next);
+          setText(format(next));
+          onBlur?.(event);
+        }}
+        onKeyDown={handleKeyDown}
+        right={
+          hideControls && !suffix ? undefined : (
+            <span className="sia-input-number__side">
+              {suffix && <span className="sia-input-number__suffix">{suffix}</span>}
+              {!hideControls && (
+                <span className="sia-input-number__controls">
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    aria-label={locale.decrement}
+                    disabled={disabled || atMin}
+                    onClick={() => nudge(-1)}
+                  >
+                    <MinusIcon />
+                  </button>
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    aria-label={locale.increment}
+                    disabled={disabled || atMax}
+                    onClick={() => nudge(1)}
+                  >
+                    <PlusIcon />
+                  </button>
+                </span>
+              )}
+            </span>
+          )
+        }
+      />
+    );
+  },
+);
+
+InputNumber.displayName = "InputNumber";

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

@@ -0,0 +1,54 @@
+.sia-input-number { text-align: left; font-variant-numeric: tabular-nums; }
+
+.sia-input-number__side { display: inline-flex; align-items: center; gap: .4rem; }
+.sia-input-number__suffix { color: var(--sia-muted); font-size: .8rem; white-space: nowrap; }
+
+/* Un seul contrôle, pas deux pastilles côte à côte.
+
+   Bordées chacune et séparées d'un écart, les deux touches affichaient
+   quatre pixels de filets entre deux signes qui n'en sont distants que de
+   vingt-quatre : l'œil y lisait deux boutons sans rapport plutôt qu'un pas
+   vers le haut et un pas vers le bas. Le cadre est donc porté par le
+   groupe, et les touches ne partagent qu'un filet. */
+.sia-input-number__controls {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) - 2px);
+  background: var(--sia-surface);
+}
+.sia-input-number__controls button {
+  display: grid;
+  place-items: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  font-size: .72rem;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-input-number__controls button + button {
+  border-left: 1px solid var(--sia-border);
+}
+.sia-input-number__controls button:hover:not(:disabled) {
+  background: var(--sia-surface-raised);
+  color: var(--sia-foreground);
+}
+.sia-input-number__controls button:active:not(:disabled) {
+  background: color-mix(in srgb, var(--sia-primary) 12%, transparent);
+  color: var(--sia-primary);
+}
+/* Le retour tactile du pas : on doit sentir que le nombre a bougé même
+   quand on clique vite plusieurs fois de suite. C'est le signe qui
+   s'enfonce, pas la touche — le groupe rogne ce qui dépasse. */
+.sia-input-number__controls button svg {
+  transition: transform var(--sia-duration-instant) var(--sia-easing-standard);
+}
+.sia-input-number__controls button:active:not(:disabled) svg {
+  transform: scale(.78);
+}
+.sia-input-number__controls button:disabled { opacity: .4; cursor: not-allowed; }

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

@@ -0,0 +1,6 @@
+import { useMemo, useState, type TextareaHTMLAttributes } from "react";
+import { Textarea } from "../Textarea";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+export interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> { value?: string; defaultValue?: string; onValueChange?: (value: string, parsed: unknown | undefined) => void; formatOnBlur?: boolean; }
+export function JsonEditor({ value, defaultValue = "{}", onValueChange, formatOnBlur = true, className, ...props }: JsonEditorProps) { const [internal, setInternal] = useState(defaultValue); const current = value ?? internal; const result = useMemo(() => { try { return { valid: true, parsed: JSON.parse(current) as unknown }; } catch { return { valid: false, parsed: undefined }; } }, [current]); const update = (next: string) => { let parsed: unknown | undefined; try { parsed = JSON.parse(next) as unknown; } catch { parsed = undefined; } if (value === undefined) setInternal(next); onValueChange?.(next, parsed); }; return <div className={cn("sia-code-editor", className)}><Textarea {...props} value={current} invalid={!result.valid} resize="vertical" spellCheck={false} onChange={(event) => update(event.target.value)} onBlur={(event) => { if (formatOnBlur && result.valid) update(JSON.stringify(result.parsed, null, 2)); props.onBlur?.(event); }} /><small className={result.valid ? "is-valid" : "is-invalid"}>{result.valid ? "JSON valide" : "JSON invalide"}</small></div>; }

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

@@ -0,0 +1,2 @@
+.sia-code-editor small.is-valid { color:var(--sia-success); }
+.sia-code-editor small.is-invalid { color:var(--sia-danger); }

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface KpiGridProps extends HTMLAttributes<HTMLDivElement> {
+  columns?: 1 | 2 | 3 | 4;
+}
+
+export function KpiGrid({ columns = 4, className, ...props }: KpiGridProps) {
+  return <div className={cn("sia-kpi-grid", `sia-kpi-grid--${columns}`, className)} {...props} />;
+}

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

@@ -0,0 +1,5 @@
+.sia-kpi-grid { display:grid; gap:1rem; }
+.sia-kpi-grid--1 { grid-template-columns:1fr; }
+.sia-kpi-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
+.sia-kpi-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
+.sia-kpi-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /** Le ton du libellé. Par défaut, la couleur du texte courant. */
+  tone?: ComponentTone;
+  /** Marque le champ comme obligatoire d'une astérisque. */
+  required?: boolean;
+  /** Atténue le libellé — une mention secondaire, une unité. */
+  muted?: boolean;
+}
+
+/** Alias historique, attendu par les composants venus du registre. */
+export type ILabelProps = LabelProps;
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, children, required, muted, tone, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          "sia-label",
+          muted && "sia-label--muted",
+          tone && `sia-label--${tone}`,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {required && (
+          <span className="sia-label__required" aria-hidden="true">
+            *
+          </span>
+        )}
+      </label>
+    );
+  }
+);
+
+Label.displayName = "SiaLabel";

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

@@ -0,0 +1,25 @@
+/* Les variables de ce fichier venaient d'un jeu de tokens disparu —
+   `--sia-color-text-900`, `--sia-font-size-md`, `--sia-color-primary-500`.
+   Aucune n'existe plus dans le thème généré : le libellé ne prenait donc
+   aucune couleur, quel que soit le ton demandé. */
+
+.sia-label {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  color: var(--sia-foreground);
+  font-size: .875rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.sia-label--muted { color: var(--sia-muted); font-weight: 500; }
+
+.sia-label__required { color: var(--sia-danger); }
+
+.sia-label--neutral { color: var(--sia-muted); }
+.sia-label--primary { color: var(--sia-primary); }
+.sia-label--info { color: var(--sia-info); }
+.sia-label--success { color: var(--sia-success); }
+.sia-label--warning { color: var(--sia-warning); }
+.sia-label--danger { color: var(--sia-danger); }

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

@@ -0,0 +1,5 @@
+import { useState, type ReactNode, type TextareaHTMLAttributes } from "react";
+import { Textarea } from "../Textarea";
+import { cn } from "@sia-ui/utils";
+export interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; preview?: (value: string) => ReactNode; }
+export function MarkdownEditor({ value, defaultValue = "", onValueChange, preview, className, ...props }: MarkdownEditorProps) { const [internal, setInternal] = useState(defaultValue); const [mode, setMode] = useState<"write" | "preview">("write"); const current = value ?? internal; const update = (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next); }; return <div className={cn("sia-markdown-editor", className)}><div className="sia-editor-toolbar"><button type="button" aria-pressed={mode === "write"} onClick={() => setMode("write")}>Écrire</button><button type="button" aria-pressed={mode === "preview"} onClick={() => setMode("preview")}>Aperçu</button></div>{mode === "write" ? <Textarea {...props} value={current} onChange={(event) => update(event.target.value)} /> : <div className="sia-editor-preview">{preview ? preview(current) : <pre>{current}</pre>}</div>}</div>; }

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

@@ -0,0 +1,3 @@
+import { Calendar, type CalendarProps } from "../Calendar";
+import { cn } from "@sia-ui/utils";
+export function MiniCalendar({ className, ...props }: CalendarProps) { return <Calendar {...props} className={cn("sia-calendar--mini", className)} />; }