@hgdc/ui 0.40.0 → 0.41.0

package/dist/choice-cards.d.ts

@@ -0,0 +1,28 @@
+type ChoiceCardsProps<T extends string> = {
+    value: T | null;
+    onValueChange: (value: T) => void;
+    options: Array<{
+        value: T;
+        title: string;
+        /** Une ligne sous le titre : ce que recouvre le choix. */
+        description?: string;
+        /** Logo ou icône, 24 px environ. */
+        icon?: React.ReactNode;
+    }>;
+    /** Nom du groupe pour les technologies d'assistance. */
+    label: string;
+    className?: string;
+};
+/**
+ * Un choix parmi quelques options riches, présentées en tuiles : l'outil à brancher, un
+ * modèle de départ. Deux colonnes sur téléphone, trois au-delà ; chaque tuile garde une cible
+ * de 44 px au moins. Sémantique de groupe radio : les flèches passent d'une tuile à l'autre,
+ * Tab sort du groupe.
+ *
+ * ```tsx
+ * <ChoiceCards label="Outil" value={tool} onValueChange={setTool}
+ *   options={[{ value: "grafana", title: "Grafana", description: "Contact point Webhook" }]} />
+ * ```
+ */
+export declare function ChoiceCards<T extends string>({ value, onValueChange, options, label, className, }: ChoiceCardsProps<T>): React.JSX.Element;
+export {};

package/dist/choice-cards.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "./cn.js";
+/**
+ * Un choix parmi quelques options riches, présentées en tuiles : l'outil à brancher, un
+ * modèle de départ. Deux colonnes sur téléphone, trois au-delà ; chaque tuile garde une cible
+ * de 44 px au moins. Sémantique de groupe radio : les flèches passent d'une tuile à l'autre,
+ * Tab sort du groupe.
+ *
+ * ```tsx
+ * <ChoiceCards label="Outil" value={tool} onValueChange={setTool}
+ *   options={[{ value: "grafana", title: "Grafana", description: "Contact point Webhook" }]} />
+ * ```
+ */
+export function ChoiceCards({ value, onValueChange, options, label, className, }) {
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "choice-cards", "aria-label": label, value: value, onValueChange: (next) => onValueChange(next), className: cn("grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3", className), children: options.map((option) => (_jsxs(RadioPrimitive.Root, { value: option.value, "aria-label": option.description ? `${option.title}, ${option.description}` : option.title, className: cn("flex min-h-11 flex-col items-start gap-2 rounded-2xl border border-border bg-card p-3 text-left sm:p-4", "transition-[border-color,box-shadow,background-color] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary/5 data-checked:ring-1 data-checked:ring-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50"), children: [option.icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-8 place-items-center text-foreground", children: option.icon })) : null, _jsx("span", { className: "text-sm font-medium text-pretty", children: option.title }), option.description ? (_jsx("span", { className: "text-xs text-pretty text-muted-foreground", children: option.description })) : null] }, option.value))) }));
+}

package/dist/steps.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Marche à suivre numérotée, courte (3 à 5 étapes) : brancher un outil, configurer un DNS.
+ * Une étape = une phrase d'action ; le détail facultatif passe dessous, en plus petit.
+ *
+ * ```tsx
+ * <Steps items={[
+ *   { title: "Dans Grafana, ouvre Alerting puis Contact points." },
+ *   { title: "Ajoute un contact point Webhook et colle l'adresse.", detail: <Snippet value={url} /> },
+ * ]} />
+ * ```
+ */
+export declare function Steps({ items, className, }: {
+    items: Array<{
+        title: React.ReactNode;
+        detail?: React.ReactNode;
+    }>;
+    className?: string;
+}): React.JSX.Element;

package/dist/steps.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/**
+ * Marche à suivre numérotée, courte (3 à 5 étapes) : brancher un outil, configurer un DNS.
+ * Une étape = une phrase d'action ; le détail facultatif passe dessous, en plus petit.
+ *
+ * ```tsx
+ * <Steps items={[
+ *   { title: "Dans Grafana, ouvre Alerting puis Contact points." },
+ *   { title: "Ajoute un contact point Webhook et colle l'adresse.", detail: <Snippet value={url} /> },
+ * ]} />
+ * ```
+ */
+export function Steps({ items, className, }) {
+    return (_jsx("ol", { "data-slot": "steps", className: cn("space-y-4", className), children: items.map((item, index) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 shrink-0 place-items-center rounded-full bg-muted text-xs font-semibold tabular-nums", children: index + 1 }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2 pt-0.5", children: [_jsx("p", { className: "text-sm text-pretty", children: item.title }), item.detail ? _jsx("div", { className: "text-sm text-muted-foreground", children: item.detail }) : null] })] }, index))) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.40.0",
+  "version": "0.41.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",