@hgdc/ui 0.1.1 → 0.2.0

package/dist/empty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "./cn.js";
+function Empty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12 text-center text-balance", className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "flex size-14 shrink-0 items-center justify-center rounded-2xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-7",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-title", className: cn("font-heading text-lg font-medium tracking-tight", className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-description", className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className), ...props }));
+}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/field.d.ts

@@ -0,0 +1,34 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "./label.tsx";
+import { type Variants } from "./cn.ts";
+/** Identifiant du champ courant, s'il y en a un. */
+declare function useFieldId(): string | undefined;
+/**
+ * Identifiants de la description et de l'erreur du champ courant, pour
+ * `aria-describedby`. `FieldDescription` et `FieldError` les portent en `id` ;
+ * le contrôle les cite. Un identifiant sans élément est ignoré par les
+ * lecteurs d'écran, donc un champ sans description ne cite rien de faux.
+ */
+declare function useFieldDescribedBy(): string | undefined;
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): React.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const fieldVariants: Variants<{
+    orientation: "vertical" | "horizontal" | "responsive";
+}>;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldLabel({ className, htmlFor, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldDescription({ className, id, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function FieldError({ className, children, errors, id, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): React.JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, useFieldDescribedBy, useFieldId, };

package/dist/field.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, useContext, useId, useMemo } from "react";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+import { cn } from "./cn.js";
+/**
+ * Identifiant partagé entre un libellé et son champ.
+ *
+ * `Field` n'était qu'un `<div role="group">` : la liaison entre le libellé et
+ * le contrôle reposait entièrement sur l'appelant, qui devait poser `htmlFor`
+ * d'un côté et `id` de l'autre. Sur cent soixante-cinq libellés du portail,
+ * trente l'avaient oubliée — autant de champs qu'un lecteur d'écran annonce
+ * sans dire de quoi il s'agit, et sur lesquels cliquer le libellé ne fait rien.
+ *
+ * Le champ fabrique donc son identifiant et le passe aux deux. Un `htmlFor` ou
+ * un `id` explicite l'emporte toujours : les cent trente-cinq appels qui
+ * faisaient le travail à la main continuent de fonctionner tels quels.
+ */
+const FieldIdContext = createContext(undefined);
+/** Identifiant du champ courant, s'il y en a un. */
+function useFieldId() {
+    return useContext(FieldIdContext);
+}
+/**
+ * Identifiants de la description et de l'erreur du champ courant, pour
+ * `aria-describedby`. `FieldDescription` et `FieldError` les portent en `id` ;
+ * le contrôle les cite. Un identifiant sans élément est ignoré par les
+ * lecteurs d'écran, donc un champ sans description ne cite rien de faux.
+ */
+function useFieldDescribedBy() {
+    const id = useContext(FieldIdContext);
+    return id ? `${id}-description ${id}-error` : undefined;
+}
+function FieldSet({ className, ...props }) {
+    return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
+}
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    const id = useId();
+    return (_jsx(FieldIdContext, { value: id, children: _jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }) }));
+}
+function FieldContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className), ...props }));
+}
+function FieldLabel({ className, htmlFor, ...props }) {
+    const fieldId = useFieldId();
+    return (_jsx(Label, { htmlFor: htmlFor ?? fieldId, "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
+}
+function FieldDescription({ className, id, ...props }) {
+    const fieldId = useFieldId();
+    return (_jsx("p", { id: id ?? (fieldId ? `${fieldId}-description` : undefined), "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, id, ...props }) {
+    const fieldId = useFieldId();
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+        if (uniqueErrors.length === 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (_jsx("div", { role: "alert", id: id ?? (fieldId ? `${fieldId}-error` : undefined), "data-slot": "field-error", 
+        // `soft-in` : un message d'erreur surgissait sous le champ et poussait
+        // tout le formulaire d'un cran. Deux dixièmes de seconde suffisent à
+        // faire lire une arrivée plutôt qu'un sursaut.
+        className: cn("soft-in text-sm font-normal text-destructive", className), ...props, children: content }));
+}
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, useFieldDescribedBy, useFieldId, };

package/dist/floating.d.ts

@@ -0,0 +1,40 @@
+/**
+ * La règle unique des surfaces flottantes : menus, sélecteurs, combobox,
+ * popovers (2026-09-27).
+ *
+ * Base UI retourne une surface qui manque de place (`flip`) mais, par défaut,
+ * ne la décale pas le long de son ancre : un menu de 16 rem aligné sur un
+ * bouton près du bord d'un téléphone sortait de l'écran (menu d'une phase,
+ * choix de l'organisation d'un document). `align: "shift"` la ramène dans la
+ * fenêtre, `fallbackAxisSide: "none"` évite qu'elle saute sur le côté de
+ * l'ancre, et la marge garde 8 px entre la surface et le bord.
+ */
+export declare const FLOATING_COLLISION_AVOIDANCE: {
+    readonly side: "flip";
+    readonly align: "shift";
+    readonly fallbackAxisSide: "none";
+};
+export declare const FLOATING_COLLISION_PADDING = 8;
+/**
+ * Le fond de toute surface flottante, opaque (2026-10-05) : le verre dépoli
+ * (`bg-popover/80` + flou) laissait voir un bouton blanc posé dessous.
+ * `--popover` et `--muted` sont redéfinis sur la surface : un pied collé en
+ * `bg-popover` (sélecteurs de projet et de client) prend la même teinte, et le
+ * survol des items (`bg-muted`) reste lisible sur le fond plus clair du thème
+ * sombre (jetons `--floating`, `--floating-muted` dans `styles.css`).
+ */
+export declare const FLOATING_SURFACE = "bg-popover text-popover-foreground shadow-xl shadow-black/5 [--muted:var(--floating-muted)] [--popover:var(--floating)]";
+/**
+ * Jamais plus large que la fenêtre, marges comprises : une largeur fixe
+ * (`w-72`) passée par l'appelant ne peut plus déborder d'un écran de 320 px.
+ */
+export declare const FLOATING_MAX_WIDTH = "max-w-[calc(100vw-1rem)]";
+/**
+ * Un sous-menu (« Déplacer vers ») n'a souvent pas la place de se retourner
+ * sur un téléphone : il glisse dans la fenêtre, quitte à chevaucher son menu.
+ */
+export declare const FLOATING_SUBMENU_COLLISION_AVOIDANCE: {
+    readonly side: "shift";
+    readonly align: "shift";
+    readonly fallbackAxisSide: "none";
+};

package/dist/floating.js

@@ -0,0 +1,40 @@
+/**
+ * La règle unique des surfaces flottantes : menus, sélecteurs, combobox,
+ * popovers (2026-09-27).
+ *
+ * Base UI retourne une surface qui manque de place (`flip`) mais, par défaut,
+ * ne la décale pas le long de son ancre : un menu de 16 rem aligné sur un
+ * bouton près du bord d'un téléphone sortait de l'écran (menu d'une phase,
+ * choix de l'organisation d'un document). `align: "shift"` la ramène dans la
+ * fenêtre, `fallbackAxisSide: "none"` évite qu'elle saute sur le côté de
+ * l'ancre, et la marge garde 8 px entre la surface et le bord.
+ */
+export const FLOATING_COLLISION_AVOIDANCE = {
+    side: "flip",
+    align: "shift",
+    fallbackAxisSide: "none",
+};
+export const FLOATING_COLLISION_PADDING = 8;
+/**
+ * Le fond de toute surface flottante, opaque (2026-10-05) : le verre dépoli
+ * (`bg-popover/80` + flou) laissait voir un bouton blanc posé dessous.
+ * `--popover` et `--muted` sont redéfinis sur la surface : un pied collé en
+ * `bg-popover` (sélecteurs de projet et de client) prend la même teinte, et le
+ * survol des items (`bg-muted`) reste lisible sur le fond plus clair du thème
+ * sombre (jetons `--floating`, `--floating-muted` dans `styles.css`).
+ */
+export const FLOATING_SURFACE = "bg-popover text-popover-foreground shadow-xl shadow-black/5 [--muted:var(--floating-muted)] [--popover:var(--floating)]";
+/**
+ * Jamais plus large que la fenêtre, marges comprises : une largeur fixe
+ * (`w-72`) passée par l'appelant ne peut plus déborder d'un écran de 320 px.
+ */
+export const FLOATING_MAX_WIDTH = "max-w-[calc(100vw-1rem)]";
+/**
+ * Un sous-menu (« Déplacer vers ») n'a souvent pas la place de se retourner
+ * sur un téléphone : il glisse dans la fenêtre, quitte à chevaucher son menu.
+ */
+export const FLOATING_SUBMENU_COLLISION_AVOIDANCE = {
+    side: "shift",
+    align: "shift",
+    fallbackAxisSide: "none",
+};

package/dist/input-otp.d.ts

@@ -0,0 +1,18 @@
+import { OTPInput } from "input-otp";
+import * as React from "react";
+/**
+ * Saisie d'un code à usage unique, case par case (shadcn `input-otp`, base
+ * `input-otp`). Un seul vrai `<input>` porte le clavier, le collage d'un code
+ * entier et l'`autocomplete="one-time-code"` ; les cases ne font que l'afficher.
+ * Habillage du champ du site : fond de page, filet à 70 %, anneau vert sur
+ * la case active.
+ */
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): React.JSX.Element;
+declare function InputOTPSeparator(props: React.ComponentProps<"div">): React.JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/input-otp.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React from "react";
+import { cn } from "./cn.js";
+/**
+ * Saisie d'un code à usage unique, case par case (shadcn `input-otp`, base
+ * `input-otp`). Un seul vrai `<input>` porte le clavier, le collage d'un code
+ * entier et l'`autocomplete="one-time-code"` ; les cases ne font que l'afficher.
+ * Habillage du champ du site : fond de page, filet à 70 %, anneau vert sur
+ * la case active.
+ */
+function InputOTP({ className, containerClassName, ...props }) {
+    return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("flex items-center has-disabled:opacity-50", containerClassName), spellCheck: false, className: cn("disabled:cursor-not-allowed", className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center gap-2", className), ...props });
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const context = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = context.slots[index] ?? {};
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-13 w-11 items-center justify-center rounded-2xl bg-background text-xl font-medium tabular-nums ring-1 ring-border/70 transition-[box-shadow] duration-(--duration-fast) ring-inset aria-invalid:ring-2 aria-invalid:ring-destructive/60 data-[active=true]:ring-2 data-[active=true]:ring-ring sm:h-12 sm:w-10 sm:text-lg", className), ...props, children: [char, hasFakeCaret ? (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-5 w-px bg-foreground motion-safe:animate-pulse" }) })) : null] }));
+}
+function InputOTPSeparator(props) {
+    return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", className: "h-px w-2.5 bg-muted-foreground/40", ...props }));
+}
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/input.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import Calendar03Icon from "@hugeicons/core-free-icons/Calendar03Icon";
+import Clock01Icon from "@hugeicons/core-free-icons/Clock01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import * as React from "react";
+import { useFieldDescribedBy, useFieldId } from "./field.js";
+import { cn } from "./cn.js";
+/**
+ * Les champs de date et d'heure portent leur icône à gauche.
+ *
+ * iOS n'en dessine aucune : une échéance ressemblait à un champ texte vide. Et
+ * sans `appearance: none` (classe `date-field`, `styles.css`), Safari donne au
+ * champ une largeur propre qui débordait de la feuille du bas, son filet
+ * courant jusqu'au bord de l'écran.
+ */
+const PICKER_ICONS = {
+    date: Calendar03Icon,
+    month: Calendar03Icon,
+    "datetime-local": Calendar03Icon,
+    time: Clock01Icon,
+};
+const INPUT_CLASS = 
+// Le champ du site : fond de page, un filet à 70 % au repos, et l'anneau
+// vert plein au focus — le seul endroit où l'accent dit « c'est ici ».
+"h-11 lg:h-10 touch-field w-full min-w-0 rounded-2xl bg-background px-3.5 py-1 text-base ring-1 ring-border/70 transition-[color,box-shadow,background-color] duration-(--duration-fast) outline-none ring-inset file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive/60 md:text-sm";
+function Input({ className, type, ...props }) {
+    const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy();
+    const pickerIcon = type ? PICKER_ICONS[type] : undefined;
+    const input = (_jsx(InputPrimitive, { type: type, "data-slot": "input", "aria-describedby": props["aria-describedby"] ?? describedBy, className: cn(INPUT_CLASS, pickerIcon && "relative date-field pl-10", className), id: props.id ?? fieldId, ...props }));
+    if (!pickerIcon)
+        return input;
+    return (_jsxs("div", { className: "relative w-full min-w-0", children: [input, _jsx(HugeiconsIcon, { icon: pickerIcon, strokeWidth: 2, "aria-hidden": true, className: "pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted-foreground" })] }));
+}
+export { Input };

package/dist/label.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+export { Label };

package/dist/label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./cn.js";
+function Label({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+export { Label };

package/dist/segmented-control.d.ts

@@ -0,0 +1,32 @@
+import { type IconSvgElement } from "@hugeicons/react";
+type SegmentedControlProps<T extends string> = {
+    value: T;
+    onValueChange: (value: T) => void;
+    options: Array<{
+        value: T;
+        label: string;
+        /** Remplace le libellé, qui devient alors l'étiquette accessible. */
+        icon?: IconSvgElement;
+    }>;
+    /** Compact variant — smaller padding and text. */
+    size?: "md" | "sm";
+    /**
+     * Nom du groupe pour les technologies d'assistance, quand aucun `<label>`
+     * ne peut le désigner : un titre de champ est un `<div>`, rien ne le relie
+     * au groupe autrement.
+     */
+    label?: string;
+    className?: string;
+};
+/**
+ * Horizontal segmented toggle: a row of mutually-exclusive options sharing a
+ * single pill container. Accessible via a button group with `aria-pressed`.
+ *
+ * Une option peut porter une icône au lieu de son libellé. Trois mots côte à
+ * côte obligeaient à élargir le conteneur pour que le plus long tienne, et
+ * « Clair / Sombre / Système » se lit de toute façon plus vite en soleil, lune
+ * et écran. Le libellé devient alors l'étiquette accessible et l'infobulle : la
+ * signification reste atteignable, elle n'occupe plus la place.
+ */
+export declare function SegmentedControl<T extends string>({ value, onValueChange, options, size, label, className, }: SegmentedControlProps<T>): React.JSX.Element;
+export {};

package/dist/segmented-control.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Même dessin dans tout l'écosystème.
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "./cn.js";
+/**
+ * Horizontal segmented toggle: a row of mutually-exclusive options sharing a
+ * single pill container. Accessible via a button group with `aria-pressed`.
+ *
+ * Une option peut porter une icône au lieu de son libellé. Trois mots côte à
+ * côte obligeaient à élargir le conteneur pour que le plus long tienne, et
+ * « Clair / Sombre / Système » se lit de toute façon plus vite en soleil, lune
+ * et écran. Le libellé devient alors l'étiquette accessible et l'infobulle : la
+ * signification reste atteignable, elle n'occupe plus la place.
+ */
+export function SegmentedControl({ value, onValueChange, options, size = "md", label, className, }) {
+    return (_jsx("div", { role: "group", "aria-label": label, className: cn(
+        // Fond `muted` plutôt qu'un contour (ADR 0013).
+        "inline-flex w-fit max-w-full shrink-0 overflow-hidden rounded-3xl bg-muted p-1", className), children: options.map((opt) => {
+            const active = value === opt.value;
+            return (_jsx("button", { type: "button", "aria-pressed": active, "aria-label": opt.icon ? opt.label : undefined, title: opt.icon ? opt.label : undefined, onClick: () => onValueChange(opt.value), className: cn(
+                // Pas de flex-1 : une demi-colonne trop étroite rend le segment
+                // actif circulaire et casse « Follow-up » au tiret.
+                "touch-target shrink-0 rounded-full px-3.5 font-medium whitespace-nowrap", "transition-colors duration-150 ease-out", opt.icon && "flex items-center justify-center", size === "sm" ? "py-1.5 text-xs" : "py-2 text-sm", active ? "bg-foreground text-background" : "text-muted-foreground hover:text-foreground"), children: opt.icon ? (_jsx(HugeiconsIcon, { icon: opt.icon, strokeWidth: 2, className: size === "sm" ? "size-4" : "size-[1.15rem]" })) : (opt.label) }, opt.value));
+        }) }));
+}

package/dist/select.d.ts

@@ -0,0 +1,21 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import * as React from "react";
+declare function Select<Value>(props: SelectPrimitive.Root.Props<Value>): React.JSX.Element;
+declare function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props): React.JSX.Element;
+type SelectValueProps = Omit<SelectPrimitive.Value.Props, "children"> & {
+    /**
+     * Map value → label. Lorsque fourni sans `children`, le wrapper résout
+     * automatiquement le label à afficher. Évite que le SelectValue affiche
+     * une valeur brute (ex: ID Convex) quand `items` du Root ne couvre pas le
+     * cas ou quand la signature attendue par Base UI diffère.
+     */
+    items?: Record<string, React.ReactNode>;
+    children?: SelectPrimitive.Value.Props["children"];
+};
+declare function SelectValue({ className, items, children, ...props }: SelectValueProps): React.JSX.Element;
+declare function SelectContent({ className, align, alignOffset, side, sideOffset, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
+declare function SelectGroup({ ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
+declare function SelectGroupLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

package/dist/select.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import ArrowDown01Icon from "@hugeicons/core-free-icons/ArrowDown01Icon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import * as React from "react";
+import { useFieldDescribedBy } from "./field.js";
+import { FLOATING_COLLISION_AVOIDANCE, FLOATING_COLLISION_PADDING, FLOATING_MAX_WIDTH, FLOATING_SURFACE, } from "./floating.js";
+import { cn } from "./cn.js";
+/**
+ * Base UI Select wrapper. Replaces the previous native <select> wrapper so
+ * the dropdown is consistent across platforms (desktop + Android Chrome get
+ * the custom popover).
+ *
+ * iOS compris : la molette du système a été retirée (ADR 0045, révision du
+ * 2026-09-23), le menu dessiné tient la DA sur tous les appareils.
+ *
+ * Popup DA matches DropdownMenuContent: rounded-2xl, opaque
+ * `FLOATING_SURFACE`, a soft shadow and no ring.
+ *
+ * Typical usage:
+ *
+ *   <Select value={x} onValueChange={setX}>
+ *     <SelectTrigger id="x"><SelectValue placeholder="–" /></SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="a">A</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ */
+// Même recette que `Input` : filet à 70 % au repos, anneau vert au focus et
+// quand le menu est ouvert.
+const triggerClasses = "flex h-11 lg:h-10 touch-field w-full min-w-0 items-center justify-between gap-2 rounded-2xl bg-background px-3.5 text-base ring-1 ring-border/70 transition-[color,box-shadow,background-color] duration-(--duration-fast) outline-none ring-inset placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive/60 data-popup-open:ring-2 data-popup-open:ring-ring md:text-sm";
+function Select(props) {
+    return _jsx(SelectPrimitive.Root, { ...props });
+}
+function SelectTrigger({ className, children, ...props }) {
+    const describedBy = useFieldDescribedBy();
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "aria-describedby": props["aria-describedby"] ?? describedBy, className: cn(triggerClasses, className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { className: "shrink-0 text-muted-foreground", children: _jsx(HugeiconsIcon, { icon: ArrowDown01Icon, strokeWidth: 2, className: "size-4" }) })] }));
+}
+function SelectValue({ className, items, children, ...props }) {
+    const renderChildren = children ??
+        (items
+            ? (value) => {
+                if (value == null || value === "")
+                    return null;
+                if (typeof value !== "string" && typeof value !== "number")
+                    return null;
+                const key = String(value);
+                return items[key] ?? key;
+            }
+            : undefined);
+    return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("truncate text-left data-empty:text-muted-foreground", className), ...props, children: renderChildren }));
+}
+function SelectContent({ className, align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: FLOATING_COLLISION_PADDING, collisionAvoidance: FLOATING_COLLISION_AVOIDANCE, children: _jsx(SelectPrimitive.Popup, { "data-slot": "select-content", className: cn(FLOATING_MAX_WIDTH, FLOATING_SURFACE, 
+                // Transitions (pas de keyframes) : un open→close rapide retarget
+                // depuis la position courante au lieu de rejouer l'anim entière.
+                // Exit (100ms) plus court que l'enter (150ms).
+                "relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1.5 transition-[scale,opacity] duration-(--duration-fast) ease-ios outline-none data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-(--duration-instant) data-starting-style:scale-[0.98] data-starting-style:opacity-0", className), ...props }) }) }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-muted data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectPrimitive.ItemIndicator, { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: _jsx(HugeiconsIcon, { icon: Tick02Icon, strokeWidth: 2, className: "size-4" }) })] }));
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectGroupLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-group-label", className: cn("px-3 py-2 text-xs text-muted-foreground", className), ...props }));
+}
+function SelectSeparator({ className, ...props }) {
+    return _jsx("div", { "data-slot": "select-separator", className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className), ...props });
+}
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

package/dist/separator.d.ts

@@ -0,0 +1,3 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): React.JSX.Element;
+export { Separator };

package/dist/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { cn } from "./cn.js";
+function Separator({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
+}
+export { Separator };

package/dist/sonner.d.ts

@@ -0,0 +1,3 @@
+import { type ToasterProps } from "sonner";
+declare function Toaster(props: ToasterProps): React.JSX.Element;
+export { Toaster };

package/dist/sonner.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
+import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
+import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon";
+import Loading03Icon from "@hugeicons/core-free-icons/Loading03Icon";
+import MultiplicationSignCircleIcon from "@hugeicons/core-free-icons/MultiplicationSignCircleIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Toaster as Sonner } from "sonner";
+import { useTheme } from "./theme.js";
+function Toaster(props) {
+    const { theme } = useTheme();
+    // Offset = hauteur navbar (3.25rem) + safe-area-inset-top + petit gap (0.5rem)
+    // pour que les toasts top-right ne soient pas mangés par le header sticky
+    // ni par le notch iOS PWA.
+    const topOffset = "calc(env(safe-area-inset-top) + 3.75rem)";
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", position: "top-right", offset: { top: topOffset, right: "1rem", left: "1rem", bottom: "1rem" }, mobileOffset: { top: topOffset, right: "0.75rem", left: "0.75rem", bottom: "1rem" }, icons: {
+            success: _jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, strokeWidth: 2, className: "size-4" }),
+            info: _jsx(HugeiconsIcon, { icon: InformationCircleIcon, strokeWidth: 2, className: "size-4" }),
+            warning: _jsx(HugeiconsIcon, { icon: Alert02Icon, strokeWidth: 2, className: "size-4" }),
+            error: _jsx(HugeiconsIcon, { icon: MultiplicationSignCircleIcon, strokeWidth: 2, className: "size-4" }),
+            loading: _jsx(HugeiconsIcon, { icon: Loading03Icon, strokeWidth: 2, className: "size-4 animate-spin" }),
+        }, style: {
+            "--normal-bg": "var(--popover)",
+            "--normal-text": "var(--popover-foreground)",
+            "--normal-border": "var(--border)",
+            "--border-radius": "var(--radius)",
+        }, toastOptions: {
+            classNames: {
+                toast: "cn-toast",
+            },
+        }, ...props }));
+}
+export { Toaster };

package/dist/spinner.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Inline spinner - Hugeicons `Loading03Icon` + animate-spin.
+ * Hugeicons gardent l'identite DA, contrairement a un raw SVG ou un Tailwind border-spin.
+ */
+export declare function Spinner({ className, label, size, }: {
+    className?: string;
+    label?: string;
+    size?: 3 | 4 | 5 | 6;
+}): React.JSX.Element;

package/dist/spinner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Loading03Icon from "@hugeicons/core-free-icons/Loading03Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "./cn.js";
+/**
+ * Inline spinner - Hugeicons `Loading03Icon` + animate-spin.
+ * Hugeicons gardent l'identite DA, contrairement a un raw SVG ou un Tailwind border-spin.
+ */
+export function Spinner({ className, label, size = 4, }) {
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-2", className), children: [_jsx(HugeiconsIcon, { icon: Loading03Icon, strokeWidth: 2, className: cn("animate-spin", size === 3 && "size-3", size === 4 && "size-4", size === 5 && "size-5", size === 6 && "size-6") }), label ? _jsx("span", { children: label }) : null] }));
+}

package/dist/switch.d.ts

@@ -0,0 +1,17 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+/**
+ * Interrupteur — la forme qu'a un réglage qu'on allume et qu'on éteint.
+ *
+ * Il remplace le couple « phrase qui décrit l'état + bouton qui le change ».
+ * Ces deux-là disaient la même chose deux fois — « Notifications activées »
+ * au-dessus de « Désactiver » — et l'un des deux mentait toujours au premier
+ * coup d'œil, puisqu'un bouton porte l'action et la phrase porte l'état.
+ *
+ * Une pastille de texte avait d'abord pris leur place ; elle disait bien l'état
+ * mais ne se lisait pas comme un contrôle. L'interrupteur, lui, n'a pas besoin
+ * d'être expliqué : sa forme est son mode d'emploi.
+ *
+ * Dimensions calées sur iOS — 51 × 31 points, soit 3,25 × 2 rem — pour que le
+ * pouce le trouve sans viser.
+ */
+export declare function Switch({ checked, onCheckedChange, disabled, className, ...props }: SwitchPrimitive.Root.Props): React.JSX.Element;