@gofreego/tsutils 0.1.0

package/dist/index.js

@@ -0,0 +1,1178 @@
+'use strict';
+
+var react = require('react');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+var reactRouterDom = require('react-router-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var RouterMenuItem = ({ item, depth = 0, expanded, onToggle }) => {
+  const hasChildren = item.children && item.children.length > 0;
+  const isExpanded = expanded.has(item.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      material.ListItemButton,
+      {
+        component: hasChildren ? "div" : reactRouterDom.NavLink,
+        to: !hasChildren ? item.path || `/${item.id}` : void 0,
+        onClick: hasChildren ? () => onToggle(item.id) : void 0,
+        sx: {
+          pl: 2 + depth * 2,
+          "&.active": {
+            backgroundColor: "action.selected",
+            color: "primary.main",
+            borderLeft: 3,
+            borderColor: "primary.main",
+            fontWeight: "medium",
+            "& .MuiListItemIcon-root": {
+              color: "primary.main"
+            }
+          },
+          "&:hover": {
+            backgroundColor: "action.hover"
+          },
+          transition: "all 0.15s"
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { sx: { minWidth: 40 }, children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.ListItemText,
+            {
+              primary: item.label,
+              primaryTypographyProps: {
+                fontSize: "0.875rem"
+              }
+            }
+          ),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", sx: { p: 0 }, children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandLess, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}) })
+        ]
+      }
+    ) }),
+    hasChildren && /* @__PURE__ */ jsxRuntime.jsx(material.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { component: "div", disablePadding: true, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      RouterMenuItem,
+      {
+        item: child,
+        depth: depth + 1,
+        expanded,
+        onToggle
+      },
+      child.id
+    )) }) })
+  ] });
+};
+var flattenMenuRoutes = (items) => {
+  const routes = [];
+  const flatten = (menuItems) => {
+    for (const item of menuItems) {
+      if (item.path && item.component) {
+        routes.push({ path: item.path, component: item.component });
+      }
+      if (item.children) {
+        flatten(item.children);
+      }
+    }
+  };
+  flatten(items);
+  return routes;
+};
+var SidebarLayoutRouterInner = ({
+  menuItems,
+  sidebarWidth = 250,
+  className = "",
+  onMenuChange,
+  style,
+  sidebarStyle,
+  bodyStyle,
+  defaultExpanded = []
+}) => {
+  const location = reactRouterDom.useLocation();
+  const [expanded, setExpanded] = react.useState(new Set(defaultExpanded));
+  const handleToggle = (id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  react.useEffect(() => {
+    if (onMenuChange) {
+      const findActiveItem = (items) => {
+        for (const item of items) {
+          if (item.path && location.pathname === item.path) {
+            return item;
+          }
+          if (item.children) {
+            const found = findActiveItem(item.children);
+            if (found) return found;
+          }
+        }
+        return void 0;
+      };
+      const activeItem = findActiveItem(menuItems);
+      if (activeItem) {
+        onMenuChange(activeItem.id);
+      }
+    }
+  }, [location.pathname, menuItems, onMenuChange]);
+  const hasComponents = menuItems.some(
+    (item) => item.component || item.children?.some((child) => child.component)
+  );
+  const routes = hasComponents ? flattenMenuRoutes(menuItems) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        height: "100%",
+        width: "100%",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Drawer,
+          {
+            variant: "permanent",
+            sx: {
+              width: sidebarWidth,
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: sidebarWidth,
+                boxSizing: "border-box",
+                position: "relative",
+                borderRight: "1px solid",
+                borderColor: "divider",
+                ...sidebarStyle
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0 }, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              RouterMenuItem,
+              {
+                item,
+                expanded,
+                onToggle: handleToggle
+              },
+              item.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: "main",
+            sx: {
+              flexGrow: 1,
+              overflow: "auto",
+              ...bodyStyle
+            },
+            children: hasComponents ? /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: routes.map(({ path, component }) => /* @__PURE__ */ jsxRuntime.jsx(
+              reactRouterDom.Route,
+              {
+                path,
+                element: component
+              },
+              path
+            )) }) : /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var SidebarLayoutWithRouter = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarLayoutRouterInner, { ...props }) });
+};
+var StateMenuItem = ({ item, selectedId, depth = 0, expanded, onToggle, onClick }) => {
+  const hasChildren = item.children && item.children.length > 0;
+  const isExpanded = expanded.has(item.id);
+  const isActive = item.id === selectedId;
+  const handleClick = () => {
+    if (hasChildren) {
+      onToggle(item.id);
+    } else {
+      onClick(item.id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      material.ListItemButton,
+      {
+        selected: isActive,
+        onClick: handleClick,
+        sx: {
+          pl: 2 + depth * 2,
+          "&.Mui-selected": {
+            backgroundColor: "action.selected",
+            color: "primary.main",
+            borderLeft: 3,
+            borderColor: "primary.main",
+            fontWeight: "medium",
+            "& .MuiListItemIcon-root": {
+              color: "primary.main"
+            },
+            "&:hover": {
+              backgroundColor: "action.selected"
+            }
+          },
+          "&:hover": {
+            backgroundColor: "action.hover"
+          },
+          transition: "all 0.15s"
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { sx: { minWidth: 40 }, children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.ListItemText,
+            {
+              primary: item.label,
+              primaryTypographyProps: {
+                fontSize: "0.875rem"
+              }
+            }
+          ),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", sx: { p: 0 }, children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandLess, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, {}) })
+        ]
+      }
+    ) }),
+    hasChildren && /* @__PURE__ */ jsxRuntime.jsx(material.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { component: "div", disablePadding: true, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      StateMenuItem,
+      {
+        item: child,
+        selectedId,
+        depth: depth + 1,
+        expanded,
+        onToggle,
+        onClick
+      },
+      child.id
+    )) }) })
+  ] });
+};
+var SidebarLayoutWithState = ({
+  menuItems,
+  sidebarWidth = 250,
+  className = "",
+  defaultSelected,
+  onMenuChange,
+  style,
+  sidebarStyle,
+  bodyStyle,
+  defaultExpanded = []
+}) => {
+  const [selectedId, setSelectedId] = react.useState(
+    defaultSelected || menuItems[0]?.id
+  );
+  const [expanded, setExpanded] = react.useState(new Set(defaultExpanded));
+  const handleToggle = (id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  const handleMenuClick = (id) => {
+    setSelectedId(id);
+    if (onMenuChange) {
+      onMenuChange(id);
+    }
+  };
+  const findActiveItem = (items, id) => {
+    for (const item of items) {
+      if (item.id === id) return item;
+      if (item.children) {
+        const found = findActiveItem(item.children, id);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  };
+  const activeItem = findActiveItem(menuItems, selectedId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        height: "100%",
+        width: "100%",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Drawer,
+          {
+            variant: "permanent",
+            sx: {
+              width: sidebarWidth,
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: sidebarWidth,
+                boxSizing: "border-box",
+                position: "relative",
+                borderRight: "1px solid",
+                borderColor: "divider",
+                ...sidebarStyle
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0 }, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              StateMenuItem,
+              {
+                item,
+                selectedId,
+                expanded,
+                onToggle: handleToggle,
+                onClick: handleMenuClick
+              },
+              item.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: "main",
+            sx: {
+              flexGrow: 1,
+              overflow: "auto",
+              p: 3,
+              ...bodyStyle
+            },
+            children: activeItem?.component || /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "body2",
+                color: "text.secondary",
+                sx: { textAlign: "center", mt: 4 },
+                children: "No content available for this menu item"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var SidebarLayout = (props) => {
+  if (props.isRouter) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SidebarLayoutWithRouter, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarLayoutWithState, { ...props });
+};
+
+// src/theme/tokens.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  borderRadius: () => borderRadius,
+  elevation: () => elevation,
+  fontSize: () => fontSize,
+  fontWeight: () => fontWeight,
+  lineHeight: () => lineHeight,
+  spacing: () => spacing,
+  transition: () => transition,
+  zIndex: () => zIndex
+});
+var spacing = {
+  xs: "0.25rem",
+  // 4px
+  sm: "0.5rem",
+  // 8px
+  md: "1rem",
+  // 16px
+  lg: "1.5rem",
+  // 24px
+  xl: "2rem",
+  // 32px
+  "2xl": "3rem",
+  // 48px
+  "3xl": "4rem"
+  // 64px
+};
+var borderRadius = {
+  none: "0",
+  sm: "0.25rem",
+  // 4px
+  md: "0.375rem",
+  // 6px
+  lg: "0.5rem",
+  // 8px
+  xl: "0.75rem",
+  // 12px
+  "2xl": "1rem",
+  // 16px
+  full: "9999px"
+};
+var fontSize = {
+  xs: "0.75rem",
+  // 12px
+  sm: "0.875rem",
+  // 14px
+  md: "1rem",
+  // 16px
+  lg: "1.125rem",
+  // 18px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "1.875rem",
+  // 30px
+  "4xl": "2.25rem"
+  // 36px
+};
+var fontWeight = {
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var lineHeight = {
+  tight: "1.25",
+  normal: "1.5",
+  relaxed: "1.75"
+};
+var elevation = {
+  none: "none",
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+};
+var transition = {
+  fast: "150ms",
+  normal: "250ms",
+  slow: "350ms"
+};
+var zIndex = {
+  dropdown: 1e3,
+  sticky: 1020,
+  fixed: 1030,
+  modalBackdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070
+};
+
+// src/theme/light.ts
+var lightTheme = {
+  colors: {
+    // Primary - Vibrant Indigo (Works beautifully on light backgrounds)
+    primary: "#6366f1",
+    // Indigo 500
+    primaryHover: "#4f46e5",
+    // Indigo 600
+    primaryActive: "#4338ca",
+    // Indigo 700
+    // Secondary - Gray 600 (WCAG AAA compliant: 7.66:1 on white)
+    secondary: "#4b5563",
+    secondaryHover: "#374151",
+    secondaryActive: "#1f2937",
+    // Background colors
+    background: "#ffffff",
+    backgroundSecondary: "#f9fafb",
+    backgroundTertiary: "#f3f4f6",
+    // Surface colors (for cards, modals, etc.)
+    surface: "#ffffff",
+    surfaceHover: "#f9fafb",
+    // Text colors (WCAG AAA compliant)
+    text: "#111827",
+    // Gray 900 (16.26:1 on white)
+    textSecondary: "#4b5563",
+    // Gray 600 (7.66:1 on white)
+    textTertiary: "#6b7280",
+    // Gray 500 (4.92:1 on white - AA compliant)
+    textDisabled: "#9ca3af",
+    // Gray 400
+    // Semantic colors
+    error: "#dc2626",
+    // Red 600 (6.05:1 on white - AAA compliant)
+    errorHover: "#b91c1c",
+    errorBackground: "#fef2f2",
+    success: "#16a34a",
+    // Green 600 (5.15:1 on white - AAA compliant)
+    successHover: "#15803d",
+    successBackground: "#f0fdf4",
+    warning: "#d97706",
+    // Amber 600 (5.33:1 on white - AAA compliant)
+    warningHover: "#b45309",
+    warningBackground: "#fffbeb",
+    info: "#2563eb",
+    // Blue 600 (6.64:1 on white - AAA compliant)
+    infoHover: "#1d4ed8",
+    infoBackground: "#eff6ff",
+    // Border colors
+    border: "#e5e7eb",
+    // Gray 200
+    borderHover: "#d1d5db",
+    // Gray 300
+    borderFocus: "#6366f1",
+    // Primary
+    // Divider
+    divider: "#e5e7eb",
+    // Overlay (for modals, dropdowns)
+    overlay: "rgba(0, 0, 0, 0.5)"
+  },
+  spacing,
+  borderRadius,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  elevation,
+  transition,
+  zIndex
+};
+
+// src/theme/dark.ts
+var darkTheme = {
+  colors: {
+    // Primary - Vibrant Indigo (Striking on VSCode Black)
+    primary: "#818cf8",
+    // Indigo 400
+    primaryHover: "#6366f1",
+    // Indigo 500
+    primaryActive: "#4f46e5",
+    // Indigo 600
+    // Secondary - VSCode Gray
+    secondary: "#858585",
+    secondaryHover: "#a6a6a6",
+    secondaryActive: "#cccccc",
+    // Background colors
+    background: "#1e1e1e",
+    // Main editor/workspace background
+    backgroundSecondary: "#252526",
+    // Sidebar, panels
+    backgroundTertiary: "#2d2d2d",
+    // Highlights, smaller surfaces
+    // Surface colors (for cards, modals, etc.)
+    surface: "#252526",
+    surfaceHover: "#2a2d2e",
+    // Text colors
+    text: "#cccccc",
+    // Primary text
+    textSecondary: "#999999",
+    // Secondary text, comments
+    textTertiary: "#6b6b6b",
+    // Disabled/tertiary
+    textDisabled: "#4d4d4d",
+    // Disabled
+    // Semantic colors
+    error: "#f48771",
+    errorHover: "#fca5a5",
+    errorBackground: "#5a1d1d",
+    success: "#89d185",
+    successHover: "#86efac",
+    successBackground: "#1e401e",
+    warning: "#cca700",
+    warningHover: "#d7ba7d",
+    warningBackground: "#5c4d00",
+    info: "#75beff",
+    infoHover: "#9cdcfe",
+    infoBackground: "#0a3254",
+    // Border colors
+    border: "#3c3c3c",
+    // VSCode borders
+    borderHover: "#444444",
+    borderFocus: "#818cf8",
+    // Focus border
+    // Divider
+    divider: "#333333",
+    // Overlay (for modals, dropdowns)
+    overlay: "rgba(0, 0, 0, 0.4)"
+  },
+  spacing,
+  borderRadius,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  elevation,
+  transition,
+  zIndex
+};
+
+// src/utils/localStorage.ts
+var LocalStorage = class {
+  /**
+   * Get an item from localStorage
+   * @param key - The key to retrieve
+   * @returns The value or null if not found or error occurs
+   */
+  static getItem(key) {
+    try {
+      if (typeof window === "undefined") {
+        return null;
+      }
+      const item = window.localStorage.getItem(key);
+      if (item === null) {
+        return null;
+      }
+      try {
+        return JSON.parse(item);
+      } catch {
+        return item;
+      }
+    } catch (error) {
+      console.error(`Error getting item from localStorage: ${error}`);
+      return null;
+    }
+  }
+  /**
+   * Set an item in localStorage
+   * @param key - The key to store
+   * @param value - The value to store
+   * @returns true if successful, false otherwise
+   */
+  static setItem(key, value) {
+    try {
+      if (typeof window === "undefined") {
+        return false;
+      }
+      const serializedValue = typeof value === "string" ? value : JSON.stringify(value);
+      window.localStorage.setItem(key, serializedValue);
+      return true;
+    } catch (error) {
+      console.error(`Error setting item in localStorage: ${error}`);
+      return false;
+    }
+  }
+  /**
+   * Remove an item from localStorage
+   * @param key - The key to remove
+   * @returns true if successful, false otherwise
+   */
+  static removeItem(key) {
+    try {
+      if (typeof window === "undefined") {
+        return false;
+      }
+      window.localStorage.removeItem(key);
+      return true;
+    } catch (error) {
+      console.error(`Error removing item from localStorage: ${error}`);
+      return false;
+    }
+  }
+  /**
+   * Clear all items from localStorage
+   * @returns true if successful, false otherwise
+   */
+  static clear() {
+    try {
+      if (typeof window === "undefined") {
+        return false;
+      }
+      window.localStorage.clear();
+      return true;
+    } catch (error) {
+      console.error(`Error clearing localStorage: ${error}`);
+      return false;
+    }
+  }
+  /**
+   * Check if a key exists in localStorage
+   * @param key - The key to check
+   * @returns true if key exists, false otherwise
+   */
+  static hasItem(key) {
+    try {
+      if (typeof window === "undefined") {
+        return false;
+      }
+      return window.localStorage.getItem(key) !== null;
+    } catch (error) {
+      console.error(`Error checking item in localStorage: ${error}`);
+      return false;
+    }
+  }
+  /**
+   * Get all keys from localStorage
+   * @returns Array of keys
+   */
+  static keys() {
+    try {
+      if (typeof window === "undefined") {
+        return [];
+      }
+      return Object.keys(window.localStorage);
+    } catch (error) {
+      console.error(`Error getting keys from localStorage: ${error}`);
+      return [];
+    }
+  }
+};
+var ThemeContext = react.createContext(void 0);
+var THEME_STORAGE_KEY = "app-theme-mode";
+var getSystemTheme = () => {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var applyCssVariables = (theme, resolvedMode) => {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-theme", resolvedMode);
+  Object.entries(theme.colors).forEach(([key, value]) => {
+    root.style.setProperty(`--color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`, value);
+  });
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    root.style.setProperty(`--spacing-${key}`, value);
+  });
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    root.style.setProperty(`--radius-${key}`, value);
+  });
+  Object.entries(theme.fontSize).forEach(([key, value]) => {
+    root.style.setProperty(`--text-${key}`, value);
+  });
+  Object.entries(theme.fontWeight).forEach(([key, value]) => {
+    root.style.setProperty(`--font-${key}`, value);
+  });
+  Object.entries(theme.lineHeight).forEach(([key, value]) => {
+    root.style.setProperty(`--leading-${key}`, value);
+  });
+  Object.entries(theme.elevation).forEach(([key, value]) => {
+    root.style.setProperty(`--shadow-${key}`, value);
+  });
+  Object.entries(theme.transition).forEach(([key, value]) => {
+    root.style.setProperty(`--transition-${key}`, value);
+  });
+};
+var ThemeProvider = ({
+  children,
+  initialTheme,
+  initialMode = "system",
+  storageKey = THEME_STORAGE_KEY,
+  enableCssVariables = true
+}) => {
+  const getInitialMode = () => {
+    const savedMode = LocalStorage.getItem(storageKey);
+    return savedMode || initialMode;
+  };
+  const [themeMode, setThemeModeState] = react.useState(getInitialMode);
+  const [systemTheme, setSystemTheme] = react.useState(getSystemTheme);
+  const [customTheme, setCustomTheme] = react.useState(initialTheme);
+  const resolvedThemeMode = react.useMemo(() => {
+    if (themeMode === "system") return systemTheme;
+    return themeMode;
+  }, [themeMode, systemTheme]);
+  const theme = react.useMemo(() => {
+    if (customTheme) return customTheme;
+    return resolvedThemeMode === "light" ? lightTheme : darkTheme;
+  }, [customTheme, resolvedThemeMode]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+  react.useEffect(() => {
+    if (enableCssVariables) {
+      applyCssVariables(theme, resolvedThemeMode);
+    }
+  }, [theme, resolvedThemeMode, enableCssVariables]);
+  react.useEffect(() => {
+    LocalStorage.setItem(storageKey, themeMode);
+  }, [themeMode, storageKey]);
+  const setThemeMode = react.useCallback((mode) => {
+    setThemeModeState(mode);
+  }, []);
+  const setTheme = react.useCallback((newTheme) => {
+    setCustomTheme(newTheme);
+  }, []);
+  const toggleTheme = react.useCallback(() => {
+    const newMode = resolvedThemeMode === "light" ? "dark" : "light";
+    setThemeModeState(newMode);
+  }, [resolvedThemeMode]);
+  const contextValue = react.useMemo(() => ({
+    theme,
+    themeMode,
+    resolvedThemeMode,
+    setTheme,
+    setThemeMode,
+    toggleTheme
+  }), [theme, themeMode, resolvedThemeMode, setTheme, setThemeMode, toggleTheme]);
+  const muiTheme = react.useMemo(() => material.createTheme({
+    palette: {
+      mode: resolvedThemeMode,
+      primary: {
+        main: theme.colors.primary
+      },
+      secondary: {
+        main: theme.colors.secondary
+      },
+      error: {
+        main: theme.colors.error
+      },
+      success: {
+        main: theme.colors.success
+      },
+      background: {
+        default: theme.colors.background,
+        paper: theme.colors.backgroundSecondary
+      },
+      text: {
+        primary: theme.colors.text,
+        secondary: theme.colors.textSecondary
+      }
+    }
+  }), [resolvedThemeMode, theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(material.ThemeProvider, { theme: muiTheme, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.CssBaseline, {}),
+    children
+  ] }) });
+};
+var useTheme = () => {
+  const context = react.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeToggle = ({
+  lightModeTooltip = "Switch to dark mode",
+  darkModeTooltip = "Switch to light mode",
+  showTooltip = true,
+  sx,
+  ...props
+}) => {
+  const { resolvedThemeMode, toggleTheme } = useTheme();
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      onClick: toggleTheme,
+      color: "inherit",
+      sx: {
+        borderRadius: "50%",
+        ...sx
+      },
+      ...props,
+      children: resolvedThemeMode === "light" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Brightness4, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Brightness7, {})
+    }
+  );
+  if (!showTooltip) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tooltip,
+    {
+      title: resolvedThemeMode === "light" ? lightModeTooltip : darkModeTooltip,
+      arrow: true,
+      children: button
+    }
+  );
+};
+
+// src/http/HttpClient.ts
+var HttpClient = class {
+  constructor(config = {}) {
+    this.baseURL = config.baseURL || "";
+    this.timeout = config.timeout || 3e4;
+    this.defaultHeaders = config.headers || {};
+  }
+  buildURL(url, params) {
+    const fullURL = url.startsWith("http") ? url : `${this.baseURL}${url}`;
+    if (!params) return fullURL;
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      searchParams.append(key, String(value));
+    });
+    return `${fullURL}?${searchParams.toString()}`;
+  }
+  async request(url, config = {}) {
+    const { params, data, timeout = this.timeout, headers = {}, ...restConfig } = config;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+    try {
+      const response = await fetch(this.buildURL(url, params), {
+        ...restConfig,
+        headers: {
+          "Content-Type": "application/json",
+          ...this.defaultHeaders,
+          ...headers
+        },
+        body: data ? JSON.stringify(data) : void 0,
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+      if (!response.ok) {
+        const error = new Error(`HTTP Error: ${response.statusText}`);
+        error.status = response.status;
+        error.statusText = response.statusText;
+        try {
+          error.data = await response.json();
+        } catch {
+          error.data = await response.text();
+        }
+        throw error;
+      }
+      const responseData = await response.json();
+      return {
+        data: responseData,
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers
+      };
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === "AbortError") {
+        throw new Error("Request timeout");
+      }
+      throw error;
+    }
+  }
+  get(url, config) {
+    return this.request(url, { ...config, method: "GET" });
+  }
+  post(url, data, config) {
+    return this.request(url, { ...config, data, method: "POST" });
+  }
+  put(url, data, config) {
+    return this.request(url, { ...config, data, method: "PUT" });
+  }
+  patch(url, data, config) {
+    return this.request(url, { ...config, data, method: "PATCH" });
+  }
+  delete(url, config) {
+    return this.request(url, { ...config, method: "DELETE" });
+  }
+};
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/utils/debounce.ts
+function debounce(func, wait) {
+  let timeoutId = null;
+  return function(...args) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, wait);
+  };
+}
+
+// src/utils/throttle.ts
+function throttle(func, wait) {
+  let lastCall = 0;
+  return function(...args) {
+    const now = Date.now();
+    if (now - lastCall >= wait) {
+      lastCall = now;
+      func.apply(this, args);
+    }
+  };
+}
+
+// src/utils/formatDate.ts
+function formatDate(date, options = {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+}) {
+  const dateObj = typeof date === "string" || typeof date === "number" ? new Date(date) : date;
+  return new Intl.DateTimeFormat("en-US", options).format(dateObj);
+}
+function getCookie(name) {
+  if (typeof document === "undefined") return null;
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(";").shift() || null;
+  return null;
+}
+function decodeJWT(token) {
+  try {
+    const base64Url = token.split(".")[1];
+    if (!base64Url) return null;
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const jsonPayload = decodeURIComponent(
+      window.atob(base64).split("").map(function(c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join("")
+    );
+    return JSON.parse(jsonPayload);
+  } catch (e) {
+    return null;
+  }
+}
+var AuthContext = react.createContext({
+  isAuthenticated: false,
+  isLoading: true
+});
+var AuthProvider = ({
+  cookieName = "authorization",
+  redirectUrl,
+  children,
+  onAuthFail,
+  onAuthSuccess,
+  loadingElement = null
+}) => {
+  const [authState, setAuthState] = react.useState({
+    isAuthenticated: false,
+    isLoading: true
+    // starts loading until cookie check completes
+  });
+  const [authFailed, setAuthFailed] = react.useState(false);
+  react.useEffect(() => {
+    const verifyAuth = () => {
+      const token = getCookie(cookieName);
+      if (!token) {
+        handleFail();
+        return;
+      }
+      const decoded = decodeJWT(token);
+      if (!decoded) {
+        handleFail();
+        return;
+      }
+      if (decoded.exp) {
+        const expirationDate = new Date(decoded.exp * 1e3);
+        if (expirationDate < /* @__PURE__ */ new Date()) {
+          handleFail();
+          return;
+        }
+      }
+      setAuthState({
+        isAuthenticated: true,
+        isLoading: false
+      });
+      if (onAuthSuccess) {
+        onAuthSuccess();
+      }
+    };
+    verifyAuth();
+  }, [cookieName]);
+  const handleFail = () => {
+    setAuthState({
+      isAuthenticated: false,
+      isLoading: false
+    });
+    setAuthFailed(true);
+    if (onAuthFail) {
+      onAuthFail();
+    } else if (redirectUrl && typeof window !== "undefined") {
+      window.location.href = redirectUrl;
+    }
+  };
+  if (authState.isLoading || authFailed && !onAuthFail) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingElement });
+  }
+  if (authFailed && onAuthFail) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value: authState, children });
+};
+var useAuth = () => {
+  return react.useContext(AuthContext);
+};
+
+// src/auth/PermissionManager.ts
+var PERMISSIONS_STORAGE_KEY = "auth_permissions";
+var PermissionManager = class {
+  /**
+   * Saves an array of permission strings to local storage.
+   * @param permissions Array of permission strings.
+   */
+  static setPermissions(permissions) {
+    this.cachedPermissions = new Set(permissions);
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(PERMISSIONS_STORAGE_KEY, JSON.stringify(permissions));
+    } catch (error) {
+      console.error("Failed to save permissions to localStorage", error);
+    }
+  }
+  /**
+   * Retrieves the currently stored permissions from local storage or memory cache.
+   * @returns Array of permission strings, or an empty array if none exist.
+   */
+  static getPermissions() {
+    if (this.cachedPermissions !== null) {
+      return Array.from(this.cachedPermissions);
+    }
+    if (typeof window === "undefined") return [];
+    try {
+      const stored = localStorage.getItem(PERMISSIONS_STORAGE_KEY);
+      if (!stored) {
+        this.cachedPermissions = /* @__PURE__ */ new Set();
+        return [];
+      }
+      const parsed = JSON.parse(stored);
+      const permissionsArray = Array.isArray(parsed) ? parsed : [];
+      this.cachedPermissions = new Set(permissionsArray);
+      return permissionsArray;
+    } catch (error) {
+      console.error("Failed to parse permissions from localStorage", error);
+      this.cachedPermissions = /* @__PURE__ */ new Set();
+      return [];
+    }
+  }
+  /**
+   * Clears all stored permissions from memory and local storage.
+   */
+  static clearPermissions() {
+    this.cachedPermissions = null;
+    if (typeof window === "undefined") return;
+    localStorage.removeItem(PERMISSIONS_STORAGE_KEY);
+  }
+  /**
+   * Checks whether the given permission string exists in the currently stored permissions.
+   * @param permission The permission string to check for.
+   * @returns True if the permission exists, false otherwise.
+   */
+  static hasPermission(permission) {
+    if (this.cachedPermissions === null) {
+      this.getPermissions();
+    }
+    return this.cachedPermissions.has(permission);
+  }
+};
+PermissionManager.cachedPermissions = null;
+
+exports.AuthProvider = AuthProvider;
+exports.HttpClient = HttpClient;
+exports.LocalStorage = LocalStorage;
+exports.PermissionManager = PermissionManager;
+exports.SidebarLayout = SidebarLayout;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
+exports.borderRadius = borderRadius;
+exports.cn = cn;
+exports.darkTheme = darkTheme;
+exports.debounce = debounce;
+exports.elevation = elevation;
+exports.fontSize = fontSize;
+exports.fontWeight = fontWeight;
+exports.formatDate = formatDate;
+exports.lightTheme = lightTheme;
+exports.lineHeight = lineHeight;
+exports.spacing = spacing;
+exports.throttle = throttle;
+exports.tokens = tokens_exports;
+exports.transition = transition;
+exports.useAuth = useAuth;
+exports.useTheme = useTheme;
+exports.zIndex = zIndex;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map