@almadar/ui 4.30.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.
@@ -16990,255 +16990,265 @@ var init_DashboardLayout = __esm({
16990
16990
  } : null);
16991
16991
  const { t } = useTranslate();
16992
16992
  const handleSignOut = onSignOutProp || authSignOut;
16993
- return /* @__PURE__ */ jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
16994
- sidebarOpen && /* @__PURE__ */ jsx(
16995
- Box,
16996
- {
16997
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
16998
- onClick: () => setSidebarOpen(false)
16999
- }
17000
- ),
17001
- /* @__PURE__ */ jsxs(
17002
- Box,
17003
- {
17004
- as: "aside",
17005
- className: cn(
17006
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
17007
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
17008
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
16993
+ return /* @__PURE__ */ jsxs(
16994
+ HStack,
16995
+ {
16996
+ gap: "none",
16997
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
16998
+ children: [
16999
+ sidebarOpen && /* @__PURE__ */ jsx(
17000
+ Box,
17001
+ {
17002
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17003
+ onClick: () => setSidebarOpen(false)
17004
+ }
17009
17005
  ),
17010
- children: [
17011
- /* @__PURE__ */ jsxs(
17012
- HStack,
17013
- {
17014
- align: "center",
17015
- justify: "between",
17016
- className: "h-16 px-4 border-b border-border dark:border-border",
17017
- children: [
17018
- /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17019
- logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17020
- Typography,
17021
- {
17022
- variant: "small",
17023
- className: "text-white font-bold text-sm",
17024
- as: "span",
17025
- children: appName.charAt(0).toUpperCase()
17026
- }
17027
- ) }),
17028
- /* @__PURE__ */ jsx(
17029
- Typography,
17030
- {
17031
- variant: "label",
17032
- className: "font-semibold text-foreground dark:text-foreground",
17033
- as: "span",
17034
- children: appName
17035
- }
17036
- )
17037
- ] }),
17038
- /* @__PURE__ */ jsx(
17039
- Button,
17040
- {
17041
- variant: "ghost",
17042
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17043
- onClick: () => setSidebarOpen(false),
17044
- children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17045
- }
17046
- )
17047
- ]
17048
- }
17049
- ),
17050
- /* @__PURE__ */ jsx(
17051
- VStack,
17052
- {
17053
- as: "nav",
17054
- gap: "none",
17055
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17056
- children: navItems.map((item) => /* @__PURE__ */ jsx(
17057
- NavLink,
17006
+ /* @__PURE__ */ jsxs(
17007
+ Box,
17008
+ {
17009
+ as: "aside",
17010
+ className: cn(
17011
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
17012
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
17013
+ "transform transition-transform duration-200 ease-in-out",
17014
+ "flex flex-col",
17015
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
17016
+ ),
17017
+ children: [
17018
+ /* @__PURE__ */ jsxs(
17019
+ HStack,
17058
17020
  {
17059
- item,
17060
- currentPath: location.pathname
17061
- },
17062
- item.href
17063
- ))
17064
- }
17065
- ),
17066
- sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17067
- ]
17068
- }
17069
- ),
17070
- /* @__PURE__ */ jsxs(Box, { className: "lg:pl-64", children: [
17071
- /* @__PURE__ */ jsx(
17072
- Box,
17073
- {
17074
- as: "header",
17075
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17076
- children: /* @__PURE__ */ jsxs(
17077
- HStack,
17078
- {
17079
- align: "center",
17080
- justify: "between",
17081
- className: "h-full px-4 gap-4",
17082
- children: [
17083
- /* @__PURE__ */ jsx(
17084
- Button,
17085
- {
17086
- variant: "ghost",
17087
- 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",
17088
- onClick: () => setSidebarOpen(true),
17089
- "aria-label": "Open sidebar",
17090
- children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17091
- }
17092
- ),
17093
- searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17094
- /* @__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" }),
17095
- /* @__PURE__ */ jsx(
17096
- Input,
17097
- {
17098
- type: "search",
17099
- placeholder: t("common.search"),
17100
- className: "pl-10 w-full",
17101
- onKeyDown: (e) => {
17102
- if (e.key === "Enter") {
17103
- handleSearchSubmit(e.target.value);
17021
+ align: "center",
17022
+ justify: "between",
17023
+ className: "h-16 px-4 border-b border-border dark:border-border",
17024
+ children: [
17025
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17026
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17027
+ Typography,
17028
+ {
17029
+ variant: "small",
17030
+ className: "text-white font-bold text-sm",
17031
+ as: "span",
17032
+ children: appName.charAt(0).toUpperCase()
17033
+ }
17034
+ ) }),
17035
+ /* @__PURE__ */ jsx(
17036
+ Typography,
17037
+ {
17038
+ variant: "label",
17039
+ className: "font-semibold text-foreground dark:text-foreground",
17040
+ as: "span",
17041
+ children: appName
17104
17042
  }
17043
+ )
17044
+ ] }),
17045
+ /* @__PURE__ */ jsx(
17046
+ Button,
17047
+ {
17048
+ variant: "ghost",
17049
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17050
+ onClick: () => setSidebarOpen(false),
17051
+ children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17105
17052
  }
17106
- }
17107
- )
17108
- ] }) }),
17109
- /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17110
- headerActions,
17111
- showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17112
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17113
- Button,
17053
+ )
17054
+ ]
17055
+ }
17056
+ ),
17057
+ /* @__PURE__ */ jsx(
17058
+ VStack,
17059
+ {
17060
+ as: "nav",
17061
+ gap: "none",
17062
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17063
+ children: navItems.map((item) => /* @__PURE__ */ jsx(
17064
+ NavLink,
17114
17065
  {
17115
- variant: "ghost",
17116
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17117
- onClick: () => handleTopBarActionClick(action.event),
17118
- "aria-label": action.label ?? action.icon,
17119
- children: [
17120
- /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17121
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17122
- Box,
17123
- {
17124
- as: "span",
17125
- className: cn(
17126
- "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",
17127
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17128
- ),
17129
- children: action.badge
17130
- }
17131
- )
17132
- ]
17066
+ item,
17067
+ currentPath: location.pathname
17133
17068
  },
17134
- `${action.event}-${idx}`
17135
- )),
17136
- notificationsEnabled && /* @__PURE__ */ jsxs(
17137
- Button,
17138
- {
17139
- variant: "ghost",
17140
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17141
- onClick: handleNotificationClick,
17142
- "aria-label": t("common.notifications"),
17143
- children: [
17144
- /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17145
- unreadCount > 0 && /* @__PURE__ */ jsx(
17146
- Box,
17147
- {
17148
- as: "span",
17149
- 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",
17150
- children: unreadCount > 99 ? "99+" : unreadCount
17151
- }
17152
- )
17153
- ]
17154
- }
17155
- ),
17156
- user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17157
- /* @__PURE__ */ jsxs(
17069
+ item.href
17070
+ ))
17071
+ }
17072
+ ),
17073
+ sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17074
+ ]
17075
+ }
17076
+ ),
17077
+ /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
17078
+ /* @__PURE__ */ jsx(
17079
+ Box,
17080
+ {
17081
+ as: "header",
17082
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17083
+ children: /* @__PURE__ */ jsxs(
17084
+ HStack,
17085
+ {
17086
+ align: "center",
17087
+ justify: "between",
17088
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
17089
+ children: [
17090
+ /* @__PURE__ */ jsx(
17158
17091
  Button,
17159
17092
  {
17160
17093
  variant: "ghost",
17161
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17162
- onClick: () => setUserMenuOpen(!userMenuOpen),
17163
- children: [
17164
- /* @__PURE__ */ jsx(
17165
- Avatar,
17166
- {
17167
- src: user.avatar,
17168
- alt: user.name,
17169
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17170
- size: "sm"
17171
- }
17172
- ),
17173
- /* @__PURE__ */ jsx(
17174
- Typography,
17175
- {
17176
- variant: "small",
17177
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17178
- as: "span",
17179
- children: user.name
17180
- }
17181
- ),
17182
- /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17183
- ]
17094
+ 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",
17095
+ onClick: () => setSidebarOpen(true),
17096
+ "aria-label": "Open sidebar",
17097
+ children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17184
17098
  }
17185
17099
  ),
17186
- userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17100
+ searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17101
+ /* @__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" }),
17187
17102
  /* @__PURE__ */ jsx(
17188
- Box,
17103
+ Input,
17104
+ {
17105
+ type: "search",
17106
+ placeholder: t("common.search"),
17107
+ className: "pl-10 w-full",
17108
+ onKeyDown: (e) => {
17109
+ if (e.key === "Enter") {
17110
+ handleSearchSubmit(e.target.value);
17111
+ }
17112
+ }
17113
+ }
17114
+ )
17115
+ ] }) }),
17116
+ !searchEnabled && /* @__PURE__ */ jsx(Box, { className: "flex-1" }),
17117
+ /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17118
+ headerActions,
17119
+ showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17120
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17121
+ Button,
17122
+ {
17123
+ variant: "ghost",
17124
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17125
+ onClick: () => handleTopBarActionClick(action.event),
17126
+ "aria-label": action.label ?? action.icon,
17127
+ children: [
17128
+ /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17129
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17130
+ Box,
17131
+ {
17132
+ as: "span",
17133
+ className: cn(
17134
+ "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",
17135
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17136
+ ),
17137
+ children: action.badge
17138
+ }
17139
+ )
17140
+ ]
17141
+ },
17142
+ `${action.event}-${idx}`
17143
+ )),
17144
+ notificationsEnabled && /* @__PURE__ */ jsxs(
17145
+ Button,
17189
17146
  {
17190
- className: "fixed inset-0 z-20",
17191
- onClick: () => setUserMenuOpen(false)
17147
+ variant: "ghost",
17148
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17149
+ onClick: handleNotificationClick,
17150
+ "aria-label": t("common.notifications"),
17151
+ children: [
17152
+ /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17153
+ unreadCount > 0 && /* @__PURE__ */ jsx(
17154
+ Box,
17155
+ {
17156
+ as: "span",
17157
+ 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",
17158
+ children: unreadCount > 99 ? "99+" : unreadCount
17159
+ }
17160
+ )
17161
+ ]
17192
17162
  }
17193
17163
  ),
17194
- /* @__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: [
17195
- /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17196
- /* @__PURE__ */ jsx(
17197
- Typography,
17198
- {
17199
- variant: "small",
17200
- className: "text-sm font-medium text-foreground dark:text-foreground",
17201
- as: "p",
17202
- children: user.name
17203
- }
17204
- ),
17205
- /* @__PURE__ */ jsx(
17206
- Typography,
17207
- {
17208
- variant: "caption",
17209
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
17210
- as: "p",
17211
- children: user.email
17212
- }
17213
- )
17214
- ] }),
17164
+ user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17215
17165
  /* @__PURE__ */ jsxs(
17216
17166
  Button,
17217
17167
  {
17218
17168
  variant: "ghost",
17219
- onClick: () => {
17220
- setUserMenuOpen(false);
17221
- handleSignOut?.();
17222
- },
17223
- 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",
17169
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17170
+ onClick: () => setUserMenuOpen(!userMenuOpen),
17224
17171
  children: [
17225
- /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17226
- t("auth.signOut")
17172
+ /* @__PURE__ */ jsx(
17173
+ Avatar,
17174
+ {
17175
+ src: user.avatar,
17176
+ alt: user.name,
17177
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17178
+ size: "sm"
17179
+ }
17180
+ ),
17181
+ /* @__PURE__ */ jsx(
17182
+ Typography,
17183
+ {
17184
+ variant: "small",
17185
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17186
+ as: "span",
17187
+ children: user.name
17188
+ }
17189
+ ),
17190
+ /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17227
17191
  ]
17228
17192
  }
17229
- )
17193
+ ),
17194
+ userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17195
+ /* @__PURE__ */ jsx(
17196
+ Box,
17197
+ {
17198
+ className: "fixed inset-0 z-20",
17199
+ onClick: () => setUserMenuOpen(false)
17200
+ }
17201
+ ),
17202
+ /* @__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: [
17203
+ /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17204
+ /* @__PURE__ */ jsx(
17205
+ Typography,
17206
+ {
17207
+ variant: "small",
17208
+ className: "text-sm font-medium text-foreground dark:text-foreground",
17209
+ as: "p",
17210
+ children: user.name
17211
+ }
17212
+ ),
17213
+ /* @__PURE__ */ jsx(
17214
+ Typography,
17215
+ {
17216
+ variant: "caption",
17217
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
17218
+ as: "p",
17219
+ children: user.email
17220
+ }
17221
+ )
17222
+ ] }),
17223
+ /* @__PURE__ */ jsxs(
17224
+ Button,
17225
+ {
17226
+ variant: "ghost",
17227
+ onClick: () => {
17228
+ setUserMenuOpen(false);
17229
+ handleSignOut?.();
17230
+ },
17231
+ 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",
17232
+ children: [
17233
+ /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17234
+ t("auth.signOut")
17235
+ ]
17236
+ }
17237
+ )
17238
+ ] })
17239
+ ] })
17230
17240
  ] })
17231
17241
  ] })
17232
- ] })
17233
- ] })
17234
- ]
17242
+ ]
17243
+ }
17244
+ )
17235
17245
  }
17236
- )
17237
- }
17238
- ),
17239
- /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
17240
- ] })
17241
- ] });
17246
+ ),
17247
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
17248
+ ] })
17249
+ ]
17250
+ }
17251
+ );
17242
17252
  };
17243
17253
  DashboardLayout.displayName = "DashboardLayout";
17244
17254
  NavLink = ({