@otmc/ui 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(index_exports, {
   NotFound: () => NotFound,
   ThemeMenu: () => ThemeMenu,
   ThemeProvider: () => ThemeProvider,
+  ThemeSetting: () => ThemeSetting,
   UNKNOWN: () => UNKNOWN,
   calculateRemainingTime: () => calculateRemainingTime,
   copyToClipboard: () => copyToClipboard,
@@ -48,6 +49,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/branding/Footer.tsx
 var import_core = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
 var import_icons_react = require("@tabler/icons-react");
 
 // src/utils/constants.ts
@@ -98,7 +100,7 @@ function Footer({
           "Copyright",
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconCopyright, { size: 15 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copyright, { size: 15, color: "var(--mantine-color-dimmed)" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Text, { size: "xs", c: "dimmed", children: [
           (/* @__PURE__ */ new Date()).getFullYear(),
           " ",
@@ -144,7 +146,7 @@ function Footer({
 
 // src/components/ThemeMenu.tsx
 var import_core3 = require("@mantine/core");
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 
 // src/contexts/ThemeProvider.tsx
 var import_react = require("react");
@@ -254,10 +256,10 @@ var DEFAULT_LABELS = {
   timeBased: "Theo th\u1EDDi gian"
 };
 var MODE_ICONS = {
-  light: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Sun, { size: 16 }),
-  dark: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Moon, { size: 16 }),
-  auto: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Monitor, { size: 16 }),
-  "time-based": /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Clock, { size: 16 })
+  light: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Sun, { size: 16 }),
+  dark: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Moon, { size: 16 }),
+  auto: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Monitor, { size: 16 }),
+  "time-based": /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Clock, { size: 16 })
 };
 function ThemeMenu({
   modes = ["light", "dark", "auto", "time-based"],
@@ -270,7 +272,7 @@ function ThemeMenu({
   const text = { ...DEFAULT_LABELS, ...labels };
   const isDark = currentTheme === "dark";
   const activeColor = isDark ? "yellow.8" : "blue.8";
-  const triggerIcon = theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Sun, { size: iconSize, strokeWidth: 2 }) : theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Moon, { size: iconSize, strokeWidth: 2 }) : theme === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Monitor, { size: iconSize, strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Clock, { size: iconSize, strokeWidth: 2 });
+  const triggerIcon = theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Sun, { size: iconSize, strokeWidth: 2 }) : theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Moon, { size: iconSize, strokeWidth: 2 }) : theme === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Monitor, { size: iconSize, strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Clock, { size: iconSize, strokeWidth: 2 });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Menu, { shadow: "md", width: 200, position: "bottom-end", ...menuProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tooltip, { label: text.tooltip, position: "bottom", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_core3.ActionIcon,
@@ -302,10 +304,170 @@ function ThemeMenu({
   ] });
 }
 
-// src/modals/Information.tsx
-var import_react2 = require("react");
+// src/components/ThemeSetting.tsx
 var import_core4 = require("@mantine/core");
+var import_dates = require("@mantine/dates");
 var import_icons_react2 = require("@tabler/icons-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_LABELS2 = {
+  title: "Appearance",
+  subtitle: "Control how the application looks and feels",
+  themeMode: "Theme mode",
+  themeModeHint: "Auto will switch between light and dark based on time of day",
+  currentlyActive: "Currently active:",
+  timeBasedSettings: "Time-based settings",
+  lightStartTime: "Light theme start time",
+  darkStartTime: "Dark theme start time",
+  light: "Light",
+  dark: "Dark",
+  system: "System",
+  timeBased: "Time-based"
+};
+var MODE_ICONS2 = {
+  light: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconSun, { size: 16 }),
+  dark: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconMoon, { size: 16 }),
+  auto: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconDeviceLaptop, { size: 16 }),
+  "time-based": /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconClock, { size: 16 })
+};
+var MODE_ORDER = ["light", "dark", "auto", "time-based"];
+function ThemeSetting({
+  modes = MODE_ORDER,
+  labels = {},
+  cardProps = {}
+}) {
+  const {
+    theme,
+    timeBasedSettings,
+    setTheme,
+    setTimeBasedSettings,
+    currentTheme
+  } = useTheme();
+  const text = { ...DEFAULT_LABELS2, ...labels };
+  const isTimeBased = theme === "time-based";
+  const isDark = currentTheme === "dark";
+  const showTimeBased = modes.includes("time-based");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_core4.Card,
+    {
+      withBorder: true,
+      radius: "lg",
+      p: "25px",
+      bg: isDark ? "dark.8" : "gray.0",
+      style: { flex: 1, overflow: "auto", display: "flex", flexDirection: "column" },
+      ...cardProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: "lg", style: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ThemeIcon, { variant: "subtle", color: "blue.8", size: "md", radius: "md", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconPalette, { size: 25 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Title, { order: 4, children: text.title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", c: "dimmed", children: text.subtitle })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { fw: 500, mb: 6, children: text.themeMode }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.SegmentedControl,
+            {
+              fullWidth: true,
+              value: theme,
+              radius: "lg",
+              color: "teal.8",
+              bg: isDark ? "dark.6" : "gray.3",
+              onChange: (value) => setTheme(value),
+              data: MODE_ORDER.filter((mode) => modes.includes(mode)).map(
+                (mode) => ({
+                  value: mode,
+                  label: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: 6, children: [
+                    MODE_ICONS2[mode],
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: mode === "light" ? text.light : mode === "dark" ? text.dark : mode === "auto" ? text.system : text.timeBased })
+                  ] })
+                })
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "xs", c: "dimmed", mt: "xs", children: text.themeModeHint }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Text, { size: "xs", mt: 4, children: [
+            text.currentlyActive,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("b", { children: isDark ? text.dark : text.light })
+          ] })
+        ] }),
+        showTimeBased && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_core4.Box,
+            {
+              style: {
+                opacity: isTimeBased ? 1 : 0.45,
+                pointerEvents: isTimeBased ? "auto" : "none",
+                transition: "opacity 150ms ease"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: 6, mb: 6, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconClock, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { fw: 500, children: text.timeBasedSettings })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { grow: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", mb: 4, children: text.lightStartTime }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      import_dates.TimeInput,
+                      {
+                        withSeconds: false,
+                        radius: "13px",
+                        value: timeBasedSettings.lightStartTime,
+                        onChange: (event) => setTimeBasedSettings({
+                          ...timeBasedSettings,
+                          lightStartTime: event.currentTarget.value
+                        })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", mb: 4, children: text.darkStartTime }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      import_dates.TimeInput,
+                      {
+                        withSeconds: false,
+                        radius: "13px",
+                        value: timeBasedSettings.darkStartTime,
+                        onChange: (event) => setTimeBasedSettings({
+                          ...timeBasedSettings,
+                          darkStartTime: event.currentTarget.value
+                        })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+                  text.light,
+                  ": ",
+                  timeBasedSettings.lightStartTime,
+                  " \u2192",
+                  " ",
+                  timeBasedSettings.darkStartTime,
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
+                  text.dark,
+                  ": ",
+                  timeBasedSettings.darkStartTime,
+                  " \u2192",
+                  " ",
+                  timeBasedSettings.lightStartTime
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/modals/Information.tsx
+var import_react2 = require("react");
+var import_core5 = require("@mantine/core");
+var import_lucide_react3 = require("lucide-react");
 
 // src/utils/commonUtils.ts
 var copyToClipboard = async (text) => {
@@ -445,58 +607,58 @@ function formatHumanDate(date, options) {
 }
 
 // src/modals/Information.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var DEFAULT_TITLE = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: "xs", wrap: "nowrap", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconCpu, { size: 20 }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "System Information" })
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_TITLE = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { gap: "xs", wrap: "nowrap", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Cpu, { size: 20 }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "System Information" })
 ] });
 function InformationContent({ info }) {
-  const colorScheme = (0, import_core4.useComputedColorScheme)();
+  const colorScheme = (0, import_core5.useComputedColorScheme)();
   const author = info.author ?? DEFAULT_AUTHOR;
   const versionType = info.versionType ?? DEFAULT_VERSION_TYPE;
   const cards = [
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconUser, { size: 18 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.User, { size: 18 }),
       label: "Author",
       value: author,
       color: "blue"
     },
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconLicense, { size: 18 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Award, { size: 18 }),
       label: "License",
       value: info.license ?? DEFAULT_LICENSE,
       color: "orange"
     },
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconMapPin, { size: 18 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.MapPin, { size: 18 }),
       label: "Location",
       value: info.location ?? DEFAULT_LOCATION,
       color: "teal"
     },
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconTag, { size: 18 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Tag, { size: 18 }),
       label: "Version Type",
       value: versionType,
       color: "red"
     },
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconCalendar, { size: 18 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Calendar, { size: 18 }),
       label: "Build Time",
       value: info.buildTime !== void 0 ? formatAbsoluteAndRelativeTime(info.buildTime) : UNKNOWN,
       color: "green"
     },
     ...info.metadata ?? []
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: "xs", align: "center", children: [
       info.logo,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: 2, align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Title, { order: 2, children: info.name }),
-        info.tagline && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: 2, align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Title, { order: 2, children: info.name }),
+        info.tagline && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: "xs", children: [
-        info.version && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_core4.Badge,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { gap: "xs", children: [
+        info.version && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_core5.Badge,
           {
             size: "lg",
             color: "blue",
@@ -510,8 +672,8 @@ function InformationContent({ info }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_core4.Badge,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_core5.Badge,
           {
             size: "lg",
             color: "teal",
@@ -527,39 +689,39 @@ function InformationContent({ info }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Divider, { label: "System Information", labelPosition: "center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.SimpleGrid, { cols: { base: 1, sm: 2 }, children: [
-      cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Divider, { label: "System Information", labelPosition: "center" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.SimpleGrid, { cols: { base: 1, sm: 2 }, children: [
+      cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         InfoCard,
         {
-          icon: card.icon ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconAward, { size: 18 }),
+          icon: card.icon ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Award, { size: 18 }),
           label: card.label,
           value: card.value,
           color: card.color ?? "gray"
         },
         card.label
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_core4.Paper,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_core5.Paper,
         {
           withBorder: true,
           p: "sm",
           radius: "18px",
           bg: colorScheme === "dark" ? "gray.9" : "gray.0",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { justify: "space-between", wrap: "nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: "sm", flex: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ThemeIcon, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconHash, { size: 18 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { justify: "space-between", wrap: "nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { gap: "sm", flex: 1, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ThemeIcon, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Hash, { size: 18 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
               ] })
             ] }),
-            info.buildId && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CopyBuildIdButton, { buildId: info.buildId })
+            info.buildId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopyBuildIdButton, { buildId: info.buildId })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Footer,
       {
         copyright: info.copyright,
@@ -576,8 +738,8 @@ function InformationModal({
   info,
   title = DEFAULT_TITLE
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core4.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core5.Modal,
     {
       opened,
       onClose,
@@ -596,7 +758,7 @@ function InformationModal({
         }
       },
       title,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InformationContent, { info })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InformationContent, { info })
     }
   );
 }
@@ -609,13 +771,13 @@ function CopyBuildIdButton({ buildId }) {
       setTimeout(() => setCopied(false), 2e3);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core4.ActionIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core5.ActionIcon,
     {
       variant: "subtle",
       color: copied ? "teal" : "gray",
       onClick: handleCopy,
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconCheck, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconCopy, { size: 16 })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Copy, { size: 16 })
     }
   ) });
 }
@@ -625,28 +787,28 @@ function InfoCard({
   value,
   color
 }) {
-  const colorScheme = (0, import_core4.useComputedColorScheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { gap: "sm", align: "flex-start", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ThemeIcon, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: 2, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { size: "sm", fw: 500, lineClamp: 1, children: value })
+  const colorScheme = (0, import_core5.useComputedColorScheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { gap: "sm", align: "flex-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ThemeIcon, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: 2, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { size: "sm", fw: 500, lineClamp: 1, children: value })
     ] })
   ] }) });
 }
 
 // src/pages/NotFound.tsx
-var import_core5 = require("@mantine/core");
+var import_core6 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function NotFound({
   path,
   onSearchClick,
   onHomeClick
 }) {
   const currentPath = path || (typeof window !== "undefined" ? window.location.pathname : "/404");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core5.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_core6.Box,
     {
       style: {
         minHeight: "100vh",
@@ -654,9 +816,9 @@ function NotFound({
         alignItems: "center",
         background: "radial-gradient(circle at top left, rgba(34, 139, 230, 0.15), transparent 45%), radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.12), transparent 45%), var(--mantine-color-body)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Container, { size: "xl", py: 80, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Paper, { radius: "xl", p: 48, withBorder: true, style: { borderColor: "var(--mantine-color-default-border)", textAlign: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_core5.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Container, { size: "xl", py: 80, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Paper, { radius: "xl", p: 48, withBorder: true, style: { borderColor: "var(--mantine-color-default-border)", textAlign: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_core6.Box,
           {
             mx: "auto",
             mb: "xl",
@@ -670,11 +832,11 @@ function NotFound({
               background: "linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-cyan-6))",
               boxShadow: "0 12px 32px rgba(34, 139, 230, 0.35)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconFileOff, { size: 44, stroke: 1.5, color: "white" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react3.IconFileOff, { size: 44, stroke: 1.5, color: "white" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_core5.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_core6.Text,
           {
             fz: { base: 72, sm: 100 },
             fw: 900,
@@ -684,33 +846,33 @@ function NotFound({
             children: "404"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Badge, { variant: "light", color: "blue", size: "lg", mb: "xs", children: "NOT FOUND" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Title, { order: 2, mt: "sm", mb: "xs", children: "Trang kh\xF4ng t\u1ED3n t\u1EA1i" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { c: "dimmed", size: "sm", maw: 440, mx: "auto", children: "Trang ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn b\u1EA1n truy c\u1EADp kh\xF4ng t\u1ED3n t\u1EA1i ho\u1EB7c \u0111\xE3 \u0111\u01B0\u1EE3c di chuy\u1EC3n. Vui l\xF2ng ki\u1EC3m tra l\u1EA1i \u0111\u01B0\u1EDDng d\u1EABn ho\u1EB7c quay v\u1EC1 trang ch\u1EE7." }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Box, { mt: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Code, { color: "blue", variant: "light", px: "md", py: 6, children: currentPath }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Group, { gap: "sm", mt: "xl", justify: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { variant: "light", color: "blue", size: "lg", mb: "xs", children: "NOT FOUND" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Title, { order: 2, mt: "sm", mb: "xs", children: "Trang kh\xF4ng t\u1ED3n t\u1EA1i" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { c: "dimmed", size: "sm", maw: 440, mx: "auto", children: "Trang ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn b\u1EA1n truy c\u1EADp kh\xF4ng t\u1ED3n t\u1EA1i ho\u1EB7c \u0111\xE3 \u0111\u01B0\u1EE3c di chuy\u1EC3n. Vui l\xF2ng ki\u1EC3m tra l\u1EA1i \u0111\u01B0\u1EDDng d\u1EABn ho\u1EB7c quay v\u1EC1 trang ch\u1EE7." }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Box, { mt: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Code, { color: "blue", variant: "light", px: "md", py: 6, children: currentPath }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { gap: "sm", mt: "xl", justify: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core6.Button,
             {
               variant: "light",
-              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconArrowLeft, { size: 16 }),
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react3.IconArrowLeft, { size: 16 }),
               onClick: () => window.history.back(),
               children: "Quay l\u1EA1i"
             }
           ),
-          onSearchClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.Button,
+          onSearchClick && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core6.Button,
             {
               variant: "outline",
-              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconSearch, { size: 16 }),
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react3.IconSearch, { size: 16 }),
               onClick: onSearchClick,
               children: "T\xECm Docs"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core6.Button,
             {
-              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconHome, { size: 16 }),
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react3.IconHome, { size: 16 }),
               onClick: onHomeClick || (() => window.location.href = "/"),
               children: "Trang ch\u1EE7"
             }
@@ -734,6 +896,7 @@ function NotFound({
   NotFound,
   ThemeMenu,
   ThemeProvider,
+  ThemeSetting,
   UNKNOWN,
   calculateRemainingTime,
   copyToClipboard,