@sia-ui/cli 0.1.0

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

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { useComponentDefaults } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  label?: string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  variant?: "dots" | "ring" | "double-ring";
+  tone?: ComponentTone | "current";
+}
+
+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";
+  const size = sizeProp ?? defaults.size ?? "md";
+  const variant = variantProp ?? defaults.variant ?? "ring";
+  const tone = toneProp ?? defaults.tone ?? "current";
+  return (
+    <span className={cn("sia-spinner-wrap", `sia-spinner-wrap--${tone}`, className)} role="status" {...props}>
+      <span className={cn("sia-spinner", `sia-spinner--${size}`, `sia-spinner--${variant}`)} aria-hidden="true">
+        {variant === "dots" && <span />}
+      </span>
+      <span className="sia-visually-hidden">{label}</span>
+    </span>
+  );
+}

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

@@ -0,0 +1,8 @@
+.sia-spinner-wrap { display:inline-flex; align-items:center; justify-content:center; }
+.sia-spinner-wrap--current { color:currentColor; }
+.sia-spinner-wrap--primary { color:var(--sia-primary); }
+.sia-spinner-wrap--neutral { color:var(--sia-muted); }
+.sia-spinner-wrap--info { color:var(--sia-primary); }
+.sia-spinner-wrap--success { color:var(--sia-success); }
+.sia-spinner-wrap--warning { color:var(--sia-warning); }
+.sia-spinner-wrap--danger { color:var(--sia-danger); }

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Card, CardBody } from "../Card";
+import { Statistic, type StatisticProps } from "../Statistic";
+import "./styles.css";
+
+export interface StatCardProps extends StatisticProps {
+  icon?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+
+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/StatCard/styles.css

@@ -0,0 +1,3 @@
+.sia-stat-card__top { display:flex; align-items:center; justify-content:space-between; min-height:2rem; margin-bottom:.75rem; }
+.sia-stat-card__icon { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.5rem; color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); }
+.sia-stat-card__description { margin-top:.75rem; color:var(--sia-muted); font-size:.82rem; line-height:1.45; }

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { cn, formatCurrency } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface StatisticProps {
+  value: number;
+  label?: ReactNode;
+  format?: "number" | "currency" | "percent";
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  trend?: number;
+  className?: string;
+}
+
+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 } : {}) })
+    : new Intl.NumberFormat(locale, format === "percent" ? { style: "percent", ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) } : { ...(precision !== undefined ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {}) }).format(value);
+  return <div className={cn("sia-statistic", className)}>{label && <span className="sia-statistic__label">{label}</span>}<div className="sia-statistic__value">{prefix}<span>{formatted}</span>{suffix}</div>{trend !== undefined && <span className={cn("sia-statistic__trend", trend > 0 && "sia-statistic__trend--up", trend < 0 && "sia-statistic__trend--down")}>{trend > 0 ? "+" : ""}{new Intl.NumberFormat(locale, { style:"percent", maximumFractionDigits:1 }).format(trend)}</span>}</div>;
+}

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

@@ -0,0 +1,6 @@
+.sia-statistic { display:grid; gap:.35rem; }
+.sia-statistic__label { color:var(--sia-muted); font-size:.82rem; font-weight:650; }
+.sia-statistic__value { display:flex; align-items:baseline; gap:.3rem; color:var(--sia-foreground); font-size:clamp(1.5rem,3vw,2rem); font-weight:780; letter-spacing:-.03em; }
+.sia-statistic__trend { width:max-content; color:var(--sia-muted); font-size:.8rem; font-weight:700; }
+.sia-statistic__trend--up { color:var(--sia-success); }
+.sia-statistic__trend--down { color:var(--sia-danger); }

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

@@ -0,0 +1,108 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { AlertCircleIcon, CheckIcon } from "../Icons";
+import "./styles.css";
+
+export type StepStatus = "done" | "current" | "upcoming" | "error";
+
+export interface StepItem {
+  key: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  /** Forcé au besoin; sinon déduit de `current`. */
+  status?: StepStatus;
+  disabled?: boolean;
+}
+
+export interface StepsProps {
+  items: StepItem[];
+  /** Index de l'étape en cours. Ce qui précède est fait, ce qui suit à venir. */
+  current?: number;
+  orientation?: "horizontal" | "vertical";
+  size?: "sm" | "md";
+  /** Rend les étapes cliquables — pour revenir en arrière dans un tunnel. */
+  onStepClick?: (item: StepItem, index: number) => void;
+  className?: string;
+}
+
+function statusOf(item: StepItem, index: number, current: number): StepStatus {
+  if (item.status) return item.status;
+  if (index < current) return "done";
+  if (index === current) return "current";
+  return "upcoming";
+}
+
+/**
+ * Une progression en étapes.
+ *
+ * Le trait entre deux étapes se remplit plutôt que de changer de couleur d'un
+ * coup : c'est ce qui donne le sens de la marche, vers l'avant.
+ */
+export function Steps({
+  items,
+  current = 0,
+  orientation = "horizontal",
+  size = "md",
+  onStepClick,
+  className,
+}: StepsProps) {
+  return (
+    <ol
+      className={cn(
+        "sia-steps",
+        `sia-steps--${orientation}`,
+        `sia-steps--${size}`,
+        className,
+      )}
+    >
+      {items.map((item, index) => {
+        const status = statusOf(item, index, current);
+        const clickable = Boolean(onStepClick) && !item.disabled;
+
+        return (
+          <li
+            key={item.key}
+            className="sia-steps__item"
+            data-status={status}
+            {...(status === "current" ? { "aria-current": "step" as const } : {})}
+          >
+            <div className="sia-steps__marker">
+              <span className="sia-steps__bullet">
+                {status === "done" ? (
+                  <CheckIcon />
+                ) : status === "error" ? (
+                  <AlertCircleIcon />
+                ) : (
+                  (item.icon ?? <span className="sia-steps__number">{index + 1}</span>)
+                )}
+              </span>
+              {index < items.length - 1 && (
+                <span className="sia-steps__connector" aria-hidden="true">
+                  <span className="sia-steps__connector-fill" />
+                </span>
+              )}
+            </div>
+
+            <div className="sia-steps__body">
+              {clickable ? (
+                <button
+                  type="button"
+                  className="sia-steps__title sia-steps__title--button"
+                  onClick={() => onStepClick?.(item, index)}
+                >
+                  {item.title}
+                </button>
+              ) : (
+                <span className="sia-steps__title">{item.title}</span>
+              )}
+              {item.description && (
+                <span className="sia-steps__description">{item.description}</span>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

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

@@ -0,0 +1,138 @@
+.sia-steps {
+  --sia-step-size: 2rem;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: sia-step;
+}
+.sia-steps--sm { --sia-step-size: 1.5rem; font-size: .8rem; }
+
+.sia-steps__item { display: flex; min-width: 0; }
+.sia-steps__marker { position: relative; display: flex; flex: none; }
+
+.sia-steps__bullet {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: var(--sia-step-size);
+  height: var(--sia-step-size);
+  border: 2px solid var(--sia-border-strong);
+  border-radius: 999px;
+  background: var(--sia-surface-raised);
+  color: var(--sia-muted);
+  font-size: .8rem;
+  font-weight: 600;
+  transition:
+    border-color var(--sia-duration-base) var(--sia-easing-standard),
+    background-color var(--sia-duration-base) var(--sia-easing-standard),
+    color var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-steps__number { font-variant-numeric: tabular-nums; line-height: 1; }
+
+.sia-steps__item[data-status="done"] .sia-steps__bullet {
+  border-color: var(--sia-success);
+  background: var(--sia-success);
+  color: #fff;
+  /* La coche tombe avec un léger rebond quand l'étape bascule. */
+  animation: sia-step-done var(--sia-duration-slow) var(--sia-easing-spring);
+}
+@keyframes sia-step-done {
+  0% { transform: scale(.7); }
+  60% { transform: scale(1.12); }
+  100% { transform: scale(1); }
+}
+
+.sia-steps__item[data-status="current"] .sia-steps__bullet {
+  border-color: var(--sia-primary);
+  color: var(--sia-primary);
+}
+
+/* Le halo de l'étape en cours : lent, discret, il ne fait que signaler « on
+   est ici ». Il s'arrête sous préférence de mouvement réduit, comme le reste. */
+.sia-steps__item[data-status="current"] .sia-steps__bullet::after {
+  content: "";
+  position: absolute;
+  width: var(--sia-step-size);
+  height: var(--sia-step-size);
+  border-radius: 999px;
+  border: 2px solid var(--sia-primary);
+  animation: sia-step-pulse 2s var(--sia-easing-standard) infinite;
+}
+@keyframes sia-step-pulse {
+  0% { opacity: .5; transform: scale(1); }
+  70%, 100% { opacity: 0; transform: scale(1.5); }
+}
+
+.sia-steps__item[data-status="error"] .sia-steps__bullet {
+  border-color: var(--sia-danger);
+  background: var(--sia-danger);
+  color: #fff;
+}
+
+.sia-steps__connector { position: relative; overflow: hidden; background: var(--sia-border); }
+.sia-steps__connector-fill {
+  position: absolute;
+  inset: 0;
+  transform-origin: left;
+  background: var(--sia-success);
+  transform: scaleX(0);
+  transition: transform var(--sia-duration-slow) var(--sia-easing-standard);
+}
+.sia-steps__item[data-status="done"] .sia-steps__connector-fill { transform: scaleX(1); }
+
+.sia-steps__body { display: grid; gap: .15rem; min-width: 0; }
+.sia-steps__title { color: var(--sia-foreground); font-weight: 600; font-size: .875rem; }
+.sia-steps__item[data-status="upcoming"] .sia-steps__title { color: var(--sia-muted); font-weight: 500; }
+.sia-steps__item[data-status="error"] .sia-steps__title { color: var(--sia-danger); }
+.sia-steps__description { color: var(--sia-muted); font-size: .8rem; line-height: 1.45; }
+
+.sia-steps__title--button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-steps__title--button:hover { color: var(--sia-primary); }
+
+/* ── Horizontal ────────────────────────────────────────────────────────── */
+
+.sia-steps--horizontal { align-items: flex-start; gap: 0; }
+.sia-steps--horizontal .sia-steps__item { flex: 1; flex-direction: column; gap: .5rem; }
+.sia-steps--horizontal .sia-steps__marker { align-items: center; width: 100%; }
+.sia-steps--horizontal .sia-steps__connector { flex: 1; height: 2px; margin: 0 .5rem; }
+.sia-steps--horizontal .sia-steps__item:last-child { flex: none; }
+.sia-steps--horizontal .sia-steps__body { padding-right: 1rem; }
+
+/* ── Vertical ──────────────────────────────────────────────────────────── */
+
+.sia-steps--vertical { flex-direction: column; }
+.sia-steps--vertical .sia-steps__item { gap: .875rem; padding-bottom: 1.25rem; }
+.sia-steps--vertical .sia-steps__item:last-child { padding-bottom: 0; }
+.sia-steps--vertical .sia-steps__marker { flex-direction: column; align-items: center; }
+.sia-steps--vertical .sia-steps__connector {
+  flex: 1;
+  width: 2px;
+  min-height: 1rem;
+  margin: .375rem 0 -1.25rem;
+}
+.sia-steps--vertical .sia-steps__connector-fill { transform-origin: top; transform: scaleY(0); }
+.sia-steps--vertical .sia-steps__item[data-status="done"] .sia-steps__connector-fill { transform: scaleY(1); }
+.sia-steps--vertical .sia-steps__body { padding-top: .25rem; }
+
+/* Sous 640 px l'horizontal ne tient plus : cinq étapes côte à côte tronquent
+   tous les libellés. Il bascule en vertical, qui n'a pas cette limite. */
+@media (max-width: 640px) {
+  .sia-steps--horizontal { flex-direction: column; }
+  .sia-steps--horizontal .sia-steps__item { flex-direction: row; gap: .875rem; padding-bottom: 1rem; }
+  .sia-steps--horizontal .sia-steps__marker { flex-direction: column; width: auto; }
+  .sia-steps--horizontal .sia-steps__connector { width: 2px; height: auto; flex: 1; min-height: .75rem; margin: .375rem 0 -1rem; }
+  .sia-steps--horizontal .sia-steps__connector-fill { transform-origin: top; transform: scaleY(0); }
+  .sia-steps--horizontal .sia-steps__item[data-status="done"] .sia-steps__connector-fill { transform: scaleY(1); }
+  .sia-steps--horizontal .sia-steps__body { padding: .25rem 0 0; }
+}

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

@@ -0,0 +1,46 @@
+import { forwardRef, useId, useState, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  label?: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, checked, defaultChecked = false, label, disabled, onCheckedChange, onClick, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const labelId = useId();
+    const isControlled = checked !== undefined;
+    const current = isControlled ? checked : internalChecked;
+
+    return (
+      <span className={cn("sia-switch-field", disabled && "sia-switch-field--disabled", className)}>
+        <button
+          ref={ref}
+          type="button"
+          role="switch"
+          aria-checked={current}
+          aria-labelledby={label ? labelId : undefined}
+          className="sia-switch"
+          disabled={disabled}
+          onClick={(event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+              if (!isControlled) setInternalChecked(!current);
+              onCheckedChange?.(!current);
+            }
+          }}
+          {...props}
+        >
+          <span className="sia-switch__thumb" />
+        </button>
+        {label && <span id={labelId} className="sia-switch-field__label">{label}</span>}
+      </span>
+    );
+  }
+);
+
+Switch.displayName = "Switch";

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

@@ -0,0 +1,26 @@
+.sia-switch-field { display:inline-flex; align-items:center; gap:.65rem; cursor:pointer; }
+.sia-switch-field--disabled { cursor:not-allowed; opacity:.55; }
+.sia-switch-field__label { font-weight:600; }
+.sia-switch { position:relative; width:2.5rem; height:1.4rem; padding:0; border:0; border-radius:9999px; background:var(--sia-border); cursor:pointer; transition:background-color .15s; }
+.sia-switch[aria-checked="true"] { background:var(--sia-primary); }
+.sia-switch:disabled { cursor:not-allowed; }
+.sia-switch__thumb { position:absolute; top:.2rem; left:.2rem; width:1rem; height:1rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(15 23 42 / .3); transition:transform .15s; }
+.sia-switch[aria-checked="true"] .sia-switch__thumb { transform:translateX(1.1rem); }
+
+/* Le pouce rebondit légèrement : c'est ce qui distingue une bascule d'un
+   changement de couleur. `easing.spring` dépasse puis revient. */
+.sia-switch {
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+.sia-switch__thumb {
+  transition:
+    transform var(--sia-duration-base) var(--sia-easing-spring),
+    box-shadow var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+.sia-switch:active:not(:disabled) .sia-switch__thumb {
+  /* Le pouce s'étire sous le doigt, comme un vrai interrupteur. */
+  width: 1.25rem;
+  transition-duration: var(--sia-duration-instant);
+}

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

@@ -0,0 +1,44 @@
+import { createContext, useContext, useId, useState, type KeyboardEvent, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+type TabsContextValue = { value: string; setValue: (value: string) => void; baseId: string };
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export interface TabsProps { value?: string; defaultValue: string; onValueChange?: (value: string) => void; className?: string; children: ReactNode; }
+
+export function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const baseId = useId();
+  const current = value ?? internal;
+  const setValue = (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next); };
+  return <TabsContext.Provider value={{ value: current, setValue, baseId }}><div className={cn("sia-tabs", className)}>{children}</div></TabsContext.Provider>;
+}
+
+export function TabsList({ className, children }: { className?: string; children: ReactNode }) {
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>("[role='tab']:not(:disabled)"));
+    const currentIndex = tabs.indexOf(document.activeElement as HTMLButtonElement);
+    if (currentIndex < 0 || tabs.length === 0) return;
+    event.preventDefault();
+    const index = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (currentIndex + 1) % tabs.length : (currentIndex - 1 + tabs.length) % tabs.length;
+    tabs[index]?.focus();
+    tabs[index]?.click();
+  };
+  return <div role="tablist" className={cn("sia-tabs__list", className)} onKeyDown={onKeyDown}>{children}</div>;
+}
+
+export function TabsTrigger({ value, disabled, children }: { value: string; disabled?: boolean; children: ReactNode }) {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error("TabsTrigger must be used inside Tabs.");
+  const active = context.value === value;
+  return <button type="button" role="tab" id={`${context.baseId}-tab-${value}`} aria-selected={active} aria-controls={`${context.baseId}-panel-${value}`} tabIndex={active ? 0 : -1} disabled={disabled} className="sia-tabs__trigger" onClick={() => context.setValue(value)}>{children}</button>;
+}
+
+export function TabsContent({ value, className, children }: { value: string; className?: string; children: ReactNode }) {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error("TabsContent must be used inside Tabs.");
+  if (context.value !== value) return null;
+  return <div role="tabpanel" id={`${context.baseId}-panel-${value}`} aria-labelledby={`${context.baseId}-tab-${value}`} tabIndex={0} className={cn("sia-tabs__content", className)}>{children}</div>;
+}

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

@@ -0,0 +1,41 @@
+.sia-tabs { display:grid; gap:1rem; }
+.sia-tabs__list { display:flex; gap:.25rem; overflow:auto; border-bottom:1px solid var(--sia-border); }
+.sia-tabs__trigger { position:relative; padding:.65rem .85rem; border:0; color:var(--sia-muted); background:transparent; font:inherit; font-weight:650; cursor:pointer; white-space:nowrap; }
+.sia-tabs__trigger[aria-selected="true"] { color:var(--sia-primary); }
+.sia-tabs__trigger[aria-selected="true"]::after { content:""; position:absolute; right:.5rem; bottom:-1px; left:.5rem; height:2px; background:var(--sia-primary); }
+.sia-tabs__trigger:focus-visible,.sia-tabs__content:focus-visible { outline:3px solid color-mix(in srgb,var(--sia-primary) 30%,transparent); outline-offset:2px; }
+.sia-tabs__content { min-width:0; }
+
+/* L'onglet actif glisse : la barre se déplace plutôt que de sauter. */
+.sia-tabs__list {
+  position: relative;
+}
+
+.sia-tabs__trigger {
+  transition:
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+.sia-tabs__trigger[aria-selected="true"] {
+  color: var(--sia-primary);
+}
+
+.sia-tabs__trigger::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  background: var(--sia-primary);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-tabs__trigger[aria-selected="true"]::after {
+  transform: scaleX(1);
+}
+
+.sia-tabs__panel {
+  animation: sia-slide-up var(--sia-duration-base) var(--sia-easing-entrance);
+}

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

@@ -0,0 +1,6 @@
+import { useState, type KeyboardEvent } from "react";
+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; }
+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/TagsInput/styles.css

@@ -0,0 +1,2 @@
+.sia-tags-input { display:flex; align-items:center; gap:.35rem; min-height:2.5rem; padding:.35rem .5rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); flex-wrap:wrap; }
+.sia-tags-input > input { flex:1; min-width:8rem; border:0; outline:0; background:transparent; font:inherit; }

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

@@ -0,0 +1,21 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+  resize?: "none" | "vertical" | "horizontal" | "both";
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, invalid, resize = "vertical", ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn("sia-textarea", invalid && "sia-textarea--invalid", `sia-textarea--resize-${resize}`, className)}
+      aria-invalid={invalid || undefined}
+      {...props}
+    />
+  )
+);
+
+Textarea.displayName = "Textarea";

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

@@ -0,0 +1,7 @@
+.sia-textarea { width:100%; min-height:2.5rem; padding:.65rem .75rem; color:var(--sia-foreground); background:var(--sia-background); border:1px solid var(--sia-border); border-radius:var(--sia-radius); font:inherit; }
+.sia-textarea { min-height:6rem; line-height:1.5; }
+.sia-textarea--resize-none { resize:none; }
+.sia-textarea--resize-vertical { resize:vertical; }
+.sia-textarea--resize-horizontal { resize:horizontal; }
+.sia-textarea--resize-both { resize:both; }
+.sia-textarea--invalid { border-color:var(--sia-danger); }

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

@@ -0,0 +1,76 @@
+import { forwardRef, useId, useMemo, useRef, useState, type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { CheckIcon, ChevronDownIcon, ClockIcon, XIcon } from "../Icons";
+import { Overlay, type OverlayPlacement } from "../Overlay";
+import { formatTimeValue, parseTimeValue, type TimeParts } from "../Timer";
+import "./styles.css";
+
+export interface TimePickerProps {
+  id?: string;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  min?: string;
+  max?: string;
+  showSeconds?: boolean;
+  minuteStep?: number;
+  secondStep?: number;
+  hourFormat?: 12 | 24;
+  needConfirm?: boolean;
+  allowClear?: boolean;
+  placeholder?: string;
+  disabledTime?: (value: TimeParts) => boolean;
+  renderExtraFooter?: () => ReactNode;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  placement?: OverlayPlacement;
+  tone?: ComponentTone;
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-required"?: boolean;
+}
+
+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);
+}
+
+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) {
+  const generatedId = useId();
+  const controlId = id ?? `sia-time-picker-${generatedId.replace(/:/g, "")}`;
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const current = value ?? internalValue;
+  const [draft, setDraft] = useState<TimeParts>(() => parseTimeValue(current));
+  const open = openProp ?? internalOpen;
+  const setOpen = (next: boolean) => { if (next) setDraft(parseTimeValue(current)); if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); };
+  const update = (next: string) => { if (value === undefined) setInternalValue(next); onValueChange?.(next); };
+  const setRef = (node: HTMLButtonElement | null) => { anchorRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; };
+  const hours = useMemo(() => steppedValues(24, 1), []);
+  const minutes = useMemo(() => steppedValues(60, minuteStep), [minuteStep]);
+  const seconds = useMemo(() => steppedValues(60, secondStep), [secondStep]);
+  const select = (partial: Partial<TimeParts>) => {
+    const next = { ...draft, ...partial };
+    setDraft(next);
+    const serialized = formatTimeValue(next, showSeconds);
+    if (!needConfirm && (!min || serialized >= min) && (!max || serialized <= max) && !disabledTime?.(next)) update(serialized);
+  };
+  const confirm = () => { const serialized = formatTimeValue(draft, showSeconds); if ((!min || serialized >= min) && (!max || serialized <= max) && !disabledTime?.(draft)) { update(serialized); setOpen(false); } };
+  const renderColumn = (label: string, values: number[], selected: number, key: keyof TimeParts) => <div className="sia-time-panel__column" role="listbox" aria-label={label}>{values.map((option) => { const candidate = { ...draft, [key]: option }; const serialized = formatTimeValue(candidate, showSeconds); const optionDisabled = Boolean((min && serialized < min) || (max && serialized > max) || disabledTime?.(candidate)); const display = key === "hours" && hourFormat === 12 ? ((option + 11) % 12) + 1 : option; return <button type="button" role="option" aria-selected={selected === option} disabled={optionDisabled} key={option} onClick={() => select({ [key]: option })}><span>{String(display).padStart(2, "0")}</span>{selected === option && <CheckIcon />}</button>; })}</div>;
+  return <div className={cn("sia-picker", "sia-time-picker", toneClass("sia-tone", tone), invalid && "sia-picker--invalid", disabled && "sia-picker--disabled", className)}>
+    {name && <input type="hidden" name={name} value={current} />}
+    <button ref={setRef} id={controlId} type="button" className="sia-picker__trigger" disabled={disabled} aria-haspopup="dialog" aria-expanded={open} aria-invalid={ariaInvalid ?? (invalid || undefined)} aria-required={ariaRequired ?? (required || undefined)} onClick={() => setOpen(!open)} {...ariaProps}><ClockIcon className="sia-picker__icon" /><span className={cn("sia-picker__value", !current && "sia-picker__placeholder")}>{current || placeholder}</span><span className="sia-picker__actions">{allowClear && current && <span className="sia-picker__clear" title="Effacer" aria-hidden="true" onClick={(event) => { event.stopPropagation(); update(""); }}><XIcon /></span>}<ChevronDownIcon /></span></button>
+    <Overlay open={open} anchorRef={anchorRef} onOpenChange={setOpen} placement={placement} className="sia-picker__overlay"><div className={cn("sia-time-panel", toneClass("sia-tone", tone))}><div className="sia-time-panel__columns">{renderColumn("Heures", hours, draft.hours, "hours")}{renderColumn("Minutes", minutes, draft.minutes, "minutes")}{showSeconds && renderColumn("Secondes", seconds, draft.seconds, "seconds")}</div><footer className="sia-time-panel__footer">{renderExtraFooter?.()}<button type="button" className="sia-time-panel__now" onClick={() => setDraft(parseTimeValue(new Date().toTimeString().slice(0, 8)))}>Maintenant</button>{needConfirm && <button type="button" className="sia-time-panel__confirm" onClick={confirm}>OK</button>}</footer></div></Overlay>
+  </div>;
+});
+TimePicker.displayName = "TimePicker";

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

@@ -0,0 +1,13 @@
+.sia-time-panel { --sia-accent:var(--sia-primary); --sia-accent-foreground:var(--sia-primary-foreground); min-width:15rem; }
+.sia-time-panel__columns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(4.5rem,1fr); height:16rem; }
+.sia-time-panel__column { overflow-y:auto; padding:.35rem; border-right:1px solid var(--sia-border); scrollbar-width:thin; }
+.sia-time-panel__column:last-child { border-right:0; }
+.sia-time-panel__column button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:2.15rem; padding:.35rem .55rem; border:0; border-radius:.45rem; color:var(--sia-foreground); background:transparent; font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; }
+.sia-time-panel__column button:hover:not(:disabled) { background:var(--sia-surface); }
+.sia-time-panel__column button[aria-selected="true"] { color:var(--sia-accent); background:color-mix(in srgb,var(--sia-accent) 11%,transparent); font-weight:750; }
+.sia-time-panel__column button svg { width:.85rem; height:.85rem; }
+.sia-time-panel__column button:disabled { opacity:.3; cursor:not-allowed; }
+.sia-time-panel__footer { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; padding:.55rem; border-top:1px solid var(--sia-border); }
+.sia-time-panel__footer button { min-height:2rem; padding:0 .65rem; border:0; border-radius:.45rem; font:inherit; font-weight:650; cursor:pointer; }
+.sia-time-panel__now { color:var(--sia-accent); background:transparent; }
+.sia-time-panel__confirm { color:var(--sia-accent-foreground); background:var(--sia-accent); }