@techzyapp/ui-library 1.0.37 → 1.0.38

package/dist/RootLayout-fsVJvS8l.js

@@ -0,0 +1,582 @@
+import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
+import { useRef as ue, useState as U, useEffect as O } from "react";
+import { useRouterState as K, useNavigate as he, Link as V } from "@tanstack/react-router";
+import { clsx as Z } from "clsx";
+import { a as ee } from "./useMediaQuery-DrDUrkmJ.js";
+import { u as pe } from "./useLockBodyScroll-DwBILLPK.js";
+import { A as te } from "./Avatar-MwWIcj8z.js";
+import { B as be } from "./Badge-BmFgusOa.js";
+import { C as ae } from "./Chip-_8JWFrHv.js";
+import { C as re, R as ge } from "./Col-B51RlwWP.js";
+import { D as y } from "./Divider-LtH3dLgw.js";
+import { D as se } from "./Dropdown-zlv96RLy.js";
+import { I as p } from "./Icon-CGQ5yGSZ.js";
+import { I as L } from "./IconButton-06pmftMo.js";
+import { L as j } from "./ListItem-ehFB7TUW.js";
+import { F as fe } from "./FullscreenToggle-CjirSJ6w.js";
+import { T as ve } from "./ThemeToggle-Bmx6I9qM.js";
+import { T as _e } from "./Tooltip-DsDv4NOq.js";
+import { T as i } from "./Typography-ChSuxgkc.js";
+import { B as Ce } from "./Breadcrumbs-etqxqMJd.js";
+import { T as ye } from "./Toaster-C_3REdVz.js";
+import { a as Se, N as ne, S as ke } from "./Sidebar-Cn2yCsG-.js";
+import { F as Te } from "./Flag-DfA2t0yd.js";
+import { B as xe } from "./Blockquote-Ma-2naET.js";
+import { B as ze } from "./Button-Bst_NtPJ.js";
+import { M as Ne } from "./Modal-CDpWnBEB.js";
+import { P as Le } from "./Popconfirm-C4WiB80U.js";
+import { a as Q } from "./ChoiceCardGroup-BBD8ai4s.js";
+import { S as je } from "./Select-TVfg_miK.js";
+import { S as De } from "./SwatchPicker-C-_wLaf6.js";
+import { o as oe, a as le, D as M, u as we, h as Fe } from "./ConfigProvider-DeMASTVo.js";
+import { f as Ie } from "./errorMessage-C83fB2h5.js";
+const Ae = {
+  light: [
+    "#dc2626",
+    // red
+    "#ea580c",
+    // orange
+    "#d97706",
+    // amber
+    "#ca8a04",
+    // yellow
+    "#65a30d",
+    // lime
+    "#16a34a",
+    // green
+    "#059669",
+    // emerald
+    "#0891b2",
+    // cyan
+    "#0284c7",
+    // sky
+    "#2563eb",
+    // blue
+    "#4f46e5",
+    // indigo
+    "#7c3aed",
+    // violet
+    "#c026d3",
+    // fuchsia
+    "#db2777",
+    // pink
+    "#475569"
+    // slate
+  ],
+  dark: [
+    "#f87171",
+    // red
+    "#fb923c",
+    // orange
+    "#fbbf24",
+    // amber
+    "#facc15",
+    // yellow
+    "#a3e635",
+    // lime
+    "#4ade80",
+    // green
+    "#34d399",
+    // emerald
+    "#22d3ee",
+    // cyan
+    "#38bdf8",
+    // sky
+    "#60a5fa",
+    // blue
+    "#818cf8",
+    // indigo
+    "#a78bfa",
+    // violet
+    "#e879f9",
+    // fuchsia
+    "#f472b6",
+    // pink
+    "#94a3b8"
+    // slate
+  ]
+};
+function Be({ open: c, onClose: g, showTheme: d = !0 }) {
+  const {
+    mode: S,
+    setMode: k,
+    accentColors: R,
+    defaultAccentColors: q,
+    setAccentColor: P,
+    headerSticky: H,
+    setHeaderSticky: D,
+    fontFamily: m,
+    setFontFamily: $,
+    shape: w,
+    setShape: X,
+    hasCustomPreferences: r,
+    resetPreferences: F
+  } = oe(), a = le(), T = ue(null), I = () => {
+    F(), requestAnimationFrame(() => {
+      const s = T.current, b = (s == null ? void 0 : s.querySelector('input:checked, [aria-checked="true"]')) ?? (s == null ? void 0 : s.querySelector('input, button, [tabindex]:not([tabindex="-1"])'));
+      b == null || b.focus();
+    });
+  }, [W, A] = U(""), x = W.trim(), v = m !== M ? [M, m] : [M], _ = (x.length > 0 && !v.some((s) => s.toLowerCase() === x.toLowerCase()) ? [x, ...v] : v).map((s) => ({
+    value: s,
+    label: s === M ? a("settings.fontDefault", { font: s }) : s
+  })), C = (s, b) => {
+    const h = q[s], B = [h, ...Ae[s].filter((f) => f.toLowerCase() !== h.toLowerCase())];
+    return /* @__PURE__ */ e(
+      De,
+      {
+        label: b,
+        colors: B,
+        value: R[s] ?? h,
+        onChange: (f) => P(f.toLowerCase() === h.toLowerCase() ? null : f, s),
+        labels: { [h]: a("settings.accentDefault", { color: h }) },
+        "aria-label": String(b)
+      }
+    );
+  };
+  return /* @__PURE__ */ e(
+    Ne,
+    {
+      open: c,
+      onClose: g,
+      placement: "right",
+      size: "sm",
+      title: a("settings.label"),
+      icon: "Setting5",
+      footer: (
+        // one action: put every appearance choice back to the app's defaults (disabled while unchanged),
+        // behind a quick confirm — it undoes several choices at once
+        /* @__PURE__ */ e(
+          Le,
+          {
+            title: a("settings.resetConfirmTitle"),
+            description: a("settings.resetConfirmDesc"),
+            confirmLabel: a("settings.resetConfirm"),
+            icon: "RotateLeft",
+            disabled: !r,
+            onConfirm: I,
+            children: /* @__PURE__ */ e(
+              ze,
+              {
+                variant: "filled",
+                size: "sm",
+                color: "error",
+                fullWidth: !0,
+                startIcon: /* @__PURE__ */ e(p, { name: "RotateLeft" }),
+                disabled: !r,
+                children: a("settings.reset")
+              }
+            )
+          }
+        )
+      ),
+      children: /* @__PURE__ */ o("div", { ref: T, children: [
+        /* @__PURE__ */ e(xe, { size: "sm", style: { marginBottom: "var(--tz-space-md)" }, children: a("settings.autoSaveNote") }),
+        d && /* @__PURE__ */ o(G, { children: [
+          /* @__PURE__ */ e(i, { variant: "subtitle", as: "h3", children: a("settings.themeTitle") }),
+          /* @__PURE__ */ e(
+            i,
+            {
+              variant: "bodySmall",
+              color: "muted",
+              as: "p",
+              style: { marginTop: "var(--tz-space-xxs)" },
+              children: a("settings.themeDesc")
+            }
+          ),
+          /* @__PURE__ */ e(
+            Q,
+            {
+              exclusive: !0,
+              color: "accent",
+              minCardWidth: 130,
+              value: S,
+              onChange: (s) => {
+                typeof s == "string" && k(s);
+              },
+              options: [
+                {
+                  value: "light",
+                  label: a("settings.light"),
+                  description: a("settings.lightDesc"),
+                  icon: "Sun"
+                },
+                {
+                  value: "dark",
+                  label: a("settings.dark"),
+                  description: a("settings.darkDesc"),
+                  icon: "Moon"
+                }
+              ],
+              "aria-label": a("settings.themeTitle"),
+              style: { marginTop: "var(--tz-space-sm)" }
+            }
+          ),
+          /* @__PURE__ */ e(y, { style: { margin: "var(--tz-space-md) 0" } })
+        ] }),
+        /* @__PURE__ */ e(i, { variant: "subtitle", as: "h3", children: a("settings.accentTitle") }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.accentDesc")
+          }
+        ),
+        /* @__PURE__ */ e(re, { gap: "md", style: { marginTop: "var(--tz-space-sm)" }, children: d ? /* @__PURE__ */ o(G, { children: [
+          C("light", a("settings.lightTheme")),
+          C("dark", a("settings.darkTheme"))
+        ] }) : (
+          // theme switching is off → the panel stays in one mode, so only that mode's accent matters
+          C(S, a(S === "light" ? "settings.lightTheme" : "settings.darkTheme"))
+        ) }),
+        /* @__PURE__ */ e(y, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(i, { variant: "subtitle", as: "h3", children: a("settings.fontTitle") }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.fontDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          je,
+          {
+            label: a("settings.fontFamily"),
+            searchable: !0,
+            searchPlaceholder: a("settings.fontSearch"),
+            value: m,
+            options: _,
+            onSearchChange: A,
+            onChange: (s) => {
+              $(s), A("");
+            },
+            "aria-label": a("settings.fontFamily"),
+            style: { marginTop: "var(--tz-space-sm)" }
+          }
+        ),
+        /* @__PURE__ */ e(y, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(i, { variant: "subtitle", as: "h3", children: a("settings.headerTitle") }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.headerDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            exclusive: !0,
+            color: "accent",
+            minCardWidth: 130,
+            value: H ? "fixed" : "static",
+            onChange: (s) => {
+              typeof s == "string" && D(s === "fixed");
+            },
+            options: [
+              {
+                value: "static",
+                label: a("settings.scrollable"),
+                description: a("settings.scrollableDesc")
+              },
+              { value: "fixed", label: a("settings.fixed"), description: a("settings.fixedDesc") }
+            ],
+            "aria-label": a("settings.headerTitle"),
+            style: { marginTop: "var(--tz-space-sm)" }
+          }
+        ),
+        /* @__PURE__ */ e(y, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(i, { variant: "subtitle", as: "h3", children: a("settings.shapeTitle") }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.shapeDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            exclusive: !0,
+            color: "accent",
+            minCardWidth: 130,
+            value: w,
+            onChange: (s) => {
+              (s === "rounded" || s === "square") && X(s);
+            },
+            options: [
+              {
+                value: "rounded",
+                label: a("settings.rounded"),
+                description: a("settings.roundedDesc")
+              },
+              { value: "square", label: a("settings.square"), description: a("settings.squareDesc") }
+            ],
+            "aria-label": a("settings.shapeTitle"),
+            style: { marginTop: "var(--tz-space-sm)" }
+          }
+        )
+      ] })
+    }
+  );
+}
+const Ee = "_shell_f721j_5", Me = "_shellCollapsed_f721j_21", Re = "_sidebar_f721j_21", qe = "_sidebarInner_f721j_49", Pe = "_sidebarClose_f721j_58", He = "_backdrop_f721j_65", $e = "_brand_f721j_70", We = "_brandLink_f721j_79", Oe = "_sidebarSearch_f721j_111", Qe = "_navScroll_f721j_124", Ge = "_sidebarFooter_f721j_133", Ue = "_headerSearch_f721j_140", Xe = "_main_f721j_144", Ye = "_topbar_f721j_151", Je = "_topbarSticky_f721j_164", Ke = "_headerStart_f721j_175", Ve = "_headerEnd_f721j_184", Ze = "_environment_f721j_191", et = "_headerExtra_f721j_197", tt = "_menuDot_f721j_204", at = "_account_f721j_211", st = "_content_f721j_227", nt = "_settings_f721j_239", n = {
+  shell: Ee,
+  shellCollapsed: Me,
+  sidebar: Re,
+  sidebarInner: qe,
+  sidebarClose: Pe,
+  backdrop: He,
+  brand: $e,
+  brandLink: We,
+  sidebarSearch: Oe,
+  navScroll: Qe,
+  sidebarFooter: Ge,
+  headerSearch: Ue,
+  main: Xe,
+  topbar: Ye,
+  topbarSticky: Je,
+  headerStart: Ke,
+  headerEnd: Ve,
+  environment: Ze,
+  headerExtra: et,
+  menuDot: tt,
+  account: at,
+  content: st,
+  settings: nt
+};
+function rt(c) {
+  if (c == null) return null;
+  const g = typeof c == "string" ? { label: c } : c, d = g.label.trim();
+  return !d || /^prod(uction)?$/i.test(d) ? null : {
+    label: typeof c == "string" ? d.charAt(0).toUpperCase() + d.slice(1) : d,
+    color: g.color ?? "warning",
+    icon: g.icon ?? "Code"
+  };
+}
+const ot = j;
+function qt({
+  logo: c,
+  logoTo: g,
+  sidebarFooter: d,
+  header: S,
+  toaster: k = !0,
+  children: R
+}) {
+  const { headerSticky: q } = oe(), { language: P, setLanguage: H, languages: D } = we(), m = le(), $ = Se(), w = g === !1 ? void 0 : g ?? $, r = { ...Fe(), ...S }, F = r.theme ?? !0, a = r.fullscreen ?? !1, T = r.settings ?? !0, I = r.search ?? !0, W = r.languages ?? !0, A = r.breadcrumbs ?? !0, x = typeof k == "object" ? k : void 0, v = r.onLogout, l = r.user, _ = rt(r.environment), C = r.menu ?? [], s = r.actions ?? [], b = ee("xs"), h = b && v != null, B = (t) => {
+    var u;
+    (u = t.onClick) == null || u.call(t), t.to && me({ to: t.to, params: t.params, search: t.search });
+  }, f = C.filter((t) => !t.to && !t.onClick).map((t) => t.label).join(", ");
+  O(() => {
+    f && Ie() && console.warn(
+      `[RootLayout] header.menu items without \`to\` or \`onClick\`: ${f}`
+    );
+  }, [f]);
+  const z = ee("md"), [E, N] = U(z);
+  O(() => {
+    N(z);
+  }, [z]), pe(z && !E);
+  const ie = K({ select: (t) => t.location.pathname });
+  O(() => {
+    z && N(!0);
+  }, [ie]);
+  const ce = K({
+    select: (t) => t.statusCode === 404 || t.matches.some((u) => u.status === "notFound")
+  }), [de, Y] = U(!1), me = he();
+  return /* @__PURE__ */ o("div", { className: Z(n.shell, E && n.shellCollapsed), children: [
+    /* @__PURE__ */ e("aside", { className: n.sidebar, children: /* @__PURE__ */ o("div", { className: n.sidebarInner, children: [
+      c ? /* @__PURE__ */ o("div", { className: n.brand, children: [
+        w ? /* @__PURE__ */ e(V, { to: w, className: n.brandLink, "aria-label": m("sidebar.home"), children: c }) : c,
+        /* @__PURE__ */ e(
+          L,
+          {
+            variant: "filled",
+            size: "sm",
+            className: n.sidebarClose,
+            "aria-label": m("common.close"),
+            onClick: () => N(!0),
+            children: /* @__PURE__ */ e(p, { name: "Close" })
+          }
+        )
+      ] }) : null,
+      I ? /* @__PURE__ */ e("div", { className: n.sidebarSearch, children: /* @__PURE__ */ e(ne, {}) }) : null,
+      /* @__PURE__ */ e("div", { className: n.navScroll, children: /* @__PURE__ */ e(ke, {}) }),
+      d ? /* @__PURE__ */ e("div", { className: n.sidebarFooter, children: d }) : null
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: n.backdrop, onClick: () => N(!0), "aria-hidden": "true" }),
+    /* @__PURE__ */ o("div", { className: n.main, children: [
+      /* @__PURE__ */ o("header", { className: Z(n.topbar, q && n.topbarSticky), children: [
+        /* @__PURE__ */ o("div", { className: n.headerStart, children: [
+          /* @__PURE__ */ e(
+            L,
+            {
+              "aria-label": E ? "Show sidebar" : "Hide sidebar",
+              "aria-expanded": !E,
+              variant: "filled",
+              size: "sm",
+              onClick: () => N((t) => !t),
+              children: /* @__PURE__ */ e(p, { name: "Menu" })
+            }
+          ),
+          I ? /* @__PURE__ */ e("div", { className: n.headerSearch, children: /* @__PURE__ */ e(ne, {}) }) : null
+        ] }),
+        /* @__PURE__ */ o("div", { className: n.headerEnd, children: [
+          _ ? /* @__PURE__ */ e(
+            ae,
+            {
+              size: "sm",
+              color: _.color,
+              startIcon: _.icon ? /* @__PURE__ */ e(p, { name: _.icon }) : void 0,
+              className: n.environment,
+              children: _.label
+            }
+          ) : null,
+          r.extra != null && !b ? /* @__PURE__ */ e("div", { className: n.headerExtra, children: r.extra }) : null,
+          h ? null : s.map((t, u) => /* @__PURE__ */ e(
+            be,
+            {
+              content: t.dot ? void 0 : t.badge,
+              dot: t.dot,
+              color: t.badgeColor ?? "error",
+              children: /* @__PURE__ */ e(_e, { content: t.label, placement: "bottom", children: /* @__PURE__ */ e(
+                L,
+                {
+                  variant: "filled",
+                  size: "sm",
+                  color: t.color,
+                  "aria-label": t.label,
+                  disabled: t.disabled,
+                  onClick: () => B(t),
+                  children: /* @__PURE__ */ e(p, { name: t.icon })
+                }
+              ) })
+            },
+            `${t.label}-${u}`
+          )),
+          a ? /* @__PURE__ */ e(fe, { variant: "filled", size: "sm" }) : null,
+          F ? /* @__PURE__ */ e(ve, { variant: "filled", size: "sm" }) : null,
+          W && D.length > 1 ? /* @__PURE__ */ e(
+            se,
+            {
+              placement: "bottom-end",
+              trigger: /* @__PURE__ */ e(L, { variant: "filled", size: "sm", "aria-label": m("language.label"), children: /* @__PURE__ */ e(p, { name: "Global" }) }),
+              children: D.map((t) => /* @__PURE__ */ e(
+                j,
+                {
+                  clickable: !0,
+                  selected: t.code === P,
+                  onClick: () => H(t.code),
+                  icon: /* @__PURE__ */ e(Te, { code: t.code }),
+                  children: t.label ?? t.code
+                },
+                t.code
+              ))
+            }
+          ) : null,
+          T ? /* @__PURE__ */ e(
+            L,
+            {
+              "aria-label": m("settings.label"),
+              variant: "text",
+              size: "sm",
+              className: n.settings,
+              onClick: () => Y(!0),
+              children: /* @__PURE__ */ e(p, { name: "Setting5" })
+            }
+          ) : null,
+          v ? /* @__PURE__ */ o(
+            se,
+            {
+              placement: "bottom-end",
+              style: { minWidth: 230 },
+              trigger: /* @__PURE__ */ e("button", { type: "button", className: n.account, "aria-label": m("account.label"), children: /* @__PURE__ */ e(te, { size: "md", name: l == null ? void 0 : l.name, src: l == null ? void 0 : l.avatar, color: "primary" }) }),
+              children: [
+                l ? /* @__PURE__ */ o(G, { children: [
+                  /* @__PURE__ */ o(ge, { gap: 8, align: "center", padding: "var(--tz-space-xxs) var(--tz-space-xs)", children: [
+                    /* @__PURE__ */ e(te, { size: "md", name: l.name, src: l.avatar, color: "primary" }),
+                    /* @__PURE__ */ o(re, { gap: 2, children: [
+                      /* @__PURE__ */ e(i, { variant: "body", children: l.name ?? m("userCard.welcome") }),
+                      l.email ? /* @__PURE__ */ e(i, { variant: "bodySmall", color: "muted", children: l.email }) : null
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(y, {})
+                ] }) : null,
+                h ? s.map((t, u) => /* @__PURE__ */ e(
+                  j,
+                  {
+                    icon: /* @__PURE__ */ e(p, { name: t.icon, color: t.color }),
+                    clickable: !0,
+                    disabled: t.disabled,
+                    onClick: () => B(t),
+                    trailing: t.dot ? /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: n.menuDot,
+                        style: { background: `var(--tz-color-${t.badgeColor ?? "error"})` },
+                        "aria-hidden": "true"
+                      }
+                    ) : t.badge != null && t.badge !== 0 && t.badge !== "" ? /* @__PURE__ */ e(ae, { size: "sm", color: t.badgeColor ?? "error", children: typeof t.badge == "number" && t.badge > 99 ? "99+" : t.badge }) : void 0,
+                    children: t.label
+                  },
+                  `action-${t.label}-${u}`
+                )) : null,
+                h && s.length > 0 ? /* @__PURE__ */ e(y, {}) : null,
+                C.map((t, u) => {
+                  const J = {
+                    icon: t.icon ? /* @__PURE__ */ e(p, { name: t.icon, color: t.color }) : void 0,
+                    color: t.color,
+                    clickable: !0,
+                    disabled: t.disabled,
+                    onClick: t.onClick,
+                    children: t.label
+                  };
+                  return t.to && !t.disabled ? /* @__PURE__ */ e(
+                    ot,
+                    {
+                      ...J,
+                      as: V,
+                      to: t.to,
+                      params: t.params,
+                      search: t.search
+                    },
+                    u
+                  ) : /* @__PURE__ */ e(j, { ...J }, u);
+                }),
+                C.length > 0 ? /* @__PURE__ */ e(y, {}) : null,
+                /* @__PURE__ */ e(j, { icon: /* @__PURE__ */ e(p, { name: "Logout2", color: "error" }), clickable: !0, onClick: v, children: m("userCard.signOut") })
+              ]
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ o("main", { className: n.content, children: [
+        A && !ce ? /* @__PURE__ */ e(Ce, {}) : null,
+        R
+      ] })
+    ] }),
+    k !== !1 && /* @__PURE__ */ e(ye, { ...x }),
+    T ? /* @__PURE__ */ e(
+      Be,
+      {
+        open: de,
+        onClose: () => Y(!1),
+        showTheme: F
+      }
+    ) : null
+  ] });
+}
+export {
+  qt as R
+};
+//# sourceMappingURL=RootLayout-fsVJvS8l.js.map