@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.
Files changed (10) hide show
  1. package/dist/avl/index.cjs +124 -6
  2. package/dist/avl/index.js +124 -6
  3. package/dist/components/index.cjs +124 -6
  4. package/dist/components/index.js +124 -6
  5. package/dist/components/templates/DashboardLayout.d.ts +6 -0
  6. package/dist/providers/index.cjs +124 -6
  7. package/dist/providers/index.js +124 -6
  8. package/dist/runtime/index.cjs +124 -6
  9. package/dist/runtime/index.js +124 -6
  10. package/package.json +1 -1
package/dist/avl/index.cjs CHANGED
@@ -25147,7 +25147,7 @@ var init_CurrentPagePathContext = __esm({
25147
25147
  useCurrentPagePath = () => React96.useContext(CurrentPagePathContext);
25148
25148
  }
25149
25149
  });
25150
- var DashboardLayout, NavLink;
25150
+ var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
25151
25151
  var init_DashboardLayout = __esm({
25152
25152
  "components/templates/DashboardLayout.tsx"() {
25153
25153
  "use client";
@@ -25178,6 +25178,7 @@ var init_DashboardLayout = __esm({
25178
25178
  sidebarFooter,
25179
25179
  onSignOut: onSignOutProp,
25180
25180
  currentPath,
25181
+ layoutMode = "sidebar",
25181
25182
  children
25182
25183
  }) => {
25183
25184
  const eventBus = useEventBus();
@@ -25204,20 +25205,24 @@ var init_DashboardLayout = __esm({
25204
25205
  const user = userProp || (null);
25205
25206
  const { t } = useTranslate();
25206
25207
  const handleSignOut = onSignOutProp || authSignOut;
25208
+ const showSidebar = layoutMode === "sidebar";
25209
+ const showHeader = layoutMode !== "minimal";
25210
+ const showBottomNav = layoutMode === "bottomnav";
25211
+ const isTopNav = layoutMode === "topnav";
25207
25212
  return /* @__PURE__ */ jsxRuntime.jsxs(
25208
25213
  HStack,
25209
25214
  {
25210
25215
  gap: "none",
25211
25216
  className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
25212
25217
  children: [
25213
- sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
25218
+ showSidebar && sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
25214
25219
  Box,
25215
25220
  {
25216
25221
  className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
25217
25222
  onClick: () => setSidebarOpen(false)
25218
25223
  }
25219
25224
  ),
25220
- /* @__PURE__ */ jsxRuntime.jsxs(
25225
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(
25221
25226
  Box,
25222
25227
  {
25223
25228
  as: "aside",
@@ -25289,7 +25294,7 @@ var init_DashboardLayout = __esm({
25289
25294
  }
25290
25295
  ),
25291
25296
  /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
25292
- /* @__PURE__ */ jsxRuntime.jsx(
25297
+ showHeader && /* @__PURE__ */ jsxRuntime.jsx(
25293
25298
  Box,
25294
25299
  {
25295
25300
  as: "header",
@@ -25301,7 +25306,7 @@ var init_DashboardLayout = __esm({
25301
25306
  justify: "between",
25302
25307
  className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
25303
25308
  children: [
25304
- /* @__PURE__ */ jsxRuntime.jsx(
25309
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
25305
25310
  Button,
25306
25311
  {
25307
25312
  variant: "ghost",
@@ -25311,6 +25316,45 @@ var init_DashboardLayout = __esm({
25311
25316
  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
25312
25317
  }
25313
25318
  ),
25319
+ isTopNav && /* @__PURE__ */ jsxRuntime.jsxs(
25320
+ HStack,
25321
+ {
25322
+ as: "nav",
25323
+ align: "center",
25324
+ gap: "none",
25325
+ className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
25326
+ children: [
25327
+ /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
25328
+ logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
25329
+ Typography,
25330
+ {
25331
+ variant: "small",
25332
+ className: "text-white font-bold text-xs",
25333
+ as: "span",
25334
+ children: appName.charAt(0).toUpperCase()
25335
+ }
25336
+ ) }),
25337
+ /* @__PURE__ */ jsxRuntime.jsx(
25338
+ Typography,
25339
+ {
25340
+ variant: "label",
25341
+ className: "font-semibold text-foreground dark:text-foreground",
25342
+ as: "span",
25343
+ children: appName
25344
+ }
25345
+ )
25346
+ ] }),
25347
+ navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
25348
+ NavLinkTopnav,
25349
+ {
25350
+ item,
25351
+ currentPath: activePath
25352
+ },
25353
+ item.href
25354
+ ))
25355
+ ]
25356
+ }
25357
+ ),
25314
25358
  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: [
25315
25359
  /* @__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" }),
25316
25360
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -25458,7 +25502,25 @@ var init_DashboardLayout = __esm({
25458
25502
  )
25459
25503
  }
25460
25504
  ),
25461
- /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
25505
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children }),
25506
+ showBottomNav && /* @__PURE__ */ jsxRuntime.jsx(
25507
+ Box,
25508
+ {
25509
+ as: "nav",
25510
+ className: cn(
25511
+ "sticky bottom-0 z-20 h-16 bg-card dark:bg-card border-t border-border dark:border-border",
25512
+ layoutMode !== "bottomnav" && "@md/dashboard:hidden"
25513
+ ),
25514
+ children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", justify: "around", className: "h-full px-2", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
25515
+ NavLinkBottom,
25516
+ {
25517
+ item,
25518
+ currentPath: activePath
25519
+ },
25520
+ item.href
25521
+ )) })
25522
+ }
25523
+ )
25462
25524
  ] })
25463
25525
  ]
25464
25526
  }
@@ -25500,6 +25562,62 @@ var init_DashboardLayout = __esm({
25500
25562
  );
25501
25563
  };
25502
25564
  NavLink.displayName = "NavLink";
25565
+ NavLinkTopnav = ({
25566
+ item,
25567
+ currentPath
25568
+ }) => {
25569
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
25570
+ return /* @__PURE__ */ jsxRuntime.jsxs(
25571
+ reactRouterDom.Link,
25572
+ {
25573
+ to: item.href,
25574
+ className: cn(
25575
+ "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
25576
+ isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
25577
+ ),
25578
+ children: [
25579
+ 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" })),
25580
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: item.label }),
25581
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge })
25582
+ ]
25583
+ }
25584
+ );
25585
+ };
25586
+ NavLinkTopnav.displayName = "NavLinkTopnav";
25587
+ NavLinkBottom = ({
25588
+ item,
25589
+ currentPath
25590
+ }) => {
25591
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
25592
+ const iconClassName = cn(
25593
+ "h-5 w-5",
25594
+ isActive ? "text-primary" : "text-muted-foreground"
25595
+ );
25596
+ return /* @__PURE__ */ jsxRuntime.jsxs(
25597
+ reactRouterDom.Link,
25598
+ {
25599
+ to: item.href,
25600
+ className: "flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-colors flex-1 min-w-0",
25601
+ children: [
25602
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
25603
+ /* @__PURE__ */ jsxRuntime.jsx(
25604
+ Typography,
25605
+ {
25606
+ variant: "caption",
25607
+ className: cn(
25608
+ "text-[10px] leading-tight truncate max-w-full",
25609
+ isActive ? "text-primary font-medium" : "text-muted-foreground"
25610
+ ),
25611
+ as: "span",
25612
+ children: item.label
25613
+ }
25614
+ ),
25615
+ 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 })
25616
+ ]
25617
+ }
25618
+ );
25619
+ };
25620
+ NavLinkBottom.displayName = "NavLinkBottom";
25503
25621
  }
25504
25622
  });
25505
25623
  function useAlmadarDndSensors(withSortableKeyboard = true) {
package/dist/avl/index.js CHANGED
@@ -25101,7 +25101,7 @@ var init_CurrentPagePathContext = __esm({
25101
25101
  useCurrentPagePath = () => useContext(CurrentPagePathContext);
25102
25102
  }
25103
25103
  });
25104
- var DashboardLayout, NavLink;
25104
+ var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
25105
25105
  var init_DashboardLayout = __esm({
25106
25106
  "components/templates/DashboardLayout.tsx"() {
25107
25107
  "use client";
@@ -25132,6 +25132,7 @@ var init_DashboardLayout = __esm({
25132
25132
  sidebarFooter,
25133
25133
  onSignOut: onSignOutProp,
25134
25134
  currentPath,
25135
+ layoutMode = "sidebar",
25135
25136
  children
25136
25137
  }) => {
25137
25138
  const eventBus = useEventBus();
@@ -25158,20 +25159,24 @@ var init_DashboardLayout = __esm({
25158
25159
  const user = userProp || (null);
25159
25160
  const { t } = useTranslate();
25160
25161
  const handleSignOut = onSignOutProp || authSignOut;
25162
+ const showSidebar = layoutMode === "sidebar";
25163
+ const showHeader = layoutMode !== "minimal";
25164
+ const showBottomNav = layoutMode === "bottomnav";
25165
+ const isTopNav = layoutMode === "topnav";
25161
25166
  return /* @__PURE__ */ jsxs(
25162
25167
  HStack,
25163
25168
  {
25164
25169
  gap: "none",
25165
25170
  className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
25166
25171
  children: [
25167
- sidebarOpen && /* @__PURE__ */ jsx(
25172
+ showSidebar && sidebarOpen && /* @__PURE__ */ jsx(
25168
25173
  Box,
25169
25174
  {
25170
25175
  className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
25171
25176
  onClick: () => setSidebarOpen(false)
25172
25177
  }
25173
25178
  ),
25174
- /* @__PURE__ */ jsxs(
25179
+ showSidebar && /* @__PURE__ */ jsxs(
25175
25180
  Box,
25176
25181
  {
25177
25182
  as: "aside",
@@ -25243,7 +25248,7 @@ var init_DashboardLayout = __esm({
25243
25248
  }
25244
25249
  ),
25245
25250
  /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
25246
- /* @__PURE__ */ jsx(
25251
+ showHeader && /* @__PURE__ */ jsx(
25247
25252
  Box,
25248
25253
  {
25249
25254
  as: "header",
@@ -25255,7 +25260,7 @@ var init_DashboardLayout = __esm({
25255
25260
  justify: "between",
25256
25261
  className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
25257
25262
  children: [
25258
- /* @__PURE__ */ jsx(
25263
+ showSidebar && /* @__PURE__ */ jsx(
25259
25264
  Button,
25260
25265
  {
25261
25266
  variant: "ghost",
@@ -25265,6 +25270,45 @@ var init_DashboardLayout = __esm({
25265
25270
  children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
25266
25271
  }
25267
25272
  ),
25273
+ isTopNav && /* @__PURE__ */ jsxs(
25274
+ HStack,
25275
+ {
25276
+ as: "nav",
25277
+ align: "center",
25278
+ gap: "none",
25279
+ className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
25280
+ children: [
25281
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
25282
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
25283
+ Typography,
25284
+ {
25285
+ variant: "small",
25286
+ className: "text-white font-bold text-xs",
25287
+ as: "span",
25288
+ children: appName.charAt(0).toUpperCase()
25289
+ }
25290
+ ) }),
25291
+ /* @__PURE__ */ jsx(
25292
+ Typography,
25293
+ {
25294
+ variant: "label",
25295
+ className: "font-semibold text-foreground dark:text-foreground",
25296
+ as: "span",
25297
+ children: appName
25298
+ }
25299
+ )
25300
+ ] }),
25301
+ navItems.map((item) => /* @__PURE__ */ jsx(
25302
+ NavLinkTopnav,
25303
+ {
25304
+ item,
25305
+ currentPath: activePath
25306
+ },
25307
+ item.href
25308
+ ))
25309
+ ]
25310
+ }
25311
+ ),
25268
25312
  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: [
25269
25313
  /* @__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" }),
25270
25314
  /* @__PURE__ */ jsx(
@@ -25412,7 +25456,25 @@ var init_DashboardLayout = __esm({
25412
25456
  )
25413
25457
  }
25414
25458
  ),
25415
- /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
25459
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children }),
25460
+ showBottomNav && /* @__PURE__ */ jsx(
25461
+ Box,
25462
+ {
25463
+ as: "nav",
25464
+ className: cn(
25465
+ "sticky bottom-0 z-20 h-16 bg-card dark:bg-card border-t border-border dark:border-border",
25466
+ layoutMode !== "bottomnav" && "@md/dashboard:hidden"
25467
+ ),
25468
+ children: /* @__PURE__ */ jsx(HStack, { align: "center", justify: "around", className: "h-full px-2", children: navItems.map((item) => /* @__PURE__ */ jsx(
25469
+ NavLinkBottom,
25470
+ {
25471
+ item,
25472
+ currentPath: activePath
25473
+ },
25474
+ item.href
25475
+ )) })
25476
+ }
25477
+ )
25416
25478
  ] })
25417
25479
  ]
25418
25480
  }
@@ -25454,6 +25516,62 @@ var init_DashboardLayout = __esm({
25454
25516
  );
25455
25517
  };
25456
25518
  NavLink.displayName = "NavLink";
25519
+ NavLinkTopnav = ({
25520
+ item,
25521
+ currentPath
25522
+ }) => {
25523
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
25524
+ return /* @__PURE__ */ jsxs(
25525
+ Link,
25526
+ {
25527
+ to: item.href,
25528
+ className: cn(
25529
+ "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
25530
+ isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
25531
+ ),
25532
+ children: [
25533
+ 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" })),
25534
+ /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: item.label }),
25535
+ item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge })
25536
+ ]
25537
+ }
25538
+ );
25539
+ };
25540
+ NavLinkTopnav.displayName = "NavLinkTopnav";
25541
+ NavLinkBottom = ({
25542
+ item,
25543
+ currentPath
25544
+ }) => {
25545
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
25546
+ const iconClassName = cn(
25547
+ "h-5 w-5",
25548
+ isActive ? "text-primary" : "text-muted-foreground"
25549
+ );
25550
+ return /* @__PURE__ */ jsxs(
25551
+ Link,
25552
+ {
25553
+ to: item.href,
25554
+ className: "flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-colors flex-1 min-w-0",
25555
+ children: [
25556
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName })),
25557
+ /* @__PURE__ */ jsx(
25558
+ Typography,
25559
+ {
25560
+ variant: "caption",
25561
+ className: cn(
25562
+ "text-[10px] leading-tight truncate max-w-full",
25563
+ isActive ? "text-primary font-medium" : "text-muted-foreground"
25564
+ ),
25565
+ as: "span",
25566
+ children: item.label
25567
+ }
25568
+ ),
25569
+ item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
25570
+ ]
25571
+ }
25572
+ );
25573
+ };
25574
+ NavLinkBottom.displayName = "NavLinkBottom";
25457
25575
  }
25458
25576
  });
25459
25577
  function useAlmadarDndSensors(withSortableKeyboard = true) {
package/dist/components/index.cjs CHANGED
@@ -20310,7 +20310,7 @@ var init_CurrentPagePathContext = __esm({
20310
20310
  useCurrentPagePath = () => React78.useContext(CurrentPagePathContext);
20311
20311
  }
20312
20312
  });
20313
- exports.DashboardLayout = void 0; var NavLink;
20313
+ exports.DashboardLayout = void 0; var NavLink, NavLinkTopnav, NavLinkBottom;
20314
20314
  var init_DashboardLayout = __esm({
20315
20315
  "components/templates/DashboardLayout.tsx"() {
20316
20316
  "use client";
@@ -20341,6 +20341,7 @@ var init_DashboardLayout = __esm({
20341
20341
  sidebarFooter,
20342
20342
  onSignOut: onSignOutProp,
20343
20343
  currentPath,
20344
+ layoutMode = "sidebar",
20344
20345
  children
20345
20346
  }) => {
20346
20347
  const eventBus = useEventBus();
@@ -20371,20 +20372,24 @@ var init_DashboardLayout = __esm({
20371
20372
  } : null);
20372
20373
  const { t } = useTranslate();
20373
20374
  const handleSignOut = onSignOutProp || authSignOut;
20375
+ const showSidebar = layoutMode === "sidebar";
20376
+ const showHeader = layoutMode !== "minimal";
20377
+ const showBottomNav = layoutMode === "bottomnav";
20378
+ const isTopNav = layoutMode === "topnav";
20374
20379
  return /* @__PURE__ */ jsxRuntime.jsxs(
20375
20380
  exports.HStack,
20376
20381
  {
20377
20382
  gap: "none",
20378
20383
  className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
20379
20384
  children: [
20380
- sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
20385
+ showSidebar && sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
20381
20386
  exports.Box,
20382
20387
  {
20383
20388
  className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
20384
20389
  onClick: () => setSidebarOpen(false)
20385
20390
  }
20386
20391
  ),
20387
- /* @__PURE__ */ jsxRuntime.jsxs(
20392
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(
20388
20393
  exports.Box,
20389
20394
  {
20390
20395
  as: "aside",
@@ -20456,7 +20461,7 @@ var init_DashboardLayout = __esm({
20456
20461
  }
20457
20462
  ),
20458
20463
  /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
20459
- /* @__PURE__ */ jsxRuntime.jsx(
20464
+ showHeader && /* @__PURE__ */ jsxRuntime.jsx(
20460
20465
  exports.Box,
20461
20466
  {
20462
20467
  as: "header",
@@ -20468,7 +20473,7 @@ var init_DashboardLayout = __esm({
20468
20473
  justify: "between",
20469
20474
  className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
20470
20475
  children: [
20471
- /* @__PURE__ */ jsxRuntime.jsx(
20476
+ showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
20472
20477
  exports.Button,
20473
20478
  {
20474
20479
  variant: "ghost",
@@ -20478,6 +20483,45 @@ var init_DashboardLayout = __esm({
20478
20483
  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
20479
20484
  }
20480
20485
  ),
20486
+ isTopNav && /* @__PURE__ */ jsxRuntime.jsxs(
20487
+ exports.HStack,
20488
+ {
20489
+ as: "nav",
20490
+ align: "center",
20491
+ gap: "none",
20492
+ className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
20493
+ children: [
20494
+ /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
20495
+ logo || /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
20496
+ exports.Typography,
20497
+ {
20498
+ variant: "small",
20499
+ className: "text-white font-bold text-xs",
20500
+ as: "span",
20501
+ children: appName.charAt(0).toUpperCase()
20502
+ }
20503
+ ) }),
20504
+ /* @__PURE__ */ jsxRuntime.jsx(
20505
+ exports.Typography,
20506
+ {
20507
+ variant: "label",
20508
+ className: "font-semibold text-foreground dark:text-foreground",
20509
+ as: "span",
20510
+ children: appName
20511
+ }
20512
+ )
20513
+ ] }),
20514
+ navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
20515
+ NavLinkTopnav,
20516
+ {
20517
+ item,
20518
+ currentPath: activePath
20519
+ },
20520
+ item.href
20521
+ ))
20522
+ ]
20523
+ }
20524
+ ),
20481
20525
  searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "hidden @sm/dashboard:block flex-1 min-w-0 @xl/dashboard:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "relative", children: [
20482
20526
  /* @__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" }),
20483
20527
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -20625,7 +20669,25 @@ var init_DashboardLayout = __esm({
20625
20669
  )
20626
20670
  }
20627
20671
  ),
20628
- /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
20672
+ /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children }),
20673
+ showBottomNav && /* @__PURE__ */ jsxRuntime.jsx(
20674
+ exports.Box,
20675
+ {
20676
+ as: "nav",
20677
+ className: cn(
20678
+ "sticky bottom-0 z-20 h-16 bg-card dark:bg-card border-t border-border dark:border-border",
20679
+ layoutMode !== "bottomnav" && "@md/dashboard:hidden"
20680
+ ),
20681
+ children: /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { align: "center", justify: "around", className: "h-full px-2", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
20682
+ NavLinkBottom,
20683
+ {
20684
+ item,
20685
+ currentPath: activePath
20686
+ },
20687
+ item.href
20688
+ )) })
20689
+ }
20690
+ )
20629
20691
  ] })
20630
20692
  ]
20631
20693
  }
@@ -20667,6 +20729,62 @@ var init_DashboardLayout = __esm({
20667
20729
  );
20668
20730
  };
20669
20731
  NavLink.displayName = "NavLink";
20732
+ NavLinkTopnav = ({
20733
+ item,
20734
+ currentPath
20735
+ }) => {
20736
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
20737
+ return /* @__PURE__ */ jsxRuntime.jsxs(
20738
+ reactRouterDom.Link,
20739
+ {
20740
+ to: item.href,
20741
+ className: cn(
20742
+ "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
20743
+ isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
20744
+ ),
20745
+ children: [
20746
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4" })),
20747
+ /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "flex-1", as: "span", children: item.label }),
20748
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge })
20749
+ ]
20750
+ }
20751
+ );
20752
+ };
20753
+ NavLinkTopnav.displayName = "NavLinkTopnav";
20754
+ NavLinkBottom = ({
20755
+ item,
20756
+ currentPath
20757
+ }) => {
20758
+ const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
20759
+ const iconClassName = cn(
20760
+ "h-5 w-5",
20761
+ isActive ? "text-primary" : "text-muted-foreground"
20762
+ );
20763
+ return /* @__PURE__ */ jsxRuntime.jsxs(
20764
+ reactRouterDom.Link,
20765
+ {
20766
+ to: item.href,
20767
+ className: "flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-colors flex-1 min-w-0",
20768
+ children: [
20769
+ item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
20770
+ /* @__PURE__ */ jsxRuntime.jsx(
20771
+ exports.Typography,
20772
+ {
20773
+ variant: "caption",
20774
+ className: cn(
20775
+ "text-[10px] leading-tight truncate max-w-full",
20776
+ isActive ? "text-primary font-medium" : "text-muted-foreground"
20777
+ ),
20778
+ as: "span",
20779
+ children: item.label
20780
+ }
20781
+ ),
20782
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
20783
+ ]
20784
+ }
20785
+ );
20786
+ };
20787
+ NavLinkBottom.displayName = "NavLinkBottom";
20670
20788
  }
20671
20789
  });
20672
20790
  function useAlmadarDndSensors(withSortableKeyboard = true) {