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.mjs CHANGED
@@ -1,8 +1,21 @@
1
- import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
1
+ import { createContext, useState, useEffect, useRef, useCallback, useContext } from 'react';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
 
4
4
  // src/sidebar/StaffSidebar.tsx
5
+ function useDarkMode() {
6
+ const [isDark, setIsDark] = useState(false);
7
+ useEffect(() => {
8
+ const root = document.documentElement;
9
+ const check = () => setIsDark(root.classList.contains("dark"));
10
+ check();
11
+ const observer = new MutationObserver(check);
12
+ observer.observe(root, { attributes: true, attributeFilter: ["class"] });
13
+ return () => observer.disconnect();
14
+ }, []);
15
+ return isDark;
16
+ }
5
17
  function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
18
+ const isDark = useDarkMode();
6
19
  if (collapsed) {
7
20
  return /* @__PURE__ */ jsx("div", { style: {
8
21
  display: "flex",
@@ -59,7 +72,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
59
72
  fontWeight: 700,
60
73
  fontSize: "16px",
61
74
  lineHeight: "22px",
62
- color: "var(--color-alias-color-brand-text-dark, #05010e)",
75
+ color: isDark ? "#ffffff" : "var(--color-alias-color-brand-text-dark, #05010e)",
63
76
  margin: 0,
64
77
  overflow: "hidden",
65
78
  textOverflow: "ellipsis",
@@ -68,7 +81,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
68
81
  orgSubtitle && /* @__PURE__ */ jsx("p", { style: {
69
82
  fontSize: "14px",
70
83
  lineHeight: "20px",
71
- color: "var(--color-alias-text-colors-tertiary, #475272)",
84
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
72
85
  margin: 0,
73
86
  overflow: "hidden",
74
87
  textOverflow: "ellipsis",
@@ -418,6 +431,7 @@ function MenuItemComponent({
418
431
  collapsed = false,
419
432
  onExpandRequest
420
433
  }) {
434
+ const isDark = useDarkMode();
421
435
  const hasChildren = item.children && item.children.length > 0;
422
436
  const isActive = item.path ? currentPath === item.path : false;
423
437
  const resolvedIcon = item.icon || getAutoIcon(item.id);
@@ -440,7 +454,7 @@ function MenuItemComponent({
440
454
  }
441
455
  };
442
456
  const activeColor = "var(--color-alias-color-brand-primary, #1e7d55)";
443
- const hoverBg = "var(--color-foundations-fuji-pallet-light, #ebedf5)";
457
+ const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
444
458
  if (collapsed && depth === 0) {
445
459
  return /* @__PURE__ */ jsxs("li", { children: [
446
460
  /* @__PURE__ */ jsx(
@@ -463,7 +477,7 @@ function MenuItemComponent({
463
477
  borderRadius: "8px",
464
478
  border: "none",
465
479
  background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
466
- color: isActive || isChildActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)",
480
+ color: isActive || isChildActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
467
481
  cursor: "pointer",
468
482
  transition: "background-color 0.15s ease"
469
483
  },
@@ -478,7 +492,7 @@ function MenuItemComponent({
478
492
  ),
479
493
  item.dividerAfter && /* @__PURE__ */ jsx("hr", { style: {
480
494
  border: "none",
481
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
495
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
482
496
  margin: "8px 4px"
483
497
  } })
484
498
  ] });
@@ -503,7 +517,7 @@ function MenuItemComponent({
503
517
  borderRadius: "8px",
504
518
  border: "none",
505
519
  background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
506
- color: isActive ? activeColor : "var(--color-alias-text-colors-primary, #060d26)",
520
+ color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
507
521
  cursor: "pointer",
508
522
  transition: "background-color 0.15s ease",
509
523
  textAlign: "left",
@@ -519,7 +533,7 @@ function MenuItemComponent({
519
533
  alignItems: "center",
520
534
  justifyContent: "center",
521
535
  flexShrink: 0,
522
- color: isActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)"
536
+ color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
523
537
  }, children: resolvedIcon }),
524
538
  /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.title }),
525
539
  hasChildren && /* @__PURE__ */ jsx(ChevronDownIcon, { isOpen: expanded })
@@ -538,7 +552,7 @@ function MenuItemComponent({
538
552
  )) }),
539
553
  item.dividerAfter && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("hr", { style: {
540
554
  border: "none",
541
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
555
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
542
556
  margin: "8px 0"
543
557
  } }) })
544
558
  ] });
@@ -590,8 +604,8 @@ function ProfileIcon() {
590
604
  return /* @__PURE__ */ jsxs(
591
605
  "svg",
592
606
  {
593
- width: "18",
594
- height: "18",
607
+ width: "24",
608
+ height: "24",
595
609
  viewBox: "0 0 24 24",
596
610
  fill: "none",
597
611
  stroke: "currentColor",
@@ -612,6 +626,7 @@ function SidebarUserProfile({
612
626
  collapsed,
613
627
  onProfile
614
628
  }) {
629
+ const isDark = useDarkMode();
615
630
  if (!user) return null;
616
631
  const getFullName = () => {
617
632
  if (user.firstName && user.lastName) {
@@ -625,7 +640,7 @@ function SidebarUserProfile({
625
640
  if (collapsed) {
626
641
  return /* @__PURE__ */ jsxs("div", { style: {
627
642
  padding: "12px 8px",
628
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
643
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
629
644
  display: "flex",
630
645
  flexDirection: "column",
631
646
  alignItems: "center",
@@ -675,7 +690,7 @@ function SidebarUserProfile({
675
690
  onClick: onProfile,
676
691
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
677
692
  onMouseEnter: (e) => {
678
- e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
693
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
679
694
  },
680
695
  onMouseLeave: (e) => {
681
696
  e.currentTarget.style.backgroundColor = "transparent";
@@ -686,7 +701,7 @@ function SidebarUserProfile({
686
701
  borderRadius: "8px",
687
702
  border: "none",
688
703
  background: "transparent",
689
- color: "var(--color-alias-color-brand-primary, #1e7d55)",
704
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)",
690
705
  cursor: "pointer",
691
706
  display: "flex",
692
707
  alignItems: "center",
@@ -730,7 +745,7 @@ function SidebarUserProfile({
730
745
  {
731
746
  style: {
732
747
  padding: "16px 20px",
733
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
748
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
734
749
  display: "flex",
735
750
  alignItems: "center",
736
751
  gap: "12px"
@@ -793,7 +808,7 @@ function SidebarUserProfile({
793
808
  fontWeight: 600,
794
809
  fontSize: "14px",
795
810
  lineHeight: "20px",
796
- color: "var(--color-alias-text-colors-primary, #060d26)",
811
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
797
812
  margin: 0,
798
813
  overflow: "hidden",
799
814
  textOverflow: "ellipsis",
@@ -802,7 +817,7 @@ function SidebarUserProfile({
802
817
  /* @__PURE__ */ jsx("p", { style: {
803
818
  fontSize: "12px",
804
819
  lineHeight: "16px",
805
- color: "var(--color-alias-text-colors-tertiary, #475272)",
820
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
806
821
  margin: 0
807
822
  }, children: roleLabel })
808
823
  ] })
@@ -815,7 +830,7 @@ function SidebarUserProfile({
815
830
  onClick: onProfile,
816
831
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
817
832
  onMouseEnter: (e) => {
818
- e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
833
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
819
834
  },
820
835
  onMouseLeave: (e) => {
821
836
  e.currentTarget.style.backgroundColor = "transparent";
@@ -826,7 +841,7 @@ function SidebarUserProfile({
826
841
  borderRadius: "8px",
827
842
  border: "none",
828
843
  background: "transparent",
829
- color: "var(--color-alias-color-brand-primary, #1e7d55)",
844
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)",
830
845
  cursor: "pointer",
831
846
  display: "flex",
832
847
  alignItems: "center",
@@ -927,6 +942,7 @@ function StaffSidebar({
927
942
  onToggle,
928
943
  onExpandRequest
929
944
  }) {
945
+ const isDark = useDarkMode();
930
946
  const [internalOpen, setInternalOpen] = useState(true);
931
947
  const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
932
948
  const collapsed = collapsible && !sidebarOpen;
@@ -962,13 +978,14 @@ function StaffSidebar({
962
978
  left: 0,
963
979
  height: "100vh",
964
980
  width: currentWidth,
965
- background: "#fff",
966
- borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
981
+ background: isDark ? "#1e293b" : "#fff",
982
+ borderRight: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
967
983
  display: "flex",
968
984
  flexDirection: "column",
969
985
  zIndex: 40,
970
986
  overflow: "hidden",
971
- transition: "width 0.3s ease"
987
+ transition: "width 0.3s ease",
988
+ color: isDark ? "#ffffff" : void 0
972
989
  },
973
990
  children: [
974
991
  /* @__PURE__ */ jsx(
@@ -994,7 +1011,7 @@ function StaffSidebar({
994
1011
  resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
995
1012
  /* @__PURE__ */ jsx("hr", { style: {
996
1013
  border: "none",
997
- borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
1014
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
998
1015
  margin: "4px 12px"
999
1016
  } }),
1000
1017
  /* @__PURE__ */ jsx(
@@ -1028,10 +1045,10 @@ function StaffSidebar({
1028
1045
  onClick: handleToggle,
1029
1046
  title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
1030
1047
  onMouseEnter: (e) => {
1031
- e.currentTarget.style.backgroundColor = "#f3f4f6";
1048
+ e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
1032
1049
  },
1033
1050
  onMouseLeave: (e) => {
1034
- e.currentTarget.style.backgroundColor = "#fff";
1051
+ e.currentTarget.style.backgroundColor = isDark ? "#1e293b" : "#fff";
1035
1052
  },
1036
1053
  style: {
1037
1054
  position: "fixed",
@@ -1041,16 +1058,16 @@ function StaffSidebar({
1041
1058
  width: "24px",
1042
1059
  height: "40px",
1043
1060
  borderRadius: "0 6px 6px 0",
1044
- border: "1px solid var(--color-border-colors-neutral, #c8cedd)",
1061
+ border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1045
1062
  borderLeft: "none",
1046
- background: "#fff",
1063
+ background: isDark ? "#1e293b" : "#fff",
1047
1064
  cursor: "pointer",
1048
1065
  display: "flex",
1049
1066
  alignItems: "center",
1050
1067
  justifyContent: "center",
1051
- boxShadow: "2px 0 8px rgba(0,0,0,0.06)",
1068
+ boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
1052
1069
  transition: "left 0.3s ease",
1053
- color: "var(--color-alias-text-colors-tertiary, #475272)"
1070
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)"
1054
1071
  },
1055
1072
  children: /* @__PURE__ */ jsx(ToggleIcon, { isOpen: sidebarOpen })
1056
1073
  }
@@ -1062,7 +1079,7 @@ function BellIcon2() {
1062
1079
  "path",
1063
1080
  {
1064
1081
  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",
1065
- fill: "var(--color-alias-color-brand-text-dark, #05010e)"
1082
+ fill: "currentColor"
1066
1083
  }
1067
1084
  ) });
1068
1085
  }
@@ -1071,7 +1088,7 @@ function HamburgerIcon() {
1071
1088
  "path",
1072
1089
  {
1073
1090
  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",
1074
- fill: "var(--color-alias-color-brand-text-dark, #05010e)"
1091
+ fill: "currentColor"
1075
1092
  }
1076
1093
  ) });
1077
1094
  }
@@ -1109,6 +1126,7 @@ function UserHeader({
1109
1126
  const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
1110
1127
  const [isNotifOpen, setIsNotifOpen] = useState(false);
1111
1128
  const notifRef = useRef(null);
1129
+ const isDark = useDarkMode();
1112
1130
  useEffect(() => {
1113
1131
  const handleClickOutside = (e) => {
1114
1132
  if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1124,11 +1142,12 @@ function UserHeader({
1124
1142
  {
1125
1143
  className,
1126
1144
  style: {
1127
- background: "#fff",
1128
- boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
1145
+ background: isDark ? "#1e293b" : "#fff",
1146
+ boxShadow: isDark ? "0 1px 3px rgba(0,0,0,0.3)" : "0 1px 3px rgba(0,0,0,0.08)",
1129
1147
  position: "sticky",
1130
1148
  top: 0,
1131
- zIndex: 10
1149
+ zIndex: 10,
1150
+ color: isDark ? "#ffffff" : void 0
1132
1151
  },
1133
1152
  children: /* @__PURE__ */ jsxs(
1134
1153
  "div",
@@ -1145,7 +1164,7 @@ function UserHeader({
1145
1164
  {
1146
1165
  onClick: onProfile,
1147
1166
  onMouseEnter: (e) => {
1148
- if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
1167
+ if (onProfile) e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
1149
1168
  },
1150
1169
  onMouseLeave: (e) => {
1151
1170
  if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
@@ -1201,7 +1220,7 @@ function UserHeader({
1201
1220
  style: {
1202
1221
  fontSize: "14px",
1203
1222
  fontWeight: 600,
1204
- color: "var(--color-alias-color-brand-text-dark, #05010e)",
1223
+ color: isDark ? "#ffffff" : "var(--color-alias-color-brand-text-dark, #05010e)",
1205
1224
  margin: 0
1206
1225
  },
1207
1226
  children: [
@@ -1211,7 +1230,7 @@ function UserHeader({
1211
1230
  "span",
1212
1231
  {
1213
1232
  style: {
1214
- color: "var(--color-alias-color-brand-primary, #1e7d55)"
1233
+ color: isDark ? "#8be9a0" : "var(--color-alias-color-brand-primary, #1e7d55)"
1215
1234
  },
1216
1235
  children: displayName
1217
1236
  }
@@ -1275,12 +1294,12 @@ function UserHeader({
1275
1294
  right: 0,
1276
1295
  marginTop: "8px",
1277
1296
  width: "360px",
1278
- background: "#fff",
1297
+ background: isDark ? "#1e293b" : "#fff",
1279
1298
  borderRadius: "12px",
1280
- boxShadow: "0 10px 40px rgba(0,0,0,0.12)",
1299
+ boxShadow: isDark ? "0 10px 40px rgba(0,0,0,0.4)" : "0 10px 40px rgba(0,0,0,0.12)",
1281
1300
  zIndex: 50,
1282
1301
  overflow: "hidden",
1283
- border: "1px solid #e5e7eb"
1302
+ border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
1284
1303
  },
1285
1304
  children: [
1286
1305
  /* @__PURE__ */ jsxs(
@@ -1288,14 +1307,14 @@ function UserHeader({
1288
1307
  {
1289
1308
  style: {
1290
1309
  padding: "16px",
1291
- borderBottom: "1px solid #f3f4f6",
1310
+ borderBottom: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
1292
1311
  display: "flex",
1293
1312
  alignItems: "center",
1294
1313
  justifyContent: "space-between",
1295
- background: "#fafafa"
1314
+ background: isDark ? "#1f2937" : "#fafafa"
1296
1315
  },
1297
1316
  children: [
1298
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
1317
+ /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: isDark ? "#ffffff" : "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
1299
1318
  onMarkAllRead && /* @__PURE__ */ jsx(
1300
1319
  "button",
1301
1320
  {
@@ -1332,17 +1351,17 @@ function UserHeader({
1332
1351
  padding: "12px 16px",
1333
1352
  borderBottom: "1px solid #f9fafb",
1334
1353
  cursor: "pointer",
1335
- background: !item.isRead ? "rgba(219,234,254,0.3)" : "transparent",
1354
+ background: !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent",
1336
1355
  position: "relative",
1337
1356
  display: "flex",
1338
1357
  gap: "12px",
1339
1358
  alignItems: "flex-start"
1340
1359
  },
1341
1360
  onMouseEnter: (e) => {
1342
- e.currentTarget.style.backgroundColor = "#f9fafb";
1361
+ e.currentTarget.style.backgroundColor = isDark ? "#1f2937" : "#f9fafb";
1343
1362
  },
1344
1363
  onMouseLeave: (e) => {
1345
- e.currentTarget.style.backgroundColor = !item.isRead ? "rgba(219,234,254,0.3)" : "transparent";
1364
+ e.currentTarget.style.backgroundColor = !item.isRead ? isDark ? "rgba(59,130,246,0.15)" : "rgba(219,234,254,0.3)" : "transparent";
1346
1365
  },
1347
1366
  children: [
1348
1367
  !item.isRead && /* @__PURE__ */ jsx(
@@ -1384,7 +1403,7 @@ function UserHeader({
1384
1403
  style: {
1385
1404
  fontSize: "13px",
1386
1405
  fontWeight: !item.isRead ? 600 : 500,
1387
- color: "#111",
1406
+ color: isDark ? "#ffffff" : "#111",
1388
1407
  margin: "0 0 2px"
1389
1408
  },
1390
1409
  children: item.title
@@ -1395,7 +1414,7 @@ function UserHeader({
1395
1414
  {
1396
1415
  style: {
1397
1416
  fontSize: "12px",
1398
- color: "#6b7280",
1417
+ color: isDark ? "#9ca3af" : "#6b7280",
1399
1418
  margin: "0 0 4px",
1400
1419
  lineHeight: "18px"
1401
1420
  },
@@ -1407,7 +1426,7 @@ function UserHeader({
1407
1426
  {
1408
1427
  style: {
1409
1428
  fontSize: "10px",
1410
- color: "#9ca3af",
1429
+ color: isDark ? "#6b7280" : "#9ca3af",
1411
1430
  margin: 0,
1412
1431
  fontWeight: 500
1413
1432
  },
@@ -1424,9 +1443,9 @@ function UserHeader({
1424
1443
  {
1425
1444
  style: {
1426
1445
  padding: "10px",
1427
- borderTop: "1px solid #f3f4f6",
1446
+ borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
1428
1447
  textAlign: "center",
1429
- background: "#fafafa"
1448
+ background: isDark ? "#1f2937" : "#fafafa"
1430
1449
  },
1431
1450
  children: /* @__PURE__ */ jsx(
1432
1451
  "button",
@@ -1466,7 +1485,7 @@ function UserHeader({
1466
1485
  justifyContent: "center"
1467
1486
  },
1468
1487
  onMouseEnter: (e) => {
1469
- e.currentTarget.style.backgroundColor = "#f3f4f6";
1488
+ e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
1470
1489
  },
1471
1490
  onMouseLeave: (e) => {
1472
1491
  e.currentTarget.style.backgroundColor = "transparent";
@@ -1505,6 +1524,7 @@ function UserSidebar({
1505
1524
  roleColor = "var(--color-alias-semantic-warning, orange)",
1506
1525
  onProfile
1507
1526
  }) {
1527
+ const isDark = useDarkMode();
1508
1528
  useEffect(() => {
1509
1529
  if (isOpen) {
1510
1530
  document.body.style.overflow = "hidden";
@@ -1556,13 +1576,14 @@ function UserSidebar({
1556
1576
  height: "100%",
1557
1577
  width: "80vw",
1558
1578
  maxWidth: "320px",
1559
- background: "#fff",
1560
- boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
1579
+ background: isDark ? "#1e293b" : "#fff",
1580
+ boxShadow: isDark ? "-4px 0 24px rgba(0,0,0,0.4)" : "-4px 0 24px rgba(0,0,0,0.12)",
1561
1581
  zIndex: 50,
1562
1582
  transform: isOpen ? "translateX(0)" : "translateX(100%)",
1563
1583
  transition: "transform 0.3s ease",
1564
1584
  display: "flex",
1565
- flexDirection: "column"
1585
+ flexDirection: "column",
1586
+ color: isDark ? "#ffffff" : void 0
1566
1587
  },
1567
1588
  children: [
1568
1589
  user && /* @__PURE__ */ jsx(
@@ -1570,7 +1591,7 @@ function UserSidebar({
1570
1591
  {
1571
1592
  style: {
1572
1593
  padding: "20px",
1573
- borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1594
+ borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1574
1595
  },
1575
1596
  children: /* @__PURE__ */ jsxs(
1576
1597
  "div",
@@ -1621,7 +1642,7 @@ function UserSidebar({
1621
1642
  style: {
1622
1643
  fontWeight: 700,
1623
1644
  fontSize: "16px",
1624
- color: "var(--color-alias-text-colors-primary, #060d26)",
1645
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
1625
1646
  margin: 0,
1626
1647
  overflow: "hidden",
1627
1648
  textOverflow: "ellipsis",
@@ -1635,7 +1656,7 @@ function UserSidebar({
1635
1656
  {
1636
1657
  style: {
1637
1658
  fontSize: "13px",
1638
- color: "var(--color-alias-text-colors-tertiary, #6b7280)",
1659
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #6b7280)",
1639
1660
  margin: "2px 0 0",
1640
1661
  display: "flex",
1641
1662
  alignItems: "center",
@@ -1683,14 +1704,14 @@ function UserSidebar({
1683
1704
  {
1684
1705
  style: {
1685
1706
  padding: "20px",
1686
- borderTop: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1707
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1687
1708
  },
1688
1709
  children: /* @__PURE__ */ jsxs(
1689
1710
  "button",
1690
1711
  {
1691
1712
  onClick: handleLogout,
1692
1713
  onMouseEnter: (e) => {
1693
- e.currentTarget.style.backgroundColor = "#fef2f2";
1714
+ e.currentTarget.style.backgroundColor = isDark ? "#3b1c1c" : "#fef2f2";
1694
1715
  },
1695
1716
  onMouseLeave: (e) => {
1696
1717
  e.currentTarget.style.backgroundColor = "transparent";
@@ -2133,6 +2154,6 @@ var Icons = {
2133
2154
  Trash: TrashIcon
2134
2155
  };
2135
2156
 
2136
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, Icons, LogOutIcon, MailIcon, MapPinIcon, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, StarIcon, ThemeSettings, TrashIcon, UploadIcon, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
2157
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, Icons, LogOutIcon, MailIcon, MapPinIcon, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, StarIcon, ThemeSettings, TrashIcon, UploadIcon, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
2137
2158
  //# sourceMappingURL=index.mjs.map
2138
2159
  //# sourceMappingURL=index.mjs.map