@krosoft/react 0.0.182 → 0.0.183

package/dist/useScrollFade-BA4KqJYp.js

@@ -0,0 +1,23 @@
+import { useState as f, useLayoutEffect as u } from "react";
+const l = "1.5rem";
+function p(o) {
+  const [n, d] = f({ start: !1, end: !1 });
+  return u(() => {
+    const e = o.current;
+    if (!e) return;
+    const r = () => {
+      const i = e.scrollWidth - e.clientWidth, a = e.scrollLeft > 1, c = e.scrollLeft < i - 1;
+      d((s) => s.start === a && s.end === c ? s : { start: a, end: c });
+    };
+    r(), e.addEventListener("scroll", r, { passive: !0 });
+    const t = typeof ResizeObserver > "u" ? null : new ResizeObserver(r);
+    return t == null || t.observe(e), () => {
+      e.removeEventListener("scroll", r), t == null || t.disconnect();
+    };
+  }), !n.start && !n.end ? {} : {
+    maskImage: `linear-gradient(to right, transparent 0, #000 ${n.start ? l : "0px"}, #000 calc(100% - ${n.end ? l : "0px"}), transparent 100%)`
+  };
+}
+export {
+  p as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krosoft/react",
-  "version": "0.0.182",
+  "version": "0.0.183",
   "description": "Krosoft shared React package",
   "type": "module",
   "scripts": {

package/dist/AppVerticalTabs-D8fURUUN.js

@@ -1,94 +0,0 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { J as g, N as y, K as T, bN as b, bP as w, bQ as S, bO as C, bA as A } from "./toggle-group-D6c-gM1D.js";
-import { A as P } from "./AppActions-DEkRxBia.js";
-import { A as k } from "./AppTitle-D15YXeMx.js";
-import { useTranslation as v } from "react-i18next";
-import { useSearchParams as N } from "react-router-dom";
-import { c as j } from "./tailwind.helper-B6yFEsav.js";
-import { S as z, h as K, i as V, a as L, c as q } from "./select-BpjFWqAY.js";
-import { ConstructionIcon as f } from "lucide-react";
-function H({ titleKey: s, descriptionKey: l, actions: c = [], className: t }) {
-  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ a(k, { titleKey: s, descriptionKey: l, isSubTitle: !0 }),
-    /* @__PURE__ */ a(P, { actions: c, className: t })
-  ] });
-}
-function E({ titleKey: s, descriptionKey: l, actions: c = [], className: t, children: i, isSubTitle: u }) {
-  return /* @__PURE__ */ n(g, { children: [
-    /* @__PURE__ */ a(y, { children: /* @__PURE__ */ a(H, { titleKey: s, descriptionKey: l, actions: c, className: t }) }),
-    /* @__PURE__ */ a(T, { className: "space-y-4", children: i })
-  ] });
-}
-function F({ tabs: s, itemId: l, item: c, fit: t }) {
-  var m, d;
-  const { t: i } = v(), [u, o] = N(), p = u.get("tab"), h = ((m = s.find((e) => e.value === p)) == null ? void 0 : m.value) ?? ((d = s[0]) == null ? void 0 : d.value);
-  return /* @__PURE__ */ n(b, { value: h, onValueChange: (e) => {
-    const r = new URLSearchParams();
-    r.set("tab", e), o(r);
-  }, children: [
-    /* @__PURE__ */ a(w, { className: j("w-full justify-start", t && "sm:w-fit"), children: s.map((e) => /* @__PURE__ */ n(S, { 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: i(e.titleKey) ?? "" }),
-      e.count ? /* @__PURE__ */ n("span", { className: "text-gray-500 text-xs", children: [
-        "(",
-        e.count(c),
-        ")"
-      ] }) : null
-    ] }, e.value)) }),
-    s.map((e) => /* @__PURE__ */ a(C, { value: e.value, className: "mt-4", children: e.component ? e.component(l) : null }, e.value))
-  ] });
-}
-const G = ({ tabs: s, item: l }) => {
-  var m, d;
-  const { t: c } = v(), [t, i] = N(), u = t.get("tab"), o = ((m = s.find((e) => e.value === u)) == null ? void 0 : m.value) ?? ((d = s[0]) == null ? void 0 : d.value), p = (e) => {
-    const r = new URLSearchParams();
-    r.set("tab", e), i(r);
-  }, h = () => {
-    const e = s.find((r) => r.value === o);
-    return e ? e.component ? e.component() : x() : null;
-  }, x = () => /* @__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__ */ n("div", { className: "text-center", children: [
-    /* @__PURE__ */ a(f, { className: "h-12 w-12 mx-auto mb-4 text-amber-500" }),
-    /* @__PURE__ */ a("p", { className: "text-lg font-medium", children: "Section en cours de développement" }),
-    /* @__PURE__ */ a("p", { className: "text-sm text-gray-400", children: "Cette fonctionnalité sera bientôt disponible" })
-  ] }) }) });
-  return /* @__PURE__ */ n("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(A, { className: "h-full", children: /* @__PURE__ */ a("div", { className: "space-y-1", children: s.map((e, r) => /* @__PURE__ */ n(
-      "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" : o === 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 && p(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__ */ n("span", { className: "text-xs text-gray-500", children: [
-            "(",
-            e.count(l),
-            ")"
-          ] }),
-          !e.component && /* @__PURE__ */ a(f, { className: "size-4 text-amber-500" })
-        ]
-      },
-      r
-    )) }) }) }),
-    /* @__PURE__ */ a("div", { className: "md:hidden w-full border-b pb-4 mb-4", children: /* @__PURE__ */ n(z, { value: o, onValueChange: p, children: [
-      /* @__PURE__ */ a(K, { className: "w-full", children: /* @__PURE__ */ a(V, { placeholder: "Sélectionner une section" }) }),
-      /* @__PURE__ */ a(L, { children: s.map((e, r) => /* @__PURE__ */ a(q, { value: e.value, disabled: e.disabled, children: /* @__PURE__ */ n("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__ */ n("span", { className: "text-xs text-gray-500", children: [
-          "(",
-          e.count(l),
-          ")"
-        ] }),
-        !e.component && /* @__PURE__ */ a(f, { className: "size-4 text-amber-500" })
-      ] }) }, r)) })
-    ] }) }),
-    /* @__PURE__ */ a("div", { className: "flex-1 md:px-4 min-w-0 overflow-auto", children: h() })
-  ] });
-};
-export {
-  E as A,
-  H as a,
-  F as b,
-  G as c
-};

package/dist/SearchInput-ClZbbRWg.js

@@ -1,254 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import * as w from "react";
-import { useState as k, useRef as C, useEffect as z, useMemo as S } from "react";
-import { I, bv as L, bx as O, bw as j } from "./toggle-group-D6c-gM1D.js";
-import "./alert-B9F1N9Qk.js";
-import "@radix-ui/react-aspect-ratio";
-import { B as g, f as A } from "./tooltip-DVeqVwqV.js";
-import "@radix-ui/react-collapsible";
-import { I as q } from "./sheet-B_uq6-K_.js";
-import { CalendarIcon as D, XIcon as M, ChevronDownIcon as B, SearchIcon as E, CheckIcon as $ } from "lucide-react";
-import "react-resizable-panels";
-import { c as f } from "./tailwind.helper-B6yFEsav.js";
-import "./select-BpjFWqAY.js";
-import "next-themes";
-import "sonner";
-import { format as v } from "date-fns";
-import { fr as N } from "date-fns/locale";
-const ne = ({ date: r, onDateChange: o, placeholder: p }) => {
-  const [u, m] = k(!1), c = C(null);
-  z(() => {
-    if (!u) return;
-    const l = (n) => {
-      c.current !== null && !c.current.contains(n.target) && m(!1);
-    };
-    return document.addEventListener("mousedown", l), () => {
-      document.removeEventListener("mousedown", l);
-    };
-  }, [u]);
-  const d = () => {
-    m((l) => !l);
-  }, a = (l) => {
-    o(l), m(!1);
-  };
-  return /* @__PURE__ */ s("div", { ref: c, className: "relative w-full", children: [
-    /* @__PURE__ */ s(
-      g,
-      {
-        variant: "outline",
-        type: "button",
-        onClick: d,
-        className: f(
-          "w-full justify-start text-left font-normal focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-          u && "ring-2 ring-ring ring-offset-2",
-          r === void 0 && "text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ t(D, { className: "mr-2 size-4 shrink-0" }),
-          r !== void 0 ? v(r, "dd/MM/yyyy", { locale: N }) : /* @__PURE__ */ t("span", { children: p })
-        ]
-      }
-    ),
-    u ? /* @__PURE__ */ t("div", { className: "absolute left-0 top-[calc(100%+4px)] z-[100] rounded-surface border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2", children: /* @__PURE__ */ t(I, { mode: "single", selected: r, onSelect: a }) }) : null
-  ] });
-}, se = ({ value: r, onChange: o, placeholder: p = "Selectionner une periode", className: u }) => {
-  const [m, c] = w.useState(!1), [d, a] = w.useState(r);
-  w.useEffect(() => {
-    m && a(r);
-  }, [m, r]);
-  const l = (i) => {
-    i.stopPropagation(), o(void 0), c(!1);
-  }, n = () => {
-    o(d), c(!1);
-  }, b = () => {
-    a(r), c(!1);
-  }, y = () => {
-    a(void 0);
-  }, x = (i) => i != null && i.from ? !i.to || i.from.getTime() === i.to.getTime() ? v(i.from, "dd MMM yyyy", { locale: N }) : `${v(i.from, "dd MMM yyyy", { locale: N })} - ${v(i.to, "dd MMM yyyy", { locale: N })}` : p;
-  return /* @__PURE__ */ t("div", { className: f("grid gap-2", u), children: /* @__PURE__ */ s(L, { open: m, onOpenChange: c, children: [
-    /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ s(g, { id: "date", variant: "outline", className: f("w-[300px] justify-start text-left font-normal", !(r != null && r.from) && "text-muted-foreground"), children: [
-      /* @__PURE__ */ t(D, { className: "mr-2 size-4" }),
-      x(r),
-      (r == null ? void 0 : r.from) && /* @__PURE__ */ t(
-        g,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          "aria-label": "Effacer la periode selectionnee",
-          className: "ml-auto h-5 w-5 opacity-50 hover:opacity-100",
-          onClick: l,
-          children: /* @__PURE__ */ t(M, { className: "size-4" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ s(j, { className: "w-auto p-0", align: "start", side: "bottom", sideOffset: 4, children: [
-      /* @__PURE__ */ t(
-        I,
-        {
-          mode: "range",
-          defaultMonth: d == null ? void 0 : d.from,
-          selected: d,
-          onSelect: a,
-          numberOfMonths: 2,
-          weekStartsOn: 1,
-          className: "pointer-events-auto p-3"
-        }
-      ),
-      /* @__PURE__ */ s("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
-        /* @__PURE__ */ t(g, { variant: "ghost", size: "sm", onClick: y, children: "Effacer" }),
-        /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ t(g, { variant: "ghost", size: "sm", onClick: b, children: "Annuler" }),
-          /* @__PURE__ */ t(g, { size: "sm", onClick: n, children: "Appliquer" })
-        ] })
-      ] })
-    ] })
-  ] }) });
-}, le = ({
-  options: r = [],
-  value: o,
-  onChange: p,
-  onClear: u,
-  placeholder: m = "Sélectionner...",
-  searchPlaceholder: c = "Rechercher...",
-  disabled: d = !1
-}) => {
-  const [a, l] = k(""), [n, b] = k(!1), y = C(null), x = C(null), i = S(() => a === "" ? r : r.filter((e) => e.label.toLowerCase().includes(a.toLowerCase())), [r, a]), h = S(() => {
-    if (!(o === void 0 || o === ""))
-      return r.find((e) => e.value === o);
-  }, [r, o]), P = o === void 0 || o === "" ? void 0 : (h == null ? void 0 : h.label) ?? o;
-  z(() => {
-    n && requestAnimationFrame(() => {
-      var e;
-      (e = x.current) == null || e.focus();
-    });
-  }, [n]), z(() => {
-    if (!n) return;
-    const e = (T) => {
-      y.current !== null && !y.current.contains(T.target) && (b(!1), l(""));
-    };
-    return document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("mousedown", e);
-    };
-  }, [n]);
-  const R = (e) => {
-    p(e), b(!1), l("");
-  };
-  return /* @__PURE__ */ s("div", { ref: y, className: "relative w-full", children: [
-    /* @__PURE__ */ s(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          d || b((e) => (e && l(""), !e));
-        },
-        disabled: d,
-        className: f(
-          A,
-          "w-full",
-          n && "ring-2 ring-ring ring-offset-2",
-          (o === void 0 || o === "") && "text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ s("span", { className: "flex items-center gap-2 truncate", children: [
-            (h == null ? void 0 : h.color) && /* @__PURE__ */ t("span", { className: "size-2.5 shrink-0 rounded-full", style: { backgroundColor: h.color } }),
-            /* @__PURE__ */ t("span", { className: "truncate", children: P ?? m })
-          ] }),
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
-            u && o !== void 0 && o !== "" && !d && /* @__PURE__ */ t(
-              "span",
-              {
-                role: "button",
-                tabIndex: -1,
-                onClick: (e) => {
-                  e.stopPropagation();
-                },
-                onPointerDown: (e) => {
-                  e.preventDefault(), e.stopPropagation(), u();
-                },
-                className: "text-muted-foreground hover:text-foreground",
-                children: /* @__PURE__ */ t(M, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ t(B, { className: f("size-4 opacity-50 shrink-0 transition-transform", n && "rotate-180") })
-          ] })
-        ]
-      }
-    ),
-    n ? /* @__PURE__ */ s("div", { className: "absolute left-0 right-0 top-[calc(100%+4px)] z-[100] rounded-surface border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2", children: [
-      /* @__PURE__ */ t("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ s("div", { className: "relative", children: [
-        /* @__PURE__ */ t(E, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            ref: x,
-            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",
-            placeholder: c,
-            value: a,
-            onChange: (e) => {
-              l(e.target.value);
-            }
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5 max-h-56 overflow-y-auto 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: [
-        i.length === 0 && /* @__PURE__ */ t("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "Aucun résultat" }),
-        i.map((e) => /* @__PURE__ */ s(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              R(e.value);
-            },
-            className: f(
-              "flex items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted cursor-pointer transition-colors text-left w-full",
-              o === e.value && "bg-muted font-medium"
-            ),
-            children: [
-              /* @__PURE__ */ t($, { className: f("size-3.5 shrink-0", o === e.value ? "opacity-100" : "opacity-0") }),
-              e.color && /* @__PURE__ */ t("span", { className: "size-2.5 shrink-0 rounded-full", style: { backgroundColor: e.color } }),
-              e.label
-            ]
-          },
-          e.value
-        ))
-      ] })
-    ] }) : null
-  ] });
-}, ae = ({
-  searchQuery: r,
-  search: o,
-  placeholder: p = "Rechercher...",
-  onSearch: u,
-  onSubmit: m,
-  onClear: c,
-  className: d
-}) => {
-  const a = r ?? o ?? "", l = () => {
-    u(""), c !== void 0 && c();
-  };
-  return /* @__PURE__ */ s("div", { className: f("relative h-fit w-full md:w-64", d), children: [
-    /* @__PURE__ */ t(E, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" }),
-    /* @__PURE__ */ t(
-      q,
-      {
-        placeholder: p,
-        value: a,
-        onChange: (n) => {
-          u(n.target.value);
-        },
-        className: "pl-8",
-        onKeyDown: (n) => {
-          n.key === "Enter" && m !== void 0 && (n.preventDefault(), m());
-        }
-      }
-    ),
-    a !== "" ? /* @__PURE__ */ t("button", { onClick: l, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700", type: "button", children: /* @__PURE__ */ t(M, { className: "size-4" }) }) : null
-  ] });
-};
-export {
-  ne as D,
-  ae as S,
-  se as a,
-  le as b
-};