@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.
package/dist/avl/index.js CHANGED
@@ -20622,255 +20622,265 @@ var init_DashboardLayout = __esm({
20622
20622
  const user = userProp || (null);
20623
20623
  const { t } = useTranslate();
20624
20624
  const handleSignOut = onSignOutProp || authSignOut;
20625
- return /* @__PURE__ */ jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
20626
- sidebarOpen && /* @__PURE__ */ jsx(
20627
- Box,
20628
- {
20629
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
20630
- onClick: () => setSidebarOpen(false)
20631
- }
20632
- ),
20633
- /* @__PURE__ */ jsxs(
20634
- Box,
20635
- {
20636
- as: "aside",
20637
- className: cn(
20638
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
20639
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
20640
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
20625
+ return /* @__PURE__ */ jsxs(
20626
+ HStack,
20627
+ {
20628
+ gap: "none",
20629
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
20630
+ children: [
20631
+ sidebarOpen && /* @__PURE__ */ jsx(
20632
+ Box,
20633
+ {
20634
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
20635
+ onClick: () => setSidebarOpen(false)
20636
+ }
20641
20637
  ),
20642
- children: [
20643
- /* @__PURE__ */ jsxs(
20644
- HStack,
20645
- {
20646
- align: "center",
20647
- justify: "between",
20648
- className: "h-16 px-4 border-b border-border dark:border-border",
20649
- children: [
20650
- /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
20651
- logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
20652
- Typography,
20653
- {
20654
- variant: "small",
20655
- className: "text-white font-bold text-sm",
20656
- as: "span",
20657
- children: appName.charAt(0).toUpperCase()
20658
- }
20659
- ) }),
20660
- /* @__PURE__ */ jsx(
20661
- Typography,
20662
- {
20663
- variant: "label",
20664
- className: "font-semibold text-foreground dark:text-foreground",
20665
- as: "span",
20666
- children: appName
20667
- }
20668
- )
20669
- ] }),
20670
- /* @__PURE__ */ jsx(
20671
- Button,
20672
- {
20673
- variant: "ghost",
20674
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
20675
- onClick: () => setSidebarOpen(false),
20676
- children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
20677
- }
20678
- )
20679
- ]
20680
- }
20681
- ),
20682
- /* @__PURE__ */ jsx(
20683
- VStack,
20684
- {
20685
- as: "nav",
20686
- gap: "none",
20687
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
20688
- children: navItems.map((item) => /* @__PURE__ */ jsx(
20689
- NavLink,
20638
+ /* @__PURE__ */ jsxs(
20639
+ Box,
20640
+ {
20641
+ as: "aside",
20642
+ className: cn(
20643
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
20644
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
20645
+ "transform transition-transform duration-200 ease-in-out",
20646
+ "flex flex-col",
20647
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
20648
+ ),
20649
+ children: [
20650
+ /* @__PURE__ */ jsxs(
20651
+ HStack,
20690
20652
  {
20691
- item,
20692
- currentPath: location.pathname
20693
- },
20694
- item.href
20695
- ))
20696
- }
20697
- ),
20698
- sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
20699
- ]
20700
- }
20701
- ),
20702
- /* @__PURE__ */ jsxs(Box, { className: "lg:pl-64", children: [
20703
- /* @__PURE__ */ jsx(
20704
- Box,
20705
- {
20706
- as: "header",
20707
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
20708
- children: /* @__PURE__ */ jsxs(
20709
- HStack,
20710
- {
20711
- align: "center",
20712
- justify: "between",
20713
- className: "h-full px-4 gap-4",
20714
- children: [
20715
- /* @__PURE__ */ jsx(
20716
- Button,
20717
- {
20718
- variant: "ghost",
20719
- 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",
20720
- onClick: () => setSidebarOpen(true),
20721
- "aria-label": "Open sidebar",
20722
- children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
20723
- }
20724
- ),
20725
- searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
20726
- /* @__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" }),
20727
- /* @__PURE__ */ jsx(
20728
- Input,
20729
- {
20730
- type: "search",
20731
- placeholder: t("common.search"),
20732
- className: "pl-10 w-full",
20733
- onKeyDown: (e) => {
20734
- if (e.key === "Enter") {
20735
- handleSearchSubmit(e.target.value);
20653
+ align: "center",
20654
+ justify: "between",
20655
+ className: "h-16 px-4 border-b border-border dark:border-border",
20656
+ children: [
20657
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
20658
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
20659
+ Typography,
20660
+ {
20661
+ variant: "small",
20662
+ className: "text-white font-bold text-sm",
20663
+ as: "span",
20664
+ children: appName.charAt(0).toUpperCase()
20736
20665
  }
20666
+ ) }),
20667
+ /* @__PURE__ */ jsx(
20668
+ Typography,
20669
+ {
20670
+ variant: "label",
20671
+ className: "font-semibold text-foreground dark:text-foreground",
20672
+ as: "span",
20673
+ children: appName
20674
+ }
20675
+ )
20676
+ ] }),
20677
+ /* @__PURE__ */ jsx(
20678
+ Button,
20679
+ {
20680
+ variant: "ghost",
20681
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
20682
+ onClick: () => setSidebarOpen(false),
20683
+ children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
20737
20684
  }
20738
- }
20739
- )
20740
- ] }) }),
20741
- /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
20742
- headerActions,
20743
- showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
20744
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
20745
- Button,
20685
+ )
20686
+ ]
20687
+ }
20688
+ ),
20689
+ /* @__PURE__ */ jsx(
20690
+ VStack,
20691
+ {
20692
+ as: "nav",
20693
+ gap: "none",
20694
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
20695
+ children: navItems.map((item) => /* @__PURE__ */ jsx(
20696
+ NavLink,
20746
20697
  {
20747
- variant: "ghost",
20748
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
20749
- onClick: () => handleTopBarActionClick(action.event),
20750
- "aria-label": action.label ?? action.icon,
20751
- children: [
20752
- /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
20753
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
20754
- Box,
20755
- {
20756
- as: "span",
20757
- className: cn(
20758
- "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",
20759
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
20760
- ),
20761
- children: action.badge
20762
- }
20763
- )
20764
- ]
20698
+ item,
20699
+ currentPath: location.pathname
20765
20700
  },
20766
- `${action.event}-${idx}`
20767
- )),
20768
- notificationsEnabled && /* @__PURE__ */ jsxs(
20769
- Button,
20770
- {
20771
- variant: "ghost",
20772
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
20773
- onClick: handleNotificationClick,
20774
- "aria-label": t("common.notifications"),
20775
- children: [
20776
- /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
20777
- unreadCount > 0 && /* @__PURE__ */ jsx(
20778
- Box,
20779
- {
20780
- as: "span",
20781
- 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",
20782
- children: unreadCount > 99 ? "99+" : unreadCount
20783
- }
20784
- )
20785
- ]
20786
- }
20787
- ),
20788
- user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
20789
- /* @__PURE__ */ jsxs(
20701
+ item.href
20702
+ ))
20703
+ }
20704
+ ),
20705
+ sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
20706
+ ]
20707
+ }
20708
+ ),
20709
+ /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
20710
+ /* @__PURE__ */ jsx(
20711
+ Box,
20712
+ {
20713
+ as: "header",
20714
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
20715
+ children: /* @__PURE__ */ jsxs(
20716
+ HStack,
20717
+ {
20718
+ align: "center",
20719
+ justify: "between",
20720
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
20721
+ children: [
20722
+ /* @__PURE__ */ jsx(
20790
20723
  Button,
20791
20724
  {
20792
20725
  variant: "ghost",
20793
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
20794
- onClick: () => setUserMenuOpen(!userMenuOpen),
20795
- children: [
20796
- /* @__PURE__ */ jsx(
20797
- Avatar,
20798
- {
20799
- src: user.avatar,
20800
- alt: user.name,
20801
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
20802
- size: "sm"
20803
- }
20804
- ),
20805
- /* @__PURE__ */ jsx(
20806
- Typography,
20807
- {
20808
- variant: "small",
20809
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
20810
- as: "span",
20811
- children: user.name
20812
- }
20813
- ),
20814
- /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
20815
- ]
20726
+ 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",
20727
+ onClick: () => setSidebarOpen(true),
20728
+ "aria-label": "Open sidebar",
20729
+ children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
20816
20730
  }
20817
20731
  ),
20818
- userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
20732
+ searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
20733
+ /* @__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" }),
20819
20734
  /* @__PURE__ */ jsx(
20820
- Box,
20735
+ Input,
20736
+ {
20737
+ type: "search",
20738
+ placeholder: t("common.search"),
20739
+ className: "pl-10 w-full",
20740
+ onKeyDown: (e) => {
20741
+ if (e.key === "Enter") {
20742
+ handleSearchSubmit(e.target.value);
20743
+ }
20744
+ }
20745
+ }
20746
+ )
20747
+ ] }) }),
20748
+ !searchEnabled && /* @__PURE__ */ jsx(Box, { className: "flex-1" }),
20749
+ /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
20750
+ headerActions,
20751
+ showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
20752
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
20753
+ Button,
20754
+ {
20755
+ variant: "ghost",
20756
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
20757
+ onClick: () => handleTopBarActionClick(action.event),
20758
+ "aria-label": action.label ?? action.icon,
20759
+ children: [
20760
+ /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
20761
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
20762
+ Box,
20763
+ {
20764
+ as: "span",
20765
+ className: cn(
20766
+ "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",
20767
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
20768
+ ),
20769
+ children: action.badge
20770
+ }
20771
+ )
20772
+ ]
20773
+ },
20774
+ `${action.event}-${idx}`
20775
+ )),
20776
+ notificationsEnabled && /* @__PURE__ */ jsxs(
20777
+ Button,
20821
20778
  {
20822
- className: "fixed inset-0 z-20",
20823
- onClick: () => setUserMenuOpen(false)
20779
+ variant: "ghost",
20780
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
20781
+ onClick: handleNotificationClick,
20782
+ "aria-label": t("common.notifications"),
20783
+ children: [
20784
+ /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
20785
+ unreadCount > 0 && /* @__PURE__ */ jsx(
20786
+ Box,
20787
+ {
20788
+ as: "span",
20789
+ 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",
20790
+ children: unreadCount > 99 ? "99+" : unreadCount
20791
+ }
20792
+ )
20793
+ ]
20824
20794
  }
20825
20795
  ),
20826
- /* @__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: [
20827
- /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
20828
- /* @__PURE__ */ jsx(
20829
- Typography,
20830
- {
20831
- variant: "small",
20832
- className: "text-sm font-medium text-foreground dark:text-foreground",
20833
- as: "p",
20834
- children: user.name
20835
- }
20836
- ),
20837
- /* @__PURE__ */ jsx(
20838
- Typography,
20839
- {
20840
- variant: "caption",
20841
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
20842
- as: "p",
20843
- children: user.email
20844
- }
20845
- )
20846
- ] }),
20796
+ user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
20847
20797
  /* @__PURE__ */ jsxs(
20848
20798
  Button,
20849
20799
  {
20850
20800
  variant: "ghost",
20851
- onClick: () => {
20852
- setUserMenuOpen(false);
20853
- handleSignOut?.();
20854
- },
20855
- 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",
20801
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
20802
+ onClick: () => setUserMenuOpen(!userMenuOpen),
20856
20803
  children: [
20857
- /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
20858
- t("auth.signOut")
20804
+ /* @__PURE__ */ jsx(
20805
+ Avatar,
20806
+ {
20807
+ src: user.avatar,
20808
+ alt: user.name,
20809
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
20810
+ size: "sm"
20811
+ }
20812
+ ),
20813
+ /* @__PURE__ */ jsx(
20814
+ Typography,
20815
+ {
20816
+ variant: "small",
20817
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
20818
+ as: "span",
20819
+ children: user.name
20820
+ }
20821
+ ),
20822
+ /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
20859
20823
  ]
20860
20824
  }
20861
- )
20825
+ ),
20826
+ userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
20827
+ /* @__PURE__ */ jsx(
20828
+ Box,
20829
+ {
20830
+ className: "fixed inset-0 z-20",
20831
+ onClick: () => setUserMenuOpen(false)
20832
+ }
20833
+ ),
20834
+ /* @__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: [
20835
+ /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
20836
+ /* @__PURE__ */ jsx(
20837
+ Typography,
20838
+ {
20839
+ variant: "small",
20840
+ className: "text-sm font-medium text-foreground dark:text-foreground",
20841
+ as: "p",
20842
+ children: user.name
20843
+ }
20844
+ ),
20845
+ /* @__PURE__ */ jsx(
20846
+ Typography,
20847
+ {
20848
+ variant: "caption",
20849
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
20850
+ as: "p",
20851
+ children: user.email
20852
+ }
20853
+ )
20854
+ ] }),
20855
+ /* @__PURE__ */ jsxs(
20856
+ Button,
20857
+ {
20858
+ variant: "ghost",
20859
+ onClick: () => {
20860
+ setUserMenuOpen(false);
20861
+ handleSignOut?.();
20862
+ },
20863
+ 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",
20864
+ children: [
20865
+ /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
20866
+ t("auth.signOut")
20867
+ ]
20868
+ }
20869
+ )
20870
+ ] })
20871
+ ] })
20862
20872
  ] })
20863
20873
  ] })
20864
- ] })
20865
- ] })
20866
- ]
20874
+ ]
20875
+ }
20876
+ )
20867
20877
  }
20868
- )
20869
- }
20870
- ),
20871
- /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
20872
- ] })
20873
- ] });
20878
+ ),
20879
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
20880
+ ] })
20881
+ ]
20882
+ }
20883
+ );
20874
20884
  };
20875
20885
  DashboardLayout.displayName = "DashboardLayout";
20876
20886
  NavLink = ({