@adminlte/react 0.1.0

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 (83) hide show
  1. package/CHANGELOG.md +161 -0
  2. package/README.md +454 -0
  3. package/dist/context/accessibility.js +141 -0
  4. package/dist/context/body-class-sync.js +22 -0
  5. package/dist/context/color-mode-context.js +61 -0
  6. package/dist/context/command-palette-context.js +28 -0
  7. package/dist/context/html-dir.js +17 -0
  8. package/dist/context/link-context.js +18 -0
  9. package/dist/context/lte-behaviors.js +52 -0
  10. package/dist/context/sidebar-context.js +87 -0
  11. package/dist/css/adminlte.css +17259 -0
  12. package/dist/form/button.js +21 -0
  13. package/dist/form/input-color.js +30 -0
  14. package/dist/form/input-file.js +29 -0
  15. package/dist/form/input-flatpickr.js +45 -0
  16. package/dist/form/input-switch.js +26 -0
  17. package/dist/form/input-tom-select.js +59 -0
  18. package/dist/form/input.js +23 -0
  19. package/dist/form/select.js +25 -0
  20. package/dist/form/textarea.js +22 -0
  21. package/dist/hooks/use-card-widget.js +44 -0
  22. package/dist/hooks/use-direct-chat.js +16 -0
  23. package/dist/hooks/use-fullscreen.js +44 -0
  24. package/dist/hooks/use-push-menu.js +54 -0
  25. package/dist/hooks/use-sortable.js +26 -0
  26. package/dist/hooks/use-treeview-animation.js +27 -0
  27. package/dist/index.d.ts +1010 -0
  28. package/dist/index.js +145 -0
  29. package/dist/layout/app-content.js +18 -0
  30. package/dist/layout/auth-layout.js +25 -0
  31. package/dist/layout/color-mode-toggle.js +67 -0
  32. package/dist/layout/dashboard-layout.js +101 -0
  33. package/dist/layout/footer.js +19 -0
  34. package/dist/layout/sidebar-brand.js +16 -0
  35. package/dist/layout/sidebar-nav-item.js +46 -0
  36. package/dist/layout/sidebar-nav.js +43 -0
  37. package/dist/layout/sidebar-overlay.js +18 -0
  38. package/dist/layout/sidebar.js +48 -0
  39. package/dist/layout/topbar.js +128 -0
  40. package/dist/lib/class-name.js +6 -0
  41. package/dist/lib/flatten-menu.js +23 -0
  42. package/dist/tool/datatable.js +45 -0
  43. package/dist/tool/editor.js +72 -0
  44. package/dist/tool/modal.js +28 -0
  45. package/dist/types/direct-chat.js +0 -0
  46. package/dist/types/layout.js +0 -0
  47. package/dist/types/menu.js +0 -0
  48. package/dist/types/theme.js +0 -0
  49. package/dist/widget/accordion.js +35 -0
  50. package/dist/widget/alert.js +18 -0
  51. package/dist/widget/apex-chart.js +40 -0
  52. package/dist/widget/avatar.js +72 -0
  53. package/dist/widget/badge.js +20 -0
  54. package/dist/widget/breadcrumb.js +26 -0
  55. package/dist/widget/callout.js +11 -0
  56. package/dist/widget/card.js +84 -0
  57. package/dist/widget/carousel.js +56 -0
  58. package/dist/widget/command-palette.js +137 -0
  59. package/dist/widget/description-block.js +19 -0
  60. package/dist/widget/direct-chat.js +96 -0
  61. package/dist/widget/dropdown.js +63 -0
  62. package/dist/widget/info-box.js +24 -0
  63. package/dist/widget/list-group.js +47 -0
  64. package/dist/widget/nav-messages.js +48 -0
  65. package/dist/widget/nav-notifications.js +40 -0
  66. package/dist/widget/nav-tasks.js +60 -0
  67. package/dist/widget/offcanvas.js +61 -0
  68. package/dist/widget/pagination.js +93 -0
  69. package/dist/widget/profile-card.js +32 -0
  70. package/dist/widget/progress-group.js +23 -0
  71. package/dist/widget/progress.js +25 -0
  72. package/dist/widget/ratings.js +20 -0
  73. package/dist/widget/small-box.js +34 -0
  74. package/dist/widget/sparkline-chart.js +43 -0
  75. package/dist/widget/spinner.js +26 -0
  76. package/dist/widget/stepper.js +57 -0
  77. package/dist/widget/table.js +50 -0
  78. package/dist/widget/tabs.js +46 -0
  79. package/dist/widget/timeline.js +15 -0
  80. package/dist/widget/toast.js +41 -0
  81. package/dist/widget/tooltip.js +30 -0
  82. package/dist/widget/world-map.js +42 -0
  83. package/package.json +116 -0
@@ -0,0 +1,1010 @@
1
+ import * as React$1 from 'react';
2
+ import React__default, { AnchorHTMLAttributes, ReactNode, Key } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { ApexOptions } from 'apexcharts';
5
+
6
+ /**
7
+ * Bootstrap color theme variants.
8
+ */
9
+ type BootstrapTheme = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
10
+ /**
11
+ * Component size variants.
12
+ */
13
+ type ComponentSize = 'sm' | 'lg';
14
+ /**
15
+ * Color mode for light/dark theme support.
16
+ */
17
+ type ColorMode = 'light' | 'dark' | 'auto';
18
+ /**
19
+ * Bootstrap responsive breakpoint sizes.
20
+ */
21
+ type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
22
+
23
+ /**
24
+ * Menu header item (non-interactive section label).
25
+ */
26
+ interface MenuHeader {
27
+ type: 'header';
28
+ text: string;
29
+ }
30
+ /**
31
+ * Menu link item (clickable, can have children).
32
+ */
33
+ interface MenuItem {
34
+ type: 'item';
35
+ text: string;
36
+ href: string;
37
+ icon?: string;
38
+ iconColor?: BootstrapTheme;
39
+ badge?: string | number;
40
+ badgeColor?: BootstrapTheme;
41
+ target?: '_blank' | '_self';
42
+ }
43
+ /**
44
+ * Menu group item (collapsible submenu).
45
+ */
46
+ interface MenuGroup {
47
+ type: 'group';
48
+ text: string;
49
+ icon?: string;
50
+ iconColor?: BootstrapTheme;
51
+ badge?: string | number;
52
+ badgeColor?: BootstrapTheme;
53
+ children: MenuNode[];
54
+ }
55
+ /**
56
+ * Discriminated union of all menu node types.
57
+ */
58
+ type MenuNode = MenuHeader | MenuItem | MenuGroup;
59
+
60
+ type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
61
+ href: string;
62
+ children?: ReactNode;
63
+ };
64
+ /**
65
+ * A drop-in replacement for `<a>`. Library consumers can inject their framework's
66
+ * router link (e.g. Next.js `next/link`, React Router `Link`) so in-app navigation
67
+ * is client-side. Must accept `href` plus the usual anchor props and render an `<a>`.
68
+ */
69
+ type LinkComponent = (props: LinkProps) => ReactNode;
70
+ declare function LinkProvider({ component, children, }: {
71
+ component?: LinkComponent;
72
+ children: ReactNode;
73
+ }): react_jsx_runtime.JSX.Element;
74
+ /** The active Link component — consumer-injected router link, or a plain `<a>` fallback. */
75
+ declare function useLinkComponent(): LinkComponent;
76
+
77
+ /**
78
+ * The signed-in user shown in the topbar user menu.
79
+ */
80
+ interface TopbarUser {
81
+ name: string;
82
+ image: string;
83
+ role?: string;
84
+ memberSince?: string;
85
+ }
86
+ /**
87
+ * Props for the DashboardLayout component.
88
+ */
89
+ interface DashboardLayoutProps {
90
+ menuItems: MenuNode[];
91
+ logo?: React__default.ReactNode;
92
+ logoHref?: string;
93
+ user?: TopbarUser;
94
+ sidebarTheme?: 'light' | 'dark';
95
+ sidebarClass?: string;
96
+ sidebarBreakpoint?: BreakpointSize;
97
+ sidebarMini?: boolean;
98
+ fixedHeader?: boolean;
99
+ fixedSidebar?: boolean;
100
+ fixedFooter?: boolean;
101
+ colorModeToggle?: boolean;
102
+ initialColorMode?: ColorMode;
103
+ dir?: 'ltr' | 'rtl';
104
+ enableSidebarPersistence?: boolean;
105
+ navbarClass?: string;
106
+ bodyClass?: string;
107
+ topbarStart?: React__default.ReactNode;
108
+ topbarEnd?: React__default.ReactNode;
109
+ footer?: React__default.ReactNode;
110
+ /**
111
+ * Router link to use for sidebar navigation (e.g. an adapter around `next/link`).
112
+ * Enables client-side navigation; defaults to a plain `<a>` (full-page navigation).
113
+ */
114
+ linkComponent?: LinkComponent;
115
+ /** Optional sidebar footer link, e.g. to your documentation. Hidden when unset. */
116
+ docsHref?: string;
117
+ /** Label for the sidebar footer link (default "View documentation"). */
118
+ docsLabel?: string;
119
+ children: React__default.ReactNode;
120
+ }
121
+ /**
122
+ * Props for the AuthLayout component (login/register).
123
+ */
124
+ interface AuthLayoutProps {
125
+ authType?: 'login' | 'register';
126
+ logo?: React__default.ReactNode;
127
+ logoHref?: string;
128
+ children: React__default.ReactNode;
129
+ }
130
+ /**
131
+ * Props for the AppContent wrapper component.
132
+ */
133
+ interface AppContentProps {
134
+ header?: React__default.ReactNode;
135
+ breadcrumbs?: Array<{
136
+ label: string;
137
+ href?: string;
138
+ }>;
139
+ title?: string;
140
+ fluid?: boolean;
141
+ children: React__default.ReactNode;
142
+ }
143
+
144
+ interface DirectChatContact {
145
+ name: string;
146
+ image: string;
147
+ date: string;
148
+ preview: string;
149
+ }
150
+ interface DirectChatMessage {
151
+ from: string;
152
+ image: string;
153
+ timestamp: string;
154
+ text: string;
155
+ isOwn?: boolean;
156
+ }
157
+
158
+ interface SidebarContextValue {
159
+ isCollapsed: boolean;
160
+ isMobileOpen: boolean;
161
+ isMiniMode: boolean;
162
+ toggle: () => void;
163
+ collapse: () => void;
164
+ expand: () => void;
165
+ sidebarBreakpoint: number;
166
+ }
167
+ interface SidebarProviderProps {
168
+ sidebarMini?: boolean;
169
+ enablePersistence?: boolean;
170
+ sidebarBreakpoint?: number;
171
+ children: React__default.ReactNode;
172
+ }
173
+ declare function SidebarProvider({ sidebarMini, enablePersistence, sidebarBreakpoint, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
174
+ declare function useSidebarContext(): SidebarContextValue;
175
+
176
+ interface ColorModeContextValue {
177
+ colorMode: ColorMode;
178
+ setColorMode: (mode: ColorMode) => void;
179
+ resolvedMode: 'light' | 'dark';
180
+ }
181
+ interface ColorModeProviderProps {
182
+ initialMode?: ColorMode;
183
+ children: React__default.ReactNode;
184
+ }
185
+ declare function ColorModeProvider({ initialMode, children, }: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
186
+ declare function useColorModeContext(): ColorModeContextValue;
187
+
188
+ interface CommandPaletteContextValue {
189
+ isOpen: boolean;
190
+ open: () => void;
191
+ close: () => void;
192
+ toggle: () => void;
193
+ }
194
+ declare function CommandPaletteProvider({ children }: {
195
+ children: React__default.ReactNode;
196
+ }): react_jsx_runtime.JSX.Element;
197
+ /**
198
+ * Returns the command-palette controls, or `undefined` if rendered outside a
199
+ * CommandPaletteProvider (so the topbar search button degrades gracefully).
200
+ */
201
+ declare function useCommandPalette(): CommandPaletteContextValue | undefined;
202
+
203
+ /**
204
+ * Main dashboard layout component (RSC outer shell).
205
+ * Computes static body classes server-side, nests client providers inside.
206
+ */
207
+ declare function DashboardLayout({ menuItems, logo, logoHref, user, sidebarTheme, sidebarClass, sidebarBreakpoint, sidebarMini, fixedHeader, fixedSidebar, fixedFooter, colorModeToggle, initialColorMode, dir, enableSidebarPersistence, navbarClass, bodyClass, topbarStart, topbarEnd, footer, linkComponent, docsHref, docsLabel, children, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
208
+
209
+ /**
210
+ * Standalone auth page layout (login/register/lockscreen).
211
+ * Applies the `<authType>-page` classes to <body> via effect so it works
212
+ * under a Next.js App Router root layout that already owns <html>/<body>.
213
+ */
214
+ declare function AuthLayout({ authType, logo, logoHref, children, }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
215
+
216
+ declare function AppContent({ breadcrumbs, title, fluid, children, }: AppContentProps): react_jsx_runtime.JSX.Element;
217
+
218
+ interface TopbarProps {
219
+ start?: React.ReactNode;
220
+ end?: React.ReactNode;
221
+ colorModeToggle?: boolean;
222
+ search?: boolean;
223
+ fullscreen?: boolean;
224
+ user?: TopbarUser;
225
+ navbarClass?: string;
226
+ }
227
+ declare function Topbar({ start, end, colorModeToggle, search, fullscreen, user, navbarClass, }: TopbarProps): react_jsx_runtime.JSX.Element;
228
+
229
+ interface SidebarProps {
230
+ items: MenuNode[];
231
+ logo?: React.ReactNode;
232
+ logoHref?: string;
233
+ theme?: 'light' | 'dark';
234
+ sidebarClass?: string;
235
+ docsHref?: string;
236
+ docsLabel?: string;
237
+ }
238
+ declare function Sidebar({ items, logo, logoHref, theme, sidebarClass, docsHref, docsLabel, }: SidebarProps): react_jsx_runtime.JSX.Element;
239
+
240
+ interface SidebarBrandProps {
241
+ logo?: React.ReactNode;
242
+ href?: string;
243
+ }
244
+ declare function SidebarBrand({ logo, href }: SidebarBrandProps): react_jsx_runtime.JSX.Element;
245
+
246
+ interface SidebarNavProps {
247
+ items: MenuNode[];
248
+ /** Optional footer link (e.g. to your docs). Omitted when not provided. */
249
+ docsHref?: string;
250
+ docsLabel?: string;
251
+ }
252
+ declare function SidebarNav({ items, docsHref, docsLabel }: SidebarNavProps): react_jsx_runtime.JSX.Element;
253
+
254
+ interface SidebarNavItemProps {
255
+ item: MenuNode;
256
+ currentPath: string;
257
+ depth?: number;
258
+ }
259
+ declare function SidebarNavItem({ item, currentPath, depth }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
260
+
261
+ declare function SidebarOverlay(): react_jsx_runtime.JSX.Element;
262
+
263
+ interface FooterProps {
264
+ children?: React.ReactNode;
265
+ }
266
+ declare function Footer({ children }: FooterProps): react_jsx_runtime.JSX.Element;
267
+
268
+ declare function ColorModeToggle(): react_jsx_runtime.JSX.Element;
269
+
270
+ interface SmallBoxProps {
271
+ title: React.ReactNode;
272
+ text?: string;
273
+ icon?: React.ReactNode;
274
+ theme?: BootstrapTheme;
275
+ url?: string;
276
+ urlText?: string;
277
+ }
278
+ declare function SmallBox({ title, text, icon, theme, url, urlText, }: SmallBoxProps): react_jsx_runtime.JSX.Element;
279
+
280
+ interface InfoBoxProps {
281
+ title?: string;
282
+ text?: string;
283
+ icon?: string;
284
+ theme?: BootstrapTheme;
285
+ progress?: number;
286
+ progressText?: string;
287
+ }
288
+ declare function InfoBox({ title, text, icon, theme, progress, progressText, }: InfoBoxProps): react_jsx_runtime.JSX.Element;
289
+
290
+ interface CardProps {
291
+ title?: string;
292
+ icon?: string;
293
+ theme?: BootstrapTheme;
294
+ /**
295
+ * Color treatment when `theme` is set:
296
+ * - 'default' → colored header (`card card-{theme}`)
297
+ * - 'outline' → colored top border (`card card-outline card-{theme}`)
298
+ * - 'solid' → fully colored card (`card text-bg-{theme}`)
299
+ */
300
+ variant?: 'default' | 'outline' | 'solid';
301
+ /** @deprecated use `variant="outline"` */
302
+ outline?: boolean;
303
+ collapsible?: boolean;
304
+ defaultCollapsed?: boolean;
305
+ removable?: boolean;
306
+ /** Called after the card removes itself via the remove tool button */
307
+ onRemove?: () => void;
308
+ maximizable?: boolean;
309
+ bodyClass?: string;
310
+ headerClass?: string;
311
+ footerClass?: string;
312
+ tools?: React.ReactNode;
313
+ footer?: React.ReactNode;
314
+ children: React.ReactNode;
315
+ className?: string;
316
+ }
317
+ declare function Card({ title, icon, theme, variant, outline, collapsible, defaultCollapsed, removable, onRemove, maximizable, bodyClass, headerClass, footerClass, tools, footer, children, className, }: CardProps): react_jsx_runtime.JSX.Element | null;
318
+
319
+ interface AlertProps {
320
+ theme?: BootstrapTheme;
321
+ title?: string;
322
+ icon?: string;
323
+ dismissable?: boolean;
324
+ children: React.ReactNode;
325
+ }
326
+ declare function Alert({ theme, title, icon, dismissable, children, }: AlertProps): react_jsx_runtime.JSX.Element;
327
+
328
+ interface CalloutProps {
329
+ theme?: BootstrapTheme;
330
+ title?: string;
331
+ icon?: string;
332
+ children: React.ReactNode;
333
+ }
334
+ declare function Callout({ theme, title, icon, children }: CalloutProps): react_jsx_runtime.JSX.Element;
335
+
336
+ interface ProgressProps {
337
+ value?: number;
338
+ theme?: BootstrapTheme;
339
+ striped?: boolean;
340
+ animated?: boolean;
341
+ height?: string;
342
+ showLabel?: boolean;
343
+ }
344
+ declare function Progress({ value, theme, striped, animated, height, showLabel, }: ProgressProps): react_jsx_runtime.JSX.Element;
345
+
346
+ interface ProgressGroupProps {
347
+ label: string;
348
+ value: number;
349
+ color?: BootstrapTheme;
350
+ max?: number;
351
+ showPercentage?: boolean;
352
+ }
353
+ declare function ProgressGroup({ label, value, color, max, showPercentage, }: ProgressGroupProps): react_jsx_runtime.JSX.Element;
354
+
355
+ interface RatingsProps {
356
+ value: number;
357
+ max?: number;
358
+ color?: BootstrapTheme;
359
+ readonly?: boolean;
360
+ className?: string;
361
+ }
362
+ declare function Ratings({ value, max, color, readonly, className, }: RatingsProps): react_jsx_runtime.JSX.Element;
363
+
364
+ interface SocialLink {
365
+ icon: string;
366
+ url: string;
367
+ label?: string;
368
+ }
369
+ interface ProfileCardProps {
370
+ name: string;
371
+ title?: string;
372
+ image?: string;
373
+ imageAlt?: string;
374
+ socials?: SocialLink[];
375
+ description?: string;
376
+ className?: string;
377
+ children?: React.ReactNode;
378
+ }
379
+ declare function ProfileCard({ name, title, image, imageAlt, socials, description, className, children, }: ProfileCardProps): react_jsx_runtime.JSX.Element;
380
+
381
+ interface DescriptionBlockProps {
382
+ title: string;
383
+ text?: string;
384
+ items?: Record<string, string>;
385
+ className?: string;
386
+ }
387
+ declare function DescriptionBlock({ title, text, items, className, }: DescriptionBlockProps): react_jsx_runtime.JSX.Element;
388
+
389
+ interface TimelineItem {
390
+ time: string;
391
+ icon?: string;
392
+ iconTheme?: BootstrapTheme;
393
+ title: string;
394
+ body?: React.ReactNode;
395
+ footer?: React.ReactNode;
396
+ url?: string;
397
+ }
398
+ interface TimelineProps {
399
+ items: TimelineItem[];
400
+ className?: string;
401
+ }
402
+ declare function Timeline({ items, className }: TimelineProps): react_jsx_runtime.JSX.Element;
403
+
404
+ interface NavMessage {
405
+ from: string;
406
+ text: string;
407
+ image?: string;
408
+ url?: string;
409
+ time?: string;
410
+ star?: BootstrapTheme;
411
+ }
412
+ interface NavMessagesProps {
413
+ messages: NavMessage[];
414
+ badgeColor?: BootstrapTheme;
415
+ count?: number | string;
416
+ seeAllUrl?: string;
417
+ seeAllText?: string;
418
+ }
419
+ declare function NavMessages({ messages, badgeColor, count, seeAllUrl, seeAllText, }: NavMessagesProps): react_jsx_runtime.JSX.Element;
420
+
421
+ interface NavNotification {
422
+ text: string;
423
+ icon?: string;
424
+ time?: string;
425
+ url?: string;
426
+ }
427
+ interface NavNotificationsProps {
428
+ notifications: NavNotification[];
429
+ badgeColor?: BootstrapTheme;
430
+ count?: number | string;
431
+ seeAllUrl?: string;
432
+ seeAllText?: string;
433
+ }
434
+ declare function NavNotifications({ notifications, badgeColor, count, seeAllUrl, seeAllText, }: NavNotificationsProps): react_jsx_runtime.JSX.Element;
435
+
436
+ interface NavTask {
437
+ text: string;
438
+ progress: number;
439
+ color?: BootstrapTheme;
440
+ url?: string;
441
+ }
442
+ interface NavTasksProps {
443
+ tasks: NavTask[];
444
+ badgeColor?: BootstrapTheme;
445
+ seeAllUrl?: string;
446
+ seeAllText?: string;
447
+ }
448
+ declare function NavTasks({ tasks, badgeColor, seeAllUrl, seeAllText, }: NavTasksProps): react_jsx_runtime.JSX.Element;
449
+
450
+ interface DirectChatProps {
451
+ badge?: number;
452
+ contacts?: DirectChatContact[];
453
+ messages?: DirectChatMessage[];
454
+ collapsible?: boolean;
455
+ removable?: boolean;
456
+ onRemove?: () => void;
457
+ className?: string;
458
+ }
459
+ declare function DirectChat({ badge, contacts, messages, collapsible, removable, onRemove, className, }: DirectChatProps): react_jsx_runtime.JSX.Element | null;
460
+
461
+ interface ApexChartProps {
462
+ id: string;
463
+ series: NonNullable<ApexOptions['series']>;
464
+ config: ApexOptions;
465
+ }
466
+ declare function ApexChart({ id, series, config }: ApexChartProps): react_jsx_runtime.JSX.Element;
467
+
468
+ interface SparklineChartProps {
469
+ id: string;
470
+ data: number[];
471
+ }
472
+ declare function SparklineChart({ id, data }: SparklineChartProps): react_jsx_runtime.JSX.Element;
473
+
474
+ interface WorldMapProps {
475
+ id: string;
476
+ height?: number;
477
+ }
478
+ declare function WorldMap({ id, height }: WorldMapProps): react_jsx_runtime.JSX.Element;
479
+
480
+ interface CommandItem {
481
+ label: string;
482
+ href: string;
483
+ icon?: string;
484
+ section?: string;
485
+ }
486
+ /**
487
+ * Flattens a MenuNode tree into a flat list of navigable commands.
488
+ * Skips placeholder links (`href === '#'`) and de-duplicates by href.
489
+ *
490
+ * Lives outside the 'use client' command-palette module so Server Components
491
+ * (e.g. DashboardLayout) can call it during server render.
492
+ */
493
+ declare function flattenMenuToCommands(nodes: MenuNode[]): CommandItem[];
494
+
495
+ interface CommandPaletteProps {
496
+ items: CommandItem[];
497
+ placeholder?: string;
498
+ }
499
+ declare function CommandPalette({ items, placeholder }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
500
+
501
+ interface AccordionItem {
502
+ title: React.ReactNode;
503
+ children: React.ReactNode;
504
+ }
505
+ interface AccordionProps {
506
+ items: AccordionItem[];
507
+ /** Index open on first render; -1 for all closed. */
508
+ defaultOpen?: number;
509
+ /** Allow multiple panels open at once. */
510
+ alwaysOpen?: boolean;
511
+ /** Edge-to-edge style (`.accordion-flush`). */
512
+ flush?: boolean;
513
+ id?: string;
514
+ className?: string;
515
+ }
516
+ /**
517
+ * Bootstrap accordion driven by React state (no Bootstrap JS / data-bs-toggle).
518
+ */
519
+ declare function Accordion({ items, defaultOpen, alwaysOpen, flush, id, className, }: AccordionProps): react_jsx_runtime.JSX.Element;
520
+
521
+ interface TabItem {
522
+ label: React.ReactNode;
523
+ children: React.ReactNode;
524
+ }
525
+ interface TabsProps {
526
+ items: TabItem[];
527
+ defaultIndex?: number;
528
+ variant?: 'tabs' | 'pills';
529
+ fill?: boolean;
530
+ justified?: boolean;
531
+ className?: string;
532
+ }
533
+ /**
534
+ * Bootstrap tabs/pills driven by React state (no Bootstrap JS).
535
+ */
536
+ declare function Tabs({ items, defaultIndex, variant, fill, justified, className, }: TabsProps): react_jsx_runtime.JSX.Element;
537
+
538
+ interface ToastProps {
539
+ show: boolean;
540
+ onClose: () => void;
541
+ title?: string;
542
+ theme?: BootstrapTheme;
543
+ /** Auto-dismiss after this many ms; 0 disables. */
544
+ autohideMs?: number;
545
+ children: React.ReactNode;
546
+ }
547
+ /**
548
+ * Controlled Bootstrap toast (no Bootstrap JS). Render inside a
549
+ * `.toast-container` to position it. Auto-dismisses unless `autohideMs={0}`.
550
+ */
551
+ declare function Toast({ show, onClose, title, theme, autohideMs, children }: ToastProps): react_jsx_runtime.JSX.Element | null;
552
+
553
+ interface TooltipProps {
554
+ title: string;
555
+ placement?: 'top' | 'bottom' | 'left' | 'right';
556
+ children: React.ReactNode;
557
+ }
558
+ /**
559
+ * Lightweight tooltip driven by hover/focus state (no Bootstrap JS / Popper).
560
+ * Uses Bootstrap's `.tooltip` styles; positions the bubble with inline styles.
561
+ */
562
+ declare function Tooltip({ title, placement, children }: TooltipProps): react_jsx_runtime.JSX.Element;
563
+
564
+ interface BadgeProps {
565
+ theme?: BootstrapTheme;
566
+ /** Fully rounded "pill" shape. */
567
+ pill?: boolean;
568
+ /** Position the badge over a parent (parent needs `position-relative`). */
569
+ positioned?: boolean;
570
+ className?: string;
571
+ children: React.ReactNode;
572
+ }
573
+ /** Bootstrap badge with a contrast-aware `text-bg-*` background. */
574
+ declare function Badge({ theme, pill, positioned, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
575
+
576
+ interface BreadcrumbItem {
577
+ label: React.ReactNode;
578
+ href?: string;
579
+ }
580
+ interface BreadcrumbProps {
581
+ items: BreadcrumbItem[];
582
+ /** Optional divider character (Bootstrap default is "/"). */
583
+ divider?: string;
584
+ className?: string;
585
+ label?: string;
586
+ }
587
+ /** Bootstrap breadcrumb trail. The last item is rendered as the active page. */
588
+ declare function Breadcrumb({ items, divider, className, label }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
589
+
590
+ interface SpinnerProps {
591
+ theme?: BootstrapTheme;
592
+ /** `border` (default) or `grow`. */
593
+ variant?: 'border' | 'grow';
594
+ small?: boolean;
595
+ /** Visually-hidden status text for screen readers. */
596
+ label?: string;
597
+ className?: string;
598
+ }
599
+ /** Bootstrap loading spinner with an accessible status label. */
600
+ declare function Spinner({ theme, variant, small, label, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
601
+
602
+ type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
603
+ interface AvatarProps {
604
+ src?: string;
605
+ alt?: string;
606
+ /** Fallback initials shown when there is no `src`. */
607
+ initials?: string;
608
+ /** Pixel size (width & height). Default 40. */
609
+ size?: number;
610
+ /** Square with rounded corners instead of a circle. */
611
+ rounded?: boolean;
612
+ /** Background theme for the initials fallback. */
613
+ theme?: BootstrapTheme;
614
+ status?: AvatarStatus;
615
+ className?: string;
616
+ }
617
+ /** A user avatar — image or initials fallback, optional presence dot. */
618
+ declare function Avatar({ src, alt, initials, size, rounded, theme, status, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
619
+ interface AvatarGroupProps {
620
+ /** Pixel overlap between stacked avatars. Default 12. */
621
+ overlap?: number;
622
+ className?: string;
623
+ children: React.ReactNode;
624
+ }
625
+ /** Overlapping stack of `Avatar`s. */
626
+ declare function AvatarGroup({ overlap, className, children }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
627
+
628
+ interface ListGroupProps {
629
+ /** Remove the outer border/rounding (for use inside a card). */
630
+ flush?: boolean;
631
+ /** Lay items out horizontally. */
632
+ horizontal?: boolean;
633
+ className?: string;
634
+ children: React.ReactNode;
635
+ }
636
+ /** Bootstrap list group container. */
637
+ declare function ListGroup({ flush, horizontal, className, children }: ListGroupProps): react_jsx_runtime.JSX.Element;
638
+ interface ListGroupItemProps {
639
+ active?: boolean;
640
+ disabled?: boolean;
641
+ /** Render as an interactive action (hover/focus styles). Implied by `href`/`onClick`. */
642
+ action?: boolean;
643
+ theme?: BootstrapTheme;
644
+ href?: string;
645
+ onClick?: () => void;
646
+ className?: string;
647
+ children: React.ReactNode;
648
+ }
649
+ /** A single list group item — `<a>`, `<button>` or `<div>` depending on its props. */
650
+ declare function ListGroupItem({ active, disabled, action, theme, href, onClick, className, children, }: ListGroupItemProps): react_jsx_runtime.JSX.Element;
651
+
652
+ interface TableColumn<T> {
653
+ /** Key into the row, or a unique id when using `render`. */
654
+ key: string;
655
+ header: ReactNode;
656
+ /** Custom cell renderer; defaults to `String(row[key])`. */
657
+ render?: (row: T, index: number) => ReactNode;
658
+ align?: 'start' | 'center' | 'end';
659
+ className?: string;
660
+ headerClassName?: string;
661
+ }
662
+ interface TableProps<T> {
663
+ columns: TableColumn<T>[];
664
+ data: T[];
665
+ rowKey?: (row: T, index: number) => Key;
666
+ striped?: boolean;
667
+ hover?: boolean;
668
+ bordered?: boolean;
669
+ borderless?: boolean;
670
+ small?: boolean;
671
+ /** Wrap in a `.table-responsive` scroll container. */
672
+ responsive?: boolean;
673
+ /** `table-dark` / coloured table variant. */
674
+ theme?: 'dark' | 'light';
675
+ caption?: ReactNode;
676
+ emptyMessage?: ReactNode;
677
+ className?: string;
678
+ }
679
+ /** A typed, declarative table driven by `columns` + `data`. */
680
+ declare function Table<T>({ columns, data, rowKey, striped, hover, bordered, borderless, small, responsive, theme, caption, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
681
+
682
+ interface PaginationProps {
683
+ /** 1-based current page. */
684
+ page: number;
685
+ totalPages: number;
686
+ onPageChange?: (page: number) => void;
687
+ size?: ComponentSize;
688
+ /** Numbered links to show on each side of the current page. Default 1. */
689
+ siblingCount?: number;
690
+ align?: 'start' | 'center' | 'end';
691
+ /** Hide the ‹ › previous/next controls. */
692
+ hideControls?: boolean;
693
+ label?: string;
694
+ className?: string;
695
+ }
696
+ /** Bootstrap pagination. Renders `<button>`s when `onPageChange` is given, else `<a href="#">`. */
697
+ declare function Pagination({ page, totalPages, onPageChange, size, siblingCount, align, hideControls, label, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
698
+
699
+ interface Step {
700
+ label: React.ReactNode;
701
+ description?: React.ReactNode;
702
+ /** Bootstrap icon class for the marker (e.g. `bi-person`); defaults to a number/check. */
703
+ icon?: string;
704
+ }
705
+ interface StepperProps {
706
+ steps: Step[];
707
+ /** 0-based index of the current step. Earlier steps render as complete. */
708
+ active: number;
709
+ orientation?: 'horizontal' | 'vertical';
710
+ /** Makes markers clickable. */
711
+ onStepClick?: (index: number) => void;
712
+ className?: string;
713
+ }
714
+ /** A progress stepper (wizard). Pure/controlled — drive `active` from parent state. */
715
+ declare function Stepper({ steps, active, orientation, onStepClick, className }: StepperProps): react_jsx_runtime.JSX.Element;
716
+
717
+ interface DropdownItem {
718
+ label?: React.ReactNode;
719
+ href?: string;
720
+ onClick?: () => void;
721
+ active?: boolean;
722
+ disabled?: boolean;
723
+ /** Render a divider (other fields ignored). */
724
+ divider?: boolean;
725
+ /** Render a non-interactive header label. */
726
+ header?: boolean;
727
+ icon?: string;
728
+ }
729
+ interface DropdownProps {
730
+ label: React.ReactNode;
731
+ items: DropdownItem[];
732
+ theme?: BootstrapTheme;
733
+ size?: ComponentSize;
734
+ variant?: 'solid' | 'outline';
735
+ /** Open the menu from the end of the toggle. */
736
+ align?: 'start' | 'end';
737
+ /** Drop direction. */
738
+ direction?: 'down' | 'up' | 'start' | 'end';
739
+ /** Split button: separate caret toggle. */
740
+ split?: boolean;
741
+ className?: string;
742
+ }
743
+ /**
744
+ * Bootstrap dropdown (driven by the Bootstrap JS bundle via `data-bs-toggle`).
745
+ * Ensure `bootstrap.bundle.js` is loaded in the host app.
746
+ */
747
+ declare function Dropdown({ label, items, theme, size, variant, align, direction, split, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
748
+
749
+ interface CarouselSlide {
750
+ src?: string;
751
+ alt?: string;
752
+ /** Custom slide content (used instead of an image). */
753
+ content?: React.ReactNode;
754
+ caption?: {
755
+ title?: React.ReactNode;
756
+ text?: React.ReactNode;
757
+ };
758
+ }
759
+ interface CarouselProps {
760
+ /** Required: unique id used to wire controls/indicators. */
761
+ id: string;
762
+ slides: CarouselSlide[];
763
+ controls?: boolean;
764
+ indicators?: boolean;
765
+ /** Auto-cycle. `true` starts after first interaction; `'carousel'` starts on load. */
766
+ ride?: boolean | 'carousel';
767
+ /** Crossfade instead of slide. */
768
+ fade?: boolean;
769
+ interval?: number;
770
+ className?: string;
771
+ }
772
+ /**
773
+ * Bootstrap carousel (driven by the Bootstrap JS bundle). Pass a unique `id`.
774
+ */
775
+ declare function Carousel({ id, slides, controls, indicators, ride, fade, interval, className, }: CarouselProps): react_jsx_runtime.JSX.Element;
776
+
777
+ interface OffcanvasProps {
778
+ /** Required: unique id; triggers reference it via `target`. */
779
+ id: string;
780
+ title?: React.ReactNode;
781
+ placement?: 'start' | 'end' | 'top' | 'bottom';
782
+ /** Allow body scroll while open. */
783
+ scroll?: boolean;
784
+ /** Show a backdrop (default true). */
785
+ backdrop?: boolean;
786
+ footer?: React.ReactNode;
787
+ className?: string;
788
+ children: React.ReactNode;
789
+ }
790
+ /**
791
+ * Bootstrap offcanvas panel (driven by the Bootstrap JS bundle). Pair with an
792
+ * `OffcanvasTrigger` (or any element with `data-bs-toggle="offcanvas"`).
793
+ */
794
+ declare function Offcanvas({ id, title, placement, scroll, backdrop, footer, className, children, }: OffcanvasProps): react_jsx_runtime.JSX.Element;
795
+ interface OffcanvasTriggerProps {
796
+ /** The `id` of the Offcanvas to open. */
797
+ target: string;
798
+ theme?: BootstrapTheme;
799
+ variant?: 'solid' | 'outline';
800
+ size?: ComponentSize;
801
+ className?: string;
802
+ children: React.ReactNode;
803
+ }
804
+ /** A button that opens the Offcanvas with the matching `target` id. */
805
+ declare function OffcanvasTrigger({ target, theme, variant, size, className, children, }: OffcanvasTriggerProps): react_jsx_runtime.JSX.Element;
806
+
807
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
808
+ theme?: BootstrapTheme;
809
+ outline?: boolean;
810
+ size?: ComponentSize;
811
+ icon?: string;
812
+ label?: string;
813
+ }
814
+ declare function Button({ theme, outline, size, icon, label, children, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
815
+
816
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
817
+ label?: string;
818
+ igroupSize?: ComponentSize;
819
+ fgroupClass?: string;
820
+ error?: string;
821
+ hint?: string;
822
+ }
823
+ declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
824
+
825
+ interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
826
+ label?: string;
827
+ fgroupClass?: string;
828
+ error?: string;
829
+ options?: Array<{
830
+ value: string | number;
831
+ label: string;
832
+ }>;
833
+ children?: React.ReactNode;
834
+ }
835
+ declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
836
+
837
+ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
838
+ label?: string;
839
+ fgroupClass?: string;
840
+ error?: string;
841
+ hint?: string;
842
+ }
843
+ declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
844
+
845
+ interface InputSwitchProps {
846
+ name: string;
847
+ label?: string;
848
+ id?: string;
849
+ checked?: boolean;
850
+ defaultChecked?: boolean;
851
+ onChange?: (checked: boolean) => void;
852
+ fgroupClass?: string;
853
+ error?: string;
854
+ }
855
+ declare const InputSwitch: React$1.ForwardRefExoticComponent<InputSwitchProps & React$1.RefAttributes<HTMLInputElement>>;
856
+
857
+ interface InputColorProps extends React.InputHTMLAttributes<HTMLInputElement> {
858
+ label?: string;
859
+ fgroupClass?: string;
860
+ error?: string;
861
+ }
862
+ declare function InputColor({ name, label, fgroupClass, error, className, defaultValue, ...props }: InputColorProps): react_jsx_runtime.JSX.Element;
863
+
864
+ interface InputFileProps extends React.InputHTMLAttributes<HTMLInputElement> {
865
+ label?: string;
866
+ fgroupClass?: string;
867
+ error?: string;
868
+ multiple?: boolean;
869
+ }
870
+ declare function InputFile({ name, label, fgroupClass, error, multiple, className, ...props }: InputFileProps): react_jsx_runtime.JSX.Element;
871
+
872
+ interface InputFlatpickrProps extends React.InputHTMLAttributes<HTMLInputElement> {
873
+ label?: string;
874
+ fgroupClass?: string;
875
+ error?: string;
876
+ dateType?: 'text' | 'date' | 'time' | 'datetime';
877
+ options?: Record<string, unknown>;
878
+ }
879
+ declare function InputFlatpickr({ name, label, fgroupClass, error, dateType, options, className, ...props }: InputFlatpickrProps): react_jsx_runtime.JSX.Element;
880
+
881
+ interface InputTomSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
882
+ label?: string;
883
+ fgroupClass?: string;
884
+ error?: string;
885
+ options?: Array<{
886
+ value: string | number;
887
+ label: string;
888
+ }>;
889
+ tomSelectOptions?: Record<string, unknown>;
890
+ }
891
+ declare function InputTomSelect({ name, label, fgroupClass, error, options, tomSelectOptions, className, 'aria-label': ariaLabelProp, ...props }: InputTomSelectProps): react_jsx_runtime.JSX.Element;
892
+
893
+ interface ModalProps {
894
+ id: string;
895
+ title?: string;
896
+ size?: ComponentSize | 'xl';
897
+ theme?: BootstrapTheme;
898
+ staticBackdrop?: boolean;
899
+ scrollable?: boolean;
900
+ centered?: boolean;
901
+ footer?: React.ReactNode;
902
+ children: React.ReactNode;
903
+ onShow?: () => void;
904
+ onHide?: () => void;
905
+ }
906
+ declare function Modal({ id, title, size, theme, staticBackdrop, scrollable, centered, footer, children, }: ModalProps): react_jsx_runtime.JSX.Element;
907
+
908
+ interface DatatableColumn {
909
+ title: string;
910
+ field: string;
911
+ sorter?: string;
912
+ formatter?: string;
913
+ width?: number | string;
914
+ }
915
+ interface DatatableProps {
916
+ id?: string;
917
+ columns: DatatableColumn[];
918
+ data?: Record<string, unknown>[];
919
+ apiUrl?: string;
920
+ tabulatorOptions?: Record<string, unknown>;
921
+ className?: string;
922
+ }
923
+ declare function Datatable({ id, columns, data, apiUrl, tabulatorOptions, className, }: DatatableProps): react_jsx_runtime.JSX.Element;
924
+
925
+ interface EditorProps {
926
+ name: string;
927
+ label?: string;
928
+ value?: string;
929
+ /** Init-only: Quill 2 has no re-init API, so changes after mount are ignored. */
930
+ placeholder?: string;
931
+ /** Init-only: Quill 2 has no re-init API, so changes after mount are ignored. */
932
+ quillOptions?: Record<string, unknown>;
933
+ fgroupClass?: string;
934
+ onChange?: (html: string) => void;
935
+ }
936
+ declare function Editor({ name, label, value, placeholder, quillOptions, fgroupClass, onChange, }: EditorProps): react_jsx_runtime.JSX.Element;
937
+
938
+ interface UsePushMenuOptions {
939
+ sidebarBreakpoint?: number;
940
+ enablePersistence?: boolean;
941
+ isMiniMode?: boolean;
942
+ }
943
+ interface UsePushMenuResult {
944
+ isCollapsed: boolean;
945
+ isMobileOpen: boolean;
946
+ toggle: () => void;
947
+ collapse: () => void;
948
+ expand: () => void;
949
+ }
950
+ /**
951
+ * Hook that manages sidebar open/collapse state with responsive behavior.
952
+ * Ports the logic from push-menu.ts.
953
+ */
954
+ declare function usePushMenu(options?: UsePushMenuOptions): UsePushMenuResult;
955
+
956
+ interface UseCardWidgetResult {
957
+ isCollapsed: boolean;
958
+ isMaximized: boolean;
959
+ isRemoved: boolean;
960
+ collapse: () => void;
961
+ expand: () => void;
962
+ toggleCollapse: () => void;
963
+ maximize: () => void;
964
+ minimize: () => void;
965
+ toggleMaximize: () => void;
966
+ remove: () => void;
967
+ }
968
+ /**
969
+ * Hook that manages card widget state: collapse, maximize, and remove.
970
+ * Ports the logic from card-widget.ts.
971
+ */
972
+ declare function useCardWidget(initialCollapsed?: boolean): UseCardWidgetResult;
973
+
974
+ interface UseDirectChatResult {
975
+ isContactsOpen: boolean;
976
+ toggleContacts: () => void;
977
+ openContacts: () => void;
978
+ closeContacts: () => void;
979
+ }
980
+ /**
981
+ * Hook that manages direct chat contacts pane visibility.
982
+ * Ports the logic from direct-chat.ts.
983
+ */
984
+ declare function useDirectChat(): UseDirectChatResult;
985
+
986
+ interface UseFullscreenResult {
987
+ isFullscreen: boolean;
988
+ toggleFullscreen: () => void;
989
+ enterFullscreen: () => void;
990
+ exitFullscreen: () => void;
991
+ }
992
+ /**
993
+ * Hook that manages browser fullscreen state.
994
+ * Ports the logic from fullscreen.ts.
995
+ */
996
+ declare function useFullscreen(): UseFullscreenResult;
997
+
998
+ interface UseTreeviewAnimationResult {
999
+ ref: React.RefObject<HTMLUListElement | null>;
1000
+ style: React.CSSProperties;
1001
+ }
1002
+ /**
1003
+ * Hook that manages height animation for treeview expansion/collapse.
1004
+ * Uses CSS transitions instead of jQuery's slideUp/slideDown.
1005
+ */
1006
+ declare function useTreeviewAnimation(isOpen: boolean, speed?: number): UseTreeviewAnimationResult;
1007
+
1008
+ declare function useSortable(enabled?: boolean): void;
1009
+
1010
+ export { Accordion, type AccordionItem, type AccordionProps, Alert, ApexChart, AppContent, type AppContentProps, AuthLayout, type AuthLayoutProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, type BootstrapTheme, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreakpointSize, Button, Callout, Card, Carousel, type CarouselProps, type CarouselSlide, type ColorMode, ColorModeProvider, ColorModeToggle, type CommandItem, CommandPalette, CommandPaletteProvider, type ComponentSize, DashboardLayout, type DashboardLayoutProps, Datatable, DescriptionBlock, DirectChat, type DirectChatContact, type DirectChatMessage, Dropdown, type DropdownItem, type DropdownProps, Editor, Footer, InfoBox, Input, InputColor, InputFile, InputFlatpickr, InputSwitch, InputTomSelect, type LinkComponent, type LinkProps, LinkProvider, ListGroup, ListGroupItem, type ListGroupItemProps, type ListGroupProps, type MenuGroup, type MenuHeader, type MenuItem, type MenuNode, Modal, NavMessages, NavNotifications, NavTasks, Offcanvas, type OffcanvasProps, OffcanvasTrigger, type OffcanvasTriggerProps, Pagination, type PaginationProps, ProfileCard, Progress, ProgressGroup, Ratings, Select, Sidebar, SidebarBrand, SidebarNav, SidebarNavItem, SidebarOverlay, SidebarProvider, SmallBox, SparklineChart, Spinner, type SpinnerProps, type Step, Stepper, type StepperProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, Timeline, Toast, type ToastProps, Tooltip, type TooltipProps, Topbar, type TopbarUser, WorldMap, flattenMenuToCommands, useCardWidget, useColorModeContext, useCommandPalette, useDirectChat, useFullscreen, useLinkComponent, usePushMenu, useSidebarContext, useSortable, useTreeviewAnimation };