@otmc/ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -100,8 +100,174 @@ function Footer({
   ] });
 }
 
+// src/components/ThemeMenu.tsx
+import {
+  ActionIcon as ActionIcon2,
+  Menu,
+  Tooltip as Tooltip2
+} from "@mantine/core";
+import { Sun, Moon, Monitor, Clock } from "lucide-react";
+
+// src/contexts/ThemeProvider.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+import {
+  useMantineColorScheme
+} from "@mantine/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+var useTheme = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used inside ThemeProvider");
+  }
+  return ctx;
+};
+var resolveColorScheme = (colorScheme) => {
+  if (colorScheme === "auto") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return colorScheme;
+};
+var resolveTimeBasedTheme = (settings) => {
+  const now = /* @__PURE__ */ new Date();
+  const minutes = now.getHours() * 60 + now.getMinutes();
+  const [lh, lm] = settings.lightStartTime.split(":").map(Number);
+  const [dh, dm] = settings.darkStartTime.split(":").map(Number);
+  const light = lh * 60 + lm;
+  const dark = dh * 60 + dm;
+  return light < dark ? minutes >= light && minutes < dark ? "light" : "dark" : minutes >= light || minutes < dark ? "light" : "dark";
+};
+var resolveAutoScheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+var ThemeProvider = ({
+  children,
+  defaultTheme = "auto",
+  defaultTimeBasedSettings = {
+    lightStartTime: "07:00",
+    darkStartTime: "19:00"
+  },
+  storagePrefix = ""
+}) => {
+  const themeStorageKey = `${storagePrefix}theme`;
+  const timeStorageKey = `${storagePrefix}time-theme`;
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+  const [theme, setThemeState] = useState(
+    () => localStorage.getItem(themeStorageKey) ?? defaultTheme
+  );
+  const [timeBasedSettings, setTimeBasedSettings] = useState(
+    () => JSON.parse(localStorage.getItem(timeStorageKey) || "null") ?? defaultTimeBasedSettings
+  );
+  const handleSetTimeBasedSettings = (settings) => {
+    setTimeBasedSettings(settings);
+    localStorage.setItem(timeStorageKey, JSON.stringify(settings));
+    if (theme === "time-based") {
+      applyTheme("time-based");
+    }
+  };
+  const applyTheme = (mode) => {
+    let scheme;
+    switch (mode) {
+      case "light":
+      case "dark":
+      case "auto":
+        scheme = mode;
+        break;
+      case "time-based":
+        scheme = resolveTimeBasedTheme(timeBasedSettings);
+        break;
+      default:
+        scheme = "auto";
+    }
+    setColorScheme(scheme);
+  };
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme, timeBasedSettings]);
+  const setTheme = (mode) => {
+    setThemeState(mode);
+    localStorage.setItem(themeStorageKey, mode);
+    applyTheme(mode);
+  };
+  const toggleTheme = () => {
+    setTheme(colorScheme === "dark" ? "light" : "dark");
+  };
+  const currentTheme = theme === "time-based" ? resolveTimeBasedTheme(timeBasedSettings) : colorScheme === "auto" ? resolveAutoScheme() : colorScheme;
+  return /* @__PURE__ */ jsx2(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme,
+        currentTheme,
+        setTheme,
+        toggleTheme,
+        timeBasedSettings,
+        setTimeBasedSettings: handleSetTimeBasedSettings
+      },
+      children
+    }
+  );
+};
+
+// src/components/ThemeMenu.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  tooltip: "Ch\u1EBF \u0111\u1ED9 giao di\u1EC7n",
+  title: "Ch\u1EBF \u0111\u1ED9 giao di\u1EC7n",
+  light: "S\xE1ng",
+  dark: "T\u1ED1i",
+  auto: "Theo h\u1EC7 th\u1ED1ng",
+  timeBased: "Theo th\u1EDDi gian"
+};
+var MODE_ICONS = {
+  light: /* @__PURE__ */ jsx3(Sun, { size: 16 }),
+  dark: /* @__PURE__ */ jsx3(Moon, { size: 16 }),
+  auto: /* @__PURE__ */ jsx3(Monitor, { size: 16 }),
+  "time-based": /* @__PURE__ */ jsx3(Clock, { size: 16 })
+};
+function ThemeMenu({
+  modes = ["light", "dark", "auto", "time-based"],
+  labels = {},
+  iconSize = 20,
+  size = "lg",
+  menuProps = {}
+}) {
+  const { theme, currentTheme, setTheme } = useTheme();
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const isDark = currentTheme === "dark";
+  const activeColor = isDark ? "yellow.8" : "blue.8";
+  const triggerIcon = theme === "light" ? /* @__PURE__ */ jsx3(Sun, { size: iconSize, strokeWidth: 2 }) : theme === "dark" ? /* @__PURE__ */ jsx3(Moon, { size: iconSize, strokeWidth: 2 }) : theme === "auto" ? /* @__PURE__ */ jsx3(Monitor, { size: iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsx3(Clock, { size: iconSize, strokeWidth: 2 });
+  return /* @__PURE__ */ jsxs2(Menu, { shadow: "md", width: 200, position: "bottom-end", ...menuProps, children: [
+    /* @__PURE__ */ jsx3(Menu.Target, { children: /* @__PURE__ */ jsx3(Tooltip2, { label: text.tooltip, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx3(
+      ActionIcon2,
+      {
+        variant: "subtle",
+        color: activeColor,
+        size,
+        radius: "lg",
+        style: {
+          boxShadow: isDark ? "0 0 15px rgba(250, 176, 5, 0.2)" : "0 0 15px rgba(34, 139, 230, 0.2)"
+        },
+        children: triggerIcon
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs2(Menu.Dropdown, { style: { borderRadius: "11px" }, children: [
+      /* @__PURE__ */ jsx3(Menu.Label, { children: text.title }),
+      modes.map((mode) => /* @__PURE__ */ jsx3(
+        Menu.Item,
+        {
+          leftSection: MODE_ICONS[mode],
+          onClick: () => setTheme(mode),
+          color: theme === mode ? activeColor : void 0,
+          fw: theme === mode ? 700 : 400,
+          children: text[mode === "time-based" ? "timeBased" : mode]
+        },
+        mode
+      ))
+    ] })
+  ] });
+}
+
 // src/modals/Information.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import {
   Modal,
   Stack as Stack2,
@@ -113,8 +279,8 @@ import {
   ThemeIcon,
   SimpleGrid,
   Paper,
-  ActionIcon as ActionIcon2,
-  Tooltip as Tooltip2,
+  ActionIcon as ActionIcon3,
+  Tooltip as Tooltip3,
   useComputedColorScheme
 } from "@mantine/core";
 import {
@@ -268,10 +434,10 @@ function formatHumanDate(date, options) {
 }
 
 // src/modals/Information.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_TITLE = /* @__PURE__ */ jsxs2(Group2, { gap: "xs", wrap: "nowrap", children: [
-  /* @__PURE__ */ jsx2(IconCpu, { size: 20 }),
-  /* @__PURE__ */ jsx2("span", { children: "System Information" })
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_TITLE = /* @__PURE__ */ jsxs3(Group2, { gap: "xs", wrap: "nowrap", children: [
+  /* @__PURE__ */ jsx4(IconCpu, { size: 20 }),
+  /* @__PURE__ */ jsx4("span", { children: "System Information" })
 ] });
 function InformationContent({ info }) {
   const colorScheme = useComputedColorScheme();
@@ -279,46 +445,46 @@ function InformationContent({ info }) {
   const versionType = info.versionType ?? DEFAULT_VERSION_TYPE;
   const cards = [
     {
-      icon: /* @__PURE__ */ jsx2(IconUser, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(IconUser, { size: 18 }),
       label: "Author",
       value: author,
       color: "blue"
     },
     {
-      icon: /* @__PURE__ */ jsx2(IconLicense, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(IconLicense, { size: 18 }),
       label: "License",
       value: info.license ?? DEFAULT_LICENSE,
       color: "orange"
     },
     {
-      icon: /* @__PURE__ */ jsx2(IconMapPin, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(IconMapPin, { size: 18 }),
       label: "Location",
       value: info.location ?? DEFAULT_LOCATION,
       color: "teal"
     },
     {
-      icon: /* @__PURE__ */ jsx2(IconTag, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(IconTag, { size: 18 }),
       label: "Version Type",
       value: versionType,
       color: "red"
     },
     {
-      icon: /* @__PURE__ */ jsx2(IconCalendar, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(IconCalendar, { size: 18 }),
       label: "Build Time",
       value: info.buildTime !== void 0 ? formatAbsoluteAndRelativeTime(info.buildTime) : UNKNOWN,
       color: "green"
     },
     ...info.metadata ?? []
   ];
-  return /* @__PURE__ */ jsxs2(Stack2, { gap: "lg", children: [
-    /* @__PURE__ */ jsxs2(Stack2, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ jsxs3(Stack2, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs3(Stack2, { gap: "xs", align: "center", children: [
       info.logo,
-      /* @__PURE__ */ jsxs2(Stack2, { gap: 2, align: "center", children: [
-        /* @__PURE__ */ jsx2(Title, { order: 2, children: info.name }),
-        info.tagline && /* @__PURE__ */ jsx2(Text2, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
+      /* @__PURE__ */ jsxs3(Stack2, { gap: 2, align: "center", children: [
+        /* @__PURE__ */ jsx4(Title, { order: 2, children: info.name }),
+        info.tagline && /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
       ] }),
-      /* @__PURE__ */ jsxs2(Group2, { gap: "xs", children: [
-        info.version && /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(Group2, { gap: "xs", children: [
+        info.version && /* @__PURE__ */ jsxs3(
           Badge,
           {
             size: "lg",
@@ -333,7 +499,7 @@ function InformationContent({ info }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           Badge,
           {
             size: "lg",
@@ -350,39 +516,39 @@ function InformationContent({ info }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx2(Divider, { label: "System Information", labelPosition: "center" }),
-    /* @__PURE__ */ jsxs2(SimpleGrid, { cols: { base: 1, sm: 2 }, children: [
-      cards.map((card) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(Divider, { label: "System Information", labelPosition: "center" }),
+    /* @__PURE__ */ jsxs3(SimpleGrid, { cols: { base: 1, sm: 2 }, children: [
+      cards.map((card) => /* @__PURE__ */ jsx4(
         InfoCard,
         {
-          icon: card.icon ?? /* @__PURE__ */ jsx2(IconAward, { size: 18 }),
+          icon: card.icon ?? /* @__PURE__ */ jsx4(IconAward, { size: 18 }),
           label: card.label,
           value: card.value,
           color: card.color ?? "gray"
         },
         card.label
       )),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx4(
         Paper,
         {
           withBorder: true,
           p: "sm",
           radius: "18px",
           bg: colorScheme === "dark" ? "gray.9" : "gray.0",
-          children: /* @__PURE__ */ jsxs2(Group2, { justify: "space-between", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsxs2(Group2, { gap: "sm", flex: 1, children: [
-              /* @__PURE__ */ jsx2(ThemeIcon, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ jsx2(IconHash, { size: 18 }) }),
-              /* @__PURE__ */ jsxs2(Stack2, { gap: 2, children: [
-                /* @__PURE__ */ jsx2(Text2, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
-                /* @__PURE__ */ jsx2(Text2, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
+          children: /* @__PURE__ */ jsxs3(Group2, { justify: "space-between", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxs3(Group2, { gap: "sm", flex: 1, children: [
+              /* @__PURE__ */ jsx4(ThemeIcon, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ jsx4(IconHash, { size: 18 }) }),
+              /* @__PURE__ */ jsxs3(Stack2, { gap: 2, children: [
+                /* @__PURE__ */ jsx4(Text2, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
+                /* @__PURE__ */ jsx4(Text2, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
               ] })
             ] }),
-            info.buildId && /* @__PURE__ */ jsx2(CopyBuildIdButton, { buildId: info.buildId })
+            info.buildId && /* @__PURE__ */ jsx4(CopyBuildIdButton, { buildId: info.buildId })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       Footer,
       {
         copyright: info.copyright,
@@ -399,7 +565,7 @@ function InformationModal({
   info,
   title = DEFAULT_TITLE
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     Modal,
     {
       opened,
@@ -419,12 +585,12 @@ function InformationModal({
         }
       },
       title,
-      children: /* @__PURE__ */ jsx2(InformationContent, { info })
+      children: /* @__PURE__ */ jsx4(InformationContent, { info })
     }
   );
 }
 function CopyBuildIdButton({ buildId }) {
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState2(false);
   const handleCopy = async () => {
     const success = await copyToClipboard(buildId);
     if (success) {
@@ -432,13 +598,13 @@ function CopyBuildIdButton({ buildId }) {
       setTimeout(() => setCopied(false), 2e3);
     }
   };
-  return /* @__PURE__ */ jsx2(Tooltip2, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx2(
-    ActionIcon2,
+  return /* @__PURE__ */ jsx4(Tooltip3, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx4(
+    ActionIcon3,
     {
       variant: "subtle",
       color: copied ? "teal" : "gray",
       onClick: handleCopy,
-      children: copied ? /* @__PURE__ */ jsx2(IconCheck, { size: 16 }) : /* @__PURE__ */ jsx2(IconCopy, { size: 16 })
+      children: copied ? /* @__PURE__ */ jsx4(IconCheck, { size: 16 }) : /* @__PURE__ */ jsx4(IconCopy, { size: 16 })
     }
   ) });
 }
@@ -449,14 +615,115 @@ function InfoCard({
   color
 }) {
   const colorScheme = useComputedColorScheme();
-  return /* @__PURE__ */ jsx2(Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ jsxs2(Group2, { gap: "sm", align: "flex-start", children: [
-    /* @__PURE__ */ jsx2(ThemeIcon, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
-    /* @__PURE__ */ jsxs2(Stack2, { gap: 2, flex: 1, children: [
-      /* @__PURE__ */ jsx2(Text2, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
-      /* @__PURE__ */ jsx2(Text2, { size: "sm", fw: 500, lineClamp: 1, children: value })
+  return /* @__PURE__ */ jsx4(Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ jsxs3(Group2, { gap: "sm", align: "flex-start", children: [
+    /* @__PURE__ */ jsx4(ThemeIcon, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
+    /* @__PURE__ */ jsxs3(Stack2, { gap: 2, flex: 1, children: [
+      /* @__PURE__ */ jsx4(Text2, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
+      /* @__PURE__ */ jsx4(Text2, { size: "sm", fw: 500, lineClamp: 1, children: value })
     ] })
   ] }) });
 }
+
+// src/pages/NotFound.tsx
+import {
+  Box,
+  Button,
+  Container,
+  Group as Group3,
+  Paper as Paper2,
+  Text as Text3,
+  Title as Title2,
+  Code,
+  Badge as Badge2
+} from "@mantine/core";
+import {
+  IconArrowLeft,
+  IconHome,
+  IconSearch,
+  IconFileOff
+} from "@tabler/icons-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function NotFound({
+  path,
+  onSearchClick,
+  onHomeClick
+}) {
+  const currentPath = path || (typeof window !== "undefined" ? window.location.pathname : "/404");
+  return /* @__PURE__ */ jsx5(
+    Box,
+    {
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        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__ */ jsx5(Container, { size: "xl", py: 80, children: /* @__PURE__ */ jsxs4(Paper2, { radius: "xl", p: 48, withBorder: true, style: { borderColor: "var(--mantine-color-default-border)", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx5(
+          Box,
+          {
+            mx: "auto",
+            mb: "xl",
+            w: 96,
+            h: 96,
+            style: {
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              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__ */ jsx5(IconFileOff, { size: 44, stroke: 1.5, color: "white" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Text3,
+          {
+            fz: { base: 72, sm: 100 },
+            fw: 900,
+            lh: 1,
+            variant: "gradient",
+            gradient: { from: "blue.7", to: "cyan.5", deg: 45 },
+            children: "404"
+          }
+        ),
+        /* @__PURE__ */ jsx5(Badge2, { variant: "light", color: "blue", size: "lg", mb: "xs", children: "NOT FOUND" }),
+        /* @__PURE__ */ jsx5(Title2, { order: 2, mt: "sm", mb: "xs", children: "Trang kh\xF4ng t\u1ED3n t\u1EA1i" }),
+        /* @__PURE__ */ jsx5(Text3, { 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__ */ jsx5(Box, { mt: "lg", children: /* @__PURE__ */ jsx5(Code, { color: "blue", variant: "light", px: "md", py: 6, children: currentPath }) }),
+        /* @__PURE__ */ jsxs4(Group3, { gap: "sm", mt: "xl", justify: "center", children: [
+          /* @__PURE__ */ jsx5(
+            Button,
+            {
+              variant: "light",
+              leftSection: /* @__PURE__ */ jsx5(IconArrowLeft, { size: 16 }),
+              onClick: () => window.history.back(),
+              children: "Quay l\u1EA1i"
+            }
+          ),
+          onSearchClick && /* @__PURE__ */ jsx5(
+            Button,
+            {
+              variant: "outline",
+              leftSection: /* @__PURE__ */ jsx5(IconSearch, { size: 16 }),
+              onClick: onSearchClick,
+              children: "T\xECm Docs"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            Button,
+            {
+              leftSection: /* @__PURE__ */ jsx5(IconHome, { size: 16 }),
+              onClick: onHomeClick || (() => window.location.href = "/"),
+              children: "Trang ch\u1EE7"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
 export {
   DEFAULT_AUTHOR,
   DEFAULT_AUTHOR_HREF,
@@ -467,6 +734,9 @@ export {
   Footer,
   InformationContent,
   InformationModal,
+  NotFound,
+  ThemeMenu,
+  ThemeProvider,
   UNKNOWN,
   calculateRemainingTime,
   copyToClipboard,
@@ -475,6 +745,8 @@ export {
   formatHumanDate,
   formatRelativeTime,
   normalizeDate,
-  pad
+  pad,
+  resolveColorScheme,
+  useTheme
 };
 //# sourceMappingURL=index.js.map