@sia-ui/cli 0.1.0

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

@@ -0,0 +1,151 @@
+.sia-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.sia-drawer-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+}
+
+.sia-drawer {
+  position: absolute;
+  background: var(--sia-color-white);
+  display: flex;
+  flex-direction: column;
+  width: var(--sia-drawer-width);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  will-change: transform;
+}
+
+/* Positions */
+/* RIGHT */
+.sia-drawer-right {
+  right: 0;
+  top: 0;
+  height: 100%;
+  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+
+/* LEFT */
+.sia-drawer-left {
+  left: 0;
+  top: 0;
+  height: 100%;
+  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+
+/* TOP */
+.sia-drawer-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  --sia-drawer-width: 100% !important;
+  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+
+/* BOTTOM */
+.sia-drawer-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  --sia-drawer-width: 100% !important;
+  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+}
+
+
+/* Sizes */
+.sia-drawer-sm { --sia-drawer-width: 320px; }
+.sia-drawer-md { --sia-drawer-width: 420px; }
+.sia-drawer-lg { --sia-drawer-width: 600px; }
+.sia-drawer-xl { --sia-drawer-width: 800px; }
+
+.sia-drawer-header,
+.sia-drawer-footer {
+  padding: 16px;
+  border-bottom: 1px solid var(--sia-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sia-drawer-footer {
+  border-top: 1px solid var(--sia-color-border);
+  margin-top: auto;
+}
+
+.sia-drawer-body {
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.sia-drawer-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.sia-drawer-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
+.sia-drawer-right.is-closing {
+  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+
+.sia-drawer-left.is-closing {
+  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+
+.sia-drawer-top.is-closing {
+  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+
+.sia-drawer-bottom.is-closing {
+  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+}
+
+/* Animations */
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes slideInTop {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes slideInBottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes slideOutRight {
+  to { transform: translateX(100%); }
+}
+
+@keyframes slideOutLeft {
+  to { transform: translateX(-100%); }
+}
+
+@keyframes slideOutTop {
+  to { transform: translateY(-100%); }
+}
+
+@keyframes slideOutBottom {
+  to { transform: translateY(100%); }
+}

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

@@ -0,0 +1,350 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import { useRovingIndex } from "@sia-ui/headless";
+import { Overlay, type OverlayPlacement } from "../Overlay";
+import { CheckIcon } from "../Icons";
+import "./styles.css";
+
+export interface MenuItem {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Un raccourci affiché à droite. Purement indicatif : rien n'est écouté. */
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  /** Affiche une coche. `undefined` : l'entrée n'est pas cochable. */
+  checked?: boolean;
+  description?: ReactNode;
+  onSelect?: () => void;
+}
+
+export interface MenuSeparator {
+  key: string;
+  type: "separator";
+}
+
+export interface MenuLabel {
+  key: string;
+  type: "label";
+  label: ReactNode;
+}
+
+export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
+
+function isActionable(entry: MenuEntry): entry is MenuItem {
+  return !("type" in entry) && !entry.disabled;
+}
+
+export interface MenuListProps {
+  items: MenuEntry[];
+  onSelect: (item: MenuItem) => void;
+  onClose: () => void;
+  /** Index actif, piloté par le parent pour que le clavier suive. */
+  activeIndex: number;
+  onActiveIndexChange: (index: number) => void;
+  id?: string | undefined;
+  className?: string | undefined;
+}
+
+/**
+ * Le panneau seul, sans déclencheur.
+ *
+ * Extrait parce que `DropdownMenu` et `ContextMenu` n'ont en commun que lui :
+ * tout le reste — l'ancrage, le geste d'ouverture — diffère.
+ */
+export function MenuList({
+  items,
+  onSelect,
+  onClose,
+  activeIndex,
+  onActiveIndexChange,
+  id,
+  className,
+}: MenuListProps) {
+  return (
+    <div className={cn("sia-menu", className)} role="menu" id={id}>
+      {items.map((entry, index) => {
+        if ("type" in entry && entry.type === "separator") {
+          return <div key={entry.key} className="sia-menu__separator" role="separator" />;
+        }
+        if ("type" in entry && entry.type === "label") {
+          return (
+            <div key={entry.key} className="sia-menu__group-label">
+              {entry.label}
+            </div>
+          );
+        }
+
+        const item = entry as MenuItem;
+        const checkable = item.checked !== undefined;
+
+        return (
+          <button
+            key={item.key}
+            type="button"
+            className={cn(
+              "sia-menu__item",
+              item.danger && "sia-menu__item--danger",
+            )}
+            role={checkable ? "menuitemcheckbox" : "menuitem"}
+            {...(checkable ? { "aria-checked": item.checked } : {})}
+            disabled={item.disabled}
+            data-active={index === activeIndex || undefined}
+            // Le survol déplace le curseur clavier : sinon la flèche repart
+            // d'où elle en était et l'entrée survolée n'est pas celle qui
+            // s'active à l'Entrée.
+            onMouseEnter={() => onActiveIndexChange(index)}
+            onClick={() => {
+              item.onSelect?.();
+              onSelect(item);
+              onClose();
+            }}
+            // L'entrée porte son propre délai : elles arrivent en cascade,
+            // dans l'ordre de lecture.
+            style={{ ["--sia-menu-index" as string]: index }}
+          >
+            {checkable && (
+              <span className="sia-menu__check" aria-hidden="true">
+                {item.checked && <CheckIcon />}
+              </span>
+            )}
+            {item.icon && <span className="sia-menu__icon" aria-hidden="true">{item.icon}</span>}
+            <span className="sia-menu__text">
+              <span className="sia-menu__label">{item.label}</span>
+              {item.description && (
+                <span className="sia-menu__description">{item.description}</span>
+              )}
+            </span>
+            {item.shortcut && <kbd className="sia-menu__shortcut">{item.shortcut}</kbd>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Les déplacements clavier communs aux deux menus. */
+function useMenuKeyboard(
+  items: MenuEntry[],
+  close: () => void,
+  onSelect: (item: MenuItem) => void,
+) {
+  const disabled = useMemo(
+    () =>
+      items
+        .map((entry, index) => (isActionable(entry) ? -1 : index))
+        .filter((index) => index >= 0),
+    [items],
+  );
+
+  const roving = useRovingIndex({ count: items.length, disabled });
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          roving.next();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          roving.previous();
+          break;
+        case "Home":
+          event.preventDefault();
+          roving.first();
+          break;
+        case "End":
+          event.preventDefault();
+          roving.last();
+          break;
+        case "Enter":
+        case " ": {
+          const entry = items[roving.index];
+          if (entry && isActionable(entry)) {
+            event.preventDefault();
+            entry.onSelect?.();
+            onSelect(entry);
+            close();
+          }
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          close();
+          break;
+        default:
+          break;
+      }
+    },
+    [close, items, onSelect, roving],
+  );
+
+  return { roving, onKeyDown };
+}
+
+export interface DropdownMenuProps {
+  items: MenuEntry[];
+  children: ReactElement<{ onClick?: () => void; "aria-expanded"?: boolean }>;
+  onSelect?: (item: MenuItem) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: OverlayPlacement;
+  matchTriggerWidth?: boolean;
+  className?: string;
+}
+
+/**
+ * Un menu accroché à un bouton.
+ *
+ * Il repose sur `Overlay` : le repositionnement quand la place manque en bas,
+ * la fermeture au clic extérieur et à Échap sont déjà là et ne sont pas
+ * réécrites ici.
+ */
+export function DropdownMenu({
+  items,
+  children,
+  onSelect,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  matchTriggerWidth = false,
+  className,
+}: DropdownMenuProps) {
+  const anchorRef = useRef<HTMLElement>(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange, openProp],
+  );
+
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const handleSelect = useCallback(
+    (item: MenuItem) => onSelect?.(item),
+    [onSelect],
+  );
+  const { roving, onKeyDown } = useMenuKeyboard(items, close, handleSelect);
+
+  const trigger = isValidElement(children)
+    ? cloneElement(children, {
+        ref: anchorRef,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => {
+          children.props.onClick?.();
+          setOpen(!open);
+          roving.reset();
+        },
+      } as never)
+    : children;
+
+  return (
+    <span className="sia-menu-anchor" onKeyDown={onKeyDown}>
+      {trigger}
+      <Overlay
+        open={open}
+        anchorRef={anchorRef}
+        onOpenChange={setOpen}
+        placement={placement}
+        matchAnchorWidth={matchTriggerWidth}
+        className={cn("sia-menu-overlay", className)}
+      >
+        <MenuList
+          items={items}
+          activeIndex={roving.index}
+          onActiveIndexChange={roving.setIndex}
+          onSelect={handleSelect}
+          onClose={close}
+        />
+      </Overlay>
+    </span>
+  );
+}
+
+export interface ContextMenuProps {
+  items: MenuEntry[];
+  children: ReactNode;
+  onSelect?: (item: MenuItem) => void;
+  className?: string;
+}
+
+/**
+ * Le même menu, ouvert au clic droit sur une zone.
+ *
+ * L'ancre est un point, pas un élément : un repère de taille nulle est posé
+ * aux coordonnées du pointeur et confié à `Overlay`, qui ne voit pas la
+ * différence. C'est ce qui évite un second moteur de placement.
+ */
+export function ContextMenu({
+  items,
+  children,
+  onSelect,
+  className,
+}: ContextMenuProps) {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const [point, setPoint] = useState<{ x: number; y: number } | null>(null);
+  const open = point !== null;
+
+  const close = useCallback(() => setPoint(null), []);
+  const handleSelect = useCallback(
+    (item: MenuItem) => onSelect?.(item),
+    [onSelect],
+  );
+  const { roving, onKeyDown } = useMenuKeyboard(items, close, handleSelect);
+
+  return (
+    <div
+      className="sia-context-menu"
+      onKeyDown={onKeyDown}
+      onContextMenu={(event) => {
+        event.preventDefault();
+        setPoint({ x: event.clientX, y: event.clientY });
+        roving.reset();
+      }}
+    >
+      {children}
+      <span
+        ref={anchorRef}
+        className="sia-context-menu__point"
+        style={point ? { top: point.y, left: point.x } : undefined}
+        aria-hidden="true"
+      />
+      <Overlay
+        open={open}
+        anchorRef={anchorRef}
+        onOpenChange={(next) => {
+          if (!next) close();
+        }}
+        placement="bottom-start"
+        offset={2}
+        className={cn("sia-menu-overlay", className)}
+      >
+        <MenuList
+          items={items}
+          activeIndex={roving.index}
+          onActiveIndexChange={roving.setIndex}
+          onSelect={handleSelect}
+          onClose={close}
+        />
+      </Overlay>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+.sia-menu-anchor { display: inline-flex; }
+.sia-context-menu { display: contents; }
+
+/* Le repère du clic droit : de taille nulle, fixé au point cliqué. `Overlay`
+   l'ancre comme n'importe quel élément. */
+.sia-context-menu__point { position: fixed; width: 0; height: 0; }
+
+.sia-menu-overlay {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sia-menu {
+  min-width: 11rem;
+  max-height: min(24rem, 60vh);
+  overflow-y: auto;
+  padding: .3rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  box-shadow: var(--sia-elevation-overlay);
+  animation: sia-menu-in var(--sia-duration-base) var(--sia-easing-entrance);
+  /* L'origine suit l'ancre : un menu qui s'ouvre vers le bas doit grandir
+     depuis le haut, sinon il semble tomber d'ailleurs. */
+  transform-origin: var(--sia-menu-origin, top left);
+}
+
+@keyframes sia-menu-in {
+  from { opacity: 0; transform: scale(.96) translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+
+.sia-menu__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  width: 100%;
+  padding: .45rem .55rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-foreground);
+  font-size: .875rem;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+  /* Cascade d'arrivée, plafonnée : au-delà de huit entrées le décalage se
+     transforme en attente. */
+  animation: sia-menu-item-in var(--sia-duration-base) var(--sia-easing-standard) both;
+  animation-delay: calc(min(var(--sia-menu-index, 0), 8) * 18ms);
+}
+
+@keyframes sia-menu-item-in {
+  from { opacity: 0; transform: translateY(-3px); }
+  to { opacity: 1; transform: none; }
+}
+
+.sia-menu__item[data-active] { background: var(--sia-surface); }
+.sia-menu__item:active { transform: scale(.985); }
+.sia-menu__item:disabled { opacity: .45; cursor: not-allowed; }
+.sia-menu__item:disabled[data-active] { background: transparent; }
+
+.sia-menu__item--danger { color: var(--sia-danger); }
+.sia-menu__item--danger[data-active] {
+  background: color-mix(in srgb, var(--sia-danger) 10%, transparent);
+}
+
+.sia-menu__check { display: grid; place-items: center; flex: none; width: 1rem; font-size: .8rem; color: var(--sia-primary); }
+.sia-menu__icon { display: grid; place-items: center; flex: none; width: 1rem; color: var(--sia-muted); font-size: .95rem; }
+.sia-menu__item--danger .sia-menu__icon { color: inherit; }
+
+.sia-menu__text { flex: 1; display: grid; gap: .1rem; min-width: 0; }
+.sia-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sia-menu__description { color: var(--sia-muted); font-size: .75rem; line-height: 1.35; }
+
+.sia-menu__shortcut {
+  flex: none;
+  padding: .05rem .3rem;
+  border-radius: 4px;
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-family: inherit;
+  font-size: .7rem;
+  letter-spacing: .02em;
+}
+
+.sia-menu__separator { height: 1px; margin: .3rem -.3rem; background: var(--sia-border); }
+.sia-menu__group-label {
+  padding: .4rem .55rem .25rem;
+  color: var(--sia-muted);
+  font-size: .7rem;
+  font-weight: 600;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,3 @@
+import { cn } from "@sia-ui/utils";
+export interface DurationDisplayProps { milliseconds: number; locale?: string; style?: "short" | "long" | "clock"; className?: string; }
+export function DurationDisplay({ milliseconds, locale = "fr-FR", style = "short", className }: DurationDisplayProps) { const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000)); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; if (style === "clock") return <span className={cn("sia-duration-display", className)}>{[hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":")}</span>; const formatter = new Intl.NumberFormat(locale); const parts = [[hours, style === "long" ? "heure" : "h"], [minutes, style === "long" ? "minute" : "min"], [seconds, style === "long" ? "seconde" : "s"]] as const; return <span className={cn("sia-duration-display", className)}>{parts.filter(([value]) => value > 0).map(([value, unit]) => `${formatter.format(value)} ${unit}${style === "long" && value > 1 ? "s" : ""}`).join(" ") || `0 ${style === "long" ? "seconde" : "s"}`}</span>; }

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, compact, className }: EmptyStateProps) {
+  return (
+    <section className={cn("sia-empty-state", compact && "sia-empty-state--compact", className)}>
+      {icon && <div className="sia-empty-state__icon" aria-hidden="true">{icon}</div>}
+      <strong className="sia-empty-state__title">{title}</strong>
+      {description && <p className="sia-empty-state__description">{description}</p>}
+      {action && <div className="sia-empty-state__action">{action}</div>}
+    </section>
+  );
+}

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

@@ -0,0 +1,6 @@
+.sia-empty-state { display:grid; place-items:center; gap:.75rem; min-height:14rem; padding:2rem; text-align:center; border:1px dashed var(--sia-border); border-radius:calc(var(--sia-radius) * 1.25); background:var(--sia-surface); }
+.sia-empty-state--compact { min-height:8rem; padding:1.25rem; }
+.sia-empty-state__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:9999px; color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); font-size:1.25rem; }
+.sia-empty-state__title { font-size:1.05rem; }
+.sia-empty-state__description { max-width:28rem; margin:0; color:var(--sia-muted); line-height:1.5; }
+.sia-empty-state__action { margin-top:.25rem; }

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

@@ -0,0 +1,65 @@
+import { type ReactNode } from "react";
+import { cn, formatDate, formatTimeAgo, normalizeIdentifier, truncate } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface EntityMetaProps {
+  createdAt?: Date | string | number;
+  updatedAt?: Date | string | number;
+  createdBy?: ReactNode;
+  updatedBy?: ReactNode;
+  identifier?: string;
+  status?: ReactNode;
+  locale?: string;
+  className?: string;
+}
+
+function Detail({
+  label,
+  value,
+  emphasized
+}: {
+  label: string;
+  value?: ReactNode;
+  emphasized?: boolean;
+}) {
+  if (!value) return null;
+
+  return (
+    <div className="sia-entity-meta__item">
+      <span className="sia-entity-meta__label">{label}</span>
+      <span className={cn("sia-entity-meta__value", emphasized && "sia-entity-meta__value--strong")}>{value}</span>
+    </div>
+  );
+}
+
+export function EntityMeta({
+  createdAt,
+  updatedAt,
+  createdBy,
+  updatedBy,
+  identifier,
+  status,
+  locale = "fr-FR",
+  className
+}: EntityMetaProps) {
+  const normalizedIdentifier = identifier ? normalizeIdentifier(identifier) : undefined;
+  const createdLabel = createdAt ? formatTimeAgo(createdAt, { locale, prefix: "Créée" }) : undefined;
+  const updatedLabel = updatedAt ? formatTimeAgo(updatedAt, { locale, prefix: "Mise à jour" }) : undefined;
+  const updatedDate = updatedAt ? formatDate(updatedAt, { locale, dateStyle: "medium", timeStyle: "short" }) : undefined;
+
+  return (
+    <section className={cn("sia-entity-meta", className)} aria-label="Métadonnées">
+      <div className="sia-entity-meta__header">
+        {status && <span className="sia-entity-meta__status">{status}</span>}
+        {normalizedIdentifier && <code className="sia-entity-meta__identifier">{truncate(normalizedIdentifier, 36)}</code>}
+      </div>
+      <div className="sia-entity-meta__grid">
+        <Detail label="Création" value={createdLabel} emphasized />
+        <Detail label="Créé par" value={createdBy} />
+        <Detail label="Modification" value={updatedLabel} emphasized />
+        <Detail label="Modifié par" value={updatedBy} />
+        <Detail label="Dernière date" value={updatedDate} />
+      </div>
+    </section>
+  );
+}