spotlibs-components 0.1.14 → 0.1.16

package/dist/chunk-G2BF4U5I.mjs

@@ -0,0 +1,834 @@
+"use client";
+import { __objRest, __spreadValues, __spreadProps } from './chunk-YOSPWY5K.mjs';
+import { createContext, useState, useCallback, useEffect, useContext, useRef } from 'react';
+import BoxRaw from '@mui/material/Box';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { IconChevronDown, IconMenu2, IconUser, IconLogout, IconSettings, IconList, IconFileText, IconLayoutGrid, IconCircle } from '@tabler/icons-react';
+import IconButtonRaw from '@mui/material/IconButton';
+import MenuRaw from '@mui/material/Menu';
+import MenuItemRaw from '@mui/material/MenuItem';
+import TypographyRaw from '@mui/material/Typography';
+import CryptoJS from 'crypto-js';
+import AES from 'crypto-js/aes';
+
+var SidebarContext = createContext(void 0);
+function SidebarProvider({ children }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const toggleSidebar = useCallback(() => setIsExpanded((prev) => !prev), []);
+  const toggleMobileSidebar = useCallback(() => setIsMobileOpen((prev) => !prev), []);
+  const handleSetIsHovered = useCallback((hovered) => setIsHovered(hovered), []);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)");
+    const handleChange = (e) => {
+      if (e.matches) setIsMobileOpen(false);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    SidebarContext.Provider,
+    {
+      value: {
+        isExpanded,
+        isMobileOpen,
+        isHovered,
+        toggleSidebar,
+        toggleMobileSidebar,
+        setIsHovered: handleSetIsHovered
+      },
+      children
+    }
+  );
+}
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) throw new Error("useSidebar must be used within a SidebarProvider");
+  return context;
+}
+
+// src/components/atoms/colors/primitive/primitive.jsx
+var RAW_COLORS = {
+  neutral: {
+    50: "#FFFFFF",
+    100: "#F5F7FB",
+    200: "#E9EEF6",
+    300: "#E0E5EB",
+    400: "#B3BECC",
+    500: "#A3B1C1",
+    600: "#7B90A6",
+    700: "#465668",
+    900: "#181C21"
+  },
+  blue_cakrawala: {
+    100: "#EAF2FC",
+    200: "#E6EEFF",
+    300: "#83B2EE",
+    400: "#5999E8",
+    500: "#307FE2",
+    600: "#2666B5",
+    700: "#1D4C88",
+    800: "#0E2644",
+    900: "#0A192D"
+  },
+  blue_mentari: {
+    100: "#E5F3FB",
+    300: "#ADDBF2",
+    400: "#8CD0EE",
+    500: "#71C5E8",
+    600: "#5799B5",
+    700: "#3E7186",
+    900: "#132831"
+  },
+  blue_neon: {
+    100: "#F0FCFF",
+    300: "#CDF5FE",
+    400: "#9BEBFD",
+    500: "#14D1FB",
+    600: "#04B1D8",
+    700: "#0388A5",
+    900: "#025F73"
+  },
+  blue_sky: {
+    100: "#EBF8FF",
+    300: "#BDE7FF",
+    400: "#80D1FF",
+    500: "#15A9F4",
+    600: "#0A8BCD",
+    700: "#076A9C",
+    900: "#032436"
+  },
+  green: {
+    100: "#DEF7EA",
+    300: "#C9F3DB",
+    400: "#A1DDBB",
+    500: "#27AE60",
+    600: "#1E8549",
+    700: "#145C33",
+    900: "#0A2E19"
+  },
+  red: {
+    100: "#FDEDED",
+    300: "#F8C4C4",
+    400: "#F28D8D",
+    500: "#E84040",
+    600: "#DA1A1A",
+    700: "#AD1414",
+    900: "#320606"
+  },
+  yellow: {
+    100: "#FFF9EB",
+    300: "#FFEBBD",
+    400: "#FFD980",
+    500: "#FFBE26",
+    600: "#F0A800",
+    700: "#BD8400",
+    900: "#382700"
+  },
+  briva: {
+    100: "#EFFAFA",
+    300: "#CCF0F0",
+    400: "#9CE2E2",
+    500: "#58CFCF",
+    600: "#37BEBE",
+    700: "#2B9696",
+    900: "#0D2C2C"
+  },
+  brizzi: {
+    100: "#EBFFF8",
+    300: "#BEFDE8",
+    400: "#83FBD3",
+    500: "#05D78F",
+    600: "#04A46D",
+    700: "#03734D",
+    900: "#013724"
+  }
+};
+var PrimitiveColor = Object.entries(RAW_COLORS).reduce(
+  (acc, [category, values]) => {
+    Object.entries(values).forEach(([key, value]) => {
+      if (category === "neutral" || category === "blue_cakrawala" || category === "blue_mentari" || category === "blue_neon" || category === "blue_sky" || category === "green" || category === "red" || category === "yellow" || category === "briva" || category === "brizzi") {
+        acc[`color_${category}_${key}`] = value;
+        return;
+      }
+      acc[`color_${key}`] = value;
+    });
+    return acc;
+  },
+  {}
+);
+
+// src/components/atoms/colors/derived/derived.jsx
+var DerivedColor = {
+  /* ================= BACKGROUND ================= */
+  color_bg_page: PrimitiveColor.color_neutral_100,
+  color_bg_surface: PrimitiveColor.color_neutral_50,
+  color_bg_inverse: PrimitiveColor.color_neutral_900,
+  color_bg_disabled: PrimitiveColor.color_neutral_300,
+  color_bg_brand_primary_strong: PrimitiveColor.color_blue_cakrawala_600,
+  color_bg_brand_primary: PrimitiveColor.color_blue_cakrawala_500,
+  color_bg_brand_primary_subtle: PrimitiveColor.color_blue_cakrawala_100,
+  color_bg_brand_secondary_strong: PrimitiveColor.color_blue_mentari_600,
+  color_bg_brand_secondary: PrimitiveColor.color_blue_mentari_500,
+  color_bg_brand_secondary_subtle: PrimitiveColor.color_blue_mentari_100,
+  color_bg_success_strong: PrimitiveColor.color_green_600,
+  color_bg_success: PrimitiveColor.color_green_500,
+  color_bg_success_subtle: PrimitiveColor.color_green_300,
+  color_bg_danger_strong: PrimitiveColor.color_red_600,
+  color_bg_danger: PrimitiveColor.color_red_500,
+  color_bg_danger_subtle: PrimitiveColor.color_red_300,
+  color_bg_warning_strong: PrimitiveColor.color_yellow_600,
+  color_bg_warning: PrimitiveColor.color_yellow_500,
+  color_bg_warning_subtle: PrimitiveColor.color_yellow_300,
+  /* ================= BORDER ================= */
+  color_border_default: PrimitiveColor.color_neutral_300,
+  color_border_strong: PrimitiveColor.color_neutral_500,
+  color_border_inverse: PrimitiveColor.color_neutral_900,
+  color_border_brand_primary: PrimitiveColor.color_blue_cakrawala_500,
+  color_border_brand_secondary: PrimitiveColor.color_blue_mentari_500,
+  color_border_success: PrimitiveColor.color_green_500,
+  color_border_danger: PrimitiveColor.color_red_500,
+  color_border_warning: PrimitiveColor.color_yellow_500,
+  /* ================= TEXT ================= */
+  color_text_default: PrimitiveColor.color_neutral_900,
+  color_text_subtle: PrimitiveColor.color_neutral_700,
+  color_text_disabled: PrimitiveColor.color_neutral_600,
+  color_text_placeholder: PrimitiveColor.color_neutral_400,
+  color_text_inverse: PrimitiveColor.color_neutral_50,
+  color_text_brand_primary: PrimitiveColor.color_blue_cakrawala_500,
+  color_text_brand_secondary: PrimitiveColor.color_blue_mentari_500,
+  color_text_success: PrimitiveColor.color_green_500,
+  color_text_danger: PrimitiveColor.color_red_500,
+  color_text_warning: PrimitiveColor.color_yellow_600,
+  /* ================= ICON ================= */
+  color_icon_subtle: PrimitiveColor.color_neutral_600,
+  color_icon_strong: PrimitiveColor.color_neutral_700,
+  color_icon_disabled: PrimitiveColor.color_neutral_200,
+  color_icon_inverse: PrimitiveColor.color_neutral_50,
+  color_icon_brand_primary: PrimitiveColor.color_blue_cakrawala_500,
+  color_icon_brand_secondary: PrimitiveColor.color_blue_mentari_500,
+  color_icon_success: PrimitiveColor.color_green_500,
+  color_icon_danger: PrimitiveColor.color_red_500,
+  color_icon_warning: PrimitiveColor.color_yellow_600
+};
+var _a, _b;
+var Box = (_b = (_a = BoxRaw) == null ? void 0 : _a.default) != null ? _b : BoxRaw;
+var SpacingToken = {
+  spacing0: "0px",
+  spacing1: "4px",
+  spacing2: "8px",
+  spacing3: "12px",
+  spacing4: "16px",
+  spacing5: "20px",
+  spacing6: "24px",
+  spacing7: "28px",
+  spacing8: "32px",
+  spacing9: "36px",
+  spacing10: "40px"
+};
+var CONTENT_SPACING_TOKENS = {
+  spacing_1: {
+    mobile: "8px",
+    tablet: "16px",
+    web: "24px"
+  },
+  spacing_2: {
+    mobile: "16px",
+    tablet: "24px",
+    web: "32px"
+  },
+  spacing_3: {
+    mobile: "24px",
+    tablet: "32px",
+    web: "40px"
+  }
+};
+var resolveSpacingValue = (value, tokens) => {
+  var _a10;
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value === "string") return (_a10 = tokens[value]) != null ? _a10 : value;
+  return 0;
+};
+var Spacing = (_a10) => {
+  var _b10 = _a10, {
+    size = "spacing2",
+    axis = "vertical",
+    sx = {}
+  } = _b10, rest = __objRest(_b10, [
+    "size",
+    "axis",
+    "sx"
+  ]);
+  const value = resolveSpacingValue(size, SpacingToken);
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadValues({
+      "aria-hidden": true,
+      sx: __spreadValues(__spreadValues({}, axis === "vertical" ? { height: value } : { width: value, display: "inline-block" }), sx)
+    }, rest)
+  );
+};
+var ContentSpacing = (_a10) => {
+  var _b10 = _a10, {
+    size = "spacing_2",
+    breakpoint = "web",
+    children,
+    sx = {}
+  } = _b10, rest = __objRest(_b10, [
+    "size",
+    "breakpoint",
+    "children",
+    "sx"
+  ]);
+  var _a11;
+  const token = typeof size === "string" ? CONTENT_SPACING_TOKENS[size] : size;
+  if (!token) return null;
+  const value = (_a11 = token[breakpoint]) != null ? _a11 : token.web;
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({
+      sx: __spreadValues({
+        padding: value
+      }, sx)
+    }, rest), {
+      children
+    })
+  );
+};
+var spacing_default = Spacing;
+var _a2, _b2;
+var Box2 = (_b2 = (_a2 = BoxRaw) == null ? void 0 : _a2.default) != null ? _b2 : BoxRaw;
+var ICON_MAP = {
+  grid: IconLayoutGrid,
+  document: IconFileText,
+  list: IconList,
+  user: IconUser,
+  settings: IconSettings
+};
+function getIcon(name) {
+  return ICON_MAP[name] || IconCircle;
+}
+var SIDEBAR_WIDTH_EXPANDED = 290;
+var SIDEBAR_WIDTH_COLLAPSED = 90;
+function AppSidebar({
+  menuItems = [],
+  currentPath = "",
+  logoText = "BRIspot",
+  onNavigate
+}) {
+  const { isExpanded, isMobileOpen, isHovered, setIsHovered } = useSidebar();
+  const [openSubmenus, setOpenSubmenus] = useState({});
+  const [isDesktop, setIsDesktop] = useState(true);
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsDesktop(mq.matches);
+    const handler = (e) => setIsDesktop(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const isShowingLabels = isExpanded || isHovered || isMobileOpen;
+  const sidebarWidth = isShowingLabels ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED;
+  const isActive = useCallback((path) => path === currentPath, [currentPath]);
+  useEffect(() => {
+    const newOpen = {};
+    menuItems.forEach((item, index) => {
+      var _a10;
+      if ((_a10 = item.subItems) == null ? void 0 : _a10.some((sub) => isActive(sub.path))) {
+        newOpen[index] = true;
+      }
+    });
+    setOpenSubmenus(newOpen);
+  }, [currentPath, menuItems, isActive]);
+  const handleSubmenuToggle = (index) => {
+    setOpenSubmenus((prev) => __spreadProps(__spreadValues({}, prev), { [index]: !prev[index] }));
+  };
+  const handleNavigation = (e, path) => {
+    if (onNavigate) {
+      e.preventDefault();
+      onNavigate(path);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box2,
+    {
+      component: "aside",
+      onMouseEnter: () => !isExpanded && setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      sx: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        height: "100vh",
+        width: sidebarWidth,
+        backgroundColor: DerivedColor.color_bg_surface,
+        borderRight: `1px solid ${DerivedColor.color_border_default}`,
+        transition: "all 300ms ease-in-out",
+        zIndex: 50,
+        display: "flex",
+        flexDirection: "column",
+        overflowX: "hidden",
+        transform: isDesktop ? "translateX(0)" : isMobileOpen ? "translateX(0)" : "translateX(-100%)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box2,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              height: "64px",
+              px: SpacingToken.spacing5,
+              justifyContent: isShowingLabels ? "flex-start" : "center",
+              borderBottom: `1px solid ${DerivedColor.color_border_default}`
+            },
+            children: /* @__PURE__ */ jsx(
+              Box2,
+              {
+                component: "a",
+                href: "/",
+                onClick: (e) => handleNavigation(e, "/"),
+                sx: {
+                  textDecoration: "none",
+                  color: DerivedColor.color_text_brand_primary,
+                  fontWeight: 700,
+                  fontSize: "18px"
+                },
+                children: isShowingLabels ? logoText : logoText.charAt(0)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Box2, { sx: { flex: 1, overflowY: "auto", px: SpacingToken.spacing2, py: SpacingToken.spacing4 }, children: menuItems.map((item, index) => {
+          var _a10;
+          const Icon = getIcon(item.icon);
+          const hasSubItems = item.subItems && item.subItems.length > 0;
+          const isItemActive = item.path ? isActive(item.path) : (_a10 = item.subItems) == null ? void 0 : _a10.some((sub) => isActive(sub.path));
+          return /* @__PURE__ */ jsx(Box2, { sx: { mb: "4px" }, children: hasSubItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Box2,
+              {
+                component: "button",
+                onClick: () => handleSubmenuToggle(index),
+                sx: {
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: SpacingToken.spacing3,
+                  px: SpacingToken.spacing3,
+                  py: SpacingToken.spacing2,
+                  borderRadius: "8px",
+                  border: "none",
+                  cursor: "pointer",
+                  backgroundColor: isItemActive ? DerivedColor.color_bg_brand_primary_subtle : "transparent",
+                  color: isItemActive ? DerivedColor.color_text_brand_primary : DerivedColor.color_text_subtle,
+                  justifyContent: isShowingLabels ? "flex-start" : "center",
+                  transition: "background-color 200ms",
+                  "&:hover": {
+                    backgroundColor: isItemActive ? DerivedColor.color_bg_brand_primary_subtle : "rgba(0, 0, 0, 0.04)"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      size: 20,
+                      color: isItemActive ? DerivedColor.color_icon_brand_primary : DerivedColor.color_icon_subtle
+                    }
+                  ),
+                  isShowingLabels && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      Box2,
+                      {
+                        component: "span",
+                        sx: {
+                          flex: 1,
+                          textAlign: "left",
+                          fontSize: "14px",
+                          fontWeight: 500
+                        },
+                        children: item.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconChevronDown,
+                      {
+                        size: 16,
+                        style: {
+                          transition: "transform 200ms",
+                          transform: openSubmenus[index] ? "rotate(180deg)" : "rotate(0deg)"
+                        }
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SubMenu,
+              {
+                isOpen: isShowingLabels && !!openSubmenus[index],
+                subItems: item.subItems,
+                isActive,
+                onNavigate
+              }
+            )
+          ] }) : item.path && /* @__PURE__ */ jsxs(
+            Box2,
+            {
+              component: "a",
+              href: item.path,
+              onClick: (e) => handleNavigation(e, item.path),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: SpacingToken.spacing3,
+                px: SpacingToken.spacing3,
+                py: SpacingToken.spacing2,
+                borderRadius: "8px",
+                textDecoration: "none",
+                justifyContent: isShowingLabels ? "flex-start" : "center",
+                backgroundColor: isActive(item.path) ? DerivedColor.color_bg_brand_primary_subtle : "transparent",
+                color: isActive(item.path) ? DerivedColor.color_text_brand_primary : DerivedColor.color_text_subtle,
+                transition: "background-color 200ms",
+                "&:hover": {
+                  backgroundColor: isActive(item.path) ? DerivedColor.color_bg_brand_primary_subtle : "rgba(0, 0, 0, 0.04)"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    size: 20,
+                    color: isActive(item.path) ? DerivedColor.color_icon_brand_primary : DerivedColor.color_icon_subtle
+                  }
+                ),
+                isShowingLabels && /* @__PURE__ */ jsx(
+                  Box2,
+                  {
+                    component: "span",
+                    sx: { fontSize: "14px", fontWeight: 500 },
+                    children: item.name
+                  }
+                )
+              ]
+            }
+          ) }, `${item.name}-${index}`);
+        }) })
+      ]
+    }
+  );
+}
+function SubMenu({ isOpen, subItems, isActive, onNavigate }) {
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      setHeight(contentRef.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [isOpen, subItems]);
+  const handleNavigation = (e, path) => {
+    if (onNavigate) {
+      e.preventDefault();
+      onNavigate(path);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box2,
+    {
+      sx: {
+        overflow: "hidden",
+        transition: "height 300ms ease-in-out",
+        height: `${height}px`
+      },
+      children: /* @__PURE__ */ jsx(Box2, { ref: contentRef, sx: { pl: "44px", mt: "4px" }, children: subItems.map((subItem) => /* @__PURE__ */ jsx(
+        Box2,
+        {
+          component: "a",
+          href: subItem.path,
+          onClick: (e) => handleNavigation(e, subItem.path),
+          sx: {
+            display: "block",
+            px: SpacingToken.spacing3,
+            py: "6px",
+            borderRadius: "6px",
+            textDecoration: "none",
+            fontSize: "13px",
+            fontWeight: isActive(subItem.path) ? 500 : 400,
+            color: isActive(subItem.path) ? DerivedColor.color_text_brand_primary : DerivedColor.color_text_subtle,
+            "&:hover": {
+              color: DerivedColor.color_text_default
+            }
+          },
+          children: subItem.name
+        },
+        subItem.path
+      )) })
+    }
+  );
+}
+var _a3, _b3;
+var Box3 = (_b3 = (_a3 = BoxRaw) == null ? void 0 : _a3.default) != null ? _b3 : BoxRaw;
+var _a4, _b4;
+var IconButton = (_b4 = (_a4 = IconButtonRaw) == null ? void 0 : _a4.default) != null ? _b4 : IconButtonRaw;
+var _a5, _b5;
+var Menu = (_b5 = (_a5 = MenuRaw) == null ? void 0 : _a5.default) != null ? _b5 : MenuRaw;
+var _a6, _b6;
+var MenuItem = (_b6 = (_a6 = MenuItemRaw) == null ? void 0 : _a6.default) != null ? _b6 : MenuItemRaw;
+var _a7, _b7;
+var Typography = (_b7 = (_a7 = TypographyRaw) == null ? void 0 : _a7.default) != null ? _b7 : TypographyRaw;
+var SIDEBAR_WIDTH_EXPANDED2 = 290;
+var SIDEBAR_WIDTH_COLLAPSED2 = 90;
+function AppHeader({ username, fullname, logoSrc, onLogout, onNavigate }) {
+  const { isExpanded, isHovered, toggleSidebar, toggleMobileSidebar } = useSidebar();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsMobile(!mq.matches);
+    const handler = (e) => setIsMobile(!e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const handleToggle = () => {
+    if (window.innerWidth >= 1024) toggleSidebar();
+    else toggleMobileSidebar();
+  };
+  const handleLogout = () => {
+    setAnchorEl(null);
+    if (onLogout) onLogout();
+  };
+  const marginLeft = isMobile ? 0 : isExpanded || isHovered ? SIDEBAR_WIDTH_EXPANDED2 : SIDEBAR_WIDTH_COLLAPSED2;
+  return /* @__PURE__ */ jsx(
+    Box3,
+    {
+      component: "header",
+      sx: {
+        position: "sticky",
+        top: 0,
+        zIndex: 30,
+        display: "flex",
+        alignItems: "center",
+        height: "64px",
+        borderBottom: `1px solid ${DerivedColor.color_border_default}`,
+        backgroundColor: DerivedColor.color_bg_surface,
+        px: { xs: "16px", lg: "24px" },
+        transition: "margin-left 300ms",
+        marginLeft: `${marginLeft}px`
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box3,
+        {
+          sx: {
+            display: "flex",
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box3, { sx: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  onClick: handleToggle,
+                  sx: {
+                    border: `1px solid ${DerivedColor.color_border_default}`,
+                    borderRadius: "8px",
+                    width: 40,
+                    height: 40
+                  },
+                  children: /* @__PURE__ */ jsx(IconMenu2, { size: 20 })
+                }
+              ),
+              isMobile && logoSrc && /* @__PURE__ */ jsx(Box3, { component: "img", src: logoSrc, alt: "Logo", sx: { height: 32 } })
+            ] }),
+            /* @__PURE__ */ jsxs(Box3, { children: [
+              /* @__PURE__ */ jsxs(
+                IconButton,
+                {
+                  onClick: (e) => setAnchorEl(e.currentTarget),
+                  sx: { borderRadius: "8px", px: "12px", py: "8px", gap: "8px" },
+                  children: [
+                    /* @__PURE__ */ jsx(IconUser, { size: 20 }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        component: "span",
+                        sx: {
+                          display: { xs: "none", lg: "inline" },
+                          fontWeight: 500,
+                          fontSize: "14px",
+                          color: DerivedColor.color_text_default
+                        },
+                        children: fullname || username || "User"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Menu,
+                {
+                  anchorEl,
+                  open: Boolean(anchorEl),
+                  onClose: () => setAnchorEl(null),
+                  slotProps: { paper: { sx: { width: 220, mt: 1 } } },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Box3,
+                      {
+                        sx: {
+                          px: "16px",
+                          py: "8px",
+                          borderBottom: `1px solid ${DerivedColor.color_border_default}`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: 500 }, children: fullname || "User" }),
+                          username && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "12px", color: DerivedColor.color_text_subtle }, children: username })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(MenuItem, { onClick: handleLogout, sx: { gap: "8px" }, children: [
+                      /* @__PURE__ */ jsx(IconLogout, { size: 16 }),
+                      "Logout"
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+var _a8, _b8;
+var Box4 = (_b8 = (_a8 = BoxRaw) == null ? void 0 : _a8.default) != null ? _b8 : BoxRaw;
+function Backdrop({ onClick }) {
+  const { isMobileOpen, toggleMobileSidebar } = useSidebar();
+  const handleClick = useCallback(() => {
+    if (onClick) onClick();
+    else toggleMobileSidebar();
+  }, [onClick, toggleMobileSidebar]);
+  return /* @__PURE__ */ jsx(
+    Box4,
+    {
+      onClick: handleClick,
+      "aria-hidden": "true",
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 40,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        transition: "opacity 300ms",
+        opacity: isMobileOpen ? 1 : 0,
+        pointerEvents: isMobileOpen ? "auto" : "none",
+        display: { xs: "block", lg: "none" }
+      }
+    }
+  );
+}
+var _a9, _b9;
+var Box5 = (_b9 = (_a9 = BoxRaw) == null ? void 0 : _a9.default) != null ? _b9 : BoxRaw;
+var SIDEBAR_WIDTH_EXPANDED3 = 290;
+var SIDEBAR_WIDTH_COLLAPSED3 = 90;
+function LayoutShell({
+  menuItems = [],
+  username,
+  fullname,
+  currentPath = "",
+  excludedRoutes = ["/login", "/403"],
+  logoText = "BRIspot",
+  logoSrc,
+  onLogout,
+  onNavigate,
+  children
+}) {
+  const { isExpanded, isHovered } = useSidebar();
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsMobile(!mq.matches);
+    const handler = (e) => setIsMobile(!e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const isExcluded = excludedRoutes.some(
+    (route) => currentPath === route || currentPath.startsWith(`${route}/`)
+  );
+  if (isExcluded) return /* @__PURE__ */ jsx(Fragment, { children });
+  const marginLeft = isMobile ? 0 : isExpanded || isHovered ? SIDEBAR_WIDTH_EXPANDED3 : SIDEBAR_WIDTH_COLLAPSED3;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AppSidebar,
+      {
+        menuItems,
+        currentPath,
+        logoText,
+        onNavigate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppHeader,
+      {
+        username,
+        fullname,
+        logoSrc,
+        onLogout,
+        onNavigate
+      }
+    ),
+    /* @__PURE__ */ jsx(Backdrop, {}),
+    /* @__PURE__ */ jsx(
+      Box5,
+      {
+        component: "main",
+        sx: {
+          transition: "margin-left 300ms",
+          marginLeft: `${marginLeft}px`
+        },
+        children
+      }
+    )
+  ] });
+}
+function safeDecrypt(encryptedText, secretKey) {
+  try {
+    const bytes = AES.decrypt(encryptedText, secretKey);
+    const result = bytes.toString(CryptoJS.enc.Utf8);
+    return result || null;
+  } catch (e) {
+    return null;
+  }
+}
+function parseAccessMenu(encryptedValue, secretKey) {
+  if (!encryptedValue) return [];
+  const decrypted = safeDecrypt(encryptedValue, secretKey);
+  if (!decrypted) return [];
+  let raw;
+  try {
+    raw = JSON.parse(decrypted);
+  } catch (e) {
+    return [];
+  }
+  if (!(raw == null ? void 0 : raw.menu) || !Array.isArray(raw.menu)) return [];
+  return raw.menu.map((item) => {
+    var _a10;
+    const menuItem = { name: item.menu_name, icon: (_a10 = item.menu_icon) != null ? _a10 : "" };
+    if (item.menu_url) menuItem.path = item.menu_url;
+    if (item.sub_menu && Array.isArray(item.sub_menu)) {
+      menuItem.subItems = item.sub_menu.map((sub) => ({
+        name: sub.menu_name,
+        path: sub.menu_url,
+        icon: sub.menu_icon
+      }));
+    }
+    return menuItem;
+  });
+}
+
+export { AppHeader, AppSidebar, Backdrop, CONTENT_SPACING_TOKENS, ContentSpacing, DerivedColor, LayoutShell, PrimitiveColor, SidebarProvider, SpacingToken, parseAccessMenu, spacing_default, useSidebar };
+//# sourceMappingURL=chunk-G2BF4U5I.mjs.map
+//# sourceMappingURL=chunk-G2BF4U5I.mjs.map