@sia-ui/cli 0.1.0

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

@@ -0,0 +1,114 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  /** Hauteur maximale. Au-delà, la zone défile. */
+  maxHeight?: number | string;
+  height?: number | string;
+  orientation?: "vertical" | "horizontal" | "both";
+  /**
+   * Estompe le contenu aux bords tant qu'il reste quelque chose à faire
+   * défiler. C'est le seul indice fiable quand la barre est fine ou masquée.
+   */
+  fade?: boolean;
+  className?: string;
+}
+
+/**
+ * Une zone défilante sobre.
+ *
+ * La barre reste celle du navigateur, seulement affinée : une barre
+ * réimplémentée en JavaScript coûte un écouteur de défilement, deux mesures
+ * par image et perd le défilement inertiel des pavés tactiles. Le seul ajout
+ * est l'estompe des bords, qui ne demande qu'un booléen par côté.
+ */
+export function ScrollArea({
+  children,
+  maxHeight,
+  height,
+  orientation = "vertical",
+  fade = true,
+  className,
+}: ScrollAreaProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState({
+    top: false,
+    bottom: false,
+    left: false,
+    right: false,
+  });
+
+  const measure = useCallback(() => {
+    const node = ref.current;
+    if (!node || !fade) return;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+    } = node;
+    setEdges({
+      top: scrollTop > 1,
+      // Une tolérance d'un pixel : un zoom navigateur produit des hauteurs
+      // fractionnaires et l'estompe du bas resterait sinon allumée en bout
+      // de course.
+      bottom: scrollTop + clientHeight < scrollHeight - 1,
+      left: scrollLeft > 1,
+      right: scrollLeft + clientWidth < scrollWidth - 1,
+    });
+  }, [fade]);
+
+  // Le contenu peut changer sans qu'on défile — une liste qui se charge.
+  useEffect(() => {
+    measure();
+    const node = ref.current;
+    if (!node || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    for (const child of Array.from(node.children)) observer.observe(child);
+    return () => observer.disconnect();
+  }, [children, measure]);
+
+  const style: CSSProperties = {
+    ...(height !== undefined ? { height } : {}),
+    ...(maxHeight !== undefined ? { maxHeight } : {}),
+  };
+
+  return (
+    <div
+      className={cn(
+        "sia-scroll-area",
+        `sia-scroll-area--${orientation}`,
+        fade && "sia-scroll-area--fade",
+        className,
+      )}
+      data-top={edges.top || undefined}
+      data-bottom={edges.bottom || undefined}
+      data-left={edges.left || undefined}
+      data-right={edges.right || undefined}
+    >
+      <div
+        ref={ref}
+        className="sia-scroll-area__viewport"
+        style={style}
+        {...(fade ? { onScroll: measure } : {})}
+        // Focalisable : sans cela les flèches du clavier ne font défiler la
+        // zone qu'une fois un élément intérieur atteint par tabulation.
+        tabIndex={0}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+.sia-scroll-area { position: relative; min-height: 0; min-width: 0; }
+
+.sia-scroll-area__viewport {
+  overflow: auto;
+  /* La barre fine standardisée. Firefox comprend ces deux propriétés, les
+     navigateurs WebKit passent par le sélecteur ci-dessous. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sia-border-strong) transparent;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+}
+.sia-scroll-area--vertical .sia-scroll-area__viewport { overflow-x: hidden; }
+.sia-scroll-area--horizontal .sia-scroll-area__viewport { overflow-y: hidden; }
+
+.sia-scroll-area__viewport::-webkit-scrollbar { width: 8px; height: 8px; }
+.sia-scroll-area__viewport::-webkit-scrollbar-track { background: transparent; }
+.sia-scroll-area__viewport::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+  background-color: transparent;
+  transition: background-color var(--sia-duration-base) var(--sia-easing-standard);
+}
+/* Le curseur n'apparaît qu'à l'approche : une barre permanente sur une liste
+   courte attire l'œil pour rien. */
+.sia-scroll-area:hover .sia-scroll-area__viewport::-webkit-scrollbar-thumb,
+.sia-scroll-area__viewport:focus-within::-webkit-scrollbar-thumb {
+  background-color: var(--sia-border-strong);
+}
+.sia-scroll-area__viewport::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sia-muted);
+}
+
+/* ── Estompe des bords ─────────────────────────────────────────────────── */
+
+.sia-scroll-area--fade::before,
+.sia-scroll-area--fade::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-scroll-area--fade.sia-scroll-area--vertical::before,
+.sia-scroll-area--fade.sia-scroll-area--both::before {
+  inset: 0 0 auto 0;
+  height: 2rem;
+  background: linear-gradient(to bottom, var(--sia-background), transparent);
+}
+.sia-scroll-area--fade.sia-scroll-area--vertical::after,
+.sia-scroll-area--fade.sia-scroll-area--both::after {
+  inset: auto 0 0 0;
+  height: 2rem;
+  background: linear-gradient(to top, var(--sia-background), transparent);
+}
+.sia-scroll-area--fade.sia-scroll-area--horizontal::before {
+  inset: 0 auto 0 0;
+  width: 2rem;
+  background: linear-gradient(to right, var(--sia-background), transparent);
+}
+.sia-scroll-area--fade.sia-scroll-area--horizontal::after {
+  inset: 0 0 0 auto;
+  width: 2rem;
+  background: linear-gradient(to left, var(--sia-background), transparent);
+}
+
+.sia-scroll-area--vertical[data-top]::before,
+.sia-scroll-area--both[data-top]::before,
+.sia-scroll-area--horizontal[data-left]::before { opacity: 1; }
+.sia-scroll-area--vertical[data-bottom]::after,
+.sia-scroll-area--both[data-bottom]::after,
+.sia-scroll-area--horizontal[data-right]::after { opacity: 1; }

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

@@ -0,0 +1,121 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type InputHTMLAttributes,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import { SearchIcon, XIcon } from "../Icons";
+import "./styles.css";
+
+export interface SearchInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Appelé à la validation, et après le délai si `searchDelay` est posé. */
+  onSearch?: (value: string) => void;
+  /**
+   * Millisecondes d'inactivité avant de déclencher `onSearch`.
+   *
+   * `0` — le défaut — ne déclenche qu'à la validation. Au-delà, la recherche
+   * part quand la frappe s'arrête : c'est ce que chaque projet réécrivait
+   * autour de ce champ.
+   */
+  searchDelay?: number;
+  clearable?: boolean;
+  searchLabel?: string;
+  clearLabel?: string;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      value,
+      defaultValue = "",
+      onValueChange,
+      onSearch,
+      searchDelay = 0,
+      clearable = true,
+      searchLabel: searchLabelProp,
+      clearLabel = "Effacer la recherche",
+      className,
+      placeholder: placeholderProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const locale = useSiaLocale();
+    const placeholder = placeholderProp ?? locale.searchPlaceholder;
+    const searchLabel = searchLabelProp ?? locale.search;
+
+    const [internal, setInternal] = useState(defaultValue);
+    const current = value ?? internal;
+
+    // Le champ reste immédiat : seul le déclenchement est retardé. Retarder
+    // la valeur affichée donnerait un champ qui paraît figé à la frappe.
+    const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const latest = useRef({ onSearch, searchDelay });
+    latest.current = { onSearch, searchDelay };
+
+    useEffect(() => () => clearTimeout(timer.current), []);
+
+    const update = (next: string) => {
+      if (value === undefined) setInternal(next);
+      onValueChange?.(next);
+
+      const { searchDelay: wait, onSearch: search } = latest.current;
+      if (!wait || !search) return;
+
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => search(next), wait);
+    };
+
+    return (
+      <form
+        className={cn("sia-search-input", className)}
+        role="search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          // La validation l'emporte sur le délai en cours : on n'attend pas
+          // 300 ms de plus après avoir appuyé sur Entrée.
+          clearTimeout(timer.current);
+          onSearch?.(current);
+        }}
+      >
+        <span className="sia-search-input__icon" aria-hidden="true">
+          <SearchIcon />
+        </span>
+        <input
+          ref={ref}
+          type="search"
+          value={current}
+          placeholder={placeholder}
+          aria-label={searchLabel}
+          onChange={(event) => update(event.target.value)}
+          {...props}
+        />
+        {clearable && current && (
+          <button
+            type="button"
+            aria-label={clearLabel}
+            className="sia-search-input__clear"
+            onClick={() => {
+              update("");
+              // Effacer relance la recherche tout de suite : attendre le
+              // délai pour afficher la liste complète n'a aucun sens.
+              clearTimeout(timer.current);
+              onSearch?.("");
+            }}
+          >
+            <XIcon />
+          </button>
+        )}
+      </form>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";

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

@@ -0,0 +1,6 @@
+.sia-search-input { display:flex; align-items:center; min-height:2.5rem; overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-muted); background:var(--sia-background); }
+.sia-search-input:focus-within { outline:3px solid color-mix(in srgb,var(--sia-primary) 30%,transparent); outline-offset:2px; }
+.sia-search-input__icon { padding-left:.75rem; }
+.sia-search-input input { flex:1; min-width:0; min-height:2.4rem; padding:0 .65rem; border:0; outline:0; color:var(--sia-foreground); background:transparent; font:inherit; }
+.sia-search-input__clear { padding:.4rem .75rem; border:0; color:var(--sia-muted); background:transparent; font-size:1.1rem; cursor:pointer; }
+.sia-search-input input { line-height:1.25; }

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

@@ -0,0 +1,324 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import { Overlay, type OverlayPlacement } from "../Overlay";
+import { Spinner } from "../Spinner";
+import { ChevronDownIcon, SearchIcon, CheckIcon, XIcon } from "../Icons";
+import "./styles.css";
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  keywords?: string[];
+}
+
+export interface SelectProps {
+  id?: string;
+  name?: string;
+  options?: SelectOption[];
+  /** Compatibility path. Prefer the options prop. */
+  children?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, option?: SelectOption) => void;
+  placeholder?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  fetcher?: (query: string, signal?: AbortSignal) => Promise<SelectOption[]>;
+  debounce?: number;
+  loadingText?: ReactNode;
+  emptyText?: ReactNode;
+  errorText?: ReactNode;
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  placement?: OverlayPlacement;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-required"?: boolean;
+}
+
+function optionsFromChildren(children: ReactNode): SelectOption[] {
+  return Children.toArray(children).flatMap((child) => {
+    if (!isValidElement<{ value?: string; disabled?: boolean; children?: ReactNode }>(child))
+      return [];
+    const value = child.props.value;
+    if (value === undefined) return [];
+    return [{
+      value: String(value),
+      label: child.props.children,
+      ...(child.props.disabled !== undefined ? { disabled: child.props.disabled } : {}),
+    }];
+  });
+}
+
+function optionText(option: SelectOption) {
+  return [option.label, option.description, ...(option.keywords ?? [])]
+    .map((value) => (typeof value === "string" || typeof value === "number" ? String(value) : ""))
+    .join(" ")
+    .toLocaleLowerCase();
+}
+
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(
+  {
+    id,
+    name,
+    options,
+    children,
+    value,
+    defaultValue = "",
+    onValueChange,
+    placeholder = "Sélectionner",
+    searchable = false,
+    searchPlaceholder = "Rechercher...",
+    fetcher,
+    debounce = 250,
+    loadingText = "Chargement des options...",
+    emptyText = "Aucun résultat",
+    errorText = "Impossible de charger les options",
+    clearable = false,
+    disabled = false,
+    invalid = false,
+    required = false,
+    placement = "bottom-start",
+    className,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...ariaProps
+  },
+  forwardedRef,
+) {
+  const generatedId = useId();
+  const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
+  const listboxId = `${controlId}-listbox`;
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const staticOptions = useMemo(
+    () => options ?? optionsFromChildren(children),
+    [children, options],
+  );
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [remoteOptions, setRemoteOptions] = useState<SelectOption[]>([]);
+  const [selectedRemoteOption, setSelectedRemoteOption] = useState<SelectOption>();
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const currentValue = value ?? internalValue;
+  const sourceOptions = fetcher ? remoteOptions : staticOptions;
+  const visibleOptions = useMemo(() => {
+    if (fetcher) return sourceOptions;
+    const needle = query.trim().toLocaleLowerCase();
+    return needle
+      ? sourceOptions.filter((option) => optionText(option).includes(needle))
+      : sourceOptions;
+  }, [fetcher, query, sourceOptions]);
+  const selectedOption = [...staticOptions, ...remoteOptions].find(
+    (option) => option.value === currentValue,
+  ) ?? (selectedRemoteOption?.value === currentValue ? selectedRemoteOption : undefined);
+
+  useEffect(() => {
+    if (!open || !fetcher) return;
+    const controller = new AbortController();
+    const timeout = window.setTimeout(async () => {
+      setLoading(true);
+      setLoadError(false);
+      try {
+        const nextOptions = await fetcher(query, controller.signal);
+        if (!controller.signal.aborted) setRemoteOptions(nextOptions);
+      } catch {
+        if (!controller.signal.aborted) setLoadError(true);
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }, debounce);
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [debounce, fetcher, open, query]);
+
+  useEffect(() => {
+    if (!open) return;
+    setActiveIndex(visibleOptions.findIndex((option) => option.value === currentValue));
+    if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
+  }, [currentValue, fetcher, open, searchable, visibleOptions]);
+
+  const setTriggerRef = (node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const changeValue = (nextValue: string, option?: SelectOption) => {
+    if (value === undefined) setInternalValue(nextValue);
+    onValueChange?.(nextValue, option);
+  };
+  const choose = (option: SelectOption) => {
+    if (option.disabled) return;
+    if (fetcher) setSelectedRemoteOption(option);
+    changeValue(option.value, option);
+    setOpen(false);
+    setQuery("");
+    window.setTimeout(() => triggerRef.current?.focus(), 0);
+  };
+  const moveActive = (direction: 1 | -1) => {
+    if (!visibleOptions.length) return;
+    let next = activeIndex;
+    for (let count = 0; count < visibleOptions.length; count += 1) {
+      next = (next + direction + visibleOptions.length) % visibleOptions.length;
+      if (!visibleOptions[next]?.disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Home" && open) {
+      event.preventDefault();
+      setActiveIndex(visibleOptions.findIndex((option) => !option.disabled));
+    } else if (event.key === "End" && open) {
+      event.preventDefault();
+      for (let index = visibleOptions.length - 1; index >= 0; index -= 1) {
+        if (!visibleOptions[index]?.disabled) {
+          setActiveIndex(index);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open && activeIndex >= 0) {
+      event.preventDefault();
+      const active = visibleOptions[activeIndex];
+      if (active) choose(active);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    } else if (!open && clearable && currentValue && ["Backspace", "Delete"].includes(event.key)) {
+      event.preventDefault();
+      changeValue("");
+    }
+  };
+
+  const showSearch = searchable || Boolean(fetcher);
+  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : undefined;
+
+  return (
+    <div className={cn("sia-select", disabled && "sia-select--disabled", className)}>
+      {name && <input type="hidden" name={name} value={currentValue} />}
+      <button
+        ref={setTriggerRef}
+        id={controlId}
+        type="button"
+        className={cn("sia-select__trigger", invalid && "sia-select__trigger--invalid")}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listboxId}
+        aria-activedescendant={open && activeOption ? `${listboxId}-${activeIndex}` : undefined}
+        aria-invalid={ariaInvalid ?? (invalid || undefined)}
+        aria-required={ariaRequired ?? (required || undefined)}
+        disabled={disabled}
+        onClick={() => setOpen((current) => !current)}
+        onKeyDown={handleKeyDown}
+        {...ariaProps}
+      >
+        <span className={cn("sia-select__value", !selectedOption && "sia-select__placeholder")}>{selectedOption?.label ?? placeholder}</span>
+        <span className="sia-select__actions">
+          {clearable && currentValue && !disabled && (
+            <span
+              className="sia-select__clear"
+              aria-hidden="true"
+              title="Effacer la sélection"
+              onClick={(event) => {
+                event.stopPropagation();
+                changeValue("");
+              }}
+            >
+              <XIcon />
+            </span>
+          )}
+          <ChevronDownIcon className="sia-select__chevron" aria-hidden="true" />
+        </span>
+      </button>
+      <Overlay
+        open={open}
+        anchorRef={triggerRef}
+        onOpenChange={setOpen}
+        placement={placement}
+        matchAnchorWidth
+        className="sia-select__overlay"
+      >
+        <div className="sia-select__panel" onKeyDown={handleKeyDown}>
+          {showSearch && (
+            <div className="sia-select__search-wrap">
+              <SearchIcon aria-hidden="true" />
+              <input
+                ref={searchRef}
+                className="sia-select__search"
+                value={query}
+                placeholder={searchPlaceholder}
+                aria-label={searchPlaceholder}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+              {loading && <Spinner size="xs" label="Chargement" />}
+            </div>
+          )}
+          <div id={listboxId} role="listbox" aria-busy={loading || undefined} className="sia-select__options">
+            {loading && !visibleOptions.length ? (
+              <div className="sia-select__status">{loadingText}</div>
+            ) : loadError ? (
+              <div className="sia-select__status sia-select__status--error">{errorText}</div>
+            ) : !visibleOptions.length ? (
+              <div className="sia-select__status">{emptyText}</div>
+            ) : (
+              visibleOptions.map((option, index) => (
+                <button
+                  id={`${listboxId}-${index}`}
+                  key={option.value}
+                  type="button"
+                  role="option"
+                  aria-selected={currentValue === option.value}
+                  disabled={option.disabled}
+                  className={cn(
+                    "sia-select__option",
+                    index === activeIndex && "sia-select__option--active",
+                  )}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  onClick={() => choose(option)}
+                >
+                  <span className="sia-select__option-content">
+                    <span>{option.label}</span>
+                    {option.description && <small>{option.description}</small>}
+                  </span>
+                  {currentValue === option.value && <CheckIcon aria-hidden="true" />}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </Overlay>
+    </div>
+  );
+});
+
+Select.displayName = "Select";