@almadar/ui 4.31.0 → 4.32.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.
@@ -17425,255 +17425,265 @@ var init_DashboardLayout = __esm({
17425
17425
  const user = userProp || (null);
17426
17426
  const { t } = useTranslate();
17427
17427
  const handleSignOut = onSignOutProp || authSignOut;
17428
- return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
17429
- sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
17430
- Box,
17431
- {
17432
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17433
- onClick: () => setSidebarOpen(false)
17434
- }
17435
- ),
17436
- /* @__PURE__ */ jsxRuntime.jsxs(
17437
- Box,
17438
- {
17439
- as: "aside",
17440
- className: cn(
17441
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
17442
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
17443
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
17428
+ return /* @__PURE__ */ jsxRuntime.jsxs(
17429
+ HStack,
17430
+ {
17431
+ gap: "none",
17432
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
17433
+ children: [
17434
+ sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
17435
+ Box,
17436
+ {
17437
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17438
+ onClick: () => setSidebarOpen(false)
17439
+ }
17444
17440
  ),
17445
- children: [
17446
- /* @__PURE__ */ jsxRuntime.jsxs(
17447
- HStack,
17448
- {
17449
- align: "center",
17450
- justify: "between",
17451
- className: "h-16 px-4 border-b border-border dark:border-border",
17452
- children: [
17453
- /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
17454
- logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17455
- Typography,
17456
- {
17457
- variant: "small",
17458
- className: "text-white font-bold text-sm",
17459
- as: "span",
17460
- children: appName.charAt(0).toUpperCase()
17461
- }
17462
- ) }),
17463
- /* @__PURE__ */ jsxRuntime.jsx(
17464
- Typography,
17465
- {
17466
- variant: "label",
17467
- className: "font-semibold text-foreground dark:text-foreground",
17468
- as: "span",
17469
- children: appName
17470
- }
17471
- )
17472
- ] }),
17473
- /* @__PURE__ */ jsxRuntime.jsx(
17474
- Button,
17475
- {
17476
- variant: "ghost",
17477
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17478
- onClick: () => setSidebarOpen(false),
17479
- children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
17480
- }
17481
- )
17482
- ]
17483
- }
17484
- ),
17485
- /* @__PURE__ */ jsxRuntime.jsx(
17486
- VStack,
17487
- {
17488
- as: "nav",
17489
- gap: "none",
17490
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17491
- children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
17492
- NavLink,
17441
+ /* @__PURE__ */ jsxRuntime.jsxs(
17442
+ Box,
17443
+ {
17444
+ as: "aside",
17445
+ className: cn(
17446
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
17447
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
17448
+ "transform transition-transform duration-200 ease-in-out",
17449
+ "flex flex-col",
17450
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
17451
+ ),
17452
+ children: [
17453
+ /* @__PURE__ */ jsxRuntime.jsxs(
17454
+ HStack,
17493
17455
  {
17494
- item,
17495
- currentPath: location.pathname
17496
- },
17497
- item.href
17498
- ))
17499
- }
17500
- ),
17501
- sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17502
- ]
17503
- }
17504
- ),
17505
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "lg:pl-64", children: [
17506
- /* @__PURE__ */ jsxRuntime.jsx(
17507
- Box,
17508
- {
17509
- as: "header",
17510
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17511
- children: /* @__PURE__ */ jsxRuntime.jsxs(
17512
- HStack,
17513
- {
17514
- align: "center",
17515
- justify: "between",
17516
- className: "h-full px-4 gap-4",
17517
- children: [
17518
- /* @__PURE__ */ jsxRuntime.jsx(
17519
- Button,
17520
- {
17521
- variant: "ghost",
17522
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
17523
- onClick: () => setSidebarOpen(true),
17524
- "aria-label": "Open sidebar",
17525
- children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
17526
- }
17527
- ),
17528
- searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17529
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
17530
- /* @__PURE__ */ jsxRuntime.jsx(
17531
- Input,
17532
- {
17533
- type: "search",
17534
- placeholder: t("common.search"),
17535
- className: "pl-10 w-full",
17536
- onKeyDown: (e) => {
17537
- if (e.key === "Enter") {
17538
- handleSearchSubmit(e.target.value);
17456
+ align: "center",
17457
+ justify: "between",
17458
+ className: "h-16 px-4 border-b border-border dark:border-border",
17459
+ children: [
17460
+ /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
17461
+ logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17462
+ Typography,
17463
+ {
17464
+ variant: "small",
17465
+ className: "text-white font-bold text-sm",
17466
+ as: "span",
17467
+ children: appName.charAt(0).toUpperCase()
17468
+ }
17469
+ ) }),
17470
+ /* @__PURE__ */ jsxRuntime.jsx(
17471
+ Typography,
17472
+ {
17473
+ variant: "label",
17474
+ className: "font-semibold text-foreground dark:text-foreground",
17475
+ as: "span",
17476
+ children: appName
17539
17477
  }
17478
+ )
17479
+ ] }),
17480
+ /* @__PURE__ */ jsxRuntime.jsx(
17481
+ Button,
17482
+ {
17483
+ variant: "ghost",
17484
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17485
+ onClick: () => setSidebarOpen(false),
17486
+ children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
17540
17487
  }
17541
- }
17542
- )
17543
- ] }) }),
17544
- /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
17545
- headerActions,
17546
- showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
17547
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
17548
- Button,
17488
+ )
17489
+ ]
17490
+ }
17491
+ ),
17492
+ /* @__PURE__ */ jsxRuntime.jsx(
17493
+ VStack,
17494
+ {
17495
+ as: "nav",
17496
+ gap: "none",
17497
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17498
+ children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
17499
+ NavLink,
17549
17500
  {
17550
- variant: "ghost",
17551
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17552
- onClick: () => handleTopBarActionClick(action.event),
17553
- "aria-label": action.label ?? action.icon,
17554
- children: [
17555
- /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17556
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsxRuntime.jsx(
17557
- Box,
17558
- {
17559
- as: "span",
17560
- className: cn(
17561
- "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17562
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17563
- ),
17564
- children: action.badge
17565
- }
17566
- )
17567
- ]
17501
+ item,
17502
+ currentPath: location.pathname
17568
17503
  },
17569
- `${action.event}-${idx}`
17570
- )),
17571
- notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
17572
- Button,
17573
- {
17574
- variant: "ghost",
17575
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17576
- onClick: handleNotificationClick,
17577
- "aria-label": t("common.notifications"),
17578
- children: [
17579
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17580
- unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
17581
- Box,
17582
- {
17583
- as: "span",
17584
- className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17585
- children: unreadCount > 99 ? "99+" : unreadCount
17586
- }
17587
- )
17588
- ]
17589
- }
17590
- ),
17591
- user && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17592
- /* @__PURE__ */ jsxRuntime.jsxs(
17504
+ item.href
17505
+ ))
17506
+ }
17507
+ ),
17508
+ sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17509
+ ]
17510
+ }
17511
+ ),
17512
+ /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
17513
+ /* @__PURE__ */ jsxRuntime.jsx(
17514
+ Box,
17515
+ {
17516
+ as: "header",
17517
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17518
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
17519
+ HStack,
17520
+ {
17521
+ align: "center",
17522
+ justify: "between",
17523
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
17524
+ children: [
17525
+ /* @__PURE__ */ jsxRuntime.jsx(
17593
17526
  Button,
17594
17527
  {
17595
17528
  variant: "ghost",
17596
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17597
- onClick: () => setUserMenuOpen(!userMenuOpen),
17598
- children: [
17599
- /* @__PURE__ */ jsxRuntime.jsx(
17600
- Avatar,
17601
- {
17602
- src: user.avatar,
17603
- alt: user.name,
17604
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17605
- size: "sm"
17606
- }
17607
- ),
17608
- /* @__PURE__ */ jsxRuntime.jsx(
17609
- Typography,
17610
- {
17611
- variant: "small",
17612
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17613
- as: "span",
17614
- children: user.name
17615
- }
17616
- ),
17617
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17618
- ]
17529
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
17530
+ onClick: () => setSidebarOpen(true),
17531
+ "aria-label": "Open sidebar",
17532
+ children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
17619
17533
  }
17620
17534
  ),
17621
- userMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17535
+ searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17536
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
17622
17537
  /* @__PURE__ */ jsxRuntime.jsx(
17623
- Box,
17538
+ Input,
17539
+ {
17540
+ type: "search",
17541
+ placeholder: t("common.search"),
17542
+ className: "pl-10 w-full",
17543
+ onKeyDown: (e) => {
17544
+ if (e.key === "Enter") {
17545
+ handleSearchSubmit(e.target.value);
17546
+ }
17547
+ }
17548
+ }
17549
+ )
17550
+ ] }) }),
17551
+ !searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1" }),
17552
+ /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
17553
+ headerActions,
17554
+ showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
17555
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
17556
+ Button,
17557
+ {
17558
+ variant: "ghost",
17559
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17560
+ onClick: () => handleTopBarActionClick(action.event),
17561
+ "aria-label": action.label ?? action.icon,
17562
+ children: [
17563
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17564
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsxRuntime.jsx(
17565
+ Box,
17566
+ {
17567
+ as: "span",
17568
+ className: cn(
17569
+ "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17570
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17571
+ ),
17572
+ children: action.badge
17573
+ }
17574
+ )
17575
+ ]
17576
+ },
17577
+ `${action.event}-${idx}`
17578
+ )),
17579
+ notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
17580
+ Button,
17624
17581
  {
17625
- className: "fixed inset-0 z-20",
17626
- onClick: () => setUserMenuOpen(false)
17582
+ variant: "ghost",
17583
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17584
+ onClick: handleNotificationClick,
17585
+ "aria-label": t("common.notifications"),
17586
+ children: [
17587
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17588
+ unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
17589
+ Box,
17590
+ {
17591
+ as: "span",
17592
+ className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17593
+ children: unreadCount > 99 ? "99+" : unreadCount
17594
+ }
17595
+ )
17596
+ ]
17627
17597
  }
17628
17598
  ),
17629
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
17630
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17631
- /* @__PURE__ */ jsxRuntime.jsx(
17632
- Typography,
17633
- {
17634
- variant: "small",
17635
- className: "text-sm font-medium text-foreground dark:text-foreground",
17636
- as: "p",
17637
- children: user.name
17638
- }
17639
- ),
17640
- /* @__PURE__ */ jsxRuntime.jsx(
17641
- Typography,
17642
- {
17643
- variant: "caption",
17644
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
17645
- as: "p",
17646
- children: user.email
17647
- }
17648
- )
17649
- ] }),
17599
+ user && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17650
17600
  /* @__PURE__ */ jsxRuntime.jsxs(
17651
17601
  Button,
17652
17602
  {
17653
17603
  variant: "ghost",
17654
- onClick: () => {
17655
- setUserMenuOpen(false);
17656
- handleSignOut?.();
17657
- },
17658
- className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
17604
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17605
+ onClick: () => setUserMenuOpen(!userMenuOpen),
17659
17606
  children: [
17660
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogOut, { className: "h-4 w-4" }),
17661
- t("auth.signOut")
17607
+ /* @__PURE__ */ jsxRuntime.jsx(
17608
+ Avatar,
17609
+ {
17610
+ src: user.avatar,
17611
+ alt: user.name,
17612
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17613
+ size: "sm"
17614
+ }
17615
+ ),
17616
+ /* @__PURE__ */ jsxRuntime.jsx(
17617
+ Typography,
17618
+ {
17619
+ variant: "small",
17620
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17621
+ as: "span",
17622
+ children: user.name
17623
+ }
17624
+ ),
17625
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17662
17626
  ]
17663
17627
  }
17664
- )
17628
+ ),
17629
+ userMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17630
+ /* @__PURE__ */ jsxRuntime.jsx(
17631
+ Box,
17632
+ {
17633
+ className: "fixed inset-0 z-20",
17634
+ onClick: () => setUserMenuOpen(false)
17635
+ }
17636
+ ),
17637
+ /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
17638
+ /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17639
+ /* @__PURE__ */ jsxRuntime.jsx(
17640
+ Typography,
17641
+ {
17642
+ variant: "small",
17643
+ className: "text-sm font-medium text-foreground dark:text-foreground",
17644
+ as: "p",
17645
+ children: user.name
17646
+ }
17647
+ ),
17648
+ /* @__PURE__ */ jsxRuntime.jsx(
17649
+ Typography,
17650
+ {
17651
+ variant: "caption",
17652
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
17653
+ as: "p",
17654
+ children: user.email
17655
+ }
17656
+ )
17657
+ ] }),
17658
+ /* @__PURE__ */ jsxRuntime.jsxs(
17659
+ Button,
17660
+ {
17661
+ variant: "ghost",
17662
+ onClick: () => {
17663
+ setUserMenuOpen(false);
17664
+ handleSignOut?.();
17665
+ },
17666
+ className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
17667
+ children: [
17668
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogOut, { className: "h-4 w-4" }),
17669
+ t("auth.signOut")
17670
+ ]
17671
+ }
17672
+ )
17673
+ ] })
17674
+ ] })
17665
17675
  ] })
17666
17676
  ] })
17667
- ] })
17668
- ] })
17669
- ]
17677
+ ]
17678
+ }
17679
+ )
17670
17680
  }
17671
- )
17672
- }
17673
- ),
17674
- /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
17675
- ] })
17676
- ] });
17681
+ ),
17682
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
17683
+ ] })
17684
+ ]
17685
+ }
17686
+ );
17677
17687
  };
17678
17688
  DashboardLayout.displayName = "DashboardLayout";
17679
17689
  NavLink = ({