@yomologic/react-ui 0.2.6 → 0.2.7

package/dist/index.mjs

@@ -1028,6 +1028,7 @@ var Nav = React9.forwardRef(
     orientation = "horizontal",
     size = "md",
     mobileBreakpoint = "md",
+    mobileMenuDirection = "top",
     logo,
     actions,
     sticky = false,
@@ -1061,9 +1062,12 @@ var Nav = React9.forwardRef(
         document.removeEventListener("keydown", handleEscape);
       };
     }, []);
+    useEffect2(() => {
+      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)]",
@@ -1253,32 +1257,66 @@ var Nav = React9.forwardRef(
           children: isMobileMenuOpen ? /* @__PURE__ */ jsx13(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx13(Menu, { className: "w-6 h-6" })
         }
       ),
-      isMobileMenuOpen && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-        /* @__PURE__ */ jsx13(
-          "div",
-          {
-            className: "fixed inset-0 bg-black/20 z-40",
-            onClick: () => setIsMobileMenuOpen(false)
-          }
-        ),
-        /* @__PURE__ */ jsx13("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__ */ jsx13("div", { className: "flex flex-col py-2", children: items.map((item) => renderNavItem(item, true)) }) })
-      ] })
+      isMobileMenuOpen && /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: cn(
+            "fixed inset-0 bg-black/50 [z-index:var(--z-index-nav-mobile-overlay)]",
+            breakpointClasses[mobileBreakpoint]
+          ),
+          onClick: () => setIsMobileMenuOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(
+            "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__ */ jsx13("nav", { ref, className: cn(baseStyles, className), ...props, children: /* @__PURE__ */ jsxs11("div", { className: containerStyles, children: [
-      logo && /* @__PURE__ */ jsx13("div", { className: "flex-shrink-0", children: logo }),
+      logo && /* @__PURE__ */ jsx13("div", { className: "shrink-0", children: logo }),
       desktopNav,
-      actions && /* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions }),
+      actions && /* @__PURE__ */ jsx13("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
       mobileNav
     ] }) });
   }
 );
 Nav.displayName = "Nav";
 
-// src/layout/sidebar-nav.tsx
+// src/layout/drawer.tsx
 import { useState as useState4 } from "react";
 import { Menu as Menu2, X as X2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function SidebarNav({
+function Drawer({
   title,
   subtitle,
   items,
@@ -1296,7 +1334,7 @@ function SidebarNav({
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
   return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx14("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__ */ jsxs12(
+    /* @__PURE__ */ jsx14("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__ */ jsxs12(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
@@ -1305,7 +1343,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__ */ jsx14(X2, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ jsx14(Menu2, { className: "w-6 h-6 text-gray-700" })
             }
@@ -1321,7 +1359,7 @@ function SidebarNav({
       "div",
       {
         className: "fixed inset-0 bg-black/50 lg:hidden",
-        style: { zIndex: 35 },
+        style: { zIndex: 9998 },
         onClick: () => setMobileMenuOpen(false)
       }
     ),
@@ -1329,18 +1367,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__ */ jsxs12("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
             /* @__PURE__ */ jsx14("h1", { className: "text-xl font-bold text-gray-900", children: title }),
             subtitle && /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx14("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs12("div", { className: "lg:hidden p-4 border-b border-gray-200 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs12("div", { children: [
+              /* @__PURE__ */ jsx14("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+              subtitle && /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                onClick: () => setMobileMenuOpen(false),
+                className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+                "aria-label": "Close menu",
+                children: /* @__PURE__ */ jsx14(X2, { className: "w-5 h-5 text-gray-700" })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx14("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs12("div", { className: sectionIndex > 0 ? "mt-6" : "", children: [
             section.title && /* @__PURE__ */ jsx14("h3", { className: "px-4 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: section.title }),
             /* @__PURE__ */ jsx14("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsxs12(
@@ -1365,12 +1418,103 @@ function SidebarNav({
   ] });
 }
 
+// src/layout/sidebar-nav.tsx
+import { useState as useState5 } from "react";
+import { Menu as Menu3, X as X3 } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function SidebarNav({
+  title,
+  subtitle,
+  items,
+  sections,
+  activeItem,
+  onItemClick,
+  footer,
+  position = "right"
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState5(false);
+  const isLeft = position === "left";
+  const handleItemClick = (itemId) => {
+    onItemClick(itemId);
+    setMobileMenuOpen(false);
+  };
+  const useSections = sections || (items ? [{ title: "", items }] : []);
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx15("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__ */ jsxs13(
+      "div",
+      {
+        className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
+        children: [
+          /* @__PURE__ */ jsx15(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+              "aria-label": "Toggle menu",
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx15(X3, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ jsx15(Menu3, { className: "w-6 h-6 text-gray-700" })
+            }
+          ),
+          /* @__PURE__ */ jsxs13("div", { children: [
+            /* @__PURE__ */ jsx15("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-500", children: subtitle })
+          ] })
+        ]
+      }
+    ) }),
+    mobileMenuOpen && /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 lg:hidden",
+        style: { zIndex: 35 },
+        onClick: () => setMobileMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs13(
+      "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__ */ jsxs13("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
+            /* @__PURE__ */ jsx15("h1", { className: "text-xl font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx15("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx15("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs13("div", { className: sectionIndex > 0 ? "mt-6" : "", children: [
+            section.title && /* @__PURE__ */ jsx15("h3", { className: "px-4 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: section.title }),
+            /* @__PURE__ */ jsx15("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs13(
+              "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__ */ jsx15("span", { className: "shrink-0", children: item.icon }),
+                  /* @__PURE__ */ jsx15("span", { children: item.label })
+                ]
+              }
+            ) }, item.id)) })
+          ] }, sectionIndex)) }),
+          footer && /* @__PURE__ */ jsx15("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
 // src/shared/empty-state.tsx
-import React11 from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var EmptyState = React11.forwardRef(
+import React12 from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var EmptyState = React12.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       "div",
       {
         ref,
@@ -1380,10 +1524,10 @@ var EmptyState = React11.forwardRef(
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx15("div", { className: "mb-4 text-gray-400", children: icon }),
-          /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
-          description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
-          action && /* @__PURE__ */ jsx15("div", { children: action })
+          icon && /* @__PURE__ */ jsx16("div", { className: "mb-4 text-gray-400", children: icon }),
+          /* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
+          description && /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ jsx16("div", { children: action })
         ]
       }
     );
@@ -1395,7 +1539,7 @@ EmptyState.displayName = "EmptyState";
 import {
   createContext,
   useContext,
-  useState as useState5,
+  useState as useState6,
   useEffect as useEffect3
 } from "react";
 
@@ -1502,6 +1646,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: {
@@ -1662,10 +1823,10 @@ var default_default = {
 };
 
 // src/shared/contexts/ThemeContext.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ThemeContext = createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = useState5(default_default);
+  const [theme, setThemeState] = useState6(default_default);
   const applyTheme = (newTheme) => {
     const root = document.documentElement;
     const colors = newTheme.colors;
@@ -1792,6 +1953,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) => {
@@ -1822,7 +1986,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx16(ThemeContext.Provider, { value: { theme, setTheme, applyTheme, resetTheme }, children });
+  return /* @__PURE__ */ jsx17(ThemeContext.Provider, { value: { theme, setTheme, applyTheme, resetTheme }, children });
 }
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -1845,6 +2009,7 @@ export {
   CheckboxGroup,
   CodeSnippet,
   Container,
+  Drawer,
   Dropdown,
   EmptyState,
   Input,