@sia-ui/cli 0.1.0

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

@@ -0,0 +1,29 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface AspectRatioProps {
+  /** Le rapport largeur / hauteur. `16 / 9`, `1`, `4 / 3`. */
+  ratio?: number;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Une boîte au rapport imposé.
+ *
+ * Elle existe pour une seule raison : réserver la place avant que l'image ou
+ * l'iframe n'arrive. Sans elle, le contenu qui suit saute au chargement — ce
+ * que mesure le Cumulative Layout Shift, et ce que les gens ressentent comme
+ * une page qui bouge sous le doigt.
+ */
+export function AspectRatio({ ratio = 16 / 9, children, className }: AspectRatioProps) {
+  return (
+    <div
+      className={cn("sia-aspect-ratio", className)}
+      style={{ "--sia-aspect": String(ratio) } as CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+.sia-aspect-ratio {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--sia-radius);
+  aspect-ratio: var(--sia-aspect, 1.7778);
+}
+
+/* Ce qui est placé dedans remplit la boîte : une image au rapport légèrement
+   différent est recadrée plutôt que déformée. */
+.sia-aspect-ratio > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { Alert } from "../Alert";
+import { Button } from "../Button";
+import { EmptyState } from "../EmptyState";
+import "./styles.css";
+
+export interface AsyncStateProps {
+  loading?: boolean;
+  error?: ReactNode;
+  empty?: boolean;
+  emptyTitle?: ReactNode;
+  emptyDescription?: ReactNode;
+  onRetry?: () => void;
+  children: ReactNode;
+}
+
+export function AsyncState({ loading, error, empty, emptyTitle = "No data", emptyDescription, onRetry, children }: AsyncStateProps) {
+  if (loading) return <div className="sia-async-state" role="status"><span className="sia-spinner" /><span>Loading...</span></div>;
+  if (error) return <Alert tone="danger" title="Unable to load data" action={onRetry && <Button variant="outline" onClick={onRetry}>Retry</Button>}>{error}</Alert>;
+  if (empty) return <EmptyState compact title={emptyTitle} description={emptyDescription} />;
+  return <>{children}</>;
+}

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

@@ -0,0 +1 @@
+.sia-async-state { display:grid; place-items:center; gap:.75rem; min-height:12rem; padding:2rem; text-align:center; color:var(--sia-muted); border:1px dashed var(--sia-border); border-radius:var(--sia-radius); }

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

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { cn, formatDate, formatTimeAgo } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface AuditEvent {
+  label: ReactNode;
+  at: Date | string | number;
+  by?: ReactNode;
+  detail?: ReactNode;
+}
+
+export interface AuditMetaProps {
+  events: AuditEvent[];
+  locale?: string;
+  title?: ReactNode;
+  emptyLabel?: ReactNode;
+  className?: string;
+}
+
+export function AuditMeta({ events, locale = "fr-FR", title = "Historique", emptyLabel = "Aucune activité", className }: AuditMetaProps) {
+  return (
+    <section className={cn("sia-audit-meta", className)}>
+      <h2 className="sia-audit-meta__title">{title}</h2>
+      {events.length === 0 ? (
+        <p className="sia-audit-meta__empty">{emptyLabel}</p>
+      ) : (
+        <ol className="sia-audit-meta__list">
+          {events.map((event, index) => (
+            <li className="sia-audit-meta__event" key={`${new Date(event.at).getTime()}-${index}`}>
+              <span className="sia-audit-meta__marker" aria-hidden="true" />
+              <div className="sia-audit-meta__content">
+                <div className="sia-audit-meta__heading"><strong>{event.label}</strong>{event.by && <span>par {event.by}</span>}</div>
+                {event.detail && <div className="sia-audit-meta__detail">{event.detail}</div>}
+                <time className="sia-audit-meta__time" dateTime={new Date(event.at).toISOString()} title={formatDate(event.at, { locale, dateStyle: "full", timeStyle: "short" })}>
+                  {formatTimeAgo(event.at, { locale })}
+                </time>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,12 @@
+.sia-audit-meta { display:grid; gap:1rem; padding:1.25rem; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.25); background:var(--sia-surface); }
+.sia-audit-meta__title { margin:0; font-size:1rem; }
+.sia-audit-meta__empty { margin:0; color:var(--sia-muted); }
+.sia-audit-meta__list { display:grid; gap:0; padding:0; margin:0; list-style:none; }
+.sia-audit-meta__event { position:relative; display:grid; grid-template-columns:1rem minmax(0,1fr); gap:.75rem; padding-bottom:1.25rem; }
+.sia-audit-meta__event:not(:last-child)::before { content:""; position:absolute; top:.75rem; bottom:0; left:.32rem; width:1px; background:var(--sia-border); }
+.sia-audit-meta__event:last-child { padding-bottom:0; }
+.sia-audit-meta__marker { position:relative; z-index:1; width:.7rem; height:.7rem; margin-top:.3rem; border:2px solid var(--sia-surface); border-radius:50%; background:var(--sia-primary); box-shadow:0 0 0 1px var(--sia-primary); }
+.sia-audit-meta__content { display:grid; gap:.25rem; }
+.sia-audit-meta__heading { display:flex; flex-wrap:wrap; gap:.35rem; }
+.sia-audit-meta__heading span,.sia-audit-meta__detail,.sia-audit-meta__time { color:var(--sia-muted); font-size:.84rem; }
+.sia-audit-meta__time { width:max-content; }

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface AuthLayoutProps {
+  title: ReactNode;
+  description?: ReactNode;
+  logo?: ReactNode;
+  aside?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+export function AuthLayout({
+  title,
+  description,
+  logo,
+  aside,
+  children,
+  footer,
+  className,
+}: AuthLayoutProps) {
+  return (
+    <main className={cn("sia-auth-layout", className)}>
+      {aside && <aside>{aside}</aside>}
+      <section>
+        <div className="sia-auth-layout__card">
+          {logo}
+          <header>
+            <h1>{title}</h1>
+            {description && <p>{description}</p>}
+          </header>
+          {children}
+          {footer && <footer>{footer}</footer>}
+        </div>
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,6 @@
+.sia-auth-layout { min-height:32rem; display:grid; grid-template-columns:1fr 1fr; background:var(--sia-surface); }
+.sia-auth-layout > aside { padding:3rem; color:var(--sia-primary-foreground); background:var(--sia-primary); }
+.sia-auth-layout > section { display:grid; place-items:center; padding:2rem; }
+.sia-auth-layout__card { width:min(100%,26rem); display:grid; gap:1.25rem; }
+.sia-auth-layout h1 { margin:0; }
+.sia-auth-layout header p { color:var(--sia-muted); }

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

@@ -0,0 +1,8 @@
+import { useMemo, useState } from "react";
+import { cn } from "@sia-ui/utils";
+import type { SelectOption } from "../Select";
+import { useSiaLocale } from "@sia-ui/headless";
+export interface AutocompleteProps { id?: string; options: SelectOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string, option?: SelectOption) => void; placeholder?: string; allowCustomValue?: boolean; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
+export function Autocomplete({ id, options, value, defaultValue = "", onValueChange, placeholder: placeholderProp, allowCustomValue = true, disabled, className, ...ariaProps }: AutocompleteProps) {
+    const locale = useSiaLocale();
+    const placeholder = placeholderProp ?? locale.searchPlaceholder; const initialLabel = options.find((option) => option.value === defaultValue)?.label; const [internal, setInternal] = useState(defaultValue); const [query, setQuery] = useState(initialLabel ? String(initialLabel) : defaultValue); const [open, setOpen] = useState(false); const current = value ?? internal; const filtered = useMemo(() => { const needle = query.toLowerCase(); return options.filter((option) => [String(option.label), ...(option.keywords ?? [])].join(" ").toLowerCase().includes(needle)); }, [options, query]); const select = (option: SelectOption) => { if (value === undefined) setInternal(option.value); setQuery(String(option.label)); setOpen(false); onValueChange?.(option.value, option); }; return <div id={id} className={cn("sia-autocomplete", className)} {...ariaProps}><input value={query} placeholder={placeholder} disabled={disabled} role="combobox" aria-expanded={open} aria-controls={`${id ?? "sia-autocomplete"}-list`} onFocus={() => setOpen(true)} onChange={(event) => { const next = event.target.value; setQuery(next); setOpen(true); if (allowCustomValue) { if (value === undefined) setInternal(next); onValueChange?.(next); } }} onBlur={() => window.setTimeout(() => setOpen(false), 120)} />{open && <div id={`${id ?? "sia-autocomplete"}-list`} role="listbox">{filtered.map((option) => <button type="button" role="option" aria-selected={current === option.value} key={option.value} disabled={option.disabled} onMouseDown={(event) => event.preventDefault()} onClick={() => select(option)}>{option.label}</button>)}</div>}</div>; }

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

@@ -0,0 +1,23 @@
+import { useState, type ImgHTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> {
+  name: string;
+  size?: "sm" | "md" | "lg";
+  fallback?: string;
+}
+
+function getInitials(name: string) {
+  return name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+}
+
+export function Avatar({ name, size = "md", fallback, className, src, alt, onError, ...props }: AvatarProps) {
+  const [failed, setFailed] = useState(false);
+  return (
+    <span className={cn("sia-avatar", `sia-avatar--${size}`, className)} title={name}>
+      {src && !failed ? <img src={src} alt={alt ?? name} onError={(event) => { setFailed(true); onError?.(event); }} {...props} /> : <span aria-hidden="true">{fallback ?? getInitials(name)}</span>}
+      {!src || failed ? <span className="sia-visually-hidden">{name}</span> : null}
+    </span>
+  );
+}

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

@@ -0,0 +1,5 @@
+.sia-avatar { display:inline-grid; place-items:center; overflow:hidden; border-radius:50%; color:var(--sia-primary-foreground); background:var(--sia-primary); font-weight:750; line-height:1; }
+.sia-avatar img { width:100%; height:100%; object-fit:cover; }
+.sia-avatar--sm { width:2rem; height:2rem; font-size:.72rem; }
+.sia-avatar--md { width:2.75rem; height:2.75rem; font-size:.85rem; }
+.sia-avatar--lg { width:4rem; height:4rem; font-size:1.1rem; }

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

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { cn } 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 BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: ComponentTone;
+  variant?: "soft" | "solid" | "outline";
+  left?: ReactNode;
+  right?: ReactNode;
+  loading?: boolean;
+  loadingLabel?: string;
+  spinnerProps?: Omit<SpinnerProps, "label">;
+}
+
+export function Badge({
+  tone: toneProp,
+  variant: variantProp,
+  left,
+  right,
+  loading = false,
+  loadingLabel: loadingLabelProp,
+  spinnerProps,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  const defaults = useComponentDefaults<BadgeProps>("badge");
+  const tone = toneProp ?? defaults.tone ?? "neutral";
+  const variant = variantProp ?? defaults.variant ?? "soft";
+  const loadingLabel = loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+  return (
+    <span
+      className={cn(
+        "sia-badge",
+        `sia-badge--${tone}`,
+        `sia-badge--${variant}`,
+        loading && "sia-badge--loading",
+        className,
+      )}
+      aria-busy={loading || undefined}
+      {...props}
+    >
+      {loading ? (
+        <span className="sia-badge__left">
+          <Spinner
+            size="xs"
+            tone="current"
+            {...spinnerProps}
+            label={loadingLabel}
+          />
+        </span>
+      ) : (
+        left && <span className="sia-badge__left">{left}</span>
+      )}
+      <span className="sia-badge__content">{children}</span>
+      {right && <span className="sia-badge__right">{right}</span>}
+    </span>
+  );
+}

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

@@ -0,0 +1,26 @@
+.sia-badge { display:inline-flex; align-items:center; min-height:1.5rem; padding:0 .55rem; border:1px solid transparent; border-radius:9999px; font-size:.75rem; font-weight:700; line-height:1; }
+.sia-badge--soft.sia-badge--neutral { color:var(--sia-foreground); background:var(--sia-border); }
+.sia-badge--soft.sia-badge--primary { color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 12%,transparent); }
+.sia-badge--soft.sia-badge--success { color:var(--sia-success); background:color-mix(in srgb,var(--sia-success) 12%,transparent); }
+.sia-badge--soft.sia-badge--warning { color:var(--sia-warning); background:color-mix(in srgb,var(--sia-warning) 12%,transparent); }
+.sia-badge--soft.sia-badge--danger { color:var(--sia-danger); background:color-mix(in srgb,var(--sia-danger) 12%,transparent); }
+.sia-badge--solid.sia-badge--neutral { color:var(--sia-background); background:var(--sia-foreground); }
+.sia-badge--solid.sia-badge--primary { color:var(--sia-primary-foreground); background:var(--sia-primary); }
+.sia-badge--solid.sia-badge--success { color:#fff; background:var(--sia-success); }
+.sia-badge--solid.sia-badge--warning { color:#fff; background:var(--sia-warning); }
+.sia-badge--solid.sia-badge--danger { color:#fff; background:var(--sia-danger); }
+.sia-badge--outline { border-color:currentColor; background:transparent; }
+.sia-badge--outline.sia-badge--primary { color:var(--sia-primary); }
+.sia-badge--outline.sia-badge--success { color:var(--sia-success); }
+.sia-badge--outline.sia-badge--warning { color:var(--sia-warning); }
+.sia-badge--outline.sia-badge--danger { color:var(--sia-danger); }
+.sia-badge__left,.sia-badge__right { display:inline-flex; align-items:center; justify-content:center; flex:none; }
+.sia-badge__left { margin-right:.35rem; }
+.sia-badge__right { margin-left:.35rem; }
+.sia-badge__content { min-width:0; }
+.sia-badge--loading { cursor:progress; }
+/* ComponentTone completeness for components created before the shared contract. */
+.sia-badge--soft.sia-badge--info { color:var(--sia-info); background:color-mix(in srgb,var(--sia-info) 12%,transparent); }
+.sia-badge--solid.sia-badge--info { color:#fff; background:var(--sia-info); }
+.sia-badge--outline.sia-badge--neutral { color:var(--sia-muted); }
+.sia-badge--outline.sia-badge--info { color:var(--sia-info); }

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

@@ -0,0 +1,131 @@
+import { Fragment, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { ChevronRightIcon, MoreHorizontalIcon } from "../Icons";
+import { DropdownMenu, type MenuEntry } from "../DropdownMenu";
+import "./styles.css";
+
+export interface BreadcrumbItem {
+  key?: string;
+  label: ReactNode;
+  href?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  /**
+   * Au-delà, les niveaux intermédiaires passent dans un menu. Le premier et
+   * les deux derniers restent toujours visibles : ce sont les seuls dont on
+   * ait vraiment besoin pour se situer.
+   */
+  maxVisible?: number;
+  separator?: ReactNode;
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * Le chemin parcouru.
+ *
+ * Le dernier élément n'est jamais un lien : c'est la page courante, et un
+ * lien vers l'endroit où l'on se trouve déjà n'existe pas.
+ */
+export function Breadcrumb({
+  items,
+  maxVisible = 4,
+  separator,
+  ariaLabel,
+  className,
+}: BreadcrumbProps) {
+  const locale = useSiaLocale();
+  const mark = separator ?? <ChevronRightIcon />;
+
+  const overflow = items.length > maxVisible ? items.slice(1, -2) : [];
+  const visible =
+    overflow.length > 0 ? [items[0]!, null, ...items.slice(-2)] : items;
+
+  const hidden: MenuEntry[] = overflow.map((item, index) => ({
+    key: item.key ?? `overflow-${index}`,
+    label: item.label,
+    ...(item.icon !== undefined ? { icon: item.icon } : {}),
+    onSelect: () => {
+      if (item.onClick) item.onClick();
+      else if (item.href && typeof window !== "undefined") {
+        window.location.assign(item.href);
+      }
+    },
+  }));
+
+  return (
+    <nav
+      className={cn("sia-breadcrumb", className)}
+      aria-label={ariaLabel ?? locale.breadcrumb}
+    >
+      <ol>
+        {visible.map((item, index) => {
+          const last = index === visible.length - 1;
+
+          return (
+            <Fragment key={item ? (item.key ?? index) : "overflow"}>
+              <li className="sia-breadcrumb__item">
+                {item === null ? (
+                  <DropdownMenu items={hidden}>
+                    <button
+                      type="button"
+                      className="sia-breadcrumb__more"
+                      aria-label={locale.more}
+                    >
+                      <MoreHorizontalIcon />
+                    </button>
+                  </DropdownMenu>
+                ) : last ? (
+                  <span className="sia-breadcrumb__current" aria-current="page">
+                    {item.icon && (
+                      <span className="sia-breadcrumb__icon" aria-hidden="true">
+                        {item.icon}
+                      </span>
+                    )}
+                    {item.label}
+                  </span>
+                ) : item.href ? (
+                  <a
+                    className="sia-breadcrumb__link"
+                    href={item.href}
+                    onClick={item.onClick}
+                  >
+                    {item.icon && (
+                      <span className="sia-breadcrumb__icon" aria-hidden="true">
+                        {item.icon}
+                      </span>
+                    )}
+                    {item.label}
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    className="sia-breadcrumb__link"
+                    onClick={item.onClick}
+                  >
+                    {item.icon && (
+                      <span className="sia-breadcrumb__icon" aria-hidden="true">
+                        {item.icon}
+                      </span>
+                    )}
+                    {item.label}
+                  </button>
+                )}
+              </li>
+              {!last && (
+                <li className="sia-breadcrumb__separator" aria-hidden="true">
+                  {mark}
+                </li>
+              )}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

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

@@ -0,0 +1,76 @@
+.sia-breadcrumb { font-size: .825rem; }
+.sia-breadcrumb ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sia-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; }
+.sia-breadcrumb__icon { display: grid; place-items: center; margin-right: .3rem; font-size: .9rem; }
+
+.sia-breadcrumb__link {
+  display: inline-flex;
+  align-items: center;
+  max-width: 14rem;
+  padding: .2rem .35rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition:
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-breadcrumb__link:hover { background: var(--sia-surface); color: var(--sia-foreground); }
+
+.sia-breadcrumb__current {
+  display: inline-flex;
+  align-items: center;
+  max-width: 18rem;
+  padding: .2rem .35rem;
+  color: var(--sia-foreground);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sia-breadcrumb__separator {
+  display: grid;
+  place-items: center;
+  color: var(--sia-border-strong);
+  font-size: .75rem;
+}
+
+.sia-breadcrumb__more {
+  display: grid;
+  place-items: center;
+  padding: .2rem .35rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font-size: .95rem;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-breadcrumb__more:hover { background: var(--sia-surface); color: var(--sia-foreground); }
+
+/* Sous 480 px seuls les deux derniers niveaux tiennent : le reste se replie
+   plutôt que de passer à la ligne et de repousser la page. */
+@media (max-width: 480px) {
+  .sia-breadcrumb__link { max-width: 8rem; }
+  .sia-breadcrumb__current { max-width: 10rem; }
+}

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

@@ -0,0 +1,91 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Spinner, type SpinnerProps } from "../Spinner";
+import { Tooltip, type TooltipProps } from "../Tooltip";
+import { useComponentDefaults } from "@sia-ui/headless";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "solid" | "outline" | "ghost";
+  /**
+   * Le ton sémantique de l'action.
+   *
+   * `.sia-button--danger` existait dans la feuille de style sans qu'aucune
+   * prop ne permette de l'atteindre : une action de suppression ne pouvait pas
+   * être rouge sans `className` manuel.
+   */
+  tone?: ComponentTone;
+  size?: "sm" | "md" | "lg";
+  radius?: "default" | "none" | "sm" | "lg" | "full";
+  loading?: boolean;
+  loadingLabel?: string;
+  spinnerProps?: Omit<SpinnerProps, "label">;
+  tooltip?: Omit<TooltipProps, "children">;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant: variantProp,
+      tone: toneProp,
+      size: sizeProp,
+      radius: radiusProp,
+      loading,
+      loadingLabel: loadingLabelProp,
+      spinnerProps,
+      tooltip,
+      disabled,
+      leftIcon,
+      rightIcon,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const defaults = useComponentDefaults<ButtonProps>("button");
+    const variant = variantProp ?? defaults.variant ?? "solid";
+    const tone = toneProp ?? defaults.tone ?? "primary";
+    const size = sizeProp ?? defaults.size ?? "md";
+    const radius = radiusProp ?? defaults.radius ?? "default";
+    const loadingLabel =
+      loadingLabelProp ?? defaults.loadingLabel ?? "Chargement";
+    const button = (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "sia-button",
+          `sia-button--${variant}`,
+          `sia-button--${tone}`,
+          `sia-button--${size}`,
+          `sia-radius--${radius}`,
+          className,
+        )}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        {...props}
+      >
+        {loading ? (
+          <Spinner
+            size="sm"
+            tone="current"
+            {...spinnerProps}
+            label={loadingLabel}
+          />
+        ) : (
+          leftIcon
+        )}
+        <span>{children}</span>
+        {!loading && rightIcon}
+      </button>
+    );
+
+    return tooltip ? <Tooltip {...tooltip}>{button}</Tooltip> : button;
+  },
+);
+
+Button.displayName = "Button";