@almadar/ui 4.54.15 → 4.56.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.
@@ -21328,7 +21328,7 @@ var init_CurrentPagePathContext = __esm({
21328
21328
  useCurrentPagePath = () => React83.useContext(CurrentPagePathContext);
21329
21329
  }
21330
21330
  });
21331
- var DashboardLayout, NavLink;
21331
+ var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
21332
21332
  var init_DashboardLayout = __esm({
21333
21333
  "components/templates/DashboardLayout.tsx"() {
21334
21334
  "use client";
@@ -21359,6 +21359,7 @@ var init_DashboardLayout = __esm({
21359
21359
  sidebarFooter,
21360
21360
  onSignOut: onSignOutProp,
21361
21361
  currentPath,
21362
+ layoutMode = "sidebar",
21362
21363
  children
21363
21364
  }) => {
21364
21365
  const eventBus = useEventBus();
@@ -21385,20 +21386,24 @@ var init_DashboardLayout = __esm({
21385
21386
  const user = userProp || (null);
21386
21387
  const { t } = useTranslate();
21387
21388
  const handleSignOut = onSignOutProp || authSignOut;
21389
+ const showSidebar = layoutMode === "sidebar";
21390
+ const showHeader = layoutMode !== "minimal";
21391
+ const showBottomNav = layoutMode === "bottomnav";
21392
+ const isTopNav = layoutMode === "topnav";
21388
21393
  return /* @__PURE__ */ jsxRuntime.jsxs(
21389
21394
  HStack,
21390
21395
  {
21391
21396
  gap: "none",
21392
21397
  className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
21393
21398
  children: [
21394
- sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
21399
+ showSidebar && sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
21395
21400
  Box,
21396
21401
  {
21397
21402
  className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
21398
21403
  onClick: () => setSidebarOpen(false)
21399
21404
  }
21400
21405
  ),
21401
- /* @__PURE__ */ jsxRuntime.jsxs(
21406
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(
21402
21407
  Box,
21403
21408
  {
21404
21409
  as: "aside",
@@ -21470,7 +21475,7 @@ var init_DashboardLayout = __esm({
21470
21475
  }
21471
21476
  ),
21472
21477
  /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
21473
- /* @__PURE__ */ jsxRuntime.jsx(
21478
+ showHeader && /* @__PURE__ */ jsxRuntime.jsx(
21474
21479
  Box,
21475
21480
  {
21476
21481
  as: "header",
@@ -21482,7 +21487,7 @@ var init_DashboardLayout = __esm({
21482
21487
  justify: "between",
21483
21488
  className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
21484
21489
  children: [
21485
- /* @__PURE__ */ jsxRuntime.jsx(
21490
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
21486
21491
  Button,
21487
21492
  {
21488
21493
  variant: "ghost",
@@ -21492,6 +21497,45 @@ var init_DashboardLayout = __esm({
21492
21497
  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
21493
21498
  }
21494
21499
  ),
21500
+ isTopNav && /* @__PURE__ */ jsxRuntime.jsxs(
21501
+ HStack,
21502
+ {
21503
+ as: "nav",
21504
+ align: "center",
21505
+ gap: "none",
21506
+ className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
21507
+ children: [
21508
+ /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
21509
+ logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
21510
+ Typography,
21511
+ {
21512
+ variant: "small",
21513
+ className: "text-white font-bold text-xs",
21514
+ as: "span",
21515
+ children: appName.charAt(0).toUpperCase()
21516
+ }
21517
+ ) }),
21518
+ /* @__PURE__ */ jsxRuntime.jsx(
21519
+ Typography,
21520
+ {
21521
+ variant: "label",
21522
+ className: "font-semibold text-foreground dark:text-foreground",
21523
+ as: "span",
21524
+ children: appName
21525
+ }
21526
+ )
21527
+ ] }),
21528
+ navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
21529
+ NavLinkTopnav,
21530
+ {
21531
+ item,
21532
+ currentPath: activePath
21533
+ },
21534
+ item.href
21535
+ ))
21536
+ ]
21537
+ }
21538
+ ),
21495
21539
  searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden @sm/dashboard:block flex-1 min-w-0 @xl/dashboard:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
21496
21540
  /* @__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" }),
21497
21541
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -21639,7 +21683,25 @@ var init_DashboardLayout = __esm({
21639
21683
  )
21640
21684
  }
21641
21685
  ),
21642
- /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
21686
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children }),
21687
+ showBottomNav && /* @__PURE__ */ jsxRuntime.jsx(
21688
+ Box,
21689
+ {
21690
+ as: "nav",
21691
+ className: cn(
21692
+ "sticky bottom-0 z-20 h-16 bg-card dark:bg-card border-t border-border dark:border-border",
21693
+ layoutMode !== "bottomnav" && "@md/dashboard:hidden"
21694
+ ),
21695
+ children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", justify: "around", className: "h-full px-2", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
21696
+ NavLinkBottom,
21697
+ {
21698
+ item,
21699
+ currentPath: activePath
21700
+ },
21701
+ item.href
21702
+ )) })
21703
+ }
21704
+ )
21643
21705
  ] })
21644
21706
  ]
21645
21707
  }
@@ -21681,6 +21743,62 @@ var init_DashboardLayout = __esm({
21681
21743
  );
21682
21744
  };
21683
21745
  NavLink.displayName = "NavLink";
21746
+ NavLinkTopnav = ({
21747
+ item,
21748
+ currentPath
21749
+ }) => {
21750
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
21751
+ return /* @__PURE__ */ jsxRuntime.jsxs(
21752
+ reactRouterDom.Link,
21753
+ {
21754
+ to: item.href,
21755
+ className: cn(
21756
+ "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
21757
+ isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
21758
+ ),
21759
+ children: [
21760
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4" })),
21761
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: item.label }),
21762
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge })
21763
+ ]
21764
+ }
21765
+ );
21766
+ };
21767
+ NavLinkTopnav.displayName = "NavLinkTopnav";
21768
+ NavLinkBottom = ({
21769
+ item,
21770
+ currentPath
21771
+ }) => {
21772
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
21773
+ const iconClassName = cn(
21774
+ "h-5 w-5",
21775
+ isActive ? "text-primary" : "text-muted-foreground"
21776
+ );
21777
+ return /* @__PURE__ */ jsxRuntime.jsxs(
21778
+ reactRouterDom.Link,
21779
+ {
21780
+ to: item.href,
21781
+ className: "flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-colors flex-1 min-w-0",
21782
+ children: [
21783
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
21784
+ /* @__PURE__ */ jsxRuntime.jsx(
21785
+ Typography,
21786
+ {
21787
+ variant: "caption",
21788
+ className: cn(
21789
+ "text-[10px] leading-tight truncate max-w-full",
21790
+ isActive ? "text-primary font-medium" : "text-muted-foreground"
21791
+ ),
21792
+ as: "span",
21793
+ children: item.label
21794
+ }
21795
+ ),
21796
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
21797
+ ]
21798
+ }
21799
+ );
21800
+ };
21801
+ NavLinkBottom.displayName = "NavLinkBottom";
21684
21802
  }
21685
21803
  });
21686
21804
  function useAlmadarDndSensors(withSortableKeyboard = true) {
@@ -21282,7 +21282,7 @@ var init_CurrentPagePathContext = __esm({
21282
21282
  useCurrentPagePath = () => useContext(CurrentPagePathContext);
21283
21283
  }
21284
21284
  });
21285
- var DashboardLayout, NavLink;
21285
+ var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
21286
21286
  var init_DashboardLayout = __esm({
21287
21287
  "components/templates/DashboardLayout.tsx"() {
21288
21288
  "use client";
@@ -21313,6 +21313,7 @@ var init_DashboardLayout = __esm({
21313
21313
  sidebarFooter,
21314
21314
  onSignOut: onSignOutProp,
21315
21315
  currentPath,
21316
+ layoutMode = "sidebar",
21316
21317
  children
21317
21318
  }) => {
21318
21319
  const eventBus = useEventBus();
@@ -21339,20 +21340,24 @@ var init_DashboardLayout = __esm({
21339
21340
  const user = userProp || (null);
21340
21341
  const { t } = useTranslate();
21341
21342
  const handleSignOut = onSignOutProp || authSignOut;
21343
+ const showSidebar = layoutMode === "sidebar";
21344
+ const showHeader = layoutMode !== "minimal";
21345
+ const showBottomNav = layoutMode === "bottomnav";
21346
+ const isTopNav = layoutMode === "topnav";
21342
21347
  return /* @__PURE__ */ jsxs(
21343
21348
  HStack,
21344
21349
  {
21345
21350
  gap: "none",
21346
21351
  className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
21347
21352
  children: [
21348
- sidebarOpen && /* @__PURE__ */ jsx(
21353
+ showSidebar && sidebarOpen && /* @__PURE__ */ jsx(
21349
21354
  Box,
21350
21355
  {
21351
21356
  className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
21352
21357
  onClick: () => setSidebarOpen(false)
21353
21358
  }
21354
21359
  ),
21355
- /* @__PURE__ */ jsxs(
21360
+ showSidebar && /* @__PURE__ */ jsxs(
21356
21361
  Box,
21357
21362
  {
21358
21363
  as: "aside",
@@ -21424,7 +21429,7 @@ var init_DashboardLayout = __esm({
21424
21429
  }
21425
21430
  ),
21426
21431
  /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
21427
- /* @__PURE__ */ jsx(
21432
+ showHeader && /* @__PURE__ */ jsx(
21428
21433
  Box,
21429
21434
  {
21430
21435
  as: "header",
@@ -21436,7 +21441,7 @@ var init_DashboardLayout = __esm({
21436
21441
  justify: "between",
21437
21442
  className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
21438
21443
  children: [
21439
- /* @__PURE__ */ jsx(
21444
+ showSidebar && /* @__PURE__ */ jsx(
21440
21445
  Button,
21441
21446
  {
21442
21447
  variant: "ghost",
@@ -21446,6 +21451,45 @@ var init_DashboardLayout = __esm({
21446
21451
  children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
21447
21452
  }
21448
21453
  ),
21454
+ isTopNav && /* @__PURE__ */ jsxs(
21455
+ HStack,
21456
+ {
21457
+ as: "nav",
21458
+ align: "center",
21459
+ gap: "none",
21460
+ className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
21461
+ children: [
21462
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
21463
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
21464
+ Typography,
21465
+ {
21466
+ variant: "small",
21467
+ className: "text-white font-bold text-xs",
21468
+ as: "span",
21469
+ children: appName.charAt(0).toUpperCase()
21470
+ }
21471
+ ) }),
21472
+ /* @__PURE__ */ jsx(
21473
+ Typography,
21474
+ {
21475
+ variant: "label",
21476
+ className: "font-semibold text-foreground dark:text-foreground",
21477
+ as: "span",
21478
+ children: appName
21479
+ }
21480
+ )
21481
+ ] }),
21482
+ navItems.map((item) => /* @__PURE__ */ jsx(
21483
+ NavLinkTopnav,
21484
+ {
21485
+ item,
21486
+ currentPath: activePath
21487
+ },
21488
+ item.href
21489
+ ))
21490
+ ]
21491
+ }
21492
+ ),
21449
21493
  searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden @sm/dashboard:block flex-1 min-w-0 @xl/dashboard:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
21450
21494
  /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
21451
21495
  /* @__PURE__ */ jsx(
@@ -21593,7 +21637,25 @@ var init_DashboardLayout = __esm({
21593
21637
  )
21594
21638
  }
21595
21639
  ),
21596
- /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
21640
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children }),
21641
+ showBottomNav && /* @__PURE__ */ jsx(
21642
+ Box,
21643
+ {
21644
+ as: "nav",
21645
+ className: cn(
21646
+ "sticky bottom-0 z-20 h-16 bg-card dark:bg-card border-t border-border dark:border-border",
21647
+ layoutMode !== "bottomnav" && "@md/dashboard:hidden"
21648
+ ),
21649
+ children: /* @__PURE__ */ jsx(HStack, { align: "center", justify: "around", className: "h-full px-2", children: navItems.map((item) => /* @__PURE__ */ jsx(
21650
+ NavLinkBottom,
21651
+ {
21652
+ item,
21653
+ currentPath: activePath
21654
+ },
21655
+ item.href
21656
+ )) })
21657
+ }
21658
+ )
21597
21659
  ] })
21598
21660
  ]
21599
21661
  }
@@ -21635,6 +21697,62 @@ var init_DashboardLayout = __esm({
21635
21697
  );
21636
21698
  };
21637
21699
  NavLink.displayName = "NavLink";
21700
+ NavLinkTopnav = ({
21701
+ item,
21702
+ currentPath
21703
+ }) => {
21704
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
21705
+ return /* @__PURE__ */ jsxs(
21706
+ Link,
21707
+ {
21708
+ to: item.href,
21709
+ className: cn(
21710
+ "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
21711
+ isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
21712
+ ),
21713
+ children: [
21714
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" })),
21715
+ /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: item.label }),
21716
+ item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge })
21717
+ ]
21718
+ }
21719
+ );
21720
+ };
21721
+ NavLinkTopnav.displayName = "NavLinkTopnav";
21722
+ NavLinkBottom = ({
21723
+ item,
21724
+ currentPath
21725
+ }) => {
21726
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
21727
+ const iconClassName = cn(
21728
+ "h-5 w-5",
21729
+ isActive ? "text-primary" : "text-muted-foreground"
21730
+ );
21731
+ return /* @__PURE__ */ jsxs(
21732
+ Link,
21733
+ {
21734
+ to: item.href,
21735
+ className: "flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-colors flex-1 min-w-0",
21736
+ children: [
21737
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName })),
21738
+ /* @__PURE__ */ jsx(
21739
+ Typography,
21740
+ {
21741
+ variant: "caption",
21742
+ className: cn(
21743
+ "text-[10px] leading-tight truncate max-w-full",
21744
+ isActive ? "text-primary font-medium" : "text-muted-foreground"
21745
+ ),
21746
+ as: "span",
21747
+ children: item.label
21748
+ }
21749
+ ),
21750
+ item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
21751
+ ]
21752
+ }
21753
+ );
21754
+ };
21755
+ NavLinkBottom.displayName = "NavLinkBottom";
21638
21756
  }
21639
21757
  });
21640
21758
  function useAlmadarDndSensors(withSortableKeyboard = true) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "4.54.15",
3
+ "version": "4.56.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [