@kt-components/layout-header-sidebar 1.0.2 → 1.0.5

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 (9) hide show
  1. package/dist/index.d.mts +23 -7
  2. package/dist/index.d.ts +23 -7
  3. package/dist/index.js +89 -71
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +89 -71
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/src/styles.css +57 -15
  8. package/dist/src/styles.css.map +1 -1
  9. package/package.json +4 -1
package/dist/index.d.mts CHANGED
@@ -20,8 +20,13 @@ interface HeaderProps {
20
20
  overlayId?: string;
21
21
  notificationBell?: React$1.ReactNode;
22
22
  notifications?: NotificationItem[];
23
+ className?: string;
24
+ greetingClassName?: string;
25
+ userNameClassName?: string;
26
+ avatarClassName?: string;
27
+ notificationButtonClassName?: string;
23
28
  }
24
- declare function Header({ user, sidebarId, overlayId, notificationBell, notifications }: HeaderProps): react_jsx_runtime.JSX.Element;
29
+ declare function Header({ user, sidebarId, overlayId, notificationBell, notifications, className, greetingClassName, userNameClassName, avatarClassName, notificationButtonClassName }: HeaderProps): react_jsx_runtime.JSX.Element;
25
30
 
26
31
  interface MenuItem {
27
32
  id: string;
@@ -32,8 +37,9 @@ interface MenuItem {
32
37
  interface MenuListProps {
33
38
  menuItems: MenuItem[];
34
39
  onItemClick: (path: string) => void;
40
+ itemClassName?: string;
35
41
  }
36
- declare function MenuList({ menuItems, onItemClick }: MenuListProps): react_jsx_runtime.JSX.Element;
42
+ declare function MenuList({ menuItems, onItemClick, itemClassName }: MenuListProps): react_jsx_runtime.JSX.Element;
37
43
 
38
44
  interface User$1 {
39
45
  id?: string | number;
@@ -47,13 +53,18 @@ interface SharedSidebarProps {
47
53
  menuItems: MenuItem[];
48
54
  sidebarId?: string;
49
55
  overlayId?: string;
50
- profilePath: string;
51
56
  roleLabel: string;
52
57
  roleColor?: string;
53
58
  onNavigate: (path: string) => void;
54
59
  onLogout: () => void;
60
+ className?: string;
61
+ menuItemClassName?: string;
62
+ logoutButtonClassName?: string;
63
+ userProfileClassName?: string;
64
+ userAvatarClassName?: string;
65
+ userTextClassName?: string;
55
66
  }
56
- declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, profilePath, roleLabel, roleColor, onNavigate, onLogout }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
67
+ declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, roleLabel, roleColor, onNavigate, onLogout, className, menuItemClassName, logoutButtonClassName, userProfileClassName, userAvatarClassName, userTextClassName }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
57
68
 
58
69
  interface User {
59
70
  id?: string | number;
@@ -66,18 +77,23 @@ interface UserProfileProps {
66
77
  user: User | null;
67
78
  roleLabel: string;
68
79
  roleColor?: string;
80
+ className?: string;
81
+ avatarClassName?: string;
82
+ textClassName?: string;
69
83
  }
70
- declare function UserProfile({ user, roleLabel, roleColor }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
84
+ declare function UserProfile({ user, roleLabel, roleColor, className, avatarClassName, textClassName }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
71
85
 
72
86
  interface ProfileButtonProps {
73
87
  onClick: () => void;
88
+ className?: string;
74
89
  }
75
- declare function ProfileButton({ onClick }: ProfileButtonProps): react_jsx_runtime.JSX.Element;
90
+ declare function ProfileButton({ onClick, className }: ProfileButtonProps): react_jsx_runtime.JSX.Element;
76
91
 
77
92
  interface LogoutButtonProps {
78
93
  onLogout: () => void;
94
+ className?: string;
79
95
  }
80
- declare function LogoutButton({ onLogout }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
96
+ declare function LogoutButton({ onLogout, className }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
81
97
 
82
98
  /**
83
99
  * Toggle sidebar visibility (Right side)
package/dist/index.d.ts CHANGED
@@ -20,8 +20,13 @@ interface HeaderProps {
20
20
  overlayId?: string;
21
21
  notificationBell?: React$1.ReactNode;
22
22
  notifications?: NotificationItem[];
23
+ className?: string;
24
+ greetingClassName?: string;
25
+ userNameClassName?: string;
26
+ avatarClassName?: string;
27
+ notificationButtonClassName?: string;
23
28
  }
24
- declare function Header({ user, sidebarId, overlayId, notificationBell, notifications }: HeaderProps): react_jsx_runtime.JSX.Element;
29
+ declare function Header({ user, sidebarId, overlayId, notificationBell, notifications, className, greetingClassName, userNameClassName, avatarClassName, notificationButtonClassName }: HeaderProps): react_jsx_runtime.JSX.Element;
25
30
 
26
31
  interface MenuItem {
27
32
  id: string;
@@ -32,8 +37,9 @@ interface MenuItem {
32
37
  interface MenuListProps {
33
38
  menuItems: MenuItem[];
34
39
  onItemClick: (path: string) => void;
40
+ itemClassName?: string;
35
41
  }
36
- declare function MenuList({ menuItems, onItemClick }: MenuListProps): react_jsx_runtime.JSX.Element;
42
+ declare function MenuList({ menuItems, onItemClick, itemClassName }: MenuListProps): react_jsx_runtime.JSX.Element;
37
43
 
38
44
  interface User$1 {
39
45
  id?: string | number;
@@ -47,13 +53,18 @@ interface SharedSidebarProps {
47
53
  menuItems: MenuItem[];
48
54
  sidebarId?: string;
49
55
  overlayId?: string;
50
- profilePath: string;
51
56
  roleLabel: string;
52
57
  roleColor?: string;
53
58
  onNavigate: (path: string) => void;
54
59
  onLogout: () => void;
60
+ className?: string;
61
+ menuItemClassName?: string;
62
+ logoutButtonClassName?: string;
63
+ userProfileClassName?: string;
64
+ userAvatarClassName?: string;
65
+ userTextClassName?: string;
55
66
  }
56
- declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, profilePath, roleLabel, roleColor, onNavigate, onLogout }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
67
+ declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, roleLabel, roleColor, onNavigate, onLogout, className, menuItemClassName, logoutButtonClassName, userProfileClassName, userAvatarClassName, userTextClassName }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
57
68
 
58
69
  interface User {
59
70
  id?: string | number;
@@ -66,18 +77,23 @@ interface UserProfileProps {
66
77
  user: User | null;
67
78
  roleLabel: string;
68
79
  roleColor?: string;
80
+ className?: string;
81
+ avatarClassName?: string;
82
+ textClassName?: string;
69
83
  }
70
- declare function UserProfile({ user, roleLabel, roleColor }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
84
+ declare function UserProfile({ user, roleLabel, roleColor, className, avatarClassName, textClassName }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
71
85
 
72
86
  interface ProfileButtonProps {
73
87
  onClick: () => void;
88
+ className?: string;
74
89
  }
75
- declare function ProfileButton({ onClick }: ProfileButtonProps): react_jsx_runtime.JSX.Element;
90
+ declare function ProfileButton({ onClick, className }: ProfileButtonProps): react_jsx_runtime.JSX.Element;
76
91
 
77
92
  interface LogoutButtonProps {
78
93
  onLogout: () => void;
94
+ className?: string;
79
95
  }
80
- declare function LogoutButton({ onLogout }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
96
+ declare function LogoutButton({ onLogout, className }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
81
97
 
82
98
  /**
83
99
  * Toggle sidebar visibility (Right side)
package/dist/index.js CHANGED
@@ -82,7 +82,7 @@ function NotificationList({ notifications, onClose }) {
82
82
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
83
83
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-0 bg-black/20 z-40 sm:hidden", onClick: onClose }),
84
84
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed sm:absolute inset-x-4 top-20 sm:inset-auto sm:right-0 sm:top-full sm:mt-2 w-auto sm:w-96 bg-white rounded-xl shadow-2xl sm:shadow-xl border border-gray-100 overflow-hidden z-50 animate-in fade-in zoom-in-95 duration-200 origin-top sm:origin-top-right", children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-5 py-4 bg-[#EAFDF6] border-b border-teal-100", children: [
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-5 py-4 bg-brand-surface border-b border-brand-secondary/30", children: [
86
86
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-bold text-lg text-gray-900", children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }) }),
87
87
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-gray-500 mt-0.5", children: [
88
88
  unreadCount,
@@ -123,8 +123,13 @@ function Header({
123
123
  sidebarId = "sidebar",
124
124
  overlayId = "sidebar-overlay",
125
125
  notificationBell,
126
- notifications = []
127
- // Default to empty array
126
+ notifications = [],
127
+ // Styles
128
+ className = "",
129
+ greetingClassName = "",
130
+ userNameClassName = "",
131
+ avatarClassName = "",
132
+ notificationButtonClassName = ""
128
133
  }) {
129
134
  const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
130
135
  const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
@@ -145,7 +150,7 @@ function Header({
145
150
  };
146
151
  }, []);
147
152
  const unreadCount = notifications.filter((n) => !n.isRead).length;
148
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("header", { className: "bg-white shadow-sm sticky top-0 z-10 lg:static", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-5 py-3.5", children: [
153
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("header", { className: `bg-white shadow-sm sticky top-0 z-10 lg:static ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-5 py-3.5", children: [
149
154
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
150
155
  user?.pictureUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
151
156
  "img",
@@ -154,12 +159,13 @@ function Header({
154
159
  alt: displayName,
155
160
  width: 44,
156
161
  height: 44,
157
- className: "rounded-full object-cover border-2 border-teal-100 w-[44px] h-[44px]"
162
+ className: `rounded-full object-cover border-2 border-brand-surface w-[44px] h-[44px] ${avatarClassName}`
158
163
  }
159
- ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-11 h-11 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-white text-lg font-semibold", children: firstChar }) }),
160
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-sm font-semibold text-gray-900", children: [
161
- "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35, ",
162
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[#1E7D55]", children: displayName })
164
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `w-11 h-11 bg-gradient-to-br from-brand-secondary to-brand-primary rounded-full flex items-center justify-center shadow-sm ${avatarClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-white text-lg font-semibold", children: firstChar }) }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-sm font-semibold text-brand-text-dark", children: [
166
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: greetingClassName, children: "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35," }),
167
+ " ",
168
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `text-brand-primary ${userNameClassName}`, children: displayName })
163
169
  ] }) })
164
170
  ] }),
165
171
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
@@ -167,11 +173,11 @@ function Header({
167
173
  notificationBell || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
168
174
  "button",
169
175
  {
170
- className: "p-2.5 rounded-lg transition-colors hover:bg-gray-100 relative",
176
+ className: `p-2.5 rounded-lg transition-colors hover:bg-gray-100 relative ${notificationButtonClassName}`,
171
177
  onClick: () => setIsNotificationsOpen(!isNotificationsOpen),
172
178
  children: [
173
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "22", height: "24", viewBox: "0 0 22 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { 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", fill: "#060D26" }) }),
174
- unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute top-1.5 right-1.5 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center text-[10px] font-bold text-white px-1 border-2 border-white", children: unreadCount })
179
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "22", height: "24", viewBox: "0 0 22 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { 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", className: "fill-brand-text-dark" }) }),
180
+ unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute top-1.5 right-1.5 min-w-[18px] h-[18px] bg-semantic-critical rounded-full flex items-center justify-center text-[10px] font-bold text-white px-1 border-2 border-white", children: unreadCount })
175
181
  ]
176
182
  }
177
183
  ),
@@ -188,7 +194,7 @@ function Header({
188
194
  {
189
195
  onClick: handleToggleSidebar,
190
196
  className: "p-2.5 rounded-lg transition-colors hover:bg-gray-100",
191
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "27", height: "18", viewBox: "0 0 27 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { 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", fill: "#1C1B1F" }) })
197
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "27", height: "18", viewBox: "0 0 27 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { 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", className: "fill-brand-text-dark" }) })
192
198
  }
193
199
  )
194
200
  ] })
@@ -197,7 +203,14 @@ function Header({
197
203
 
198
204
  // sidebar/UserProfile.tsx
199
205
  var import_jsx_runtime3 = require("react/jsx-runtime");
200
- function UserProfile({ user, roleLabel, roleColor = "orange" }) {
206
+ function UserProfile({
207
+ user,
208
+ roleLabel,
209
+ roleColor = "orange",
210
+ className = "",
211
+ avatarClassName = "",
212
+ textClassName = ""
213
+ }) {
201
214
  if (!user) return null;
202
215
  const getFullName = () => {
203
216
  if (user.firstName && user.lastName) {
@@ -218,7 +231,7 @@ function UserProfile({ user, roleLabel, roleColor = "orange" }) {
218
231
  };
219
232
  return colors[roleColor] || "bg-orange-500";
220
233
  };
221
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-5 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
234
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `p-5 border-b border-gray-200 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
222
235
  user.pictureUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
223
236
  "img",
224
237
  {
@@ -226,10 +239,10 @@ function UserProfile({ user, roleLabel, roleColor = "orange" }) {
226
239
  alt: getFullName(),
227
240
  width: 56,
228
241
  height: 56,
229
- className: "w-14 h-14 rounded-full shadow-lg object-cover"
242
+ className: `w-14 h-14 rounded-full shadow-lg object-cover ${avatarClassName}`
230
243
  }
231
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl", children: getInitial() }),
232
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 min-w-0", children: [
244
+ ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl ${avatarClassName}`, children: getInitial() }),
245
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex-1 min-w-0 ${textClassName}`, children: [
233
246
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-bold text-gray-900 truncate text-base", children: getFullName() }),
234
247
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-sm text-gray-500 flex items-center gap-1", children: [
235
248
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `w-2 h-2 ${getRoleColorClass()} rounded-full` }),
@@ -239,56 +252,32 @@ function UserProfile({ user, roleLabel, roleColor = "orange" }) {
239
252
  ] }) });
240
253
  }
241
254
 
242
- // sidebar/ProfileButton.tsx
243
- var import_jsx_runtime4 = require("react/jsx-runtime");
244
- function ProfileButton({ onClick }) {
245
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-5 pt-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
246
- "button",
247
- {
248
- onClick,
249
- className: "w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors",
250
- children: [
251
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-6 h-6", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
252
- "path",
253
- {
254
- strokeLinecap: "round",
255
- strokeLinejoin: "round",
256
- strokeWidth: 2,
257
- d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
258
- }
259
- ) }) }),
260
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27" })
261
- ]
262
- }
263
- ) });
264
- }
265
-
266
255
  // sidebar/MenuList.tsx
267
- var import_jsx_runtime5 = require("react/jsx-runtime");
268
- function MenuList({ menuItems, onItemClick }) {
269
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: "flex-1 p-5 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "space-y-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
256
+ var import_jsx_runtime4 = require("react/jsx-runtime");
257
+ function MenuList({ menuItems, onItemClick, itemClassName = "" }) {
258
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: "flex-1 p-5 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "space-y-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
270
259
  "button",
271
260
  {
272
261
  onClick: () => onItemClick(item.path),
273
- className: "w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors",
262
+ className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${itemClassName}`,
274
263
  children: [
275
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: item.icon }),
276
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: item.title })
264
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: item.icon }),
265
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: item.title })
277
266
  ]
278
267
  }
279
268
  ) }, item.id)) }) });
280
269
  }
281
270
 
282
271
  // sidebar/LogoutButton.tsx
283
- var import_jsx_runtime6 = require("react/jsx-runtime");
284
- function LogoutButton({ onLogout }) {
285
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-5 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
272
+ var import_jsx_runtime5 = require("react/jsx-runtime");
273
+ function LogoutButton({ onLogout, className = "" }) {
274
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-5 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
286
275
  "button",
287
276
  {
288
277
  onClick: onLogout,
289
- className: "w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors",
278
+ className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors ${className}`,
290
279
  children: [
291
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
280
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
292
281
  "path",
293
282
  {
294
283
  strokeLinecap: "round",
@@ -297,24 +286,30 @@ function LogoutButton({ onLogout }) {
297
286
  d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
298
287
  }
299
288
  ) }),
300
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })
289
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })
301
290
  ]
302
291
  }
303
292
  ) });
304
293
  }
305
294
 
306
295
  // sidebar/SharedSidebar.tsx
307
- var import_jsx_runtime7 = require("react/jsx-runtime");
296
+ var import_jsx_runtime6 = require("react/jsx-runtime");
308
297
  function SharedSidebar({
309
298
  user,
310
299
  menuItems,
311
300
  sidebarId = "sidebar",
312
301
  overlayId = "sidebar-overlay",
313
- profilePath,
314
302
  roleLabel,
315
303
  roleColor = "orange",
316
304
  onNavigate,
317
- onLogout
305
+ onLogout,
306
+ // Styles
307
+ className = "",
308
+ menuItemClassName = "",
309
+ logoutButtonClassName = "",
310
+ userProfileClassName = "",
311
+ userAvatarClassName = "",
312
+ userTextClassName = ""
318
313
  }) {
319
314
  const closeSidebar2 = () => {
320
315
  const sidebar = document.getElementById(sidebarId);
@@ -327,10 +322,6 @@ function SharedSidebar({
327
322
  overlay.classList.add("hidden");
328
323
  }
329
324
  };
330
- const handleProfileClick = () => {
331
- onNavigate(profilePath);
332
- closeSidebar2();
333
- };
334
325
  const handleMenuItemClick = (path) => {
335
326
  onNavigate(path);
336
327
  closeSidebar2();
@@ -339,8 +330,8 @@ function SharedSidebar({
339
330
  closeSidebar2();
340
331
  onLogout();
341
332
  };
342
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
343
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
333
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
334
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
344
335
  "div",
345
336
  {
346
337
  id: overlayId,
@@ -348,34 +339,61 @@ function SharedSidebar({
348
339
  onClick: closeSidebar2
349
340
  }
350
341
  ),
351
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
342
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
352
343
  "aside",
353
344
  {
354
345
  id: sidebarId,
355
- className: "fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col",
346
+ className: `fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col ${className}`,
356
347
  children: [
357
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
348
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
358
349
  UserProfile,
359
350
  {
360
351
  user,
361
352
  roleLabel,
362
- roleColor
353
+ roleColor,
354
+ className: userProfileClassName,
355
+ avatarClassName: userAvatarClassName,
356
+ textClassName: userTextClassName
363
357
  }
364
358
  ),
365
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProfileButton, { onClick: handleProfileClick }),
366
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
359
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
367
360
  MenuList,
368
361
  {
369
362
  menuItems,
370
- onItemClick: handleMenuItemClick
363
+ onItemClick: handleMenuItemClick,
364
+ itemClassName: menuItemClassName
371
365
  }
372
366
  ),
373
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LogoutButton, { onLogout: handleLogout })
367
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LogoutButton, { onLogout: handleLogout, className: logoutButtonClassName })
374
368
  ]
375
369
  }
376
370
  )
377
371
  ] });
378
372
  }
373
+
374
+ // sidebar/ProfileButton.tsx
375
+ var import_jsx_runtime7 = require("react/jsx-runtime");
376
+ function ProfileButton({ onClick, className = "" }) {
377
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-5 pt-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
378
+ "button",
379
+ {
380
+ onClick,
381
+ className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${className}`,
382
+ children: [
383
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-6 h-6", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
384
+ "path",
385
+ {
386
+ strokeLinecap: "round",
387
+ strokeLinejoin: "round",
388
+ strokeWidth: 2,
389
+ d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
390
+ }
391
+ ) }) }),
392
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27" })
393
+ ]
394
+ }
395
+ ) });
396
+ }
379
397
  // Annotate the CommonJS export names for ESM import in node:
380
398
  0 && (module.exports = {
381
399
  Header,