@otmc/ui 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -20,17 +20,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Footer: () => Footer
+  DEFAULT_AUTHOR: () => DEFAULT_AUTHOR,
+  DEFAULT_AUTHOR_HREF: () => DEFAULT_AUTHOR_HREF,
+  DEFAULT_COPYRIGHT: () => DEFAULT_COPYRIGHT,
+  DEFAULT_LICENSE: () => DEFAULT_LICENSE,
+  DEFAULT_LOCATION: () => DEFAULT_LOCATION,
+  DEFAULT_VERSION_TYPE: () => DEFAULT_VERSION_TYPE,
+  Footer: () => Footer,
+  InformationContent: () => InformationContent,
+  InformationModal: () => InformationModal,
+  NotFound: () => NotFound,
+  ThemeMenu: () => ThemeMenu,
+  ThemeProvider: () => ThemeProvider,
+  UNKNOWN: () => UNKNOWN,
+  calculateRemainingTime: () => calculateRemainingTime,
+  copyToClipboard: () => copyToClipboard,
+  formatAbsolute: () => formatAbsolute,
+  formatAbsoluteAndRelativeTime: () => formatAbsoluteAndRelativeTime,
+  formatHumanDate: () => formatHumanDate,
+  formatRelativeTime: () => formatRelativeTime,
+  normalizeDate: () => normalizeDate,
+  pad: () => pad,
+  resolveColorScheme: () => resolveColorScheme,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/branding/Footer.tsx
 var import_core = require("@mantine/core");
 var import_icons_react = require("@tabler/icons-react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_COPYRIGHT = "OTMC Softwares. All rights reserved.";
+
+// src/utils/constants.ts
 var DEFAULT_AUTHOR = "Nguyen Van Trung, OTMC Contributors.";
-var DEFAULT_AUTHOR_HREF = "https://github.com";
+var DEFAULT_AUTHOR_HREF = "https://github.com/otmc-sw";
+var DEFAULT_COPYRIGHT = "OTMC Softwares. All rights reserved.";
+var DEFAULT_LICENSE = "OTMC License.";
+var DEFAULT_LOCATION = "An Nhon, Gia Lai, Viet Nam.";
+var DEFAULT_VERSION_TYPE = "Internal";
+var UNKNOWN = "Unknown";
+
+// src/branding/Footer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_SOCIAL_LINKS = [
   {
     label: "Facebook",
@@ -111,8 +141,609 @@ function Footer({
     ) }, link.href)) })
   ] });
 }
+
+// src/components/ThemeMenu.tsx
+var import_core3 = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
+
+// src/contexts/ThemeProvider.tsx
+var import_react = require("react");
+var import_core2 = require("@mantine/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(null);
+var useTheme = () => {
+  const ctx = (0, import_react.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 } = (0, import_core2.useMantineColorScheme)();
+  const [theme, setThemeState] = (0, import_react.useState)(
+    () => localStorage.getItem(themeStorageKey) ?? defaultTheme
+  );
+  const [timeBasedSettings, setTimeBasedSettings] = (0, import_react.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);
+  };
+  (0, import_react.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__ */ (0, import_jsx_runtime2.jsx)(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme,
+        currentTheme,
+        setTheme,
+        toggleTheme,
+        timeBasedSettings,
+        setTimeBasedSettings: handleSetTimeBasedSettings
+      },
+      children
+    }
+  );
+};
+
+// src/components/ThemeMenu.tsx
+var import_jsx_runtime3 = require("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__ */ (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 })
+};
+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__ */ (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 });
+  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,
+      {
+        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__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Menu.Dropdown, { style: { borderRadius: "11px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Menu.Label, { children: text.title }),
+      modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_core3.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
+var import_react2 = require("react");
+var import_core4 = require("@mantine/core");
+var import_icons_react2 = require("@tabler/icons-react");
+
+// src/utils/commonUtils.ts
+var copyToClipboard = async (text) => {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "-9999px";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    const success = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return success;
+  } catch (err) {
+    console.error("Failed to copy to clipboard:", err);
+    return false;
+  }
+};
+
+// src/utils/timeUtils.ts
+function normalizeDate(dateInput) {
+  if (dateInput instanceof Date) {
+    return isNaN(dateInput.getTime()) ? null : dateInput;
+  }
+  if (typeof dateInput === "string") {
+    const date = new Date(dateInput);
+    return isNaN(date.getTime()) ? null : date;
+  }
+  if (typeof dateInput === "number") {
+    const timestamp = dateInput < 1e12 ? dateInput * 1e3 : dateInput;
+    const date = new Date(timestamp);
+    return isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+function pad(n, width = 2) {
+  return String(n).padStart(width, "0");
+}
+function formatAbsolute(date) {
+  const tz = -date.getTimezoneOffset();
+  const sign = tz >= 0 ? "+" : "-";
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} ${sign}${pad(Math.floor(Math.abs(tz) / 60))}:${pad(Math.abs(tz) % 60)}`;
+}
+function formatRelativeTime(date) {
+  const normalizedDate = normalizeDate(date);
+  if (!normalizedDate) return "Invalid date";
+  const now = Date.now();
+  const diffMs = now - normalizedDate.getTime();
+  const diffSeconds = Math.floor(diffMs / 1e3);
+  if (diffSeconds < 0) {
+    return "Just now";
+  }
+  if (diffSeconds < 60) {
+    return "Just now";
+  }
+  const minute = 60;
+  const hour = minute * 60;
+  const day = hour * 24;
+  const week = day * 7;
+  const month = day * 30;
+  const year = day * 365;
+  if (diffSeconds < hour) {
+    const mins = Math.floor(diffSeconds / minute);
+    return `${mins} min${mins !== 1 ? "s" : ""} ago`;
+  } else if (diffSeconds < day) {
+    const hours = Math.floor(diffSeconds / hour);
+    return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
+  } else if (diffSeconds < week) {
+    const days = Math.floor(diffSeconds / day);
+    return `${days} day${days !== 1 ? "s" : ""} ago`;
+  } else if (diffSeconds < month) {
+    const weeks = Math.floor(diffSeconds / week);
+    return `${weeks} week${weeks !== 1 ? "s" : ""} ago`;
+  } else if (diffSeconds < year) {
+    const months = Math.floor(diffSeconds / month);
+    return `${months} month${months !== 1 ? "s" : ""} ago`;
+  } else {
+    const years = Math.floor(diffSeconds / year);
+    return `${years} year${years !== 1 ? "s" : ""} ago`;
+  }
+}
+function formatAbsoluteAndRelativeTime(date) {
+  const normalizedDate = normalizeDate(date);
+  if (!normalizedDate) return "Invalid date";
+  const absoluteTime = formatAbsolute(normalizedDate);
+  const relativeTime = formatRelativeTime(normalizedDate);
+  return `${absoluteTime} (${relativeTime})`;
+}
+function calculateRemainingTime(targetDate) {
+  if (!targetDate) return "Not set";
+  const normalizedDate = normalizeDate(targetDate);
+  if (!normalizedDate) return "Invalid date";
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = normalizedDate.getTime() - now.getTime();
+  if (diffMs < 0) {
+    const daysOverdue = Math.floor(Math.abs(diffMs) / (1e3 * 60 * 60 * 24));
+    return `Overdue ${daysOverdue}d`;
+  }
+  const days = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+  const hours = Math.floor(diffMs % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
+  if (days > 0) {
+    return `${days}d ${hours}h`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else {
+    return "< 1h";
+  }
+}
+var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function formatHumanDate(date, options) {
+  const normalizedDate = normalizeDate(date);
+  if (!normalizedDate) return "Invalid date";
+  const month = MONTH_NAMES[normalizedDate.getMonth()];
+  const day = normalizedDate.getDate();
+  const year = normalizedDate.getFullYear();
+  if (!options?.showTime) {
+    return `${month} ${day}, ${year}`;
+  }
+  const hours = normalizedDate.getHours();
+  const minutes = normalizedDate.getMinutes();
+  const seconds = normalizedDate.getSeconds();
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const hours12 = hours % 12 || 12;
+  let timeStr = `${hours12}:${pad(minutes)}`;
+  if (options.showSeconds) {
+    timeStr += `:${pad(seconds)}`;
+  }
+  timeStr += ` ${ampm}`;
+  return `${month} ${day}, ${year} ${timeStr}`;
+}
+
+// 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" })
+] });
+function InformationContent({ info }) {
+  const colorScheme = (0, import_core4.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 }),
+      label: "Author",
+      value: author,
+      color: "blue"
+    },
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconLicense, { size: 18 }),
+      label: "License",
+      value: info.license ?? DEFAULT_LICENSE,
+      color: "orange"
+    },
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconMapPin, { size: 18 }),
+      label: "Location",
+      value: info.location ?? DEFAULT_LOCATION,
+      color: "teal"
+    },
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconTag, { size: 18 }),
+      label: "Version Type",
+      value: versionType,
+      color: "red"
+    },
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconCalendar, { 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: [
+      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_runtime4.jsxs)(import_core4.Group, { gap: "xs", children: [
+        info.version && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_core4.Badge,
+          {
+            size: "lg",
+            color: "blue",
+            variant: "outline",
+            mt: "sm",
+            tt: "none",
+            fw: 600,
+            children: [
+              "\u2728 v",
+              info.version
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_core4.Badge,
+          {
+            size: "lg",
+            color: "teal",
+            variant: "light",
+            mt: "sm",
+            tt: "none",
+            fw: 600,
+            children: [
+              "\u{1F9E9} ",
+              versionType
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__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)(
+        InfoCard,
+        {
+          icon: card.icon ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react2.IconAward, { size: 18 }),
+          label: card.label,
+          value: card.value,
+          color: card.color ?? "gray"
+        },
+        card.label
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_core4.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 })
+              ] })
+            ] }),
+            info.buildId && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CopyBuildIdButton, { buildId: info.buildId })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Footer,
+      {
+        copyright: info.copyright,
+        author,
+        authorHref: info.authorHref,
+        socialLinks: info.socialLinks
+      }
+    )
+  ] });
+}
+function InformationModal({
+  opened,
+  onClose,
+  info,
+  title = DEFAULT_TITLE
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_core4.Modal,
+    {
+      opened,
+      onClose,
+      withCloseButton: true,
+      centered: true,
+      radius: "lg",
+      size: "60%",
+      styles: {
+        content: {
+          maxHeight: "90vh",
+          height: "90vh"
+        },
+        body: {
+          flex: 1,
+          overflow: "auto"
+        }
+      },
+      title,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InformationContent, { info })
+    }
+  );
+}
+function CopyBuildIdButton({ buildId }) {
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const handleCopy = async () => {
+    const success = await copyToClipboard(buildId);
+    if (success) {
+      setCopied(true);
+      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,
+    {
+      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 })
+    }
+  ) });
+}
+function InfoCard({
+  icon,
+  label,
+  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 })
+    ] })
+  ] }) });
+}
+
+// src/pages/NotFound.tsx
+var import_core5 = require("@mantine/core");
+var import_icons_react3 = require("@tabler/icons-react");
+var import_jsx_runtime5 = 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,
+    {
+      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__ */ (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,
+          {
+            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__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconFileOff, { size: 44, stroke: 1.5, color: "white" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_core5.Text,
+          {
+            fz: { base: 72, sm: 100 },
+            fw: 900,
+            lh: 1,
+            variant: "gradient",
+            gradient: { from: "blue.7", to: "cyan.5", deg: 45 },
+            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,
+            {
+              variant: "light",
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.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,
+            {
+              variant: "outline",
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconSearch, { size: 16 }),
+              onClick: onSearchClick,
+              children: "T\xECm Docs"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core5.Button,
+            {
+              leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react3.IconHome, { size: 16 }),
+              onClick: onHomeClick || (() => window.location.href = "/"),
+              children: "Trang ch\u1EE7"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Footer
+  DEFAULT_AUTHOR,
+  DEFAULT_AUTHOR_HREF,
+  DEFAULT_COPYRIGHT,
+  DEFAULT_LICENSE,
+  DEFAULT_LOCATION,
+  DEFAULT_VERSION_TYPE,
+  Footer,
+  InformationContent,
+  InformationModal,
+  NotFound,
+  ThemeMenu,
+  ThemeProvider,
+  UNKNOWN,
+  calculateRemainingTime,
+  copyToClipboard,
+  formatAbsolute,
+  formatAbsoluteAndRelativeTime,
+  formatHumanDate,
+  formatRelativeTime,
+  normalizeDate,
+  pad,
+  resolveColorScheme,
+  useTheme
 });
 //# sourceMappingURL=index.cjs.map