@sia-ui/cli 0.4.0 → 0.6.0

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

@@ -1,7 +1,15 @@
-import { useEffect, useId, useState, type FormEvent } from "react";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
 import { cn } from "@sia-ui/utils";
 import { paginationItems, useSiaLocale } from "@sia-ui/headless";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
+import { Select } from "../Select";
 import "./styles.css";
 
 export interface PaginationProps {
@@ -22,10 +30,46 @@ export interface PaginationProps {
   showTotal?: boolean;
   /** Masque les libellés et ne garde que les flèches. */
   compact?: boolean;
+
+  /* ─────────────────────────────────────────────── taille de page */
+
+  /** Le nombre de lignes par page en vigueur. */
+  pageSize?: number;
+  /**
+   * Fourni avec `pageSize`, ajoute le choix du nombre de lignes par page.
+   *
+   * Seul le nouveau nombre est remonté : revenir en page 1 est l'affaire de
+   * qui tient l'état — `setPerPage` de `useTableQuery` le fait déjà.
+   */
+  onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Les tailles proposées. Par défaut `10, 20, 50, 100`. Une taille en
+   * vigueur absente de la liste y est ajoutée, pour que le champ ne paraisse
+   * jamais vide.
+   */
+  pageSizeOptions?: number[];
+  /** Le libellé du choix. Par défaut `locale.perPage` — « Par page ». */
+  pageSizeLabel?: string;
+  /**
+   * Remplace entièrement le contrôle — des boutons segmentés, un champ libre.
+   * Le choix des tailles et leur tri sont déjà faits.
+   */
+  renderPageSize?: (context: PageSizeContext) => ReactNode;
+
   ariaLabel?: string;
   className?: string;
 }
 
+/** Ce que reçoit `renderPageSize`. */
+export interface PageSizeContext {
+  pageSize: number;
+  options: number[];
+  onChange: (pageSize: number) => void;
+  label: string;
+}
+
+export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
 /**
  * La navigation entre les pages.
  *
@@ -42,6 +86,11 @@ export function Pagination({
   jumpTo = false,
   showTotal = false,
   compact = false,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  pageSizeLabel,
+  renderPageSize,
   ariaLabel,
   className,
 }: PaginationProps) {
@@ -59,9 +108,25 @@ export function Pagination({
   // un retour arrière du navigateur.
   useEffect(() => setDraft(String(current)), [current]);
 
-  if (totalPages <= 1) return null;
+  const tailles = useMemo(() => {
+    if (pageSize === undefined || pageSizeOptions.includes(pageSize)) {
+      return pageSizeOptions;
+    }
+    return [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  }, [pageSize, pageSizeOptions]);
+
+  const choixTaille =
+    pageSize !== undefined && onPageSizeChange && tailles.length > 0;
+  const plusieursPages = totalPages > 1;
+  const tailleLibelle = pageSizeLabel ?? locale.perPage;
 
-  const items = paginationItems(current, totalPages, siblingCount);
+  // Une seule page n'a rien à paginer — sauf si l'on peut encore changer de
+  // taille : après avoir choisi 100 lignes, il faut pouvoir revenir à 10.
+  if (!plusieursPages && !choixTaille) return null;
+
+  const items = plusieursPages
+    ? paginationItems(current, totalPages, siblingCount)
+    : [];
 
   const jump = (event: FormEvent) => {
     event.preventDefault();
@@ -84,71 +149,113 @@ export function Pagination({
       )}
       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" ? (
+      {/*
+        Deux groupes, qui passent à la ligne chacun d'un seul tenant : la
+        navigation d'un côté, les réglages de l'autre. Sans eux, un écran un
+        peu étroit renvoyait « Par page » seul sur une seconde ligne, loin de
+        son champ.
+      */}
+      {plusieursPages && (
+        <div className="sia-pagination__pages">
           <button
             type="button"
-            key={item}
-            className="sia-pagination__page"
-            aria-current={item === current ? "page" : undefined}
-            onClick={() => onPageChange(item)}
+            className="sia-pagination__step"
+            disabled={current === 1}
+            aria-label={previousLabel}
+            onClick={() => onPageChange(current - 1)}
           >
-            {item}
+            <ChevronLeftIcon />
+            {!compact && <span>{previousLabel}</span>}
           </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>
+          {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>
+        </div>
       )}
 
-      {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>
+      {(choixTaille || (plusieursPages && (showTotal || jumpTo))) && (
+        <div className="sia-pagination__settings">
+          {plusieursPages && showTotal && (
+            <span className="sia-pagination__total">
+              {locale.page} {current} / {totalPages}
+            </span>
+          )}
+
+          {choixTaille && (
+            <div className="sia-pagination__size">
+              {renderPageSize ? (
+                renderPageSize({
+                  pageSize,
+                  options: tailles,
+                  onChange: onPageSizeChange,
+                  label: tailleLibelle,
+                })
+              ) : (
+                <>
+                  <span aria-hidden="true">{tailleLibelle}</span>
+                  <Select
+                    variant="embedded"
+                    aria-label={tailleLibelle}
+                    placement="top-end"
+                    value={String(pageSize)}
+                    options={tailles.map((taille) => ({
+                      value: String(taille),
+                      label: String(taille),
+                    }))}
+                    onValueChange={(valeur) => onPageSizeChange(Number(valeur))}
+                  />
+                </>
+              )}
+            </div>
+          )}
+
+          {plusieursPages && 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>
+          )}
+        </div>
       )}
     </nav>
   );

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

@@ -1,19 +1,58 @@
-.sia-pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
+/* ── Disposition ──────────────────────────────────────────────────────────
+   Deux groupes : la navigation à gauche, les réglages à droite. Chacun passe
+   à la ligne d'un seul tenant — jamais un libellé séparé de son champ. Tout
+   partage une hauteur, `--sia-pagination-size`, pour que boutons, liste et
+   champ s'alignent au pixel. */
+.sia-pagination {
+  --sia-pagination-size: 2.25rem;
+  container: sia-pagination / inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem 1.5rem;
+  width: 100%;
+}
+
+.sia-pagination__pages {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .3rem;
+  min-width: 0;
+}
+
+.sia-pagination__settings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: .5rem 1.25rem;
+  margin-left: auto;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  white-space: nowrap;
+}
+
+/* ── Boutons de page ──────────────────────────────────────────────────── */
 
-.sia-pagination button {
+.sia-pagination__step,
+.sia-pagination__page {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .35rem;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
+  min-width: var(--sia-pagination-size);
+  height: var(--sia-pagination-size);
   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-size: .875rem;
   font-variant-numeric: tabular-nums;
+  line-height: 1;
   cursor: pointer;
   transition:
     background-color var(--sia-duration-fast) var(--sia-easing-standard),
@@ -21,15 +60,24 @@
     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 {
+/* Le survol ne touche pas la page courante. Écrit `button:hover`, il passait
+   devant `[aria-current]` par spécificité : fond clair sous un chiffre resté
+   blanc, donc illisible. */
+.sia-pagination__step:hover:not(:disabled),
+.sia-pagination__page:hover:not([aria-current="page"]) {
+  border-color: var(--sia-border-strong);
+  background: var(--sia-surface);
+}
+.sia-pagination__step:active:not(:disabled),
+.sia-pagination__page:active { transform: scale(.94); }
+.sia-pagination__step:disabled { cursor: not-allowed; opacity: .5; }
+.sia-pagination__step:focus-visible,
+.sia-pagination__page:focus-visible {
   outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
   outline-offset: 2px;
 }
 
-.sia-pagination button[aria-current="page"] {
+.sia-pagination__page[aria-current="page"] {
   color: var(--sia-primary-foreground);
   border-color: var(--sia-primary);
   background: var(--sia-primary);
@@ -38,6 +86,14 @@
      le seul changement de couleur se remarque mal. */
   animation: sia-pagination-current var(--sia-duration-base) var(--sia-easing-spring);
 }
+/* La page courante garde sa couleur au survol, un ton plus sombre pour dire
+   qu'elle reste un bouton. */
+.sia-pagination__page[aria-current="page"]:hover {
+  color: var(--sia-primary-foreground);
+  border-color: color-mix(in srgb, var(--sia-primary) 85%, var(--sia-foreground));
+  background: color-mix(in srgb, var(--sia-primary) 85%, var(--sia-foreground));
+}
+
 @keyframes sia-pagination-current {
   0% { transform: scale(.85); }
   60% { transform: scale(1.06); }
@@ -45,49 +101,64 @@
 }
 
 .sia-pagination__step svg { flex: none; font-size: .9em; }
-.sia-pagination__gap { padding: 0 .25rem; color: var(--sia-muted); }
+.sia-pagination__gap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: var(--sia-pagination-size);
+  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; }
-}
+/* ── Réglages ─────────────────────────────────────────────────────────────
+   Libellé discret à gauche, contrôle à droite, même hauteur que les boutons.
+   Taille de page et saut direct sont habillés à l'identique. */
 
-/* ── 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__total { font-variant-numeric: tabular-nums; }
 
+.sia-pagination__size,
 .sia-pagination__jump {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: .4rem;
-  margin-left: .5rem;
-  color: var(--sia-muted);
-  font-size: .8rem;
-  white-space: nowrap;
+  gap: .5rem;
 }
 .sia-pagination__jump label { cursor: pointer; }
 
+.sia-pagination__size .sia-select__trigger,
 .sia-pagination__jump input {
-  width: 3.25rem;
-  min-height: 2.25rem;
-  padding: 0 .5rem;
+  height: var(--sia-pagination-size);
   border: 1px solid var(--sia-border);
   border-radius: var(--sia-radius);
-  background: var(--sia-background);
   color: var(--sia-foreground);
+  background: var(--sia-background);
   font: inherit;
+  font-size: .875rem;
   font-variant-numeric: tabular-nums;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/* Le Select logé prend l'allure d'un champ de la barre. */
+.sia-pagination__size .sia-select__trigger {
+  min-height: 0;
+  min-width: 4.25rem;
+  padding: 0 .5rem 0 .7rem;
+  justify-content: space-between;
+}
+.sia-pagination__size .sia-select__trigger:hover:not(:disabled) {
+  border-color: var(--sia-border-strong);
+  background: var(--sia-surface);
+}
+
+.sia-pagination__jump input {
+  width: 3.25rem;
+  padding: 0 .5rem;
   text-align: center;
-  transition: border-color var(--sia-duration-fast) var(--sia-easing-standard);
 }
+.sia-pagination__jump input:hover { border-color: var(--sia-border-strong); }
 .sia-pagination__jump input:focus-visible {
   border-color: var(--sia-primary);
   outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
@@ -96,8 +167,32 @@
 
 .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; }
+/* ── Largeur disponible ───────────────────────────────────────────────────
+   Réglé sur la largeur de la barre, pas de l'écran : une pagination posée
+   dans une carte étroite se replie comme sur un téléphone.
+
+   Sous 52rem, les deux groupes ne tiennent plus côte à côte : les réglages
+   prennent leur propre ligne, pleine largeur : le total à gauche, sous la
+   navigation, les contrôles groupés à droite. */
+@container sia-pagination (max-width: 52rem) {
+  .sia-pagination__settings {
+    justify-content: flex-end;
+    width: 100%;
+    margin-left: 0;
+  }
+  /* L'information à gauche, les contrôles groupés à droite. */
+  .sia-pagination__total { margin-right: auto; }
+}
+
+/* Sous 34rem, tout se centre : la navigation sur sa ligne, les réglages sur
+   les suivantes, sans élément isolé contre un bord. */
+@container sia-pagination (max-width: 34rem) {
+  .sia-pagination__pages { justify-content: center; width: 100%; }
+  .sia-pagination__settings { justify-content: center; column-gap: 1.5rem; }
+  .sia-pagination__total { margin-right: 0; }
+}
+
+/* Sous 26rem, les libellés des flèches tombent ; les flèches restent. */
+@container sia-pagination (max-width: 26rem) {
+  .sia-pagination__step span { display: none; }
 }

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

@@ -2,6 +2,7 @@ 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 { Select, type SelectOption } from "../Select";
 import "./styles.css";
 
 export interface PhoneCountry {
@@ -128,6 +129,18 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       ? value.slice(country.dial.length)
       : digitsOnly(value);
 
+    // La recherche porte sur le nom, l'indicatif et le code ISO : « cam »,
+    // « 237 » et « cm » trouvent tous le Cameroun.
+    const options = useMemo<SelectOption[]>(
+      () =>
+        countries.map((entry) => ({
+          value: entry.code,
+          label: `${entry.flag} ${entry.label} (${entry.dial})`,
+          keywords: [entry.code],
+        })),
+      [countries],
+    );
+
     const commit = (next: string) => {
       if (!controlled) setInternal(next);
       onValueChange?.(next);
@@ -150,36 +163,40 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
           commit(next ? `${country.dial}${next}` : "");
         }}
         left={
-          <span className="sia-phone__country">
-            <span className="sia-phone__flag" aria-hidden="true">
-              {country.flag}
+          lockCountry ? (
+            <span className="sia-phone__country">
+              <span className="sia-phone__flag" aria-hidden="true">
+                {country.flag}
+              </span>
+              <span className="sia-phone__dial">{country.dial}</span>
             </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>
+          ) : (
+            <Select
+              variant="embedded"
+              searchable
+              className="sia-phone__country"
+              aria-label={locale.countryCode}
+              options={options}
+              value={country.code}
+              disabled={disabled ?? false}
+              renderValue={() => (
+                <span className="sia-phone__value">
+                  <span className="sia-phone__flag" aria-hidden="true">
+                    {country.flag}
+                  </span>
+                  <span className="sia-phone__dial">{country.dial}</span>
+                </span>
+              )}
+              onValueChange={(code) => {
+                const next = countries.find((entry) => entry.code === code);
+                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}` : "");
+              }}
+            />
+          )
         }
       />
     );

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

@@ -1,35 +1,21 @@
 .sia-phone__field { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
 
+/* L'indicatif, séparé du numéro par un filet. Choisi dans le `Select` du
+   système, en variante logée : même panneau, même recherche, même clavier
+   que partout ailleurs — là où le `<select>` natif n'offrait ni recherche ni
+   le thème. */
 .sia-phone__country {
-  position: relative;
   display: inline-flex;
   align-items: center;
   gap: .3rem;
-  padding-right: .6rem;
+  padding-right: .35rem;
   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__country .sia-select__trigger { align-self: stretch; }
 
+.sia-phone__value { display: inline-flex; align-items: center; gap: .3rem; }
 .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); }