gov-layout 1.1.4 → 1.1.6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/sidebar/StaffSidebar.tsx
@@ -1209,7 +1209,379 @@ 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 = createContext(void 0);
+function SettingsProvider({
+  children,
+  defaultTheme = "light",
+  defaultFontSize = "medium",
+  themeStorageKey = "app-theme",
+  fontSizeStorageKey = "app-font-size"
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [fontSize, setFontSizeState] = useState(defaultFontSize);
+  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]);
+  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]);
+  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());
+    document.body.style.zoom = option.scale.toString();
+    try {
+      localStorage.setItem(fontSizeStorageKey, fontSize);
+    } catch {
+    }
+  }, [fontSize, fontSizeStorageKey]);
+  const setTheme = useCallback((t) => {
+    setThemeState(t);
+  }, []);
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  const setFontSize = useCallback((s) => {
+    setFontSizeState(s);
+  }, []);
+  const fontSizeOption = FONT_SIZE_OPTIONS.find((o) => o.key === fontSize) || FONT_SIZE_OPTIONS[2];
+  return /* @__PURE__ */ jsx(
+    SettingsContext.Provider,
+    {
+      value: { theme, setTheme, toggleTheme, fontSize, setFontSize, fontSizeOption },
+      children
+    }
+  );
+}
+function useSettings() {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error("useSettings must be used within <SettingsProvider>");
+  }
+  return context;
+}
+function SunIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ jsx(SunIcon, {}), bg: "#fff", text: "#111" },
+    { key: "dark", label: "\u0E21\u0E37\u0E14", icon: /* @__PURE__ */ jsx(MoonIcon, {}), bg: "#1f2937", text: "#f9fafb" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { children: [
+    onBack && /* @__PURE__ */ 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__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
+          "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E27\u0E48\u0E32\u0E07/\u0E21\u0E37\u0E14"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px", display: "flex", gap: 12 }, children: options.map((opt) => {
+      const isSelected = theme === opt.key;
+      return /* @__PURE__ */ 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__ */ jsx("span", { style: { color: opt.text }, children: opt.icon }),
+            /* @__PURE__ */ jsx("span", { style: {
+              fontSize: 13,
+              fontWeight: isSelected ? 700 : 500,
+              color: opt.text
+            }, children: opt.label }),
+            isSelected && /* @__PURE__ */ 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__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) })
+          ]
+        },
+        opt.key
+      );
+    }) })
+  ] });
+}
+function FontSizeSettings({ onBack }) {
+  const { fontSize, setFontSize, fontSizeOption } = useSettings();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    onBack && /* @__PURE__ */ 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__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
+          "\u0E02\u0E19\u0E32\u0E14\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: {
+      margin: "8px 16px",
+      padding: "16px",
+      borderRadius: 10,
+      background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
+      textAlign: "center"
+    }, children: [
+      /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { style: {
+              fontSize: 12,
+              color: "var(--color-alias-text-colors-tertiary, #475272)"
+            }, children: [
+              "\xD7",
+              opt.scale
+            ] })
+          ]
+        },
+        opt.key
+      );
+    }) })
+  ] });
+}
+function FontSizeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
+  ] });
+}
+function PaletteIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "14", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16", cy: "14", r: "1.5", fill: "currentColor" })
+  ] });
+}
+function SettingsPanel({ className, showTheme = true }) {
+  const [view, setView] = useState("menu");
+  if (view === "theme" && showTheme) {
+    return /* @__PURE__ */ jsx(ThemeSettings, { onBack: () => setView("menu") });
+  }
+  if (view === "fontSize") {
+    return /* @__PURE__ */ jsx(FontSizeSettings, { onBack: () => setView("menu") });
+  }
+  const allMenuItems = [
+    {
+      id: "fontSize",
+      icon: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { style: {
+      padding: "16px",
+      borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
+    }, children: /* @__PURE__ */ 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__ */ jsx("div", { style: { padding: "8px", display: "flex", flexDirection: "column", gap: 2 }, children: allMenuItems.map((item) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("p", { style: {
+              fontSize: 15,
+              fontWeight: 600,
+              margin: 0,
+              color: "var(--color-alias-text-colors-primary, #060d26)"
+            }, children: item.label }),
+            /* @__PURE__ */ jsx("p", { style: {
+              fontSize: 12,
+              margin: "2px 0 0",
+              color: "var(--color-alias-text-colors-tertiary, #475272)"
+            }, children: item.description })
+          ] }),
+          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
 
-export { SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, UserHeader, UserSidebar };
+export { FONT_SIZE_OPTIONS, FontSizeSettings, SettingsPanel, SettingsProvider, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, ThemeSettings, UserHeader, UserSidebar, useSettings };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map