@sia-ui/cli 0.4.0 → 0.5.0

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

@@ -10,7 +10,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
-import { cn } from "@sia-ui/utils";
+import { cn, looseIncludes } from "@sia-ui/utils";
 import { Overlay, type OverlayPlacement } from "../Overlay";
 import { Spinner } from "../Spinner";
 import { ChevronDownIcon, SearchIcon, CheckIcon, XIcon } from "../Icons";
@@ -46,6 +46,19 @@ export interface SelectProps {
   invalid?: boolean;
   required?: boolean;
   placement?: OverlayPlacement;
+  /**
+   * Ce que montre le déclencheur. Par défaut, le libellé de l'option.
+   *
+   * La liste garde ses libellés complets — « 🇨🇲 Cameroun (+237) » — pendant
+   * que le champ fermé n'affiche que ce qui tient : « 🇨🇲 +237 ».
+   */
+  renderValue?: (option: SelectOption | undefined) => ReactNode;
+  /**
+   * `embedded` retire bordure, fond et largeur pleine du déclencheur : le
+   * `Select` se loge alors dans un autre contrôle — l'indicatif d'un
+   * `PhoneInput`, la taille de page d'une `Pagination`.
+   */
+  variant?: "default" | "embedded";
   className?: string;
   "aria-label"?: string;
   "aria-describedby"?: string;
@@ -71,8 +84,7 @@ function optionsFromChildren(children: ReactNode): SelectOption[] {
 function optionText(option: SelectOption) {
   return [option.label, option.description, ...(option.keywords ?? [])]
     .map((value) => (typeof value === "string" || typeof value === "number" ? String(value) : ""))
-    .join(" ")
-    .toLocaleLowerCase();
+    .join(" ");
 }
 
 /**
@@ -108,6 +120,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
     invalid = false,
     required = false,
     placement = "bottom-start",
+    renderValue,
+    variant = "default",
     className,
     "aria-invalid": ariaInvalid,
     "aria-required": ariaRequired,
@@ -136,9 +150,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const sourceOptions = fetcher ? remoteOptions : staticOptions;
   const visibleOptions = useMemo(() => {
     if (fetcher) return sourceOptions;
-    const needle = query.trim().toLocaleLowerCase();
+    // Accents et casse ignorés : « sen » trouve « Sénégal ».
+    const needle = query.trim();
     return needle
-      ? sourceOptions.filter((option) => optionText(option).includes(needle))
+      ? sourceOptions.filter((option) => looseIncludes(optionText(option), needle))
       : sourceOptions;
   }, [fetcher, query, sourceOptions]);
   const selectedOption = [...staticOptions, ...remoteOptions].find(
@@ -168,7 +183,11 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
 
   useEffect(() => {
     if (!open) return;
-    setActiveIndex(visibleOptions.findIndex((option) => option.value === currentValue));
+    // La valeur en vigueur si elle est dans la liste, la première option
+    // sinon : après une recherche qui l'écarte, Entrée doit choisir le premier
+    // résultat plutôt que ne rien faire.
+    const selected = visibleOptions.findIndex((option) => option.value === currentValue);
+    setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
 
@@ -234,7 +253,14 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : undefined;
 
   return (
-    <div className={cn("sia-select", disabled && "sia-select--disabled", className)}>
+    <div
+      className={cn(
+        "sia-select",
+        variant === "embedded" && "sia-select--embedded",
+        disabled && "sia-select--disabled",
+        className,
+      )}
+    >
       {name && <input type="hidden" name={name} value={currentValue} />}
       <button
         ref={setTriggerRef}
@@ -253,7 +279,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
         onKeyDown={handleKeyDown}
         {...ariaProps}
       >
-        <span className={cn("sia-select__value", !selectedOption && "sia-select__placeholder")}>{selectedOption?.label ?? placeholder}</span>
+        <span className={cn("sia-select__value", !selectedOption && "sia-select__placeholder")}>{renderValue ? renderValue(selectedOption) : (selectedOption?.label ?? placeholder)}</span>
         <span className="sia-select__actions">
           {clearable && currentValue && !disabled && (
             <span

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

@@ -56,3 +56,21 @@
   transform-origin: top center;
   box-shadow: var(--sia-elevation-overlay);
 }
+
+/* ── Logé dans un autre contrôle ───────────────────────────────────────────
+   Le déclencheur prend la largeur de son contenu et laisse bordure et fond au
+   contrôle hôte. Le panneau, lui, reste celui du Select : `matchAnchorWidth`
+   n'impose qu'une largeur minimale, il s'élargit à ses options. */
+.sia-select--embedded { width: auto; }
+.sia-select--embedded .sia-select__trigger {
+  width: auto;
+  min-height: 0;
+  gap: .35rem;
+  padding: 0 .35rem;
+  border-color: transparent;
+  background: transparent;
+}
+.sia-select--embedded .sia-select__trigger:hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--sia-surface);
+}

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

@@ -13,4 +13,4 @@ export function formatDuration(milliseconds: number, showMilliseconds = false) {
  * dixième de seconde redessine quarante fois par seconde pour un chiffre
  * que personne ne lit.
  */
-export function Timer({ duration = 60000, initialValue = 0, direction = "down", running = true, interval = 250, onChange, onFinish, format = formatDuration, className }: TimerProps) { const initial = direction === "down" ? duration : initialValue; const [value, setValue] = useState(initial); const finishCalled = useRef(false); useEffect(() => { setValue(direction === "down" ? duration : initialValue); finishCalled.current = false; }, [direction, duration, initialValue]); useEffect(() => { if (!running) return; const startedAt = Date.now(); const base = value; const update = () => { const elapsed = Date.now() - startedAt; const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed; setValue(next); onChange?.(next); if (direction === "down" && next === 0 && !finishCalled.current) { finishCalled.current = true; onFinish?.(); } }; update(); const id = window.setInterval(update, interval); return () => window.clearInterval(id); }, [running, direction, interval]); return <time className={cn("sia-timer", className)} aria-live="polite">{format(value)}</time>; }
+export function Timer({ duration = 60000, initialValue = 0, direction = "down", running = true, interval = 250, onChange, onFinish, format = formatDuration, className }: TimerProps) { const initial = direction === "down" ? duration : initialValue; const [value, setValue] = useState(initial); const finishCalled = useRef(false); /* Lus au démarrage et à chaque tic, sans relancer l'intervalle : la valeur de reprise et des rappels souvent écrits en ligne. */ const latest = useRef({ value, onChange, onFinish }); latest.current = { value, onChange, onFinish }; useEffect(() => { setValue(direction === "down" ? duration : initialValue); finishCalled.current = false; }, [direction, duration, initialValue]); useEffect(() => { if (!running) return; const startedAt = Date.now(); const base = latest.current.value; const update = () => { const elapsed = Date.now() - startedAt; const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed; setValue(next); latest.current.onChange?.(next); if (direction === "down" && next === 0 && !finishCalled.current) { finishCalled.current = true; latest.current.onFinish?.(); } }; update(); const id = window.setInterval(update, interval); return () => window.clearInterval(id); }, [running, direction, interval]); return <time className={cn("sia-timer", className)} aria-live="polite">{format(value)}</time>; }

package/dist/registry/package/lib/form-adapter-rhf.tsx

@@ -22,11 +22,21 @@ import {
   type UseFormProps,
   type UseFormReturn,
 } from "react-hook-form";
-import type { FieldBindOptions, FieldBinding, FormAdapter, FormErrors, FormState } from "@sia-ui/headless";
+import {
+  hasFormErrors,
+  type FieldBindOptions,
+  type FieldBinding,
+  type FormAdapter,
+  type FormErrors,
+  type FormState,
+  type FormSubmitResult,
+} from "@sia-ui/headless";
 
 export interface RhfAdapterOptions<TValues extends FieldValues>
   extends UseFormProps<TValues> {
-  onSubmit?: (values: TValues) => void | Promise<void>;
+  onSubmit?: (
+    values: TValues,
+  ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
 }
 
 export interface RhfAdapter<TValues extends FieldValues>
@@ -94,6 +104,12 @@ export function useRhfFormAdapter<TValues extends FieldValues>(
     [formOptions.mode, formState.errors, setValue, trigger, watch],
   );
 
+  const poserErreurs = (next: FormErrors<TValues>) => {
+    for (const [key, message] of Object.entries(next)) {
+      if (message) setError(key as Path<TValues>, { message: String(message) });
+    }
+  };
+
   const state: FormState<TValues> = {
     values: values as TValues,
     errors,
@@ -123,17 +139,14 @@ export function useRhfFormAdapter<TValues extends FieldValues>(
       if (message) setError(name as Path<TValues>, { message });
       else clearErrors(name as Path<TValues>);
     },
-    // Ce que rend `HttpError.fields` de `@sia-ui/api` entre directement ici :
-    // les erreurs du serveur se posent sous les champs, pas dans un bandeau.
-    setErrors: (next) => {
-      for (const [key, message] of Object.entries(next)) {
-        if (message) setError(key as Path<TValues>, { message: String(message) });
-      }
-    },
+    // Ce que rend `HttpError.toFormErrors()` de `@sia-ui/api` entre directement
+    // ici : les erreurs du serveur se posent sous les champs, pas dans un bandeau.
+    setErrors: poserErreurs,
     reset: (next) => reset(next as TValues | undefined),
     submit: async () => {
       await handleSubmit(async (formValues) => {
-        await onSubmit?.(formValues);
+        const result = await onSubmit?.(formValues);
+        if (hasFormErrors(result)) poserErreurs(result);
       })();
     },
     validate: () => trigger(),

package/dist/registry/registry.json

@@ -240,7 +240,7 @@
       "name": "calendar",
       "description": "Localized month and year calendar with range selection and custom cells.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "status": "stable",
       "source": "package",
       "files": [
@@ -383,7 +383,7 @@
       "name": "crud-page",
       "description": "List page for a declared resource: create, view, edit and delete open their own dialogs, each removable and permission-aware.",
       "type": "pattern",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -426,7 +426,7 @@
       "name": "data-table",
       "description": "Data table: row actions with permissions and confirmation, selection, card view, density and sorting.",
       "type": "component",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -566,17 +566,21 @@
       "name": "drawer",
       "description": "Accessible side panel with focus management and portal rendering.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "status": "stable",
       "source": "package",
       "files": [
         "components/Drawer/index.tsx",
+        "components/Drawer/context.ts",
         "components/Drawer/styles.css"
       ],
       "dependencies": [
         "@sia-ui/headless",
         "@sia-ui/react",
         "@sia-ui/utils"
+      ],
+      "registryDependencies": [
+        "icons"
       ]
     },
     {
@@ -755,7 +759,7 @@
       "name": "form",
       "description": "Declarative form driven by a field list, wired to any FormAdapter.",
       "type": "pattern",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -767,6 +771,7 @@
         "@sia-ui/utils"
       ],
       "registryDependencies": [
+        "alert",
         "button",
         "field"
       ]
@@ -775,7 +780,7 @@
       "name": "form-adapter-rhf",
       "description": "react-hook-form adapter for the FormAdapter contract. Requires react-hook-form.",
       "type": "primitive",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1090,7 +1095,7 @@
       "name": "pagination",
       "description": "Accessible controlled pagination with compact page ranges.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1102,7 +1107,8 @@
         "@sia-ui/utils"
       ],
       "registryDependencies": [
-        "icons"
+        "icons",
+        "select"
       ]
     },
     {
@@ -1140,7 +1146,7 @@
       "name": "phone-input",
       "description": "International phone input with dial code and grouping.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1152,7 +1158,8 @@
         "@sia-ui/utils"
       ],
       "registryDependencies": [
-        "input"
+        "input",
+        "select"
       ]
     },
     {
@@ -1382,7 +1389,7 @@
       "name": "select",
       "description": "Accessible searchable select with positioned overlay and async option loading.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1647,7 +1654,7 @@
       "name": "timer",
       "description": "Reliable count-up or count-down timer based on absolute time.",
       "type": "component",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "status": "stable",
       "source": "package",
       "files": [

package/dist/registry/styles/sia-ui.css

@@ -144,6 +144,12 @@
   --sia-elevation-modal: 0 24px 60px rgb(15 23 42 / 0.22);
 }
 /* @end:theme */
+/* Les composants sont écrits en `border-box` : `width:100%` plus un padding
+   ne doit pas déborder. Sans ce reset, un projet qui n'en pose pas lui-même
+   gagnait 32 px de défilement horizontal sous `AppShell`, et des champs plus
+   larges que leur colonne. Spécificité nulle : la moindre règle de l'hôte
+   l'emporte, et un composant qui veut `content-box` le déclare (Chart). */
+:where(*), :where(*)::before, :where(*)::after { box-sizing:border-box; }
 /* Scrollbars SIA UI globales : faibles en spécificité, donc surchargeables. */
 :root {
   --sia-scrollbar-size:.625rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Install SIA UI components progressively into an application.",
   "keywords": [
     "sia-ui",
@@ -39,10 +39,10 @@
     "react-dom": "^19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@sia-ui/headless": "0.4.0",
-    "@sia-ui/utils": "0.4.0",
-    "@sia-ui/tokens": "0.4.0",
-    "@sia-ui/react": "0.4.0"
+    "@sia-ui/headless": "0.5.0",
+    "@sia-ui/react": "0.5.0",
+    "@sia-ui/tokens": "0.5.0",
+    "@sia-ui/utils": "0.5.0"
   },
   "scripts": {
     "build": "node scripts/build.mjs",