@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.
@@ -17149,255 +17149,265 @@ var init_DashboardLayout = __esm({
17149
17149
  const user = userProp || (null);
17150
17150
  const { t } = useTranslate();
17151
17151
  const handleSignOut = onSignOutProp || authSignOut;
17152
- return /* @__PURE__ */ jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
17153
- sidebarOpen && /* @__PURE__ */ jsx(
17154
- Box,
17155
- {
17156
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17157
- onClick: () => setSidebarOpen(false)
17158
- }
17159
- ),
17160
- /* @__PURE__ */ jsxs(
17161
- Box,
17162
- {
17163
- as: "aside",
17164
- className: cn(
17165
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
17166
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
17167
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
17152
+ return /* @__PURE__ */ jsxs(
17153
+ HStack,
17154
+ {
17155
+ gap: "none",
17156
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
17157
+ children: [
17158
+ sidebarOpen && /* @__PURE__ */ jsx(
17159
+ Box,
17160
+ {
17161
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17162
+ onClick: () => setSidebarOpen(false)
17163
+ }
17168
17164
  ),
17169
- children: [
17170
- /* @__PURE__ */ jsxs(
17171
- HStack,
17172
- {
17173
- align: "center",
17174
- justify: "between",
17175
- className: "h-16 px-4 border-b border-border dark:border-border",
17176
- children: [
17177
- /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17178
- logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17179
- Typography,
17180
- {
17181
- variant: "small",
17182
- className: "text-white font-bold text-sm",
17183
- as: "span",
17184
- children: appName.charAt(0).toUpperCase()
17185
- }
17186
- ) }),
17187
- /* @__PURE__ */ jsx(
17188
- Typography,
17189
- {
17190
- variant: "label",
17191
- className: "font-semibold text-foreground dark:text-foreground",
17192
- as: "span",
17193
- children: appName
17194
- }
17195
- )
17196
- ] }),
17197
- /* @__PURE__ */ jsx(
17198
- Button,
17199
- {
17200
- variant: "ghost",
17201
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17202
- onClick: () => setSidebarOpen(false),
17203
- children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17204
- }
17205
- )
17206
- ]
17207
- }
17208
- ),
17209
- /* @__PURE__ */ jsx(
17210
- VStack,
17211
- {
17212
- as: "nav",
17213
- gap: "none",
17214
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17215
- children: navItems.map((item) => /* @__PURE__ */ jsx(
17216
- NavLink,
17165
+ /* @__PURE__ */ jsxs(
17166
+ Box,
17167
+ {
17168
+ as: "aside",
17169
+ className: cn(
17170
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
17171
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
17172
+ "transform transition-transform duration-200 ease-in-out",
17173
+ "flex flex-col",
17174
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
17175
+ ),
17176
+ children: [
17177
+ /* @__PURE__ */ jsxs(
17178
+ HStack,
17217
17179
  {
17218
- item,
17219
- currentPath: location.pathname
17220
- },
17221
- item.href
17222
- ))
17223
- }
17224
- ),
17225
- sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17226
- ]
17227
- }
17228
- ),
17229
- /* @__PURE__ */ jsxs(Box, { className: "lg:pl-64", children: [
17230
- /* @__PURE__ */ jsx(
17231
- Box,
17232
- {
17233
- as: "header",
17234
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17235
- children: /* @__PURE__ */ jsxs(
17236
- HStack,
17237
- {
17238
- align: "center",
17239
- justify: "between",
17240
- className: "h-full px-4 gap-4",
17241
- children: [
17242
- /* @__PURE__ */ 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 touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
17247
- onClick: () => setSidebarOpen(true),
17248
- "aria-label": "Open sidebar",
17249
- children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17250
- }
17251
- ),
17252
- searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17253
- /* @__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" }),
17254
- /* @__PURE__ */ jsx(
17255
- Input,
17256
- {
17257
- type: "search",
17258
- placeholder: t("common.search"),
17259
- className: "pl-10 w-full",
17260
- onKeyDown: (e) => {
17261
- if (e.key === "Enter") {
17262
- handleSearchSubmit(e.target.value);
17180
+ align: "center",
17181
+ justify: "between",
17182
+ className: "h-16 px-4 border-b border-border dark:border-border",
17183
+ children: [
17184
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17185
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17186
+ Typography,
17187
+ {
17188
+ variant: "small",
17189
+ className: "text-white font-bold text-sm",
17190
+ as: "span",
17191
+ children: appName.charAt(0).toUpperCase()
17192
+ }
17193
+ ) }),
17194
+ /* @__PURE__ */ jsx(
17195
+ Typography,
17196
+ {
17197
+ variant: "label",
17198
+ className: "font-semibold text-foreground dark:text-foreground",
17199
+ as: "span",
17200
+ children: appName
17263
17201
  }
17202
+ )
17203
+ ] }),
17204
+ /* @__PURE__ */ jsx(
17205
+ Button,
17206
+ {
17207
+ variant: "ghost",
17208
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17209
+ onClick: () => setSidebarOpen(false),
17210
+ children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17264
17211
  }
17265
- }
17266
- )
17267
- ] }) }),
17268
- /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17269
- headerActions,
17270
- showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17271
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17272
- Button,
17212
+ )
17213
+ ]
17214
+ }
17215
+ ),
17216
+ /* @__PURE__ */ jsx(
17217
+ VStack,
17218
+ {
17219
+ as: "nav",
17220
+ gap: "none",
17221
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17222
+ children: navItems.map((item) => /* @__PURE__ */ jsx(
17223
+ NavLink,
17273
17224
  {
17274
- variant: "ghost",
17275
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17276
- onClick: () => handleTopBarActionClick(action.event),
17277
- "aria-label": action.label ?? action.icon,
17278
- children: [
17279
- /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17280
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17281
- Box,
17282
- {
17283
- as: "span",
17284
- className: cn(
17285
- "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",
17286
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17287
- ),
17288
- children: action.badge
17289
- }
17290
- )
17291
- ]
17225
+ item,
17226
+ currentPath: location.pathname
17292
17227
  },
17293
- `${action.event}-${idx}`
17294
- )),
17295
- notificationsEnabled && /* @__PURE__ */ jsxs(
17296
- Button,
17297
- {
17298
- variant: "ghost",
17299
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17300
- onClick: handleNotificationClick,
17301
- "aria-label": t("common.notifications"),
17302
- children: [
17303
- /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17304
- unreadCount > 0 && /* @__PURE__ */ jsx(
17305
- Box,
17306
- {
17307
- as: "span",
17308
- 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",
17309
- children: unreadCount > 99 ? "99+" : unreadCount
17310
- }
17311
- )
17312
- ]
17313
- }
17314
- ),
17315
- user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17316
- /* @__PURE__ */ jsxs(
17228
+ item.href
17229
+ ))
17230
+ }
17231
+ ),
17232
+ sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17233
+ ]
17234
+ }
17235
+ ),
17236
+ /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
17237
+ /* @__PURE__ */ jsx(
17238
+ Box,
17239
+ {
17240
+ as: "header",
17241
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17242
+ children: /* @__PURE__ */ jsxs(
17243
+ HStack,
17244
+ {
17245
+ align: "center",
17246
+ justify: "between",
17247
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
17248
+ children: [
17249
+ /* @__PURE__ */ jsx(
17317
17250
  Button,
17318
17251
  {
17319
17252
  variant: "ghost",
17320
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17321
- onClick: () => setUserMenuOpen(!userMenuOpen),
17322
- children: [
17323
- /* @__PURE__ */ jsx(
17324
- Avatar,
17325
- {
17326
- src: user.avatar,
17327
- alt: user.name,
17328
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17329
- size: "sm"
17330
- }
17331
- ),
17332
- /* @__PURE__ */ jsx(
17333
- Typography,
17334
- {
17335
- variant: "small",
17336
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17337
- as: "span",
17338
- children: user.name
17339
- }
17340
- ),
17341
- /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17342
- ]
17253
+ 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",
17254
+ onClick: () => setSidebarOpen(true),
17255
+ "aria-label": "Open sidebar",
17256
+ children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17343
17257
  }
17344
17258
  ),
17345
- userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17259
+ searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17260
+ /* @__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" }),
17346
17261
  /* @__PURE__ */ jsx(
17347
- Box,
17262
+ Input,
17263
+ {
17264
+ type: "search",
17265
+ placeholder: t("common.search"),
17266
+ className: "pl-10 w-full",
17267
+ onKeyDown: (e) => {
17268
+ if (e.key === "Enter") {
17269
+ handleSearchSubmit(e.target.value);
17270
+ }
17271
+ }
17272
+ }
17273
+ )
17274
+ ] }) }),
17275
+ !searchEnabled && /* @__PURE__ */ jsx(Box, { className: "flex-1" }),
17276
+ /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17277
+ headerActions,
17278
+ showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17279
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17280
+ Button,
17281
+ {
17282
+ variant: "ghost",
17283
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17284
+ onClick: () => handleTopBarActionClick(action.event),
17285
+ "aria-label": action.label ?? action.icon,
17286
+ children: [
17287
+ /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17288
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17289
+ Box,
17290
+ {
17291
+ as: "span",
17292
+ className: cn(
17293
+ "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",
17294
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17295
+ ),
17296
+ children: action.badge
17297
+ }
17298
+ )
17299
+ ]
17300
+ },
17301
+ `${action.event}-${idx}`
17302
+ )),
17303
+ notificationsEnabled && /* @__PURE__ */ jsxs(
17304
+ Button,
17348
17305
  {
17349
- className: "fixed inset-0 z-20",
17350
- onClick: () => setUserMenuOpen(false)
17306
+ variant: "ghost",
17307
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17308
+ onClick: handleNotificationClick,
17309
+ "aria-label": t("common.notifications"),
17310
+ children: [
17311
+ /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17312
+ unreadCount > 0 && /* @__PURE__ */ jsx(
17313
+ Box,
17314
+ {
17315
+ as: "span",
17316
+ 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",
17317
+ children: unreadCount > 99 ? "99+" : unreadCount
17318
+ }
17319
+ )
17320
+ ]
17351
17321
  }
17352
17322
  ),
17353
- /* @__PURE__ */ 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: [
17354
- /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17355
- /* @__PURE__ */ jsx(
17356
- Typography,
17357
- {
17358
- variant: "small",
17359
- className: "text-sm font-medium text-foreground dark:text-foreground",
17360
- as: "p",
17361
- children: user.name
17362
- }
17363
- ),
17364
- /* @__PURE__ */ jsx(
17365
- Typography,
17366
- {
17367
- variant: "caption",
17368
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
17369
- as: "p",
17370
- children: user.email
17371
- }
17372
- )
17373
- ] }),
17323
+ user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17374
17324
  /* @__PURE__ */ jsxs(
17375
17325
  Button,
17376
17326
  {
17377
17327
  variant: "ghost",
17378
- onClick: () => {
17379
- setUserMenuOpen(false);
17380
- handleSignOut?.();
17381
- },
17382
- 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",
17328
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17329
+ onClick: () => setUserMenuOpen(!userMenuOpen),
17383
17330
  children: [
17384
- /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17385
- t("auth.signOut")
17331
+ /* @__PURE__ */ jsx(
17332
+ Avatar,
17333
+ {
17334
+ src: user.avatar,
17335
+ alt: user.name,
17336
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17337
+ size: "sm"
17338
+ }
17339
+ ),
17340
+ /* @__PURE__ */ jsx(
17341
+ Typography,
17342
+ {
17343
+ variant: "small",
17344
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17345
+ as: "span",
17346
+ children: user.name
17347
+ }
17348
+ ),
17349
+ /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17386
17350
  ]
17387
17351
  }
17388
- )
17352
+ ),
17353
+ userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17354
+ /* @__PURE__ */ jsx(
17355
+ Box,
17356
+ {
17357
+ className: "fixed inset-0 z-20",
17358
+ onClick: () => setUserMenuOpen(false)
17359
+ }
17360
+ ),
17361
+ /* @__PURE__ */ 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: [
17362
+ /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17363
+ /* @__PURE__ */ jsx(
17364
+ Typography,
17365
+ {
17366
+ variant: "small",
17367
+ className: "text-sm font-medium text-foreground dark:text-foreground",
17368
+ as: "p",
17369
+ children: user.name
17370
+ }
17371
+ ),
17372
+ /* @__PURE__ */ jsx(
17373
+ Typography,
17374
+ {
17375
+ variant: "caption",
17376
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
17377
+ as: "p",
17378
+ children: user.email
17379
+ }
17380
+ )
17381
+ ] }),
17382
+ /* @__PURE__ */ jsxs(
17383
+ Button,
17384
+ {
17385
+ variant: "ghost",
17386
+ onClick: () => {
17387
+ setUserMenuOpen(false);
17388
+ handleSignOut?.();
17389
+ },
17390
+ 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",
17391
+ children: [
17392
+ /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17393
+ t("auth.signOut")
17394
+ ]
17395
+ }
17396
+ )
17397
+ ] })
17398
+ ] })
17389
17399
  ] })
17390
17400
  ] })
17391
- ] })
17392
- ] })
17393
- ]
17401
+ ]
17402
+ }
17403
+ )
17394
17404
  }
17395
- )
17396
- }
17397
- ),
17398
- /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
17399
- ] })
17400
- ] });
17405
+ ),
17406
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
17407
+ ] })
17408
+ ]
17409
+ }
17410
+ );
17401
17411
  };
17402
17412
  DashboardLayout.displayName = "DashboardLayout";
17403
17413
  NavLink = ({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "4.31.0",
3
+ "version": "4.32.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [