@yomologic/react-ui 0.2.6 → 0.2.7

package/README.md

@@ -60,7 +60,8 @@ function App() {
 
 - **Container** - Responsive page container
 - **SectionLayout** - Layout wrapper for sections
-- **SidebarNav** - Navigation sidebar
+- **Drawer** - Navigation drawer/sidebar
+- **SidebarNav** - (Deprecated, use Drawer instead)
 
 ### Shared Components
 

package/dist/index.d.mts

@@ -186,7 +186,7 @@ interface SectionLayoutProps {
  */
 declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
 
-interface NavItem$1 {
+interface NavItem$2 {
     id: string;
     label?: string;
     type?: "link" | "button" | "dropdown" | "divider" | "custom";
@@ -196,23 +196,45 @@ interface NavItem$1 {
     badge?: string | number;
     disabled?: boolean;
     target?: "_blank" | "_self";
-    children?: NavItem$1[];
+    children?: NavItem$2[];
     render?: () => React.ReactNode;
 }
 interface NavProps extends React.HTMLAttributes<HTMLElement> {
-    items: NavItem$1[];
+    items: NavItem$2[];
     variant?: "primary" | "secondary" | "outline" | "ghost";
     orientation?: "horizontal" | "vertical";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     mobileBreakpoint?: "sm" | "md" | "lg";
+    mobileMenuDirection?: "top" | "left" | "right";
     logo?: React.ReactNode;
     actions?: React.ReactNode;
     sticky?: boolean;
     activeId?: string;
-    onItemClick?: (item: NavItem$1) => void;
+    onItemClick?: (item: NavItem$2) => void;
 }
 declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;
 
+interface NavItem$1 {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface NavSection$1 {
+    title: string;
+    items: NavItem$1[];
+}
+interface DrawerProps {
+    title: string;
+    subtitle?: string;
+    items?: NavItem$1[];
+    sections?: NavSection$1[];
+    activeItem: string;
+    onItemClick: (itemId: string) => void;
+    footer?: React.ReactNode;
+    position?: "left" | "right";
+}
+declare function Drawer({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
 interface NavItem {
     id: string;
     label: string;
@@ -525,6 +547,23 @@ interface NavTheme {
     borderRadius: string;
     gap: string;
 }
+interface ZIndexScale {
+    dropdown: number;
+    popover: number;
+    tooltip: number;
+    overlay: number;
+    nav: number;
+    navMobileOverlay: number;
+    navMobileMenu: number;
+    drawerHeader: number;
+    drawerButton: number;
+    drawerOverlay: number;
+    drawerPanel: number;
+    modalBackdrop: number;
+    modal: number;
+    snackbar: number;
+    toast: number;
+}
 interface ComponentThemes {
     button: ButtonTheme;
     card: CardTheme;
@@ -541,6 +580,7 @@ interface Theme {
     spacing: ThemeSpacing;
     borderRadius: ThemeBorderRadius;
     typography: ThemeTypography;
+    zIndex: ZIndexScale;
     components: ComponentThemes;
 }
 
@@ -557,4 +597,4 @@ declare function useTheme(): ThemeContextType;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, Nav, type NavItem$1 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };
+export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, Dropdown, EmptyState, Input, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };

package/dist/index.d.ts

@@ -186,7 +186,7 @@ interface SectionLayoutProps {
  */
 declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
 
-interface NavItem$1 {
+interface NavItem$2 {
     id: string;
     label?: string;
     type?: "link" | "button" | "dropdown" | "divider" | "custom";
@@ -196,23 +196,45 @@ interface NavItem$1 {
     badge?: string | number;
     disabled?: boolean;
     target?: "_blank" | "_self";
-    children?: NavItem$1[];
+    children?: NavItem$2[];
     render?: () => React.ReactNode;
 }
 interface NavProps extends React.HTMLAttributes<HTMLElement> {
-    items: NavItem$1[];
+    items: NavItem$2[];
     variant?: "primary" | "secondary" | "outline" | "ghost";
     orientation?: "horizontal" | "vertical";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     mobileBreakpoint?: "sm" | "md" | "lg";
+    mobileMenuDirection?: "top" | "left" | "right";
     logo?: React.ReactNode;
     actions?: React.ReactNode;
     sticky?: boolean;
     activeId?: string;
-    onItemClick?: (item: NavItem$1) => void;
+    onItemClick?: (item: NavItem$2) => void;
 }
 declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;
 
+interface NavItem$1 {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface NavSection$1 {
+    title: string;
+    items: NavItem$1[];
+}
+interface DrawerProps {
+    title: string;
+    subtitle?: string;
+    items?: NavItem$1[];
+    sections?: NavSection$1[];
+    activeItem: string;
+    onItemClick: (itemId: string) => void;
+    footer?: React.ReactNode;
+    position?: "left" | "right";
+}
+declare function Drawer({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
 interface NavItem {
     id: string;
     label: string;
@@ -525,6 +547,23 @@ interface NavTheme {
     borderRadius: string;
     gap: string;
 }
+interface ZIndexScale {
+    dropdown: number;
+    popover: number;
+    tooltip: number;
+    overlay: number;
+    nav: number;
+    navMobileOverlay: number;
+    navMobileMenu: number;
+    drawerHeader: number;
+    drawerButton: number;
+    drawerOverlay: number;
+    drawerPanel: number;
+    modalBackdrop: number;
+    modal: number;
+    snackbar: number;
+    toast: number;
+}
 interface ComponentThemes {
     button: ButtonTheme;
     card: CardTheme;
@@ -541,6 +580,7 @@ interface Theme {
     spacing: ThemeSpacing;
     borderRadius: ThemeBorderRadius;
     typography: ThemeTypography;
+    zIndex: ZIndexScale;
     components: ComponentThemes;
 }
 
@@ -557,4 +597,4 @@ declare function useTheme(): ThemeContextType;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, Nav, type NavItem$1 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };
+export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, Dropdown, EmptyState, Input, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };

package/dist/index.js

@@ -44,6 +44,7 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CodeSnippet: () => CodeSnippet,
   Container: () => Container,
+  Drawer: () => Drawer,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
   Input: () => Input,
@@ -1086,6 +1087,7 @@ var Nav = import_react12.default.forwardRef(
     orientation = "horizontal",
     size = "md",
     mobileBreakpoint = "md",
+    mobileMenuDirection = "top",
     logo,
     actions,
     sticky = false,
@@ -1119,9 +1121,12 @@ var Nav = import_react12.default.forwardRef(
         document.removeEventListener("keydown", handleEscape);
       };
     }, []);
+    (0, import_react12.useEffect)(() => {
+      setIsMobileMenuOpen(false);
+    }, [mobileMenuDirection]);
     const baseStyles = cn(
       "bg-[var(--color-background)] border-b border-[var(--color-border)]",
-      sticky && "sticky top-0 z-50"
+      sticky && "sticky top-0 [z-index:var(--z-index-nav)]"
     );
     const containerStyles = cn(
       "[min-height:var(--nav-height)]",
@@ -1311,32 +1316,66 @@ var Nav = import_react12.default.forwardRef(
           children: isMobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Menu, { className: "w-6 h-6" })
         }
       ),
-      isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "div",
-          {
-            className: "fixed inset-0 bg-black/20 z-40",
-            onClick: () => setIsMobileMenuOpen(false)
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed top-[var(--nav-height)] left-0 right-0 bg-[var(--color-background)] border-b border-[var(--color-border)] shadow-lg z-50 max-h-[calc(100vh-var(--nav-height))] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col py-2", children: items.map((item) => renderNavItem(item, true)) }) })
-      ] })
+      isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          className: cn(
+            "fixed inset-0 bg-black/50 [z-index:var(--z-index-nav-mobile-overlay)]",
+            breakpointClasses[mobileBreakpoint]
+          ),
+          onClick: () => setIsMobileMenuOpen(false)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          className: cn(
+            "fixed bg-[var(--color-background)] shadow-lg [z-index:var(--z-index-nav-mobile-menu)] overflow-y-auto transition-transform duration-300 ease-in-out",
+            breakpointClasses[mobileBreakpoint],
+            // Always hide when closed
+            !isMobileMenuOpen && "invisible",
+            // Direction-specific positioning and animation
+            mobileMenuDirection === "top" && [
+              "top-0 left-0 right-0 border-b border-[var(--color-border)] max-h-screen",
+              isMobileMenuOpen ? "translate-y-0" : "-translate-y-full"
+            ],
+            mobileMenuDirection === "left" && [
+              "top-0 left-0 bottom-0 w-64 border-r border-[var(--color-border)]",
+              isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
+            ],
+            mobileMenuDirection === "right" && [
+              "top-0 right-0 bottom-0 w-64 border-l border-[var(--color-border)]",
+              isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
+            ]
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex flex-col",
+                mobileMenuDirection === "top" ? "py-2" : "space-y-1 px-2 pt-2"
+              ),
+              children: items.map((item) => renderNavItem(item, true))
+            }
+          )
+        }
+      )
     ] });
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { ref, className: cn(baseStyles, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: containerStyles, children: [
-      logo && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-shrink-0", children: logo }),
+      logo && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "shrink-0", children: logo }),
       desktopNav,
-      actions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions }),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
       mobileNav
     ] }) });
   }
 );
 Nav.displayName = "Nav";
 
-// src/layout/sidebar-nav.tsx
+// src/layout/drawer.tsx
 var import_react13 = require("react");
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function SidebarNav({
+function Drawer({
   title,
   subtitle,
   items,
@@ -1354,7 +1393,7 @@ function SidebarNav({
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "lg:hidden fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "lg:hidden fixed top-0 left-0 right-0 bg-white border-b border-gray-200 px-4 py-3 [z-index:var(--z-index-drawer-header)]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
@@ -1363,7 +1402,7 @@ function SidebarNav({
             "button",
             {
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors relative [z-index:var(--z-index-drawer-button)]",
               "aria-label": "Toggle menu",
               children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.X, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Menu, { className: "w-6 h-6 text-gray-700" })
             }
@@ -1379,7 +1418,7 @@ function SidebarNav({
       "div",
       {
         className: "fixed inset-0 bg-black/50 lg:hidden",
-        style: { zIndex: 35 },
+        style: { zIndex: 9998 },
         onClick: () => setMobileMenuOpen(false)
       }
     ),
@@ -1387,18 +1426,33 @@ function SidebarNav({
       "aside",
       {
         className: `
-          fixed top-0 h-screen w-64 bg-white z-40
+          fixed top-0 bottom-0 w-64 bg-white
           transition-transform duration-300 ease-in-out overflow-y-auto
           ${isLeft ? "left-0 border-r" : "right-0 border-l"} border-gray-200
-          lg:translate-x-0
-          ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
+          lg:translate-x-0 lg:top-0
+          ${mobileMenuOpen ? "translate-x-0 top-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} top-0`}
         `,
+        style: mobileMenuOpen && typeof window !== "undefined" && window.innerWidth < 1024 ? { zIndex: 9999 } : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: "text-xl font-bold text-gray-900", children: title }),
             subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "lg:hidden p-4 border-b border-gray-200 flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: () => setMobileMenuOpen(false),
+                className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+                "aria-label": "Close menu",
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.X, { className: "w-5 h-5 text-gray-700" })
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: sectionIndex > 0 ? "mt-6" : "", children: [
             section.title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "px-4 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: section.title }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -1423,12 +1477,103 @@ function SidebarNav({
   ] });
 }
 
-// src/shared/empty-state.tsx
-var import_react14 = __toESM(require("react"));
+// src/layout/sidebar-nav.tsx
+var import_react14 = require("react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var EmptyState = import_react14.default.forwardRef(
+function SidebarNav({
+  title,
+  subtitle,
+  items,
+  sections,
+  activeItem,
+  onItemClick,
+  footer,
+  position = "right"
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react14.useState)(false);
+  const isLeft = position === "left";
+  const handleItemClick = (itemId) => {
+    onItemClick(itemId);
+    setMobileMenuOpen(false);
+  };
+  const useSections = sections || (items ? [{ title: "", items }] : []);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "lg:hidden fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+              "aria-label": "Toggle menu",
+              children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.X, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Menu, { className: "w-6 h-6 text-gray-700" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-gray-500", children: subtitle })
+          ] })
+        ]
+      }
+    ) }),
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 lg:hidden",
+        style: { zIndex: 35 },
+        onClick: () => setMobileMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "aside",
+      {
+        className: `
+          fixed top-0 h-screen w-64 bg-white z-40
+          transition-transform duration-300 ease-in-out overflow-y-auto
+          ${isLeft ? "left-0 border-r" : "right-0 border-l"} border-gray-200
+          lg:translate-x-0
+          ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
+        `,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: "text-xl font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: sectionIndex > 0 ? "mt-6" : "", children: [
+            section.title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "px-4 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "button",
+              {
+                onClick: () => handleItemClick(item.id),
+                className: `
+                        w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors
+                        ${activeItem === item.id ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-50"}
+                      `,
+                children: [
+                  item.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: item.label })
+                ]
+              }
+            ) }, item.id)) })
+          ] }, sectionIndex)) }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/shared/empty-state.tsx
+var import_react15 = __toESM(require("react"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var EmptyState = import_react15.default.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         ref,
@@ -1438,10 +1583,10 @@ var EmptyState = import_react14.default.forwardRef(
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mb-4 text-gray-400", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
-          action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: action })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-4 text-gray-400", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: action })
         ]
       }
     );
@@ -1450,7 +1595,7 @@ var EmptyState = import_react14.default.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/shared/contexts/ThemeContext.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/styles/themes/default.json
 var default_default = {
@@ -1555,6 +1700,23 @@ var default_default = {
       bold: "700"
     }
   },
+  zIndex: {
+    dropdown: 1e3,
+    popover: 1100,
+    tooltip: 1500,
+    overlay: 1200,
+    nav: 50,
+    navMobileOverlay: 60,
+    navMobileMenu: 70,
+    drawerHeader: 100,
+    drawerButton: 101,
+    drawerOverlay: 90,
+    drawerPanel: 95,
+    modalBackdrop: 1300,
+    modal: 1400,
+    snackbar: 1600,
+    toast: 1700
+  },
   components: {
     button: {
       padding: {
@@ -1715,10 +1877,10 @@ var default_default = {
 };
 
 // src/shared/contexts/ThemeContext.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react15.createContext)(void 0);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react16.createContext)(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = (0, import_react15.useState)(default_default);
+  const [theme, setThemeState] = (0, import_react16.useState)(default_default);
   const applyTheme = (newTheme) => {
     const root = document.documentElement;
     const colors = newTheme.colors;
@@ -1845,6 +2007,9 @@ function ThemeProvider({ children }) {
     });
     root.style.setProperty("--nav-border-radius", nav.borderRadius);
     root.style.setProperty("--nav-gap", nav.gap);
+    Object.entries(newTheme.zIndex).forEach(([key, value]) => {
+      root.style.setProperty(`--z-index-${key}`, value.toString());
+    });
     setThemeState(newTheme);
   };
   const setTheme = (newTheme) => {
@@ -1859,7 +2024,7 @@ function ThemeProvider({ children }) {
       localStorage.removeItem("theme");
     }
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (typeof window !== "undefined") {
       const savedTheme = localStorage.getItem("theme");
       if (savedTheme) {
@@ -1875,10 +2040,10 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ThemeContext.Provider, { value: { theme, setTheme, applyTheme, resetTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeContext.Provider, { value: { theme, setTheme, applyTheme, resetTheme }, children });
 }
 function useTheme() {
-  const context = (0, import_react15.useContext)(ThemeContext);
+  const context = (0, import_react16.useContext)(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -1899,6 +2064,7 @@ function useTheme() {
   CheckboxGroup,
   CodeSnippet,
   Container,
+  Drawer,
   Dropdown,
   EmptyState,
   Input,