@sia-ui/cli 0.1.0

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

@@ -0,0 +1,68 @@
+import {
+  useRef,
+  type ChangeEvent,
+  type DragEvent,
+  type InputHTMLAttributes,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface FileUploadProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "onChange"
+> {
+  label?: string;
+  description?: string;
+  onFilesChange?: (files: File[]) => void;
+}
+export function FileUpload({
+  label = "Ajouter des fichiers",
+  description = "Glissez les fichiers ici ou parcourez votre appareil.",
+  onFilesChange,
+  className,
+  multiple = true,
+  accept,
+  disabled,
+  ...props
+}: FileUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const emit = (files: FileList | null) =>
+    onFilesChange?.(Array.from(files ?? []));
+  const drop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (!disabled) emit(event.dataTransfer.files);
+  };
+  const change = (event: ChangeEvent<HTMLInputElement>) =>
+    emit(event.target.files);
+  return (
+    <div
+      className={cn(
+        "sia-file-upload",
+        disabled && "sia-file-upload--disabled",
+        className,
+      )}
+      onDragOver={(event) => event.preventDefault()}
+      onDrop={drop}
+    >
+      <input
+        {...props}
+        ref={inputRef}
+        hidden
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={change}
+      />
+      <strong>{label}</strong>
+      <span>{description}</span>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => inputRef.current?.click()}
+      >
+        Parcourir
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+.sia-file-upload { display:grid; place-items:center; gap:.55rem; min-height:12rem; padding:1.5rem; text-align:center; border:1px dashed var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-surface); }
+.sia-file-upload span { color:var(--sia-muted); }
+.sia-file-upload button { min-height:2.25rem; padding:0 .85rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); cursor:pointer; }
+.sia-file-upload--disabled { opacity:.55; }

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface FiltersBarProps {
+  search?: ReactNode;
+  filters?: ReactNode;
+  actions?: ReactNode;
+  activeCount?: number;
+  onReset?: () => void;
+  resetLabel?: string;
+  className?: string;
+}
+
+export function FiltersBar({ search, filters, actions, activeCount = 0, onReset, resetLabel: resetLabelProp, className }: FiltersBarProps) {
+    const locale = useSiaLocale();
+    const resetLabel = resetLabelProp ?? locale.reset;
+  return <section className={cn("sia-filters-bar", className)} aria-label="Filtres"><div className="sia-filters-bar__main">{search && <div className="sia-filters-bar__search">{search}</div>}{filters && <div className="sia-filters-bar__filters">{filters}</div>}</div><div className="sia-filters-bar__actions">{activeCount > 0 && <span className="sia-filters-bar__count">{activeCount} actif{activeCount > 1 ? "s" : ""}</span>}{onReset && activeCount > 0 && <button type="button" className="sia-filters-bar__reset" onClick={onReset}>{resetLabel}</button>}{actions}</div></section>;
+}

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

@@ -0,0 +1,6 @@
+.sia-filters-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.25); background:var(--sia-surface); }
+.sia-filters-bar__main,.sia-filters-bar__filters,.sia-filters-bar__actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
+.sia-filters-bar__main { flex:1; min-width:min(100%,18rem); }
+.sia-filters-bar__search { flex:1; min-width:min(100%,16rem); }
+.sia-filters-bar__count { color:var(--sia-muted); font-size:.8rem; font-weight:650; }
+.sia-filters-bar__reset { border:0; color:var(--sia-primary); background:transparent; font:inherit; font-weight:650; cursor:pointer; }

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

@@ -0,0 +1,211 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import {
+  useLocalForm,
+  type FormAdapter,
+  type FormValidator,
+} from "@sia-ui/headless";
+import { Button, type ButtonProps } from "../Button";
+import { Field, type FieldProps, type FieldValue } from "../Field";
+import "./styles.css";
+
+/** Un champ du formulaire : les props de `Field`, plus sa place. */
+export interface FormFieldConfig extends Omit<FieldProps, "field" | "name"> {
+  /** La clé dans les valeurs. C'est elle qui branche le champ. */
+  name: string;
+  /** Nombre de colonnes occupées. Ignoré sur une seule colonne. */
+  colSpan?: number;
+  rowSpan?: number;
+}
+
+/** Un groupe de champs, avec son titre et sa propre grille. */
+export interface FormFieldGroup {
+  group: string;
+  description?: ReactNode;
+  columns?: number;
+  fields: FormFieldConfig[];
+}
+
+export type FormEntry = FormFieldConfig | FormFieldGroup;
+
+function isGroup(entry: FormEntry): entry is FormFieldGroup {
+  return "group" in entry;
+}
+
+/**
+ * Les valeurs qu'un formulaire déclaratif peut porter.
+ *
+ * Plus étroit que `FormValues` volontairement : ce formulaire rend ses
+ * champs avec `Field`, qui ne sait afficher que ces types-là. Un objet
+ * imbriqué n'aurait pas de contrôle pour le montrer.
+ */
+export type FormShape = Record<string, FieldValue>;
+
+export interface FormProps<TValues extends FormShape = FormShape> {
+  fields: FormEntry[];
+  /**
+   * L'adaptateur de formulaire.
+   *
+   * Sans lui, un `useLocalForm` est monté en interne à partir de
+   * `defaultValues`, `validate` et `onSubmit`. Avec lui — react-hook-form,
+   * Formik, votre propre magasin — le formulaire ne fait plus que rendre.
+   */
+  form?: FormAdapter<TValues>;
+  defaultValues?: TValues;
+  /** La validation. Un schéma Zod s'y branche en cinq lignes. */
+  validate?: FormValidator<TValues>;
+  onSubmit?: (values: TValues) => void | Promise<void>;
+  columns?: number;
+  submitText?: ReactNode;
+  clearText?: ReactNode;
+  showClear?: boolean;
+  submitProps?: ButtonProps;
+  /** Remplace entièrement la barre de boutons. */
+  actions?: ReactNode;
+  loading?: boolean;
+  /** Désactive l'envoi tant que rien n'a changé. */
+  requireDirty?: boolean;
+  /** Désactive l'envoi tant qu'une erreur est en vigueur. */
+  requireValid?: boolean;
+  className?: string;
+}
+
+const VIDE = {} as FormShape;
+
+/**
+ * Un formulaire décrit par ses champs.
+ *
+ * Il ne connaît aucune bibliothèque de formulaires : il reçoit un
+ * `FormAdapter`, ou en monte un lui-même. C'est ce qui lui permet de servir un
+ * projet sous react-hook-form et un projet sans rien, avec le même code.
+ *
+ * ```tsx
+ * <Form
+ *   columns={2}
+ *   defaultValues={{ nom: "", email: "" }}
+ *   validate={createValidator({ nom: [required()], email: [required(), email()] })}
+ *   onSubmit={(values) => api.post("/clients", { body: values })}
+ *   fields={[
+ *     { name: "nom", label: "Nom du client", required: true },
+ *     { name: "email", label: "Adresse e-mail", type: "email", required: true },
+ *   ]}
+ * />
+ * ```
+ */
+export function Form<TValues extends FormShape = FormShape>({
+  fields,
+  form: adapter,
+  defaultValues,
+  validate,
+  onSubmit,
+  columns = 1,
+  submitText = "Enregistrer",
+  clearText = "Réinitialiser",
+  showClear = false,
+  submitProps,
+  actions,
+  loading = false,
+  requireDirty = true,
+  requireValid = true,
+  className,
+}: FormProps<TValues>) {
+  // Le hook est appelé sans condition, comme il se doit; son résultat n'est
+  // utilisé que si aucun adaptateur n'a été fourni. Un `useLocalForm` inerte
+  // ne coûte que trois `useState`.
+  const interne = useLocalForm<TValues>({
+    defaultValues: (defaultValues ?? VIDE) as TValues,
+    ...(validate ? { validate } : {}),
+    ...(onSubmit ? { onSubmit } : {}),
+  });
+  const form = adapter ?? interne;
+
+  const busy = loading || form.state.isSubmitting;
+  const submitDisabled =
+    busy ||
+    (requireDirty && !form.state.isDirty) ||
+    (requireValid && !form.state.isValid);
+
+  const grille = (nombre: number): CSSProperties => ({
+    gridTemplateColumns: `repeat(${nombre}, minmax(0, 1fr))`,
+  });
+
+  const rendre = (config: FormFieldConfig) => {
+    const { name, colSpan, rowSpan, ...props } = config;
+
+    return (
+      <div
+        key={name}
+        className="sia-form-cell"
+        style={{
+          ...(columns > 1 && colSpan ? { gridColumn: `span ${colSpan}` } : {}),
+          ...(columns > 1 && rowSpan ? { gridRow: `span ${rowSpan}` } : {}),
+        }}
+      >
+        <Field
+          {...props}
+          field={form.bind(name as keyof TValues & string)}
+          {...(busy ? { disabled: true } : {})}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <form
+      className={cn("sia-form", className)}
+      data-columns={columns}
+      noValidate
+      onSubmit={(event) => {
+        event.preventDefault();
+        void form.submit();
+      }}
+    >
+      <div className="sia-form-grid" style={grille(columns)}>
+        {fields.map((entry) =>
+          isGroup(entry) ? (
+            <fieldset key={entry.group} className="sia-form-group">
+              <legend className="sia-form-group-header">
+                <span className="sia-form-group-title">{entry.group}</span>
+                {entry.description && (
+                  <span className="sia-form-group-desc">{entry.description}</span>
+                )}
+              </legend>
+
+              <div
+                className="sia-form-group-grid"
+                style={grille(columns === 1 ? 1 : (entry.columns ?? columns))}
+              >
+                {entry.fields.map(rendre)}
+              </div>
+            </fieldset>
+          ) : (
+            rendre(entry)
+          ),
+        )}
+      </div>
+
+      {actions ?? (
+        <div className="sia-form-actions">
+          {showClear && (
+            <Button
+              type="button"
+              variant="ghost"
+              disabled={busy}
+              onClick={() => form.reset()}
+            >
+              {clearText}
+            </Button>
+          )}
+          <Button
+            type="submit"
+            {...submitProps}
+            loading={busy}
+            disabled={submitDisabled}
+          >
+            {submitText}
+          </Button>
+        </div>
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,80 @@
+.sia-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.sia-form-grid {
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* Indispensable : sans lui, un champ au contenu large — une longue option de
+   `Select` — fait déborder toute la colonne au lieu de se tronquer. */
+.sia-form-cell { min-width: 0; }
+
+/* Sur une seule colonne, les portées n'ont plus de sens. */
+.sia-form[data-columns="1"] .sia-form-cell {
+  grid-column: auto;
+  grid-row: auto;
+}
+
+/* ── Groupes ───────────────────────────────────────────────────────────── */
+
+.sia-form-group {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Un `fieldset` plutôt qu'un `div` : le lecteur d'écran annonce alors le
+   titre du groupe avant chaque champ qu'il contient. */
+.sia-form-group-header {
+  display: block;
+  width: 100%;
+  padding: 0 0 .5rem;
+  border-bottom: 1px solid var(--sia-border);
+}
+
+.sia-form-group-title {
+  display: block;
+  color: var(--sia-foreground);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.sia-form-group-desc {
+  display: block;
+  margin-top: .25rem;
+  color: var(--sia-muted);
+  font-size: .875rem;
+  line-height: 1.45;
+}
+
+.sia-form-group-grid { display: grid; gap: 1rem; }
+
+/* ── Actions ───────────────────────────────────────────────────────────── */
+
+.sia-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: .75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--sia-border);
+}
+
+/* Sous 640 px, deux colonnes de champs deviennent illisibles. */
+@media (max-width: 640px) {
+  .sia-form-grid,
+  .sia-form-group-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .sia-form-actions { flex-direction: column-reverse; }
+  .sia-form-actions > * { width: 100%; }
+}

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

@@ -0,0 +1,2 @@
+export { Field as FormField } from "../Field";
+export type { FieldProps as FormFieldProps } from "../Field";

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

@@ -0,0 +1,121 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "@sia-ui/utils";
+import { Overlay, type OverlayPlacement } from "../Overlay";
+import "./styles.css";
+
+export interface HoverCardProps {
+  content: ReactNode;
+  children: ReactElement<{ onMouseEnter?: () => void; onFocus?: () => void }>;
+  /**
+   * Délai avant ouverture. Il n'est pas cosmétique : sans lui, traverser la
+   * page avec la souris ouvre et ferme une dizaine de panneaux au passage.
+   */
+  openDelay?: number;
+  /** Délai avant fermeture, le temps d'atteindre le panneau à la souris. */
+  closeDelay?: number;
+  placement?: OverlayPlacement;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  width?: number | string;
+  className?: string;
+}
+
+/**
+ * Un aperçu au survol.
+ *
+ * Ce n'est pas un `Tooltip` : celui-ci porte une phrase et se lit d'un coup
+ * d'œil, celui-là porte du contenu — une fiche, un résumé, une image — que
+ * l'on peut vouloir survoler à son tour, voire sélectionner.
+ */
+export function HoverCard({
+  content,
+  children,
+  openDelay = 300,
+  closeDelay = 150,
+  placement = "bottom-start",
+  open: openProp,
+  onOpenChange,
+  width = 20 * 16,
+  className,
+}: HoverCardProps) {
+  const anchorRef = useRef<HTMLElement>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = openProp ?? internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange, openProp],
+  );
+
+  const schedule = useCallback(
+    (next: boolean, delay: number) => {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setOpen(next), delay);
+    },
+    [setOpen],
+  );
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const trigger = isValidElement(children)
+    ? cloneElement(children, {
+        ref: anchorRef,
+        // Le focus ouvre aussi : au clavier il n'y a pas de survol, et une
+        // fiche qu'on ne peut atteindre qu'à la souris n'existe pas pour
+        // tout le monde.
+        onFocus: () => {
+          children.props.onFocus?.();
+          schedule(true, 0);
+        },
+        onBlur: () => schedule(false, closeDelay),
+        onMouseEnter: () => {
+          children.props.onMouseEnter?.();
+          schedule(true, openDelay);
+        },
+        onMouseLeave: () => schedule(false, closeDelay),
+      } as never)
+    : children;
+
+  return (
+    <span className="sia-hover-card-anchor">
+      {trigger}
+      <Overlay
+        open={open}
+        anchorRef={anchorRef}
+        onOpenChange={setOpen}
+        placement={placement}
+        className={cn("sia-hover-card", className)}
+        role="dialog"
+      >
+        <div
+          style={{ width }}
+          className="sia-hover-card__body"
+          // Survoler le panneau le maintient ouvert : sans cela il se ferme
+          // dès que la souris quitte le déclencheur pour y aller.
+          onMouseEnter={() => schedule(true, 0)}
+          onMouseLeave={() => schedule(false, closeDelay)}
+        >
+          {content}
+        </div>
+      </Overlay>
+    </span>
+  );
+}

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

@@ -0,0 +1,26 @@
+.sia-hover-card-anchor { display: inline-flex; }
+
+.sia-hover-card {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sia-hover-card__body {
+  max-width: calc(100vw - 2rem);
+  padding: .875rem 1rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  box-shadow: var(--sia-elevation-overlay);
+  color: var(--sia-foreground);
+  font-size: .875rem;
+  line-height: 1.5;
+  animation: sia-hover-card-in var(--sia-duration-base) var(--sia-easing-entrance);
+}
+
+@keyframes sia-hover-card-in {
+  from { opacity: 0; transform: translateY(6px) scale(.98); }
+  to { opacity: 1; transform: none; }
+}

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

@@ -0,0 +1,27 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Tooltip, type TooltipProps } from "../Tooltip";
+import { useComponentDefaults } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon: ReactNode;
+  variant?: "solid" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+  radius?: "default" | "none" | "sm" | "lg" | "full";
+  tooltip?: Omit<TooltipProps, "children">;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ label, icon, variant: variantProp, size: sizeProp, radius: radiusProp, tooltip, className, type = "button", ...props }, ref) => {
+    const defaults = useComponentDefaults<IconButtonProps>("iconButton");
+    const variant = variantProp ?? defaults.variant ?? "ghost";
+    const size = sizeProp ?? defaults.size ?? "md";
+    const radius = radiusProp ?? defaults.radius ?? "default";
+    const button = <button ref={ref} type={type} aria-label={label} {...(!tooltip ? { title: label } : {})} className={cn("sia-icon-button", `sia-icon-button--${variant}`, `sia-icon-button--${size}`, `sia-radius--${radius}`, className)} {...props}>{icon}</button>;
+    return tooltip ? <Tooltip {...tooltip}>{button}</Tooltip> : button;
+  }
+);
+
+IconButton.displayName = "IconButton";

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

@@ -0,0 +1,7 @@
+.sia-icon-button { display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; padding:0; border:1px solid transparent; border-radius:var(--sia-radius); color:var(--sia-foreground); background:transparent; font:inherit; cursor:pointer; }
+.sia-icon-button--sm { width:2rem; height:2rem; }
+.sia-icon-button--lg { width:3rem; height:3rem; }
+.sia-icon-button--solid { color:var(--sia-primary-foreground); background:var(--sia-primary); }
+.sia-icon-button--outline { border-color:var(--sia-border); background:var(--sia-background); }
+.sia-icon-button:hover { background:color-mix(in srgb,var(--sia-primary) 8%,var(--sia-background)); }
+.sia-icon-button:focus-visible { outline:3px solid color-mix(in srgb,var(--sia-primary) 30%,transparent); outline-offset:2px; }