@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.
@@ -17194,255 +17194,265 @@ var init_DashboardLayout = __esm({
17194
17194
  const user = userProp || (null);
17195
17195
  const { t } = useTranslate();
17196
17196
  const handleSignOut = onSignOutProp || authSignOut;
17197
- return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
17198
- sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
17199
- Box,
17200
- {
17201
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17202
- onClick: () => setSidebarOpen(false)
17203
- }
17204
- ),
17205
- /* @__PURE__ */ jsxRuntime.jsxs(
17206
- Box,
17207
- {
17208
- as: "aside",
17209
- className: cn(
17210
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
17211
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
17212
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
17197
+ return /* @__PURE__ */ jsxRuntime.jsxs(
17198
+ HStack,
17199
+ {
17200
+ gap: "none",
17201
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
17202
+ children: [
17203
+ sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
17204
+ Box,
17205
+ {
17206
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17207
+ onClick: () => setSidebarOpen(false)
17208
+ }
17213
17209
  ),
17214
- children: [
17215
- /* @__PURE__ */ jsxRuntime.jsxs(
17216
- HStack,
17217
- {
17218
- align: "center",
17219
- justify: "between",
17220
- className: "h-16 px-4 border-b border-border dark:border-border",
17221
- children: [
17222
- /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
17223
- logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17224
- Typography,
17225
- {
17226
- variant: "small",
17227
- className: "text-white font-bold text-sm",
17228
- as: "span",
17229
- children: appName.charAt(0).toUpperCase()
17230
- }
17231
- ) }),
17232
- /* @__PURE__ */ jsxRuntime.jsx(
17233
- Typography,
17234
- {
17235
- variant: "label",
17236
- className: "font-semibold text-foreground dark:text-foreground",
17237
- as: "span",
17238
- children: appName
17239
- }
17240
- )
17241
- ] }),
17242
- /* @__PURE__ */ jsxRuntime.jsx(
17243
- Button,
17244
- {
17245
- variant: "ghost",
17246
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17247
- onClick: () => setSidebarOpen(false),
17248
- children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
17249
- }
17250
- )
17251
- ]
17252
- }
17253
- ),
17254
- /* @__PURE__ */ jsxRuntime.jsx(
17255
- VStack,
17256
- {
17257
- as: "nav",
17258
- gap: "none",
17259
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17260
- children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
17261
- NavLink,
17210
+ /* @__PURE__ */ jsxRuntime.jsxs(
17211
+ Box,
17212
+ {
17213
+ as: "aside",
17214
+ className: cn(
17215
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
17216
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
17217
+ "transform transition-transform duration-200 ease-in-out",
17218
+ "flex flex-col",
17219
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
17220
+ ),
17221
+ children: [
17222
+ /* @__PURE__ */ jsxRuntime.jsxs(
17223
+ HStack,
17262
17224
  {
17263
- item,
17264
- currentPath: location.pathname
17265
- },
17266
- item.href
17267
- ))
17268
- }
17269
- ),
17270
- sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17271
- ]
17272
- }
17273
- ),
17274
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "lg:pl-64", children: [
17275
- /* @__PURE__ */ jsxRuntime.jsx(
17276
- Box,
17277
- {
17278
- as: "header",
17279
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17280
- children: /* @__PURE__ */ jsxRuntime.jsxs(
17281
- HStack,
17282
- {
17283
- align: "center",
17284
- justify: "between",
17285
- className: "h-full px-4 gap-4",
17286
- children: [
17287
- /* @__PURE__ */ jsxRuntime.jsx(
17288
- Button,
17289
- {
17290
- variant: "ghost",
17291
- 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",
17292
- onClick: () => setSidebarOpen(true),
17293
- "aria-label": "Open sidebar",
17294
- children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
17295
- }
17296
- ),
17297
- searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17298
- /* @__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" }),
17299
- /* @__PURE__ */ jsxRuntime.jsx(
17300
- Input,
17301
- {
17302
- type: "search",
17303
- placeholder: t("common.search"),
17304
- className: "pl-10 w-full",
17305
- onKeyDown: (e) => {
17306
- if (e.key === "Enter") {
17307
- handleSearchSubmit(e.target.value);
17225
+ align: "center",
17226
+ justify: "between",
17227
+ className: "h-16 px-4 border-b border-border dark:border-border",
17228
+ children: [
17229
+ /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
17230
+ logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17231
+ Typography,
17232
+ {
17233
+ variant: "small",
17234
+ className: "text-white font-bold text-sm",
17235
+ as: "span",
17236
+ children: appName.charAt(0).toUpperCase()
17237
+ }
17238
+ ) }),
17239
+ /* @__PURE__ */ jsxRuntime.jsx(
17240
+ Typography,
17241
+ {
17242
+ variant: "label",
17243
+ className: "font-semibold text-foreground dark:text-foreground",
17244
+ as: "span",
17245
+ children: appName
17308
17246
  }
17247
+ )
17248
+ ] }),
17249
+ /* @__PURE__ */ jsxRuntime.jsx(
17250
+ Button,
17251
+ {
17252
+ variant: "ghost",
17253
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17254
+ onClick: () => setSidebarOpen(false),
17255
+ children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
17309
17256
  }
17310
- }
17311
- )
17312
- ] }) }),
17313
- /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
17314
- headerActions,
17315
- showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
17316
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
17317
- Button,
17257
+ )
17258
+ ]
17259
+ }
17260
+ ),
17261
+ /* @__PURE__ */ jsxRuntime.jsx(
17262
+ VStack,
17263
+ {
17264
+ as: "nav",
17265
+ gap: "none",
17266
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17267
+ children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
17268
+ NavLink,
17318
17269
  {
17319
- variant: "ghost",
17320
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17321
- onClick: () => handleTopBarActionClick(action.event),
17322
- "aria-label": action.label ?? action.icon,
17323
- children: [
17324
- /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17325
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsxRuntime.jsx(
17326
- Box,
17327
- {
17328
- as: "span",
17329
- className: cn(
17330
- "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",
17331
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17332
- ),
17333
- children: action.badge
17334
- }
17335
- )
17336
- ]
17270
+ item,
17271
+ currentPath: location.pathname
17337
17272
  },
17338
- `${action.event}-${idx}`
17339
- )),
17340
- notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
17341
- Button,
17342
- {
17343
- variant: "ghost",
17344
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17345
- onClick: handleNotificationClick,
17346
- "aria-label": t("common.notifications"),
17347
- children: [
17348
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17349
- unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
17350
- Box,
17351
- {
17352
- as: "span",
17353
- 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",
17354
- children: unreadCount > 99 ? "99+" : unreadCount
17355
- }
17356
- )
17357
- ]
17358
- }
17359
- ),
17360
- user && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17361
- /* @__PURE__ */ jsxRuntime.jsxs(
17273
+ item.href
17274
+ ))
17275
+ }
17276
+ ),
17277
+ sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17278
+ ]
17279
+ }
17280
+ ),
17281
+ /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
17282
+ /* @__PURE__ */ jsxRuntime.jsx(
17283
+ Box,
17284
+ {
17285
+ as: "header",
17286
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17287
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
17288
+ HStack,
17289
+ {
17290
+ align: "center",
17291
+ justify: "between",
17292
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
17293
+ children: [
17294
+ /* @__PURE__ */ jsxRuntime.jsx(
17362
17295
  Button,
17363
17296
  {
17364
17297
  variant: "ghost",
17365
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17366
- onClick: () => setUserMenuOpen(!userMenuOpen),
17367
- children: [
17368
- /* @__PURE__ */ jsxRuntime.jsx(
17369
- Avatar,
17370
- {
17371
- src: user.avatar,
17372
- alt: user.name,
17373
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17374
- size: "sm"
17375
- }
17376
- ),
17377
- /* @__PURE__ */ jsxRuntime.jsx(
17378
- Typography,
17379
- {
17380
- variant: "small",
17381
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17382
- as: "span",
17383
- children: user.name
17384
- }
17385
- ),
17386
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17387
- ]
17298
+ 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",
17299
+ onClick: () => setSidebarOpen(true),
17300
+ "aria-label": "Open sidebar",
17301
+ children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
17388
17302
  }
17389
17303
  ),
17390
- userMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17304
+ 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: [
17305
+ /* @__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" }),
17391
17306
  /* @__PURE__ */ jsxRuntime.jsx(
17392
- Box,
17307
+ Input,
17308
+ {
17309
+ type: "search",
17310
+ placeholder: t("common.search"),
17311
+ className: "pl-10 w-full",
17312
+ onKeyDown: (e) => {
17313
+ if (e.key === "Enter") {
17314
+ handleSearchSubmit(e.target.value);
17315
+ }
17316
+ }
17317
+ }
17318
+ )
17319
+ ] }) }),
17320
+ !searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1" }),
17321
+ /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
17322
+ headerActions,
17323
+ showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
17324
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
17325
+ Button,
17326
+ {
17327
+ variant: "ghost",
17328
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17329
+ onClick: () => handleTopBarActionClick(action.event),
17330
+ "aria-label": action.label ?? action.icon,
17331
+ children: [
17332
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17333
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsxRuntime.jsx(
17334
+ Box,
17335
+ {
17336
+ as: "span",
17337
+ className: cn(
17338
+ "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",
17339
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17340
+ ),
17341
+ children: action.badge
17342
+ }
17343
+ )
17344
+ ]
17345
+ },
17346
+ `${action.event}-${idx}`
17347
+ )),
17348
+ notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
17349
+ Button,
17393
17350
  {
17394
- className: "fixed inset-0 z-20",
17395
- onClick: () => setUserMenuOpen(false)
17351
+ variant: "ghost",
17352
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17353
+ onClick: handleNotificationClick,
17354
+ "aria-label": t("common.notifications"),
17355
+ children: [
17356
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17357
+ unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
17358
+ Box,
17359
+ {
17360
+ as: "span",
17361
+ 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",
17362
+ children: unreadCount > 99 ? "99+" : unreadCount
17363
+ }
17364
+ )
17365
+ ]
17396
17366
  }
17397
17367
  ),
17398
- /* @__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: [
17399
- /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17400
- /* @__PURE__ */ jsxRuntime.jsx(
17401
- Typography,
17402
- {
17403
- variant: "small",
17404
- className: "text-sm font-medium text-foreground dark:text-foreground",
17405
- as: "p",
17406
- children: user.name
17407
- }
17408
- ),
17409
- /* @__PURE__ */ jsxRuntime.jsx(
17410
- Typography,
17411
- {
17412
- variant: "caption",
17413
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
17414
- as: "p",
17415
- children: user.email
17416
- }
17417
- )
17418
- ] }),
17368
+ user && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
17419
17369
  /* @__PURE__ */ jsxRuntime.jsxs(
17420
17370
  Button,
17421
17371
  {
17422
17372
  variant: "ghost",
17423
- onClick: () => {
17424
- setUserMenuOpen(false);
17425
- handleSignOut?.();
17426
- },
17427
- 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",
17373
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17374
+ onClick: () => setUserMenuOpen(!userMenuOpen),
17428
17375
  children: [
17429
- /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogOut, { className: "h-4 w-4" }),
17430
- t("auth.signOut")
17376
+ /* @__PURE__ */ jsxRuntime.jsx(
17377
+ Avatar,
17378
+ {
17379
+ src: user.avatar,
17380
+ alt: user.name,
17381
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17382
+ size: "sm"
17383
+ }
17384
+ ),
17385
+ /* @__PURE__ */ jsxRuntime.jsx(
17386
+ Typography,
17387
+ {
17388
+ variant: "small",
17389
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17390
+ as: "span",
17391
+ children: user.name
17392
+ }
17393
+ ),
17394
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17431
17395
  ]
17432
17396
  }
17433
- )
17397
+ ),
17398
+ userMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17399
+ /* @__PURE__ */ jsxRuntime.jsx(
17400
+ Box,
17401
+ {
17402
+ className: "fixed inset-0 z-20",
17403
+ onClick: () => setUserMenuOpen(false)
17404
+ }
17405
+ ),
17406
+ /* @__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: [
17407
+ /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17408
+ /* @__PURE__ */ jsxRuntime.jsx(
17409
+ Typography,
17410
+ {
17411
+ variant: "small",
17412
+ className: "text-sm font-medium text-foreground dark:text-foreground",
17413
+ as: "p",
17414
+ children: user.name
17415
+ }
17416
+ ),
17417
+ /* @__PURE__ */ jsxRuntime.jsx(
17418
+ Typography,
17419
+ {
17420
+ variant: "caption",
17421
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
17422
+ as: "p",
17423
+ children: user.email
17424
+ }
17425
+ )
17426
+ ] }),
17427
+ /* @__PURE__ */ jsxRuntime.jsxs(
17428
+ Button,
17429
+ {
17430
+ variant: "ghost",
17431
+ onClick: () => {
17432
+ setUserMenuOpen(false);
17433
+ handleSignOut?.();
17434
+ },
17435
+ 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",
17436
+ children: [
17437
+ /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogOut, { className: "h-4 w-4" }),
17438
+ t("auth.signOut")
17439
+ ]
17440
+ }
17441
+ )
17442
+ ] })
17443
+ ] })
17434
17444
  ] })
17435
17445
  ] })
17436
- ] })
17437
- ] })
17438
- ]
17446
+ ]
17447
+ }
17448
+ )
17439
17449
  }
17440
- )
17441
- }
17442
- ),
17443
- /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
17444
- ] })
17445
- ] });
17450
+ ),
17451
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
17452
+ ] })
17453
+ ]
17454
+ }
17455
+ );
17446
17456
  };
17447
17457
  DashboardLayout.displayName = "DashboardLayout";
17448
17458
  NavLink = ({