@sia-ui/cli 0.1.0

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

@@ -0,0 +1,104 @@
+import { createPortal } from "react-dom";
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { XIcon } from "../Icons";
+import "./styles.css";
+
+export interface ModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  closeOnBackdrop?: boolean;
+  closeLabel?: string;
+  className?: string;
+}
+
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  closeOnBackdrop = true,
+  closeLabel: closeLabelProp,
+  className
+}: ModalProps) {
+    const locale = useSiaLocale();
+    const closeLabel = closeLabelProp ?? locale.close;
+  const titleId = useId();
+  const descriptionId = useId();
+  const dialogRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousFocus = document.activeElement as HTMLElement | null;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const focusableSelector = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
+    const focusable = () => Array.from(dialogRef.current?.querySelectorAll<HTMLElement>(focusableSelector) ?? []);
+    requestAnimationFrame(() => focusable()[0]?.focus());
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onOpenChange(false);
+      if (event.key === "Tab") {
+        const elements = focusable();
+        if (elements.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+      previousFocus?.focus();
+    };
+  }, [open, onOpenChange]);
+
+  if (!open || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className="sia-modal-backdrop"
+      onMouseDown={(event) => {
+        if (closeOnBackdrop && event.target === event.currentTarget) onOpenChange(false);
+      }}
+    >
+      <section
+        ref={dialogRef}
+        className={cn("sia-modal", className)}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={description ? descriptionId : undefined}
+      >
+        <header className="sia-modal__header">
+          <div>
+            <h2 id={titleId} className="sia-modal__title">{title}</h2>
+            {description && <p id={descriptionId} className="sia-modal__description">{description}</p>}
+          </div>
+          <button type="button" className="sia-modal__close" aria-label={closeLabel} onClick={() => onOpenChange(false)}><XIcon /></button>
+        </header>
+        {children && <div className="sia-modal__body">{children}</div>}
+        {footer && <footer className="sia-modal__footer">{footer}</footer>}
+      </section>
+    </div>,
+    document.body
+  );
+}

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

@@ -0,0 +1,20 @@
+.sia-modal-backdrop { position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:1rem; background:rgb(2 6 23 / .62); backdrop-filter:blur(4px); }
+.sia-modal { width:min(100%,34rem); max-height:min(90vh,48rem); overflow:auto; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.5); color:var(--sia-foreground); background:var(--sia-background); box-shadow:0 24px 70px rgb(2 6 23 / .35); }
+.sia-modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem; border-bottom:1px solid var(--sia-border); }
+.sia-modal__title { margin:0; font-size:1.2rem; }
+.sia-modal__description { margin:.35rem 0 0; color:var(--sia-muted); font-size:.9rem; line-height:1.5; }
+.sia-modal__close { flex:none; padding:.1rem .4rem; border:0; color:var(--sia-muted); background:transparent; font-size:1.4rem; cursor:pointer; }
+.sia-modal__body { padding:1.25rem; }
+.sia-modal__footer { display:flex; justify-content:flex-end; gap:.75rem; padding:1rem 1.25rem; border-top:1px solid var(--sia-border); }
+
+/* Entrée de la modale : le fond se pose, la boîte monte légèrement. Sortie
+   non animée — React démonte l'élément, il n'y a rien à faire attendre. */
+.sia-modal-backdrop,
+.sia-modal__backdrop {
+  animation: sia-fade-in var(--sia-duration-base) var(--sia-easing-entrance);
+}
+
+.sia-modal {
+  animation: sia-scale-in var(--sia-duration-slow) var(--sia-easing-entrance);
+  box-shadow: var(--sia-elevation-modal);
+}

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

@@ -0,0 +1,5 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+export interface MonthPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> { onValueChange?: (value: string) => void; invalid?: boolean; }
+export const MonthPicker = forwardRef<HTMLInputElement, MonthPickerProps>(({ onValueChange, invalid, className, ...props }, ref) => <input {...props} ref={ref} type="month" className={cn("sia-month-picker", invalid && "sia-picker--invalid", className)} aria-invalid={invalid || undefined} onChange={(event) => onValueChange?.(event.target.value)} />);
+MonthPicker.displayName = "MonthPicker";

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

@@ -0,0 +1,133 @@
+import { useMemo, useState } from "react";
+import { cn } from "@sia-ui/utils";
+import type { SelectOption } from "../Select";
+import "./styles.css";
+
+export type { SelectOption } from "../Select";
+import { XIcon } from "../Icons";
+export interface MultiSelectProps {
+  id?: string;
+  options: SelectOption[];
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  placeholder?: string;
+  searchable?: boolean;
+  disabled?: boolean;
+  className?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-required"?: boolean;
+}
+export function MultiSelect({
+  id,
+  options,
+  value,
+  defaultValue = [],
+  onValueChange,
+  placeholder = "Sélectionner",
+  searchable = true,
+  disabled,
+  className,
+  ...ariaProps
+}: MultiSelectProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const current = value ?? internal;
+  const selected = new Set(current);
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return options.filter(
+      (option) =>
+        !needle ||
+        [String(option.label), ...(option.keywords ?? [])]
+          .join(" ")
+          .toLowerCase()
+          .includes(needle),
+    );
+  }, [options, query]);
+  const update = (next: string[]) => {
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  };
+  return (
+    <div
+      className={cn(
+        "sia-multi-select",
+        disabled && "sia-multi-select--disabled",
+        className,
+      )}
+      {...ariaProps}
+    >
+      <div
+        id={id}
+        role="combobox"
+        tabIndex={disabled ? -1 : 0}
+        className="sia-multi-select__trigger"
+        aria-disabled={disabled || undefined}
+        aria-expanded={open}
+        onClick={() => !disabled && setOpen(!open)}
+        onKeyDown={(event) => {
+          if (!disabled && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            setOpen(!open);
+          }
+        }}
+      >
+        {current.length ? (
+          <span className="sia-multi-select__values">
+            {options
+              .filter((option) => selected.has(option.value))
+              .map((option) => (
+                <span key={option.value}>
+                  {option.label}
+                  <button
+                    type="button"
+                    aria-label={`Retirer ${String(option.label)}`}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      update(current.filter((item) => item !== option.value));
+                    }}
+                  >
+                    <XIcon />
+                  </button>
+                </span>
+              ))}
+          </span>
+        ) : (
+          placeholder
+        )}
+      </div>
+      {open && (
+        <div className="sia-multi-select__panel">
+          {searchable && (
+            <input
+              value={query}
+              placeholder="Rechercher..."
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          )}
+          {filtered.map((option) => (
+            <label key={option.value}>
+              <input
+                type="checkbox"
+                checked={selected.has(option.value)}
+                disabled={option.disabled}
+                onChange={(event) =>
+                  update(
+                    event.target.checked
+                      ? [...current, option.value]
+                      : current.filter((item) => item !== option.value),
+                  )
+                }
+              />
+              {option.label}
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+.sia-multi-select__values { display:flex; gap:.3rem; flex-wrap:wrap; }
+.sia-multi-select__panel > input { width:100%; min-height:2.25rem; margin-bottom:.4rem; padding:0 .6rem; border:1px solid var(--sia-border); border-radius:.35rem; }
+.sia-multi-select--disabled { opacity:.55; }

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

@@ -0,0 +1,5 @@
+import { useRef, useState, type ClipboardEvent, type KeyboardEvent } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+export interface OtpInputProps { id?: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; length?: number; inputMode?: "numeric" | "text"; mask?: boolean; disabled?: boolean; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; }
+export function OtpInput({ id, value, defaultValue = "", onValueChange, length = 6, inputMode = "numeric", mask, disabled, className, ...ariaProps }: OtpInputProps) { const [internal, setInternal] = useState(defaultValue); const refs = useRef<Array<HTMLInputElement | null>>([]); const current = (value ?? internal).padEnd(length, " ").slice(0, length).split(""); const update = (chars: string[]) => { const next = chars.join("").trimEnd(); if (value === undefined) setInternal(next); onValueChange?.(next); }; const accept = (text: string) => inputMode === "numeric" ? text.replace(/\D/g, "") : text; const paste = (event: ClipboardEvent<HTMLDivElement>) => { event.preventDefault(); const next = accept(event.clipboardData.getData("text")).slice(0, length).padEnd(length, " ").split(""); update(next); refs.current[Math.min(next.join("").trimEnd().length, length - 1)]?.focus(); }; return <div id={id} className={cn("sia-otp-input", className)} onPaste={paste} {...ariaProps}>{current.map((char, index) => <input key={index} ref={(node) => { refs.current[index] = node; }} value={char.trim()} type={mask ? "password" : "text"} inputMode={inputMode} maxLength={1} disabled={disabled} aria-label={`Caractère ${index + 1}`} onChange={(event) => { const next = [...current]; next[index] = accept(event.target.value).slice(-1) || " "; update(next); if (next[index]?.trim()) refs.current[index + 1]?.focus(); }} onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { if (event.key === "Backspace" && !current[index]?.trim()) refs.current[index - 1]?.focus(); if (event.key === "ArrowLeft") refs.current[index - 1]?.focus(); if (event.key === "ArrowRight") refs.current[index + 1]?.focus(); }} />)}</div>; }

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

@@ -0,0 +1,2 @@
+.sia-otp-input { display:flex; gap:.5rem; }
+.sia-otp-input input { width:2.75rem; height:3rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); font:inherit; font-size:1.25rem; text-align:center; }

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

@@ -0,0 +1,140 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export type OverlayPlacement =
+  | "bottom-start"
+  | "bottom-end"
+  | "top-start"
+  | "top-end";
+
+export interface OverlayProps {
+  open: boolean;
+  anchorRef: RefObject<HTMLElement | null>;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  placement?: OverlayPlacement;
+  offset?: number;
+  matchAnchorWidth?: boolean;
+  viewportPadding?: number;
+  className?: string;
+  id?: string;
+  role?: string;
+}
+
+type Position = CSSProperties & { visibility: "hidden" | "visible" };
+
+export function Overlay({
+  open,
+  anchorRef,
+  onOpenChange,
+  children,
+  placement = "bottom-start",
+  offset = 6,
+  matchAnchorWidth = false,
+  viewportPadding = 8,
+  className,
+  ...props
+}: OverlayProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<Position>({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+  });
+
+  const updatePosition = useCallback(() => {
+    const anchor = anchorRef.current;
+    const overlay = overlayRef.current;
+    if (!anchor || !overlay) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const overlayRect = overlay.getBoundingClientRect();
+    const width = matchAnchorWidth
+      ? Math.max(anchorRect.width, overlayRect.width)
+      : overlayRect.width;
+    const spaceBelow = window.innerHeight - anchorRect.bottom - viewportPadding;
+    const spaceAbove = anchorRect.top - viewportPadding;
+    const requestedTop = placement.startsWith("top");
+    const useTop = requestedTop
+      ? spaceAbove >= overlayRect.height || spaceAbove > spaceBelow
+      : spaceBelow < overlayRect.height && spaceAbove > spaceBelow;
+    const rawTop = useTop
+      ? anchorRect.top - overlayRect.height - offset
+      : anchorRect.bottom + offset;
+    const alignEnd = placement.endsWith("end");
+    const rawLeft = alignEnd
+      ? anchorRect.right - width
+      : anchorRect.left;
+    const maxLeft = Math.max(viewportPadding, window.innerWidth - width - viewportPadding);
+    const maxTop = Math.max(
+      viewportPadding,
+      window.innerHeight - overlayRect.height - viewportPadding,
+    );
+
+    setStyle({
+      position: "fixed",
+      top: Math.min(Math.max(rawTop, viewportPadding), maxTop),
+      left: Math.min(Math.max(rawLeft, viewportPadding), maxLeft),
+      minWidth: matchAnchorWidth ? anchorRect.width : undefined,
+      maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+      visibility: "visible",
+    });
+  }, [anchorRef, matchAnchorWidth, offset, placement, viewportPadding]);
+
+  useLayoutEffect(() => {
+    if (open) updatePosition();
+  }, [children, open, updatePosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const closeOnOutsidePress = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (
+        !anchorRef.current?.contains(target) &&
+        !overlayRef.current?.contains(target)
+      ) {
+        onOpenChange(false);
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onOpenChange(false);
+    };
+    const reposition = () => updatePosition();
+    document.addEventListener("pointerdown", closeOnOutsidePress, true);
+    document.addEventListener("keydown", closeOnEscape);
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePress, true);
+      document.removeEventListener("keydown", closeOnEscape);
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [anchorRef, onOpenChange, open, updatePosition]);
+
+  if (!open || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      ref={overlayRef}
+      className={cn("sia-overlay", className)}
+      style={style}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}

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

@@ -0,0 +1 @@
+.sia-overlay { z-index:1450; }

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

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface PageHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  eyebrow?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ title, description, eyebrow, actions, className }: PageHeaderProps) {
+  return (
+    <header className={cn("sia-page-header", className)}>
+      <div className="sia-page-header__content">
+        {eyebrow && <div className="sia-page-header__eyebrow">{eyebrow}</div>}
+        <h1 className="sia-page-header__title">{title}</h1>
+        {description && <p className="sia-page-header__description">{description}</p>}
+      </div>
+      {actions && <div className="sia-page-header__actions">{actions}</div>}
+    </header>
+  );
+}

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

@@ -0,0 +1,5 @@
+.sia-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
+.sia-page-header__title { margin:0; font-size:clamp(1.5rem,3vw,2.25rem); }
+.sia-page-header__description { margin:.5rem 0 0; color:var(--sia-muted); }
+.sia-page-header__eyebrow { color:var(--sia-primary); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
+.sia-page-header__actions { display:flex; gap:.75rem; flex-wrap:wrap; }

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

@@ -0,0 +1,155 @@
+import { useEffect, useId, useState, type FormEvent } from "react";
+import { cn } from "@sia-ui/utils";
+import { paginationItems, useSiaLocale } from "@sia-ui/headless";
+import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
+import "./styles.css";
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  previousLabel?: string;
+  nextLabel?: string;
+  /**
+   * Ajoute un champ pour sauter directement à une page.
+   *
+   * Sur quarante pages, atteindre la vingt-septième demande sinon de cliquer
+   * dans les ellipses jusqu'à ce qu'elle apparaisse.
+   */
+  jumpTo?: boolean;
+  /** Affiche « Page 3 sur 40 » à côté des numéros. */
+  showTotal?: boolean;
+  /** Masque les libellés et ne garde que les flèches. */
+  compact?: boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * La navigation entre les pages.
+ *
+ * Le calcul des numéros et des ellipses vient de `@sia-ui/headless` :
+ * `usePagination` et ce composant appliquent la même règle, écrite une fois.
+ */
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
+  jumpTo = false,
+  showTotal = false,
+  compact = false,
+  ariaLabel,
+  className,
+}: PaginationProps) {
+  const locale = useSiaLocale();
+  const nextLabel = nextLabelProp ?? locale.next;
+  const previousLabel = previousLabelProp ?? locale.previous;
+
+  // Deux paginations sur la même page ne doivent pas partager l'identifiant
+  // de leur champ : le libellé pointerait alors vers l'autre.
+  const jumpId = useId();
+  const current = Math.min(Math.max(page, 1), Math.max(totalPages, 1));
+  const [draft, setDraft] = useState(String(current));
+
+  // Le champ suit la page quand elle change ailleurs — un clic sur un numéro,
+  // un retour arrière du navigateur.
+  useEffect(() => setDraft(String(current)), [current]);
+
+  if (totalPages <= 1) return null;
+
+  const items = paginationItems(current, totalPages, siblingCount);
+
+  const jump = (event: FormEvent) => {
+    event.preventDefault();
+    const asked = Number(draft);
+    if (!Number.isFinite(asked)) {
+      setDraft(String(current));
+      return;
+    }
+    // Une page hors bornes est ramenée dedans plutôt que refusée : taper 99
+    // sur 40 pages veut dire « la dernière ».
+    onPageChange(Math.min(Math.max(Math.round(asked), 1), totalPages));
+  };
+
+  return (
+    <nav
+      className={cn(
+        "sia-pagination",
+        compact && "sia-pagination--compact",
+        className,
+      )}
+      aria-label={ariaLabel ?? "Pagination"}
+    >
+      <button
+        type="button"
+        className="sia-pagination__step"
+        disabled={current === 1}
+        aria-label={previousLabel}
+        onClick={() => onPageChange(current - 1)}
+      >
+        <ChevronLeftIcon />
+        {!compact && <span>{previousLabel}</span>}
+      </button>
+
+      {items.map((item) =>
+        typeof item === "number" ? (
+          <button
+            type="button"
+            key={item}
+            className="sia-pagination__page"
+            aria-current={item === current ? "page" : undefined}
+            onClick={() => onPageChange(item)}
+          >
+            {item}
+          </button>
+        ) : (
+          <span key={item} className="sia-pagination__gap" aria-hidden="true">
+            …
+          </span>
+        ),
+      )}
+
+      <button
+        type="button"
+        className="sia-pagination__step"
+        disabled={current === totalPages}
+        aria-label={nextLabel}
+        onClick={() => onPageChange(current + 1)}
+      >
+        {!compact && <span>{nextLabel}</span>}
+        <ChevronRightIcon />
+      </button>
+
+      {showTotal && (
+        <span className="sia-pagination__total">
+          {locale.page} {current} / {totalPages}
+        </span>
+      )}
+
+      {jumpTo && (
+        <form className="sia-pagination__jump" onSubmit={jump}>
+          <label htmlFor={jumpId}>{locale.goToPage}</label>
+          <input
+            id={jumpId}
+            // `text` plutôt que `number` : le champ numérique natif accepte
+            // « 1e5 » et « -- », et vide sa valeur sans prévenir quand elle
+            // ne lui plaît pas.
+            type="text"
+            inputMode="numeric"
+            value={draft}
+            aria-label={locale.goToPage}
+            onChange={(event) => setDraft(event.target.value.replace(/\D/g, ""))}
+            onBlur={jump}
+          />
+          <span className="sia-pagination__jump-total" aria-hidden="true">
+            / {totalPages}
+          </span>
+        </form>
+      )}
+    </nav>
+  );
+}