@fayz-ai/ui 0.5.0 → 0.6.6

package/dist/{chunk-CZ6X6PZT.js → chunk-LO5QZO7F.js}

@@ -1,7 +1,7 @@
 import { useCrossModuleBack, useBackHandler, SaveBarProvider, SaveBar } from './chunk-E526FHZ4.js';
 import { cn } from './chunk-DNYVEOAX.js';
 import * as React3 from 'react';
-import { Workflow, Star, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, Banknote, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, Heart, PawPrint, Cat, Dog, Search, List, Plus, Filter, Building2, Contact, Handshake, MapPin, UtensilsCrossed, Camera, Tag, Percent, Globe, MessageCircle, BookOpen, UserCog, Briefcase, ClipboardList, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Package, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, ChevronRight, ChevronLeft, TreePalm, UserPlus, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, Clock, CircleDollarSign, TrendingUp, Receipt, Landmark, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown } from 'lucide-react';
+import { FileCheck2, Clock3, Boxes, Workflow, UserX, UserPlus, UserCheck, TrendingUp, Star, Inbox, MessageSquare, LayoutDashboard, Award, Zap, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, CircleDollarSign, Landmark, Banknote, BadgeDollarSign, CalendarX, CalendarCheck2, CalendarDays, Radio, PartyPopper, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, FolderOpen, Heart, PawPrint, Cat, Dog, Clock, Ban, Shield, Search, ListPlus, List, Plus, Filter, Building2, Contact, Handshake, Map, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, Globe, MessageCircle, BookOpenCheck, BookOpen, UserCog, Briefcase, ListChecks, ClipboardList, ShoppingBag, Receipt, Wrench, Target, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, Bell, CreditCard, Settings, Users, Home, PanelLeftClose, PanelLeft, Menu, ChevronRight, ChevronLeft, Box, TreePalm, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, ChevronDown, ClipboardCheck, PiggyBank } from 'lucide-react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { create } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -26,7 +26,9 @@ var ICON_MAP = {
   CreditCard,
   Bell,
   Calendar,
+  CalendarClock,
   Package,
+  Activity,
   BarChart3,
   FileText,
   Mail,
@@ -35,28 +37,39 @@ var ICON_MAP = {
   ShoppingCart,
   Target,
   Wrench,
+  Receipt,
+  ShoppingBag,
   ClipboardList,
+  ListChecks,
   Briefcase,
   UserCog,
   BookOpen,
+  BookOpenCheck,
   MessageCircle,
   Globe,
   Percent,
   Tag,
+  Tags,
   Camera,
   UtensilsCrossed,
   MapPin,
+  Map,
   Handshake,
   Contact,
   Building2,
   Filter,
   Plus,
   List,
+  ListPlus,
   Search,
+  Shield,
+  Ban,
+  Clock,
   Dog,
   Cat,
   PawPrint,
   Heart,
+  FolderOpen,
   LayoutTemplate,
   LeafyGreen,
   Apple,
@@ -65,7 +78,12 @@ var ICON_MAP = {
   PartyPopper,
   Radio,
   CalendarDays,
+  CalendarCheck2,
+  CalendarX,
+  BadgeDollarSign,
   Banknote,
+  Landmark,
+  CircleDollarSign,
   Layers,
   Music,
   Eye,
@@ -77,8 +95,16 @@ var ICON_MAP = {
   Award,
   LayoutDashboard,
   MessageSquare,
+  Inbox,
   Star,
-  Workflow
+  TrendingUp,
+  UserCheck,
+  UserPlus,
+  UserX,
+  Workflow,
+  Boxes,
+  Clock3,
+  FileCheck2
 };
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
@@ -408,23 +434,29 @@ var ICON_MAP2 = {
   CreditCard: CreditCard,
   Bell: Bell,
   Calendar: Calendar,
+  CalendarClock: CalendarClock,
   Package: Package,
+  Activity: Activity,
   BarChart3: BarChart3,
   FileText: FileText,
   Mail: Mail,
   DollarSign: DollarSign,
   Megaphone: Megaphone,
   ShoppingCart: ShoppingCart,
+  ShoppingBag: ShoppingBag,
   Target: Target,
   Wrench: Wrench,
   ClipboardList: ClipboardList,
+  ClipboardCheck,
   Briefcase: Briefcase,
   UserCog: UserCog,
   BookOpen: BookOpen,
   MessageCircle: MessageCircle,
   Globe: Globe,
+  BookOpenCheck: BookOpenCheck,
   Percent: Percent,
   Tag: Tag,
+  Tags: Tags,
   Camera: Camera,
   UtensilsCrossed: UtensilsCrossed,
   Search: Search,
@@ -435,7 +467,10 @@ var ICON_MAP2 = {
   ChevronDown: ChevronDown,
   Filter: Filter,
   Plus: Plus,
+  Shield: Shield,
   List: List,
+  ListChecks: ListChecks,
+  FolderOpen: FolderOpen,
   Dog: Dog,
   Cat: Cat,
   PawPrint: PawPrint,
@@ -451,11 +486,11 @@ var ICON_MAP2 = {
   Plug,
   SlidersHorizontal,
   TableProperties,
-  Landmark,
-  Receipt,
-  TrendingUp,
-  CircleDollarSign,
-  Clock,
+  Landmark: Landmark,
+  Receipt: Receipt,
+  TrendingUp: TrendingUp,
+  CircleDollarSign: CircleDollarSign,
+  Clock: Clock,
   AlertTriangle,
   Sparkles,
   Wallet,
@@ -463,11 +498,16 @@ var ICON_MAP2 = {
   Ruler,
   ArrowUpRight,
   ArrowDownRight,
-  UserPlus,
+  UserPlus: UserPlus,
+  UserX: UserX,
   TreePalm,
+  Boxes: Boxes,
+  Box,
+  FileCheck2: FileCheck2,
   PartyPopper: PartyPopper,
   Radio: Radio,
   CalendarDays: CalendarDays,
+  BadgeDollarSign: BadgeDollarSign,
   Banknote: Banknote,
   Layers: Layers,
   Music: Music,
@@ -475,7 +515,17 @@ var ICON_MAP2 = {
   ListMusic: ListMusic,
   Disc3: Disc3,
   UsersRound: UsersRound,
-  Mic: Mic
+  Mic: Mic,
+  CalendarCheck2: CalendarCheck2,
+  CalendarX: CalendarX,
+  ListPlus: ListPlus,
+  Map: Map,
+  Ban: Ban,
+  Clock3: Clock3,
+  Inbox: Inbox,
+  UserCheck: UserCheck,
+  Star: Star,
+  Zap: Zap
 };
 function getIcon2(name) {
   return ICON_MAP2[name] ?? Home;
@@ -560,7 +610,7 @@ function Topbar({
   return /* @__PURE__ */ jsxs("header", { "data-print": "hide", className: "sticky top-0 z-50 w-full shrink-0", children: [
     /* @__PURE__ */ jsx("div", { className: "border-b border-sidebar-border bg-sidebar text-sidebar-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex h-14 w-full items-center justify-between px-4 md:px-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(
+        onMenuClick && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: onMenuClick,
@@ -575,7 +625,7 @@ function Topbar({
         "button",
         {
           onClick: () => setCommandPaletteOpen(true),
-          className: "relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:bg-card",
+          className: "relative flex h-8 w-full items-center rounded-md border border-sidebar-border bg-sidebar-accent px-3 pl-8 text-sm text-sidebar-muted shadow-sm transition-colors hover:border-sidebar-foreground/25 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground",
           children: [
             /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-sidebar-muted" }),
             /* @__PURE__ */ jsx("span", { className: "text-xs", children: searchPlaceholder }),
@@ -606,7 +656,7 @@ function Topbar({
         const left = active.offsetLeft - el.offsetWidth / 2 + active.offsetWidth / 2;
         el.scrollTo({ left: Math.max(0, left), behavior: "smooth" });
       }
-    }, className: "flex items-center gap-0.5 overflow-x-auto scrollbar-hide", children: allNav.map((item) => {
+    }, className: "flex items-center gap-0.5 overflow-x-auto scrollbar-none", children: allNav.map((item) => {
       if (item.children && item.children.length > 0) {
         return /* @__PURE__ */ jsx(
           NavDropdown,
@@ -669,14 +719,22 @@ function SidebarLayout({
   topbarEnd,
   userMenuSlot,
   notificationSlot,
-  unreadCount = 0
+  unreadCount = 0,
+  hasBottomNav = false,
+  mobileHeader = "minimal"
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
   const [headerSlot, setHeaderSlot] = React3.useState(null);
   const [actionsSlot, setActionsSlot] = React3.useState(null);
-  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen overflow-hidden bg-background", children: [
+  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex h-screen overflow-hidden bg-background",
+    // Frame mode: the inset gap around the framed card takes the sidebar (menu)
+    // color, so the white card reads as a panel floating on the same tone as the
+    // left menu. The card's own md:m-2 margin reveals this behind it.
+    frame && "md:bg-sidebar"
+  ), children: [
     /* @__PURE__ */ jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx(
       Sidebar,
       {
@@ -704,9 +762,12 @@ function SidebarLayout({
       "relative flex flex-1 flex-col overflow-hidden",
       frame && "md:m-2 md:rounded-xl md:border md:border-border md:bg-card"
     ), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-2",
+        mobileHeader !== "minimal" && "hidden md:flex"
+      ), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx(
+          !hasBottomNav && /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setMobileMenuOpen(true),
@@ -724,7 +785,7 @@ function SidebarLayout({
           topbarEnd
         ] })
       ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children }),
       /* @__PURE__ */ jsx(SaveBar, {})
     ] }),
     mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -764,7 +825,8 @@ function TopbarLayout({
   frame,
   currentPath,
   topbarStart,
-  topbarEnd
+  topbarEnd,
+  hasBottomNav = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
   return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background", children: [
@@ -783,10 +845,10 @@ function TopbarLayout({
         userMenuExtras,
         leftContent: topbarStart,
         rightContent: topbarEnd,
-        onMenuClick: () => setMobileMenuOpen(true)
+        onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto", frame && "md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
+    /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-y-auto pb-16 md:pb-0", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("min-h-full", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsx(
       MobileOverlay,
@@ -824,7 +886,7 @@ function MinimalLayout({
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerEnd })
     ] }),
-    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children })
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
@@ -886,6 +948,82 @@ function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
     )
   ] });
 }
+var BOTTOM_NAV_ICONS = {
+  Home: Home,
+  Receipt: Receipt,
+  ArrowLeftRight: ArrowLeftRight,
+  Calendar: Calendar,
+  CreditCard: CreditCard,
+  Settings: Settings,
+  Menu: Menu,
+  MessageCircle: MessageCircle,
+  Wallet: Wallet,
+  PiggyBank,
+  Plus: Plus
+};
+function FloatingProfileAvatar({ user, onClick }) {
+  if (!user) return null;
+  const label = user.fullName || user.email;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Profile",
+      className: "fixed right-3 top-3 z-40 md:hidden",
+      children: user.avatarUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: user.avatarUrl,
+          alt: "",
+          className: "h-9 w-9 rounded-full object-cover shadow-md ring-2 ring-background"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-md ring-2 ring-background", children: (label || "?").charAt(0).toUpperCase() })
+    }
+  );
+}
+function MobileBottomNav({
+  items,
+  currentPath,
+  onNavigate,
+  onAction
+}) {
+  const path = currentPath ?? "";
+  return /* @__PURE__ */ jsx("nav", { className: "fixed inset-x-0 bottom-0 z-50 flex h-16 items-center justify-around border-t border-border bg-background md:hidden", children: items.map((item) => {
+    if (item.kind === "action") {
+      const ActionIcon = BOTTOM_NAV_ICONS[item.icon] ?? Plus;
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-start justify-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onAction?.(item.id),
+          "aria-label": item.label ?? "Add",
+          className: "-mt-6 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-4 ring-background transition-transform active:scale-95",
+          children: /* @__PURE__ */ jsx(ActionIcon, { className: "h-6 w-6" })
+        }
+      ) }, item.id);
+    }
+    const isActive = item.route === "/" ? path === "/" || path === "" : path === item.route || path.startsWith(item.route + "/");
+    const Icon = BOTTOM_NAV_ICONS[item.icon] ?? Home;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onNavigate?.(item.route),
+        className: cn(
+          "flex flex-1 flex-col items-center justify-center gap-0.5 px-1 py-1 transition-colors",
+          isActive ? "text-primary" : "text-muted-foreground"
+        ),
+        "aria-current": isActive ? "page" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: item.label })
+        ]
+      },
+      item.route
+    );
+  }) });
+}
 function AppShell({
   variant,
   contentFrame,
@@ -906,13 +1044,28 @@ function AppShell({
   topbarEnd,
   sidebarTopContent,
   sidebarFooterContent,
+  bottomNav,
+  onBottomNavAction,
+  mobileHeader = "minimal",
   userMenuSlot,
   notificationSlot,
   unreadCount = 0
 }) {
+  const hasBottomNav = !!bottomNav?.length;
+  const bottomBar = hasBottomNav ? /* @__PURE__ */ jsx(
+    MobileBottomNav,
+    {
+      items: bottomNav,
+      currentPath,
+      onNavigate,
+      onAction: onBottomNavAction
+    }
+  ) : null;
+  const floatingAvatar = mobileHeader === "transparent" && user ? /* @__PURE__ */ jsx(FloatingProfileAvatar, { user, onClick: onProfile }) : null;
+  let layoutElement;
   switch (variant) {
     case "sidebar":
-      return /* @__PURE__ */ jsx(
+      layoutElement = /* @__PURE__ */ jsx(
         SidebarLayout,
         {
           navigation,
@@ -935,11 +1088,14 @@ function AppShell({
           userMenuSlot,
           notificationSlot,
           unreadCount,
+          hasBottomNav,
+          mobileHeader,
           children
         }
       );
+      break;
     case "topbar":
-      return /* @__PURE__ */ jsx(
+      layoutElement = /* @__PURE__ */ jsx(
         TopbarLayout,
         {
           navigation,
@@ -955,15 +1111,23 @@ function AppShell({
           currentPath,
           topbarStart,
           topbarEnd,
+          hasBottomNav,
           children
         }
       );
+      break;
     case "minimal":
-      return /* @__PURE__ */ jsx(MinimalLayout, { logo, user, headerEnd: topbarEnd, children });
+      layoutElement = /* @__PURE__ */ jsx(MinimalLayout, { logo, user, headerEnd: topbarEnd, children });
+      break;
     default: {
       return null;
     }
   }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    layoutElement,
+    floatingAvatar,
+    bottomBar
+  ] });
 }
 var NavTransitionContext = React3.createContext("slide");
 function NavTransitionProvider({ value, children }) {
@@ -1052,7 +1216,7 @@ function MobileTabs({ nav }) {
     }
   }, [nav]);
   return /* @__PURE__ */ jsxs("div", { className: "md:hidden -mx-1 mb-4 no-print", children: [
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-hide", children: nav.map((item) => {
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none", children: nav.map((item) => {
       const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
       const hasChildren = item.children && item.children.length > 0;
       const isActive = item.active || item.children?.some((c) => c.active);
@@ -1175,7 +1339,7 @@ function ModuleHeader({ nav }) {
     const kids = item.children ?? [];
     return kids.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids[kids.length - 1];
   }
-  const content = /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-hide", children: nav.map((item) => {
+  const content = /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none", children: nav.map((item) => {
     const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
     const hasChildren = item.children && item.children.length > 0;
     const isActive = item.active || item.children?.some((c) => c.active);
@@ -1233,5 +1397,5 @@ function ModulePage({ title, subtitle, nav, children, className, headerAction, s
 }
 
 export { AppShell, BackStyleProvider, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition };
-//# sourceMappingURL=chunk-CZ6X6PZT.js.map
-//# sourceMappingURL=chunk-CZ6X6PZT.js.map
+//# sourceMappingURL=chunk-LO5QZO7F.js.map
+//# sourceMappingURL=chunk-LO5QZO7F.js.map