@techzyapp/ui-library 1.0.25 → 1.0.27

package/dist/RootLayout-D3K-pAMO.js

@@ -0,0 +1,515 @@
+import { jsxs as r, Fragment as w, jsx as e } from "react/jsx-runtime";
+import { useState as H, useEffect as U } from "react";
+import { useRouterState as X, useNavigate as ne } from "@tanstack/react-router";
+import { clsx as Y } from "clsx";
+import { a as Z } from "./useMediaQuery-DrDUrkmJ.js";
+import { u as le } from "./useLockBodyScroll-DwBILLPK.js";
+import { A as J } from "./Avatar-BGPGxry2.js";
+import { C as $, R as oe } from "./Col-B51RlwWP.js";
+import { D as S } from "./Divider-LtH3dLgw.js";
+import { D as K } from "./Dropdown-FfkmluRu.js";
+import { I as g } from "./Icon-DaTvzLBu.js";
+import { I as A } from "./IconButton-CBp8QuTO.js";
+import { L as R } from "./ListItem-Cn15lJBr.js";
+import { F as re } from "./FullscreenToggle-HZQOIa21.js";
+import { T as ie } from "./ThemeToggle-BGdvqXad.js";
+import { T as c } from "./Typography-Cta6Rg4L.js";
+import { B as ce } from "./Breadcrumbs-BJHKk0Sn.js";
+import { T as de } from "./Toaster-DuzcRbio.js";
+import { a as me, c as pe, d as he, N as V, S as ge } from "./Sidebar-CsPnv4mu.js";
+import { F as ue } from "./Flag-CzCEpB8E.js";
+import { M as be } from "./Modal-DJljaPqV.js";
+import { a as E } from "./ChoiceCardGroup-D3HL7dHj.js";
+import { S as fe } from "./Select-BB9oOoWZ.js";
+import { S as ve } from "./SwatchPicker-DXEE9xqY.js";
+import { m as ee, a as P, D as z, u as _e, g as Se } from "./ConfigProvider-DL9fylMo.js";
+import { B as Ce } from "./Button-obe6rono.js";
+import { S as ye } from "./SpeedDial-B8XMUATN.js";
+const Te = {
+  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 ke({ open: o, onClose: b, showTheme: f = !0 }) {
+  const {
+    mode: l,
+    setMode: C,
+    accentColors: y,
+    defaultAccentColors: T,
+    setAccentColor: L,
+    headerSticky: F,
+    setHeaderSticky: D,
+    fontFamily: v,
+    setFontFamily: m,
+    shape: O,
+    setShape: d
+  } = ee(), a = P(), [I, k] = H(""), _ = I.trim(), N = v !== z ? [z, v] : [z], B = (_.length > 0 && !N.some((s) => s.toLowerCase() === _.toLowerCase()) ? [_, ...N] : N).map((s) => ({
+    value: s,
+    label: s === z ? a("settings.fontDefault", { font: s }) : s
+  })), q = (s, i) => {
+    const p = T[s], u = [p, ...Te[s].filter((h) => h.toLowerCase() !== p.toLowerCase())];
+    return /* @__PURE__ */ e(
+      ve,
+      {
+        label: i,
+        colors: u,
+        value: y[s] ?? p,
+        onChange: (h) => L(h.toLowerCase() === p.toLowerCase() ? null : h, s),
+        labels: { [p]: a("settings.accentDefault", { color: p }) },
+        "aria-label": String(i)
+      }
+    );
+  };
+  return /* @__PURE__ */ r(
+    be,
+    {
+      open: o,
+      onClose: b,
+      placement: "right",
+      size: "sm",
+      title: a("settings.label"),
+      icon: "Setting5",
+      children: [
+        f && /* @__PURE__ */ r(w, { children: [
+          /* @__PURE__ */ e(c, { variant: "subtitle", as: "h3", children: a("settings.themeTitle") }),
+          /* @__PURE__ */ e(
+            c,
+            {
+              variant: "bodySmall",
+              color: "muted",
+              as: "p",
+              style: { marginTop: "var(--tz-space-xxs)" },
+              children: a("settings.themeDesc")
+            }
+          ),
+          /* @__PURE__ */ e(
+            E,
+            {
+              exclusive: !0,
+              color: "accent",
+              minCardWidth: 130,
+              value: l,
+              onChange: (s) => {
+                typeof s == "string" && C(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(S, { style: { margin: "var(--tz-space-md) 0" } })
+        ] }),
+        /* @__PURE__ */ e(c, { variant: "subtitle", as: "h3", children: a("settings.accentTitle") }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.accentDesc")
+          }
+        ),
+        /* @__PURE__ */ e($, { gap: "md", style: { marginTop: "var(--tz-space-sm)" }, children: f ? /* @__PURE__ */ r(w, { children: [
+          q("light", a("settings.lightTheme")),
+          q("dark", a("settings.darkTheme"))
+        ] }) : (
+          // theme switching is off → the panel stays in one mode, so only that mode's accent matters
+          q(l, a(l === "light" ? "settings.lightTheme" : "settings.darkTheme"))
+        ) }),
+        /* @__PURE__ */ e(S, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(c, { variant: "subtitle", as: "h3", children: a("settings.fontTitle") }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.fontDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          fe,
+          {
+            label: a("settings.fontFamily"),
+            searchable: !0,
+            searchPlaceholder: a("settings.fontSearch"),
+            value: v,
+            options: B,
+            onSearchChange: k,
+            onChange: (s) => {
+              m(s), k("");
+            },
+            "aria-label": a("settings.fontFamily"),
+            style: { marginTop: "var(--tz-space-sm)" }
+          }
+        ),
+        /* @__PURE__ */ e(S, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(c, { variant: "subtitle", as: "h3", children: a("settings.headerTitle") }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.headerDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          E,
+          {
+            exclusive: !0,
+            color: "accent",
+            minCardWidth: 130,
+            value: F ? "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(S, { style: { margin: "var(--tz-space-md) 0" } }),
+        /* @__PURE__ */ e(c, { variant: "subtitle", as: "h3", children: a("settings.shapeTitle") }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            variant: "bodySmall",
+            color: "muted",
+            as: "p",
+            style: { marginTop: "var(--tz-space-xxs)" },
+            children: a("settings.shapeDesc")
+          }
+        ),
+        /* @__PURE__ */ e(
+          E,
+          {
+            exclusive: !0,
+            color: "accent",
+            minCardWidth: 130,
+            value: O,
+            onChange: (s) => {
+              (s === "rounded" || s === "square") && d(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 Ne = "_shell_17qsl_5", qe = "_shellCollapsed_17qsl_21", xe = "_sidebar_17qsl_21", Ae = "_sidebarInner_17qsl_49", ze = "_sidebarClose_17qsl_58", we = "_backdrop_17qsl_65", Le = "_brand_17qsl_70", Fe = "_sidebarSearch_17qsl_86", De = "_navScroll_17qsl_99", Ie = "_sidebarFooter_17qsl_108", Be = "_headerSearch_17qsl_115", Me = "_main_17qsl_119", Re = "_topbar_17qsl_126", Ee = "_topbarSticky_17qsl_139", He = "_headerStart_17qsl_150", Pe = "_headerEnd_17qsl_159", Oe = "_account_17qsl_166", We = "_content_17qsl_182", je = "_pageTitleRow_17qsl_189", Qe = "_pageTitle_17qsl_189", Ge = "_pageActions_17qsl_207", Ue = "_pageActionsFab_17qsl_221", Xe = "_pageActionsLetter_17qsl_236", Ye = "_settings_17qsl_248", n = {
+  shell: Ne,
+  shellCollapsed: qe,
+  sidebar: xe,
+  sidebarInner: Ae,
+  sidebarClose: ze,
+  backdrop: we,
+  brand: Le,
+  sidebarSearch: Fe,
+  navScroll: De,
+  sidebarFooter: Ie,
+  headerSearch: Be,
+  main: Me,
+  topbar: Re,
+  topbarSticky: Ee,
+  headerStart: He,
+  headerEnd: Pe,
+  account: Oe,
+  content: We,
+  pageTitleRow: je,
+  pageTitle: Qe,
+  pageActions: Ge,
+  pageActionsFab: Ue,
+  pageActionsLetter: Xe,
+  settings: Ye
+}, Je = (o) => typeof o == "string" ? /* @__PURE__ */ e(g, { name: o }) : o, Ke = (o) => o.icon != null ? o.icon : typeof o.label == "string" && o.label.trim() ? /* @__PURE__ */ e("span", { className: n.pageActionsLetter, children: o.label.trim()[0].toUpperCase() }) : "More";
+function Ve({ actions: o }) {
+  const b = P(), f = Z("xs");
+  return o.length ? f && o.length >= 2 ? /* @__PURE__ */ e(
+    ye,
+    {
+      ariaLabel: b("pageActions.label"),
+      icon: "Add",
+      direction: "up",
+      className: n.pageActionsFab,
+      actions: o.map((l) => ({
+        icon: Ke(l),
+        label: l.label,
+        onClick: l.onClick,
+        disabled: l.disabled
+      }))
+    }
+  ) : /* @__PURE__ */ e(w, { children: o.map((l, C) => /* @__PURE__ */ e(
+    Ce,
+    {
+      size: "sm",
+      color: l.color,
+      variant: l.variant,
+      disabled: l.disabled,
+      startIcon: l.icon != null ? Je(l.icon) : void 0,
+      onClick: l.onClick,
+      children: l.label
+    },
+    C
+  )) }) : null;
+}
+function qa({
+  logo: o,
+  sidebarFooter: b,
+  header: f,
+  toaster: l = !0,
+  children: C
+}) {
+  const y = me(), T = pe(), { headerSticky: L } = ee(), { language: F, setLanguage: D, languages: v } = _e(), m = P(), d = { ...Se(), ...f }, a = d.theme ?? !0, I = d.fullscreen ?? !1, k = d.settings ?? !0, _ = d.search ?? !0, N = d.languages ?? !0, W = d.breadcrumbs ?? !0, B = typeof l == "object" ? l : void 0, q = d.pageTitle ?? !0, s = d.onLogout, i = d.user, p = d.menu ?? [], u = Z("md"), [h, x] = H(u);
+  U(() => {
+    x(u);
+  }, [u]), le(u && !h);
+  const ae = X({ select: (t) => t.location.pathname });
+  U(() => {
+    u && x(!0);
+  }, [ae]);
+  const j = X({
+    select: (t) => t.statusCode === 404 || t.matches.some((M) => M.status === "notFound")
+  }), [te, Q] = H(!1), se = ne(), G = (he() ?? []).map((t) => ({
+    label: t.label,
+    icon: t.icon,
+    color: t.color,
+    variant: t.variant,
+    disabled: t.disabled,
+    onClick: t.onClick ?? (t.to ? () => se({ to: t.to, params: t.params, search: t.search }) : void 0)
+  }));
+  return /* @__PURE__ */ r("div", { className: Y(n.shell, h && n.shellCollapsed), children: [
+    /* @__PURE__ */ e("aside", { className: n.sidebar, children: /* @__PURE__ */ r("div", { className: n.sidebarInner, children: [
+      o ? /* @__PURE__ */ r("div", { className: n.brand, children: [
+        o,
+        /* @__PURE__ */ e(
+          A,
+          {
+            variant: "filled",
+            size: "sm",
+            className: n.sidebarClose,
+            "aria-label": m("common.close"),
+            onClick: () => x(!0),
+            children: /* @__PURE__ */ e(g, { name: "Close" })
+          }
+        )
+      ] }) : null,
+      _ ? /* @__PURE__ */ e("div", { className: n.sidebarSearch, children: /* @__PURE__ */ e(V, {}) }) : null,
+      /* @__PURE__ */ e("div", { className: n.navScroll, children: /* @__PURE__ */ e(ge, {}) }),
+      b ? /* @__PURE__ */ e("div", { className: n.sidebarFooter, children: b }) : null
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: n.backdrop, onClick: () => x(!0), "aria-hidden": "true" }),
+    /* @__PURE__ */ r("div", { className: n.main, children: [
+      /* @__PURE__ */ r("header", { className: Y(n.topbar, L && n.topbarSticky), children: [
+        /* @__PURE__ */ r("div", { className: n.headerStart, children: [
+          /* @__PURE__ */ e(
+            A,
+            {
+              "aria-label": h ? "Show sidebar" : "Hide sidebar",
+              "aria-expanded": !h,
+              variant: "filled",
+              size: "sm",
+              onClick: () => x((t) => !t),
+              children: /* @__PURE__ */ e(g, { name: "Menu" })
+            }
+          ),
+          _ ? /* @__PURE__ */ e("div", { className: n.headerSearch, children: /* @__PURE__ */ e(V, {}) }) : null
+        ] }),
+        /* @__PURE__ */ r("div", { className: n.headerEnd, children: [
+          I ? /* @__PURE__ */ e(re, { variant: "filled", size: "sm" }) : null,
+          a ? /* @__PURE__ */ e(ie, { variant: "filled", size: "sm" }) : null,
+          N && v.length > 1 ? /* @__PURE__ */ e(
+            K,
+            {
+              placement: "bottom-end",
+              trigger: /* @__PURE__ */ e(A, { variant: "filled", size: "sm", "aria-label": m("language.label"), children: /* @__PURE__ */ e(g, { name: "Global" }) }),
+              children: v.map((t) => /* @__PURE__ */ e(
+                R,
+                {
+                  clickable: !0,
+                  selected: t.code === F,
+                  onClick: () => D(t.code),
+                  icon: /* @__PURE__ */ e(ue, { code: t.code }),
+                  children: t.label ?? t.code
+                },
+                t.code
+              ))
+            }
+          ) : null,
+          k ? /* @__PURE__ */ e(
+            A,
+            {
+              "aria-label": m("settings.label"),
+              variant: "text",
+              size: "sm",
+              className: n.settings,
+              onClick: () => Q(!0),
+              children: /* @__PURE__ */ e(g, { name: "Setting5" })
+            }
+          ) : null,
+          s ? /* @__PURE__ */ r(
+            K,
+            {
+              placement: "bottom-end",
+              style: { minWidth: 230 },
+              trigger: /* @__PURE__ */ e("button", { type: "button", className: n.account, "aria-label": m("account.label"), children: /* @__PURE__ */ e(J, { size: "md", name: i == null ? void 0 : i.name, src: i == null ? void 0 : i.avatar, color: "primary" }) }),
+              children: [
+                i ? /* @__PURE__ */ r(w, { children: [
+                  /* @__PURE__ */ r(oe, { gap: 8, align: "center", padding: "var(--tz-space-xxs) var(--tz-space-xs)", children: [
+                    /* @__PURE__ */ e(J, { size: "md", name: i.name, src: i.avatar, color: "primary" }),
+                    /* @__PURE__ */ r($, { gap: 2, children: [
+                      /* @__PURE__ */ e(c, { variant: "body", children: i.name ?? m("userCard.welcome") }),
+                      i.email ? /* @__PURE__ */ e(c, { variant: "bodySmall", color: "muted", children: i.email }) : null
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(S, {})
+                ] }) : null,
+                p.map((t, M) => /* @__PURE__ */ e(
+                  R,
+                  {
+                    icon: t.icon ? /* @__PURE__ */ e(g, { name: t.icon, color: t.color }) : void 0,
+                    color: t.color,
+                    clickable: !0,
+                    disabled: t.disabled,
+                    onClick: t.onClick,
+                    children: t.label
+                  },
+                  M
+                )),
+                p.length > 0 ? /* @__PURE__ */ e(S, {}) : null,
+                /* @__PURE__ */ e(R, { icon: /* @__PURE__ */ e(g, { name: "Logout2", color: "error" }), clickable: !0, onClick: s, children: m("userCard.signOut") })
+              ]
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ r("main", { className: n.content, children: [
+        W && !j ? /* @__PURE__ */ e(ce, {}) : null,
+        q && !j && (y || T) ? /* @__PURE__ */ r("div", { className: n.pageTitleRow, children: [
+          T ? /* @__PURE__ */ e(
+            A,
+            {
+              "aria-label": m("pageTitle.back"),
+              variant: "filled",
+              color: "accent",
+              className: n.backButton,
+              onClick: T,
+              size: "sm",
+              children: /* @__PURE__ */ e(g, { name: "ArrowLeft" })
+            }
+          ) : null,
+          y ? /* @__PURE__ */ e(c, { variant: "h2", className: n.pageTitle, children: y }) : null,
+          G.length > 0 ? /* @__PURE__ */ e("div", { className: n.pageActions, children: /* @__PURE__ */ e(Ve, { actions: G }) }) : null
+        ] }) : null,
+        C
+      ] })
+    ] }),
+    l !== !1 && /* @__PURE__ */ e(de, { ...B }),
+    k ? /* @__PURE__ */ e(
+      ke,
+      {
+        open: te,
+        onClose: () => Q(!1),
+        showTheme: a
+      }
+    ) : null
+  ] });
+}
+export {
+  qa as R
+};
+//# sourceMappingURL=RootLayout-D3K-pAMO.js.map