@sia-ui/cli 0.1.0

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

@@ -0,0 +1,103 @@
+.sia-pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
+
+.sia-pagination button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .35rem;
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+  padding: 0 .65rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  color: var(--sia-foreground);
+  background: var(--sia-background);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    transform var(--sia-duration-instant) var(--sia-easing-standard);
+}
+.sia-pagination button:hover:not(:disabled) { background: var(--sia-surface); }
+.sia-pagination button:active:not(:disabled) { transform: scale(.94); }
+.sia-pagination button:disabled { cursor: not-allowed; opacity: .5; }
+.sia-pagination button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 2px;
+}
+
+.sia-pagination button[aria-current="page"] {
+  color: var(--sia-primary-foreground);
+  border-color: var(--sia-primary);
+  background: var(--sia-primary);
+  font-weight: 600;
+  /* Un rebond court à l'arrivée sur la page : sur une barre de dix numéros,
+     le seul changement de couleur se remarque mal. */
+  animation: sia-pagination-current var(--sia-duration-base) var(--sia-easing-spring);
+}
+@keyframes sia-pagination-current {
+  0% { transform: scale(.85); }
+  60% { transform: scale(1.06); }
+  100% { transform: scale(1); }
+}
+
+.sia-pagination__step svg { flex: none; font-size: .9em; }
+.sia-pagination__gap { padding: 0 .25rem; color: var(--sia-muted); }
+
+.sia-pagination--compact .sia-pagination__step { padding: 0 .5rem; }
+
+@media (max-width: 480px) {
+  /* Sur un écran étroit, seuls les pas et la page courante tiennent. */
+  .sia-pagination__step span { display: none; }
+}
+
+/* ── Saut direct ───────────────────────────────────────────────────────── */
+
+.sia-pagination__total {
+  margin-left: .5rem;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sia-pagination__jump {
+  display: flex;
+  align-items: center;
+  gap: .4rem;
+  margin-left: .5rem;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  white-space: nowrap;
+}
+.sia-pagination__jump label { cursor: pointer; }
+
+.sia-pagination__jump input {
+  width: 3.25rem;
+  min-height: 2.25rem;
+  padding: 0 .5rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  transition: border-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-pagination__jump input:focus-visible {
+  border-color: var(--sia-primary);
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 1px;
+}
+
+.sia-pagination__jump-total { font-variant-numeric: tabular-nums; }
+
+@media (max-width: 480px) {
+  /* Le saut direct vaut mieux que la liste des numéros sur un écran étroit :
+     il passe à la ligne entier plutôt que d'être tronqué. */
+  .sia-pagination__jump { width: 100%; margin-left: 0; justify-content: flex-end; }
+}

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

@@ -0,0 +1,125 @@
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { Input, type InputProps } from "../Input";
+import { EyeIcon, EyeOffIcon } from "../Icons";
+import "./styles.css";
+
+export interface PasswordStrength {
+  /** De 0 à 4. */
+  score: number;
+  label: string;
+}
+
+export interface PasswordInputProps extends Omit<InputProps, "type" | "right"> {
+  /** Affiche une jauge sous le champ. */
+  showStrength?: boolean;
+  /** Retire le bouton d'affichage — pour un champ de confirmation. */
+  hideToggle?: boolean;
+  /**
+   * Remplace l'évaluation par défaut. Un projet qui utilise `zxcvbn` branche
+   * son résultat ici; le composant ne dépend de rien.
+   */
+  evaluate?: (value: string) => PasswordStrength;
+}
+
+const LABELS = ["Très faible", "Faible", "Moyen", "Bon", "Excellent"];
+
+/**
+ * L'évaluation par défaut : longueur et variété.
+ *
+ * Elle ne prétend pas mesurer une entropie réelle — c'est le travail de
+ * `zxcvbn`, qui pèse 800 ko. Elle décourage les mots de passe visiblement
+ * courts, ce qui est déjà l'essentiel du gain.
+ */
+function defaultEvaluate(value: string): PasswordStrength {
+  if (!value) return { score: 0, label: "" };
+
+  let score = 0;
+  if (value.length >= 8) score += 1;
+  if (value.length >= 12) score += 1;
+  if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;
+  if (/\d/.test(value) && /[^\w\s]/.test(value)) score += 1;
+
+  return { score, label: LABELS[score] ?? "" };
+}
+
+/**
+ * Un champ de mot de passe.
+ *
+ * Le bouton d'affichage n'est pas un confort : sur mobile, taper une phrase
+ * de passe à l'aveugle est la première raison pour laquelle les gens en
+ * choisissent une courte.
+ */
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      showStrength = false,
+      hideToggle = false,
+      evaluate = defaultEvaluate,
+      className,
+      value,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const locale = useSiaLocale();
+    const [visible, setVisible] = useState(false);
+    const [internal, setInternal] = useState("");
+    const current = value !== undefined ? String(value) : internal;
+
+    const strength = useMemo(
+      () => (showStrength ? evaluate(current) : null),
+      [current, evaluate, showStrength],
+    );
+
+    return (
+      <div className={cn("sia-password", className)}>
+        <Input
+          {...props}
+          ref={ref}
+          type={visible ? "text" : "password"}
+          {...(value !== undefined ? { value } : {})}
+          onChange={(event) => {
+            if (value === undefined) setInternal(event.target.value);
+            onChange?.(event);
+          }}
+          right={
+            hideToggle ? undefined : (
+              <button
+                type="button"
+                className="sia-password__toggle"
+                // Hors du parcours de tabulation : entre le champ et le
+                // bouton d'envoi, personne n'attend une étape de plus.
+                tabIndex={-1}
+                aria-label={
+                  visible ? locale.hidePassword : locale.showPassword
+                }
+                aria-pressed={visible}
+                onClick={() => setVisible(!visible)}
+              >
+                {visible ? <EyeOffIcon /> : <EyeIcon />}
+              </button>
+            )
+          }
+        />
+
+        {strength && current && (
+          <div className="sia-password__strength" data-score={strength.score}>
+            <div className="sia-password__bars" aria-hidden="true">
+              {[0, 1, 2, 3].map((index) => (
+                <span key={index} data-filled={index < strength.score || undefined} />
+              ))}
+            </div>
+            <span className="sia-password__label" role="status">
+              {strength.label}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+PasswordInput.displayName = "PasswordInput";

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

@@ -0,0 +1,58 @@
+.sia-password { display: grid; gap: .4rem; }
+
+.sia-password__toggle {
+  display: grid;
+  place-items: center;
+  padding: .2rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition:
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-password__toggle:hover { color: var(--sia-foreground); }
+.sia-password__toggle[aria-pressed="true"] { color: var(--sia-primary); }
+/* L'œil pivote légèrement au basculement : sans cela, le changement d'icône
+   passe inaperçu et on clique deux fois. */
+.sia-password__toggle:active { transform: scale(.85); }
+
+.sia-password__strength {
+  --sia-strength-color: var(--sia-danger);
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  animation: sia-fade-in var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-password__strength[data-score="2"] { --sia-strength-color: var(--sia-warning); }
+.sia-password__strength[data-score="3"] { --sia-strength-color: var(--sia-info); }
+.sia-password__strength[data-score="4"] { --sia-strength-color: var(--sia-success); }
+
+.sia-password__bars { display: flex; flex: 1; gap: 3px; }
+.sia-password__bars span {
+  flex: 1;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--sia-border);
+  transform-origin: left;
+  transition:
+    background-color var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-password__bars span[data-filled] {
+  background: var(--sia-strength-color);
+  animation: sia-password-bar var(--sia-duration-base) var(--sia-easing-standard);
+}
+@keyframes sia-password-bar {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.sia-password__label {
+  flex: none;
+  min-width: 5rem;
+  color: var(--sia-strength-color);
+  font-size: .75rem;
+  font-weight: 600;
+  text-align: right;
+}

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+export interface PermissionGateProps { permissions: string[]; require: string | string[]; mode?: "all" | "any"; fallback?: ReactNode; children: ReactNode; }
+export function PermissionGate({ permissions, require, mode = "all", fallback = null, children }: PermissionGateProps) { const expected = Array.isArray(require) ? require : [require]; const allowed = mode === "all" ? expected.every((item) => permissions.includes(item)) : expected.some((item) => permissions.includes(item)); return <>{allowed ? children : fallback}</>; }

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

@@ -0,0 +1,189 @@
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { Input, type InputProps } from "../Input";
+import "./styles.css";
+
+export interface PhoneCountry {
+  /** Code ISO 3166-1 alpha-2. */
+  code: string;
+  /** Indicatif, avec le `+`. */
+  dial: string;
+  label: string;
+  flag: string;
+  /** Nombre de chiffres attendus après l'indicatif. */
+  digits?: number;
+  /** Découpage visuel du numéro national : `[1, 2, 2, 2, 2]` → `6 12 34 56 78`. */
+  groups?: number[];
+}
+
+/**
+ * Les pays servis par défaut.
+ *
+ * Volontairement court et centré sur la zone franc : une liste mondiale pèse
+ * 40 ko pour être fausse six mois plus tard. La prop `countries` la remplace
+ * entièrement quand un projet en a besoin d'une autre.
+ */
+export const DEFAULT_COUNTRIES: PhoneCountry[] = [
+  { code: "CM", dial: "+237", label: "Cameroun", flag: "🇨🇲", digits: 9, groups: [1, 2, 2, 2, 2] },
+  { code: "CI", dial: "+225", label: "Côte d'Ivoire", flag: "🇨🇮", digits: 10, groups: [2, 2, 2, 2, 2] },
+  { code: "SN", dial: "+221", label: "Sénégal", flag: "🇸🇳", digits: 9, groups: [2, 3, 2, 2] },
+  { code: "GA", dial: "+241", label: "Gabon", flag: "🇬🇦", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "CG", dial: "+242", label: "Congo", flag: "🇨🇬", digits: 9, groups: [2, 3, 2, 2] },
+  { code: "CD", dial: "+243", label: "RD Congo", flag: "🇨🇩", digits: 9, groups: [3, 3, 3] },
+  { code: "BF", dial: "+226", label: "Burkina Faso", flag: "🇧🇫", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "ML", dial: "+223", label: "Mali", flag: "🇲🇱", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "BJ", dial: "+229", label: "Bénin", flag: "🇧🇯", digits: 10, groups: [2, 2, 2, 2, 2] },
+  { code: "TG", dial: "+228", label: "Togo", flag: "🇹🇬", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "TD", dial: "+235", label: "Tchad", flag: "🇹🇩", digits: 8, groups: [2, 2, 2, 2] },
+  { code: "FR", dial: "+33", label: "France", flag: "🇫🇷", digits: 9, groups: [1, 2, 2, 2, 2] },
+  { code: "BE", dial: "+32", label: "Belgique", flag: "🇧🇪", digits: 9, groups: [3, 2, 2, 2] },
+  { code: "CA", dial: "+1", label: "Canada", flag: "🇨🇦", digits: 10, groups: [3, 3, 4] },
+];
+
+export interface PhoneInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "left"> {
+  /** Le numéro complet, indicatif compris : `+237612345678`. */
+  value?: string;
+  defaultValue?: string;
+  /** Reçoit toujours la forme E.164, sans espaces. */
+  onValueChange?: (value: string) => void;
+  countries?: PhoneCountry[];
+  /** Pays présélectionné, par code ISO. */
+  defaultCountry?: string;
+  /** Verrouille le pays et masque le sélecteur. */
+  lockCountry?: boolean;
+}
+
+function digitsOnly(value: string) {
+  return value.replace(/\D/g, "");
+}
+
+/** Découpe le numéro national selon le format du pays. */
+function group(value: string, groups: number[] | undefined) {
+  if (!groups || groups.length === 0) return value;
+  const parts: string[] = [];
+  let rest = value;
+  for (const size of groups) {
+    if (!rest) break;
+    parts.push(rest.slice(0, size));
+    rest = rest.slice(size);
+  }
+  if (rest) parts.push(rest);
+  return parts.join(" ");
+}
+
+/** Retrouve le pays d'un numéro E.164 — le plus long indicatif d'abord. */
+function detect(value: string, countries: PhoneCountry[]) {
+  return [...countries]
+    .sort((a, b) => b.dial.length - a.dial.length)
+    .find((country) => value.startsWith(country.dial));
+}
+
+/**
+ * Un numéro de téléphone international.
+ *
+ * L'indicatif et le numéro national sont deux champs distincts, parce qu'une
+ * seule zone de saisie oblige à taper le `+237` à chaque fois — ce que
+ * personne ne fait, d'où des numéros enregistrés sans indicatif.
+ *
+ * Aucune validation réelle n'est tentée : `libphonenumber-js` fait cela bien,
+ * pèse 145 ko, et se branche par-dessus si un projet en a besoin. Ici, le
+ * découpage visuel et la forme E.164 en sortie.
+ */
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    {
+      value: valueProp,
+      defaultValue = "",
+      onValueChange,
+      countries = DEFAULT_COUNTRIES,
+      defaultCountry,
+      lockCountry = false,
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const locale = useSiaLocale();
+    const controlled = valueProp !== undefined;
+    const [internal, setInternal] = useState(defaultValue);
+    const value = controlled ? valueProp : internal;
+
+    const initial =
+      countries.find((entry) => entry.code === defaultCountry) ??
+      countries[0]!;
+    const [picked, setPicked] = useState(initial.code);
+
+    const country = useMemo(
+      () =>
+        detect(value, countries) ??
+        countries.find((entry) => entry.code === picked) ??
+        initial,
+      [countries, initial, picked, value],
+    );
+
+    const national = value.startsWith(country.dial)
+      ? value.slice(country.dial.length)
+      : digitsOnly(value);
+
+    const commit = (next: string) => {
+      if (!controlled) setInternal(next);
+      onValueChange?.(next);
+    };
+
+    return (
+      <Input
+        {...props}
+        ref={ref}
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel-national"
+        className={cn("sia-phone__field", className)}
+        disabled={disabled}
+        value={group(national, country.groups)}
+        {...(country.digits ? { maxLength: country.digits + 8 } : {})}
+        onChange={(event) => {
+          let next = digitsOnly(event.target.value);
+          if (country.digits) next = next.slice(0, country.digits);
+          commit(next ? `${country.dial}${next}` : "");
+        }}
+        left={
+          <span className="sia-phone__country">
+            <span className="sia-phone__flag" aria-hidden="true">
+              {country.flag}
+            </span>
+            <span className="sia-phone__dial">{country.dial}</span>
+            {!lockCountry && (
+              <select
+                className="sia-phone__select"
+                aria-label={locale.countryCode}
+                value={country.code}
+                disabled={disabled}
+                onChange={(event) => {
+                  const next = countries.find(
+                    (entry) => entry.code === event.target.value,
+                  );
+                  if (!next) return;
+                  setPicked(next.code);
+                  // Le numéro national suit le changement d'indicatif : il
+                  // est rare mais courant de corriger le pays après coup.
+                  commit(national ? `${next.dial}${national}` : "");
+                }}
+              >
+                {countries.map((entry) => (
+                  <option key={entry.code} value={entry.code}>
+                    {entry.flag} {entry.label} ({entry.dial})
+                  </option>
+                ))}
+              </select>
+            )}
+          </span>
+        }
+      />
+    );
+  },
+);
+
+PhoneInput.displayName = "PhoneInput";

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

@@ -0,0 +1,35 @@
+.sia-phone__field { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
+
+.sia-phone__country {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: .3rem;
+  padding-right: .6rem;
+  border-right: 1px solid var(--sia-border);
+  color: var(--sia-foreground);
+  font-size: .85rem;
+  white-space: nowrap;
+  transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
+  border-radius: var(--sia-radius) 0 0 var(--sia-radius);
+}
+.sia-phone__country:hover { background: var(--sia-surface); }
+
+.sia-phone__flag { font-size: 1.05rem; line-height: 1; }
+.sia-phone__dial { color: var(--sia-muted); font-variant-numeric: tabular-nums; }
+
+/* Le `select` natif recouvre l'affichage : il ouvre la liste du système, qui
+   est la seule à fonctionner correctement sur mobile — un menu réimplémenté
+   se retrouve sous le clavier virtuel. */
+.sia-phone__select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+}
+.sia-phone__select:disabled { cursor: not-allowed; }
+.sia-phone__select:focus-visible + * { outline: 2px solid var(--sia-primary); }

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

@@ -0,0 +1,12 @@
+import { cloneElement, isValidElement, useRef, useState, type ReactElement, type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { Overlay, type OverlayPlacement } from "../Overlay";
+import "./styles.css";
+
+export interface PopoverProps { content: ReactNode; title?: ReactNode; children: ReactElement<{ onClick?: () => void; "aria-expanded"?: boolean }>; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; placement?: OverlayPlacement; trigger?: "click" | "hover"; variant?: "solid" | "outline"; tone?: ComponentTone; disabled?: boolean; className?: string; }
+export function Popover({ content, title, children, open: openProp, defaultOpen = false, onOpenChange, placement = "bottom-start", trigger = "click", variant = "outline", tone = "neutral", disabled = false, className }: PopoverProps) {
+  const anchorRef = useRef<HTMLElement>(null); const [internalOpen, setInternalOpen] = useState(defaultOpen); const open = openProp ?? internalOpen; const setOpen = (next: boolean) => { if (disabled) return; if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); };
+  const child = isValidElement(children) ? cloneElement(children, { ref: anchorRef, "aria-expanded": open, ...(trigger === "click" ? { onClick: () => { children.props.onClick?.(); setOpen(!open); } } : {}) } as never) : children;
+  return <span className="sia-popover-anchor" onMouseEnter={trigger === "hover" ? () => setOpen(true) : undefined} onMouseLeave={trigger === "hover" ? () => setOpen(false) : undefined}>{child}<Overlay open={open} anchorRef={anchorRef} onOpenChange={setOpen} placement={placement} className={cn("sia-popover", `sia-popover--${variant}`, toneClass("sia-tone", tone), className)} role="dialog">{title && <strong className="sia-popover__title">{title}</strong>}<div className="sia-popover__content">{content}</div></Overlay></span>;
+}

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

@@ -0,0 +1,12 @@
+.sia-popover-anchor { display:inline-flex; }
+.sia-popover { --sia-accent:var(--sia-foreground); display:grid; gap:.4rem; max-width:min(22rem,calc(100vw - 1rem)); padding:.85rem; border-radius:var(--sia-radius); box-shadow:0 16px 42px rgb(15 23 42 / .18); }
+.sia-popover--outline { color:var(--sia-foreground); border:1px solid var(--sia-border); background:var(--sia-background); }
+.sia-popover--solid { color:var(--sia-accent-foreground); background:var(--sia-accent); }
+.sia-popover__title { font-size:.9rem; }
+.sia-popover__content { color:inherit; font-size:.85rem; line-height:1.5; }
+
+.sia-popover__content,
+.sia-popover {
+  animation: sia-scale-in var(--sia-duration-base) var(--sia-easing-entrance);
+  box-shadow: var(--sia-elevation-overlay);
+}