@umituz/web-dashboard 1.0.7 → 2.0.1

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 (61) hide show
  1. package/dist/components/BrandLogo.d.ts +18 -0
  2. package/dist/components/BrandLogo.js +88 -0
  3. package/dist/components/BrandLogo.js.map +1 -0
  4. package/dist/components/DashboardHeader.d.ts +36 -0
  5. package/dist/components/DashboardHeader.js +225 -0
  6. package/dist/components/DashboardHeader.js.map +1 -0
  7. package/dist/components/DashboardLayout.d.ts +45 -0
  8. package/dist/components/DashboardLayout.js +501 -0
  9. package/dist/components/DashboardLayout.js.map +1 -0
  10. package/dist/components/DashboardSidebar.d.ts +29 -0
  11. package/dist/components/DashboardSidebar.js +189 -0
  12. package/dist/components/DashboardSidebar.js.map +1 -0
  13. package/dist/components/index.d.ts +10 -0
  14. package/dist/components/index.js +502 -0
  15. package/dist/components/index.js.map +1 -0
  16. package/dist/hooks/dashboard.d.ts +35 -0
  17. package/dist/hooks/dashboard.js +57 -0
  18. package/dist/hooks/dashboard.js.map +1 -0
  19. package/dist/hooks/index.d.ts +3 -0
  20. package/dist/hooks/index.js +57 -0
  21. package/dist/hooks/index.js.map +1 -0
  22. package/dist/index.d.ts +17 -403
  23. package/dist/index.js +56 -52
  24. package/dist/index.js.map +1 -1
  25. package/dist/theme/default.d.ts +18 -0
  26. package/dist/theme/default.js +52 -0
  27. package/dist/theme/default.js.map +1 -0
  28. package/dist/theme/index.d.ts +4 -0
  29. package/dist/theme/index.js +184 -0
  30. package/dist/theme/index.js.map +1 -0
  31. package/dist/theme/presets.d.ts +14 -0
  32. package/dist/theme/presets.js +137 -0
  33. package/dist/theme/presets.js.map +1 -0
  34. package/dist/theme/utils.d.ts +22 -0
  35. package/dist/theme/utils.js +181 -0
  36. package/dist/theme/utils.js.map +1 -0
  37. package/dist/types/index.d.ts +6 -0
  38. package/dist/types/index.js +2 -0
  39. package/dist/types/index.js.map +1 -0
  40. package/dist/types/layout.d.ts +45 -0
  41. package/dist/types/layout.js +2 -0
  42. package/dist/types/layout.js.map +1 -0
  43. package/dist/types/notification.d.ts +20 -0
  44. package/dist/types/notification.js +2 -0
  45. package/dist/types/notification.js.map +1 -0
  46. package/dist/types/sidebar.d.ts +36 -0
  47. package/dist/types/sidebar.js +2 -0
  48. package/dist/types/sidebar.js.map +1 -0
  49. package/dist/types/theme.d.ts +64 -0
  50. package/dist/types/theme.js +2 -0
  51. package/dist/types/theme.js.map +1 -0
  52. package/dist/types/user.d.ts +37 -0
  53. package/dist/types/user.js +2 -0
  54. package/dist/types/user.js.map +1 -0
  55. package/dist/utils/dashboard.d.ts +57 -0
  56. package/dist/utils/dashboard.js +44 -0
  57. package/dist/utils/dashboard.js.map +1 -0
  58. package/dist/utils/index.d.ts +1 -0
  59. package/dist/utils/index.js +44 -0
  60. package/dist/utils/index.js.map +1 -0
  61. package/package.json +19 -23
@@ -0,0 +1,57 @@
1
+ "use client";
2
+
3
+ // src/domains/layouts/hooks/dashboard.ts
4
+ import { useState, useCallback } from "react";
5
+ function useNotifications(initialNotifications = []) {
6
+ const [notifications, setNotifications] = useState(initialNotifications);
7
+ const markAllRead = useCallback(() => {
8
+ setNotifications(
9
+ (prev) => prev.map((n) => ({ ...n, read: true }))
10
+ );
11
+ }, []);
12
+ const dismiss = useCallback((id) => {
13
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
14
+ }, []);
15
+ const add = useCallback((notification) => {
16
+ const newNotification = {
17
+ ...notification,
18
+ id: crypto.randomUUID(),
19
+ read: false,
20
+ createdAt: /* @__PURE__ */ new Date()
21
+ };
22
+ setNotifications((prev) => [newNotification, ...prev]);
23
+ }, []);
24
+ return {
25
+ notifications,
26
+ markAllRead,
27
+ dismiss,
28
+ add
29
+ };
30
+ }
31
+ function useSidebar(initialCollapsed = false) {
32
+ const [collapsed, setCollapsed] = useState(initialCollapsed);
33
+ const [mobileOpen, setMobileOpen] = useState(false);
34
+ const toggle = useCallback(() => {
35
+ setCollapsed((prev) => !prev);
36
+ }, []);
37
+ const openMobile = useCallback(() => {
38
+ setMobileOpen(true);
39
+ }, []);
40
+ const closeMobile = useCallback(() => {
41
+ setMobileOpen(false);
42
+ }, []);
43
+ return {
44
+ collapsed,
45
+ setCollapsed,
46
+ toggle,
47
+ mobileOpen,
48
+ setMobileOpen,
49
+ openMobile,
50
+ closeMobile
51
+ };
52
+ }
53
+ export {
54
+ useNotifications,
55
+ useSidebar
56
+ };
57
+ //# sourceMappingURL=dashboard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/domains/layouts/hooks/dashboard.ts"],"sourcesContent":["/**\n * Dashboard Hooks\n *\n * Custom React hooks for dashboard functionality\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { DashboardNotification } from \"../types/notification\";\n\n/**\n * Use Notifications Hook\n *\n * Manages notification state and actions\n *\n * @param initialNotifications - Initial notification list\n * @returns Notification state and actions\n */\nexport function useNotifications(initialNotifications: DashboardNotification[] = []) {\n const [notifications, setNotifications] = useState<DashboardNotification[]>(initialNotifications);\n\n const markAllRead = useCallback(() => {\n setNotifications((prev) =>\n prev.map((n) => ({ ...n, read: true }))\n );\n }, []);\n\n const dismiss = useCallback((id: string) => {\n setNotifications((prev) => prev.filter((n) => n.id !== id));\n }, []);\n\n const add = useCallback((notification: Omit<DashboardNotification, \"id\">) => {\n const newNotification: DashboardNotification = {\n ...notification,\n id: crypto.randomUUID(),\n read: false,\n createdAt: new Date(),\n };\n setNotifications((prev) => [newNotification, ...prev]);\n }, []);\n\n return {\n notifications,\n markAllRead,\n dismiss,\n add,\n };\n}\n\n/**\n * Use Sidebar Hook\n *\n * Manages sidebar state\n *\n * @returns Sidebar state and actions\n */\nexport function useSidebar(initialCollapsed = false) {\n const [collapsed, setCollapsed] = useState(initialCollapsed);\n const [mobileOpen, setMobileOpen] = useState(false);\n\n const toggle = useCallback(() => {\n setCollapsed((prev) => !prev);\n }, []);\n\n const openMobile = useCallback(() => {\n setMobileOpen(true);\n }, []);\n\n const closeMobile = useCallback(() => {\n setMobileOpen(false);\n }, []);\n\n return {\n collapsed,\n setCollapsed,\n toggle,\n mobileOpen,\n setMobileOpen: setMobileOpen,\n openMobile,\n closeMobile,\n };\n}\n"],"mappings":";;;AAMA,SAAS,UAAU,mBAAmB;AAW/B,SAAS,iBAAiB,uBAAgD,CAAC,GAAG;AACnF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkC,oBAAoB;AAEhG,QAAM,cAAc,YAAY,MAAM;AACpC;AAAA,MAAiB,CAAC,SAChB,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,KAAK,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,qBAAiB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,YAAY,CAAC,iBAAoD;AAC3E,UAAM,kBAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,IAAI,OAAO,WAAW;AAAA,MACtB,MAAM;AAAA,MACN,WAAW,oBAAI,KAAK;AAAA,IACtB;AACA,qBAAiB,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,WAAW,mBAAmB,OAAO;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,CAAC,SAAS,CAAC,IAAI;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM;AACnC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
@@ -0,0 +1,3 @@
1
+ export { useNotifications, useSidebar } from './dashboard.js';
2
+ import 'react';
3
+ import '../types/notification.js';
@@ -0,0 +1,57 @@
1
+ "use client";
2
+
3
+ // src/domains/layouts/hooks/dashboard.ts
4
+ import { useState, useCallback } from "react";
5
+ function useNotifications(initialNotifications = []) {
6
+ const [notifications, setNotifications] = useState(initialNotifications);
7
+ const markAllRead = useCallback(() => {
8
+ setNotifications(
9
+ (prev) => prev.map((n) => ({ ...n, read: true }))
10
+ );
11
+ }, []);
12
+ const dismiss = useCallback((id) => {
13
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
14
+ }, []);
15
+ const add = useCallback((notification) => {
16
+ const newNotification = {
17
+ ...notification,
18
+ id: crypto.randomUUID(),
19
+ read: false,
20
+ createdAt: /* @__PURE__ */ new Date()
21
+ };
22
+ setNotifications((prev) => [newNotification, ...prev]);
23
+ }, []);
24
+ return {
25
+ notifications,
26
+ markAllRead,
27
+ dismiss,
28
+ add
29
+ };
30
+ }
31
+ function useSidebar(initialCollapsed = false) {
32
+ const [collapsed, setCollapsed] = useState(initialCollapsed);
33
+ const [mobileOpen, setMobileOpen] = useState(false);
34
+ const toggle = useCallback(() => {
35
+ setCollapsed((prev) => !prev);
36
+ }, []);
37
+ const openMobile = useCallback(() => {
38
+ setMobileOpen(true);
39
+ }, []);
40
+ const closeMobile = useCallback(() => {
41
+ setMobileOpen(false);
42
+ }, []);
43
+ return {
44
+ collapsed,
45
+ setCollapsed,
46
+ toggle,
47
+ mobileOpen,
48
+ setMobileOpen,
49
+ openMobile,
50
+ closeMobile
51
+ };
52
+ }
53
+ export {
54
+ useNotifications,
55
+ useSidebar
56
+ };
57
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/domains/layouts/hooks/dashboard.ts"],"sourcesContent":["/**\n * Dashboard Hooks\n *\n * Custom React hooks for dashboard functionality\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { DashboardNotification } from \"../types/notification\";\n\n/**\n * Use Notifications Hook\n *\n * Manages notification state and actions\n *\n * @param initialNotifications - Initial notification list\n * @returns Notification state and actions\n */\nexport function useNotifications(initialNotifications: DashboardNotification[] = []) {\n const [notifications, setNotifications] = useState<DashboardNotification[]>(initialNotifications);\n\n const markAllRead = useCallback(() => {\n setNotifications((prev) =>\n prev.map((n) => ({ ...n, read: true }))\n );\n }, []);\n\n const dismiss = useCallback((id: string) => {\n setNotifications((prev) => prev.filter((n) => n.id !== id));\n }, []);\n\n const add = useCallback((notification: Omit<DashboardNotification, \"id\">) => {\n const newNotification: DashboardNotification = {\n ...notification,\n id: crypto.randomUUID(),\n read: false,\n createdAt: new Date(),\n };\n setNotifications((prev) => [newNotification, ...prev]);\n }, []);\n\n return {\n notifications,\n markAllRead,\n dismiss,\n add,\n };\n}\n\n/**\n * Use Sidebar Hook\n *\n * Manages sidebar state\n *\n * @returns Sidebar state and actions\n */\nexport function useSidebar(initialCollapsed = false) {\n const [collapsed, setCollapsed] = useState(initialCollapsed);\n const [mobileOpen, setMobileOpen] = useState(false);\n\n const toggle = useCallback(() => {\n setCollapsed((prev) => !prev);\n }, []);\n\n const openMobile = useCallback(() => {\n setMobileOpen(true);\n }, []);\n\n const closeMobile = useCallback(() => {\n setMobileOpen(false);\n }, []);\n\n return {\n collapsed,\n setCollapsed,\n toggle,\n mobileOpen,\n setMobileOpen: setMobileOpen,\n openMobile,\n closeMobile,\n };\n}\n"],"mappings":";;;AAMA,SAAS,UAAU,mBAAmB;AAW/B,SAAS,iBAAiB,uBAAgD,CAAC,GAAG;AACnF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkC,oBAAoB;AAEhG,QAAM,cAAc,YAAY,MAAM;AACpC;AAAA,MAAiB,CAAC,SAChB,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,KAAK,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,qBAAiB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,YAAY,CAAC,iBAAoD;AAC3E,UAAM,kBAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,IAAI,OAAO,WAAW;AAAA,MACtB,MAAM;AAAA,MACN,WAAW,oBAAI,KAAK;AAAA,IACtB;AACA,qBAAiB,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,WAAW,mBAAmB,OAAO;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,CAAC,SAAS,CAAC,IAAI;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM;AACnC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
package/dist/index.d.ts CHANGED
@@ -1,403 +1,17 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { LucideIcon } from 'lucide-react';
3
- import * as react from 'react';
4
-
5
- /**
6
- * Dashboard Types
7
- *
8
- * Core type definitions for the dashboard layout system
9
- */
10
-
11
- /**
12
- * Single sidebar menu item
13
- */
14
- interface SidebarItem {
15
- /** Display label (can be i18n key) */
16
- label: string;
17
- /** Icon from lucide-react */
18
- icon: LucideIcon;
19
- /** Route path */
20
- path: string;
21
- /** Filter by app type (optional) */
22
- requiredApp?: 'mobile' | 'web';
23
- /** Enable/disable this item (default: true) */
24
- enabled?: boolean;
25
- }
26
- /**
27
- * Group of sidebar items with a title
28
- */
29
- interface SidebarGroup {
30
- /** Group title (can be i18n key) */
31
- title: string;
32
- /** Items in this group */
33
- items: SidebarItem[];
34
- /** Optional: Route to title mapping for page headers */
35
- titleMap?: Record<string, string>;
36
- }
37
- /**
38
- * Dashboard header props
39
- */
40
- interface DashboardHeaderProps {
41
- /** Whether sidebar is collapsed */
42
- collapsed: boolean;
43
- /** Toggle sidebar collapsed state */
44
- setCollapsed: (collapsed: boolean) => void;
45
- /** Toggle mobile menu open state */
46
- setMobileOpen: (open: boolean) => void;
47
- /** Current page title */
48
- title: string;
49
- }
50
- /**
51
- * Dashboard sidebar props
52
- */
53
- interface DashboardSidebarProps {
54
- /** Whether sidebar is collapsed */
55
- collapsed: boolean;
56
- /** Toggle sidebar collapsed state */
57
- setCollapsed: (collapsed: boolean) => void;
58
- }
59
- /**
60
- * Dashboard layout configuration
61
- */
62
- interface DashboardLayoutConfig {
63
- /** Sidebar groups */
64
- sidebarGroups: SidebarGroup[];
65
- /** Extra title mappings for routes */
66
- extraTitleMap?: Record<string, string>;
67
- /** Brand name */
68
- brandName?: string;
69
- /** Brand tagline */
70
- brandTagline?: string;
71
- }
72
- /**
73
- * Dashboard theme configuration
74
- * Extends CSS variables for customization
75
- */
76
- interface DashboardTheme {
77
- /** Primary color (CSS variable compatible) */
78
- primary?: string;
79
- /** Secondary color */
80
- secondary?: string;
81
- /** Sidebar background */
82
- sidebarBackground?: string;
83
- /** Sidebar foreground */
84
- sidebarForeground?: string;
85
- /** Sidebar border */
86
- sidebarBorder?: string;
87
- /** Header background */
88
- headerBackground?: string;
89
- /** Background color */
90
- background?: string;
91
- /** Foreground color */
92
- foreground?: string;
93
- /** Border color */
94
- border?: string;
95
- /** Accent color */
96
- accent?: string;
97
- /** Accent foreground */
98
- accentForeground?: string;
99
- /** Destructive color */
100
- destructive?: string;
101
- /** Destructive foreground */
102
- destructiveForeground?: string;
103
- /** Muted background */
104
- muted?: string;
105
- /** Muted foreground */
106
- mutedForeground?: string;
107
- /** Card background */
108
- card?: string;
109
- /** Card foreground */
110
- cardForeground?: string;
111
- /** Popover background */
112
- popover?: string;
113
- /** Popover foreground */
114
- popoverForeground?: string;
115
- /** Radius (border-radius) */
116
- radius?: string;
117
- }
118
- /**
119
- * Theme preset for quick setup
120
- */
121
- interface DashboardThemePreset {
122
- /** Preset name */
123
- name: string;
124
- /** Theme configuration */
125
- theme: DashboardTheme;
126
- /** Whether this is a dark theme */
127
- dark?: boolean;
128
- }
129
- /**
130
- * Notification item
131
- */
132
- interface DashboardNotification {
133
- /** Unique ID */
134
- id: string;
135
- /** Notification text */
136
- text: string;
137
- /** Whether notification is read */
138
- read: boolean;
139
- /** Creation timestamp */
140
- createdAt: Date | string | number;
141
- }
142
- /**
143
- * User profile info for header
144
- */
145
- interface DashboardUser {
146
- /** User ID */
147
- id: string;
148
- /** Display name */
149
- name?: string;
150
- /** Email address */
151
- email?: string;
152
- /** Avatar URL */
153
- avatar?: string;
154
- /** Whether user has mobile app access */
155
- hasMobileApp?: boolean;
156
- /** Whether user has web app access */
157
- hasWebApp?: boolean;
158
- }
159
- /**
160
- * Navigation item for user menu
161
- */
162
- interface UserNavMenuItem {
163
- /** Display label */
164
- label: string;
165
- /** Icon component */
166
- icon: React.ComponentType<{
167
- className?: string;
168
- }>;
169
- /** Route path */
170
- path: string;
171
- }
172
-
173
- interface DashboardLayoutProps {
174
- /** Layout configuration */
175
- config: DashboardLayoutConfig;
176
- /** Auth user */
177
- user?: DashboardUser;
178
- /** Auth loading state */
179
- authLoading?: boolean;
180
- /** Authenticated state */
181
- isAuthenticated?: boolean;
182
- /** Notifications */
183
- notifications?: DashboardNotification[];
184
- /** Logout function */
185
- onLogout?: () => Promise<void>;
186
- /** Mark all as read function */
187
- onMarkAllRead?: () => void;
188
- /** Dismiss notification function */
189
- onDismissNotification?: (id: string) => void;
190
- /** Login route for redirect */
191
- loginRoute?: string;
192
- }
193
- /**
194
- * Dashboard Layout Component
195
- *
196
- * Main layout wrapper for dashboard pages.
197
- * Provides sidebar, header, and content area with responsive design.
198
- *
199
- * Features:
200
- * - Collapsible sidebar
201
- * - Mobile menu overlay
202
- * - Breadcrumb page titles
203
- * - Loading skeletons
204
- * - Auth protection
205
- *
206
- * @param props - Dashboard layout props
207
- */
208
- declare const DashboardLayout: ({ config, user, authLoading, isAuthenticated, notifications, onLogout, onMarkAllRead, onDismissNotification, loginRoute, }: DashboardLayoutProps) => react_jsx_runtime.JSX.Element | null;
209
-
210
- interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
211
- /** Auth user */
212
- user?: DashboardUser;
213
- /** Notifications */
214
- notifications?: DashboardNotification[];
215
- /** Logout function */
216
- onLogout?: () => Promise<void>;
217
- /** Mark all as read function */
218
- onMarkAllRead?: () => void;
219
- /** Dismiss notification function */
220
- onDismissNotification?: (id: string) => void;
221
- /** Settings route */
222
- settingsRoute?: string;
223
- /** Profile route */
224
- profileRoute?: string;
225
- /** Billing route */
226
- billingRoute?: string;
227
- }
228
- /**
229
- * Dashboard Header Component
230
- *
231
- * Displays top navigation bar with theme toggle, notifications,
232
- * user menu, and organisation selector.
233
- *
234
- * @param props - Dashboard header props
235
- */
236
- declare const DashboardHeader: ({ collapsed, setCollapsed, setMobileOpen, title, user, notifications, onLogout, onMarkAllRead, onDismissNotification, settingsRoute, profileRoute, billingRoute, }: DashboardHeaderPropsExtended) => react_jsx_runtime.JSX.Element;
237
-
238
- interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
239
- /** Sidebar groups configuration */
240
- sidebarGroups: SidebarGroup[];
241
- /** Brand name */
242
- brandName?: string;
243
- /** Brand tagline */
244
- brandTagline?: string;
245
- /** Create post route */
246
- createPostRoute?: string;
247
- /** Auth user */
248
- user?: DashboardUser;
249
- }
250
- /**
251
- * Dashboard Sidebar Component
252
- *
253
- * Displays collapsible sidebar with navigation menu items.
254
- * Supports app-based filtering (mobile/web) and collapsible groups.
255
- *
256
- * @param props - Dashboard sidebar props
257
- */
258
- declare const DashboardSidebar: ({ collapsed, setCollapsed, sidebarGroups, brandName, brandTagline, createPostRoute, user, }: DashboardSidebarPropsExtended) => react_jsx_runtime.JSX.Element;
259
-
260
- interface BrandLogoProps {
261
- className?: string;
262
- size?: number;
263
- }
264
- /**
265
- * BrandLogo Component
266
- *
267
- * Displays the application brand logo as an SVG.
268
- * Supports custom sizing and styling through className.
269
- *
270
- * @param className - Optional CSS classes for styling
271
- * @param size - Width and height in pixels (default: 32)
272
- */
273
- declare const BrandLogo: ({ className, size }: BrandLogoProps) => react_jsx_runtime.JSX.Element;
274
-
275
- /**
276
- * Dashboard Theme System
277
- *
278
- * Provides theme configuration and presets for the dashboard layout.
279
- * Themes are applied via CSS variables, allowing runtime customization.
280
- */
281
-
282
- /**
283
- * Default dashboard theme (light mode)
284
- */
285
- declare const DEFAULT_DASHBOARD_THEME: DashboardTheme;
286
- /**
287
- * Default dashboard theme (dark mode)
288
- */
289
- declare const DEFAULT_DASHBOARD_THEME_DARK: DashboardTheme;
290
- /**
291
- * Available theme presets
292
- */
293
- declare const DASHBOARD_THEME_PRESETS: DashboardThemePreset[];
294
- /**
295
- * Apply theme to document root via CSS variables
296
- *
297
- * @param theme - Theme configuration to apply
298
- */
299
- declare function applyDashboardTheme(theme: DashboardTheme): void;
300
- /**
301
- * Get theme preset by name
302
- *
303
- * @param name - Preset name
304
- * @returns Theme preset or undefined
305
- */
306
- declare function getDashboardThemePreset(name: string): DashboardThemePreset | undefined;
307
- /**
308
- * Merge custom theme with default theme
309
- *
310
- * @param customTheme - Custom theme configuration
311
- * @param dark - Whether to use dark mode base
312
- * @returns Merged theme configuration
313
- */
314
- declare function mergeDashboardTheme(customTheme: Partial<DashboardTheme>, dark?: boolean): DashboardTheme;
315
-
316
- /**
317
- * Use Notifications Hook
318
- *
319
- * Manages notification state and actions
320
- *
321
- * @param initialNotifications - Initial notification list
322
- * @returns Notification state and actions
323
- */
324
- declare function useNotifications(initialNotifications?: DashboardNotification[]): {
325
- notifications: DashboardNotification[];
326
- markAllRead: () => void;
327
- dismiss: (id: string) => void;
328
- add: (notification: Omit<DashboardNotification, "id">) => void;
329
- };
330
- /**
331
- * Use Sidebar Hook
332
- *
333
- * Manages sidebar state
334
- *
335
- * @returns Sidebar state and actions
336
- */
337
- declare function useSidebar(initialCollapsed?: boolean): {
338
- collapsed: boolean;
339
- setCollapsed: react.Dispatch<react.SetStateAction<boolean>>;
340
- toggle: () => void;
341
- mobileOpen: boolean;
342
- setMobileOpen: react.Dispatch<react.SetStateAction<boolean>>;
343
- openMobile: () => void;
344
- closeMobile: () => void;
345
- };
346
-
347
- /**
348
- * Dashboard Utilities
349
- *
350
- * Utility functions for dashboard operations
351
- */
352
- /**
353
- * Format notification timestamp to relative time
354
- *
355
- * @param createdAt - Notification creation timestamp
356
- * @param t - i18n translation function
357
- * @returns Formatted time string
358
- */
359
- declare function formatNotificationTime(createdAt: Date | string | number, t: (key: string, params?: Record<string, unknown>) => string): string;
360
- /**
361
- * Check if a path is active
362
- *
363
- * @param currentPath - Current location pathname
364
- * @param targetPath - Target path to check
365
- * @returns True if paths match
366
- */
367
- declare function isPathActive(currentPath: string, targetPath: string): boolean;
368
- /**
369
- * Get page title from sidebar configuration
370
- *
371
- * @param pathname - Current pathname
372
- * @param sidebarGroups - Sidebar groups configuration
373
- * @param extraTitleMap - Extra title mappings
374
- * @returns Page title or null
375
- */
376
- declare function getPageTitle(pathname: string, sidebarGroups: Array<{
377
- items: Array<{
378
- path: string;
379
- label: string;
380
- }>;
381
- }>, extraTitleMap?: Record<string, string>): string | null;
382
- /**
383
- * Filter sidebar items by app type and enabled status
384
- *
385
- * @param items - Sidebar items to filter
386
- * @param user - Current user object
387
- * @returns Filtered items
388
- */
389
- declare function filterSidebarItems<T extends {
390
- enabled?: boolean;
391
- requiredApp?: "mobile" | "web";
392
- }>(items: T[], user?: {
393
- hasMobileApp?: boolean;
394
- hasWebApp?: boolean;
395
- }): T[];
396
- /**
397
- * Generate notification ID
398
- *
399
- * @returns Unique notification ID
400
- */
401
- declare function generateNotificationId(): string;
402
-
403
- export { BrandLogo, DASHBOARD_THEME_PRESETS, DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutConfig, type DashboardNotification, DashboardSidebar, type DashboardSidebarProps, type DashboardTheme, type DashboardThemePreset, type DashboardUser, type SidebarGroup, type SidebarItem, type UserNavMenuItem, applyDashboardTheme, filterSidebarItems, formatNotificationTime, generateNotificationId, getDashboardThemePreset, getPageTitle, isPathActive, mergeDashboardTheme, useNotifications, useSidebar };
1
+ export { DashboardLayout } from './components/DashboardLayout.js';
2
+ export { DashboardHeader } from './components/DashboardHeader.js';
3
+ export { DashboardSidebar } from './components/DashboardSidebar.js';
4
+ export { BrandLogo } from './components/BrandLogo.js';
5
+ export { useNotifications, useSidebar } from './hooks/dashboard.js';
6
+ export { filterSidebarItems, formatNotificationTime, generateNotificationId, getPageTitle, isPathActive } from './utils/dashboard.js';
7
+ export { SidebarGroup, SidebarItem } from './types/sidebar.js';
8
+ export { DashboardHeaderProps, DashboardLayoutConfig, DashboardSidebarProps } from './types/layout.js';
9
+ export { DashboardTheme, DashboardThemePreset } from './types/theme.js';
10
+ export { DashboardNotification } from './types/notification.js';
11
+ export { DashboardUser, UserNavMenuItem } from './types/user.js';
12
+ export { DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK } from './theme/default.js';
13
+ export { DASHBOARD_THEME_PRESETS } from './theme/presets.js';
14
+ export { applyDashboardTheme, getDashboardThemePreset, mergeDashboardTheme } from './theme/utils.js';
15
+ import 'react/jsx-runtime';
16
+ import 'react';
17
+ import 'lucide-react';
package/dist/index.js CHANGED
@@ -510,7 +510,58 @@ var DashboardLayout = ({
510
510
  ] });
511
511
  };
512
512
 
513
- // src/domains/layouts/theme/index.ts
513
+ // src/domains/layouts/hooks/dashboard.ts
514
+ import { useState as useState4, useCallback } from "react";
515
+ function useNotifications(initialNotifications = []) {
516
+ const [notifications, setNotifications] = useState4(initialNotifications);
517
+ const markAllRead = useCallback(() => {
518
+ setNotifications(
519
+ (prev) => prev.map((n) => ({ ...n, read: true }))
520
+ );
521
+ }, []);
522
+ const dismiss = useCallback((id) => {
523
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
524
+ }, []);
525
+ const add = useCallback((notification) => {
526
+ const newNotification = {
527
+ ...notification,
528
+ id: crypto.randomUUID(),
529
+ read: false,
530
+ createdAt: /* @__PURE__ */ new Date()
531
+ };
532
+ setNotifications((prev) => [newNotification, ...prev]);
533
+ }, []);
534
+ return {
535
+ notifications,
536
+ markAllRead,
537
+ dismiss,
538
+ add
539
+ };
540
+ }
541
+ function useSidebar(initialCollapsed = false) {
542
+ const [collapsed, setCollapsed] = useState4(initialCollapsed);
543
+ const [mobileOpen, setMobileOpen] = useState4(false);
544
+ const toggle = useCallback(() => {
545
+ setCollapsed((prev) => !prev);
546
+ }, []);
547
+ const openMobile = useCallback(() => {
548
+ setMobileOpen(true);
549
+ }, []);
550
+ const closeMobile = useCallback(() => {
551
+ setMobileOpen(false);
552
+ }, []);
553
+ return {
554
+ collapsed,
555
+ setCollapsed,
556
+ toggle,
557
+ mobileOpen,
558
+ setMobileOpen,
559
+ openMobile,
560
+ closeMobile
561
+ };
562
+ }
563
+
564
+ // src/domains/layouts/theme/default.ts
514
565
  var DEFAULT_DASHBOARD_THEME = {
515
566
  primary: "hsl(222.2 47.4% 11.2%)",
516
567
  secondary: "hsl(217.2 32.6% 17.5%)",
@@ -555,6 +606,8 @@ var DEFAULT_DASHBOARD_THEME_DARK = {
555
606
  popoverForeground: "hsl(210 40% 98%)",
556
607
  radius: "0.5rem"
557
608
  };
609
+
610
+ // src/domains/layouts/theme/presets.ts
558
611
  var DASHBOARD_THEME_PRESETS = [
559
612
  {
560
613
  name: "default",
@@ -639,6 +692,8 @@ var DASHBOARD_THEME_PRESETS = [
639
692
  dark: true
640
693
  }
641
694
  ];
695
+
696
+ // src/domains/layouts/theme/utils.ts
642
697
  function applyDashboardTheme(theme) {
643
698
  if (typeof document === "undefined") return;
644
699
  const root = document.documentElement;
@@ -679,57 +734,6 @@ function mergeDashboardTheme(customTheme, dark = false) {
679
734
  ...customTheme
680
735
  };
681
736
  }
682
-
683
- // src/domains/layouts/hooks/dashboard.ts
684
- import { useState as useState4, useCallback } from "react";
685
- function useNotifications(initialNotifications = []) {
686
- const [notifications, setNotifications] = useState4(initialNotifications);
687
- const markAllRead = useCallback(() => {
688
- setNotifications(
689
- (prev) => prev.map((n) => ({ ...n, read: true }))
690
- );
691
- }, []);
692
- const dismiss = useCallback((id) => {
693
- setNotifications((prev) => prev.filter((n) => n.id !== id));
694
- }, []);
695
- const add = useCallback((notification) => {
696
- const newNotification = {
697
- ...notification,
698
- id: crypto.randomUUID(),
699
- read: false,
700
- createdAt: /* @__PURE__ */ new Date()
701
- };
702
- setNotifications((prev) => [newNotification, ...prev]);
703
- }, []);
704
- return {
705
- notifications,
706
- markAllRead,
707
- dismiss,
708
- add
709
- };
710
- }
711
- function useSidebar(initialCollapsed = false) {
712
- const [collapsed, setCollapsed] = useState4(initialCollapsed);
713
- const [mobileOpen, setMobileOpen] = useState4(false);
714
- const toggle = useCallback(() => {
715
- setCollapsed((prev) => !prev);
716
- }, []);
717
- const openMobile = useCallback(() => {
718
- setMobileOpen(true);
719
- }, []);
720
- const closeMobile = useCallback(() => {
721
- setMobileOpen(false);
722
- }, []);
723
- return {
724
- collapsed,
725
- setCollapsed,
726
- toggle,
727
- mobileOpen,
728
- setMobileOpen,
729
- openMobile,
730
- closeMobile
731
- };
732
- }
733
737
  export {
734
738
  BrandLogo,
735
739
  DASHBOARD_THEME_PRESETS,