@krosoft/react 0.0.296 → 0.0.298

package/README.md

@@ -92,11 +92,14 @@ Rien n'oblige à suivre un preset : n'importe quelle valeur convient (`--k-radiu
 | `--k-success`, `--k-warning`, `--k-info` (+ `-foreground`) | `bg-success`, `text-warning-foreground`, `border-info`…          |
 | `--k-topbar-*`                                             | `bg-topbar`, `text-topbar-foreground`, `bg-topbar-accent`…       |
 | `--k-brand-from`, `--k-brand-to`, `--k-brand-foreground`   | `from-brand-from`, `to-brand-to`, `text-brand-foreground`        |
+| `--k-dialog-header-*` (mêmes suffixes)                     | `from-dialog-header-from`, `text-dialog-header-foreground`…      |
 | `--k-sidebar-muted`                                        | `text-sidebar-muted`                                             |
 | `--k-radius-control`, `--k-radius-surface` (+ `-dense`)    | `rounded-control`, `rounded-surface`                             |
 | `--k-font-heading`, `--k-font-body`                        | appliquées directement par `globals.css` sur `body` et `h1`–`h6` |
 
-`--k-brand-*` est le dégradé de marque : il habille l'en-tête d'`AppDialog` et le bouton `variant="brand"`. Deux bornes plutôt qu'une couleur pleine, parce que les surfaces qui le portent sont des dégradés — un thème qui n'en veut pas met la même valeur des deux côtés. C'est la surface la plus identitaire du package : chaque thème embarqué le redéclare avec ses propres teintes (violet par défaut, jaune sur Temporal, cyan sur Ocean). `--k-brand-foreground` porte le texte et les icônes posés dessus, et n'est donc pas toujours blanc : un dégradé clair demande un texte sombre. Story `Design Tokens/Marque` pour comparer les thèmes côte à côte.
+`--k-brand-*` est le dégradé de marque, à la main de l'application : bouton `variant="brand"`, bandeaux, écrans de connexion. Deux bornes plutôt qu'une couleur pleine, parce que les surfaces qui le portent sont des dégradés — un thème qui n'en veut pas met la même valeur des deux côtés. Chaque thème embarqué le redéclare avec ses propres teintes (violet par défaut, jaune sur Temporal, cyan sur Ocean). `-foreground` porte le texte et les icônes posés dessus, et n'est donc pas toujours blanc : un dégradé clair demande un texte sombre.
+
+`--k-dialog-header-*` habille l'en-tête d'`AppDialog` et suit les mêmes trois suffixes. Tokens **distincts** de la marque à dessein : l'en-tête est un choix de composant, la marque un choix d'application, et retoucher l'un ne doit pas déplacer l'autre. Ils ne sont pas indépendants pour rien : un projet qui ne déclare que `--k-brand-*` obtient quand même une dialog cohérente, le preset retombant dessus. Story `Design Tokens/Marque` pour comparer les thèmes côte à côte.
 
 Ces couleurs sont désormais mappées par le preset partagé : un projet consommateur qui les déclarait dans son propre `tailwind.config` peut supprimer ces lignes.
 
@@ -124,3 +127,19 @@ applyTokenPreset(radiusPresets, "round"); // pose les variables sur <html>
 | `tokensToStyle`    | Les mêmes variables en `style` React, pour un sous-arbre   |
 
 C'est aussi ce qui rend la suite extensible : une nouvelle famille de tokens (densité, élévation…) ne demande ni attribut dédié ni preset CSS, seulement un objet à côté de `radiusPresets` et ses variables dans `:root`.
+
+## Soumettre un formulaire depuis une barre d'actions
+
+`GenericForm` accepte un `id` posé sur son `<form>`. Un bouton rendu ailleurs dans la page — pied d'`AppDialog`, en-tête d'`AppPageHeader` — le soumet en le visant par `form`, plutôt qu'en remontant une fonction de submit :
+
+```tsx
+const formId = useId();
+
+<AppPageHeader
+  titleKey="Modifier l'achat"
+  actions={[{ labelKey: "Sauvegarder", type: "submit", form: formId }]}
+/>
+<GenericForm id={formId} schema={schema} onSubmit={onSubmit} renderActions={false} />;
+```
+
+Une action `type: "submit"` porte donc `form` au lieu d'`onClick` — les deux s'excluent. La validation reste celle du formulaire, et rien ne transite par une ref. Sur mobile, où les actions passent en menu déroulant et ne sont plus des `<button>`, `AppActions` retombe sur `requestSubmit()` du formulaire ciblé : c'est pourquoi `form` y est requis.

package/dist/{AppActions-BMh044Sc.js → AppActions-DCFvzqFN.js}

@@ -1,14 +1,18 @@
 import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-d2p0RJo9.js";
-import { Bt as n, Ft as r, Gt as i, Nt as a, jt as o } from "./ui-DVtB9U8H.js";
-import { s } from "./tooltip-Bu3wNhtW.js";
+import { t } from "./i18n-TbpdvUJO.js";
+import { Bt as n, Ft as r, Gt as i, Nt as a, jt as o } from "./ui-Ce0ULzME.js";
+import { c as s } from "./tooltip-_geGvbS7.js";
 import { t as c } from "./useMobile-pTQ8lWvt.js";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { MoreVerticalIcon as d } from "lucide-react";
 //#region src/components/core/layouts/AppActions.tsx
-function f({ actions: f, className: p }) {
-	let { t: m } = t(), h = c();
-	return !f || f.length === 0 ? null : h ? /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(i, {
+var f = (e) => {
+	let t = document.getElementById(e);
+	t instanceof HTMLFormElement && t.requestSubmit();
+};
+function p({ actions: p, className: m }) {
+	let { t: h } = t(), g = c();
+	return !p || p.length === 0 ? null : g ? /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(i, {
 		asChild: !0,
 		children: /* @__PURE__ */ l(s, {
 			variant: "outline",
@@ -18,43 +22,63 @@ function f({ actions: f, className: p }) {
 	}), /* @__PURE__ */ l(a, {
 		align: "end",
 		className: "min-w-48",
-		children: f.map((t, i) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u("div", { children: [i > 0 && /* @__PURE__ */ l(n, {}), t.children.map((t, n) => t ? /* @__PURE__ */ u(r, {
-			onClick: () => void t.onClick?.(),
+		children: p.map((t, i) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u("div", { children: [i > 0 && /* @__PURE__ */ l(n, {}), t.children.map((t, n) => t ? /* @__PURE__ */ u(r, {
+			onClick: () => {
+				if (t.type === "submit") {
+					f(t.form);
+					return;
+				}
+				t.onClick?.();
+			},
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
-			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && m(t.labelKey)]
+			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 		}, n) : null)] }, i) : /* @__PURE__ */ u(r, {
-			onClick: () => void t.onClick?.(),
+			onClick: () => {
+				if (t.type === "submit") {
+					f(t.form);
+					return;
+				}
+				t.onClick?.();
+			},
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
-			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && m(t.labelKey)]
+			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 		}, i) : null)
 	})] }) : ((t) => /* @__PURE__ */ l("div", {
-		className: e("flex gap-2", p),
+		className: e("flex gap-2", m),
 		children: t.map((t, n) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(i, {
 			asChild: !0,
 			children: /* @__PURE__ */ u(s, {
 				variant: t.variant,
 				disabled: t.disabled,
 				className: e("gap-2", t.className),
-				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && m(t.labelKey)]
+				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 			})
 		}), /* @__PURE__ */ l(a, {
 			align: "end",
 			children: t.children.map((t, n) => t ? /* @__PURE__ */ u(r, {
-				onClick: () => void t.onClick?.(),
+				onClick: () => {
+					if (t.type === "submit") {
+						f(t.form);
+						return;
+					}
+					t.onClick?.();
+				},
 				disabled: t.disabled,
 				className: e("gap-2", t.className),
-				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && m(t.labelKey)]
+				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 			}, n) : null)
 		})] }, n) : /* @__PURE__ */ u(s, {
 			variant: t.variant,
-			onClick: () => void t.onClick?.(),
+			type: t.type,
+			form: t.form,
+			onClick: t.onClick ? () => void t.onClick?.() : void 0,
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
-			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && m(t.labelKey)]
+			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 		}, n) : null)
-	}))(f);
+	}))(p);
 }
 //#endregion
-export { f as t };
+export { p as t };

package/dist/{AppSubTitle-BfZTloah.js → AppSubTitle-Cmu-4o-a.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./i18n-d2p0RJo9.js";
-import { t } from "./AppActions-BMh044Sc.js";
+import { t as e } from "./i18n-TbpdvUJO.js";
+import { t } from "./AppActions-DCFvzqFN.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/core/layouts/AppSubTitle.tsx
 function i({ titleKey: i, actions: a, className: o }) {

package/dist/{AppTitle-BZ5jQWbs.js → AppTitle-CBY03gZy.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-d2p0RJo9.js";
+import { t } from "./i18n-TbpdvUJO.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/core/layouts/AppTitle.tsx
 function i({ titleKey: i, descriptionKey: a, isSubTitle: o }) {

package/dist/{ErrorAlert-0L-Dwqu8.js → ErrorAlert-CpxyT2oM.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./i18n-d2p0RJo9.js";
+import { t as e } from "./i18n-TbpdvUJO.js";
 import { n as t, t as n } from "./alert-REQGK9bR.js";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/{GenericForm-BV8n9y1n.js → GenericForm-fiF_fEUb.js}

@@ -1,14 +1,14 @@
 import { t as e } from "./tailwind.helper-CJaRYBmL.js";
 import { c as t, d as n, s as r } from "./chart-Dq3AIrue.js";
-import { t as i } from "./i18n-d2p0RJo9.js";
-import { Ct as a, Dt as o, Et as s, Ot as c, St as l, Tt as u, bn as d, p as f } from "./ui-DVtB9U8H.js";
-import { s as p } from "./tooltip-Bu3wNhtW.js";
-import { g as m } from "./sheet-DRzg-JWH.js";
-import { i as h, l as g, n as ee, t as _, u as v } from "./select-CfhuieLs.js";
+import { t as i } from "./i18n-TbpdvUJO.js";
+import { Ct as a, Dt as o, Et as s, Ot as c, St as l, Tt as u, bn as d, p as f } from "./ui-Ce0ULzME.js";
+import { c as p } from "./tooltip-_geGvbS7.js";
+import { g as m } from "./sheet-Dyu9stsE.js";
+import { i as h, l as g, n as ee, t as _, u as v } from "./select-KWMg2_7Z.js";
 import { n as y } from "./useToast-UeDRLovh.js";
-import { t as b } from "./ImageInput-BdOxyamZ.js";
-import { t as x } from "./AppSubTitle-BfZTloah.js";
-import { t as S } from "./MultiSelect-Dmt1iWgB.js";
+import { t as b } from "./ImageInput-BGe_bc79.js";
+import { t as x } from "./AppSubTitle-Cmu-4o-a.js";
+import { t as S } from "./MultiSelect-xNfIdYS9.js";
 import { useEffect as C, useRef as w, useState as T } from "react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 import { useForm as O } from "react-hook-form";

package/dist/{ImageInput-BdOxyamZ.js → ImageInput-BGe_bc79.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-d2p0RJo9.js";
-import "./ui-DVtB9U8H.js";
-import { s as n } from "./tooltip-Bu3wNhtW.js";
+import { t } from "./i18n-TbpdvUJO.js";
+import "./ui-Ce0ULzME.js";
+import { c as n } from "./tooltip-_geGvbS7.js";
 import { t as r } from "./useNotifications-CyhTruIG.js";
 import { forwardRef as i, useRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/MultiSelect-xNfIdYS9.js

@@ -0,0 +1,148 @@
+import { t as e } from "./tailwind.helper-CJaRYBmL.js";
+import { t } from "./i18n-TbpdvUJO.js";
+import { bn as n } from "./ui-Ce0ULzME.js";
+import { a as r, o as i, s as a } from "./tooltip-_geGvbS7.js";
+import { h as o, m as s, p as c } from "./sheet-Dyu9stsE.js";
+import { useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { ChevronDownIcon as p, SearchIcon as m, XIcon as h } from "lucide-react";
+import { Command as g } from "cmdk";
+//#region src/components/core/inputs/MultiSelect.tsx
+var _ = ({ options: _, selected: v, onToggle: y, onClear: b, onSelectAll: x, variant: S = "input", placeholder: C, labelKey: w, searchable: T = !1, searchPlaceholder: E, disabled: D = !1, maxCount: O, className: k, ...A }) => {
+	let { t: j } = t(), [M, N] = u(""), [P, F] = u(!1), I = S === "pill", L = S === "input" ? void 0 : i, R = l(() => M === "" ? _ : _.filter((e) => e.label.toLowerCase().includes(M.toLowerCase())), [_, M]), z = l(() => R.filter((e) => e.disabled !== !0).map((e) => e.value), [R]), B = l(() => v.filter((e) => _.find((t) => t.value === e)?.disabled === !0), [_, v]), V = l(() => z.length !== 0 && z.every((e) => v.includes(e)), [z, v]), H = l(() => v.map((e) => _.find((t) => t.value === e)?.label ?? e), [_, v]), U = O !== void 0 && O > 0 ? H.slice(0, O) : H, W = H.length - U.length, G = (e) => {
+		F(e), e || N("");
+	}, K = () => {
+		B.length > 0 ? x === void 0 ? v.filter((e) => !B.includes(e)).forEach((e) => {
+			y(e);
+		}) : x(B) : b === void 0 ? x === void 0 ? v.forEach((e) => {
+			y(e);
+		}) : x([]) : b();
+	}, q = () => {
+		if (V) x === void 0 ? b !== void 0 && v.every((e) => z.includes(e)) ? b() : z.forEach((e) => {
+			y(e);
+		}) : x(v.filter((e) => !z.includes(e)));
+		else if (x !== void 0) {
+			let e = [...v];
+			z.forEach((t) => {
+				e.includes(t) || e.push(t);
+			}), x(e);
+		} else z.forEach((e) => {
+			v.includes(e) || y(e);
+		});
+	}, J = I ? /* @__PURE__ */ f("button", {
+		...A,
+		type: "button",
+		disabled: D,
+		className: e(r, "inline-flex items-center justify-between gap-1.5 whitespace-nowrap transition-colors", v.length > 0 ? "border-primary bg-primary/10 text-primary font-medium" : "hover:bg-muted", L, k),
+		children: [/* @__PURE__ */ d("span", {
+			className: "truncate",
+			children: w === void 0 ? C ?? j("select.placeholder") : j(w)
+		}), /* @__PURE__ */ f("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: [v.length > 0 && /* @__PURE__ */ d("span", {
+				className: "flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground",
+				children: v.length
+			}), /* @__PURE__ */ d(p, { className: e("size-3.5 opacity-60 transition-transform", P && "rotate-180") })]
+		})]
+	}) : /* @__PURE__ */ f("button", {
+		...A,
+		type: "button",
+		disabled: D,
+		className: e(a, "w-full", L, P && "ring-2 ring-ring ring-offset-2", v.length === 0 && "text-muted-foreground", k),
+		children: [/* @__PURE__ */ d("span", {
+			className: "truncate",
+			children: v.length === 0 ? C ?? j("select.placeholder") : U.join(", ")
+		}), /* @__PURE__ */ f("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				W > 0 && /* @__PURE__ */ f("span", {
+					className: "rounded-control bg-muted px-1.5 py-0.5 text-xs font-medium text-foreground",
+					children: ["+", W]
+				}),
+				v.length > 0 && !D && /* @__PURE__ */ d("span", {
+					role: "button",
+					tabIndex: -1,
+					onClick: (e) => {
+						e.stopPropagation();
+					},
+					onPointerDown: (e) => {
+						e.preventDefault(), e.stopPropagation(), K();
+					},
+					className: "text-muted-foreground hover:text-foreground",
+					children: /* @__PURE__ */ d(h, { className: "size-4" })
+				}),
+				/* @__PURE__ */ d(p, { className: e("size-4 opacity-50 shrink-0 transition-transform", P && "rotate-180") })
+			]
+		})]
+	});
+	return /* @__PURE__ */ f(c, {
+		open: P,
+		onOpenChange: G,
+		children: [/* @__PURE__ */ d(o, {
+			asChild: !0,
+			children: J
+		}), /* @__PURE__ */ f(s, {
+			className: e("p-0", I ? "w-72 max-w-[var(--radix-popover-content-available-width)]" : "w-[var(--radix-popover-trigger-width)]"),
+			align: "start",
+			children: [/* @__PURE__ */ f(g, {
+				shouldFilter: !1,
+				className: "flex flex-col",
+				children: [T ? /* @__PURE__ */ d("div", {
+					className: "border-b border-border p-2",
+					children: /* @__PURE__ */ f("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ d(m, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ d(g.Input, {
+							value: M,
+							onValueChange: N,
+							placeholder: E ?? j("search.placeholder"),
+							className: "w-full rounded-control bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
+							autoFocus: !0
+						})]
+					})
+				}) : /* @__PURE__ */ d(g.Input, {
+					autoFocus: !0,
+					tabIndex: -1,
+					className: "sr-only"
+				}), /* @__PURE__ */ f(g.List, {
+					className: "flex flex-col gap-0.5 max-h-56 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent",
+					children: [R.length === 0 && /* @__PURE__ */ d("p", {
+						className: "px-2 py-3 text-center text-xs text-muted-foreground",
+						children: j("states.noResult")
+					}), R.map((e) => /* @__PURE__ */ f(g.Item, {
+						value: e.value,
+						disabled: e.disabled,
+						onSelect: () => {
+							y(e.value);
+						},
+						className: "flex min-w-0 items-center gap-2.5 rounded-md px-2 py-2 text-sm cursor-pointer transition-colors data-[selected=true]:bg-muted data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+						children: [
+							/* @__PURE__ */ d("span", {
+								className: "pointer-events-none shrink-0",
+								children: /* @__PURE__ */ d(n, { checked: v.includes(e.value) })
+							}),
+							e.color && /* @__PURE__ */ d("span", {
+								className: "size-2.5 shrink-0 rounded-full",
+								style: { backgroundColor: e.color }
+							}),
+							/* @__PURE__ */ d("span", {
+								className: "min-w-0 flex-1 truncate",
+								title: e.label,
+								children: e.label
+							})
+						]
+					}, e.value))]
+				})]
+			}), z.length > 0 && /* @__PURE__ */ d("div", {
+				className: "border-t border-border p-1.5",
+				children: /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: q,
+					className: "w-full rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-center",
+					children: j(V ? "filters.deselectAll" : "filters.selectAll")
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { _ as t };