@orbe-agro/client-core 3.4.8 → 3.4.11

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNav.js

@@ -0,0 +1,84 @@
+import { jsx as i, Fragment as T, jsxs as k } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { SPLITTED_SIDE_NAV_MINI_WIDTH as A, STACKED_SIDE_NAV_SECONDARY_WIDTH as S, DIR_LTR as R, DIR_RTL as _ } from "../../../constants/theme.constant.js";
+import C from "./StackedSideNavMini.js";
+import I from "./StackedSideNavSecondary.js";
+import E from "../../../utils/hooks/useResponsive.js";
+import { useThemeStore as v } from "../../../store/themeStore.js";
+import { useRouteKeyStore as $ } from "../../../store/routeKeyStore.js";
+import { useSessionUser as x } from "../../../store/authStore.js";
+import L from "../../../configs/navigation.config/index.js";
+import M from "../../../configs/app.config.js";
+import f from "lodash/isEmpty";
+import { useTranslation as V } from "../../../utils/hooks/useTranslation.js";
+const j = {
+  width: A
+}, J = ({
+  translationSetup: n = M.activeNavTranslation
+}) => {
+  const { t: a } = V(!n), [t, c] = y({}), [p, d] = y([]), s = v((e) => e.mode), o = v((e) => e.direction), m = $((e) => e.currentRouteKey), l = x((e) => e.user.authority), { larger: h } = E(), u = (e, r) => `${e}-${r}`, N = (e) => {
+    c(e);
+  }, g = () => {
+    c({}), d([]);
+  }, D = (e) => {
+    d(e);
+  }, K = () => {
+    let e = {};
+    const r = `${-S}px`;
+    return o === R && (e = { marginLeft: r }), o === _ && (e = { marginRight: r }), e;
+  };
+  return /* @__PURE__ */ i(T, { children: h.md && /* @__PURE__ */ k("div", { className: "stacked-side-nav", children: [
+    /* @__PURE__ */ i(
+      C,
+      {
+        className: `stacked-side-nav-mini ${u(
+          "stacked-side-nav-mini",
+          s
+        )}`,
+        style: j,
+        routeKey: m,
+        activeKeys: p,
+        mode: s,
+        direction: o,
+        navigationTree: L,
+        userAuthority: l || [],
+        selectedMenu: t,
+        t: a,
+        onChange: N,
+        onSetActiveKey: D
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: `stacked-side-nav-secondary ${u(
+          "stacked-side-nav-secondary",
+          s
+        )}`,
+        style: {
+          width: S,
+          ...f(t) ? K() : {}
+        },
+        children: !f(t) && /* @__PURE__ */ i(
+          I,
+          {
+            title: a(
+              t.translateKey,
+              t.title
+            ),
+            menu: t.menu,
+            routeKey: m,
+            direction: o,
+            translationSetup: n,
+            userAuthority: l || [],
+            onCollapse: g
+          }
+        )
+      }
+    )
+  ] }) });
+};
+export {
+  J as default
+};
+//# sourceMappingURL=StackedSideNav.js.map

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedSideNav.js","sources":["../../../../../../lib/@ecme/components/template/StackedSideNav/StackedSideNav.tsx"],"sourcesContent":["import { useState } from 'react'\nimport {\n    SPLITTED_SIDE_NAV_MINI_WIDTH,\n    STACKED_SIDE_NAV_SECONDARY_WIDTH,\n    DIR_LTR,\n    DIR_RTL,\n} from '@/constants/theme.constant'\nimport StackedSideNavMini, { SelectedMenuItem } from './StackedSideNavMini'\nimport StackedSideNavSecondary from './StackedSideNavSecondary'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport { useThemeStore } from '@/store/themeStore'\nimport { useRouteKeyStore } from '@/store/routeKeyStore'\nimport { useSessionUser } from '@/store/authStore'\nimport navigationConfig from '@/configs/navigation.config'\nimport appConfig from '@/configs/app.config'\nimport isEmpty from 'lodash/isEmpty'\nimport useTranslation from '@/utils/hooks/useTranslation'\nimport type { TraslationFn } from '@/@types/common'\n\nconst stackedSideNavDefaultStyle = {\n    width: SPLITTED_SIDE_NAV_MINI_WIDTH,\n}\n\nconst StackedSideNav = ({\n    translationSetup = appConfig.activeNavTranslation,\n}: {\n    translationSetup?: boolean\n}) => {\n    const { t } = useTranslation(!translationSetup)\n\n    const [selectedMenu, setSelectedMenu] = useState<SelectedMenuItem>({})\n    const [activeKeys, setActiveKeys] = useState<string[]>([])\n\n    const mode = useThemeStore((state) => state.mode)\n    const direction = useThemeStore((state) => state.direction)\n\n    const currentRouteKey = useRouteKeyStore((state) => state.currentRouteKey)\n\n    const userAuthority = useSessionUser((state) => state.user.authority)\n\n    const { larger } = useResponsive()\n\n    const navColor = (navType: string, mode: string) => {\n        return `${navType}-${mode}`\n    }\n\n    const handleChange = (selected: SelectedMenuItem) => {\n        setSelectedMenu(selected)\n    }\n\n    const handleCollpase = () => {\n        setSelectedMenu({})\n        setActiveKeys([])\n    }\n\n    const handleSetActiveKey = (key: string[]) => {\n        setActiveKeys(key)\n    }\n\n    const stackedSideNavSecondaryDirStyle = () => {\n        let style = {}\n        const marginValue = `${-STACKED_SIDE_NAV_SECONDARY_WIDTH}px`\n        if (direction === DIR_LTR) {\n            style = { marginLeft: marginValue }\n        }\n\n        if (direction === DIR_RTL) {\n            style = { marginRight: marginValue }\n        }\n\n        return style\n    }\n\n    return (\n        <>\n            {larger.md && (\n                <div className={`stacked-side-nav`}>\n                    <StackedSideNavMini\n                        className={`stacked-side-nav-mini ${navColor(\n                            'stacked-side-nav-mini',\n                            mode,\n                        )}`}\n                        style={stackedSideNavDefaultStyle}\n                        routeKey={currentRouteKey}\n                        activeKeys={activeKeys}\n                        mode={mode}\n                        direction={direction}\n                        navigationTree={navigationConfig}\n                        userAuthority={userAuthority || []}\n                        selectedMenu={selectedMenu}\n                        t={t as TraslationFn}\n                        onChange={handleChange}\n                        onSetActiveKey={handleSetActiveKey}\n                    />\n                    <div\n                        className={`stacked-side-nav-secondary ${navColor(\n                            'stacked-side-nav-secondary',\n                            mode,\n                        )}`}\n                        style={{\n                            width: STACKED_SIDE_NAV_SECONDARY_WIDTH,\n                            ...(isEmpty(selectedMenu)\n                                ? stackedSideNavSecondaryDirStyle()\n                                : {}),\n                        }}\n                    >\n                        {!isEmpty(selectedMenu) && (\n                            <StackedSideNavSecondary\n                                title={t(\n                                    selectedMenu.translateKey as string,\n                                    selectedMenu.title as string,\n                                )}\n                                menu={selectedMenu.menu}\n                                routeKey={currentRouteKey}\n                                direction={direction}\n                                translationSetup={translationSetup}\n                                userAuthority={userAuthority || []}\n                                onCollapse={handleCollpase}\n                            />\n                        )}\n                    </div>\n                </div>\n            )}\n        </>\n    )\n}\n\nexport default StackedSideNav\n"],"names":["stackedSideNavDefaultStyle","SPLITTED_SIDE_NAV_MINI_WIDTH","StackedSideNav","translationSetup","appConfig","t","useTranslation","selectedMenu","setSelectedMenu","useState","activeKeys","setActiveKeys","mode","useThemeStore","state","direction","currentRouteKey","useRouteKeyStore","userAuthority","useSessionUser","larger","useResponsive","navColor","navType","handleChange","selected","handleCollpase","handleSetActiveKey","key","stackedSideNavSecondaryDirStyle","style","marginValue","STACKED_SIDE_NAV_SECONDARY_WIDTH","DIR_LTR","DIR_RTL","jsxs","jsx","StackedSideNavMini","navigationConfig","isEmpty","StackedSideNavSecondary"],"mappings":";;;;;;;;;;;;;AAmBA,MAAMA,IAA6B;AAAA,EAC/B,OAAOC;AACX,GAEMC,IAAiB,CAAC;AAAA,EACpB,kBAAAC,IAAmBC,EAAU;AACjC,MAEM;AACF,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,CAACH,CAAgB,GAExC,CAACI,GAAcC,CAAe,IAAIC,EAA2B,CAAA,CAAE,GAC/D,CAACC,GAAYC,CAAa,IAAIF,EAAmB,CAAA,CAAE,GAEnDG,IAAOC,EAAc,CAACC,MAAUA,EAAM,IAAI,GAC1CC,IAAYF,EAAc,CAACC,MAAUA,EAAM,SAAS,GAEpDE,IAAkBC,EAAiB,CAACH,MAAUA,EAAM,eAAe,GAEnEI,IAAgBC,EAAe,CAACL,MAAUA,EAAM,KAAK,SAAS,GAE9D,EAAE,QAAAM,EAAO,IAAIC,EAAc,GAE3BC,IAAW,CAACC,GAAiBX,MACxB,GAAGW,CAAO,IAAIX,CAAI,IAGvBY,IAAe,CAACC,MAA+B;AACjD,IAAAjB,EAAgBiB,CAAQ;AAAA,EAC5B,GAEMC,IAAiB,MAAM;AACzB,IAAAlB,EAAgB,CAAA,CAAE,GAClBG,EAAc,CAAA,CAAE;AAAA,EACpB,GAEMgB,IAAqB,CAACC,MAAkB;AAC1C,IAAAjB,EAAciB,CAAG;AAAA,EACrB,GAEMC,IAAkC,MAAM;AAC1C,QAAIC,IAAQ,CAAC;AACP,UAAAC,IAAc,GAAG,CAACC,CAAgC;AACxD,WAAIjB,MAAckB,MACNH,IAAA,EAAE,YAAYC,EAAY,IAGlChB,MAAcmB,MACNJ,IAAA,EAAE,aAAaC,EAAY,IAGhCD;AAAA,EACX;AAEA,gCAES,UAAOV,EAAA,MACH,gBAAAe,EAAA,OAAA,EAAI,WAAW,oBACZ,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAW,yBAAyBf;AAAA,UAChC;AAAA,UACAV;AAAA,QAAA,CACH;AAAA,QACD,OAAOZ;AAAA,QACP,UAAUgB;AAAA,QACV,YAAAN;AAAA,QACA,MAAAE;AAAA,QACA,WAAAG;AAAA,QACA,gBAAgBuB;AAAA,QAChB,eAAepB,KAAiB,CAAC;AAAA,QACjC,cAAAX;AAAA,QACA,GAAAF;AAAA,QACA,UAAUmB;AAAA,QACV,gBAAgBG;AAAA,MAAA;AAAA,IACpB;AAAA,IACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,8BAA8Bd;AAAA,UACrC;AAAA,UACAV;AAAA,QAAA,CACH;AAAA,QACD,OAAO;AAAA,UACH,OAAOoB;AAAA,UACP,GAAIO,EAAQhC,CAAY,IAClBsB,MACA,CAAA;AAAA,QACV;AAAA,QAEC,UAAA,CAACU,EAAQhC,CAAY,KAClB,gBAAA6B;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,OAAOnC;AAAA,cACHE,EAAa;AAAA,cACbA,EAAa;AAAA,YACjB;AAAA,YACA,MAAMA,EAAa;AAAA,YACnB,UAAUS;AAAA,YACV,WAAAD;AAAA,YACA,kBAAAZ;AAAA,YACA,eAAee,KAAiB,CAAC;AAAA,YACjC,YAAYQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAER,EAAA,CACJ,EAER,CAAA;AAER;"}

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNavMini.js

@@ -0,0 +1,116 @@
+import { jsxs as I, jsx as t } from "react/jsx-runtime";
+import { useEffect as A } from "react";
+import S from "../Logo.js";
+import { Menu as l } from "../../ui/Menu/index.js";
+import "../../ui/ScrollBar/index.js";
+import b from "../../shared/AuthorityCheck.js";
+import { SIDE_NAV_CONTENT_GUTTER as _, HEADER_HEIGHT as C } from "../../../constants/theme.constant.js";
+import { NAV_ITEM_TYPE_ITEM as H } from "../../../constants/navigation.constant.js";
+import L from "../../../configs/app.config.js";
+import s from "../../../configs/navigation-icon.config.js";
+import j from "../../../utils/hooks/useMenuActive.js";
+import c from "lodash/isEmpty";
+import { Link as a } from "react-router-dom";
+import { getLogoFilename as R } from "../../../../base/utils/logo.js";
+import D from "../../ui/ScrollBar/ScrollBar.js";
+const Z = (u) => {
+  const {
+    onChange: r,
+    routeKey: y,
+    activeKeys: o,
+    onSetActiveKey: m,
+    direction: d,
+    navigationTree: n,
+    userAuthority: h,
+    mode: f,
+    selectedMenu: p,
+    t: k,
+    ...M
+  } = u, { includedRouteTree: i } = j(n, y), N = ({
+    key: e,
+    title: x,
+    menu: K,
+    translateKey: T
+  }) => {
+    r({ title: x, menu: K, translateKey: T }), m([e]);
+  }, E = ({ key: e }) => {
+    r({}), m([e]);
+  };
+  A(() => {
+    i.type !== H && !c(i) && r({
+      key: i.key,
+      title: i.title,
+      menu: i.subMenu,
+      translateKey: i.translateKey
+    });
+  }, [i.key]);
+  const g = o && o.length > 0 ? o : c(p) ? [] : [i.key];
+  return /* @__PURE__ */ I("div", { ...M, children: [
+    /* @__PURE__ */ t(
+      a,
+      {
+        to: L.authenticatedEntryPath,
+        className: "stacked-mini-nav-header flex items-center justify-center",
+        style: { height: C },
+        children: /* @__PURE__ */ t(
+          S,
+          {
+            imgClass: "max-h-8",
+            name: R(!0, f),
+            className: _
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(D, { autoHide: !0, direction: d, children: /* @__PURE__ */ t(
+      l,
+      {
+        className: "px-4 pb-4",
+        defaultActiveKeys: g,
+        children: n.map((e) => /* @__PURE__ */ t(
+          b,
+          {
+            authority: e.authority,
+            userAuthority: h,
+            children: /* @__PURE__ */ t("div", { title: k(e.translateKey, e.title), children: e.subMenu && e.subMenu.length > 0 ? /* @__PURE__ */ t(
+              l.MenuItem,
+              {
+                eventKey: e.key,
+                className: "mb-2",
+                onSelect: () => N({
+                  key: e.key,
+                  title: e.title,
+                  menu: e.subMenu,
+                  translateKey: e.translateKey
+                }),
+                children: /* @__PURE__ */ t("div", { className: "text-2xl", children: s[e.icon] })
+              }
+            ) : /* @__PURE__ */ t(
+              a,
+              {
+                to: e.path,
+                className: "flex h-full w-full items-center",
+                onClick: () => E({
+                  key: e.key
+                }),
+                children: /* @__PURE__ */ t(
+                  l.MenuItem,
+                  {
+                    eventKey: e.key,
+                    className: "mb-2",
+                    children: /* @__PURE__ */ t("div", { className: "text-2xl", children: s[e.icon] })
+                  }
+                )
+              }
+            ) })
+          },
+          e.key
+        ))
+      }
+    ) })
+  ] });
+};
+export {
+  Z as default
+};
+//# sourceMappingURL=StackedSideNavMini.js.map

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNavMini.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedSideNavMini.js","sources":["../../../../../../lib/@ecme/components/template/StackedSideNav/StackedSideNavMini.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport Logo from '@/components/template/Logo'\nimport Menu from '@/components/ui/Menu'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport AuthorityCheck from '@/components/shared/AuthorityCheck'\nimport {\n    SIDE_NAV_CONTENT_GUTTER,\n    HEADER_HEIGHT,\n} from '@/constants/theme.constant'\nimport { NAV_ITEM_TYPE_ITEM } from '@/constants/navigation.constant'\nimport appConfig from '@/configs/app.config'\nimport navigationIcon from '@/configs/navigation-icon.config'\nimport useMenuActive from '@/utils/hooks/useMenuActive'\nimport isEmpty from 'lodash/isEmpty'\nimport { Link } from 'react-router-dom'\nimport type { NavigationTree } from '@/@types/navigation'\nimport type { Direction, Mode } from '@/@types/theme'\nimport type { CommonProps } from '@/@types/common'\nimport { getLogoFilename } from '@base/utils/logo'\n\nexport type SelectedMenuItem = {\n    key?: string\n    title?: string\n    menu?: NavigationTree[]\n    translateKey?: string\n}\n\ninterface StackedSideNavMiniProps extends CommonProps {\n    className?: string\n    onChange: (item: SelectedMenuItem) => void\n    routeKey: string\n    activeKeys: string[]\n    onSetActiveKey: (activeKey: string[]) => void\n    userAuthority: string[]\n    mode: Mode\n    direction: Direction\n    navigationTree: NavigationTree[]\n    selectedMenu: SelectedMenuItem\n    t: (\n        key: string,\n        fallback?: string | Record<string, string | number>,\n    ) => string\n}\n\nconst StackedSideNavMini = (props: StackedSideNavMiniProps) => {\n    const {\n        onChange,\n        routeKey,\n        activeKeys,\n        onSetActiveKey,\n        direction,\n        navigationTree,\n        userAuthority,\n        mode,\n        selectedMenu,\n        t,\n        ...rest\n    } = props\n\n    const { includedRouteTree } = useMenuActive(navigationTree, routeKey)\n\n    const handleMenuItemSelect = ({\n        key,\n        title,\n        menu,\n        translateKey,\n    }: SelectedMenuItem) => {\n        onChange({ title, menu, translateKey })\n        onSetActiveKey([key as string])\n    }\n\n    const handleLinkMenuItemSelect = ({ key }: SelectedMenuItem) => {\n        onChange({})\n        onSetActiveKey([key as string])\n    }\n\n    useEffect(() => {\n        if (\n            includedRouteTree.type !== NAV_ITEM_TYPE_ITEM &&\n            !isEmpty(includedRouteTree)\n        ) {\n            onChange({\n                key: includedRouteTree.key,\n                title: includedRouteTree.title,\n                menu: includedRouteTree.subMenu,\n                translateKey: includedRouteTree.translateKey,\n            })\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [includedRouteTree.key])\n\n    const defaultActiveKeys =\n        activeKeys && activeKeys.length > 0\n            ? activeKeys\n            : isEmpty(selectedMenu)\n              ? []\n              : [includedRouteTree.key]\n\n    return (\n        <div {...rest}>\n            <Link\n                to={appConfig.authenticatedEntryPath}\n                className=\"stacked-mini-nav-header flex items-center justify-center\"\n                style={{ height: HEADER_HEIGHT }}\n            >\n                <Logo\n                    imgClass=\"max-h-8\"\n                    name={getLogoFilename(true, mode)}\n                    className={SIDE_NAV_CONTENT_GUTTER}\n                />\n            </Link>\n            <ScrollBar autoHide direction={direction}>\n                <Menu\n                    className=\"px-4 pb-4\"\n                    defaultActiveKeys={defaultActiveKeys}\n                >\n                    {navigationTree.map((nav) => (\n                        <AuthorityCheck\n                            key={nav.key}\n                            authority={nav.authority}\n                            userAuthority={userAuthority}\n                        >\n                            <div title={t(nav.translateKey, nav.title)}>\n                                {nav.subMenu && nav.subMenu.length > 0 ? (\n                                    <Menu.MenuItem\n                                        eventKey={nav.key}\n                                        className=\"mb-2\"\n                                        onSelect={() =>\n                                            handleMenuItemSelect({\n                                                key: nav.key,\n                                                title: nav.title,\n                                                menu: nav.subMenu,\n                                                translateKey: nav.translateKey,\n                                            })\n                                        }\n                                    >\n                                        <div className=\"text-2xl\">\n                                            {navigationIcon[nav.icon]}\n                                        </div>\n                                    </Menu.MenuItem>\n                                ) : (\n                                    <Link\n                                        to={nav.path}\n                                        className=\"flex h-full w-full items-center\"\n                                        onClick={() =>\n                                            handleLinkMenuItemSelect({\n                                                key: nav.key,\n                                            })\n                                        }\n                                    >\n                                        <Menu.MenuItem\n                                            eventKey={nav.key}\n                                            className=\"mb-2\"\n                                        >\n                                            <div className=\"text-2xl\">\n                                                {navigationIcon[nav.icon]}\n                                            </div>\n                                        </Menu.MenuItem>\n                                    </Link>\n                                )}\n                            </div>\n                        </AuthorityCheck>\n                    ))}\n                </Menu>\n            </ScrollBar>\n        </div>\n    )\n}\n\nexport default StackedSideNavMini\n"],"names":["StackedSideNavMini","props","onChange","routeKey","activeKeys","onSetActiveKey","direction","navigationTree","userAuthority","mode","selectedMenu","t","rest","includedRouteTree","useMenuActive","handleMenuItemSelect","key","title","menu","translateKey","handleLinkMenuItemSelect","useEffect","NAV_ITEM_TYPE_ITEM","isEmpty","defaultActiveKeys","jsxs","jsx","Link","appConfig","HEADER_HEIGHT","Logo","getLogoFilename","SIDE_NAV_CONTENT_GUTTER","ScrollBar","Menu","nav","AuthorityCheck","navigationIcon"],"mappings":"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"}

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNavSecondary.js

@@ -0,0 +1,60 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "../../ui/ScrollBar/index.js";
+import d from "../../../utils/classNames.js";
+import { DIR_LTR as f, DIR_RTL as h, HEADER_HEIGHT as N } from "../../../constants/theme.constant.js";
+import "../VerticalMenuContent/index.js";
+import { HiOutlineArrowSmLeft as S, HiOutlineArrowSmRight as y } from "react-icons/hi";
+import H from "../../ui/ScrollBar/ScrollBar.js";
+import R from "../VerticalMenuContent/VerticalMenuContent.js";
+const w = (o) => {
+  const {
+    className: i,
+    title: l,
+    menu: n,
+    routeKey: s,
+    onCollapse: a,
+    direction: t,
+    translationSetup: m,
+    userAuthority: c,
+    ...u
+  } = o, p = () => {
+    a();
+  };
+  return /* @__PURE__ */ r("div", { className: d("h-full", i), ...u, children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "flex items-center justify-between gap-4 pl-6 pr-4",
+        style: { height: N },
+        children: [
+          /* @__PURE__ */ e("h5", { className: "font-bold", children: l }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: "close-button",
+              onClick: p,
+              children: [
+                t === f && /* @__PURE__ */ e(S, {}),
+                t === h && /* @__PURE__ */ e(y, {})
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(H, { autoHide: !0, direction: t, children: /* @__PURE__ */ e(
+      R,
+      {
+        routeKey: s,
+        navigationTree: n,
+        translationSetup: m,
+        userAuthority: c
+      }
+    ) })
+  ] });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=StackedSideNavSecondary.js.map

package/dist/lib/@ecme/components/template/StackedSideNav/StackedSideNavSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedSideNavSecondary.js","sources":["../../../../../../lib/@ecme/components/template/StackedSideNav/StackedSideNavSecondary.tsx"],"sourcesContent":["import ScrollBar from '@/components/ui/ScrollBar'\nimport classNames from '@/utils/classNames'\nimport { HEADER_HEIGHT, DIR_LTR, DIR_RTL } from '@/constants/theme.constant'\nimport VerticalMenuContent from '@/components/template/VerticalMenuContent'\nimport { HiOutlineArrowSmLeft, HiOutlineArrowSmRight } from 'react-icons/hi'\nimport type { NavigationTree } from '@/@types/navigation'\nimport type { Direction } from '@/@types/theme'\n\ntype StackedSideNavSecondaryProps = {\n    className?: string\n    title: string\n    menu?: NavigationTree[]\n    routeKey: string\n    onCollapse: () => void\n    direction?: Direction\n    translationSetup?: boolean\n    userAuthority: string[]\n}\n\nconst StackedSideNavSecondary = (props: StackedSideNavSecondaryProps) => {\n    const {\n        className,\n        title,\n        menu,\n        routeKey,\n        onCollapse,\n        direction,\n        translationSetup,\n        userAuthority,\n        ...rest\n    } = props\n\n    const handleCollpase = () => {\n        onCollapse()\n    }\n\n    return (\n        <div className={classNames('h-full', className)} {...rest}>\n            <div\n                className={`flex items-center justify-between gap-4 pl-6 pr-4`}\n                style={{ height: HEADER_HEIGHT }}\n            >\n                <h5 className=\"font-bold\">{title}</h5>\n                <button\n                    type=\"button\"\n                    className=\"close-button\"\n                    onClick={handleCollpase}\n                >\n                    {direction === DIR_LTR && <HiOutlineArrowSmLeft />}\n                    {direction === DIR_RTL && <HiOutlineArrowSmRight />}\n                </button>\n            </div>\n            <ScrollBar autoHide direction={direction}>\n                <VerticalMenuContent\n                    routeKey={routeKey}\n                    navigationTree={menu}\n                    translationSetup={translationSetup}\n                    userAuthority={userAuthority}\n                />\n            </ScrollBar>\n        </div>\n    )\n}\n\nexport default StackedSideNavSecondary\n"],"names":["StackedSideNavSecondary","props","className","title","menu","routeKey","onCollapse","direction","translationSetup","userAuthority","rest","handleCollpase","jsxs","classNames","HEADER_HEIGHT","jsx","DIR_LTR","HiOutlineArrowSmLeft","DIR_RTL","HiOutlineArrowSmRight","ScrollBar","VerticalMenuContent"],"mappings":";;;;;;;;AAmBM,MAAAA,IAA0B,CAACC,MAAwC;AAC/D,QAAA;AAAA,IACF,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAiB,MAAM;AACd,IAAAL,EAAA;AAAA,EACf;AAGI,SAAA,gBAAAM,EAAC,SAAI,WAAWC,EAAW,UAAUX,CAAS,GAAI,GAAGQ,GACjD,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,QACX,OAAO,EAAE,QAAQE,EAAc;AAAA,QAE/B,UAAA;AAAA,UAAC,gBAAAC,EAAA,MAAA,EAAG,WAAU,aAAa,UAAMZ,GAAA;AAAA,UACjC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASD;AAAA,cAER,UAAA;AAAA,gBAAcJ,MAAAS,uBAAYC,GAAqB,CAAA,CAAA;AAAA,gBAC/CV,MAAcW,KAAW,gBAAAH,EAACI,GAAsB,CAAA,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACrD;AAAA,MAAA;AAAA,IACJ;AAAA,IACC,gBAAAJ,EAAAK,GAAA,EAAU,UAAQ,IAAC,WAAAb,GAChB,UAAA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,UAAAhB;AAAA,QACA,gBAAgBD;AAAA,QAChB,kBAAAI;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,IAAA,EAER,CAAA;AAAA,EAAA,GACJ;AAER;"}

package/dist/lib/@ecme/components/template/StackedSideNav/index.js

@@ -0,0 +1,5 @@
+import e from "./StackedSideNav.js";
+export {
+  e as default
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/@ecme/components/template/StackedSideNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/lib/@ecme/components/template/Theme.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../ui/ConfigProvider/index.js";
+import { themeConfig as m } from "../../configs/theme.config.js";
+import i from "../../utils/hooks/useDarkMode.js";
+import t from "../../utils/hooks/useThemeSchema.js";
+import f from "../../utils/hooks/useLocale.js";
+import p from "../../utils/hooks/useDirection.js";
+import c from "../ui/ConfigProvider/ConfigProvider.js";
+const v = (o) => {
+  t(), i(), p();
+  const { locale: r } = f();
+  return /* @__PURE__ */ e(
+    c,
+    {
+      value: {
+        locale: r,
+        ...m
+      },
+      children: o.children
+    }
+  );
+};
+export {
+  v as default
+};
+//# sourceMappingURL=Theme.js.map

package/dist/lib/@ecme/components/template/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sources":["../../../../../lib/@ecme/components/template/Theme.tsx"],"sourcesContent":["import ConfigProvider from '@/components/ui/ConfigProvider'\nimport { themeConfig } from '@/configs/theme.config'\nimport useDarkMode from '@/utils/hooks/useDarkMode'\nimport useThemeSchema from '@/utils/hooks/useThemeSchema'\nimport useLocale from '@/utils/hooks/useLocale'\nimport useDirection from '@/utils/hooks/useDirection'\nimport type { CommonProps } from '@/@types/common'\n\nconst Theme = (props: CommonProps) => {\n    useThemeSchema()\n    useDarkMode()\n    useDirection()\n\n    const { locale } = useLocale()\n\n    return (\n        <ConfigProvider\n            value={{\n                locale: locale,\n                ...themeConfig,\n            }}\n        >\n            {props.children}\n        </ConfigProvider>\n    )\n}\n\nexport default Theme\n"],"names":["Theme","props","useThemeSchema","useDarkMode","useDirection","locale","useLocale","jsx","ConfigProvider","themeConfig"],"mappings":";;;;;;;;AAQM,MAAAA,IAAQ,CAACC,MAAuB;AACnB,EAAAC,EAAA,GACHC,EAAA,GACCC,EAAA;AAEP,QAAA,EAAE,QAAAC,EAAO,IAAIC,EAAU;AAGzB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,QAAAH;AAAA,QACA,GAAGI;AAAA,MACP;AAAA,MAEC,UAAMR,EAAA;AAAA,IAAA;AAAA,EACX;AAER;"}

package/dist/lib/@ecme/components/template/ThemeConfigurator/CopyButton.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../ui/Notification/index.js";
+import "../../ui/Button/index.js";
+import "../../ui/toast/index.js";
+import { themeConfig as r } from "../../../configs/theme.config.js";
+import { useThemeStore as s } from "../../../store/themeStore.js";
+import { useTranslation as p } from "react-i18next";
+import a from "../../ui/toast/toast.js";
+import m from "../../ui/Notification/Notification.js";
+import l from "../../ui/Button/Button.js";
+const v = () => {
+  const o = s((t) => t), i = () => {
+    const t = {
+      ...r,
+      ...o,
+      layout: {
+        type: o.layout.type,
+        sideNavCollapse: o.layout.sideNavCollapse
+      },
+      panelExpand: !1
+    };
+    navigator.clipboard.writeText(`
+            
+export const themeConfig: ThemeConfig = ${JSON.stringify(t, null, 2)}
+`), a.push(
+      /* @__PURE__ */ e(m, { title: "Copy Success", type: "success", children: "Please replace themeConfig in 'src/configs/theme.config.ts'" }),
+      {
+        placement: "top-center"
+      }
+    );
+  }, { t: n } = p();
+  return /* @__PURE__ */ e(l, { block: !0, variant: "solid", onClick: i, children: n("base.layout.themeConfig.buttons.copyConfig") });
+};
+export {
+  v as default
+};
+//# sourceMappingURL=CopyButton.js.map

package/dist/lib/@ecme/components/template/ThemeConfigurator/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sources":["../../../../../../lib/@ecme/components/template/ThemeConfigurator/CopyButton.tsx"],"sourcesContent":["import Notification from '@/components/ui/Notification'\nimport Button from '@/components/ui/Button'\nimport toast from '@/components/ui/toast'\nimport { themeConfig } from '@/configs/theme.config'\nimport { useThemeStore } from '@/store/themeStore'\nimport { useTranslation } from 'react-i18next'\n\nconst CopyButton = () => {\n    const theme = useThemeStore((state) => state)\n\n    const handleCopy = () => {\n        const config = {\n            ...themeConfig,\n            ...theme,\n            layout: {\n                type: theme.layout.type,\n                sideNavCollapse: theme.layout.sideNavCollapse,\n            },\n            panelExpand: false,\n        }\n\n        navigator.clipboard.writeText(`\n            \nexport const themeConfig: ThemeConfig = ${JSON.stringify(config, null, 2)}\n`)\n\n        toast.push(\n            <Notification title=\"Copy Success\" type=\"success\">\n                {`Please replace themeConfig in 'src/configs/theme.config.ts'`}\n            </Notification>,\n            {\n                placement: 'top-center',\n            },\n        )\n    }\n\n    const { t } = useTranslation()\n\n    return (\n        <Button block variant=\"solid\" onClick={handleCopy}>\n            {t('base.layout.themeConfig.buttons.copyConfig')}\n        </Button>\n    )\n}\n\nexport default CopyButton\n"],"names":["CopyButton","theme","useThemeStore","state","handleCopy","config","themeConfig","toast","Notification","t","useTranslation","jsx","Button"],"mappings":";;;;;;;;;;AAOA,MAAMA,IAAa,MAAM;AACrB,QAAMC,IAAQC,EAAc,CAACC,MAAUA,CAAK,GAEtCC,IAAa,MAAM;AACrB,UAAMC,IAAS;AAAA,MACX,GAAGC;AAAA,MACH,GAAGL;AAAA,MACH,QAAQ;AAAA,QACJ,MAAMA,EAAM,OAAO;AAAA,QACnB,iBAAiBA,EAAM,OAAO;AAAA,MAClC;AAAA,MACA,aAAa;AAAA,IACjB;AAEA,cAAU,UAAU,UAAU;AAAA;AAAA,0CAEI,KAAK,UAAUI,GAAQ,MAAM,CAAC,CAAC;AAAA,CACxE,GAEaE,EAAA;AAAA,wBACDC,GAAa,EAAA,OAAM,gBAAe,MAAK,WACnC,UACL,+DAAA;AAAA,MACA;AAAA,QACI,WAAW;AAAA,MAAA;AAAA,IAEnB;AAAA,EACJ,GAEM,EAAE,GAAAC,EAAE,IAAIC,EAAe;AAGzB,SAAA,gBAAAC,EAACC,GAAO,EAAA,OAAK,IAAC,SAAQ,SAAQ,SAASR,GAClC,UAAEK,EAAA,4CAA4C,EACnD,CAAA;AAER;"}

package/dist/lib/@ecme/components/template/ThemeConfigurator/DirectionSwitcher.js

@@ -0,0 +1,29 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../ui/Button/index.js";
+import { InputGroup as u } from "../../ui/InputGroup/index.js";
+import p from "../../../utils/hooks/useDirection.js";
+import { THEME_ENUM as o } from "../../../constants/theme.constant.js";
+import s from "../../ui/Button/Button.js";
+const f = [
+  { value: o.DIR_LTR, label: "LTR" },
+  { value: o.DIR_RTL, label: "RTL" }
+], T = ({
+  callBackClose: r
+}) => {
+  const [e, n] = p(), m = (t) => {
+    n(t), r == null || r();
+  };
+  return /* @__PURE__ */ i(u, { size: "sm", children: f.map((t) => /* @__PURE__ */ i(
+    s,
+    {
+      active: e === t.value,
+      onClick: () => m(t.value),
+      children: t.label
+    },
+    t.value
+  )) });
+};
+export {
+  T as default
+};
+//# sourceMappingURL=DirectionSwitcher.js.map

package/dist/lib/@ecme/components/template/ThemeConfigurator/DirectionSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionSwitcher.js","sources":["../../../../../../lib/@ecme/components/template/ThemeConfigurator/DirectionSwitcher.tsx"],"sourcesContent":["import Button from '@/components/ui/Button'\nimport InputGroup from '@/components/ui/InputGroup'\nimport useDirection from '@/utils/hooks/useDirection'\nimport { THEME_ENUM } from '@/constants/theme.constant'\nimport type { Direction } from '@/@types/theme'\n\nconst dirList = [\n    { value: THEME_ENUM.DIR_LTR, label: 'LTR' },\n    { value: THEME_ENUM.DIR_RTL, label: 'RTL' },\n]\n\nconst DirectionSwitcher = ({\n    callBackClose,\n}: {\n    callBackClose?: () => void\n}) => {\n    const [direction, setDirection] = useDirection()\n\n    const onDirChange = (val: Direction) => {\n        setDirection(val)\n        callBackClose?.()\n    }\n\n    return (\n        <InputGroup size=\"sm\">\n            {dirList.map((dir) => (\n                <Button\n                    key={dir.value}\n                    active={direction === dir.value}\n                    onClick={() => onDirChange(dir.value)}\n                >\n                    {dir.label}\n                </Button>\n            ))}\n        </InputGroup>\n    )\n}\n\nexport default DirectionSwitcher\n"],"names":["dirList","THEME_ENUM","DirectionSwitcher","callBackClose","direction","setDirection","useDirection","onDirChange","val","InputGroup","dir","jsx","Button"],"mappings":";;;;;;AAMA,MAAMA,IAAU;AAAA,EACZ,EAAE,OAAOC,EAAW,SAAS,OAAO,MAAM;AAAA,EAC1C,EAAE,OAAOA,EAAW,SAAS,OAAO,MAAM;AAC9C,GAEMC,IAAoB,CAAC;AAAA,EACvB,eAAAC;AACJ,MAEM;AACF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAa,GAEzCC,IAAc,CAACC,MAAmB;AACpC,IAAAH,EAAaG,CAAG,GACAL,KAAA,QAAAA;AAAA,EACpB;AAEA,2BACKM,GAAW,EAAA,MAAK,MACZ,UAAQT,EAAA,IAAI,CAACU,MACV,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEG,QAAQR,MAAcM,EAAI;AAAA,MAC1B,SAAS,MAAMH,EAAYG,EAAI,KAAK;AAAA,MAEnC,UAAIA,EAAA;AAAA,IAAA;AAAA,IAJAA,EAAI;AAAA,EAMhB,CAAA,GACL;AAER;"}

package/dist/lib/@ecme/components/template/ThemeConfigurator/LayoutSwitcher.js

@@ -0,0 +1,91 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import d from "classnames";
+import { Segment as s } from "../../ui/Segment/index.js";
+import { useThemeStore as o } from "../../../store/themeStore.js";
+import { LAYOUT_COLLAPSIBLE_SIDE as n, LAYOUT_STACKED_SIDE as h, LAYOUT_TOP_BAR_CLASSIC as c, LAYOUT_FRAMELESS_SIDE as p, LAYOUT_CONTENT_OVERLAY as b, LAYOUT_BLANK as y } from "../../../constants/theme.constant.js";
+import v from "../../../assets/svg/CollapsibleSideSvg.js";
+import k from "../../../assets/svg/StackedSideSvg.js";
+import S from "../../../assets/svg/TopBarClassicSvg.js";
+import f from "../../../assets/svg/FrameLessSideSvg.js";
+import L from "../../../assets/svg/ContentOverlaySvg.js";
+import C from "../../../assets/svg/BlankSvg.js";
+import { useTranslation as j } from "react-i18next";
+import { useMemo as T } from "react";
+const R = () => {
+  const r = o((t) => t.layout), l = o((t) => t.setLayout), { t: a } = j(), i = T(
+    () => [
+      {
+        value: n,
+        label: a("base.layout.themeConfig.options.layoutCollapsible"),
+        src: "/img/thumbs/layouts/classic.jpg",
+        srcDark: "/img/thumbs/layouts/classic-dark.jpg",
+        svg: /* @__PURE__ */ e(v, { height: "100%", width: "100%" })
+      },
+      {
+        value: h,
+        label: a("base.layout.themeConfig.options.layoutStacked"),
+        src: "/img/thumbs/layouts/modern.jpg",
+        srcDark: "/img/thumbs/layouts/modern-dark.jpg",
+        svg: /* @__PURE__ */ e(k, { height: "100%", width: "100%" })
+      },
+      {
+        value: c,
+        label: a("base.layout.themeConfig.options.layoutTopbar"),
+        src: "/img/thumbs/layouts/stackedSide.jpg",
+        srcDark: "/img/thumbs/layouts/stackedSide-dark.jpg",
+        svg: /* @__PURE__ */ e(S, { height: "100%", width: "100%" })
+      },
+      {
+        value: p,
+        label: a("base.layout.themeConfig.options.layoutFrameless"),
+        src: "/img/thumbs/layouts/simple.jpg",
+        srcDark: "/img/thumbs/layouts/simple-dark.jpg",
+        svg: /* @__PURE__ */ e(f, { height: "100%", width: "100%" })
+      },
+      {
+        value: b,
+        label: a("base.layout.themeConfig.options.layoutOverlay"),
+        src: "/img/thumbs/layouts/decked.jpg",
+        srcDark: "/img/thumbs/layouts/decked-dark.jpg",
+        svg: /* @__PURE__ */ e(L, { height: "100%", width: "100%" })
+      },
+      {
+        value: y,
+        label: a("base.layout.themeConfig.options.layoutBlank"),
+        src: "/img/thumbs/layouts/blank.jpg",
+        srcDark: "/img/thumbs/layouts/blank-dark.jpg",
+        svg: /* @__PURE__ */ e(C, { height: "100%", width: "100%" })
+      }
+    ],
+    [a]
+  );
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+    s,
+    {
+      className: "w-full bg-transparent p-0 dark:bg-transparent",
+      value: [],
+      onChange: (t) => l(t),
+      children: /* @__PURE__ */ e("div", { className: "grid w-full grid-cols-3 gap-4", children: i.map((t) => /* @__PURE__ */ e(s.Item, { value: t.value, children: ({ onSegmentItemClick: m }) => {
+        const u = r.type === t.value;
+        return /* @__PURE__ */ g("div", { className: "text-center", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: d(
+                "border-2 rounded-xl overflow-hidden",
+                u ? "border-primary dark:border-primary" : "border-gray-200 dark:border-gray-700"
+              ),
+              onClick: m,
+              children: t.svg
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "mt-2 font-semibold", children: t.label })
+        ] });
+      } }, t.value)) })
+    }
+  ) });
+};
+export {
+  R as default
+};
+//# sourceMappingURL=LayoutSwitcher.js.map

package/dist/lib/@ecme/components/template/ThemeConfigurator/LayoutSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSwitcher.js","sources":["../../../../../../lib/@ecme/components/template/ThemeConfigurator/LayoutSwitcher.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport Segment from '@/components/ui/Segment'\nimport { useThemeStore } from '@/store/themeStore'\nimport {\n    LAYOUT_COLLAPSIBLE_SIDE,\n    LAYOUT_STACKED_SIDE,\n    LAYOUT_TOP_BAR_CLASSIC,\n    LAYOUT_FRAMELESS_SIDE,\n    LAYOUT_CONTENT_OVERLAY,\n    LAYOUT_BLANK,\n} from '@/constants/theme.constant'\nimport CollapsibleSideSvg from '@/assets/svg/CollapsibleSideSvg'\nimport StackedSideSvg from '@/assets/svg/StackedSideSvg'\nimport TopBarClassicSvg from '@/assets/svg/TopBarClassicSvg'\nimport FrameLessSideSvg from '@/assets/svg/FrameLessSideSvg'\nimport ContentOverlaySvg from '@/assets/svg/ContentOverlaySvg'\nimport BlankSvg from '@/assets/svg/BlankSvg'\nimport type { LayoutType } from '@/@types/theme'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\n\nconst LayoutSwitcher = () => {\n    const themeLayout = useThemeStore((state) => state.layout)\n    const setLayout = useThemeStore((state) => state.setLayout)\n\n    const { t } = useTranslation()\n\n    const layouts = useMemo(\n        () => [\n            {\n                value: LAYOUT_COLLAPSIBLE_SIDE,\n                label: t('base.layout.themeConfig.options.layoutCollapsible'),\n                src: '/img/thumbs/layouts/classic.jpg',\n                srcDark: '/img/thumbs/layouts/classic-dark.jpg',\n                svg: <CollapsibleSideSvg height={'100%'} width={'100%'} />,\n            },\n            {\n                value: LAYOUT_STACKED_SIDE,\n                label: t('base.layout.themeConfig.options.layoutStacked'),\n                src: '/img/thumbs/layouts/modern.jpg',\n                srcDark: '/img/thumbs/layouts/modern-dark.jpg',\n                svg: <StackedSideSvg height={'100%'} width={'100%'} />,\n            },\n            {\n                value: LAYOUT_TOP_BAR_CLASSIC,\n                label: t('base.layout.themeConfig.options.layoutTopbar'),\n                src: '/img/thumbs/layouts/stackedSide.jpg',\n                srcDark: '/img/thumbs/layouts/stackedSide-dark.jpg',\n                svg: <TopBarClassicSvg height={'100%'} width={'100%'} />,\n            },\n            {\n                value: LAYOUT_FRAMELESS_SIDE,\n                label: t('base.layout.themeConfig.options.layoutFrameless'),\n                src: '/img/thumbs/layouts/simple.jpg',\n                srcDark: '/img/thumbs/layouts/simple-dark.jpg',\n                svg: <FrameLessSideSvg height={'100%'} width={'100%'} />,\n            },\n            {\n                value: LAYOUT_CONTENT_OVERLAY,\n                label: t('base.layout.themeConfig.options.layoutOverlay'),\n                src: '/img/thumbs/layouts/decked.jpg',\n                srcDark: '/img/thumbs/layouts/decked-dark.jpg',\n                svg: <ContentOverlaySvg height={'100%'} width={'100%'} />,\n            },\n            {\n                value: LAYOUT_BLANK,\n                label: t('base.layout.themeConfig.options.layoutBlank'),\n                src: '/img/thumbs/layouts/blank.jpg',\n                srcDark: '/img/thumbs/layouts/blank-dark.jpg',\n                svg: <BlankSvg height={'100%'} width={'100%'} />,\n            },\n        ],\n        [t],\n    )\n\n    return (\n        <div>\n            <Segment\n                className=\"w-full bg-transparent p-0 dark:bg-transparent\"\n                value={[]}\n                onChange={(val) => setLayout(val as LayoutType)}\n            >\n                <div className=\"grid w-full grid-cols-3 gap-4\">\n                    {layouts.map((layout) => (\n                        <Segment.Item key={layout.value} value={layout.value}>\n                            {({ onSegmentItemClick }) => {\n                                const active = themeLayout.type === layout.value\n                                return (\n                                    <div className=\"text-center\">\n                                        <button\n                                            className={classNames(\n                                                'border-2 rounded-xl overflow-hidden',\n                                                active\n                                                    ? 'border-primary dark:border-primary'\n                                                    : 'border-gray-200 dark:border-gray-700',\n                                            )}\n                                            onClick={onSegmentItemClick}\n                                        >\n                                            {layout.svg}\n                                        </button>\n                                        <div className=\"mt-2 font-semibold\">\n                                            {layout.label}\n                                        </div>\n                                    </div>\n                                )\n                            }}\n                        </Segment.Item>\n                    ))}\n                </div>\n            </Segment>\n        </div>\n    )\n}\n\nexport default LayoutSwitcher\n"],"names":["LayoutSwitcher","themeLayout","useThemeStore","state","setLayout","t","useTranslation","layouts","useMemo","LAYOUT_COLLAPSIBLE_SIDE","jsx","CollapsibleSideSvg","LAYOUT_STACKED_SIDE","StackedSideSvg","LAYOUT_TOP_BAR_CLASSIC","TopBarClassicSvg","LAYOUT_FRAMELESS_SIDE","FrameLessSideSvg","LAYOUT_CONTENT_OVERLAY","ContentOverlaySvg","LAYOUT_BLANK","BlankSvg","Segment","val","layout","onSegmentItemClick","active","jsxs","classNames"],"mappings":";;;;;;;;;;;;;AAqBA,MAAMA,IAAiB,MAAM;AACzB,QAAMC,IAAcC,EAAc,CAACC,MAAUA,EAAM,MAAM,GACnDC,IAAYF,EAAc,CAACC,MAAUA,EAAM,SAAS,GAEpD,EAAE,GAAAE,EAAE,IAAIC,EAAe,GAEvBC,IAAUC;AAAA,IACZ,MAAM;AAAA,MACF;AAAA,QACI,OAAOC;AAAA,QACP,OAAOJ,EAAE,mDAAmD;AAAA,QAC5D,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAC,GAAA,EAAmB,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MAC5D;AAAA,MACA;AAAA,QACI,OAAOC;AAAA,QACP,OAAOP,EAAE,+CAA+C;AAAA,QACxD,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAG,GAAA,EAAe,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MACxD;AAAA,MACA;AAAA,QACI,OAAOC;AAAA,QACP,OAAOT,EAAE,8CAA8C;AAAA,QACvD,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAK,GAAA,EAAiB,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MAC1D;AAAA,MACA;AAAA,QACI,OAAOC;AAAA,QACP,OAAOX,EAAE,iDAAiD;AAAA,QAC1D,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAO,GAAA,EAAiB,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MAC1D;AAAA,MACA;AAAA,QACI,OAAOC;AAAA,QACP,OAAOb,EAAE,+CAA+C;AAAA,QACxD,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAS,GAAA,EAAkB,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MAC3D;AAAA,MACA;AAAA,QACI,OAAOC;AAAA,QACP,OAAOf,EAAE,6CAA6C;AAAA,QACtD,KAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAM,gBAAAK,EAAAW,GAAA,EAAS,QAAQ,QAAQ,OAAO,OAAQ,CAAA;AAAA,MAAA;AAAA,IAEtD;AAAA,IACA,CAAChB,CAAC;AAAA,EACN;AAEA,2BACK,OACG,EAAA,UAAA,gBAAAK;AAAA,IAACY;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO,CAAC;AAAA,MACR,UAAU,CAACC,MAAQnB,EAAUmB,CAAiB;AAAA,MAE9C,4BAAC,OAAI,EAAA,WAAU,iCACV,UAAQhB,EAAA,IAAI,CAACiB,MACV,gBAAAd,EAACY,EAAQ,MAAR,EAAgC,OAAOE,EAAO,OAC1C,UAAC,CAAA,EAAE,oBAAAC,QAAyB;AACnB,cAAAC,IAASzB,EAAY,SAASuB,EAAO;AAEvC,eAAA,gBAAAG,EAAC,OAAI,EAAA,WAAU,eACX,UAAA;AAAA,UAAA,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWkB;AAAA,gBACP;AAAA,gBACAF,IACM,uCACA;AAAA,cACV;AAAA,cACA,SAASD;AAAA,cAER,UAAOD,EAAA;AAAA,YAAA;AAAA,UACZ;AAAA,UACC,gBAAAd,EAAA,OAAA,EAAI,WAAU,sBACV,YAAO,MACZ,CAAA;AAAA,QAAA,GACJ;AAAA,MAAA,KAnBOc,EAAO,KAsB1B,CACH,EACL,CAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/lib/@ecme/components/template/ThemeConfigurator/ModeSwitcher.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import s from "../../../utils/hooks/useDarkMode.js";
+import "../../ui/Switcher/index.js";
+import c from "../../ui/Switcher/Switcher.js";
+const k = () => {
+  const [e, o] = s(), i = a(
+    (r) => {
+      o(r ? "dark" : "light");
+    },
+    [o]
+  );
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    c,
+    {
+      defaultChecked: e,
+      onChange: (r) => i(r)
+    }
+  ) });
+};
+export {
+  k as default
+};
+//# sourceMappingURL=ModeSwitcher.js.map

package/dist/lib/@ecme/components/template/ThemeConfigurator/ModeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSwitcher.js","sources":["../../../../../../lib/@ecme/components/template/ThemeConfigurator/ModeSwitcher.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport useDarkMode from '@/utils/hooks/useDarkMode'\nimport Switcher from '@/components/ui/Switcher'\n\nconst ModeSwitcher = () => {\n    const [isDark, setIsDark] = useDarkMode()\n\n    const onSwitchChange = useCallback(\n        (checked: boolean) => {\n            setIsDark(checked ? 'dark' : 'light')\n        },\n        [setIsDark],\n    )\n\n    return (\n        <div>\n            <Switcher\n                defaultChecked={isDark}\n                onChange={(checked) => onSwitchChange(checked)}\n            />\n        </div>\n    )\n}\n\nexport default ModeSwitcher\n"],"names":["ModeSwitcher","isDark","setIsDark","useDarkMode","onSwitchChange","useCallback","checked","jsx","Switcher"],"mappings":";;;;;AAIA,MAAMA,IAAe,MAAM;AACvB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAY,GAElCC,IAAiBC;AAAA,IACnB,CAACC,MAAqB;AACR,MAAAJ,EAAAI,IAAU,SAAS,OAAO;AAAA,IACxC;AAAA,IACA,CAACJ,CAAS;AAAA,EACd;AAEA,2BACK,OACG,EAAA,UAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,gBAAgBP;AAAA,MAChB,UAAU,CAACK,MAAYF,EAAeE,CAAO;AAAA,IAAA;AAAA,EAAA,GAErD;AAER;"}

package/dist/lib/@ecme/components/template/ThemeConfigurator/ThemeConfigurator.js

@@ -0,0 +1,41 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import r from "./ModeSwitcher.js";
+import n from "./LayoutSwitcher.js";
+import s from "./ThemeSwitcher.js";
+import l from "./DirectionSwitcher.js";
+import a from "./CopyButton.js";
+import { useTranslation as c } from "react-i18next";
+const b = ({ callBackClose: t }) => {
+  const { t: o } = c();
+  return /* @__PURE__ */ i("div", { className: "flex h-full flex-col justify-between", children: [
+    /* @__PURE__ */ i("div", { className: "mb-6 flex flex-col gap-y-10", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ e("h6", { children: o("base.layout.themeConfig.options.darkMode") }),
+          /* @__PURE__ */ e("span", { children: o("base.layout.themeConfig.options.darkModeDesc") })
+        ] }),
+        /* @__PURE__ */ e(r, {})
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ e("h6", { children: o("base.layout.themeConfig.options.direction") }),
+          /* @__PURE__ */ e("span", { children: o("base.layout.themeConfig.options.directionDesc") })
+        ] }),
+        /* @__PURE__ */ e(l, { callBackClose: t })
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e("h6", { className: "mb-3", children: o("base.layout.themeConfig.options.theme") }),
+        /* @__PURE__ */ e(s, {})
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e("h6", { className: "mb-3", children: o("base.layout.themeConfig.options.layout") }),
+        /* @__PURE__ */ e(n, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ e(a, {})
+  ] });
+};
+export {
+  b as default
+};
+//# sourceMappingURL=ThemeConfigurator.js.map

package/dist/lib/@ecme/components/template/ThemeConfigurator/ThemeConfigurator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeConfigurator.js","sources":["../../../../../../lib/@ecme/components/template/ThemeConfigurator/ThemeConfigurator.tsx"],"sourcesContent":["import ModeSwitcher from './ModeSwitcher'\nimport LayoutSwitcher from './LayoutSwitcher'\nimport ThemeSwitcher from './ThemeSwitcher'\nimport DirectionSwitcher from './DirectionSwitcher'\nimport CopyButton from './CopyButton'\nimport { useTranslation } from 'react-i18next'\n\nexport type ThemeConfiguratorProps = {\n    callBackClose?: () => void\n}\n\nconst ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {\n    const { t } = useTranslation()\n    \n    return (\n        <div className=\"flex h-full flex-col justify-between\">\n            <div className=\"mb-6 flex flex-col gap-y-10\">\n                <div className=\"flex items-center justify-between\">\n                    <div>\n                        <h6>{t('base.layout.themeConfig.options.darkMode')}</h6>\n                        <span>\n                            {t('base.layout.themeConfig.options.darkModeDesc')}\n                        </span>\n                    </div>\n                    <ModeSwitcher />\n                </div>\n                <div className=\"flex items-center justify-between\">\n                    <div>\n                        <h6>\n                            {t('base.layout.themeConfig.options.direction')}\n                        </h6>\n                        <span>\n                            {t('base.layout.themeConfig.options.directionDesc')}\n                        </span>\n                    </div>\n                    <DirectionSwitcher callBackClose={callBackClose} />\n                </div>\n                <div>\n                    <h6 className=\"mb-3\">\n                        {t('base.layout.themeConfig.options.theme')}\n                    </h6>\n                    <ThemeSwitcher />\n                </div>\n                <div>\n                    <h6 className=\"mb-3\">\n                        {t('base.layout.themeConfig.options.layout')}\n                    </h6>\n                    <LayoutSwitcher />\n                </div>\n            </div>\n            <CopyButton />\n        </div>\n    )\n}\n\nexport default ThemeConfigurator\n"],"names":["ThemeConfigurator","callBackClose","t","useTranslation","jsxs","jsx","ModeSwitcher","DirectionSwitcher","ThemeSwitcher","LayoutSwitcher","CopyButton"],"mappings":";;;;;;;AAWA,MAAMA,IAAoB,CAAC,EAAE,eAAAC,QAA4C;AAC/D,QAAA,EAAE,GAAAC,EAAE,IAAIC,EAAe;AAGzB,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,wCACX,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,qCACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,OACG,EAAA,UAAA;AAAA,UAAC,gBAAAC,EAAA,MAAA,EAAI,UAAEH,EAAA,0CAA0C,EAAE,CAAA;AAAA,UAClD,gBAAAG,EAAA,QAAA,EACI,UAAEH,EAAA,8CAA8C,EACrD,CAAA;AAAA,QAAA,GACJ;AAAA,0BACCI,GAAa,CAAA,CAAA;AAAA,MAAA,GAClB;AAAA,MACA,gBAAAF,EAAC,OAAI,EAAA,WAAU,qCACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,OACG,EAAA,UAAA;AAAA,UAAC,gBAAAC,EAAA,MAAA,EACI,UAAEH,EAAA,2CAA2C,EAClD,CAAA;AAAA,UACC,gBAAAG,EAAA,QAAA,EACI,UAAEH,EAAA,+CAA+C,EACtD,CAAA;AAAA,QAAA,GACJ;AAAA,QACA,gBAAAG,EAACE,KAAkB,eAAAN,EAA8B,CAAA;AAAA,MAAA,GACrD;AAAA,wBACC,OACG,EAAA,UAAA;AAAA,QAAA,gBAAAI,EAAC,MAAG,EAAA,WAAU,QACT,UAAAH,EAAE,uCAAuC,GAC9C;AAAA,0BACCM,GAAc,CAAA,CAAA;AAAA,MAAA,GACnB;AAAA,wBACC,OACG,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,MAAG,EAAA,WAAU,QACT,UAAAH,EAAE,wCAAwC,GAC/C;AAAA,0BACCO,GAAe,CAAA,CAAA;AAAA,MAAA,EACpB,CAAA;AAAA,IAAA,GACJ;AAAA,sBACCC,GAAW,CAAA,CAAA;AAAA,EAAA,GAChB;AAER;"}