@yomologic/react-ui 0.5.4 → 0.5.6

package/dist/index.mjs

@@ -2084,6 +2084,9 @@ function Select({
   const [isOpen, setIsOpen] = useState7(false);
   const dropdownRef = useRef5(null);
   const [validationError, _setValidationError] = useState7();
+  const [focusedIndex, setFocusedIndex] = useState7(-1);
+  const [searchString, setSearchString] = useState7("");
+  const searchTimeoutRef = useRef5();
   let value;
   let displayError;
   if (form && name) {
@@ -2168,9 +2171,68 @@ function Select({
     if (disabled) return;
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      setIsOpen(!isOpen);
+      if (!isOpen) {
+        setIsOpen(true);
+        const currentIndex = options.findIndex(
+          (opt) => opt.value === value
+        );
+        setFocusedIndex(currentIndex);
+      } else if (focusedIndex >= 0 && focusedIndex < options.length) {
+        handleSelect(options[focusedIndex].value);
+      }
     } else if (e.key === "Escape") {
       setIsOpen(false);
+      setFocusedIndex(-1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) {
+        const currentIndex = options.findIndex(
+          (opt) => opt.value === value
+        );
+        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : currentIndex;
+        if (nextIndex !== currentIndex && options[nextIndex]) {
+          handleSelect(options[nextIndex].value);
+        } else if (currentIndex === -1 && options.length > 0) {
+          handleSelect(options[0].value);
+        }
+      } else {
+        setFocusedIndex(
+          (prev) => prev < options.length - 1 ? prev + 1 : prev
+        );
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) {
+        const currentIndex = options.findIndex(
+          (opt) => opt.value === value
+        );
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
+        if (prevIndex !== currentIndex && options[prevIndex]) {
+          handleSelect(options[prevIndex].value);
+        }
+      } else {
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : 0);
+      }
+    } else if (e.key.length === 1 && /[a-z0-9]/i.test(e.key)) {
+      e.preventDefault();
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      const newSearchString = searchString + e.key.toLowerCase();
+      setSearchString(newSearchString);
+      const matchIndex = options.findIndex(
+        (opt) => opt.label.toLowerCase().startsWith(newSearchString)
+      );
+      if (matchIndex >= 0) {
+        if (!isOpen) {
+          handleSelect(options[matchIndex].value);
+        } else {
+          setFocusedIndex(matchIndex);
+        }
+      }
+      searchTimeoutRef.current = setTimeout(() => {
+        setSearchString("");
+      }, 1e3);
     }
   };
   return /* @__PURE__ */ jsxs9(
@@ -2190,6 +2252,15 @@ function Select({
             ]
           }
         ),
+        name && /* @__PURE__ */ jsx10(
+          "input",
+          {
+            type: "hidden",
+            name,
+            value: value ?? "",
+            required
+          }
+        ),
         /* @__PURE__ */ jsxs9("div", { ref: dropdownRef, className: "relative", children: [
           /* @__PURE__ */ jsxs9(
             "button",
@@ -2261,16 +2332,17 @@ function Select({
                       children: placeholder
                     }
                   ) }, "__placeholder__"),
-                  options.map((option) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
+                  options.map((option, index) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
                       onClick: () => !option.disabled && handleSelect(option.value),
                       disabled: option.disabled,
+                      onMouseEnter: () => setFocusedIndex(index),
                       className: `
                         w-full ${optionSizeStyles[size]} text-left
                         transition-colors duration-150
-                        ${option.value === value ? "bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] text-(--color-primary) font-medium" : "text-(--color-foreground) hover:bg-(--color-muted)"}
+                        ${option.value === value ? "bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] text-(--color-primary) font-medium" : index === focusedIndex ? "bg-(--color-muted) text-(--color-foreground)" : "text-(--color-foreground) hover:bg-(--color-muted)"}
                         ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
                       `,
                       role: "option",
@@ -2295,9 +2367,123 @@ function Select({
   );
 }
 
+// src/ui/native-select.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function NativeSelect({
+  name,
+  label,
+  value: externalValue,
+  onChange,
+  children,
+  error,
+  helperText,
+  required = false,
+  size = "md",
+  className = "",
+  validate,
+  errorMessage,
+  disabled = false,
+  ...htmlProps
+}) {
+  const form = useForm();
+  let value;
+  let displayError;
+  if (form && name) {
+    value = form.values[name] ?? externalValue;
+    displayError = form.shouldShowError(name) ? form.getFieldError(name) : void 0;
+  } else {
+    value = externalValue;
+    displayError = error;
+  }
+  if (form && name) {
+    const validator = async (val) => {
+      if (required && (val === void 0 || val === null || val === "")) {
+        return errorMessage || "Please select an option";
+      }
+      if (validate) {
+        return await validate(val);
+      }
+      return void 0;
+    };
+    form.registerField(name, validator);
+  }
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (form && name) {
+      form.setFieldValue(name, newValue);
+      form.setFieldTouched(name, true);
+      form.validateField(name, newValue);
+    } else {
+      onChange?.(newValue);
+    }
+  };
+  const sizeStyles = {
+    xs: "px-2 py-1.5 text-xs",
+    sm: "px-2.5 py-2 text-sm",
+    md: "px-3 py-2.5 text-base",
+    lg: "px-4 py-3 text-lg",
+    xl: "px-5 py-3.5 text-xl"
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `w-full ${className}`,
+      style: { marginBottom: "var(--form-control-spacing)" },
+      children: [
+        label && /* @__PURE__ */ jsxs10(
+          "label",
+          {
+            className: "block text-small font-semibold mb-1",
+            style: { color: "var(--color-muted-foreground)" },
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx11("span", { className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "select",
+          {
+            name,
+            value: value ?? "",
+            onChange: handleChange,
+            disabled,
+            required,
+            className: `
+                    w-full ${sizeStyles[size]}
+                    bg-(--color-background) 
+                    border rounded-(--dropdown-radius)
+                    transition-all duration-200
+                    appearance-none
+                    cursor-pointer
+                    ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error" : "border-(--color-border) focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-primary)_30%,transparent)] focus:border-(--color-primary)"}
+                    ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
+                    ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
+                    pr-10
+                    bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3c%2fpolyline%3E%3c%2fsvg%3E')]
+                    bg-[length:1.25rem_1.25rem]
+                    bg-[position:right_0.5rem_center]
+                    bg-no-repeat
+                `,
+            ...htmlProps,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx11(
+          "p",
+          {
+            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            children: displayError || helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/ui/spinner.tsx
 import React7 from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var Spinner = React7.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
@@ -2311,7 +2497,7 @@ var Spinner = React7.forwardRef(
       secondary: "text-(--color-muted-foreground)",
       white: "text-white"
     };
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         ref,
@@ -2321,7 +2507,7 @@ var Spinner = React7.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs10(
+          /* @__PURE__ */ jsxs11(
             "svg",
             {
               className: cn("animate-spin", sizes[size], colors[color]),
@@ -2329,7 +2515,7 @@ var Spinner = React7.forwardRef(
               fill: "none",
               viewBox: "0 0 24 24",
               children: [
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     className: "opacity-25",
@@ -2340,7 +2526,7 @@ var Spinner = React7.forwardRef(
                     strokeWidth: "4"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "path",
                   {
                     className: "opacity-75",
@@ -2351,7 +2537,7 @@ var Spinner = React7.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsx11("p", { className: "text-small text-(--color-muted-foreground)", children: label })
+          label && /* @__PURE__ */ jsx12("p", { className: "text-small text-(--color-muted-foreground)", children: label })
         ]
       }
     );
@@ -2362,7 +2548,7 @@ Spinner.displayName = "Spinner";
 // src/ui/code-snippet.tsx
 import { Highlight, themes } from "prism-react-renderer";
 import { useState as useState8 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function CodeSnippet({
   code,
   language = "tsx",
@@ -2385,9 +2571,9 @@ function CodeSnippet({
       console.error("Failed to copy:", err);
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: "relative group w-full", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs12("div", { className: "relative group w-full", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
+      /* @__PURE__ */ jsx13(
         "button",
         {
           onClick: handleCopy,
@@ -2397,14 +2583,14 @@ function CodeSnippet({
           "aria-label": "Copy code",
           children: copied ? (
             // Check icon
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "svg",
               {
                 className: "w-4 h-4 text-green-400",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx12(
+                children: /* @__PURE__ */ jsx13(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2417,14 +2603,14 @@ function CodeSnippet({
             )
           ) : (
             // Copy icon
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "svg",
               {
                 className: "w-4 h-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx12(
+                children: /* @__PURE__ */ jsx13(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2438,26 +2624,26 @@ function CodeSnippet({
           )
         }
       ),
-      showTooltip && !copied && /* @__PURE__ */ jsxs11("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-[#1f2937] text-white text-caption rounded shadow-lg whitespace-nowrap border border-[#374151]", children: [
+      showTooltip && !copied && /* @__PURE__ */ jsxs12("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-[#1f2937] text-white text-caption rounded shadow-lg whitespace-nowrap border border-[#374151]", children: [
         "Copy code",
-        /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
+        /* @__PURE__ */ jsx13("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
       ] }),
-      copied && /* @__PURE__ */ jsxs11("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-caption rounded shadow-lg whitespace-nowrap", children: [
+      copied && /* @__PURE__ */ jsxs12("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-caption rounded shadow-lg whitespace-nowrap", children: [
         "Copied!",
-        /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+        /* @__PURE__ */ jsx13("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "div",
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(
           Highlight,
           {
             theme: themes.vsDark,
             code,
             language,
-            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx12(
+            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx13(
               "pre",
               {
                 style: {
@@ -2469,7 +2655,7 @@ function CodeSnippet({
                   whiteSpace: wrap ? "pre-wrap" : "pre",
                   wordBreak: wrap ? "break-word" : "normal"
                 },
-                children: tokens.map((line, i) => /* @__PURE__ */ jsx12("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx12(
+                children: tokens.map((line, i) => /* @__PURE__ */ jsx13("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx13(
                   "span",
                   {
                     ...getTokenProps({ token })
@@ -2488,7 +2674,7 @@ function CodeSnippet({
 // src/ui/rating.tsx
 import { Star } from "lucide-react";
 import React8, { useId as useId5 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var Rating = ({
   value,
   max = 5,
@@ -2530,7 +2716,7 @@ var Rating = ({
     const isHalf = displayValue >= i - 0.5 && displayValue < i;
     const isEmpty = displayValue < i - 0.5;
     stars.push(
-      /* @__PURE__ */ jsxs12(
+      /* @__PURE__ */ jsxs13(
         "span",
         {
           onClick: () => handleStarClick(i),
@@ -2563,7 +2749,7 @@ var Rating = ({
           },
           className: responsive ? "sm:w-(--star-size) sm:h-(--star-size) w-(--star-mobile-size) h-(--star-mobile-size)" : "",
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Star,
               {
                 size: displaySize,
@@ -2572,7 +2758,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isFull && /* @__PURE__ */ jsx13(
+            isFull && /* @__PURE__ */ jsx14(
               Star,
               {
                 size: displaySize,
@@ -2581,7 +2767,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isHalf && /* @__PURE__ */ jsxs12(
+            isHalf && /* @__PURE__ */ jsxs13(
               "svg",
               {
                 width: displaySize,
@@ -2589,7 +2775,7 @@ var Rating = ({
                 viewBox: `0 0 ${displaySize} ${displaySize}`,
                 style: { position: "absolute", left: 0, top: 0 },
                 children: [
-                  /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs12(
+                  /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs13(
                     "linearGradient",
                     {
                       id: `half-${uniqueId}-${i}`,
@@ -2598,12 +2784,12 @@ var Rating = ({
                       y1: "0",
                       y2: "0",
                       children: [
-                        /* @__PURE__ */ jsx13("stop", { offset: "50%", stopColor: color }),
-                        /* @__PURE__ */ jsx13("stop", { offset: "50%", stopColor: "transparent" })
+                        /* @__PURE__ */ jsx14("stop", { offset: "50%", stopColor: color }),
+                        /* @__PURE__ */ jsx14("stop", { offset: "50%", stopColor: "transparent" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Star,
                     {
                       size: displaySize,
@@ -2622,7 +2808,7 @@ var Rating = ({
   }
   const valueText = valueFormat === "fraction" ? `${value.toFixed(1)}/${max}` : value.toFixed(1);
   if (showValue && valuePosition === "bottom") {
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className,
@@ -2633,7 +2819,7 @@ var Rating = ({
           gap: gap * 2
         },
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "div",
             {
               style: {
@@ -2644,7 +2830,7 @@ var Rating = ({
               children: stars
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "span",
             {
               style: {
@@ -2659,7 +2845,7 @@ var Rating = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className,
@@ -2672,7 +2858,7 @@ var Rating = ({
       },
       children: [
         stars,
-        showValue && /* @__PURE__ */ jsx13(
+        showValue && /* @__PURE__ */ jsx14(
           "span",
           {
             style: {
@@ -2690,7 +2876,7 @@ var Rating = ({
 };
 
 // src/ui/divider.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var Divider = ({
   variant = "fullWidth",
   orientation = "horizontal",
@@ -2720,21 +2906,21 @@ var Divider = ({
   if (children) {
     const leftLineClasses = textAlign === "left" ? `${baseClasses} ${orientationClasses}` : `flex-1 ${baseClasses} ${orientationClasses}`;
     const rightLineClasses = textAlign === "right" ? `${baseClasses} ${orientationClasses}` : `flex-1 ${baseClasses} ${orientationClasses}`;
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       "div",
       {
         role: "presentation",
         className: `flex items-center gap-3 ${variantClasses[variant]} ${className}`,
         children: [
-          textAlign !== "left" && /* @__PURE__ */ jsx14(
+          textAlign !== "left" && /* @__PURE__ */ jsx15(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
               className: leftLineClasses
             }
           ),
-          /* @__PURE__ */ jsx14("div", { style: textStyles, className: "whitespace-nowrap", children }),
-          textAlign !== "right" && /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15("div", { style: textStyles, className: "whitespace-nowrap", children }),
+          textAlign !== "right" && /* @__PURE__ */ jsx15(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
@@ -2746,7 +2932,7 @@ var Divider = ({
     );
   }
   if (isVertical) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         role: "separator",
@@ -2756,7 +2942,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "hr",
     {
       style: { ...baseStyles, ...thicknessStyle },
@@ -2767,7 +2953,7 @@ var Divider = ({
 
 // src/ui/slider.tsx
 import { useState as useState9, useRef as useRef6, useEffect as useEffect6 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 0,
@@ -3005,7 +3191,7 @@ var Slider = ({
       const showLabelAlways = valueLabelDisplay === "on";
       const showLabelOnActiveOrHover = valueLabelDisplay === "auto";
       const thumbStyle = isVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
-      return /* @__PURE__ */ jsxs14(
+      return /* @__PURE__ */ jsxs15(
         "div",
         {
           className: `absolute ${isVertical ? "left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2"} cursor-pointer ${disabled ? "cursor-not-allowed opacity-50" : ""} group/thumb z-20`,
@@ -3013,19 +3199,19 @@ var Slider = ({
           onMouseDown: handleMouseDown(index),
           onTouchStart: handleMouseDown(index),
           children: [
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(
               "div",
               {
                 className: `absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 ${isActive ? currentSizeStyles.thumbActive : currentSizeStyles.thumb} ${currentColorStyles.thumb} ${!isActive && currentColorStyles.thumbHover} rounded-full shadow-md transition-all ${isActive ? `${currentSizeStyles.ringActive} ${currentColorStyles.thumbRing}` : `group-hover/thumb:shadow-lg ${currentSizeStyles.ringHover} ${currentColorStyles.thumbRingHover}`} ${disabled ? "pointer-events-none" : ""}`
               }
             ),
-            showLabelAlways && /* @__PURE__ */ jsxs14(
+            showLabelAlways && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: `absolute ${isVertical ? "left-6" : "-top-10"} ${isVertical ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap z-(--z-index-tooltip)`,
                 children: [
                   valueLabelFormat(val),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     "div",
                     {
                       className: `absolute ${isVertical ? "left-0 top-1/2 -translate-y-1/2 -translate-x-full" : "left-1/2 -translate-x-1/2 top-full"} w-0 h-0 ${isVertical ? "border-t-4 border-t-transparent border-b-4 border-b-transparent" : "border-l-4 border-l-transparent border-r-4 border-r-transparent"} ${isVertical ? color === "primary" ? "border-r-4 border-r-[var(--color-primary)]" : "border-r-4 border-r-purple-500" : color === "primary" ? "border-t-4 border-t-[var(--color-primary)]" : "border-t-4 border-t-purple-500"}`
@@ -3034,13 +3220,13 @@ var Slider = ({
                 ]
               }
             ),
-            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs14(
+            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: `absolute ${isVertical ? "left-6" : "-top-10"} ${isVertical ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap opacity-0 scale-90 ${isActive ? "opacity-100 scale-100" : "group-hover/thumb:opacity-100 group-hover/thumb:scale-100"} transition-all duration-300 ease-out pointer-events-none z-(--z-index-tooltip)`,
                 children: [
                   valueLabelFormat(val),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     "div",
                     {
                       className: `absolute ${isVertical ? "left-0 top-1/2 -translate-y-1/2 -translate-x-full" : "left-1/2 -translate-x-1/2 top-full"} w-0 h-0 ${isVertical ? "border-t-4 border-t-transparent border-b-4 border-b-transparent" : "border-l-4 border-l-transparent border-r-4 border-r-transparent"} ${isVertical ? color === "primary" ? "border-r-4 border-r-[var(--color-primary)]" : "border-r-4 border-r-purple-500" : color === "primary" ? "border-t-4 border-t-[var(--color-primary)]" : "border-t-4 border-t-purple-500"}`
@@ -3058,13 +3244,13 @@ var Slider = ({
   const hasMarkLabels = marksList.some((mark) => mark.label);
   const containerClasses = isVertical ? "flex flex-col items-center py-4" : `flex items-center w-full px-2 ${hasMarkLabels ? "pb-6" : ""}`;
   const railClasses = isVertical ? `${currentSizeStyles.rail} relative overflow-visible` : `w-full ${currentSizeStyles.rail} relative overflow-visible`;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: `${containerClasses} ${className}`,
       style: isVertical ? { minHeight: "200px", height: "200px" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             ref: sliderRef,
@@ -3082,13 +3268,13 @@ var Slider = ({
             "aria-orientation": orientation,
             tabIndex: disabled ? -1 : 0,
             children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "div",
                 {
                   className: `absolute ${isVertical ? "inset-x-0 h-full" : "inset-y-0 w-full"} bg-[#d1d5db] rounded-full ${disabled ? "opacity-50" : ""} z-0`
                 }
               ),
-              track !== false && /* @__PURE__ */ jsx15(
+              track !== false && /* @__PURE__ */ jsx16(
                 "div",
                 {
                   className: `absolute ${isVertical ? "inset-x-0" : "inset-y-0"} ${currentColorStyles.track} rounded-full ${disabled ? "opacity-50" : ""} z-0`,
@@ -3111,32 +3297,32 @@ var Slider = ({
                 }
                 const markColor = isInSelectedRange ? "bg-(--color-background) shadow-sm group-hover/mark:bg-(--color-background) group-hover/mark:shadow-md" : "bg-[#4b5563] group-hover/mark:bg-[#1f2937]";
                 const labelColor = isInSelectedRange ? currentColorStyles.labelSelected : currentColorStyles.labelUnselected;
-                return /* @__PURE__ */ jsxs14(
+                return /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     className: `group/mark absolute ${isVertical ? "left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2"} z-30`,
                     style: markStyle,
                     children: [
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         "div",
                         {
                           className: `absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 ${markColor} rounded-full transition-all duration-200 cursor-pointer group-hover/mark:w-2 group-hover/mark:h-2 ${!disabled ? "" : "cursor-not-allowed"}`
                         }
                       ),
-                      mark.label && /* @__PURE__ */ jsx15(
+                      mark.label && /* @__PURE__ */ jsx16(
                         "div",
                         {
                           className: `absolute ${isVertical ? "left-4 top-1/2 -translate-y-1/2" : "top-3 left-1/2 -translate-x-1/2"} text-caption font-medium ${labelColor} transition-colors duration-200 whitespace-nowrap pointer-events-none z-(--z-index-base)`,
                           children: mark.label
                         }
                       ),
-                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ jsxs14(
+                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           className: `absolute ${isVertical ? "left-6 top-1/2 -translate-y-1/2" : "-top-8 left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap opacity-0 scale-90 group-hover/mark:opacity-100 group-hover/mark:scale-100 transition-all duration-300 ease-out pointer-events-none z-(--z-index-tooltip)`,
                           children: [
                             valueLabelFormat(mark.value),
-                            /* @__PURE__ */ jsx15(
+                            /* @__PURE__ */ jsx16(
                               "div",
                               {
                                 className: `absolute ${isVertical ? "right-full top-1/2 -translate-y-1/2 border-y-4 border-y-transparent border-r-4" : "top-full left-1/2 -translate-x-1/2 border-x-4 border-x-transparent border-t-4"} ${color === "primary" ? isVertical ? "border-r-[var(--color-primary)]" : "border-t-[var(--color-primary)]" : isVertical ? "border-r-purple-500" : "border-t-purple-500"}`
@@ -3154,7 +3340,7 @@ var Slider = ({
             ]
           }
         ),
-        name && /* @__PURE__ */ jsx15(
+        name && /* @__PURE__ */ jsx16(
           "input",
           {
             type: "hidden",
@@ -3170,7 +3356,7 @@ var Slider = ({
 
 // src/ui/switch.tsx
 import { useState as useState10, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function Switch({
   checked: controlledChecked,
   onChange,
@@ -3267,7 +3453,7 @@ function Switch({
     top: "gap-2",
     bottom: "gap-2"
   };
-  const switchElement = /* @__PURE__ */ jsx16(
+  const switchElement = /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
@@ -3284,7 +3470,7 @@ function Switch({
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:opacity-90",
         checked && !disabled && "focus:ring-blue-500"
       ),
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx17(
         "span",
         {
           className: cn(
@@ -3297,9 +3483,9 @@ function Switch({
       )
     }
   );
-  const content = !label ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
+  const content = !label ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
     switchElement,
-    name && /* @__PURE__ */ jsx16(
+    name && /* @__PURE__ */ jsx17(
       "input",
       {
         type: "checkbox",
@@ -3311,7 +3497,7 @@ function Switch({
         required
       }
     )
-  ] }) : /* @__PURE__ */ jsxs15(
+  ] }) : /* @__PURE__ */ jsxs16(
     "label",
     {
       className: cn(
@@ -3322,7 +3508,7 @@ function Switch({
       ),
       children: [
         switchElement,
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "span",
           {
             className: cn(
@@ -3332,11 +3518,11 @@ function Switch({
             style: !disabled ? { color: "var(--color-muted-foreground)" } : void 0,
             children: [
               label,
-              required && /* @__PURE__ */ jsx16("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx17("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        name && /* @__PURE__ */ jsx16(
+        name && /* @__PURE__ */ jsx17(
           "input",
           {
             type: "checkbox",
@@ -3351,7 +3537,7 @@ function Switch({
       ]
     }
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className,
@@ -3365,7 +3551,7 @@ function Switch({
 
 // src/ui/dialog.tsx
 import React10, { useEffect as useEffect8 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   onClose,
@@ -3416,14 +3602,14 @@ var Dialog = ({
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: "fixed inset-0 [z-index:var(--z-index-modal)] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200",
       onClick: handleBackdropClick,
       role: "dialog",
       "aria-modal": "true",
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs17(
         "div",
         {
           className: cn(
@@ -3431,7 +3617,7 @@ var Dialog = ({
             sizes[size]
           ),
           children: [
-            showCloseButton && /* @__PURE__ */ jsx17(
+            showCloseButton && /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: onClose,
@@ -3474,14 +3660,14 @@ var Dialog = ({
                 },
                 className: "absolute right-2 top-2 p-1.5 rounded-full [z-index:var(--z-index-base)] focus:outline-none",
                 "aria-label": "Close dialog",
-                children: /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx18(
                   "svg",
                   {
                     className: "w-5 h-5",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx17(
+                    children: /* @__PURE__ */ jsx18(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3494,7 +3680,7 @@ var Dialog = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx17(DialogContext.Provider, { value: { variant }, children })
+            /* @__PURE__ */ jsx18(DialogContext.Provider, { value: { variant }, children })
           ]
         }
       )
@@ -3527,7 +3713,7 @@ var DialogHeader = React10.forwardRef(({ className, children, ...props }, ref) =
       borderColor: "var(--color-error-border)"
     }
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref,
@@ -3542,7 +3728,7 @@ var DialogHeader = React10.forwardRef(({ className, children, ...props }, ref) =
   );
 });
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DialogTitle = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx18(
   "h2",
   {
     ref,
@@ -3555,7 +3741,7 @@ var DialogTitle = React10.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DialogDescription = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx18(
   "p",
   {
     ref,
@@ -3565,9 +3751,9 @@ var DialogDescription = React10.forwardRef(({ className, children, ...props }, r
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
 DialogContent.displayName = "DialogContent";
-var DialogFooter = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DialogFooter = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx18(
   "div",
   {
     ref,
@@ -3583,7 +3769,7 @@ DialogFooter.displayName = "DialogFooter";
 
 // src/feedback/alert.tsx
 import React11 from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var Alert = React11.forwardRef(
   ({
     className,
@@ -3624,7 +3810,7 @@ var Alert = React11.forwardRef(
       error: { color: "var(--color-error-border)" }
     };
     const defaultIcons = {
-      info: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
+      info: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19(
         "path",
         {
           fillRule: "evenodd",
@@ -3632,7 +3818,7 @@ var Alert = React11.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      success: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
+      success: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19(
         "path",
         {
           fillRule: "evenodd",
@@ -3640,7 +3826,7 @@ var Alert = React11.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      warning: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
+      warning: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19(
         "path",
         {
           fillRule: "evenodd",
@@ -3648,7 +3834,7 @@ var Alert = React11.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      error: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
+      error: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19(
         "path",
         {
           fillRule: "evenodd",
@@ -3657,7 +3843,7 @@ var Alert = React11.forwardRef(
         }
       ) })
     };
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -3665,13 +3851,13 @@ var Alert = React11.forwardRef(
         className: cn("relative border rounded-lg p-4", className),
         role: "alert",
         ...props,
-        children: /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx18("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
-          /* @__PURE__ */ jsxs17("div", { className: "flex-1", children: [
-            title && /* @__PURE__ */ jsx18("h5", { className: "font-semibold mb-1", children: title }),
-            /* @__PURE__ */ jsx18("div", { className: "text-sm", children })
+        children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx19("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
+          /* @__PURE__ */ jsxs18("div", { className: "flex-1", children: [
+            title && /* @__PURE__ */ jsx19("h5", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ jsx19("div", { className: "text-sm", children })
           ] }),
-          dismissible && onDismiss && /* @__PURE__ */ jsx18(
+          dismissible && onDismiss && /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -3705,7 +3891,7 @@ var Alert = React11.forwardRef(
               },
               className: "shrink-0 rounded-lg p-1.5 inline-flex focus:outline-none",
               "aria-label": "Close",
-              children: /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx19("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -3724,7 +3910,7 @@ Alert.displayName = "Alert";
 
 // src/layout/container.tsx
 import React12 from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Container = React12.forwardRef(
   ({
     className,
@@ -3742,7 +3928,7 @@ var Container = React12.forwardRef(
       "2xl": "max-w-screen-2xl",
       full: "max-w-full"
     };
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         ref,
@@ -3763,13 +3949,13 @@ Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
 import React13 from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function SectionLayout({
   children,
   hasStickyPreview = false
 }) {
   if (!hasStickyPreview) {
-    return /* @__PURE__ */ jsx20(Fragment3, { children });
+    return /* @__PURE__ */ jsx21(Fragment3, { children });
   }
   const childArray = React13.Children.toArray(children);
   if (childArray.length === 0) {
@@ -3777,16 +3963,16 @@ function SectionLayout({
   }
   const stickyPreview = childArray[0];
   const scrollableContent = childArray.slice(1);
-  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
     stickyPreview,
-    scrollableContent.length > 0 && /* @__PURE__ */ jsx20("div", { className: "space-y-8", children: scrollableContent })
+    scrollableContent.length > 0 && /* @__PURE__ */ jsx21("div", { className: "space-y-8", children: scrollableContent })
   ] });
 }
 
 // src/layout/nav.tsx
 import { Menu, X as X2, ChevronDown as ChevronDown2 } from "lucide-react";
 import React14, { useState as useState11, useEffect as useEffect9, useRef as useRef7 } from "react";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var Nav = React14.forwardRef(
   ({
     className,
@@ -3816,7 +4002,7 @@ var Nav = React14.forwardRef(
     const mobileMenuRef = useRef7(null);
     const [navElement, setNavElement] = useState11(null);
     const [isNavVisible, setIsNavVisible] = useState11(true);
-    const [lastScrollY, setLastScrollY] = useState11(0);
+    const lastScrollYRef = useRef7(0);
     useEffect9(() => {
       if (!autoHideOnScroll || position === "static") {
         setIsNavVisible(true);
@@ -3826,16 +4012,19 @@ var Nav = React14.forwardRef(
         const currentScrollY = window.scrollY;
         if (currentScrollY < 10) {
           setIsNavVisible(true);
-        } else if (currentScrollY > lastScrollY) {
+          lastScrollYRef.current = currentScrollY;
+          return;
+        }
+        if (currentScrollY > lastScrollYRef.current) {
           setIsNavVisible(false);
-        } else {
+        } else if (currentScrollY < lastScrollYRef.current) {
           setIsNavVisible(true);
         }
-        setLastScrollY(currentScrollY);
+        lastScrollYRef.current = currentScrollY;
       };
       window.addEventListener("scroll", handleScroll, { passive: true });
       return () => window.removeEventListener("scroll", handleScroll);
-    }, [lastScrollY, autoHideOnScroll, position]);
+    }, [autoHideOnScroll, position]);
     useEffect9(() => {
       function handleClickOutside(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -3937,7 +4126,7 @@ var Nav = React14.forwardRef(
     };
     const renderNavItem = (item, isMobile = false) => {
       if (item.type === "divider") {
-        return /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -3949,7 +4138,7 @@ var Nav = React14.forwardRef(
         );
       }
       if (item.type === "custom" && item.render) {
-        return /* @__PURE__ */ jsx21("div", { children: item.render() }, item.id);
+        return /* @__PURE__ */ jsx22("div", { children: item.render() }, item.id);
       }
       const isActive = activeId === item.id;
       const isDropdownOpen = openDropdownId === item.id;
@@ -3963,11 +4152,11 @@ var Nav = React14.forwardRef(
         orientation === "vertical" && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
-      const content = /* @__PURE__ */ jsxs19(Fragment4, { children: [
-        item.icon && /* @__PURE__ */ jsx21("span", { className: "flex-shrink-0", children: item.icon }),
-        /* @__PURE__ */ jsx21("span", { children: item.label }),
-        item.badge && /* @__PURE__ */ jsx21("span", { className: "ml-auto inline-flex items-center rounded-full bg-(--color-primary) px-2 py-0.5 text-caption font-medium text-white", children: item.badge }),
-        hasChildren && /* @__PURE__ */ jsx21(
+      const content = /* @__PURE__ */ jsxs20(Fragment4, { children: [
+        item.icon && /* @__PURE__ */ jsx22("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsx22("span", { children: item.label }),
+        item.badge && /* @__PURE__ */ jsx22("span", { className: "ml-auto inline-flex items-center rounded-full bg-(--color-primary) px-2 py-0.5 text-caption font-medium text-white", children: item.badge }),
+        hasChildren && /* @__PURE__ */ jsx22(
           ChevronDown2,
           {
             className: cn(
@@ -3978,8 +4167,8 @@ var Nav = React14.forwardRef(
         )
       ] });
       if (hasChildren) {
-        return /* @__PURE__ */ jsxs19("div", { className: "relative", ref: dropdownRef, children: [
-          /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsxs20("div", { className: "relative", ref: dropdownRef, children: [
+          /* @__PURE__ */ jsx22(
             "button",
             {
               onClick: () => handleItemClick(item),
@@ -3988,14 +4177,14 @@ var Nav = React14.forwardRef(
               children: content
             }
           ),
-          isDropdownOpen && /* @__PURE__ */ jsx21(
+          isDropdownOpen && /* @__PURE__ */ jsx22(
             "div",
             {
               className: cn(
                 "absolute left-0 mt-[var(--nav-gap)] min-w-[200px] bg-(--color-background) border border-(--color-border) rounded-[var(--nav-border-radius)] shadow-xl [z-index:var(--z-index-dropdown)] animate-in fade-in-0 zoom-in-95 duration-200",
                 orientation === "vertical" && "left-full top-0 ml-2 mt-0"
               ),
-              children: /* @__PURE__ */ jsx21("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs19(
+              children: /* @__PURE__ */ jsx22("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs20(
                 "button",
                 {
                   onClick: () => handleItemClick(child),
@@ -4006,9 +4195,9 @@ var Nav = React14.forwardRef(
                     activeId === child.id && "bg-(--color-primary)/10 text-(--color-primary) [font-weight:var(--font-semibold)]"
                   ),
                   children: [
-                    child.icon && /* @__PURE__ */ jsx21("span", { className: "flex-shrink-0", children: child.icon }),
-                    /* @__PURE__ */ jsx21("span", { children: child.label }),
-                    child.badge && /* @__PURE__ */ jsx21("span", { className: "ml-auto px-2 py-0.5 [font-size:var(--text-xs)] font-semibold bg-(--color-primary) text-white rounded-[var(--radius-full)]", children: child.badge })
+                    child.icon && /* @__PURE__ */ jsx22("span", { className: "flex-shrink-0", children: child.icon }),
+                    /* @__PURE__ */ jsx22("span", { children: child.label }),
+                    child.badge && /* @__PURE__ */ jsx22("span", { className: "ml-auto px-2 py-0.5 [font-size:var(--text-xs)] font-semibold bg-(--color-primary) text-white rounded-[var(--radius-full)]", children: child.badge })
                   ]
                 },
                 child.id
@@ -4018,7 +4207,7 @@ var Nav = React14.forwardRef(
         ] }, item.id);
       }
       if (item.href) {
-        return /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx22(
           "a",
           {
             href: item.href,
@@ -4030,7 +4219,7 @@ var Nav = React14.forwardRef(
           item.id
         );
       }
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         "button",
         {
           onClick: () => handleItemClick(item),
@@ -4041,7 +4230,7 @@ var Nav = React14.forwardRef(
         item.id
       );
     };
-    const desktopNav = /* @__PURE__ */ jsx21(
+    const desktopNav = /* @__PURE__ */ jsx22(
       "div",
       {
         className: cn(
@@ -4063,13 +4252,12 @@ var Nav = React14.forwardRef(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "nav",
       {
         ref: setRefs,
         className: cn(
           baseStyles,
-          "relative",
           // Border styles
           !borderless && "border border-(--color-border)",
           borderless && "border-0",
@@ -4077,11 +4265,11 @@ var Nav = React14.forwardRef(
         ),
         ...htmlProps,
         children: [
-          /* @__PURE__ */ jsxs19("div", { className: containerStyles, children: [
-            logo && /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: logo }),
+          /* @__PURE__ */ jsxs20("div", { className: containerStyles, children: [
+            logo && /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: logo }),
             desktopNav,
-            actions && /* @__PURE__ */ jsx21("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
-            /* @__PURE__ */ jsx21(
+            actions && /* @__PURE__ */ jsx22("div", { className: "shrink-0 flex items-center gap-2 ml-auto", children: actions }),
+            /* @__PURE__ */ jsx22(
               "button",
               {
                 onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
@@ -4090,11 +4278,11 @@ var Nav = React14.forwardRef(
                   breakpointClasses[mobileBreakpoint]
                 ),
                 "aria-label": "Toggle menu",
-                children: isMobileMenuOpen ? /* @__PURE__ */ jsx21(X2, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx21(Menu, { className: "w-6 h-6" })
+                children: isMobileMenuOpen ? /* @__PURE__ */ jsx22(X2, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx22(Menu, { className: "w-6 h-6" })
               }
             )
           ] }),
-          mobileMenuDirection === "top" && /* @__PURE__ */ jsx21(
+          mobileMenuDirection === "top" && /* @__PURE__ */ jsx22(
             "div",
             {
               ref: mobileMenuRef,
@@ -4103,11 +4291,11 @@ var Nav = React14.forwardRef(
                 breakpointClasses[mobileBreakpoint],
                 isMobileMenuOpen ? "max-h-96 opacity-100 border-(--color-border)" : "max-h-0 opacity-0 border-transparent"
               ),
-              children: /* @__PURE__ */ jsx21("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
+              children: /* @__PURE__ */ jsx22("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
             }
           ),
-          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs19(Fragment4, { children: [
-            isMobileMenuOpen && /* @__PURE__ */ jsx21(
+          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+            isMobileMenuOpen && /* @__PURE__ */ jsx22(
               "div",
               {
                 className: cn(
@@ -4120,7 +4308,7 @@ var Nav = React14.forwardRef(
                 onClick: () => setIsMobileMenuOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "div",
               {
                 ref: mobileMenuRef,
@@ -4140,7 +4328,7 @@ var Nav = React14.forwardRef(
                 style: {
                   transitionDuration: "var(--transition-drawer-duration, 500ms)"
                 },
-                children: /* @__PURE__ */ jsx21("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
+                children: /* @__PURE__ */ jsx22("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
               }
             )
           ] })
@@ -4154,7 +4342,7 @@ Nav.displayName = "Nav";
 // src/layout/drawer.tsx
 import { Menu as Menu2, X as X3 } from "lucide-react";
 import { useState as useState12, useEffect as useEffect10 } from "react";
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function Drawer({
   title,
   subtitle,
@@ -4199,8 +4387,8 @@ function Drawer({
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY, autoHideOnScroll]);
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsx23(
       "div",
       {
         className: `lg:hidden fixed top-0 left-0 right-0 px-4 py-3 z-(--z-index-drawer-header) transition-transform duration-500 ease-in-out ${blur ? "backdrop-blur-md backdrop-saturate-150" : ""} ${borderless ? "border-b-0" : ""} ${isHeaderVisible ? "translate-y-0" : "-translate-y-full"}`,
@@ -4209,13 +4397,13 @@ function Drawer({
           opacity: blur ? 0.85 : 1,
           borderBottom: !borderless && !blur ? "1px solid var(--color-border)" : "none"
         },
-        children: /* @__PURE__ */ jsxs20(
+        children: /* @__PURE__ */ jsxs21(
           "div",
           {
             className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
             children: [
-              /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                homeUrl && /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+                homeUrl && /* @__PURE__ */ jsx23(
                   "a",
                   {
                     href: homeUrl,
@@ -4224,14 +4412,14 @@ function Drawer({
                     onMouseOver: (e) => e.currentTarget.style.background = "var(--color-muted)",
                     onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                     "aria-label": "Go to home",
-                    children: /* @__PURE__ */ jsx22(
+                    children: /* @__PURE__ */ jsx23(
                       "svg",
                       {
                         className: "w-5 h-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ jsx22(
+                        children: /* @__PURE__ */ jsx23(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -4244,7 +4432,7 @@ function Drawer({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(!mobileMenuOpen),
@@ -4253,13 +4441,13 @@ function Drawer({
                     onMouseOver: (e) => e.currentTarget.style.background = "var(--color-muted)",
                     onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                     "aria-label": "Toggle menu",
-                    children: mobileMenuOpen ? /* @__PURE__ */ jsx22(X3, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx22(Menu2, { className: "w-6 h-6" })
+                    children: mobileMenuOpen ? /* @__PURE__ */ jsx23(X3, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx23(Menu2, { className: "w-6 h-6" })
                   }
                 )
               ] }),
-              headerActions && /* @__PURE__ */ jsx22("div", { className: "flex items-center", children: headerActions }),
-              /* @__PURE__ */ jsxs20("div", { children: [
-                /* @__PURE__ */ jsx22(
+              headerActions && /* @__PURE__ */ jsx23("div", { className: "flex items-center", children: headerActions }),
+              /* @__PURE__ */ jsxs21("div", { children: [
+                /* @__PURE__ */ jsx23(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -4269,7 +4457,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ jsx22(
+                subtitle && /* @__PURE__ */ jsx23(
                   "p",
                   {
                     className: "text-caption",
@@ -4285,7 +4473,7 @@ function Drawer({
         )
       }
     ),
-    mobileMenuOpen && /* @__PURE__ */ jsx22(
+    mobileMenuOpen && /* @__PURE__ */ jsx23(
       "div",
       {
         className: "fixed inset-0 lg:hidden transition-opacity ease-in-out",
@@ -4297,7 +4485,7 @@ function Drawer({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       "aside",
       {
         className: `
@@ -4315,7 +4503,7 @@ function Drawer({
           ...mobileMenuOpen && typeof window !== "undefined" && window.innerWidth < 1024 ? { zIndex: 9999 } : {}
         },
         children: [
-          /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsxs21(
             "div",
             {
               className: "hidden lg:block px-6 py-5",
@@ -4324,7 +4512,7 @@ function Drawer({
                 background: "var(--color-muted)"
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -4334,7 +4522,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ jsx22(
+                subtitle && /* @__PURE__ */ jsx23(
                   "p",
                   {
                     className: "mt-0.5 text-caption",
@@ -4347,14 +4535,14 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsxs21(
             "div",
             {
               className: "lg:hidden p-4 flex items-center justify-between",
               style: { borderBottom: "1px solid var(--color-border)" },
               children: [
-                /* @__PURE__ */ jsxs20("div", { children: [
-                  /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsxs21("div", { children: [
+                  /* @__PURE__ */ jsx23(
                     "h1",
                     {
                       className: "font-bold text-h5",
@@ -4364,7 +4552,7 @@ function Drawer({
                       children: title
                     }
                   ),
-                  subtitle && /* @__PURE__ */ jsx22(
+                  subtitle && /* @__PURE__ */ jsx23(
                     "p",
                     {
                       className: "mt-1 text-caption",
@@ -4375,7 +4563,7 @@ function Drawer({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(false),
@@ -4384,20 +4572,20 @@ function Drawer({
                     onMouseOver: (e) => e.currentTarget.style.background = "var(--color-muted)",
                     onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                     "aria-label": "Close menu",
-                    children: /* @__PURE__ */ jsx22(X3, { className: "w-5 h-5" })
+                    children: /* @__PURE__ */ jsx23(X3, { className: "w-5 h-5" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx22("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsx23("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
                 paddingTop: sectionIndex > 0 ? "var(--drawer-section-padding-y)" : "0"
               },
               children: [
-                section.title && /* @__PURE__ */ jsx22(
+                section.title && /* @__PURE__ */ jsx23(
                   "h3",
                   {
                     className: "font-semibold uppercase tracking-wide text-caption",
@@ -4409,7 +4597,7 @@ function Drawer({
                     children: section.title
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "ul",
                   {
                     style: {
@@ -4417,7 +4605,7 @@ function Drawer({
                       flexDirection: "column",
                       gap: "var(--drawer-item-spacing)"
                     },
-                    children: section.items.map((item) => /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsxs20(
+                    children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs21(
                       "button",
                       {
                         onClick: () => handleItemClick(item.id),
@@ -4445,8 +4633,8 @@ function Drawer({
                           boxShadow: activeItem === item.id ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
                         },
                         children: [
-                          item.icon && /* @__PURE__ */ jsx22("span", { className: "shrink-0 opacity-75", children: item.icon }),
-                          /* @__PURE__ */ jsx22("span", { children: item.label })
+                          item.icon && /* @__PURE__ */ jsx23("span", { className: "shrink-0 opacity-75", children: item.icon }),
+                          /* @__PURE__ */ jsx23("span", { children: item.label })
                         ]
                       }
                     ) }, item.id))
@@ -4456,7 +4644,7 @@ function Drawer({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ jsx22(
+          footer && /* @__PURE__ */ jsx23(
             "div",
             {
               className: "p-4 mt-auto",
@@ -4473,7 +4661,7 @@ function Drawer({
 // src/layout/sidebar-nav.tsx
 import { Menu as Menu3, X as X4 } from "lucide-react";
 import { useState as useState13 } from "react";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function SidebarNav({
   title,
   subtitle,
@@ -4491,29 +4679,29 @@ function SidebarNav({
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-    /* @__PURE__ */ jsx23("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    /* @__PURE__ */ jsx24("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs22(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             "button",
             {
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
               className: "p-2 rounded-lg hover:bg-(--color-muted) transition-colors",
               "aria-label": "Toggle menu",
-              children: mobileMenuOpen ? /* @__PURE__ */ jsx23(X4, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ jsx23(Menu3, { className: "w-6 h-6 text-(--color-muted-foreground)" })
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx24(X4, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ jsx24(Menu3, { className: "w-6 h-6 text-(--color-muted-foreground)" })
             }
           ),
-          /* @__PURE__ */ jsxs21("div", { children: [
-            /* @__PURE__ */ jsx23("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
-            subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
+          /* @__PURE__ */ jsxs22("div", { children: [
+            /* @__PURE__ */ jsx24("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
+            subtitle && /* @__PURE__ */ jsx24("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
           ] })
         ]
       }
     ) }),
-    mobileMenuOpen && /* @__PURE__ */ jsx23(
+    mobileMenuOpen && /* @__PURE__ */ jsx24(
       "div",
       {
         className: "fixed inset-0 bg-black/50 lg:hidden",
@@ -4521,7 +4709,7 @@ function SidebarNav({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(
       "aside",
       {
         className: `
@@ -4532,18 +4720,18 @@ function SidebarNav({
           ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
         `,
         children: [
-          /* @__PURE__ */ jsxs21("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
-            /* @__PURE__ */ jsx23("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
-            subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
+          /* @__PURE__ */ jsxs22("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
+            /* @__PURE__ */ jsx24("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
+            subtitle && /* @__PURE__ */ jsx24("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx23("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx23("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsx24("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx24("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs22(
             "div",
             {
               className: sectionIndex > 0 ? "mt-6" : "",
               children: [
-                section.title && /* @__PURE__ */ jsx23("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
-                /* @__PURE__ */ jsx23("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs21(
+                section.title && /* @__PURE__ */ jsx24("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
+                /* @__PURE__ */ jsx24("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx24("li", { children: /* @__PURE__ */ jsxs22(
                   "button",
                   {
                     onClick: () => handleItemClick(item.id),
@@ -4552,8 +4740,8 @@ function SidebarNav({
                         ${activeItem === item.id ? "bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] text-(--color-primary)" : "text-(--color-muted-foreground) hover:bg-(--color-muted)"}
                       `,
                     children: [
-                      item.icon && /* @__PURE__ */ jsx23("span", { className: "shrink-0", children: item.icon }),
-                      /* @__PURE__ */ jsx23("span", { children: item.label })
+                      item.icon && /* @__PURE__ */ jsx24("span", { className: "shrink-0", children: item.icon }),
+                      /* @__PURE__ */ jsx24("span", { children: item.label })
                     ]
                   }
                 ) }, item.id)) })
@@ -4561,7 +4749,7 @@ function SidebarNav({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ jsx23("div", { className: "p-4 border-t border-(--color-border) mt-auto", children: footer })
+          footer && /* @__PURE__ */ jsx24("div", { className: "p-4 border-t border-(--color-border) mt-auto", children: footer })
         ]
       }
     )
@@ -4570,10 +4758,10 @@ function SidebarNav({
 
 // src/shared/empty-state.tsx
 import React17 from "react";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var EmptyState = React17.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         ref,
@@ -4583,10 +4771,10 @@ var EmptyState = React17.forwardRef(
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx24("div", { className: "mb-4 text-(--color-placeholder)", children: icon }),
-          /* @__PURE__ */ jsx24("h3", { className: "text-h4 font-semibold text-(--color-foreground) mb-2", children: title }),
-          description && /* @__PURE__ */ jsx24("p", { className: "text-small text-(--color-muted-foreground) mb-6 max-w-sm", children: description }),
-          action && /* @__PURE__ */ jsx24("div", { children: action })
+          icon && /* @__PURE__ */ jsx25("div", { className: "mb-4 text-(--color-placeholder)", children: icon }),
+          /* @__PURE__ */ jsx25("h3", { className: "text-h4 font-semibold text-(--color-foreground) mb-2", children: title }),
+          description && /* @__PURE__ */ jsx25("p", { className: "text-small text-(--color-muted-foreground) mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ jsx25("div", { children: action })
         ]
       }
     );
@@ -4834,7 +5022,7 @@ var themes2 = {
 var themes_default = themes2;
 
 // src/contexts/ThemeProvider.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ThemeContext = createContext3(void 0);
 var themeRegistry = themes_default;
 var getInitialTheme = (defaultTheme = "dark") => {
@@ -4963,7 +5151,7 @@ function ThemeProvider({
       applyTheme(theme);
     }
   }, [currentTheme, customTheme, applyTheme]);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     ThemeContext.Provider,
     {
       value: {
@@ -5016,6 +5204,7 @@ export {
   FormControlLabel,
   FormHelperText,
   Input,
+  NativeSelect,
   Nav,
   RadioGroup,
   Rating,