gov-layout 1.2.9 → 1.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +81 -59
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +82 -61
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -164,6 +164,12 @@ interface FontSizeSettingsProps {
164
164
  }
165
165
  declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
166
166
 
167
+ /**
168
+ * Hook ตรวจสอบ dark mode จาก class "dark" บน <html>
169
+ * ใช้ MutationObserver เพื่อ react ทันทีเมื่อ theme เปลี่ยน
170
+ */
171
+ declare function useDarkMode(): boolean;
172
+
167
173
  interface IconProps {
168
174
  size?: number;
169
175
  className?: string;
@@ -239,4 +245,4 @@ declare const Icons: {
239
245
  readonly Trash: typeof TrashIcon;
240
246
  };
241
247
 
242
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
248
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
package/dist/index.d.ts CHANGED
@@ -164,6 +164,12 @@ interface FontSizeSettingsProps {
164
164
  }
165
165
  declare function FontSizeSettings({ onBack }: FontSizeSettingsProps): react_jsx_runtime.JSX.Element;
166
166
 
167
+ /**
168
+ * Hook ตรวจสอบ dark mode จาก class "dark" บน <html>
169
+ * ใช้ MutationObserver เพื่อ react ทันทีเมื่อ theme เปลี่ยน
170
+ */
171
+ declare function useDarkMode(): boolean;
172
+
167
173
  interface IconProps {
168
174
  size?: number;
169
175
  className?: string;
@@ -239,4 +245,4 @@ declare const Icons: {
239
245
  readonly Trash: typeof TrashIcon;
240
246
  };
241
247
 
242
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
248
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
package/dist/index.js CHANGED
@@ -4,7 +4,20 @@ var react = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
 
6
6
  // src/sidebar/StaffSidebar.tsx
7
+ function useDarkMode() {
8
+ const [isDark, setIsDark] = react.useState(false);
9
+ react.useEffect(() => {
10
+ const root = document.documentElement;
11
+ const check = () => setIsDark(root.classList.contains("dark"));
12
+ check();
13
+ const observer = new MutationObserver(check);
14
+ observer.observe(root, { attributes: true, attributeFilter: ["class"] });
15
+ return () => observer.disconnect();
16
+ }, []);
17
+ return isDark;
18
+ }
7
19
  function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
20
+ const isDark = useDarkMode();
8
21
  if (collapsed) {
9
22
  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
10
23
  display: "flex",
@@ -61,7 +74,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
61
74
  fontWeight: 700,
62
75
  fontSize: "16px",
63
76
  lineHeight: "22px",
64
- color: "var(--color-alias-color-brand-text-dark, #05010e)",
77
+ color: isDark ? "#ffffff" : "var(--color-alias-color-brand-text-dark, #05010e)",
65
78
  margin: 0,
66
79
  overflow: "hidden",
67
80
  textOverflow: "ellipsis",
@@ -70,7 +83,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
70
83
  orgSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
71
84
  fontSize: "14px",
72
85
  lineHeight: "20px",
73
- color: "var(--color-alias-text-colors-tertiary, #475272)",
86
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
74
87
  margin: 0,
75
88
  overflow: "hidden",
76
89
  textOverflow: "ellipsis",
@@ -420,6 +433,7 @@ function MenuItemComponent({
420
433
  collapsed = false,
421
434
  onExpandRequest
422
435
  }) {
436
+ const isDark = useDarkMode();
423
437
  const hasChildren = item.children && item.children.length > 0;
424
438
  const isActive = item.path ? currentPath === item.path : false;
425
439
  const resolvedIcon = item.icon || getAutoIcon(item.id);
@@ -442,7 +456,7 @@ function MenuItemComponent({
442
456
  }
443
457
  };
444
458
  const activeColor = "var(--color-alias-color-brand-primary, #1e7d55)";
445
- const hoverBg = "var(--color-foundations-fuji-pallet-light, #ebedf5)";
459
+ const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
446
460
  if (collapsed && depth === 0) {
447
461
  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
448
462
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -465,7 +479,7 @@ function MenuItemComponent({
465
479
  borderRadius: "8px",
466
480
  border: "none",
467
481
  background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
468
- color: isActive || isChildActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)",
482
+ color: isActive || isChildActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
469
483
  cursor: "pointer",
470
484
  transition: "background-color 0.15s ease"
471
485
  },
@@ -480,7 +494,7 @@ function MenuItemComponent({
480
494
  ),
481
495
  item.dividerAfter && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: {
482
496
  border: "none",
483
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
497
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
484
498
  margin: "8px 4px"
485
499
  } })
486
500
  ] });
@@ -505,7 +519,7 @@ function MenuItemComponent({
505
519
  borderRadius: "8px",
506
520
  border: "none",
507
521
  background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
508
- color: isActive ? activeColor : "var(--color-alias-text-colors-primary, #060d26)",
522
+ color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
509
523
  cursor: "pointer",
510
524
  transition: "background-color 0.15s ease",
511
525
  textAlign: "left",
@@ -521,7 +535,7 @@ function MenuItemComponent({
521
535
  alignItems: "center",
522
536
  justifyContent: "center",
523
537
  flexShrink: 0,
524
- color: isActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)"
538
+ color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
525
539
  }, children: resolvedIcon }),
526
540
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title }),
527
541
  hasChildren && /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { isOpen: expanded })
@@ -540,7 +554,7 @@ function MenuItemComponent({
540
554
  )) }),
541
555
  item.dividerAfter && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("hr", { style: {
542
556
  border: "none",
543
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
557
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
544
558
  margin: "8px 0"
545
559
  } }) })
546
560
  ] });
@@ -592,8 +606,8 @@ function ProfileIcon() {
592
606
  return /* @__PURE__ */ jsxRuntime.jsxs(
593
607
  "svg",
594
608
  {
595
- width: "18",
596
- height: "18",
609
+ width: "24",
610
+ height: "24",
597
611
  viewBox: "0 0 24 24",
598
612
  fill: "none",
599
613
  stroke: "currentColor",
@@ -614,6 +628,7 @@ function SidebarUserProfile({
614
628
  collapsed,
615
629
  onProfile
616
630
  }) {
631
+ const isDark = useDarkMode();
617
632
  if (!user) return null;
618
633
  const getFullName = () => {
619
634
  if (user.firstName && user.lastName) {
@@ -627,7 +642,7 @@ function SidebarUserProfile({
627
642
  if (collapsed) {
628
643
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
629
644
  padding: "12px 8px",
630
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
645
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
631
646
  display: "flex",
632
647
  flexDirection: "column",
633
648
  alignItems: "center",
@@ -677,7 +692,7 @@ function SidebarUserProfile({
677
692
  onClick: onProfile,
678
693
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
679
694
  onMouseEnter: (e) => {
680
- e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
695
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
681
696
  },
682
697
  onMouseLeave: (e) => {
683
698
  e.currentTarget.style.backgroundColor = "transparent";
@@ -688,7 +703,7 @@ function SidebarUserProfile({
688
703
  borderRadius: "8px",
689
704
  border: "none",
690
705
  background: "transparent",
691
- color: "var(--color-alias-color-brand-primary, #1e7d55)",
706
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)",
692
707
  cursor: "pointer",
693
708
  display: "flex",
694
709
  alignItems: "center",
@@ -732,7 +747,7 @@ function SidebarUserProfile({
732
747
  {
733
748
  style: {
734
749
  padding: "16px 20px",
735
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
750
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
736
751
  display: "flex",
737
752
  alignItems: "center",
738
753
  gap: "12px"
@@ -795,7 +810,7 @@ function SidebarUserProfile({
795
810
  fontWeight: 600,
796
811
  fontSize: "14px",
797
812
  lineHeight: "20px",
798
- color: "var(--color-alias-text-colors-primary, #060d26)",
813
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
799
814
  margin: 0,
800
815
  overflow: "hidden",
801
816
  textOverflow: "ellipsis",
@@ -804,7 +819,7 @@ function SidebarUserProfile({
804
819
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
805
820
  fontSize: "12px",
806
821
  lineHeight: "16px",
807
- color: "var(--color-alias-text-colors-tertiary, #475272)",
822
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
808
823
  margin: 0
809
824
  }, children: roleLabel })
810
825
  ] })
@@ -817,7 +832,7 @@ function SidebarUserProfile({
817
832
  onClick: onProfile,
818
833
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
819
834
  onMouseEnter: (e) => {
820
- e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
835
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
821
836
  },
822
837
  onMouseLeave: (e) => {
823
838
  e.currentTarget.style.backgroundColor = "transparent";
@@ -828,7 +843,7 @@ function SidebarUserProfile({
828
843
  borderRadius: "8px",
829
844
  border: "none",
830
845
  background: "transparent",
831
- color: "var(--color-alias-color-brand-primary, #1e7d55)",
846
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)",
832
847
  cursor: "pointer",
833
848
  display: "flex",
834
849
  alignItems: "center",
@@ -929,6 +944,7 @@ function StaffSidebar({
929
944
  onToggle,
930
945
  onExpandRequest
931
946
  }) {
947
+ const isDark = useDarkMode();
932
948
  const [internalOpen, setInternalOpen] = react.useState(true);
933
949
  const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
934
950
  const collapsed = collapsible && !sidebarOpen;
@@ -964,13 +980,14 @@ function StaffSidebar({
964
980
  left: 0,
965
981
  height: "100vh",
966
982
  width: currentWidth,
967
- background: "#fff",
968
- borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
983
+ background: isDark ? "#1e293b" : "#fff",
984
+ borderRight: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
969
985
  display: "flex",
970
986
  flexDirection: "column",
971
987
  zIndex: 40,
972
988
  overflow: "hidden",
973
- transition: "width 0.3s ease"
989
+ transition: "width 0.3s ease",
990
+ color: isDark ? "#ffffff" : void 0
974
991
  },
975
992
  children: [
976
993
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -996,7 +1013,7 @@ function StaffSidebar({
996
1013
  resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
997
1014
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: {
998
1015
  border: "none",
999
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
1016
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1000
1017
  margin: "4px 12px"
1001
1018
  } }),
1002
1019
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1030,10 +1047,10 @@ function StaffSidebar({
1030
1047
  onClick: handleToggle,
1031
1048
  title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
1032
1049
  onMouseEnter: (e) => {
1033
- e.currentTarget.style.backgroundColor = "#f3f4f6";
1050
+ e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
1034
1051
  },
1035
1052
  onMouseLeave: (e) => {
1036
- e.currentTarget.style.backgroundColor = "#fff";
1053
+ e.currentTarget.style.backgroundColor = isDark ? "#1e293b" : "#fff";
1037
1054
  },
1038
1055
  style: {
1039
1056
  position: "fixed",
@@ -1043,16 +1060,16 @@ function StaffSidebar({
1043
1060
  width: "24px",
1044
1061
  height: "40px",
1045
1062
  borderRadius: "0 6px 6px 0",
1046
- border: "1px solid var(--color-border-colors-neutral, #c8cedd)",
1063
+ border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1047
1064
  borderLeft: "none",
1048
- background: "#fff",
1065
+ background: isDark ? "#1e293b" : "#fff",
1049
1066
  cursor: "pointer",
1050
1067
  display: "flex",
1051
1068
  alignItems: "center",
1052
1069
  justifyContent: "center",
1053
- boxShadow: "2px 0 8px rgba(0,0,0,0.06)",
1070
+ boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
1054
1071
  transition: "left 0.3s ease",
1055
- color: "var(--color-alias-text-colors-tertiary, #475272)"
1072
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)"
1056
1073
  },
1057
1074
  children: /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { isOpen: sidebarOpen })
1058
1075
  }
@@ -1064,7 +1081,7 @@ function BellIcon2() {
1064
1081
  "path",
1065
1082
  {
1066
1083
  d: "M21.2321 13.4463L19.3618 6.71712C18.8136 4.74574 17.6222 3.01418 15.9769 1.79767C14.3316 0.581165 12.3269 -0.0504751 10.2814 0.00315377C8.23593 0.0567826 6.26708 0.792603 4.6878 2.09365C3.10852 3.3947 2.00945 5.18632 1.5653 7.18371L0.11728 13.6954C-0.0426654 14.4149 -0.0389674 15.1611 0.128101 15.879C0.29517 16.5969 0.621344 17.2681 1.08254 17.8431C1.54374 18.418 2.12818 18.8821 2.79272 19.2009C3.45727 19.5198 4.18494 19.6853 4.92202 19.6853H6.01861C6.24454 20.7979 6.84817 21.7982 7.72723 22.5167C8.60629 23.2352 9.70671 23.6277 10.842 23.6277C11.9774 23.6277 13.0778 23.2352 13.9569 22.5167C14.8359 21.7982 15.4396 20.7979 15.6655 19.6853H16.4904C17.2492 19.6853 17.9977 19.5099 18.6774 19.1728C19.3572 18.8357 19.9498 18.346 20.409 17.742C20.8682 17.1379 21.1815 16.4359 21.3245 15.6907C21.4674 14.9455 21.4352 14.1774 21.2321 13.4463ZM10.842 21.654C10.2334 21.6515 9.64049 21.461 9.1443 21.1086C8.6481 20.7562 8.27291 20.2591 8.07005 19.6853H13.614C13.4112 20.2591 13.036 20.7562 12.5398 21.1086C12.0436 21.461 11.4506 21.6515 10.842 21.654ZM18.8411 16.55C18.5668 16.9139 18.2114 17.2088 17.8032 17.4113C17.3949 17.6138 16.9451 17.7183 16.4894 17.7165H4.92202C4.47982 17.7164 4.04328 17.6171 3.64463 17.4257C3.24598 17.2344 2.89539 16.9559 2.61874 16.611C2.34208 16.266 2.14643 15.8633 2.04622 15.4326C1.94602 15.0019 1.94381 14.5542 2.03977 14.1226L3.4868 7.60994C3.83561 6.04105 4.69886 4.63379 5.93932 3.61186C7.17978 2.58992 8.72625 2.01197 10.3329 1.96988C11.9395 1.92779 13.5142 2.42398 14.8064 3.37956C16.0987 4.33515 17.0344 5.69528 17.4649 7.24376L19.3352 13.9729C19.4588 14.4114 19.4785 14.8725 19.3927 15.3199C19.3069 15.7672 19.1181 16.1884 18.8411 16.55Z",
1067
- fill: "var(--color-alias-color-brand-text-dark, #05010e)"
1084
+ fill: "currentColor"
1068
1085
  }
1069
1086
  ) });
1070
1087
  }
@@ -1073,7 +1090,7 @@ function HamburgerIcon() {
1073
1090
  "path",
1074
1091
  {
1075
1092
  d: "M1.1875 17.8426C0.851042 17.8426 0.569077 17.7287 0.341604 17.501C0.113868 17.2735 0 16.9914 0 16.6547C0 16.3182 0.113868 16.0363 0.341604 15.8088C0.569077 15.5816 0.851042 15.468 1.1875 15.468H25.7292C26.0656 15.468 26.3476 15.5817 26.5751 15.8092C26.8028 16.0369 26.9167 16.3192 26.9167 16.6559C26.9167 16.9923 26.8028 17.2743 26.5751 17.5018C26.3476 17.729 26.0656 17.8426 25.7292 17.8426H1.1875ZM1.1875 10.1088C0.851042 10.1088 0.569077 9.99492 0.341604 9.76719C0.113868 9.53945 0 9.25735 0 8.9209C0 8.58417 0.113868 8.30221 0.341604 8.075C0.569077 7.84753 0.851042 7.73379 1.1875 7.73379H25.7292C26.0656 7.73379 26.3476 7.84766 26.5751 8.0754C26.8028 8.30313 26.9167 8.58523 26.9167 8.92169C26.9167 9.25841 26.8028 9.54037 26.5751 9.76758C26.3476 9.99506 26.0656 10.1088 25.7292 10.1088H1.1875ZM1.1875 2.3746C0.851042 2.3746 0.569077 2.26087 0.341604 2.0334C0.113868 1.80566 0 1.52343 0 1.18671C0 0.850249 0.113868 0.568284 0.341604 0.340812C0.569077 0.113604 0.851042 0 1.1875 0H25.7292C26.0656 0 26.3476 0.113868 26.5751 0.341604C26.8028 0.569077 26.9167 0.851174 26.9167 1.1879C26.9167 1.52435 26.8028 1.80632 26.5751 2.03379C26.3476 2.261 26.0656 2.3746 25.7292 2.3746H1.1875Z",
1076
- fill: "var(--color-alias-color-brand-text-dark, #05010e)"
1093
+ fill: "currentColor"
1077
1094
  }
1078
1095
  ) });
1079
1096
  }
@@ -1111,6 +1128,7 @@ function UserHeader({
1111
1128
  const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
1112
1129
  const [isNotifOpen, setIsNotifOpen] = react.useState(false);
1113
1130
  const notifRef = react.useRef(null);
1131
+ const isDark = useDarkMode();
1114
1132
  react.useEffect(() => {
1115
1133
  const handleClickOutside = (e) => {
1116
1134
  if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1126,11 +1144,12 @@ function UserHeader({
1126
1144
  {
1127
1145
  className,
1128
1146
  style: {
1129
- background: "#fff",
1130
- boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
1147
+ background: isDark ? "#1e293b" : "#fff",
1148
+ boxShadow: isDark ? "0 1px 3px rgba(0,0,0,0.3)" : "0 1px 3px rgba(0,0,0,0.08)",
1131
1149
  position: "sticky",
1132
1150
  top: 0,
1133
- zIndex: 10
1151
+ zIndex: 10,
1152
+ color: isDark ? "#ffffff" : void 0
1134
1153
  },
1135
1154
  children: /* @__PURE__ */ jsxRuntime.jsxs(
1136
1155
  "div",
@@ -1147,7 +1166,7 @@ function UserHeader({
1147
1166
  {
1148
1167
  onClick: onProfile,
1149
1168
  onMouseEnter: (e) => {
1150
- if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
1169
+ if (onProfile) e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
1151
1170
  },
1152
1171
  onMouseLeave: (e) => {
1153
1172
  if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
@@ -1203,7 +1222,7 @@ function UserHeader({
1203
1222
  style: {
1204
1223
  fontSize: "14px",
1205
1224
  fontWeight: 600,
1206
- color: "var(--color-alias-color-brand-text-dark, #05010e)",
1225
+ color: isDark ? "#ffffff" : "var(--color-alias-color-brand-text-dark, #05010e)",
1207
1226
  margin: 0
1208
1227
  },
1209
1228
  children: [
@@ -1213,7 +1232,7 @@ function UserHeader({
1213
1232
  "span",
1214
1233
  {
1215
1234
  style: {
1216
- color: "var(--color-alias-color-brand-primary, #1e7d55)"
1235
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)"
1217
1236
  },
1218
1237
  children: displayName
1219
1238
  }
@@ -1277,12 +1296,12 @@ function UserHeader({
1277
1296
  right: 0,
1278
1297
  marginTop: "8px",
1279
1298
  width: "360px",
1280
- background: "#fff",
1299
+ background: isDark ? "#1e293b" : "#fff",
1281
1300
  borderRadius: "12px",
1282
- boxShadow: "0 10px 40px rgba(0,0,0,0.12)",
1301
+ boxShadow: isDark ? "0 10px 40px rgba(0,0,0,0.4)" : "0 10px 40px rgba(0,0,0,0.12)",
1283
1302
  zIndex: 50,
1284
1303
  overflow: "hidden",
1285
- border: "1px solid #e5e7eb"
1304
+ border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
1286
1305
  },
1287
1306
  children: [
1288
1307
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1290,14 +1309,14 @@ function UserHeader({
1290
1309
  {
1291
1310
  style: {
1292
1311
  padding: "16px",
1293
- borderBottom: "1px solid #f3f4f6",
1312
+ borderBottom: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
1294
1313
  display: "flex",
1295
1314
  alignItems: "center",
1296
1315
  justifyContent: "space-between",
1297
- background: "#fafafa"
1316
+ background: isDark ? "#1f2937" : "#fafafa"
1298
1317
  },
1299
1318
  children: [
1300
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
1319
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: isDark ? "#ffffff" : "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
1301
1320
  onMarkAllRead && /* @__PURE__ */ jsxRuntime.jsx(
1302
1321
  "button",
1303
1322
  {
@@ -1334,17 +1353,17 @@ function UserHeader({
1334
1353
  padding: "12px 16px",
1335
1354
  borderBottom: "1px solid #f9fafb",
1336
1355
  cursor: "pointer",
1337
- background: !item.isRead ? "rgba(219,234,254,0.3)" : "transparent",
1356
+ background: !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent",
1338
1357
  position: "relative",
1339
1358
  display: "flex",
1340
1359
  gap: "12px",
1341
1360
  alignItems: "flex-start"
1342
1361
  },
1343
1362
  onMouseEnter: (e) => {
1344
- e.currentTarget.style.backgroundColor = "#f9fafb";
1363
+ e.currentTarget.style.backgroundColor = isDark ? "#1f2937" : "#f9fafb";
1345
1364
  },
1346
1365
  onMouseLeave: (e) => {
1347
- e.currentTarget.style.backgroundColor = !item.isRead ? "rgba(219,234,254,0.3)" : "transparent";
1366
+ e.currentTarget.style.backgroundColor = !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent";
1348
1367
  },
1349
1368
  children: [
1350
1369
  !item.isRead && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1386,7 +1405,7 @@ function UserHeader({
1386
1405
  style: {
1387
1406
  fontSize: "13px",
1388
1407
  fontWeight: !item.isRead ? 600 : 500,
1389
- color: "#111",
1408
+ color: isDark ? "#ffffff" : "#111",
1390
1409
  margin: "0 0 2px"
1391
1410
  },
1392
1411
  children: item.title
@@ -1397,7 +1416,7 @@ function UserHeader({
1397
1416
  {
1398
1417
  style: {
1399
1418
  fontSize: "12px",
1400
- color: "#6b7280",
1419
+ color: isDark ? "#9ca3af" : "#6b7280",
1401
1420
  margin: "0 0 4px",
1402
1421
  lineHeight: "18px"
1403
1422
  },
@@ -1409,7 +1428,7 @@ function UserHeader({
1409
1428
  {
1410
1429
  style: {
1411
1430
  fontSize: "10px",
1412
- color: "#9ca3af",
1431
+ color: isDark ? "#6b7280" : "#9ca3af",
1413
1432
  margin: 0,
1414
1433
  fontWeight: 500
1415
1434
  },
@@ -1426,9 +1445,9 @@ function UserHeader({
1426
1445
  {
1427
1446
  style: {
1428
1447
  padding: "10px",
1429
- borderTop: "1px solid #f3f4f6",
1448
+ borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
1430
1449
  textAlign: "center",
1431
- background: "#fafafa"
1450
+ background: isDark ? "#1f2937" : "#fafafa"
1432
1451
  },
1433
1452
  children: /* @__PURE__ */ jsxRuntime.jsx(
1434
1453
  "button",
@@ -1468,7 +1487,7 @@ function UserHeader({
1468
1487
  justifyContent: "center"
1469
1488
  },
1470
1489
  onMouseEnter: (e) => {
1471
- e.currentTarget.style.backgroundColor = "#f3f4f6";
1490
+ e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
1472
1491
  },
1473
1492
  onMouseLeave: (e) => {
1474
1493
  e.currentTarget.style.backgroundColor = "transparent";
@@ -1507,6 +1526,7 @@ function UserSidebar({
1507
1526
  roleColor = "var(--color-alias-semantic-warning, orange)",
1508
1527
  onProfile
1509
1528
  }) {
1529
+ const isDark = useDarkMode();
1510
1530
  react.useEffect(() => {
1511
1531
  if (isOpen) {
1512
1532
  document.body.style.overflow = "hidden";
@@ -1558,13 +1578,14 @@ function UserSidebar({
1558
1578
  height: "100%",
1559
1579
  width: "80vw",
1560
1580
  maxWidth: "320px",
1561
- background: "#fff",
1562
- boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
1581
+ background: isDark ? "#1e293b" : "#fff",
1582
+ boxShadow: isDark ? "-4px 0 24px rgba(0,0,0,0.4)" : "-4px 0 24px rgba(0,0,0,0.12)",
1563
1583
  zIndex: 50,
1564
1584
  transform: isOpen ? "translateX(0)" : "translateX(100%)",
1565
1585
  transition: "transform 0.3s ease",
1566
1586
  display: "flex",
1567
- flexDirection: "column"
1587
+ flexDirection: "column",
1588
+ color: isDark ? "#ffffff" : void 0
1568
1589
  },
1569
1590
  children: [
1570
1591
  user && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1572,7 +1593,7 @@ function UserSidebar({
1572
1593
  {
1573
1594
  style: {
1574
1595
  padding: "20px",
1575
- borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1596
+ borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1576
1597
  },
1577
1598
  children: /* @__PURE__ */ jsxRuntime.jsxs(
1578
1599
  "div",
@@ -1623,7 +1644,7 @@ function UserSidebar({
1623
1644
  style: {
1624
1645
  fontWeight: 700,
1625
1646
  fontSize: "16px",
1626
- color: "var(--color-alias-text-colors-primary, #060d26)",
1647
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
1627
1648
  margin: 0,
1628
1649
  overflow: "hidden",
1629
1650
  textOverflow: "ellipsis",
@@ -1637,7 +1658,7 @@ function UserSidebar({
1637
1658
  {
1638
1659
  style: {
1639
1660
  fontSize: "13px",
1640
- color: "var(--color-alias-text-colors-tertiary, #6b7280)",
1661
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #6b7280)",
1641
1662
  margin: "2px 0 0",
1642
1663
  display: "flex",
1643
1664
  alignItems: "center",
@@ -1685,14 +1706,14 @@ function UserSidebar({
1685
1706
  {
1686
1707
  style: {
1687
1708
  padding: "20px",
1688
- borderTop: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1709
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1689
1710
  },
1690
1711
  children: /* @__PURE__ */ jsxRuntime.jsxs(
1691
1712
  "button",
1692
1713
  {
1693
1714
  onClick: handleLogout,
1694
1715
  onMouseEnter: (e) => {
1695
- e.currentTarget.style.backgroundColor = "#fef2f2";
1716
+ e.currentTarget.style.backgroundColor = isDark ? "#3b1c1c" : "#fef2f2";
1696
1717
  },
1697
1718
  onMouseLeave: (e) => {
1698
1719
  e.currentTarget.style.backgroundColor = "transparent";
@@ -2180,6 +2201,7 @@ exports.UserSidebar = UserSidebar;
2180
2201
  exports.UsersIcon = UsersIcon;
2181
2202
  exports.WrenchIcon = WrenchIcon;
2182
2203
  exports.XCircleIcon = XCircleIcon;
2204
+ exports.useDarkMode = useDarkMode;
2183
2205
  exports.useSettings = useSettings;
2184
2206
  //# sourceMappingURL=index.js.map
2185
2207
  //# sourceMappingURL=index.js.map