@krosoft/react 0.0.217 → 0.0.219

package/README.md

@@ -6,6 +6,37 @@ Krosoft shared React package.
 
 Storybook : **https://design.krosoft.fr**
 
+## Libellés du package
+
+Les composants portent leurs propres libellés — « Annuler », « Aucun résultat », placeholders de recherche, messages d'erreur de formulaire. Ils vivent dans `src/locales/{fr,en}.json`, sous le namespace i18next `krosoft`, séparé de celui de l'application pour qu'aucune clé ne se marche dessus.
+
+Une application qui utilise i18next enregistre ces traductions une fois, après son `init` :
+
+```ts
+import i18n from "i18next";
+import { registerKrosoftLocales } from "@krosoft/react/i18n";
+
+registerKrosoftLocales(i18n);
+```
+
+Les libellés suivent alors la langue de l'application, changement à chaud compris.
+
+**Rien à faire pour les applications existantes.** Sans cet appel — ou sans i18next du tout — les composants retombent sur le français embarqué : le rendu est exactement celui d'avant.
+
+### Surcharger un libellé
+
+`registerKrosoftLocales` n'écrase pas ce qui existe déjà. Une application peut donc imposer sa propre formulation, avant ou après l'enregistrement :
+
+```ts
+import { KROSOFT_NAMESPACE } from "@krosoft/react/i18n";
+
+i18n.addResourceBundle("fr", KROSOFT_NAMESPACE, { states: { noData: "Rien à afficher" } }, true, true);
+```
+
+Passer `{ overwrite: true }` fait l'inverse : les valeurs du package reprennent la main.
+
+Les props de libellé restent prioritaires sur tout le reste : `<ChartCard emptyLabel="…" />` l'emporte sur la traduction, comme avant.
+
 ## Preset Tailwind
 
 Le preset partagé apporte le `darkMode`, le `container`, les couleurs shadcn (`--primary`, `--background`, `--border`, `--sidebar-*`…), les couleurs krosoft (`--k-success`, `--k-topbar-*`…), les radius, les keyframes accordéon et le plugin `tailwindcss-animate`. Un projet consommateur qui déclarait tout ça dans son propre `tailwind.config` peut supprimer ces lignes et ne garder que ce qui lui est propre.

package/dist/{AppActions-BCXERyyB.js → AppActions-BFmagl91.js}

@@ -5,7 +5,7 @@ import "@radix-ui/react-aspect-ratio";
 import { B as p } from "./tooltip-DVeqVwqV.js";
 import "./chart-DntJZGxB.js";
 import "@radix-ui/react-collapsible";
-import "./sheet-BQmtrGf2.js";
+import "./sheet-CDqLa-FP.js";
 import { MoreVerticalIcon as h } from "lucide-react";
 import "react-resizable-panels";
 import { c as i } from "./tailwind.helper-B6yFEsav.js";

package/dist/{AppSubTitle-H8ElNObI.js → AppSubTitle-BMQMoehZ.js}

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
-import { A as m } from "./AppActions-BCXERyyB.js";
+import { A as m } from "./AppActions-BFmagl91.js";
 function f({ titleKey: s, actions: t, className: o }) {
   const { t: r } = l();
   return /* @__PURE__ */ i("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [

package/dist/AppVerticalTabs-0DrrDO3S.js

@@ -0,0 +1,101 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { C as w, d as S, a as T } from "./chart-DntJZGxB.js";
+import { A as b } from "./AppActions-BFmagl91.js";
+import { A as C } from "./AppTitle-D15YXeMx.js";
+import { bi as A, bk as P, bl as k, bj as j, b5 as z } from "./toggle-group-DLLrEwv2.js";
+import { useRef as K, useEffect as V } from "react";
+import { useTranslation as g } from "react-i18next";
+import { useSearchParams as y } from "react-router-dom";
+import { c as R } from "./tailwind.helper-B6yFEsav.js";
+import { S as q, h as I, i as L, a as H, c as U } from "./select-BpjFWqAY.js";
+import { ConstructionIcon as v } from "lucide-react";
+import { u as D } from "./useKrosoftTranslation-DdcylBY2.js";
+function E({ titleKey: s, descriptionKey: t, actions: c = [], className: l }) {
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ a(C, { titleKey: s, descriptionKey: t, isSubTitle: !0 }),
+    /* @__PURE__ */ a(b, { actions: c, className: l })
+  ] });
+}
+function _({ titleKey: s, descriptionKey: t, actions: c = [], className: l, children: o, isSubTitle: p }) {
+  return /* @__PURE__ */ r(w, { children: [
+    /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a(E, { titleKey: s, descriptionKey: t, actions: c, className: l }) }),
+    /* @__PURE__ */ a(T, { className: "space-y-4", children: o })
+  ] });
+}
+function ee({ tabs: s, itemId: t, item: c, fit: l }) {
+  var d, u;
+  const { t: o } = g(), [p, f] = y(), i = p.get("tab"), m = ((d = s.find((e) => e.value === i)) == null ? void 0 : d.value) ?? ((u = s[0]) == null ? void 0 : u.value), x = (e) => {
+    const n = new URLSearchParams();
+    n.set("tab", e), f(n);
+  }, h = K(null);
+  return V(() => {
+    var n, N;
+    const e = (n = h.current) == null ? void 0 : n.querySelector('[data-state="active"]');
+    (N = e == null ? void 0 : e.scrollIntoView) == null || N.call(e, { behavior: "smooth", block: "nearest", inline: "nearest" });
+  }, [m]), /* @__PURE__ */ r(A, { value: m, onValueChange: x, children: [
+    /* @__PURE__ */ a(P, { ref: h, className: R("w-full justify-start", l && "sm:w-fit"), children: s.map((e) => /* @__PURE__ */ r(k, { value: e.value, className: "gap-2", disabled: e.disabled, children: [
+      e.icon ? /* @__PURE__ */ a("span", { className: "hidden sm:inline", children: /* @__PURE__ */ a(e.icon, { className: "size-4" }) }) : null,
+      /* @__PURE__ */ a("span", { className: "text-xs sm:text-sm", children: o(e.titleKey) ?? "" }),
+      e.count ? /* @__PURE__ */ r("span", { className: "text-gray-500 text-xs", children: [
+        "(",
+        e.count(c),
+        ")"
+      ] }) : null
+    ] }, e.value)) }),
+    s.map((e) => /* @__PURE__ */ a(j, { value: e.value, className: "mt-4", children: e.component ? e.component(t) : null }, e.value))
+  ] });
+}
+const ae = ({ tabs: s, item: t }) => {
+  var d, u;
+  const { t: c } = g(), { t: l } = D(), [o, p] = y(), f = o.get("tab"), i = ((d = s.find((e) => e.value === f)) == null ? void 0 : d.value) ?? ((u = s[0]) == null ? void 0 : u.value), m = (e) => {
+    const n = new URLSearchParams();
+    n.set("tab", e), p(n);
+  }, x = () => {
+    const e = s.find((n) => n.value === i);
+    return e ? e.component ? e.component() : h() : null;
+  }, h = () => /* @__PURE__ */ a("div", { className: "p-4 lg:p-6", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-center h-64 text-gray-500", children: /* @__PURE__ */ r("div", { className: "text-center", children: [
+    /* @__PURE__ */ a(v, { className: "h-12 w-12 mx-auto mb-4 text-amber-500" }),
+    /* @__PURE__ */ a("p", { className: "text-lg font-medium", children: l("states.underConstruction") }),
+    /* @__PURE__ */ a("p", { className: "text-sm text-gray-400", children: l("states.comingSoon") })
+  ] }) }) });
+  return /* @__PURE__ */ r("div", { className: "flex flex-col md:flex-row h-full min-w-0  ", children: [
+    /* @__PURE__ */ a("div", { className: "w-64 lg:w-80 flex-shrink-0 hidden md:block border-r border-gray-200 dark:border-gray-700 pr-4", children: /* @__PURE__ */ a(z, { className: "h-full", children: /* @__PURE__ */ a("div", { className: "space-y-1", children: s.map((e, n) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: `px-2 py-2 rounded-control text-sm transition-colors flex items-center gap-2 ${e.disabled ? "text-gray-400 cursor-not-allowed opacity-50" : i === e.value ? "crm-color-styled font-medium cursor-pointer" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 cursor-pointer"}`,
+        onClick: () => !e.disabled && m(e.value),
+        children: [
+          e.icon && /* @__PURE__ */ a(e.icon, { className: "size-4" }),
+          /* @__PURE__ */ a("span", { className: "flex-1", children: c(e.titleKey) }),
+          e.count && /* @__PURE__ */ r("span", { className: "text-xs text-gray-500", children: [
+            "(",
+            e.count(t),
+            ")"
+          ] }),
+          !e.component && /* @__PURE__ */ a(v, { className: "size-4 text-amber-500" })
+        ]
+      },
+      n
+    )) }) }) }),
+    /* @__PURE__ */ a("div", { className: "md:hidden w-full border-b pb-4 mb-4", children: /* @__PURE__ */ r(q, { value: i, onValueChange: m, children: [
+      /* @__PURE__ */ a(I, { className: "w-full", children: /* @__PURE__ */ a(L, { placeholder: l("select.section") }) }),
+      /* @__PURE__ */ a(H, { children: s.map((e, n) => /* @__PURE__ */ a(U, { value: e.value, disabled: e.disabled, children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+        e.icon && /* @__PURE__ */ a(e.icon, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { children: c(e.titleKey) }),
+        e.count && /* @__PURE__ */ r("span", { className: "text-xs text-gray-500", children: [
+          "(",
+          e.count(t),
+          ")"
+        ] }),
+        !e.component && /* @__PURE__ */ a(v, { className: "size-4 text-amber-500" })
+      ] }) }, n)) })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex-1 md:px-4 min-w-0 overflow-auto", children: x() })
+  ] });
+};
+export {
+  _ as A,
+  E as a,
+  ee as b,
+  ae as c
+};

package/dist/{ConfirmationDialog-BmxaMEYz.js → ConfirmationDialog-CFsh-Eui.js}

@@ -1,36 +1,37 @@
 import { jsx as e, jsxs as r, Fragment as M } from "react/jsx-runtime";
-import { P as B, d as R, g as W, j as F, k as X, h as j, i as $, f as q } from "./toggle-group-DLLrEwv2.js";
-import { A as J, a as Q } from "./alert-B9F1N9Qk.js";
+import { u as R } from "./useKrosoftTranslation-DdcylBY2.js";
+import { P as W, d as X, g as $, j, k as q, h as T, i as J, f as Q } from "./toggle-group-DLLrEwv2.js";
+import { A as U, a as V } from "./alert-B9F1N9Qk.js";
 import "@radix-ui/react-aspect-ratio";
 import { B as v } from "./tooltip-DVeqVwqV.js";
 import "./chart-DntJZGxB.js";
 import "@radix-ui/react-collapsible";
-import { D as U, b as V, e as Y, h as Z, c as _ } from "./sheet-BQmtrGf2.js";
-import { AlertCircleIcon as L, X as S, Save as T, Pen as I } from "lucide-react";
+import { D as Y, b as Z, e as _, h as L, c as ee } from "./sheet-CDqLa-FP.js";
+import { AlertCircleIcon as le, X as S, Save as I, Pen as K } from "lucide-react";
 import "react-resizable-panels";
 import "clsx";
 import "tailwind-merge";
 import "./select-BpjFWqAY.js";
 import "next-themes";
 import "sonner";
-import { useState as y, useEffect as ee } from "react";
+import { useState as A, useEffect as ie } from "react";
 import { useTranslation as O } from "react-i18next";
-import { G as le } from "./GenericForm-DJR7PD-i.js";
-import { E as ie } from "./ErrorAlert-SrIcU1mM.js";
-function re({ open: t, onOpenChange: c, config: l, isLoading: u, error: s, children: p }) {
-  const { t: i } = O(), { title: b, description: d, icon: f, maxWidth: g = "sm:max-w-xl", actions: n } = l;
-  return /* @__PURE__ */ e(U, { open: t, onOpenChange: c, children: /* @__PURE__ */ r(V, { className: `${g} max-h-[100dvh] sm:max-h-[90vh] border-0 shadow-2xl p-0 flex flex-col overflow-hidden`, children: [
-    u === !0 ? /* @__PURE__ */ e("div", { className: "absolute top-0 left-0 right-0 z-10", children: /* @__PURE__ */ e(B, { indeterminate: !0, className: "h-1 rounded-none" }) }) : null,
-    /* @__PURE__ */ r(Y, { className: "bg-gradient-to-r from-slate-900 to-purple-700 p-4 sm:p-6 sm:rounded-t-surface shrink-0", children: [
-      /* @__PURE__ */ r(Z, { className: "text-xl sm:text-2xl font-bold flex items-center gap-2 text-white", children: [
+import { G as re } from "./GenericForm-q9dvYl_h.js";
+import { E as se } from "./ErrorAlert-D_203tKa.js";
+function te({ open: t, onOpenChange: d, config: l, isLoading: u, error: s, children: p }) {
+  const { t: i } = O(), { title: b, description: c, icon: f, maxWidth: g = "sm:max-w-xl", actions: n } = l;
+  return /* @__PURE__ */ e(Y, { open: t, onOpenChange: d, children: /* @__PURE__ */ r(Z, { className: `${g} max-h-[100dvh] sm:max-h-[90vh] border-0 shadow-2xl p-0 flex flex-col overflow-hidden`, children: [
+    u === !0 ? /* @__PURE__ */ e("div", { className: "absolute top-0 left-0 right-0 z-10", children: /* @__PURE__ */ e(W, { indeterminate: !0, className: "h-1 rounded-none" }) }) : null,
+    /* @__PURE__ */ r(_, { className: "bg-gradient-to-r from-slate-900 to-purple-700 p-4 sm:p-6 sm:rounded-t-surface shrink-0", children: [
+      /* @__PURE__ */ r(L, { className: "text-xl sm:text-2xl font-bold flex items-center gap-2 text-white", children: [
         f !== void 0 ? /* @__PURE__ */ e("div", { className: "p-2 bg-white/20 rounded-control", children: /* @__PURE__ */ e(f, { className: "size-4 text-white" }) }) : null,
         i(b)
       ] }),
-      d !== void 0 && d !== "" ? /* @__PURE__ */ e(_, { className: "text-indigo-100 text-base", children: i(d) }) : null
+      c !== void 0 && c !== "" ? /* @__PURE__ */ e(ee, { className: "text-indigo-100 text-base", children: i(c) }) : null
     ] }),
-    s != null ? /* @__PURE__ */ e("div", { className: "px-6  ", children: /* @__PURE__ */ r(J, { variant: "destructive", className: "max-w-full", children: [
-      /* @__PURE__ */ e(L, { className: "size-4" }),
-      /* @__PURE__ */ e(Q, { className: "break-words overflow-wrap-anywhere max-w-full", children: s.message })
+    s != null ? /* @__PURE__ */ e("div", { className: "px-6  ", children: /* @__PURE__ */ r(U, { variant: "destructive", className: "max-w-full", children: [
+      /* @__PURE__ */ e(le, { className: "size-4" }),
+      /* @__PURE__ */ e(V, { className: "break-words overflow-wrap-anywhere max-w-full", children: s.message })
     ] }) }) : null,
     /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto px-4 sm:px-6 py-4", children: p }),
     n !== void 0 && n.length > 0 ? /* @__PURE__ */ e("div", { className: "sm:rounded-b-surface border-t border-gray-200 dark:border-gray-700 shrink-0 p-4 sm:p-6 light:bg-gradient-to-r light:from-gray-50 light:to-gray-100 dark:bg-gray-950", children: /* @__PURE__ */ e("div", { className: "flex justify-end gap-3", children: n.map((a, k) => /* @__PURE__ */ r(v, { variant: a.variant ?? "default", onClick: a.onClick, disabled: a.disabled === !0 || u === !0, children: [
@@ -39,62 +40,62 @@ function re({ open: t, onOpenChange: c, config: l, isLoading: u, error: s, child
     ] }, k)) }) }) : null
   ] }) });
 }
-function ke({
+function Ae({
   open: t,
-  onOpenChange: c,
+  onOpenChange: d,
   data: l,
   title: u,
   headerBadge: s,
   schema: p,
   onSave: i,
   customFooter: b,
-  defaultEditing: d = !1,
+  defaultEditing: c = !1,
   footerActions: f = !0,
   saveLabel: g = "Sauvegarder",
-  cancelLabel: n = "Annuler",
+  cancelLabel: n,
   hideSaveIcon: a = !1,
   maxWidth: k = "sm:max-w-4xl",
   isLoading: h = !1
 }) {
-  const [x, N] = y(d), [o, A] = y(!1), [C, P] = y(null);
-  if (ee(() => {
-    t && N(d);
-  }, [t, d]), l == null) return null;
-  const z = () => {
+  const { t: w } = R(), [x, N] = A(c), [o, z] = A(!1), [C, P] = A(null);
+  if (ie(() => {
+    t && N(c);
+  }, [t, c]), l == null) return null;
+  const E = () => {
     x ? i !== void 0 && C && C() : N(!0);
-  }, w = () => {
+  }, y = () => {
     N(!1);
-  }, E = () => {
+  }, F = () => {
     i !== void 0 && C && C();
   }, G = async (m) => {
     if (i) {
-      A(!0);
+      z(!0);
       try {
         await i(m), N(!1);
-      } catch (K) {
-        console.error(K);
+      } catch (B) {
+        console.error(B);
       } finally {
-        A(!1);
+        z(!1);
       }
     }
   }, D = [];
   i !== void 0 && (x ? (n !== "" && D.push({
-    label: n,
-    onClick: w,
+    label: n ?? w("actions.cancel"),
+    onClick: y,
     variant: "outline",
     disabled: o || h,
     icon: S
   }), D.push({
     label: o ? "Enregistrement..." : g,
-    onClick: E,
+    onClick: F,
     variant: "default",
     disabled: o || h,
-    icon: a ? void 0 : T
+    icon: a ? void 0 : I
   })) : D.push({
-    label: "Modifier",
-    onClick: z,
+    label: w("actions.edit"),
+    onClick: E,
     variant: "outline",
-    icon: I
+    icon: K
   }));
   const H = {
     title: u(l),
@@ -102,18 +103,18 @@ function ke({
     actions: f ? D : []
   };
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       open: t,
       onOpenChange: (m) => {
-        c(m), m || w();
+        d(m), m || y();
       },
       config: H,
       isLoading: o || h,
       children: /* @__PURE__ */ r("div", { children: [
         s !== void 0 ? /* @__PURE__ */ e("div", { className: "mb-4", children: s(l) }) : null,
         /* @__PURE__ */ e(
-          le,
+          re,
           {
             schema: p,
             initialData: l,
@@ -130,41 +131,41 @@ function ke({
         ),
         b !== void 0 ? b(l) : null,
         i !== void 0 && !f ? /* @__PURE__ */ e("div", { className: "flex justify-end gap-2 border-t pt-4 mt-6", children: x ? /* @__PURE__ */ r(M, { children: [
-          n !== "" ? /* @__PURE__ */ r(v, { onClick: w, variant: "outline", size: "sm", disabled: o || h, children: [
+          n !== "" ? /* @__PURE__ */ r(v, { onClick: y, variant: "outline", size: "sm", disabled: o || h, children: [
             /* @__PURE__ */ e(S, { className: "size-4 mr-2" }),
-            n
+            n ?? w("actions.cancel")
           ] }) : null,
-          /* @__PURE__ */ r(v, { onClick: E, size: "sm", disabled: o || h, className: "text-white", children: [
-            a ? null : /* @__PURE__ */ e(T, { className: "size-4 mr-2" }),
+          /* @__PURE__ */ r(v, { onClick: F, size: "sm", disabled: o || h, className: "text-white", children: [
+            a ? null : /* @__PURE__ */ e(I, { className: "size-4 mr-2" }),
             o ? "Enregistrement..." : g
           ] })
-        ] }) : /* @__PURE__ */ r(v, { onClick: z, variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ e(I, { className: "size-4 mr-2" }),
+        ] }) : /* @__PURE__ */ r(v, { onClick: E, variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ e(K, { className: "size-4 mr-2" }),
           "Modifier"
         ] }) }) : null
       ] })
     }
   );
 }
-function we({ isLoading: t, error: c, config: l, destructive: u = !1 }) {
+function ze({ isLoading: t, error: d, config: l, destructive: u = !1 }) {
   const { t: s } = O();
   if (!l) return null;
   const p = (i) => {
     !i && !t && l.onClose();
   };
-  return /* @__PURE__ */ e(R, { open: l.isOpen, onOpenChange: p, children: /* @__PURE__ */ r(W, { children: [
-    /* @__PURE__ */ r(F, { children: [
-      /* @__PURE__ */ r(X, { className: l.titleClassName, children: [
+  return /* @__PURE__ */ e(X, { open: l.isOpen, onOpenChange: p, children: /* @__PURE__ */ r($, { children: [
+    /* @__PURE__ */ r(j, { children: [
+      /* @__PURE__ */ r(q, { className: l.titleClassName, children: [
         l.icon && /* @__PURE__ */ e(l.icon, { className: "size-4" }),
         s(l.title)
       ] }),
-      l.headerClassName && /* @__PURE__ */ e(F, { className: l.headerClassName }),
-      /* @__PURE__ */ e(j, { children: s(l.description) }),
-      l.itemName && /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e("span", { className: "font-semibold block my-2", children: l.itemName }) })
+      l.headerClassName && /* @__PURE__ */ e(j, { className: l.headerClassName }),
+      /* @__PURE__ */ e(T, { children: s(l.description) }),
+      l.itemName && /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("span", { className: "font-semibold block my-2", children: l.itemName }) })
     ] }),
-    /* @__PURE__ */ e(ie, { error: c instanceof Error ? null : c }),
-    /* @__PURE__ */ r($, { children: [
-      /* @__PURE__ */ e(q, { disabled: t, children: s("common.buttons.cancel") }),
+    /* @__PURE__ */ e(se, { error: d instanceof Error ? null : d }),
+    /* @__PURE__ */ r(J, { children: [
+      /* @__PURE__ */ e(Q, { disabled: t, children: s("common.buttons.cancel") }),
       /* @__PURE__ */ e(
         v,
         {
@@ -180,7 +181,7 @@ function we({ isLoading: t, error: c, config: l, destructive: u = !1 }) {
   ] }) });
 }
 export {
-  re as A,
-  we as C,
-  ke as F
+  te as A,
+  ze as C,
+  Ae as F
 };