gov-layout 1.1.3 → 1.1.5

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
 
 interface User {
     id?: string | number;
@@ -110,4 +111,46 @@ interface UserSidebarProps {
 }
 declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
 
-export { type MenuItem, type NotificationItem, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type User, UserHeader, UserSidebar };
+type Theme = 'light' | 'dark';
+type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface FontSizeOption {
+    key: FontSizeKey;
+    label: string;
+    scale: number;
+}
+declare const FONT_SIZE_OPTIONS: FontSizeOption[];
+interface SettingsContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+    fontSize: FontSizeKey;
+    setFontSize: (size: FontSizeKey) => void;
+    fontSizeOption: FontSizeOption;
+}
+declare function SettingsProvider({ children, defaultTheme, defaultFontSize, themeStorageKey, fontSizeStorageKey, }: {
+    children: React$1.ReactNode;
+    defaultTheme?: Theme;
+    defaultFontSize?: FontSizeKey;
+    themeStorageKey?: string;
+    fontSizeStorageKey?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useSettings(): SettingsContextType;
+
+interface SettingsPanelProps {
+    className?: string;
+    /** แสดงตัวเลือกโหมดสว่าง/มืด (default: true) — ซ่อนสำหรับเจ้าหน้าที่ */
+    showTheme?: boolean;
+}
+declare function SettingsPanel({ className, showTheme }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeSettingsProps {
+    onBack?: () => void;
+}
+declare function ThemeSettings({ onBack }: ThemeSettingsProps): react_jsx_runtime.JSX.Element;
+
+interface FontSizeSettingsProps {
+    onBack?: () => void;
+}
+declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
+
+export { FONT_SIZE_OPTIONS, type FontSizeKey, type FontSizeOption, FontSizeSettings, type MenuItem, type NotificationItem, SettingsPanel, SettingsProvider, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type Theme, ThemeSettings, type User, UserHeader, UserSidebar, useSettings };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
 
 interface User {
     id?: string | number;
@@ -110,4 +111,46 @@ interface UserSidebarProps {
 }
 declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
 
-export { type MenuItem, type NotificationItem, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type User, UserHeader, UserSidebar };
+type Theme = 'light' | 'dark';
+type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface FontSizeOption {
+    key: FontSizeKey;
+    label: string;
+    scale: number;
+}
+declare const FONT_SIZE_OPTIONS: FontSizeOption[];
+interface SettingsContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+    fontSize: FontSizeKey;
+    setFontSize: (size: FontSizeKey) => void;
+    fontSizeOption: FontSizeOption;
+}
+declare function SettingsProvider({ children, defaultTheme, defaultFontSize, themeStorageKey, fontSizeStorageKey, }: {
+    children: React$1.ReactNode;
+    defaultTheme?: Theme;
+    defaultFontSize?: FontSizeKey;
+    themeStorageKey?: string;
+    fontSizeStorageKey?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useSettings(): SettingsContextType;
+
+interface SettingsPanelProps {
+    className?: string;
+    /** แสดงตัวเลือกโหมดสว่าง/มืด (default: true) — ซ่อนสำหรับเจ้าหน้าที่ */
+    showTheme?: boolean;
+}
+declare function SettingsPanel({ className, showTheme }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeSettingsProps {
+    onBack?: () => void;
+}
+declare function ThemeSettings({ onBack }: ThemeSettingsProps): react_jsx_runtime.JSX.Element;
+
+interface FontSizeSettingsProps {
+    onBack?: () => void;
+}
+declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
+
+export { FONT_SIZE_OPTIONS, type FontSizeKey, type FontSizeOption, FontSizeSettings, type MenuItem, type NotificationItem, SettingsPanel, SettingsProvider, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type Theme, ThemeSettings, type User, UserHeader, UserSidebar, useSettings };

package/dist/index.js

@@ -742,40 +742,41 @@ function UserHeader({
                   {
                     onClick: () => setIsNotifOpen(!isNotifOpen),
                     style: {
-                      padding: "4px 10px",
+                      padding: "10px",
                       borderRadius: "8px",
                       border: "none",
                       background: "transparent",
                       cursor: "pointer",
+                      position: "relative",
                       display: "flex",
-                      flexDirection: "column",
                       alignItems: "center",
-                      justifyContent: "center",
-                      gap: "0px"
+                      justifyContent: "center"
                     },
                     children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(BellIcon, {}),
                       unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
                         {
                           style: {
-                            minWidth: "20px",
+                            position: "absolute",
+                            top: "2px",
+                            right: "2px",
+                            minWidth: "16px",
                             height: "16px",
                             background: "var(--color-alias-semantic-critical, #f21515)",
                             borderRadius: "8px",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
-                            fontSize: "10px",
+                            fontSize: unreadCount > 99 ? "7px" : "9px",
                             fontWeight: 700,
                             color: "#fff",
-                            padding: "0 5px",
-                            lineHeight: 1,
-                            marginBottom: "-6px"
+                            padding: "0 3px",
+                            lineHeight: 1
                           },
                           children: unreadCount > 99 ? "99+" : unreadCount
                         }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(BellIcon, {})
+                      )
                     ]
                   }
                 ),
@@ -1210,12 +1211,389 @@ function UserSidebar({
     )
   ] });
 }
+var FONT_SIZE_OPTIONS = [
+  { key: "xsmall", label: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01", scale: 0.8 },
+  { key: "small", label: "\u0E40\u0E25\u0E47\u0E01", scale: 0.9 },
+  { key: "medium", label: "\u0E01\u0E25\u0E32\u0E07", scale: 1 },
+  { key: "large", label: "\u0E43\u0E2B\u0E0D\u0E48", scale: 1.2 },
+  { key: "xlarge", label: "\u0E43\u0E2B\u0E0D\u0E48\u0E21\u0E32\u0E01", scale: 1.4 }
+];
+var BASE_FONT_SIZES = {
+  "--font-alias-mobile-body-fontsize": 16,
+  "--font-alias-mobile-h1-fontsize": 28,
+  "--font-alias-mobile-h2-fontsize": 24,
+  "--font-alias-mobile-h3-fontsize": 20,
+  "--font-alias-mobile-sub-fontsize": 14,
+  "--font-alias-mobile-button-fontsize": 16
+};
+var SettingsContext = react.createContext(void 0);
+function SettingsProvider({
+  children,
+  defaultTheme = "light",
+  defaultFontSize = "medium",
+  themeStorageKey = "app-theme",
+  fontSizeStorageKey = "app-font-size"
+}) {
+  const [theme, setThemeState] = react.useState(defaultTheme);
+  const [fontSize, setFontSizeState] = react.useState(defaultFontSize);
+  react.useEffect(() => {
+    try {
+      const savedTheme = localStorage.getItem(themeStorageKey);
+      if (savedTheme === "light" || savedTheme === "dark") {
+        setThemeState(savedTheme);
+      }
+      const savedFontSize = localStorage.getItem(fontSizeStorageKey);
+      if (savedFontSize && FONT_SIZE_OPTIONS.some((o) => o.key === savedFontSize)) {
+        setFontSizeState(savedFontSize);
+      }
+    } catch {
+    }
+  }, [themeStorageKey, fontSizeStorageKey]);
+  react.useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    try {
+      localStorage.setItem(themeStorageKey, theme);
+    } catch {
+    }
+  }, [theme, themeStorageKey]);
+  react.useEffect(() => {
+    const option = FONT_SIZE_OPTIONS.find((o) => o.key === fontSize) || FONT_SIZE_OPTIONS[2];
+    const root = document.documentElement;
+    Object.entries(BASE_FONT_SIZES).forEach(([varName, baseValue]) => {
+      root.style.setProperty(varName, `${baseValue * option.scale}px`);
+    });
+    root.style.fontSize = `${16 * option.scale}px`;
+    root.style.setProperty("--global-font-scale", option.scale.toString());
+    try {
+      localStorage.setItem(fontSizeStorageKey, fontSize);
+    } catch {
+    }
+  }, [fontSize, fontSizeStorageKey]);
+  const setTheme = react.useCallback((t) => {
+    setThemeState(t);
+  }, []);
+  const toggleTheme = react.useCallback(() => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  const setFontSize = react.useCallback((s) => {
+    setFontSizeState(s);
+  }, []);
+  const fontSizeOption = FONT_SIZE_OPTIONS.find((o) => o.key === fontSize) || FONT_SIZE_OPTIONS[2];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SettingsContext.Provider,
+    {
+      value: { theme, setTheme, toggleTheme, fontSize, setFontSize, fontSizeOption },
+      children
+    }
+  );
+}
+function useSettings() {
+  const context = react.useContext(SettingsContext);
+  if (!context) {
+    throw new Error("useSettings must be used within <SettingsProvider>");
+  }
+  return context;
+}
+function SunIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+}
+function ThemeSettings({ onBack }) {
+  const { theme, setTheme } = useSettings();
+  const options = [
+    { key: "light", label: "\u0E2A\u0E27\u0E48\u0E32\u0E07", icon: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}), bg: "#fff", text: "#111" },
+    { key: "dark", label: "\u0E21\u0E37\u0E14", icon: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}), bg: "#1f2937", text: "#f9fafb" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onBack,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "12px 16px",
+          width: "100%",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: 15,
+          fontWeight: 600,
+          color: "var(--color-alias-text-colors-primary, #060d26)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
+          "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E27\u0E48\u0E32\u0E07/\u0E21\u0E37\u0E14"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", display: "flex", gap: 12 }, children: options.map((opt) => {
+      const isSelected = theme === opt.key;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setTheme(opt.key),
+          style: {
+            flex: 1,
+            padding: "20px 12px",
+            borderRadius: 12,
+            border: isSelected ? "2px solid var(--color-alias-color-brand-primary, #1e7d55)" : "2px solid var(--color-border-colors-neutral, #c8cedd)",
+            background: opt.bg,
+            cursor: "pointer",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 8,
+            transition: "all 0.2s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: opt.text }, children: opt.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontSize: 13,
+              fontWeight: isSelected ? 700 : 500,
+              color: opt.text
+            }, children: opt.label }),
+            isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              background: "var(--color-alias-color-brand-primary, #1e7d55)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) })
+          ]
+        },
+        opt.key
+      );
+    }) })
+  ] });
+}
+function FontSizeSettings({ onBack }) {
+  const { fontSize, setFontSize, fontSizeOption } = useSettings();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onBack,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "12px 16px",
+          width: "100%",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: 15,
+          fontWeight: 600,
+          color: "var(--color-alias-text-colors-primary, #060d26)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
+          "\u0E02\u0E19\u0E32\u0E14\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      margin: "8px 16px",
+      padding: "16px",
+      borderRadius: 10,
+      background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
+      textAlign: "center"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+        fontSize: `${16 * fontSizeOption.scale}px`,
+        fontWeight: 500,
+        color: "var(--color-alias-text-colors-primary, #060d26)",
+        margin: 0
+      }, children: "\u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+        fontSize: `${12 * fontSizeOption.scale}px`,
+        color: "var(--color-alias-text-colors-tertiary, #475272)",
+        margin: "4px 0 0"
+      }, children: [
+        "\xD7",
+        fontSizeOption.scale
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px", display: "flex", flexDirection: "column", gap: 4 }, children: FONT_SIZE_OPTIONS.map((opt) => {
+      const isSelected = fontSize === opt.key;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setFontSize(opt.key),
+          onMouseEnter: (e) => {
+            if (!isSelected) e.currentTarget.style.backgroundColor = "#f9fafb";
+          },
+          onMouseLeave: (e) => {
+            if (!isSelected) e.currentTarget.style.backgroundColor = "transparent";
+          },
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 14px",
+            borderRadius: 8,
+            border: isSelected ? "2px solid var(--color-alias-color-brand-primary, #1e7d55)" : "1px solid transparent",
+            background: isSelected ? "color-mix(in srgb, var(--color-alias-color-brand-primary, #1e7d55) 8%, transparent)" : "transparent",
+            cursor: "pointer",
+            transition: "all 0.15s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontSize: `${14 * opt.scale}px`,
+              fontWeight: isSelected ? 600 : 400,
+              color: isSelected ? "var(--color-alias-color-brand-primary, #1e7d55)" : "var(--color-alias-text-colors-primary, #060d26)"
+            }, children: opt.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
+              fontSize: 12,
+              color: "var(--color-alias-text-colors-tertiary, #475272)"
+            }, children: [
+              "\xD7",
+              opt.scale
+            ] })
+          ]
+        },
+        opt.key
+      );
+    }) })
+  ] });
+}
+function FontSizeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
+  ] });
+}
+function PaletteIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "14", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "14", r: "1.5", fill: "currentColor" })
+  ] });
+}
+function SettingsPanel({ className, showTheme = true }) {
+  const [view, setView] = react.useState("menu");
+  if (view === "theme" && showTheme) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettings, { onBack: () => setView("menu") });
+  }
+  if (view === "fontSize") {
+    return /* @__PURE__ */ jsxRuntime.jsx(FontSizeSettings, { onBack: () => setView("menu") });
+  }
+  const allMenuItems = [
+    {
+      id: "fontSize",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(FontSizeIcon, {}),
+      label: "\u0E02\u0E19\u0E32\u0E14\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23",
+      description: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01 / \u0E40\u0E25\u0E47\u0E01 / \u0E01\u0E25\u0E32\u0E07 / \u0E43\u0E2B\u0E0D\u0E48 / \u0E43\u0E2B\u0E0D\u0E48\u0E21\u0E32\u0E01",
+      onClick: () => setView("fontSize")
+    },
+    ...showTheme ? [{
+      id: "theme",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(PaletteIcon, {}),
+      label: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E27\u0E48\u0E32\u0E07/\u0E21\u0E37\u0E14",
+      description: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E18\u0E35\u0E21\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19",
+      onClick: () => setView("theme")
+    }] : []
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "16px",
+      borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
+      fontSize: 16,
+      fontWeight: 700,
+      margin: 0,
+      color: "var(--color-alias-text-colors-primary, #060d26)"
+    }, children: "\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E23\u0E30\u0E1A\u0E1A" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", display: "flex", flexDirection: "column", gap: 2 }, children: allMenuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: item.onClick,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f9fafb";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 14,
+          padding: "14px 12px",
+          borderRadius: 10,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          width: "100%",
+          textAlign: "left",
+          transition: "background-color 0.15s ease"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+            width: 40,
+            height: 40,
+            borderRadius: 10,
+            background: "var(--color-foundations-fuji-pallet-light, #ebedf5)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--color-alias-color-brand-primary, #1e7d55)",
+            flexShrink: 0
+          }, children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+              fontSize: 15,
+              fontWeight: 600,
+              margin: 0,
+              color: "var(--color-alias-text-colors-primary, #060d26)"
+            }, children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+              fontSize: 12,
+              margin: "2px 0 0",
+              color: "var(--color-alias-text-colors-tertiary, #475272)"
+            }, children: item.description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" }) })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
 
+exports.FONT_SIZE_OPTIONS = FONT_SIZE_OPTIONS;
+exports.FontSizeSettings = FontSizeSettings;
+exports.SettingsPanel = SettingsPanel;
+exports.SettingsProvider = SettingsProvider;
 exports.SidebarHeader = SidebarHeader;
 exports.SidebarMenu = SidebarMenu;
 exports.SidebarUserProfile = SidebarUserProfile;
 exports.StaffSidebar = StaffSidebar;
+exports.ThemeSettings = ThemeSettings;
 exports.UserHeader = UserHeader;
 exports.UserSidebar = UserSidebar;
+exports.useSettings = useSettings;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map