gov-layout 1.2.14 → 1.2.17

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.
package/dist/index.mjs CHANGED
@@ -306,6 +306,12 @@ function TrashIcon({ size = 20, className, style } = {}) {
306
306
  /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
307
307
  ] });
308
308
  }
309
+ var safeCssEscape = (value) => {
310
+ if (typeof CSS !== "undefined" && CSS.escape) {
311
+ return CSS.escape(value);
312
+ }
313
+ return value.replace(/[^a-zA-Z0-9_-]/g, "_");
314
+ };
309
315
  var ICON_MAP = {
310
316
  home: HomeIcon,
311
317
  dashboard: HomeIcon,
@@ -458,11 +464,11 @@ function MenuItemComponent({
458
464
  const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
459
465
  if (collapsed && depth === 0) {
460
466
  return /* @__PURE__ */ jsxs("li", { children: [
461
- /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
467
+ /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
462
468
  /* @__PURE__ */ jsx(
463
469
  "button",
464
470
  {
465
- className: `sidebar-btn-${CSS.escape(btnId)}`,
471
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
466
472
  "data-active": isActive || isChildActive,
467
473
  onClick: handleClick,
468
474
  title: item.title,
@@ -498,11 +504,11 @@ function MenuItemComponent({
498
504
  }
499
505
  return /* @__PURE__ */ jsxs(Fragment, { children: [
500
506
  /* @__PURE__ */ jsxs("li", { children: [
501
- /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
507
+ /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
502
508
  /* @__PURE__ */ jsxs(
503
509
  "button",
504
510
  {
505
- className: `sidebar-btn-${CSS.escape(btnId)}`,
511
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
506
512
  "data-active": isActive,
507
513
  onClick: handleClick,
508
514
  style: {
@@ -688,7 +694,7 @@ function SidebarUserProfile({
688
694
  onClick: onProfile,
689
695
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
690
696
  onMouseEnter: (e) => {
691
- e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
697
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
692
698
  },
693
699
  onMouseLeave: (e) => {
694
700
  e.currentTarget.style.backgroundColor = "transparent";
@@ -828,7 +834,7 @@ function SidebarUserProfile({
828
834
  onClick: onProfile,
829
835
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
830
836
  onMouseEnter: (e) => {
831
- e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
837
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
832
838
  },
833
839
  onMouseLeave: (e) => {
834
840
  e.currentTarget.style.backgroundColor = "transparent";
@@ -1116,6 +1122,7 @@ function UserHeader({
1116
1122
  notificationBell,
1117
1123
  onMarkAllRead,
1118
1124
  onViewAll,
1125
+ onNotificationClick,
1119
1126
  onProfile,
1120
1127
  className
1121
1128
  }) {
@@ -1212,30 +1219,44 @@ function UserHeader({
1212
1219
  )
1213
1220
  }
1214
1221
  ),
1215
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
1216
- "p",
1217
- {
1218
- style: {
1219
- fontSize: "15px",
1220
- fontWeight: 600,
1221
- color: "#ffffff",
1222
- margin: 0
1223
- },
1224
- children: [
1225
- "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1226
- " ",
1227
- /* @__PURE__ */ jsx(
1228
- "span",
1229
- {
1230
- style: {
1231
- color: "#ffffff"
1232
- },
1233
- children: displayName
1234
- }
1235
- )
1236
- ]
1237
- }
1238
- ) })
1222
+ /* @__PURE__ */ jsxs("div", { children: [
1223
+ /* @__PURE__ */ jsxs(
1224
+ "p",
1225
+ {
1226
+ style: {
1227
+ fontSize: "15px",
1228
+ fontWeight: 600,
1229
+ color: "#ffffff",
1230
+ margin: 0
1231
+ },
1232
+ children: [
1233
+ "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1234
+ " ",
1235
+ /* @__PURE__ */ jsx(
1236
+ "span",
1237
+ {
1238
+ style: {
1239
+ color: "#ffffff"
1240
+ },
1241
+ children: displayName
1242
+ }
1243
+ )
1244
+ ]
1245
+ }
1246
+ ),
1247
+ user?.subtitle && /* @__PURE__ */ jsx(
1248
+ "p",
1249
+ {
1250
+ style: {
1251
+ fontSize: "12px",
1252
+ color: "rgba(255,255,255,0.75)",
1253
+ margin: "2px 0 0",
1254
+ fontWeight: 400
1255
+ },
1256
+ children: user.subtitle
1257
+ }
1258
+ )
1259
+ ] })
1239
1260
  ]
1240
1261
  }
1241
1262
  ),
@@ -1353,6 +1374,7 @@ function UserHeader({
1353
1374
  ) : notifications.map((item) => /* @__PURE__ */ jsxs(
1354
1375
  "div",
1355
1376
  {
1377
+ onClick: () => onNotificationClick?.(item),
1356
1378
  style: {
1357
1379
  padding: "12px 16px",
1358
1380
  borderBottom: "1px solid #f9fafb",
@@ -1599,7 +1621,7 @@ function UserSidebar({
1599
1621
  {
1600
1622
  style: {
1601
1623
  padding: "20px",
1602
- borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1624
+ borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
1603
1625
  },
1604
1626
  children: /* @__PURE__ */ jsxs(
1605
1627
  "div",
@@ -1664,7 +1686,7 @@ function UserSidebar({
1664
1686
  {
1665
1687
  style: {
1666
1688
  fontSize: "13px",
1667
- color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #6b7280)",
1689
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
1668
1690
  margin: "2px 0 0",
1669
1691
  display: "flex",
1670
1692
  alignItems: "center",
@@ -1712,7 +1734,7 @@ function UserSidebar({
1712
1734
  {
1713
1735
  style: {
1714
1736
  padding: "20px",
1715
- borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1737
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
1716
1738
  },
1717
1739
  children: /* @__PURE__ */ jsxs(
1718
1740
  "button",
@@ -1733,7 +1755,7 @@ function UserSidebar({
1733
1755
  borderRadius: "8px",
1734
1756
  border: "none",
1735
1757
  background: "transparent",
1736
- color: "var(--color-alias-semantic-critical, #ef4444)",
1758
+ color: "var(--color-alias-semantic-critical, #f21515)",
1737
1759
  cursor: "pointer",
1738
1760
  transition: "background-color 0.15s ease",
1739
1761
  fontSize: "15px",
@@ -1752,6 +1774,38 @@ function UserSidebar({
1752
1774
  )
1753
1775
  ] });
1754
1776
  }
1777
+ function BottomBar({
1778
+ children,
1779
+ sidebarWidth = "280px",
1780
+ height = "73px",
1781
+ className,
1782
+ style
1783
+ }) {
1784
+ const isDark = useDarkMode();
1785
+ return /* @__PURE__ */ jsx(
1786
+ "div",
1787
+ {
1788
+ className,
1789
+ style: {
1790
+ position: "fixed",
1791
+ bottom: 0,
1792
+ left: sidebarWidth,
1793
+ right: 0,
1794
+ height,
1795
+ background: isDark ? "#111827" : "#ffffff",
1796
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1797
+ display: "flex",
1798
+ alignItems: "center",
1799
+ justifyContent: "space-between",
1800
+ padding: "16px 24px",
1801
+ zIndex: 30,
1802
+ transition: "left 0.3s ease",
1803
+ ...style
1804
+ },
1805
+ children
1806
+ }
1807
+ );
1808
+ }
1755
1809
  var FONT_SIZE_OPTIONS = [
1756
1810
  { key: "xsmall", label: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01", scale: 0.8 },
1757
1811
  { key: "small", label: "\u0E40\u0E25\u0E47\u0E01", scale: 0.9 },
@@ -1959,7 +2013,7 @@ function FontSizeSettings({ onBack }) {
1959
2013
  margin: "8px 16px",
1960
2014
  padding: "16px",
1961
2015
  borderRadius: 10,
1962
- background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
2016
+ background: "var(--color-foundations-fuji-pallet-light, #ebedf5)",
1963
2017
  textAlign: "center"
1964
2018
  }, children: [
1965
2019
  /* @__PURE__ */ jsx("p", { style: {
@@ -2062,7 +2116,7 @@ function SettingsPanel({ className, showTheme = true }) {
2062
2116
  return /* @__PURE__ */ jsxs("div", { className, children: [
2063
2117
  /* @__PURE__ */ jsx("div", { style: {
2064
2118
  padding: "16px",
2065
- borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
2119
+ borderBottom: "1px solid var(--color-border-colors-neutral, #c8cedd)"
2066
2120
  }, children: /* @__PURE__ */ jsx("h3", { style: {
2067
2121
  fontSize: 16,
2068
2122
  fontWeight: 700,
@@ -2162,6 +2216,6 @@ var Icons = {
2162
2216
  Trash: TrashIcon
2163
2217
  };
2164
2218
 
2165
- 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 };
2219
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BottomBar, 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 };
2166
2220
  //# sourceMappingURL=index.mjs.map
2167
2221
  //# sourceMappingURL=index.mjs.map