@yomologic/react-ui 0.2.5 → 0.2.7

package/dist/index.js

@@ -44,14 +44,18 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CodeSnippet: () => CodeSnippet,
   Container: () => Container,
+  Drawer: () => Drawer,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
   Input: () => Input,
+  Nav: () => Nav,
   RadioGroup: () => RadioGroup,
   SectionLayout: () => SectionLayout,
   SidebarNav: () => SidebarNav,
   Spinner: () => Spinner,
-  cn: () => cn
+  ThemeProvider: () => ThemeProvider,
+  cn: () => cn,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -87,9 +91,11 @@ var Button = import_react.default.forwardRef(
       danger: "[background-color:var(--color-error)] text-white hover:bg-red-700 focus:[--tw-ring-color:var(--color-error)]"
     };
     const sizes = {
-      sm: "[font-size:var(--button-text-sm)] [padding-left:var(--button-padding-sm-x)] [padding-right:var(--button-padding-sm-x)] [padding-top:var(--button-padding-sm-y)] [padding-bottom:var(--button-padding-sm-y)] gap-1.5",
-      md: "[font-size:var(--button-text-md)] [padding-left:var(--button-padding-md-x)] [padding-right:var(--button-padding-md-x)] [padding-top:var(--button-padding-md-y)] [padding-bottom:var(--button-padding-md-y)] gap-2",
-      lg: "[font-size:var(--button-text-lg)] [padding-left:var(--button-padding-lg-x)] [padding-right:var(--button-padding-lg-x)] [padding-top:var(--button-padding-lg-y)] [padding-bottom:var(--button-padding-lg-y)] gap-2.5"
+      xs: "[font-size:var(--button-font-size-xs)] [padding-left:var(--button-padding-xs-x)] [padding-right:var(--button-padding-xs-x)] [padding-top:var(--button-padding-xs-y)] [padding-bottom:var(--button-padding-xs-y)] gap-1",
+      sm: "[font-size:var(--button-font-size-sm)] [padding-left:var(--button-padding-sm-x)] [padding-right:var(--button-padding-sm-x)] [padding-top:var(--button-padding-sm-y)] [padding-bottom:var(--button-padding-sm-y)] gap-1.5",
+      md: "[font-size:var(--button-font-size-md)] [padding-left:var(--button-padding-md-x)] [padding-right:var(--button-padding-md-x)] [padding-top:var(--button-padding-md-y)] [padding-bottom:var(--button-padding-md-y)] gap-2",
+      lg: "[font-size:var(--button-font-size-lg)] [padding-left:var(--button-padding-lg-x)] [padding-right:var(--button-padding-lg-x)] [padding-top:var(--button-padding-lg-y)] [padding-bottom:var(--button-padding-lg-y)] gap-2.5",
+      xl: "[font-size:var(--button-font-size-xl)] [padding-left:var(--button-padding-xl-x)] [padding-right:var(--button-padding-xl-x)] [padding-top:var(--button-padding-xl-y)] [padding-bottom:var(--button-padding-xl-y)] gap-3"
     };
     const radiusStyle = "[border-radius:var(--button-radius)]";
     const fontWeightStyle = "[font-weight:var(--button-font-weight)]";
@@ -164,7 +170,8 @@ var Input = import_react2.default.forwardRef(
     id,
     ...props
   }, ref) => {
-    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const autoId = (0, import_react2.useId)();
+    const inputId = id || `input-${autoId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "label",
@@ -304,9 +311,11 @@ var Badge = import_react4.default.forwardRef(
       info: "bg-cyan-100 text-cyan-800"
     };
     const sizes = {
+      xs: "text-[0.625rem] px-1.5 py-0.5",
       sm: "text-xs px-2 py-0.5",
       md: "text-sm px-2.5 py-1",
-      lg: "text-base px-3 py-1.5"
+      lg: "text-base px-3 py-1.5",
+      xl: "text-lg px-3.5 py-2"
     };
     const dotVariants = {
       default: "bg-gray-600",
@@ -338,6 +347,7 @@ var Badge = import_react4.default.forwardRef(
 Badge.displayName = "Badge";
 
 // src/ui/checkbox.tsx
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Checkbox({
   label,
@@ -345,14 +355,37 @@ function Checkbox({
   onChange,
   disabled = false,
   className,
-  id
+  id,
+  size = "md"
 }) {
-  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const autoId = (0, import_react5.useId)();
+  const checkboxId = id || `checkbox-${autoId}`;
   const handleChange = (e) => {
     if (onChange) {
       onChange(e.target.checked);
     }
   };
+  const sizeStyles = {
+    xs: `[width:var(--checkbox-size-xs)] [height:var(--checkbox-size-xs)]`,
+    sm: `[width:var(--checkbox-size-sm)] [height:var(--checkbox-size-sm)]`,
+    md: `[width:var(--checkbox-size-md)] [height:var(--checkbox-size-md)]`,
+    lg: `[width:var(--checkbox-size-lg)] [height:var(--checkbox-size-lg)]`,
+    xl: `[width:var(--checkbox-size-xl)] [height:var(--checkbox-size-xl)]`
+  };
+  const labelSizeStyles = {
+    xs: `[font-size:var(--checkbox-label-font-size-xs)]`,
+    sm: `[font-size:var(--checkbox-label-font-size-sm)]`,
+    md: `[font-size:var(--checkbox-label-font-size-md)]`,
+    lg: `[font-size:var(--checkbox-label-font-size-lg)]`,
+    xl: `[font-size:var(--checkbox-label-font-size-xl)]`
+  };
+  const labelSpacingStyles = {
+    xs: `[margin-left:var(--checkbox-label-spacing-xs)]`,
+    sm: `[margin-left:var(--checkbox-label-spacing-sm)]`,
+    md: `[margin-left:var(--checkbox-label-spacing-md)]`,
+    lg: `[margin-left:var(--checkbox-label-spacing-lg)]`,
+    xl: `[margin-left:var(--checkbox-label-spacing-xl)]`
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
@@ -363,7 +396,8 @@ function Checkbox({
         onChange: handleChange,
         disabled,
         className: cn(
-          "h-4 w-4 rounded border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+          sizeStyles[size],
+          "rounded-(--checkbox-radius) border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
           disabled && "cursor-not-allowed opacity-50"
         )
       }
@@ -373,7 +407,9 @@ function Checkbox({
       {
         htmlFor: checkboxId,
         className: cn(
-          "ml-2 text-sm font-medium text-gray-600",
+          labelSpacingStyles[size],
+          labelSizeStyles[size],
+          "font-medium text-gray-600",
           disabled && "cursor-not-allowed opacity-50",
           !disabled && "cursor-pointer"
         ),
@@ -391,7 +427,8 @@ function CheckboxGroup({
   className,
   orientation = "vertical",
   required = false,
-  disabled = false
+  disabled = false,
+  size = "md"
 }) {
   const handleChange = (optionValue, checked) => {
     if (onChange) {
@@ -402,6 +439,27 @@ function CheckboxGroup({
       }
     }
   };
+  const sizeStyles = {
+    xs: `[width:var(--checkbox-size-xs)] [height:var(--checkbox-size-xs)]`,
+    sm: `[width:var(--checkbox-size-sm)] [height:var(--checkbox-size-sm)]`,
+    md: `[width:var(--checkbox-size-md)] [height:var(--checkbox-size-md)]`,
+    lg: `[width:var(--checkbox-size-lg)] [height:var(--checkbox-size-lg)]`,
+    xl: `[width:var(--checkbox-size-xl)] [height:var(--checkbox-size-xl)]`
+  };
+  const labelSizeStyles = {
+    xs: `[font-size:var(--checkbox-label-font-size-xs)]`,
+    sm: `[font-size:var(--checkbox-label-font-size-sm)]`,
+    md: `[font-size:var(--checkbox-label-font-size-md)]`,
+    lg: `[font-size:var(--checkbox-label-font-size-lg)]`,
+    xl: `[font-size:var(--checkbox-label-font-size-xl)]`
+  };
+  const labelSpacingStyles = {
+    xs: `[margin-left:var(--checkbox-label-spacing-xs)]`,
+    sm: `[margin-left:var(--checkbox-label-spacing-sm)]`,
+    md: `[margin-left:var(--checkbox-label-spacing-md)]`,
+    lg: `[margin-left:var(--checkbox-label-spacing-lg)]`,
+    xl: `[margin-left:var(--checkbox-label-spacing-xl)]`
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
       label,
@@ -428,7 +486,8 @@ function CheckboxGroup({
                 onChange: (e) => handleChange(option.value, e.target.checked),
                 disabled: isDisabled,
                 className: cn(
-                  "h-4 w-4 rounded border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                  sizeStyles[size],
+                  "rounded-(--checkbox-radius) border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
                   isDisabled && "cursor-not-allowed opacity-50"
                 )
               }
@@ -438,7 +497,9 @@ function CheckboxGroup({
               {
                 htmlFor: `${name}-${option.value}`,
                 className: cn(
-                  "ml-2 text-sm font-medium text-gray-600",
+                  labelSpacingStyles[size],
+                  labelSizeStyles[size],
+                  "font-medium text-gray-600",
                   isDisabled && "cursor-not-allowed opacity-50",
                   !isDisabled && "cursor-pointer"
                 ),
@@ -463,13 +524,35 @@ function RadioGroup({
   className,
   orientation = "vertical",
   required = false,
-  disabled = false
+  disabled = false,
+  size = "md"
 }) {
   const handleChange = (e) => {
     if (onChange) {
       onChange(e.target.value);
     }
   };
+  const sizeStyles = {
+    xs: `[width:var(--radio-size-xs)] [height:var(--radio-size-xs)]`,
+    sm: `[width:var(--radio-size-sm)] [height:var(--radio-size-sm)]`,
+    md: `[width:var(--radio-size-md)] [height:var(--radio-size-md)]`,
+    lg: `[width:var(--radio-size-lg)] [height:var(--radio-size-lg)]`,
+    xl: `[width:var(--radio-size-xl)] [height:var(--radio-size-xl)]`
+  };
+  const labelSizeStyles = {
+    xs: `[font-size:var(--radio-label-font-size-xs)]`,
+    sm: `[font-size:var(--radio-label-font-size-sm)]`,
+    md: `[font-size:var(--radio-label-font-size-md)]`,
+    lg: `[font-size:var(--radio-label-font-size-lg)]`,
+    xl: `[font-size:var(--radio-label-font-size-xl)]`
+  };
+  const labelSpacingStyles = {
+    xs: `[margin-left:var(--radio-label-spacing-xs)]`,
+    sm: `[margin-left:var(--radio-label-spacing-sm)]`,
+    md: `[margin-left:var(--radio-label-spacing-md)]`,
+    lg: `[margin-left:var(--radio-label-spacing-lg)]`,
+    xl: `[margin-left:var(--radio-label-spacing-xl)]`
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
       label,
@@ -496,7 +579,8 @@ function RadioGroup({
                 onChange: handleChange,
                 disabled: isDisabled,
                 className: cn(
-                  "h-4 w-4 border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                  sizeStyles[size],
+                  "border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
                   isDisabled && "cursor-not-allowed opacity-50"
                 )
               }
@@ -506,7 +590,9 @@ function RadioGroup({
               {
                 htmlFor: `${name}-${option.value}`,
                 className: cn(
-                  "ml-2 text-sm font-medium text-gray-600",
+                  labelSpacingStyles[size],
+                  labelSizeStyles[size],
+                  "font-medium text-gray-600",
                   isDisabled && "cursor-not-allowed opacity-50",
                   !isDisabled && "cursor-pointer"
                 ),
@@ -521,7 +607,7 @@ function RadioGroup({
 }
 
 // src/ui/dropdown.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Dropdown({
@@ -535,16 +621,38 @@ function Dropdown({
   error,
   helperText,
   required = false,
+  size = "md",
   className = ""
 }) {
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const dropdownRef = (0, import_react5.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const dropdownRef = (0, import_react6.useRef)(null);
   const getSelectedLabel = () => {
     if (!value) return placeholder;
     const selected = options.find((opt) => opt.value === value);
     return selected ? selected.label : placeholder;
   };
-  (0, import_react5.useEffect)(() => {
+  const sizeStyles = {
+    xs: `[padding-left:var(--dropdown-padding-xs-x)] [padding-right:var(--dropdown-padding-xs-x)] [padding-top:var(--dropdown-padding-xs-y)] [padding-bottom:var(--dropdown-padding-xs-y)] [font-size:var(--dropdown-font-size-xs)]`,
+    sm: `[padding-left:var(--dropdown-padding-sm-x)] [padding-right:var(--dropdown-padding-sm-x)] [padding-top:var(--dropdown-padding-sm-y)] [padding-bottom:var(--dropdown-padding-sm-y)] [font-size:var(--dropdown-font-size-sm)]`,
+    md: `[padding-left:var(--dropdown-padding-md-x)] [padding-right:var(--dropdown-padding-md-x)] [padding-top:var(--dropdown-padding-md-y)] [padding-bottom:var(--dropdown-padding-md-y)] [font-size:var(--dropdown-font-size-md)]`,
+    lg: `[padding-left:var(--dropdown-padding-lg-x)] [padding-right:var(--dropdown-padding-lg-x)] [padding-top:var(--dropdown-padding-lg-y)] [padding-bottom:var(--dropdown-padding-lg-y)] [font-size:var(--dropdown-font-size-lg)]`,
+    xl: `[padding-left:var(--dropdown-padding-xl-x)] [padding-right:var(--dropdown-padding-xl-x)] [padding-top:var(--dropdown-padding-xl-y)] [padding-bottom:var(--dropdown-padding-xl-y)] [font-size:var(--dropdown-font-size-xl)]`
+  };
+  const iconSizeStyles = {
+    xs: `[width:var(--dropdown-icon-size-xs)] [height:var(--dropdown-icon-size-xs)]`,
+    sm: `[width:var(--dropdown-icon-size-sm)] [height:var(--dropdown-icon-size-sm)]`,
+    md: `[width:var(--dropdown-icon-size-md)] [height:var(--dropdown-icon-size-md)]`,
+    lg: `[width:var(--dropdown-icon-size-lg)] [height:var(--dropdown-icon-size-lg)]`,
+    xl: `[width:var(--dropdown-icon-size-xl)] [height:var(--dropdown-icon-size-xl)]`
+  };
+  const optionSizeStyles = {
+    xs: `[padding-left:var(--dropdown-option-padding-xs-x)] [padding-right:var(--dropdown-option-padding-xs-x)] [padding-top:var(--dropdown-option-padding-xs-y)] [padding-bottom:var(--dropdown-option-padding-xs-y)] [font-size:var(--dropdown-option-font-size-xs)]`,
+    sm: `[padding-left:var(--dropdown-option-padding-sm-x)] [padding-right:var(--dropdown-option-padding-sm-x)] [padding-top:var(--dropdown-option-padding-sm-y)] [padding-bottom:var(--dropdown-option-padding-sm-y)] [font-size:var(--dropdown-option-font-size-sm)]`,
+    md: `[padding-left:var(--dropdown-option-padding-md-x)] [padding-right:var(--dropdown-option-padding-md-x)] [padding-top:var(--dropdown-option-padding-md-y)] [padding-bottom:var(--dropdown-option-padding-md-y)] [font-size:var(--dropdown-option-font-size-md)]`,
+    lg: `[padding-left:var(--dropdown-option-padding-lg-x)] [padding-right:var(--dropdown-option-padding-lg-x)] [padding-top:var(--dropdown-option-padding-lg-y)] [padding-bottom:var(--dropdown-option-padding-lg-y)] [font-size:var(--dropdown-option-font-size-lg)]`,
+    xl: `[padding-left:var(--dropdown-option-padding-xl-x)] [padding-right:var(--dropdown-option-padding-xl-x)] [padding-top:var(--dropdown-option-padding-xl-y)] [padding-bottom:var(--dropdown-option-padding-xl-y)] [font-size:var(--dropdown-option-font-size-xl)]`
+  };
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -580,7 +688,7 @@ function Dropdown({
           onKeyDown: handleKeyDown,
           disabled,
           className: `
-            w-full px-4 py-2 text-left bg-white border rounded-lg
+            w-full ${sizeStyles[size]} text-left bg-white border rounded-(--dropdown-radius)
             flex items-center justify-between
             transition-all duration-200
             ${error ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500" : "border-gray-400 focus:ring-2 focus:ring-blue-200 focus:border-blue-500"}
@@ -592,7 +700,7 @@ function Dropdown({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_lucide_react.ChevronDown,
               {
-                className: `w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0 ml-2 ${isOpen ? "transform rotate-180" : ""}`
+                className: `${iconSizeStyles[size]} text-gray-400 transition-transform duration-200 shrink-0 ml-2 ${isOpen ? "transform rotate-180" : ""}`
               }
             )
           ]
@@ -615,7 +723,7 @@ function Dropdown({
                 onClick: () => !option.disabled && handleSelect(option.value),
                 disabled: option.disabled,
                 className: `
-                        w-full px-4 py-2 text-left text-sm
+                        w-full ${optionSizeStyles[size]} text-left
                         transition-colors duration-150
                         ${option.value === value ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-900 hover:bg-gray-100"}
                         ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
@@ -640,9 +748,9 @@ function Dropdown({
 }
 
 // src/ui/spinner.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Spinner = import_react6.default.forwardRef(
+var Spinner = import_react7.default.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
       sm: "h-4 w-4",
@@ -704,13 +812,13 @@ var Spinner = import_react6.default.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/ui/code-snippet.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function CodeSnippet({ code, language = "tsx" }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  const [showTooltip, setShowTooltip] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const [showTooltip, setShowTooltip] = (0, import_react8.useState)(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -802,9 +910,9 @@ function CodeSnippet({ code, language = "tsx" }) {
 }
 
 // src/feedback/alert.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Alert = import_react8.default.forwardRef(
+var Alert = import_react9.default.forwardRef(
   ({
     className,
     variant = "info",
@@ -907,9 +1015,9 @@ var Alert = import_react8.default.forwardRef(
 Alert.displayName = "Alert";
 
 // src/layout/container.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Container = import_react9.default.forwardRef(
+var Container = import_react10.default.forwardRef(
   ({
     className,
     maxWidth = "xl",
@@ -946,7 +1054,7 @@ var Container = import_react9.default.forwardRef(
 Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function SectionLayout({
   children,
@@ -955,7 +1063,7 @@ function SectionLayout({
   if (!hasStickyPreview) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
   }
-  const childArray = import_react10.default.Children.toArray(children);
+  const childArray = import_react11.default.Children.toArray(children);
   if (childArray.length === 0) {
     return null;
   }
@@ -967,48 +1075,452 @@ function SectionLayout({
   ] });
 }
 
-// src/layout/sidebar-nav.tsx
-var import_react11 = require("react");
+// src/layout/nav.tsx
+var import_react12 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var Nav = import_react12.default.forwardRef(
+  ({
+    className,
+    items,
+    variant = "primary",
+    orientation = "horizontal",
+    size = "md",
+    mobileBreakpoint = "md",
+    mobileMenuDirection = "top",
+    logo,
+    actions,
+    sticky = false,
+    activeId,
+    onItemClick,
+    ...props
+  }, ref) => {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, import_react12.useState)(false);
+    const [openDropdownId, setOpenDropdownId] = (0, import_react12.useState)(null);
+    const dropdownRef = (0, import_react12.useRef)(null);
+    (0, import_react12.useEffect)(() => {
+      function handleClickOutside(event) {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setOpenDropdownId(null);
+        }
+      }
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    (0, import_react12.useEffect)(() => {
+      function handleEscape(event) {
+        if (event.key === "Escape") {
+          setIsMobileMenuOpen(false);
+          setOpenDropdownId(null);
+        }
+      }
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        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-index:var(--z-index-nav)]"
+    );
+    const containerStyles = cn(
+      "[min-height:var(--nav-height)]",
+      "flex items-center justify-between",
+      "px-[var(--spacing-lg)]"
+    );
+    const itemPaddingStyles = {
+      xs: "[padding-left:var(--nav-item-padding-xs-x)] [padding-right:var(--nav-item-padding-xs-x)] [padding-top:var(--nav-item-padding-xs-y)] [padding-bottom:var(--nav-item-padding-xs-y)]",
+      sm: "[padding-left:var(--nav-item-padding-sm-x)] [padding-right:var(--nav-item-padding-sm-x)] [padding-top:var(--nav-item-padding-sm-y)] [padding-bottom:var(--nav-item-padding-sm-y)]",
+      md: "[padding-left:var(--nav-item-padding-md-x)] [padding-right:var(--nav-item-padding-md-x)] [padding-top:var(--nav-item-padding-md-y)] [padding-bottom:var(--nav-item-padding-md-y)]",
+      lg: "[padding-left:var(--nav-item-padding-lg-x)] [padding-right:var(--nav-item-padding-lg-x)] [padding-top:var(--nav-item-padding-lg-y)] [padding-bottom:var(--nav-item-padding-lg-y)]",
+      xl: "[padding-left:var(--nav-item-padding-xl-x)] [padding-right:var(--nav-item-padding-xl-x)] [padding-top:var(--nav-item-padding-xl-y)] [padding-bottom:var(--nav-item-padding-xl-y)]"
+    };
+    const fontSizeStyles = {
+      xs: "[font-size:var(--nav-font-size-xs)]",
+      sm: "[font-size:var(--nav-font-size-sm)]",
+      md: "[font-size:var(--nav-font-size-md)]",
+      lg: "[font-size:var(--nav-font-size-lg)]",
+      xl: "[font-size:var(--nav-font-size-xl)]"
+    };
+    const variantItemStyles = {
+      primary: "rounded-[var(--nav-border-radius)] hover:bg-blue-50 transition-colors",
+      secondary: "rounded-[var(--nav-border-radius)] hover:bg-[var(--color-muted)] transition-colors",
+      outline: cn(
+        "rounded-[var(--nav-border-radius)] border border-[var(--color-border)] hover:bg-[var(--color-muted)] transition-colors"
+      ),
+      ghost: "rounded-[var(--nav-border-radius)] hover:bg-[var(--color-muted)]/50 transition-colors"
+    };
+    const activeItemStyles = {
+      primary: "bg-blue-100 text-blue-700",
+      secondary: "bg-[var(--color-muted)] [font-weight:var(--font-semibold)]",
+      outline: "border-blue-600 bg-blue-50 text-blue-700",
+      ghost: "bg-[var(--color-muted)]"
+    };
+    const breakpointClasses = {
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden"
+    };
+    const breakpointShowClasses = {
+      sm: "hidden sm:flex",
+      md: "hidden md:flex",
+      lg: "hidden lg:flex"
+    };
+    const handleItemClick = (item) => {
+      if (item.disabled) return;
+      if (item.type === "dropdown") {
+        setOpenDropdownId(openDropdownId === item.id ? null : item.id);
+        return;
+      }
+      if (item.onClick) {
+        item.onClick();
+      }
+      if (onItemClick) {
+        onItemClick(item);
+      }
+      setIsMobileMenuOpen(false);
+      setOpenDropdownId(null);
+    };
+    const renderNavItem = (item, isMobile = false) => {
+      if (item.type === "divider") {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            className: cn(
+              orientation === "horizontal" && !isMobile && "h-6 border-l border-[var(--color-border)] mx-2",
+              (orientation === "vertical" || isMobile) && "w-full h-0 border-t border-[var(--color-border)] my-2"
+            )
+          },
+          item.id
+        );
+      }
+      if (item.type === "custom" && item.render) {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: item.render() }, item.id);
+      }
+      const isActive = activeId === item.id;
+      const isDropdownOpen = openDropdownId === item.id;
+      const hasChildren = item.children && item.children.length > 0;
+      const itemBaseStyles = cn(
+        "flex items-center [gap:var(--nav-gap)] font-medium text-[var(--color-foreground)] cursor-pointer select-none",
+        itemPaddingStyles[size],
+        fontSizeStyles[size],
+        variantItemStyles[variant],
+        isActive && activeItemStyles[variant],
+        orientation === "vertical" && "w-full",
+        item.disabled && "opacity-50 cursor-not-allowed"
+      );
+      const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        item.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: item.label }),
+        item.badge && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-auto px-2 py-0.5 [font-size:var(--text-xs)] font-semibold bg-red-500 text-white rounded-[var(--radius-full)]", children: item.badge }),
+        hasChildren && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_lucide_react2.ChevronDown,
+          {
+            className: cn(
+              "w-4 h-4 transition-transform",
+              isDropdownOpen && "rotate-180"
+            )
+          }
+        )
+      ] });
+      if (hasChildren) {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: () => handleItemClick(item),
+              className: itemBaseStyles,
+              disabled: item.disabled,
+              children: content
+            }
+          ),
+          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute left-0 mt-[var(--nav-gap)] min-w-[200px] bg-[var(--color-background)] border border-[var(--color-border)] rounded-[var(--nav-border-radius)] shadow-lg z-50",
+                orientation === "vertical" && "left-full top-0 ml-2 mt-0"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "button",
+                {
+                  onClick: () => handleItemClick(child),
+                  disabled: child.disabled,
+                  className: cn(
+                    "w-full flex items-center gap-2 px-4 py-2 [font-size:var(--text-sm)] text-[var(--color-foreground)] hover:bg-[var(--color-muted)] transition-colors",
+                    child.disabled && "opacity-50 cursor-not-allowed",
+                    activeId === child.id && "bg-[var(--color-muted)] [font-weight:var(--font-semibold)]"
+                  ),
+                  children: [
+                    child.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex-shrink-0", children: child.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: child.label }),
+                    child.badge && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-auto px-2 py-0.5 [font-size:var(--text-xs)] font-semibold bg-red-500 text-white rounded-[var(--radius-full)]", children: child.badge })
+                  ]
+                },
+                child.id
+              )) })
+            }
+          )
+        ] }, item.id);
+      }
+      if (item.href) {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "a",
+          {
+            href: item.href,
+            target: item.target,
+            onClick: () => handleItemClick(item),
+            className: itemBaseStyles,
+            children: content
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          onClick: () => handleItemClick(item),
+          disabled: item.disabled,
+          className: itemBaseStyles,
+          children: content
+        },
+        item.id
+      );
+    };
+    const desktopNav = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: cn(
+          "items-center [gap:var(--nav-gap)]",
+          breakpointShowClasses[mobileBreakpoint],
+          orientation === "horizontal" ? "flex flex-row" : "flex flex-col"
+        ),
+        children: items.map((item) => renderNavItem(item))
+      }
+    );
+    const mobileNav = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
+          className: cn(
+            "p-2 text-[var(--color-foreground)] hover:bg-[var(--color-muted)] rounded-[var(--nav-border-radius)] transition-colors",
+            breakpointClasses[mobileBreakpoint]
+          ),
+          "aria-label": "Toggle menu",
+          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.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: "shrink-0", children: logo }),
+      desktopNav,
+      actions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
+      mobileNav
+    ] }) });
+  }
+);
+Nav.displayName = "Nav";
+
+// 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 Drawer({
+  title,
+  subtitle,
+  items,
+  sections,
+  activeItem,
+  onItemClick,
+  footer,
+  position = "right"
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react13.useState)(false);
+  const isLeft = position === "left";
+  const handleItemClick = (itemId) => {
+    onItemClick(itemId);
+    setMobileMenuOpen(false);
+  };
+  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 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"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              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" })
+            }
+          ),
+          /* @__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", children: subtitle })
+          ] })
+        ]
+      }
+    ) }),
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 lg:hidden",
+        style: { zIndex: 9998 },
+        onClick: () => setMobileMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "aside",
+      {
+        className: `
+          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 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.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)(
+              "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_runtime14.jsx)("span", { className: "shrink-0", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: item.label })
+                ]
+              }
+            ) }, item.id)) })
+          ] }, sectionIndex)) }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// 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");
 function SidebarNav({
   title,
   subtitle,
   items,
+  sections,
   activeItem,
   onItemClick,
   footer,
   position = "right"
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react11.useState)(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react14.useState)(false);
   const isLeft = position === "left";
   const handleItemClick = (itemId) => {
     onItemClick(itemId);
     setMobileMenuOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsxs)(
+  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_runtime13.jsx)(
+          /* @__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_runtime13.jsx)(import_lucide_react2.X, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Menu, { className: "w-6 h-6 text-gray-700" })
+              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_runtime13.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "text-lg font-bold text-gray-900", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-gray-500", children: subtitle })
+          /* @__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_runtime13.jsx)(
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: "fixed inset-0 bg-black/50 lg:hidden",
@@ -1016,7 +1528,7 @@ function SidebarNav({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "aside",
       {
         className: `
@@ -1027,26 +1539,29 @@ function SidebarNav({
           ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
         `,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "text-xl font-bold text-gray-900", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+          /* @__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_runtime13.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("span", { className: "shrink-0", children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: item.label })
-              ]
-            }
-          ) }, item.id)) }) }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+          /* @__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 })
         ]
       }
     )
@@ -1054,11 +1569,11 @@ function SidebarNav({
 }
 
 // src/shared/empty-state.tsx
-var import_react12 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var EmptyState = import_react12.default.forwardRef(
+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_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         ref,
@@ -1068,16 +1583,472 @@ var EmptyState = import_react12.default.forwardRef(
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mb-4 text-gray-400", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
-          action && /* @__PURE__ */ (0, import_jsx_runtime14.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 })
         ]
       }
     );
   }
 );
 EmptyState.displayName = "EmptyState";
+
+// src/shared/contexts/ThemeContext.tsx
+var import_react16 = require("react");
+
+// src/styles/themes/default.json
+var default_default = {
+  name: "Default Theme",
+  version: "1.0.0",
+  colors: {
+    primary: {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    secondary: {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5e1",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a"
+    },
+    success: "#10b981",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#3b82f6",
+    gray: {
+      "50": "#f9fafb",
+      "100": "#f3f4f6",
+      "200": "#e5e7eb",
+      "300": "#d1d5db",
+      "400": "#9ca3af",
+      "500": "#6b7280",
+      "600": "#4b5563",
+      "700": "#374151",
+      "800": "#1f2937",
+      "900": "#111827"
+    },
+    background: "#ffffff",
+    foreground: "#111827",
+    muted: "#f3f4f6",
+    mutedForeground: "#6b7280"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    full: "9999px"
+  },
+  typography: {
+    fontFamily: {
+      sans: [
+        "Inter",
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Arial",
+        "sans-serif"
+      ],
+      mono: [
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace"
+      ]
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem"
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      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: {
+        xs: { x: "0.5rem", y: "0.375rem" },
+        sm: { x: "0.75rem", y: "0.5rem" },
+        md: { x: "1rem", y: "0.625rem" },
+        lg: { x: "1.25rem", y: "0.75rem" },
+        xl: { x: "1.5rem", y: "0.875rem" }
+      },
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem"
+      },
+      borderRadius: "0.5rem",
+      fontWeight: "500"
+    },
+    card: {
+      padding: {
+        none: "0",
+        sm: "0.75rem",
+        md: "1rem",
+        lg: "1.5rem"
+      },
+      borderRadius: "0.75rem",
+      borderWidth: "1px",
+      shadow: {
+        flat: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        elevated: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+      }
+    },
+    input: {
+      padding: {
+        xs: "0.375rem 0.5rem",
+        sm: "0.5rem 0.75rem",
+        md: "0.625rem 1rem",
+        lg: "0.75rem 1.25rem",
+        xl: "0.875rem 1.5rem"
+      },
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem"
+      },
+      borderRadius: "0.5rem",
+      borderWidth: "1px"
+    },
+    checkbox: {
+      size: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.25rem",
+        xl: "1.5rem"
+      },
+      labelSpacing: {
+        xs: "0.25rem",
+        sm: "0.375rem",
+        md: "0.5rem",
+        lg: "0.625rem",
+        xl: "0.75rem"
+      },
+      labelFontSize: {
+        xs: "0.625rem",
+        sm: "0.75rem",
+        md: "0.875rem",
+        lg: "1rem",
+        xl: "1.125rem"
+      },
+      borderRadius: "0.25rem"
+    },
+    radio: {
+      size: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.25rem",
+        xl: "1.5rem"
+      },
+      labelSpacing: {
+        xs: "0.25rem",
+        sm: "0.375rem",
+        md: "0.5rem",
+        lg: "0.625rem",
+        xl: "0.75rem"
+      },
+      labelFontSize: {
+        xs: "0.625rem",
+        sm: "0.75rem",
+        md: "0.875rem",
+        lg: "1rem",
+        xl: "1.125rem"
+      }
+    },
+    dropdown: {
+      padding: {
+        xs: { x: "0.5rem", y: "0.25rem" },
+        sm: { x: "0.75rem", y: "0.375rem" },
+        md: { x: "1rem", y: "0.5rem" },
+        lg: { x: "1.25rem", y: "0.625rem" },
+        xl: { x: "1.5rem", y: "0.75rem" }
+      },
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem"
+      },
+      iconSize: {
+        xs: "0.875rem",
+        sm: "1rem",
+        md: "1.25rem",
+        lg: "1.5rem",
+        xl: "1.75rem"
+      },
+      optionPadding: {
+        xs: { x: "0.5rem", y: "0.25rem" },
+        sm: { x: "0.75rem", y: "0.375rem" },
+        md: { x: "1rem", y: "0.5rem" },
+        lg: { x: "1.25rem", y: "0.625rem" },
+        xl: { x: "1.5rem", y: "0.75rem" }
+      },
+      optionFontSize: {
+        xs: "0.625rem",
+        sm: "0.75rem",
+        md: "0.875rem",
+        lg: "1rem",
+        xl: "1.125rem"
+      },
+      borderRadius: "0.5rem",
+      borderWidth: "1px"
+    },
+    nav: {
+      height: "4rem",
+      itemPadding: {
+        xs: { x: "0.375rem", y: "0.25rem" },
+        sm: { x: "0.5rem", y: "0.375rem" },
+        md: { x: "0.75rem", y: "0.5rem" },
+        lg: { x: "1rem", y: "0.625rem" },
+        xl: { x: "1.25rem", y: "0.75rem" }
+      },
+      fontSize: {
+        xs: "0.625rem",
+        sm: "0.75rem",
+        md: "0.875rem",
+        lg: "1rem",
+        xl: "1.125rem"
+      },
+      borderRadius: "0.375rem",
+      gap: "0.25rem"
+    }
+  }
+};
+
+// src/shared/contexts/ThemeContext.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react16.createContext)(void 0);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = (0, import_react16.useState)(default_default);
+  const applyTheme = (newTheme) => {
+    const root = document.documentElement;
+    const colors = newTheme.colors;
+    Object.entries(colors.primary).forEach(([shade, value]) => {
+      if (value) {
+        root.style.setProperty(`--color-primary-${shade}`, value);
+      }
+    });
+    Object.entries(colors.secondary).forEach(([shade, value]) => {
+      if (value) {
+        root.style.setProperty(`--color-secondary-${shade}`, value);
+      }
+    });
+    root.style.setProperty("--color-success", colors.success);
+    root.style.setProperty("--color-error", colors.error);
+    root.style.setProperty("--color-warning", colors.warning);
+    root.style.setProperty("--color-info", colors.info);
+    Object.entries(colors.gray).forEach(([shade, value]) => {
+      if (value) {
+        root.style.setProperty(`--color-gray-${shade}`, value);
+      }
+    });
+    root.style.setProperty("--color-background", colors.background);
+    root.style.setProperty("--color-foreground", colors.foreground);
+    root.style.setProperty("--color-muted", colors.muted);
+    root.style.setProperty("--color-muted-foreground", colors.mutedForeground);
+    Object.entries(newTheme.spacing).forEach(([key, value]) => {
+      root.style.setProperty(`--spacing-${key}`, value);
+    });
+    Object.entries(newTheme.borderRadius).forEach(([key, value]) => {
+      root.style.setProperty(`--radius-${key}`, value);
+    });
+    const { typography } = newTheme;
+    root.style.setProperty(
+      "--font-sans",
+      typography.fontFamily.sans.join(", ")
+    );
+    root.style.setProperty(
+      "--font-mono",
+      typography.fontFamily.mono.join(", ")
+    );
+    Object.entries(typography.fontSize).forEach(([key, value]) => {
+      root.style.setProperty(`--text-${key}`, value);
+    });
+    Object.entries(typography.fontWeight).forEach(([key, value]) => {
+      root.style.setProperty(`--font-${key}`, value);
+    });
+    const button = newTheme.components.button;
+    Object.entries(button.padding).forEach(([size, padding]) => {
+      root.style.setProperty(`--button-padding-${size}-x`, padding.x);
+      root.style.setProperty(`--button-padding-${size}-y`, padding.y);
+    });
+    Object.entries(button.fontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--button-font-size-${size}`, fontSize);
+    });
+    root.style.setProperty("--button-radius", button.borderRadius);
+    root.style.setProperty("--button-font-weight", button.fontWeight);
+    const card = newTheme.components.card;
+    Object.entries(card.padding).forEach(([size, padding]) => {
+      root.style.setProperty(`--card-padding-${size}`, padding);
+    });
+    root.style.setProperty("--card-radius", card.borderRadius);
+    root.style.setProperty("--card-border-width", card.borderWidth);
+    root.style.setProperty("--card-shadow-flat", card.shadow.flat);
+    root.style.setProperty("--card-shadow-elevated", card.shadow.elevated);
+    const input = newTheme.components.input;
+    Object.entries(input.padding).forEach(([size, padding]) => {
+      root.style.setProperty(`--input-padding-${size}`, padding);
+    });
+    Object.entries(input.fontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--input-font-size-${size}`, fontSize);
+    });
+    root.style.setProperty("--input-radius", input.borderRadius);
+    root.style.setProperty("--input-border-width", input.borderWidth);
+    const checkbox = newTheme.components.checkbox;
+    Object.entries(checkbox.size).forEach(([size, dimension]) => {
+      root.style.setProperty(`--checkbox-size-${size}`, dimension);
+    });
+    Object.entries(checkbox.labelSpacing).forEach(([size, spacing]) => {
+      root.style.setProperty(`--checkbox-label-spacing-${size}`, spacing);
+    });
+    Object.entries(checkbox.labelFontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--checkbox-label-font-size-${size}`, fontSize);
+    });
+    root.style.setProperty("--checkbox-radius", checkbox.borderRadius);
+    const radio = newTheme.components.radio;
+    Object.entries(radio.size).forEach(([size, dimension]) => {
+      root.style.setProperty(`--radio-size-${size}`, dimension);
+    });
+    Object.entries(radio.labelSpacing).forEach(([size, spacing]) => {
+      root.style.setProperty(`--radio-label-spacing-${size}`, spacing);
+    });
+    Object.entries(radio.labelFontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--radio-label-font-size-${size}`, fontSize);
+    });
+    const dropdown = newTheme.components.dropdown;
+    Object.entries(dropdown.padding).forEach(([size, padding]) => {
+      root.style.setProperty(`--dropdown-padding-${size}-x`, padding.x);
+      root.style.setProperty(`--dropdown-padding-${size}-y`, padding.y);
+    });
+    Object.entries(dropdown.fontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--dropdown-font-size-${size}`, fontSize);
+    });
+    Object.entries(dropdown.iconSize).forEach(([size, iconSize]) => {
+      root.style.setProperty(`--dropdown-icon-size-${size}`, iconSize);
+    });
+    Object.entries(dropdown.optionPadding).forEach(([size, padding]) => {
+      root.style.setProperty(`--dropdown-option-padding-${size}-x`, padding.x);
+      root.style.setProperty(`--dropdown-option-padding-${size}-y`, padding.y);
+    });
+    Object.entries(dropdown.optionFontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--dropdown-option-font-size-${size}`, fontSize);
+    });
+    root.style.setProperty("--dropdown-radius", dropdown.borderRadius);
+    root.style.setProperty("--dropdown-border-width", dropdown.borderWidth);
+    const nav = newTheme.components.nav;
+    root.style.setProperty("--nav-height", nav.height);
+    Object.entries(nav.itemPadding).forEach(([size, padding]) => {
+      root.style.setProperty(`--nav-item-padding-${size}-x`, padding.x);
+      root.style.setProperty(`--nav-item-padding-${size}-y`, padding.y);
+    });
+    Object.entries(nav.fontSize).forEach(([size, fontSize]) => {
+      root.style.setProperty(`--nav-font-size-${size}`, fontSize);
+    });
+    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) => {
+    applyTheme(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", JSON.stringify(newTheme));
+    }
+  };
+  const resetTheme = () => {
+    applyTheme(default_default);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("theme");
+    }
+  };
+  (0, import_react16.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        try {
+          const parsedTheme = JSON.parse(savedTheme);
+          applyTheme(parsedTheme);
+        } catch (error) {
+          console.error("Failed to parse saved theme:", error);
+          applyTheme(default_default);
+        }
+      } else {
+        applyTheme(default_default);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeContext.Provider, { value: { theme, setTheme, applyTheme, resetTheme }, children });
+}
+function useTheme() {
+  const context = (0, import_react16.useContext)(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1093,13 +2064,17 @@ EmptyState.displayName = "EmptyState";
   CheckboxGroup,
   CodeSnippet,
   Container,
+  Drawer,
   Dropdown,
   EmptyState,
   Input,
+  Nav,
   RadioGroup,
   SectionLayout,
   SidebarNav,
   Spinner,
-  cn
+  ThemeProvider,
+  cn,
+  useTheme
 });
 //# sourceMappingURL=index.js.map