@hgdc/ui 0.48.0 → 0.49.0

package/README.md

@@ -159,14 +159,15 @@ Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôl
 
 ## Formulaires et réglages
 
-| Import              | Exemple                                                                                                                                                |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `settings-section`  | `<SettingsSection title="Nom de l'espace" description="…" dirty={changed} saving={saving} onSave={save}>…</SettingsSection>` : un Enregistrer par bloc |
-| `date-range-picker` | `<DateRangePicker value={{ from: "2026-10-01", to: "2026-10-15" }} onChange={(range, preset) => …} />` : raccourcis et période libre                   |
-| `date-time-field`   | `<DateTimeField value={sendAt} onChange={setSendAt} min={Date.now()} />` : millisecondes, heure du navigateur                                          |
-| `color-field`       | `<ColorField value="#7c3aed" onChange={…} />` : pastille, code hexadécimal, contraste avec le texte blanc et son verdict                               |
-| `money-field`       | `<MoneyField value={centimes} onChange={…} />` : CHF en centimes, « 1’250.50 », accepte « 12.– » ; `formatChf`, `parseMoney`                           |
-| `address-fields`    | `<AddressFields value={address} onChange={…} errors={validatePostalAddress(address)} />` : rue, numéro, NPA, localité, pays (facture QR)               |
+| Import              | Exemple                                                                                                                                                 |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `settings-section`  | `<SettingsSection title="Nom de l'espace" description="…" dirty={changed} saving={saving} onSave={save}>…</SettingsSection>` : un Enregistrer par bloc  |
+| `date-range-picker` | `<DateRangePicker value={{ from: "2026-10-01", to: "2026-10-15" }} onChange={(range, preset) => …} />` : raccourcis et période libre                    |
+| `date-time-field`   | `<DateTimeField value={sendAt} onChange={setSendAt} min={Date.now()} />` : millisecondes, heure du navigateur                                           |
+| `color-field`       | `<ColorField value="#7c3aed" onChange={…} />` : pastille, code hexadécimal, contraste avec le texte blanc et son verdict                                |
+| `money-field`       | `<MoneyField value={centimes} onChange={…} />` : CHF en centimes, « 1’250.50 », accepte « 12.– » ; `formatChf`, `parseMoney`                            |
+| `address-fields`    | `<AddressFields value={address} onChange={…} errors={validatePostalAddress(address)} />` : rue, numéro, NPA, localité, pays (facture QR)                |
+| `floating-field`    | `<FloatingField label="Adresse e-mail" type="email" error={message} surface="card" />` : libellé dans le champ, monté sur le filet au focus (connexion) |
 
 `access-request` : `<AccessRequest endpoint="https://<deploiement>.convex.site/f/<id>" product="Mail" signInRender={<Link to="/sign-in" />} />`, la page « Demander un accès » d'un produit (les comptes HGDC s'ouvrent sur invitation). Poste en JSON vers un formulaire HGDC Mail Forms : prénom, nom, entreprise, e-mail professionnel, message facultatif, `produit` caché, piège `_gotcha`. États envoi, réussite, erreur, champ refusé ; `submitAccessRequest` s'appelle seul.
 

package/dist/floating-field.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+/**
+ * Champ à libellé flottant, pour les écrans de connexion : le libellé est dans le champ vide et
+ * monte sur le filet dès que le champ a le focus ou une valeur (saisie, autoremplissage).
+ *
+ * Tout en CSS : `placeholder=" "` rend `:placeholder-shown` vrai tant que le champ est vide, le
+ * libellé (`peer-…`) suit sans JavaScript, dès le rendu serveur. Le libellé posé sur le filet
+ * reprend le fond de la surface où le champ est posé (`surface`, fond de page par défaut). Texte à
+ * 16 px : sous 16 px, Safari zoome au focus.
+ *
+ * L'erreur et la description sont citées par `aria-describedby` ; l'erreur garde une icône, pour ne
+ * pas reposer sur la seule couleur (WCAG 1.4.1).
+ */
+declare function FloatingField({ label, error, description, surface, className, id, ...props }: Omit<React.ComponentProps<"input">, "placeholder"> & {
+    /** Libellé visible, aussi nom accessible du champ. */
+    label: string;
+    /** Message d'erreur sous le champ ; le champ passe en `aria-invalid`. */
+    error?: ReactNode;
+    /** Aide sous le champ, quand il n'y a pas d'erreur. */
+    description?: ReactNode;
+    /** Fond sous le champ : le libellé posé sur le filet le reprend. */
+    surface?: "background" | "card";
+}): React.JSX.Element;
+export { FloatingField };

package/dist/floating-field.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AlertCircleIcon from "@hugeicons/core-free-icons/AlertCircleIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useId } from "react";
+import { cn } from "./cn.js";
+/**
+ * Champ à libellé flottant, pour les écrans de connexion : le libellé est dans le champ vide et
+ * monte sur le filet dès que le champ a le focus ou une valeur (saisie, autoremplissage).
+ *
+ * Tout en CSS : `placeholder=" "` rend `:placeholder-shown` vrai tant que le champ est vide, le
+ * libellé (`peer-…`) suit sans JavaScript, dès le rendu serveur. Le libellé posé sur le filet
+ * reprend le fond de la surface où le champ est posé (`surface`, fond de page par défaut). Texte à
+ * 16 px : sous 16 px, Safari zoome au focus.
+ *
+ * L'erreur et la description sont citées par `aria-describedby` ; l'erreur garde une icône, pour ne
+ * pas reposer sur la seule couleur (WCAG 1.4.1).
+ */
+function FloatingField({ label, error, description, surface = "background", className, id, ...props }) {
+    const generated = useId();
+    const inputId = id ?? generated;
+    const errorId = `${inputId}-error`;
+    const descriptionId = `${inputId}-description`;
+    const describedBy = [error ? errorId : null, !error && description ? descriptionId : null, props["aria-describedby"]]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { "data-slot": "floating-field", className: cn("grid gap-1.5", className), children: [_jsxs("div", { className: "relative", children: [_jsx("input", { ...props, id: inputId, placeholder: " ", "aria-invalid": error ? true : props["aria-invalid"], "aria-describedby": describedBy || undefined, className: "peer touch-field h-14 w-full min-w-0 rounded-md bg-transparent px-3.5 text-base text-foreground ring-1 ring-control-off transition-[box-shadow] duration-(--duration-fast) outline-none ring-inset focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive" }), _jsx("label", { htmlFor: inputId, className: cn("pointer-events-none absolute top-1/2 left-2.5 max-w-[calc(100%-1.25rem)] -translate-y-1/2 truncate px-1 text-base text-muted-foreground transition-[top,font-size,color] duration-(--duration-fast) ease-(--ease-out) peer-focus-visible:top-0 peer-focus-visible:text-xs peer-focus-visible:text-accent peer-aria-invalid:text-destructive peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-xs motion-reduce:transition-none", surface === "card" ? "bg-card" : "bg-background"), children: label })] }), error ? (_jsxs("p", { id: errorId, "data-slot": "floating-field-error", className: "flex gap-2 text-sm text-destructive", children: [_jsx(HugeiconsIcon, { icon: AlertCircleIcon, "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }), _jsx("span", { children: error })] })) : description ? (_jsx("p", { id: descriptionId, "data-slot": "floating-field-description", className: "text-sm text-muted-foreground", children: description })) : null] }));
+}
+export { FloatingField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",