@yomologic/react-ui 0.5.4 → 0.5.6

package/dist/index.js

@@ -61,6 +61,7 @@ __export(index_exports, {
   FormControlLabel: () => FormControlLabel,
   FormHelperText: () => FormHelperText,
   Input: () => Input,
+  NativeSelect: () => NativeSelect,
   Nav: () => Nav,
   RadioGroup: () => RadioGroup,
   Rating: () => Rating,
@@ -2152,6 +2153,9 @@ function Select({
   const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   const dropdownRef = (0, import_react11.useRef)(null);
   const [validationError, _setValidationError] = (0, import_react11.useState)();
+  const [focusedIndex, setFocusedIndex] = (0, import_react11.useState)(-1);
+  const [searchString, setSearchString] = (0, import_react11.useState)("");
+  const searchTimeoutRef = (0, import_react11.useRef)();
   let value;
   let displayError;
   if (form && name) {
@@ -2236,9 +2240,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__ */ (0, import_jsx_runtime10.jsxs)(
@@ -2258,6 +2321,15 @@ function Select({
             ]
           }
         ),
+        name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            type: "hidden",
+            name,
+            value: value ?? "",
+            required
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: dropdownRef, className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "button",
@@ -2329,16 +2401,17 @@ function Select({
                       children: placeholder
                     }
                   ) }, "__placeholder__"),
-                  options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "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",
@@ -2363,9 +2436,123 @@ function Select({
   );
 }
 
+// src/ui/native-select.tsx
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: `w-full ${className}`,
+      style: { marginBottom: "var(--form-control-spacing)" },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "label",
+          {
+            className: "block text-small font-semibold mb-1",
+            style: { color: "var(--color-muted-foreground)" },
+            children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "p",
+          {
+            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            children: displayError || helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/ui/spinner.tsx
 var import_react12 = __toESM(require("react"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Spinner = import_react12.default.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
@@ -2379,7 +2566,7 @@ var Spinner = import_react12.default.forwardRef(
       secondary: "text-(--color-muted-foreground)",
       white: "text-white"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         ref,
@@ -2389,7 +2576,7 @@ var Spinner = import_react12.default.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "svg",
             {
               className: cn("animate-spin", sizes[size], colors[color]),
@@ -2397,7 +2584,7 @@ var Spinner = import_react12.default.forwardRef(
               fill: "none",
               viewBox: "0 0 24 24",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "circle",
                   {
                     className: "opacity-25",
@@ -2408,7 +2595,7 @@ var Spinner = import_react12.default.forwardRef(
                     strokeWidth: "4"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "path",
                   {
                     className: "opacity-75",
@@ -2419,7 +2606,7 @@ var Spinner = import_react12.default.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-small text-(--color-muted-foreground)", children: label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-small text-(--color-muted-foreground)", children: label })
         ]
       }
     );
@@ -2430,7 +2617,7 @@ Spinner.displayName = "Spinner";
 // src/ui/code-snippet.tsx
 var import_prism_react_renderer = require("prism-react-renderer");
 var import_react13 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function CodeSnippet({
   code,
   language = "tsx",
@@ -2453,9 +2640,9 @@ function CodeSnippet({
       console.error("Failed to copy:", err);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative group w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative group w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           onClick: handleCopy,
@@ -2465,14 +2652,14 @@ function CodeSnippet({
           "aria-label": "Copy code",
           children: copied ? (
             // Check icon
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "svg",
               {
                 className: "w-4 h-4 text-green-400",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2485,14 +2672,14 @@ function CodeSnippet({
             )
           ) : (
             // Copy icon
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "svg",
               {
                 className: "w-4 h-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2506,26 +2693,26 @@ function CodeSnippet({
           )
         }
       ),
-      showTooltip && !copied && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime13.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
       ] }),
-      copied && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime13.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           import_prism_react_renderer.Highlight,
           {
             theme: import_prism_react_renderer.themes.vsDark,
             code,
             language,
-            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "pre",
               {
                 style: {
@@ -2537,7 +2724,7 @@ function CodeSnippet({
                   whiteSpace: wrap ? "pre-wrap" : "pre",
                   wordBreak: wrap ? "break-word" : "normal"
                 },
-                children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "span",
                   {
                     ...getTokenProps({ token })
@@ -2556,7 +2743,7 @@ function CodeSnippet({
 // src/ui/rating.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_react14 = __toESM(require("react"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Rating = ({
   value,
   max = 5,
@@ -2598,7 +2785,7 @@ var Rating = ({
     const isHalf = displayValue >= i - 0.5 && displayValue < i;
     const isEmpty = displayValue < i - 0.5;
     stars.push(
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "span",
         {
           onClick: () => handleStarClick(i),
@@ -2631,7 +2818,7 @@ var Rating = ({
           },
           className: responsive ? "sm:w-(--star-size) sm:h-(--star-size) w-(--star-mobile-size) h-(--star-mobile-size)" : "",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               import_lucide_react2.Star,
               {
                 size: displaySize,
@@ -2640,7 +2827,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isFull && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            isFull && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               import_lucide_react2.Star,
               {
                 size: displaySize,
@@ -2649,7 +2836,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isHalf && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            isHalf && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "svg",
               {
                 width: displaySize,
@@ -2657,7 +2844,7 @@ var Rating = ({
                 viewBox: `0 0 ${displaySize} ${displaySize}`,
                 style: { position: "absolute", left: 0, top: 0 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                     "linearGradient",
                     {
                       id: `half-${uniqueId}-${i}`,
@@ -2666,12 +2853,12 @@ var Rating = ({
                       y1: "0",
                       y2: "0",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("stop", { offset: "50%", stopColor: color }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("stop", { offset: "50%", stopColor: "transparent" })
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("stop", { offset: "50%", stopColor: color }),
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("stop", { offset: "50%", stopColor: "transparent" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     import_lucide_react2.Star,
                     {
                       size: displaySize,
@@ -2690,7 +2877,7 @@ var Rating = ({
   }
   const valueText = valueFormat === "fraction" ? `${value.toFixed(1)}/${max}` : value.toFixed(1);
   if (showValue && valuePosition === "bottom") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className,
@@ -2701,7 +2888,7 @@ var Rating = ({
           gap: gap * 2
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               style: {
@@ -2712,7 +2899,7 @@ var Rating = ({
               children: stars
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               style: {
@@ -2727,7 +2914,7 @@ var Rating = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className,
@@ -2740,7 +2927,7 @@ var Rating = ({
       },
       children: [
         stars,
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "span",
           {
             style: {
@@ -2758,7 +2945,7 @@ var Rating = ({
 };
 
 // src/ui/divider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Divider = ({
   variant = "fullWidth",
   orientation = "horizontal",
@@ -2788,21 +2975,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__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         role: "presentation",
         className: `flex items-center gap-3 ${variantClasses[variant]} ${className}`,
         children: [
-          textAlign !== "left" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          textAlign !== "left" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
               className: leftLineClasses
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: textStyles, className: "whitespace-nowrap", children }),
-          textAlign !== "right" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: textStyles, className: "whitespace-nowrap", children }),
+          textAlign !== "right" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
@@ -2814,7 +3001,7 @@ var Divider = ({
     );
   }
   if (isVertical) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         role: "separator",
@@ -2824,7 +3011,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "hr",
     {
       style: { ...baseStyles, ...thicknessStyle },
@@ -2835,7 +3022,7 @@ var Divider = ({
 
 // src/ui/slider.tsx
 var import_react15 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Slider = ({
   value: controlledValue,
   defaultValue = 0,
@@ -3073,7 +3260,7 @@ var Slider = ({
       const showLabelAlways = valueLabelDisplay === "on";
       const showLabelOnActiveOrHover = valueLabelDisplay === "auto";
       const thumbStyle = isVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "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`,
@@ -3081,19 +3268,19 @@ var Slider = ({
           onMouseDown: handleMouseDown(index),
           onTouchStart: handleMouseDown(index),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "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__ */ (0, import_jsx_runtime15.jsxs)(
+            showLabelAlways && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "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__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "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"}`
@@ -3102,13 +3289,13 @@ var Slider = ({
                 ]
               }
             ),
-            showLabelOnActiveOrHover && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            showLabelOnActiveOrHover && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "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__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "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"}`
@@ -3126,13 +3313,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__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: `${containerClasses} ${className}`,
       style: isVertical ? { minHeight: "200px", height: "200px" } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             ref: sliderRef,
@@ -3150,13 +3337,13 @@ var Slider = ({
             "aria-orientation": orientation,
             tabIndex: disabled ? -1 : 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "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__ */ (0, import_jsx_runtime15.jsx)(
+              track !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   className: `absolute ${isVertical ? "inset-x-0" : "inset-y-0"} ${currentColorStyles.track} rounded-full ${disabled ? "opacity-50" : ""} z-0`,
@@ -3179,32 +3366,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__ */ (0, import_jsx_runtime15.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                   "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__ */ (0, import_jsx_runtime15.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "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__ */ (0, import_jsx_runtime15.jsx)(
+                      mark.label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "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__ */ (0, import_jsx_runtime15.jsxs)(
+                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                         "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__ */ (0, import_jsx_runtime15.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               "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"}`
@@ -3222,7 +3409,7 @@ var Slider = ({
             ]
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             type: "hidden",
@@ -3238,7 +3425,7 @@ var Slider = ({
 
 // src/ui/switch.tsx
 var import_react16 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Switch({
   checked: controlledChecked,
   onChange,
@@ -3335,7 +3522,7 @@ function Switch({
     top: "gap-2",
     bottom: "gap-2"
   };
-  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -3352,7 +3539,7 @@ function Switch({
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:opacity-90",
         checked && !disabled && "focus:ring-blue-500"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "span",
         {
           className: cn(
@@ -3365,9 +3552,9 @@ function Switch({
       )
     }
   );
-  const content = !label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+  const content = !label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     switchElement,
-    name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    name && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "input",
       {
         type: "checkbox",
@@ -3379,7 +3566,7 @@ function Switch({
         required
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "label",
     {
       className: cn(
@@ -3390,7 +3577,7 @@ function Switch({
       ),
       children: [
         switchElement,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "span",
           {
             className: cn(
@@ -3400,11 +3587,11 @@ function Switch({
             style: !disabled ? { color: "var(--color-muted-foreground)" } : void 0,
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "checkbox",
@@ -3419,7 +3606,7 @@ function Switch({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       className,
@@ -3433,7 +3620,7 @@ function Switch({
 
 // src/ui/dialog.tsx
 var import_react17 = __toESM(require("react"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Dialog = ({
   open,
   onClose,
@@ -3484,14 +3671,14 @@ var Dialog = ({
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "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__ */ (0, import_jsx_runtime17.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "div",
         {
           className: cn(
@@ -3499,7 +3686,7 @@ var Dialog = ({
             sizes[size]
           ),
           children: [
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -3542,14 +3729,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__ */ (0, import_jsx_runtime17.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "svg",
                   {
                     className: "w-5 h-5",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3562,7 +3749,7 @@ var Dialog = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogContext.Provider, { value: { variant }, children })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogContext.Provider, { value: { variant }, children })
           ]
         }
       )
@@ -3595,7 +3782,7 @@ var DialogHeader = import_react17.default.forwardRef(({ className, children, ...
       borderColor: "var(--color-error-border)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ref,
@@ -3610,7 +3797,7 @@ var DialogHeader = import_react17.default.forwardRef(({ className, children, ...
   );
 });
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DialogTitle = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "h2",
   {
     ref,
@@ -3623,7 +3810,7 @@ var DialogTitle = import_react17.default.forwardRef(({ className, children, ...p
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DialogDescription = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "p",
   {
     ref,
@@ -3633,9 +3820,9 @@ var DialogDescription = import_react17.default.forwardRef(({ className, children
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogContent = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
+var DialogContent = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
 DialogContent.displayName = "DialogContent";
-var DialogFooter = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DialogFooter = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     ref,
@@ -3651,7 +3838,7 @@ DialogFooter.displayName = "DialogFooter";
 
 // src/feedback/alert.tsx
 var import_react18 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Alert = import_react18.default.forwardRef(
   ({
     className,
@@ -3692,7 +3879,7 @@ var Alert = import_react18.default.forwardRef(
       error: { color: "var(--color-error-border)" }
     };
     const defaultIcons = {
-      info: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      info: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3700,7 +3887,7 @@ var Alert = import_react18.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      success: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3708,7 +3895,7 @@ var Alert = import_react18.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      warning: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      warning: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3716,7 +3903,7 @@ var Alert = import_react18.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      error: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      error: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3725,7 +3912,7 @@ var Alert = import_react18.default.forwardRef(
         }
       ) })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -3733,13 +3920,13 @@ var Alert = import_react18.default.forwardRef(
         className: cn("relative border rounded-lg p-4", className),
         role: "alert",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h5", { className: "font-semibold mb-1", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h5", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-sm", children })
           ] }),
-          dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               type: "button",
@@ -3773,7 +3960,7 @@ var Alert = import_react18.default.forwardRef(
               },
               className: "shrink-0 rounded-lg p-1.5 inline-flex focus:outline-none",
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -3792,7 +3979,7 @@ Alert.displayName = "Alert";
 
 // src/layout/container.tsx
 var import_react19 = __toESM(require("react"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Container = import_react19.default.forwardRef(
   ({
     className,
@@ -3810,7 +3997,7 @@ var Container = import_react19.default.forwardRef(
       "2xl": "max-w-screen-2xl",
       full: "max-w-full"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         ref,
@@ -3831,13 +4018,13 @@ Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
 var import_react20 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function SectionLayout({
   children,
   hasStickyPreview = false
 }) {
   if (!hasStickyPreview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
   }
   const childArray = import_react20.default.Children.toArray(children);
   if (childArray.length === 0) {
@@ -3845,16 +4032,16 @@ function SectionLayout({
   }
   const stickyPreview = childArray[0];
   const scrollableContent = childArray.slice(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     stickyPreview,
-    scrollableContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-8", children: scrollableContent })
+    scrollableContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-8", children: scrollableContent })
   ] });
 }
 
 // src/layout/nav.tsx
 var import_lucide_react3 = require("lucide-react");
 var import_react21 = __toESM(require("react"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Nav = import_react21.default.forwardRef(
   ({
     className,
@@ -3884,7 +4071,7 @@ var Nav = import_react21.default.forwardRef(
     const mobileMenuRef = (0, import_react21.useRef)(null);
     const [navElement, setNavElement] = (0, import_react21.useState)(null);
     const [isNavVisible, setIsNavVisible] = (0, import_react21.useState)(true);
-    const [lastScrollY, setLastScrollY] = (0, import_react21.useState)(0);
+    const lastScrollYRef = (0, import_react21.useRef)(0);
     (0, import_react21.useEffect)(() => {
       if (!autoHideOnScroll || position === "static") {
         setIsNavVisible(true);
@@ -3894,16 +4081,19 @@ var Nav = import_react21.default.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]);
     (0, import_react21.useEffect)(() => {
       function handleClickOutside(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -4005,7 +4195,7 @@ var Nav = import_react21.default.forwardRef(
     };
     const renderNavItem = (item, isMobile = false) => {
       if (item.type === "divider") {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: cn(
@@ -4017,7 +4207,7 @@ var Nav = import_react21.default.forwardRef(
         );
       }
       if (item.type === "custom" && item.render) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: item.render() }, item.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: item.render() }, item.id);
       }
       const isActive = activeId === item.id;
       const isDropdownOpen = openDropdownId === item.id;
@@ -4031,11 +4221,11 @@ var Nav = import_react21.default.forwardRef(
         orientation === "vertical" && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
-      const content = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.label }),
-        item.badge && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
+      const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        item.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label }),
+        item.badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime22.jsx)(
           import_lucide_react3.ChevronDown,
           {
             className: cn(
@@ -4046,8 +4236,8 @@ var Nav = import_react21.default.forwardRef(
         )
       ] });
       if (hasChildren) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               onClick: () => handleItemClick(item),
@@ -4056,14 +4246,14 @@ var Nav = import_react21.default.forwardRef(
               children: content
             }
           ),
-          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "button",
                 {
                   onClick: () => handleItemClick(child),
@@ -4074,9 +4264,9 @@ var Nav = import_react21.default.forwardRef(
                     activeId === child.id && "bg-(--color-primary)/10 text-(--color-primary) [font-weight:var(--font-semibold)]"
                   ),
                   children: [
-                    child.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-shrink-0", children: child.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: child.label }),
-                    child.badge && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-shrink-0", children: child.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: child.label }),
+                    child.badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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
@@ -4086,7 +4276,7 @@ var Nav = import_react21.default.forwardRef(
         ] }, item.id);
       }
       if (item.href) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "a",
           {
             href: item.href,
@@ -4098,7 +4288,7 @@ var Nav = import_react21.default.forwardRef(
           item.id
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           onClick: () => handleItemClick(item),
@@ -4109,7 +4299,7 @@ var Nav = import_react21.default.forwardRef(
         item.id
       );
     };
-    const desktopNav = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const desktopNav = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: cn(
@@ -4131,13 +4321,12 @@ var Nav = import_react21.default.forwardRef(
       },
       [ref]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "nav",
       {
         ref: setRefs,
         className: cn(
           baseStyles,
-          "relative",
           // Border styles
           !borderless && "border border-(--color-border)",
           borderless && "border-0",
@@ -4145,11 +4334,11 @@ var Nav = import_react21.default.forwardRef(
         ),
         ...htmlProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: containerStyles, children: [
-            logo && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "shrink-0", children: logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: containerStyles, children: [
+            logo && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "shrink-0", children: logo }),
             desktopNav,
-            actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            actions && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "shrink-0 flex items-center gap-2 ml-auto", children: actions }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
@@ -4158,11 +4347,11 @@ var Nav = import_react21.default.forwardRef(
                   breakpointClasses[mobileBreakpoint]
                 ),
                 "aria-label": "Toggle menu",
-                children: isMobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react3.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react3.Menu, { className: "w-6 h-6" })
+                children: isMobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react3.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react3.Menu, { className: "w-6 h-6" })
               }
             )
           ] }),
-          mobileMenuDirection === "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          mobileMenuDirection === "top" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               ref: mobileMenuRef,
@@ -4171,11 +4360,11 @@ var Nav = import_react21.default.forwardRef(
                 breakpointClasses[mobileBreakpoint],
                 isMobileMenuOpen ? "max-h-96 opacity-100 border-(--color-border)" : "max-h-0 opacity-0 border-transparent"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
             }
           ),
-          mobileMenuDirection !== "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-            isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          mobileMenuDirection !== "top" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "div",
               {
                 className: cn(
@@ -4188,7 +4377,7 @@ var Nav = import_react21.default.forwardRef(
                 onClick: () => setIsMobileMenuOpen(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "div",
               {
                 ref: mobileMenuRef,
@@ -4208,7 +4397,7 @@ var Nav = import_react21.default.forwardRef(
                 style: {
                   transitionDuration: "var(--transition-drawer-duration, 500ms)"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
               }
             )
           ] })
@@ -4222,7 +4411,7 @@ Nav.displayName = "Nav";
 // src/layout/drawer.tsx
 var import_lucide_react4 = require("lucide-react");
 var import_react22 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Drawer({
   title,
   subtitle,
@@ -4267,8 +4456,8 @@ function Drawer({
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY, autoHideOnScroll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "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"}`,
@@ -4277,13 +4466,13 @@ function Drawer({
           opacity: blur ? 0.85 : 1,
           borderBottom: !borderless && !blur ? "1px solid var(--color-border)" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
-                homeUrl && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+                homeUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "a",
                   {
                     href: homeUrl,
@@ -4292,14 +4481,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__ */ (0, import_jsx_runtime22.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       "svg",
                       {
                         className: "w-5 h-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -4312,7 +4501,7 @@ function Drawer({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(!mobileMenuOpen),
@@ -4321,13 +4510,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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Menu, { className: "w-6 h-6" })
+                    children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react4.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react4.Menu, { className: "w-6 h-6" })
                   }
                 )
               ] }),
-              headerActions && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center", children: headerActions }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              headerActions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center", children: headerActions }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -4337,7 +4526,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "p",
                   {
                     className: "text-caption",
@@ -4353,7 +4542,7 @@ function Drawer({
         )
       }
     ),
-    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "fixed inset-0 lg:hidden transition-opacity ease-in-out",
@@ -4365,7 +4554,7 @@ function Drawer({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "aside",
       {
         className: `
@@ -4383,7 +4572,7 @@ function Drawer({
           ...mobileMenuOpen && typeof window !== "undefined" && window.innerWidth < 1024 ? { zIndex: 9999 } : {}
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
               className: "hidden lg:block px-6 py-5",
@@ -4392,7 +4581,7 @@ function Drawer({
                 background: "var(--color-muted)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -4402,7 +4591,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "p",
                   {
                     className: "mt-0.5 text-caption",
@@ -4415,14 +4604,14 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
               className: "lg:hidden p-4 flex items-center justify-between",
               style: { borderBottom: "1px solid var(--color-border)" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "h1",
                     {
                       className: "font-bold text-h5",
@@ -4432,7 +4621,7 @@ function Drawer({
                       children: title
                     }
                   ),
-                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "p",
                     {
                       className: "mt-1 text-caption",
@@ -4443,7 +4632,7 @@ function Drawer({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(false),
@@ -4452,20 +4641,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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { className: "w-5 h-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react4.X, { className: "w-5 h-5" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
               style: {
                 paddingTop: sectionIndex > 0 ? "var(--drawer-section-padding-y)" : "0"
               },
               children: [
-                section.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                section.title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "h3",
                   {
                     className: "font-semibold uppercase tracking-wide text-caption",
@@ -4477,7 +4666,7 @@ function Drawer({
                     children: section.title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "ul",
                   {
                     style: {
@@ -4485,7 +4674,7 @@ function Drawer({
                       flexDirection: "column",
                       gap: "var(--drawer-item-spacing)"
                     },
-                    children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                       "button",
                       {
                         onClick: () => handleItemClick(item.id),
@@ -4513,8 +4702,8 @@ function Drawer({
                           boxShadow: activeItem === item.id ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
                         },
                         children: [
-                          item.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "shrink-0 opacity-75", children: item.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.label })
+                          item.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 opacity-75", children: item.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: item.label })
                         ]
                       }
                     ) }, item.id))
@@ -4524,7 +4713,7 @@ function Drawer({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
               className: "p-4 mt-auto",
@@ -4541,7 +4730,7 @@ function Drawer({
 // src/layout/sidebar-nav.tsx
 var import_lucide_react5 = require("lucide-react");
 var import_react23 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function SidebarNav({
   title,
   subtitle,
@@ -4559,29 +4748,29 @@ function SidebarNav({
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "button",
             {
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
               className: "p-2 rounded-lg hover:bg-(--color-muted) transition-colors",
               "aria-label": "Toggle menu",
-              children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.X, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.Menu, { className: "w-6 h-6 text-(--color-muted-foreground)" })
+              children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react5.X, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react5.Menu, { className: "w-6 h-6 text-(--color-muted-foreground)" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
           ] })
         ]
       }
     ) }),
-    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         className: "fixed inset-0 bg-black/50 lg:hidden",
@@ -4589,7 +4778,7 @@ function SidebarNav({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "aside",
       {
         className: `
@@ -4600,18 +4789,18 @@ function SidebarNav({
           ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
         `,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: sectionIndex > 0 ? "mt-6" : "",
               children: [
-                section.title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                section.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                   "button",
                   {
                     onClick: () => handleItemClick(item.id),
@@ -4620,8 +4809,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__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0", children: item.icon }),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: item.label })
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "shrink-0", children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: item.label })
                     ]
                   }
                 ) }, item.id)) })
@@ -4629,7 +4818,7 @@ function SidebarNav({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "p-4 border-t border-(--color-border) mt-auto", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "p-4 border-t border-(--color-border) mt-auto", children: footer })
         ]
       }
     )
@@ -4638,10 +4827,10 @@ function SidebarNav({
 
 // src/shared/empty-state.tsx
 var import_react24 = __toESM(require("react"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var EmptyState = import_react24.default.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         ref,
@@ -4651,10 +4840,10 @@ var EmptyState = import_react24.default.forwardRef(
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-4 text-(--color-placeholder)", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "text-h4 font-semibold text-(--color-foreground) mb-2", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-small text-(--color-muted-foreground) mb-6 max-w-sm", children: description }),
-          action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: action })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mb-4 text-(--color-placeholder)", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "text-h4 font-semibold text-(--color-foreground) mb-2", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-small text-(--color-muted-foreground) mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: action })
         ]
       }
     );
@@ -4897,7 +5086,7 @@ var themes2 = {
 var themes_default = themes2;
 
 // src/contexts/ThemeProvider.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react25.createContext)(void 0);
 var themeRegistry = themes_default;
 var getInitialTheme = (defaultTheme = "dark") => {
@@ -5026,7 +5215,7 @@ function ThemeProvider({
       applyTheme(theme);
     }
   }, [currentTheme, customTheme, applyTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     ThemeContext.Provider,
     {
       value: {
@@ -5080,6 +5269,7 @@ function useTheme() {
   FormControlLabel,
   FormHelperText,
   Input,
+  NativeSelect,
   Nav,
   RadioGroup,
   Rating,