@yomologic/react-ui 0.5.2 → 0.5.3

package/dist/index.js

@@ -60,7 +60,6 @@ __export(index_exports, {
   FormControl: () => FormControl,
   FormControlLabel: () => FormControlLabel,
   FormHelperText: () => FormHelperText,
-  Header: () => Header,
   Input: () => Input,
   Nav: () => Nav,
   RadioGroup: () => RadioGroup,
@@ -71,6 +70,7 @@ __export(index_exports, {
   Slider: () => Slider,
   Spinner: () => Spinner,
   Switch: () => Switch,
+  Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   cn: () => cn,
   themes: () => themes_default,
@@ -231,7 +231,10 @@ var Button = import_react.default.forwardRef(
 Button.displayName = "Button";
 
 // src/ui/input.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
+
+// src/ui/hooks/useFormField.ts
+var import_react4 = require("react");
 
 // src/ui/form.tsx
 var import_react2 = require("react");
@@ -754,9 +757,212 @@ function FormHelperText({
   ) });
 }
 
+// src/ui/hooks/useFormField.ts
+function useFormField2(options) {
+  const {
+    name,
+    type = "text",
+    value: externalValue,
+    error: externalError,
+    id,
+    required = false,
+    disabled = false,
+    minLength,
+    maxLength,
+    min,
+    max,
+    pattern,
+    validate,
+    onValidationError,
+    errorMessages,
+    idPrefix = "field"
+  } = options;
+  const autoId = (0, import_react4.useId)();
+  const form = useForm();
+  const formControl = useFormControl();
+  const internalRef = (0, import_react4.useRef)(null);
+  const [validationError, setValidationError] = (0, import_react4.useState)();
+  const stableId = (0, import_react4.useRef)(void 0);
+  if (!stableId.current) {
+    stableId.current = id || formControl?.fieldId || `${idPrefix}-${autoId}`;
+  }
+  const fieldId = stableId.current;
+  const isDisabled = disabled || formControl?.isDisabled || false;
+  const isRequired = required || formControl?.isRequired || false;
+  let fieldValue;
+  let fieldError;
+  if (form && name) {
+    fieldError = form.shouldShowError(name) ? form.getFieldError(name) : void 0;
+    fieldValue = form.values[name] !== void 0 ? form.values[name] : externalValue ?? "";
+  } else if (formControl) {
+    fieldError = formControl.error || externalError || validationError;
+    fieldValue = formControl.value ?? externalValue;
+  } else {
+    fieldError = externalError || validationError;
+    fieldValue = externalValue;
+  }
+  const runBuiltInValidation = (value) => {
+    if (isRequired && !value) {
+      return errorMessages?.required || "This field is required";
+    }
+    if (value) {
+      if (type === "email" && !value.includes("@")) {
+        return errorMessages?.email || "Please enter a valid email address";
+      }
+      if (type === "url") {
+        try {
+          new URL(value);
+        } catch {
+          return errorMessages?.url || "Please enter a valid URL";
+        }
+      }
+      if (type === "number") {
+        const numValue = parseFloat(value);
+        if (min !== void 0 && numValue < Number(min)) {
+          return errorMessages?.min || `Minimum value is ${min}`;
+        }
+        if (max !== void 0 && numValue > Number(max)) {
+          return errorMessages?.max || `Maximum value is ${max}`;
+        }
+      }
+      if (minLength !== void 0 && value.length < minLength) {
+        return errorMessages?.minLength || `Minimum length is ${minLength} characters`;
+      }
+      if (maxLength !== void 0 && value.length > maxLength) {
+        return errorMessages?.maxLength || `Maximum length is ${maxLength} characters`;
+      }
+      if (pattern) {
+        const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+        if (!regex.test(value)) {
+          return errorMessages?.pattern || "Invalid format";
+        }
+      }
+    }
+    return void 0;
+  };
+  const runValidation = async (value) => {
+    const builtInError = runBuiltInValidation(value);
+    if (builtInError) {
+      setValidationError(builtInError);
+      onValidationError?.(builtInError);
+      return;
+    }
+    if (validate) {
+      const customError = await validate(value);
+      setValidationError(customError);
+      onValidationError?.(customError);
+      return;
+    }
+    setValidationError(void 0);
+    onValidationError?.(void 0);
+  };
+  (0, import_react4.useEffect)(() => {
+    if (form && name) {
+      const validator = async (value) => {
+        if (isRequired && !value) {
+          return errorMessages?.required || "This field is required";
+        }
+        if (value) {
+          if (type === "email" && !value.includes("@")) {
+            return errorMessages?.email || "Please enter a valid email address";
+          }
+          if (type === "url") {
+            try {
+              new URL(value);
+            } catch {
+              return errorMessages?.url || "Please enter a valid URL";
+            }
+          }
+          if (type === "number") {
+            const numValue = parseFloat(value);
+            if (min !== void 0 && numValue < Number(min)) {
+              return errorMessages?.min || `Minimum value is ${min}`;
+            }
+            if (max !== void 0 && numValue > Number(max)) {
+              return errorMessages?.max || `Maximum value is ${max}`;
+            }
+          }
+          if (minLength !== void 0 && value.length < minLength) {
+            return errorMessages?.minLength || `Minimum length is ${minLength} characters`;
+          }
+          if (maxLength !== void 0 && value.length > maxLength) {
+            return errorMessages?.maxLength || `Maximum length is ${maxLength} characters`;
+          }
+          if (pattern) {
+            const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+            if (!regex.test(value)) {
+              return errorMessages?.pattern || "Invalid format";
+            }
+          }
+        }
+        if (validate) {
+          return await validate(value);
+        }
+        return void 0;
+      };
+      form.registerField(name, validator);
+      return () => form.unregisterField(name);
+    } else if (formControl) {
+      const element = internalRef.current;
+      if (element) {
+        formControl.registerControl(element);
+        return () => formControl.unregisterControl(element);
+      }
+    }
+  }, [
+    form,
+    formControl,
+    name,
+    isRequired,
+    type,
+    min,
+    max,
+    minLength,
+    maxLength,
+    pattern,
+    validate,
+    errorMessages
+  ]);
+  const handleChange = (value) => {
+    if (form && name) {
+      form.setFieldValue(name, value);
+    } else if (formControl) {
+      formControl.setValue(value);
+    } else {
+      runValidation(value);
+    }
+  };
+  const handleBlur = (value) => {
+    if (form && name) {
+      form.setFieldTouched(name, true);
+      form.validateField(name, value);
+    } else if (formControl) {
+      formControl.setTouched(true);
+    } else {
+      if (value) {
+        runValidation(value);
+      }
+    }
+  };
+  const shouldRenderLabel = !formControl;
+  const shouldRenderError = !!fieldError && !formControl;
+  return {
+    fieldId,
+    value: fieldValue,
+    error: fieldError,
+    isDisabled,
+    isRequired,
+    shouldRenderLabel,
+    shouldRenderError,
+    handleChange,
+    handleBlur,
+    internalRef
+  };
+}
+
 // src/ui/input.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Input = import_react4.default.forwardRef(
+var Input = import_react5.default.forwardRef(
   ({
     className,
     type = "text",
@@ -777,66 +983,186 @@ var Input = import_react4.default.forwardRef(
     errorMessages,
     ...props
   }, ref) => {
-    const autoId = (0, import_react4.useId)();
+    const {
+      fieldId,
+      value: inputValue,
+      error: inputError,
+      isDisabled,
+      isRequired,
+      shouldRenderLabel,
+      shouldRenderError,
+      handleChange: hookHandleChange,
+      handleBlur: hookHandleBlur,
+      internalRef
+    } = useFormField2({
+      name,
+      type,
+      value: externalValue,
+      error,
+      id,
+      required: props.required,
+      disabled: props.disabled,
+      minLength: props.minLength,
+      maxLength: props.maxLength,
+      min: props.min,
+      max: props.max,
+      pattern,
+      validate,
+      onValidationError,
+      errorMessages,
+      idPrefix: "input"
+    });
+    const handleChange = (e) => {
+      hookHandleChange(e.target.value);
+      onChange?.(e);
+    };
+    const handleBlur = (e) => {
+      hookHandleBlur(e.target.value);
+      onBlur?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: cn("flex flex-col", fullWidth && "w-full"),
+        style: { marginBottom: "var(--form-control-spacing)" },
+        children: [
+          shouldRenderLabel && label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "label",
+            {
+              htmlFor: fieldId,
+              className: "block text-small font-semibold text-(--color-muted-foreground) mb-1",
+              children: [
+                label,
+                isRequired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-(--color-placeholder)", children: leftIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                ref: (node) => {
+                  if (typeof ref === "function") {
+                    ref(node);
+                  } else if (ref) {
+                    ref.current = node;
+                  }
+                  internalRef.current = node;
+                },
+                type,
+                id: fieldId,
+                value: inputValue,
+                onChange: handleChange,
+                onBlur: handleBlur,
+                disabled: isDisabled,
+                required: isRequired,
+                pattern: pattern instanceof RegExp ? pattern.source : pattern,
+                "aria-invalid": !!inputError,
+                "aria-describedby": inputError ? `${fieldId}-error` : helperText ? `${fieldId}-helper` : void 0,
+                className: cn(
+                  "w-full px-3 py-2 border rounded-md transition-colors",
+                  "text-(--color-muted-foreground) placeholder-gray-400",
+                  "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                  "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
+                  inputError ? "border-error focus:ring-error" : "border-(--color-border)",
+                  leftIcon && "pl-10",
+                  rightIcon && "pr-10",
+                  className
+                ),
+                ...props
+              }
+            ),
+            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-(--color-placeholder)", children: rightIcon })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "h-5 mt-1.5", children: [
+            shouldRenderError && inputError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                className: "text-small text-error",
+                id: `${fieldId}-error`,
+                role: "alert",
+                children: inputError
+              }
+            ),
+            helperText && !inputError && shouldRenderLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                className: "text-small text-(--color-muted-foreground)",
+                id: `${fieldId}-helper`,
+                children: helperText
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/textarea.tsx
+var import_react6 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Textarea = import_react6.default.forwardRef(
+  ({
+    className,
+    name,
+    label,
+    error,
+    helperText,
+    fullWidth = false,
+    id,
+    onChange,
+    onBlur,
+    value: externalValue,
+    validate,
+    onValidationError,
+    errorMessages,
+    rows = 3,
+    resize = "vertical",
+    autoResize = false,
+    showCharacterCount = false,
+    maxHeight = 500,
+    ...props
+  }, ref) => {
+    const autoId = (0, import_react6.useId)();
     const form = useForm();
     const formControl = useFormControl();
-    const internalRef = (0, import_react4.useRef)(null);
-    const [validationError, setValidationError] = (0, import_react4.useState)();
-    const stableId = (0, import_react4.useRef)(void 0);
+    const internalRef = (0, import_react6.useRef)(null);
+    const [validationError, setValidationError] = (0, import_react6.useState)();
+    const stableId = (0, import_react6.useRef)(void 0);
     if (!stableId.current) {
-      stableId.current = id || formControl?.fieldId || `input-${autoId}`;
+      stableId.current = id || formControl?.fieldId || `textarea-${autoId}`;
     }
-    const inputId = stableId.current;
+    const textareaId = stableId.current;
     const isDisabled = props.disabled || formControl?.isDisabled;
     const isRequired = props.required || formControl?.isRequired;
-    let inputError;
-    let inputValue;
+    let textareaError;
+    let textareaValue;
     if (form && name) {
-      inputError = form.shouldShowError(name) ? form.getFieldError(name) : void 0;
-      inputValue = form.values[name] !== void 0 ? form.values[name] : externalValue ?? "";
+      textareaError = form.shouldShowError(name) ? form.getFieldError(name) : void 0;
+      textareaValue = form.values[name] !== void 0 ? form.values[name] : externalValue ?? "";
     } else if (formControl) {
-      inputError = formControl.error || error || validationError;
-      inputValue = formControl.value ?? externalValue;
+      textareaError = formControl.error || error || validationError;
+      textareaValue = formControl.value ?? externalValue;
     } else {
-      inputError = error || validationError;
-      inputValue = externalValue;
+      textareaError = error || validationError;
+      textareaValue = externalValue;
     }
+    const currentLength = typeof textareaValue === "string" ? textareaValue.length : 0;
+    const maxLengthValue = props.maxLength;
     const runBuiltInValidation = (value) => {
       if (isRequired && !value) {
         return errorMessages?.required || "This field is required";
       }
       if (value) {
-        if (type === "email" && !value.includes("@")) {
-          return errorMessages?.email || "Please enter a valid email address";
-        }
-        if (type === "url") {
-          try {
-            new URL(value);
-          } catch {
-            return errorMessages?.url || "Please enter a valid URL";
-          }
-        }
-        if (type === "number") {
-          const numValue = parseFloat(value);
-          if (props.min !== void 0 && numValue < Number(props.min)) {
-            return errorMessages?.min || `Minimum value is ${props.min}`;
-          }
-          if (props.max !== void 0 && numValue > Number(props.max)) {
-            return errorMessages?.max || `Maximum value is ${props.max}`;
-          }
-        }
         if (props.minLength !== void 0 && value.length < props.minLength) {
           return errorMessages?.minLength || `Minimum length is ${props.minLength} characters`;
         }
         if (props.maxLength !== void 0 && value.length > props.maxLength) {
           return errorMessages?.maxLength || `Maximum length is ${props.maxLength} characters`;
         }
-        if (pattern) {
-          const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
-          if (!regex.test(value)) {
-            return errorMessages?.pattern || "Invalid format";
-          }
-        }
       }
       return void 0;
     };
@@ -856,44 +1182,27 @@ var Input = import_react4.default.forwardRef(
       setValidationError(void 0);
       onValidationError?.(void 0);
     };
-    (0, import_react4.useEffect)(() => {
+    const adjustHeight = () => {
+      const textarea = internalRef.current;
+      if (textarea && autoResize) {
+        textarea.style.height = "auto";
+        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+        textarea.style.height = `${newHeight}px`;
+      }
+    };
+    (0, import_react6.useEffect)(() => {
       if (form && name) {
         const validator = async (value) => {
           if (isRequired && !value) {
             return errorMessages?.required || "This field is required";
           }
           if (value) {
-            if (type === "email" && !value.includes("@")) {
-              return errorMessages?.email || "Please enter a valid email address";
-            }
-            if (type === "url") {
-              try {
-                new URL(value);
-              } catch {
-                return errorMessages?.url || "Please enter a valid URL";
-              }
-            }
-            if (type === "number") {
-              const numValue = parseFloat(value);
-              if (props.min !== void 0 && numValue < Number(props.min)) {
-                return errorMessages?.min || `Minimum value is ${props.min}`;
-              }
-              if (props.max !== void 0 && numValue > Number(props.max)) {
-                return errorMessages?.max || `Maximum value is ${props.max}`;
-              }
-            }
             if (props.minLength !== void 0 && value.length < props.minLength) {
               return errorMessages?.minLength || `Minimum length is ${props.minLength} characters`;
             }
             if (props.maxLength !== void 0 && value.length > props.maxLength) {
               return errorMessages?.maxLength || `Maximum length is ${props.maxLength} characters`;
             }
-            if (pattern) {
-              const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
-              if (!regex.test(value)) {
-                return errorMessages?.pattern || "Invalid format";
-              }
-            }
           }
           if (validate) {
             return await validate(value);
@@ -903,13 +1212,18 @@ var Input = import_react4.default.forwardRef(
         form.registerField(name, validator);
         return () => form.unregisterField(name);
       } else if (formControl) {
-        const inputElement = internalRef.current;
-        if (inputElement) {
-          formControl.registerControl(inputElement);
-          return () => formControl.unregisterControl(inputElement);
+        const textareaElement = internalRef.current;
+        if (textareaElement) {
+          formControl.registerControl(textareaElement);
+          return () => formControl.unregisterControl(textareaElement);
         }
       }
     }, [form, formControl, name]);
+    (0, import_react6.useEffect)(() => {
+      if (autoResize) {
+        adjustHeight();
+      }
+    }, [textareaValue, autoResize]);
     const handleChange = (e) => {
       const newValue = e.target.value;
       if (form && name) {
@@ -919,6 +1233,9 @@ var Input = import_react4.default.forwardRef(
       } else {
         runValidation(newValue);
       }
+      if (autoResize) {
+        adjustHeight();
+      }
       onChange?.(e);
     };
     const handleBlur = (e) => {
@@ -935,103 +1252,90 @@ var Input = import_react4.default.forwardRef(
       onBlur?.(e);
     };
     const shouldRenderLabel = label && !formControl;
-    const shouldRenderError = inputError && !formControl;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    const shouldRenderError = textareaError && !formControl;
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         className: cn("flex flex-col", fullWidth && "w-full"),
         style: { marginBottom: "var(--form-control-spacing)" },
-        suppressHydrationWarning: true,
         children: [
-          shouldRenderLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "label",
-            {
-              htmlFor: inputId,
-              className: "block text-small font-semibold text-(--color-muted-foreground) mb-1",
-              suppressHydrationWarning: true,
-              children: [
-                label,
-                isRequired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-1", children: "*" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+            shouldRenderLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "label",
+              {
+                htmlFor: textareaId,
+                className: "block text-small font-semibold text-(--color-muted-foreground)",
+                children: [
+                  label,
+                  isRequired && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-1", children: "*" })
+                ]
+              }
+            ),
+            showCharacterCount && maxLengthValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-small text-(--color-muted-foreground)", children: [
+              currentLength,
+              "/",
+              maxLengthValue
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "textarea",
             {
-              className: "relative *:data-lastpass-icon-root:hidden",
-              suppressHydrationWarning: true,
-              children: [
-                leftIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-(--color-placeholder)",
-                    suppressHydrationWarning: true,
-                    children: leftIcon
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "input",
-                  {
-                    ref: (node) => {
-                      if (typeof ref === "function") {
-                        ref(node);
-                      } else if (ref) {
-                        ref.current = node;
-                      }
-                      internalRef.current = node;
-                    },
-                    type,
-                    id: inputId,
-                    value: inputValue,
-                    onChange: handleChange,
-                    onBlur: handleBlur,
-                    disabled: isDisabled,
-                    required: isRequired,
-                    pattern: pattern instanceof RegExp ? pattern.source : pattern,
-                    "aria-invalid": !!inputError,
-                    "aria-describedby": inputError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
-                    suppressHydrationWarning: true,
-                    className: cn(
-                      "w-full px-3 py-2 border rounded-md transition-colors",
-                      "text-(--color-muted-foreground) placeholder-gray-400",
-                      "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-                      "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                      inputError ? "border-error focus:ring-error" : "border-(--color-border)",
-                      leftIcon && "pl-10",
-                      rightIcon && "pr-10",
-                      className
-                    ),
-                    ...props
-                  }
-                ),
-                rightIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-(--color-placeholder)",
-                    suppressHydrationWarning: true,
-                    children: rightIcon
-                  }
-                )
-              ]
+              ref: (node) => {
+                if (typeof ref === "function") {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
+                internalRef.current = node;
+              },
+              id: textareaId,
+              value: textareaValue,
+              onChange: handleChange,
+              onBlur: handleBlur,
+              disabled: isDisabled,
+              required: isRequired,
+              rows: autoResize ? void 0 : rows,
+              "aria-invalid": !!textareaError,
+              "aria-describedby": textareaError ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : void 0,
+              className: cn(
+                "w-full px-3 py-2 border rounded-md transition-colors",
+                "text-(--color-muted-foreground) placeholder-gray-400",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
+                textareaError ? "border-error focus:ring-error" : "border-(--color-border)",
+                resizeClasses[resize],
+                autoResize && "overflow-hidden",
+                !autoResize && "overflow-auto",
+                className
+              ),
+              style: autoResize ? {
+                minHeight: `${rows * 1.5}em`,
+                maxHeight: `${maxHeight}px`
+              } : void 0,
+              ...props
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "h-5 mt-1.5", suppressHydrationWarning: true, children: [
-            shouldRenderError && inputError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "h-5 mt-1.5", children: [
+            shouldRenderError && textareaError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "p",
               {
                 className: "text-small text-error",
-                id: `${inputId}-error`,
+                id: `${textareaId}-error`,
                 role: "alert",
-                suppressHydrationWarning: true,
-                children: inputError
+                children: textareaError
               }
             ),
-            helperText && !inputError && !formControl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            helperText && !textareaError && !formControl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "p",
               {
                 className: "text-small text-(--color-muted-foreground)",
-                id: `${inputId}-helper`,
-                suppressHydrationWarning: true,
+                id: `${textareaId}-helper`,
                 children: helperText
               }
             )
@@ -1041,12 +1345,12 @@ var Input = import_react4.default.forwardRef(
     );
   }
 );
-Input.displayName = "Input";
+Textarea.displayName = "Textarea";
 
 // src/ui/card.tsx
-var import_react5 = __toESM(require("react"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Card = import_react5.default.forwardRef(
+var import_react7 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Card = import_react7.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1070,7 +1374,7 @@ var Card = import_react5.default.forwardRef(
       lg: "p-6"
     };
     const hoverStyles = hoverable ? "hover:shadow-lg transition-shadow cursor-pointer" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         ref,
@@ -1086,7 +1390,7 @@ var Card = import_react5.default.forwardRef(
         } : void 0,
         ...props,
         children: [
-          variant === "accent" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          variant === "accent" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "div",
             {
               className: "absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-current to-transparent opacity-0 group-hover:opacity-100 group-active:opacity-100 transition-opacity",
@@ -1100,7 +1404,7 @@ var Card = import_react5.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = import_react5.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var CardHeader = import_react7.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "div",
   {
     ref,
@@ -1109,7 +1413,7 @@ var CardHeader = import_react5.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = import_react5.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var CardTitle = import_react7.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "h3",
   {
     ref,
@@ -1121,7 +1425,7 @@ var CardTitle = import_react5.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = import_react5.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var CardDescription = import_react7.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "p",
   {
     ref,
@@ -1130,9 +1434,9 @@ var CardDescription = import_react5.default.forwardRef(({ className, ...props },
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = import_react5.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("pt-0", className), ...props }));
+var CardContent = import_react7.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = import_react5.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var CardFooter = import_react7.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "div",
   {
     ref,
@@ -1141,7 +1445,7 @@ var CardFooter = import_react5.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 CardFooter.displayName = "CardFooter";
-var CardMedia = import_react5.default.forwardRef(
+var CardMedia = import_react7.default.forwardRef(
   ({
     className,
     image,
@@ -1159,7 +1463,7 @@ var CardMedia = import_react5.default.forwardRef(
     };
     const objectFitClass = objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : objectFit === "fill" ? "object-fill" : objectFit === "none" ? "object-none" : "object-scale-down";
     if (component === "img" && image) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "img",
         {
           ref,
@@ -1172,7 +1476,7 @@ var CardMedia = import_react5.default.forwardRef(
       );
     }
     if (component === "video" && video) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "video",
         {
           ref,
@@ -1183,7 +1487,7 @@ var CardMedia = import_react5.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
@@ -1200,7 +1504,7 @@ var CardMedia = import_react5.default.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = import_react5.default.forwardRef(
+var CardActions = import_react7.default.forwardRef(
   ({ className, disableSpacing = false, position = "left", ...props }, ref) => {
     const justifyContent = {
       left: "justify-start",
@@ -1212,7 +1516,7 @@ var CardActions = import_react5.default.forwardRef(
       center: "px-4 py-4",
       right: "pl-4 pr-4 py-4"
     }[position];
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
@@ -1228,8 +1532,8 @@ var CardActions = import_react5.default.forwardRef(
   }
 );
 CardActions.displayName = "CardActions";
-var CardActionArea = import_react5.default.forwardRef(
-  ({ className, disabled = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var CardActionArea = import_react7.default.forwardRef(
+  ({ className, disabled = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref,
@@ -1251,9 +1555,9 @@ var CardActionArea = import_react5.default.forwardRef(
 CardActionArea.displayName = "CardActionArea";
 
 // src/ui/badge.tsx
-var import_react6 = __toESM(require("react"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Badge = import_react6.default.forwardRef(
+var import_react8 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Badge = import_react8.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1300,7 +1604,7 @@ var Badge = import_react6.default.forwardRef(
       lg: "w-4 h-4",
       xl: "w-5 h-5"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "span",
       {
         ref,
@@ -1308,7 +1612,7 @@ var Badge = import_react6.default.forwardRef(
         className: cn(baseStyles, sizes[size], className),
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
               className: cn(
@@ -1319,7 +1623,7 @@ var Badge = import_react6.default.forwardRef(
             }
           ),
           children,
-          rightIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          rightIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
               className: cn(
@@ -1337,8 +1641,8 @@ var Badge = import_react6.default.forwardRef(
 Badge.displayName = "Badge";
 
 // src/ui/checkbox.tsx
-var import_react7 = __toESM(require("react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = __toESM(require("react"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Checkbox({
   label,
   name,
@@ -1354,13 +1658,13 @@ function Checkbox({
   errorMessage
 }) {
   const form = useForm();
-  const autoId = (0, import_react7.useId)();
-  const stableId = (0, import_react7.useRef)(void 0);
+  const autoId = (0, import_react9.useId)();
+  const stableId = (0, import_react9.useRef)(void 0);
   if (!stableId.current) {
     stableId.current = id || `checkbox-${autoId}`;
   }
   const checkboxId = stableId.current;
-  const [validationError, setValidationError] = (0, import_react7.useState)();
+  const [validationError, setValidationError] = (0, import_react9.useState)();
   let checked;
   let displayError;
   if (form && name) {
@@ -1376,7 +1680,7 @@ function Checkbox({
     }
     return void 0;
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -1425,10 +1729,10 @@ function Checkbox({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
@@ -1439,7 +1743,7 @@ function Checkbox({
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1447,7 +1751,6 @@ function Checkbox({
             checked,
             onChange: handleChange,
             disabled,
-            suppressHydrationWarning: true,
             className: cn(
               "rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 transition-all relative z-10",
               disabled && "cursor-not-allowed"
@@ -1463,7 +1766,7 @@ function Checkbox({
           }
         )
       ] }),
-      label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "label",
         {
           htmlFor: checkboxId,
@@ -1472,7 +1775,6 @@ function Checkbox({
             disabled && "cursor-not-allowed",
             !disabled && "cursor-pointer"
           ),
-          suppressHydrationWarning: true,
           style: {
             fontSize: size === "xs" ? "var(--checkbox-label-font-size-xs)" : size === "sm" ? "var(--checkbox-label-font-size-sm)" : size === "lg" ? "var(--checkbox-label-font-size-lg)" : size === "xl" ? "var(--checkbox-label-font-size-xl)" : "var(--checkbox-label-font-size-md)",
             color: "var(--color-muted-foreground)",
@@ -1480,12 +1782,12 @@ function Checkbox({
           },
           children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-1", children: "*" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-small text-error", role: "alert", children: displayError }) })
   ] });
 }
 function CheckboxGroup({
@@ -1504,7 +1806,7 @@ function CheckboxGroup({
   validate
 }) {
   const form = useForm();
-  import_react7.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (form && name) {
       const validator = validate || (required ? (value2) => {
         if (!value2 || value2.length === 0) {
@@ -1535,24 +1837,24 @@ function CheckboxGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: cn(
@@ -1560,7 +1862,7 @@ function CheckboxGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -1568,8 +1870,8 @@ function CheckboxGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "div",
                         {
                           className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
@@ -1580,7 +1882,7 @@ function CheckboxGroup({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "input",
                         {
                           type: "checkbox",
@@ -1608,7 +1910,7 @@ function CheckboxGroup({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "label",
                       {
                         htmlFor: `${name}-${option.value}`,
@@ -1632,7 +1934,7 @@ function CheckboxGroup({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             className: `text-small ${error ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -1646,8 +1948,8 @@ function CheckboxGroup({
 }
 
 // src/ui/radio.tsx
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function RadioGroup({
   label,
   name,
@@ -1665,8 +1967,8 @@ function RadioGroup({
   validate
 }) {
   const form = useForm();
-  const [validationError, setValidationError] = (0, import_react8.useState)();
-  const [touched, setTouched] = (0, import_react8.useState)(false);
+  const [validationError, setValidationError] = (0, import_react10.useState)();
+  const [touched, setTouched] = (0, import_react10.useState)(false);
   let value;
   let displayError;
   if (form && name) {
@@ -1676,7 +1978,7 @@ function RadioGroup({
     value = externalValue;
     displayError = error || validationError;
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -1691,7 +1993,7 @@ function RadioGroup({
       return () => form.unregisterField(name);
     }
   }, [form, name]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!form && touched && required && !value) {
       setValidationError(errorMessage || "Please select an option");
     } else if (!form) {
@@ -1716,24 +2018,24 @@ function RadioGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: cn(
@@ -1742,7 +2044,7 @@ function RadioGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -1750,8 +2052,8 @@ function RadioGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative group/radio flex items-center shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative group/radio flex items-center shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "div",
                         {
                           className: "rounded-full scale-0 group-hover/radio:scale-100 group-active/radio:scale-100 transition-transform duration-200 ease-out",
@@ -1762,7 +2064,7 @@ function RadioGroup({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "input",
                         {
                           type: "radio",
@@ -1787,7 +2089,7 @@ function RadioGroup({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "label",
                       {
                         htmlFor: `${name}-${option.value}`,
@@ -1811,7 +2113,7 @@ function RadioGroup({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "p",
           {
             className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -1826,8 +2128,8 @@ function RadioGroup({
 
 // src/ui/select.tsx
 var import_lucide_react = require("lucide-react");
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Select({
   name,
   label,
@@ -1847,9 +2149,9 @@ function Select({
   errorMessage
 }) {
   const form = useForm();
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const dropdownRef = (0, import_react9.useRef)(null);
-  const [validationError, _setValidationError] = (0, import_react9.useState)();
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const dropdownRef = (0, import_react11.useRef)(null);
+  const [validationError, _setValidationError] = (0, import_react11.useState)();
   let value;
   let displayError;
   if (form && name) {
@@ -1859,7 +2161,7 @@ function Select({
     value = externalValue;
     displayError = error || validationError;
   }
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && (val === void 0 || val === null || val === "")) {
@@ -1900,7 +2202,7 @@ function Select({
     lg: `[padding-left:var(--dropdown-option-padding-lg-x)] [padding-right:var(--dropdown-option-padding-lg-x)] [padding-top:var(--dropdown-option-padding-lg-y)] [padding-bottom:var(--dropdown-option-padding-lg-y)] [font-size:var(--dropdown-option-font-size-lg)]`,
     xl: `[padding-left:var(--dropdown-option-padding-xl-x)] [padding-right:var(--dropdown-option-padding-xl-x)] [padding-top:var(--dropdown-option-padding-xl-y)] [padding-bottom:var(--dropdown-option-padding-xl-y)] [font-size:var(--dropdown-option-font-size-xl)]`
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1939,25 +2241,25 @@ function Select({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `w-full ${className}`,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: dropdownRef, className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: dropdownRef, className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "button",
             {
               type: "button",
@@ -1973,9 +2275,9 @@ function Select({
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate", children: getSelectedLabel() }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
-                  value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate", children: getSelectedLabel() }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
+                  value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       onClick: handleClear,
@@ -1983,7 +2285,7 @@ function Select({
                       role: "button",
                       "aria-label": "Clear selection",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         import_lucide_react.X,
                         {
                           className: `${iconSizeStyles[size]} text-(--color-muted-foreground)`
@@ -1991,7 +2293,7 @@ function Select({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     import_lucide_react.ChevronDown,
                     {
                       className: `${iconSizeStyles[size]} text-(--color-placeholder) transition-transform duration-200 shrink-0 ${isOpen ? "transform rotate-180" : ""}`
@@ -2001,18 +2303,18 @@ function Select({
               ]
             }
           ),
-          isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "absolute z-(--z-index-dropdown) w-full mt-1 bg-(--color-background) border border-(--color-border) rounded-lg shadow-lg max-h-60 overflow-auto",
               role: "listbox",
               children: children ? (
                 // Custom content
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { onClick: () => setIsOpen(false), children })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { onClick: () => setIsOpen(false), children })
               ) : (
                 // Standard options
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("ul", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2027,7 +2329,7 @@ function Select({
                       children: placeholder
                     }
                   ) }, "__placeholder__"),
-                  options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2049,7 +2351,7 @@ function Select({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "p",
           {
             className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -2062,9 +2364,9 @@ function Select({
 }
 
 // src/ui/spinner.tsx
-var import_react10 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Spinner = import_react10.default.forwardRef(
+var import_react12 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Spinner = import_react12.default.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
       sm: "h-4 w-4",
@@ -2077,7 +2379,7 @@ var Spinner = import_react10.default.forwardRef(
       secondary: "text-(--color-muted-foreground)",
       white: "text-white"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         ref,
@@ -2087,7 +2389,7 @@ var Spinner = import_react10.default.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "svg",
             {
               className: cn("animate-spin", sizes[size], colors[color]),
@@ -2095,7 +2397,7 @@ var Spinner = import_react10.default.forwardRef(
               fill: "none",
               viewBox: "0 0 24 24",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "circle",
                   {
                     className: "opacity-25",
@@ -2106,7 +2408,7 @@ var Spinner = import_react10.default.forwardRef(
                     strokeWidth: "4"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "path",
                   {
                     className: "opacity-75",
@@ -2117,7 +2419,7 @@ var Spinner = import_react10.default.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-small text-(--color-muted-foreground)", children: label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-small text-(--color-muted-foreground)", children: label })
         ]
       }
     );
@@ -2127,8 +2429,8 @@ Spinner.displayName = "Spinner";
 
 // src/ui/code-snippet.tsx
 var import_prism_react_renderer = require("prism-react-renderer");
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function CodeSnippet({
   code,
   language = "tsx",
@@ -2140,8 +2442,8 @@ function CodeSnippet({
     body: "text-body",
     h6: "text-h6"
   };
-  const [copied, setCopied] = (0, import_react11.useState)(false);
-  const [showTooltip, setShowTooltip] = (0, import_react11.useState)(false);
+  const [copied, setCopied] = (0, import_react13.useState)(false);
+  const [showTooltip, setShowTooltip] = (0, import_react13.useState)(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -2151,9 +2453,9 @@ function CodeSnippet({
       console.error("Failed to copy:", err);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative group w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  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)(
         "button",
         {
           onClick: handleCopy,
@@ -2163,14 +2465,14 @@ function CodeSnippet({
           "aria-label": "Copy code",
           children: copied ? (
             // Check icon
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "svg",
               {
                 className: "w-4 h-4 text-green-400",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2183,14 +2485,14 @@ function CodeSnippet({
             )
           ) : (
             // Copy icon
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "svg",
               {
                 className: "w-4 h-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2204,26 +2506,26 @@ function CodeSnippet({
           )
         }
       ),
-      showTooltip && !copied && /* @__PURE__ */ (0, import_jsx_runtime11.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_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: [
         "Copy code",
-        /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime12.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_runtime11.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.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_runtime11.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+        /* @__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_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_prism_react_renderer.Highlight,
           {
             theme: import_prism_react_renderer.themes.vsDark,
             code,
             language,
-            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "pre",
               {
                 style: {
@@ -2235,7 +2537,7 @@ function CodeSnippet({
                   whiteSpace: wrap ? "pre-wrap" : "pre",
                   wordBreak: wrap ? "break-word" : "normal"
                 },
-                children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                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)(
                   "span",
                   {
                     ...getTokenProps({ token })
@@ -2253,8 +2555,8 @@ function CodeSnippet({
 
 // src/ui/rating.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react12 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Rating = ({
   value,
   max = 5,
@@ -2269,8 +2571,8 @@ var Rating = ({
   valuePosition = "inline",
   valueFormat = "decimal"
 }) => {
-  const uniqueId = (0, import_react12.useId)();
-  const [hoverValue, setHoverValue] = import_react12.default.useState(null);
+  const uniqueId = (0, import_react14.useId)();
+  const [hoverValue, setHoverValue] = import_react14.default.useState(null);
   const handleStarClick = (starIndex) => {
     if (interactive && onChange) {
       onChange(starIndex);
@@ -2296,7 +2598,7 @@ var Rating = ({
     const isHalf = displayValue >= i - 0.5 && displayValue < i;
     const isEmpty = displayValue < i - 0.5;
     stars.push(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "span",
         {
           onClick: () => handleStarClick(i),
@@ -2329,7 +2631,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_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               import_lucide_react2.Star,
               {
                 size: displaySize,
@@ -2338,7 +2640,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isFull && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            isFull && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               import_lucide_react2.Star,
               {
                 size: displaySize,
@@ -2347,7 +2649,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isHalf && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            isHalf && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "svg",
               {
                 width: displaySize,
@@ -2355,7 +2657,7 @@ var Rating = ({
                 viewBox: `0 0 ${displaySize} ${displaySize}`,
                 style: { position: "absolute", left: 0, top: 0 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "linearGradient",
                     {
                       id: `half-${uniqueId}-${i}`,
@@ -2364,12 +2666,12 @@ var Rating = ({
                       y1: "0",
                       y2: "0",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "50%", stopColor: color }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "50%", stopColor: "transparent" })
+                        /* @__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_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     import_lucide_react2.Star,
                     {
                       size: displaySize,
@@ -2388,7 +2690,7 @@ var Rating = ({
   }
   const valueText = valueFormat === "fraction" ? `${value.toFixed(1)}/${max}` : value.toFixed(1);
   if (showValue && valuePosition === "bottom") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className,
@@ -2399,7 +2701,7 @@ var Rating = ({
           gap: gap * 2
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               style: {
@@ -2410,7 +2712,7 @@ var Rating = ({
               children: stars
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "span",
             {
               style: {
@@ -2425,7 +2727,7 @@ var Rating = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className,
@@ -2438,7 +2740,7 @@ var Rating = ({
       },
       children: [
         stars,
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             style: {
@@ -2456,7 +2758,7 @@ var Rating = ({
 };
 
 // src/ui/divider.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Divider = ({
   variant = "fullWidth",
   orientation = "horizontal",
@@ -2486,21 +2788,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_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         role: "presentation",
         className: `flex items-center gap-3 ${variantClasses[variant]} ${className}`,
         children: [
-          textAlign !== "left" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          textAlign !== "left" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
               className: leftLineClasses
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: textStyles, className: "whitespace-nowrap", children }),
-          textAlign !== "right" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: textStyles, className: "whitespace-nowrap", children }),
+          textAlign !== "right" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
@@ -2512,7 +2814,7 @@ var Divider = ({
     );
   }
   if (isVertical) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       {
         role: "separator",
@@ -2522,7 +2824,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "hr",
     {
       style: { ...baseStyles, ...thicknessStyle },
@@ -2532,8 +2834,8 @@ var Divider = ({
 };
 
 // src/ui/slider.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Slider = ({
   value: controlledValue,
   defaultValue = 0,
@@ -2557,21 +2859,21 @@ var Slider = ({
   "aria-labelledby": ariaLabelledBy
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react13.useState)(
+  const [internalValue, setInternalValue] = (0, import_react15.useState)(
     controlledValue ?? defaultValue
   );
-  const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
-  const [activeThumb, setActiveThumb] = (0, import_react13.useState)(null);
-  const sliderRef = (0, import_react13.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react15.useState)(false);
+  const [activeThumb, setActiveThumb] = (0, import_react15.useState)(null);
+  const sliderRef = (0, import_react15.useRef)(null);
   const currentValue = isControlled ? controlledValue : internalValue;
   const isRange = Array.isArray(currentValue);
   const isVertical = orientation === "vertical";
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isControlled) {
       setInternalValue(controlledValue);
     }
   }, [isControlled, controlledValue]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isRange && Array.isArray(currentValue)) {
       const clampedValues = currentValue.map(
         (v) => Math.max(min, Math.min(max, v))
@@ -2644,7 +2946,7 @@ var Slider = ({
       updateValue(newValue);
     }
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isDragging) return;
     const handleGlobalMove = (e) => {
       if (isVertical && "touches" in e) {
@@ -2771,7 +3073,7 @@ var Slider = ({
       const showLabelAlways = valueLabelDisplay === "on";
       const showLabelOnActiveOrHover = valueLabelDisplay === "auto";
       const thumbStyle = isVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.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`,
@@ -2779,19 +3081,19 @@ var Slider = ({
           onMouseDown: handleMouseDown(index),
           onTouchStart: handleMouseDown(index),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsxs)(
+            showLabelAlways && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.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"}`
@@ -2800,13 +3102,13 @@ var Slider = ({
                 ]
               }
             ),
-            showLabelOnActiveOrHover && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            showLabelOnActiveOrHover && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.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"}`
@@ -2824,13 +3126,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_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `${containerClasses} ${className}`,
       style: isVertical ? { minHeight: "200px", height: "200px" } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
             ref: sliderRef,
@@ -2848,13 +3150,13 @@ var Slider = ({
             "aria-orientation": orientation,
             tabIndex: disabled ? -1 : 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+              track !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "div",
                 {
                   className: `absolute ${isVertical ? "inset-x-0" : "inset-y-0"} ${currentColorStyles.track} rounded-full ${disabled ? "opacity-50" : ""} z-0`,
@@ -2877,32 +3179,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_runtime14.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+                      mark.label && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsxs)(
+                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime15.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"}`
@@ -2920,7 +3222,7 @@ var Slider = ({
             ]
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             type: "hidden",
@@ -2935,8 +3237,8 @@ var Slider = ({
 };
 
 // src/ui/switch.tsx
-var import_react14 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Switch({
   checked: controlledChecked,
   onChange,
@@ -2952,7 +3254,7 @@ function Switch({
   errorMessage
 }) {
   const form = useForm();
-  const [internalChecked, setInternalChecked] = (0, import_react14.useState)(false);
+  const [internalChecked, setInternalChecked] = (0, import_react16.useState)(false);
   let checked;
   if (form && name) {
     checked = form.values[name] ?? controlledChecked ?? false;
@@ -2960,7 +3262,7 @@ function Switch({
     const isControlled = controlledChecked !== void 0;
     checked = isControlled ? controlledChecked : internalChecked;
   }
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -3033,7 +3335,7 @@ function Switch({
     top: "gap-2",
     bottom: "gap-2"
   };
-  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "button",
     {
       type: "button",
@@ -3050,7 +3352,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_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "span",
         {
           className: cn(
@@ -3063,9 +3365,9 @@ function Switch({
       )
     }
   );
-  const content = !label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+  const content = !label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     switchElement,
-    name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       {
         type: "checkbox",
@@ -3077,7 +3379,7 @@ function Switch({
         required
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "label",
     {
       className: cn(
@@ -3088,7 +3390,7 @@ function Switch({
       ),
       children: [
         switchElement,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "span",
           {
             className: cn(
@@ -3098,11 +3400,11 @@ function Switch({
             style: !disabled ? { color: "var(--color-muted-foreground)" } : void 0,
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             type: "checkbox",
@@ -3117,7 +3419,7 @@ function Switch({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className,
@@ -3130,8 +3432,8 @@ function Switch({
 }
 
 // src/ui/dialog.tsx
-var import_react15 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react17 = __toESM(require("react"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Dialog = ({
   open,
   onClose,
@@ -3142,7 +3444,7 @@ var Dialog = ({
   closeOnEscape = true,
   children
 }) => {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!open || !closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -3152,7 +3454,7 @@ var Dialog = ({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open, closeOnEscape, onClose]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (open) {
       document.body.style.overflow = "hidden";
     } else {
@@ -3182,14 +3484,14 @@ var Dialog = ({
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           className: cn(
@@ -3197,7 +3499,7 @@ var Dialog = ({
             sizes[size]
           ),
           children: [
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -3240,14 +3542,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_runtime16.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "svg",
                   {
                     className: "w-5 h-5",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3260,7 +3562,7 @@ var Dialog = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DialogContext.Provider, { value: { variant }, children })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogContext.Provider, { value: { variant }, children })
           ]
         }
       )
@@ -3268,9 +3570,9 @@ var Dialog = ({
   );
 };
 Dialog.displayName = "Dialog";
-var DialogContext = import_react15.default.createContext({ variant: "default" });
-var DialogHeader = import_react15.default.forwardRef(({ className, children, ...props }, ref) => {
-  const { variant } = import_react15.default.useContext(DialogContext);
+var DialogContext = import_react17.default.createContext({ variant: "default" });
+var DialogHeader = import_react17.default.forwardRef(({ className, children, ...props }, ref) => {
+  const { variant } = import_react17.default.useContext(DialogContext);
   const variantStyles = {
     default: {
       backgroundColor: "var(--color-background)",
@@ -3293,7 +3595,7 @@ var DialogHeader = import_react15.default.forwardRef(({ className, children, ...
       borderColor: "var(--color-error-border)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref,
@@ -3308,7 +3610,7 @@ var DialogHeader = import_react15.default.forwardRef(({ className, children, ...
   );
 });
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = import_react15.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var DialogTitle = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "h2",
   {
     ref,
@@ -3321,7 +3623,7 @@ var DialogTitle = import_react15.default.forwardRef(({ className, children, ...p
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = import_react15.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var DialogDescription = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "p",
   {
     ref,
@@ -3331,9 +3633,9 @@ var DialogDescription = import_react15.default.forwardRef(({ className, children
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogContent = import_react15.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime17.jsx)("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
 DialogContent.displayName = "DialogContent";
-var DialogFooter = import_react15.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var DialogFooter = import_react17.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "div",
   {
     ref,
@@ -3348,9 +3650,9 @@ var DialogFooter = import_react15.default.forwardRef(({ className, children, ...
 DialogFooter.displayName = "DialogFooter";
 
 // src/feedback/alert.tsx
-var import_react16 = __toESM(require("react"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Alert = import_react16.default.forwardRef(
+var import_react18 = __toESM(require("react"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Alert = import_react18.default.forwardRef(
   ({
     className,
     variant = "info",
@@ -3390,7 +3692,7 @@ var Alert = import_react16.default.forwardRef(
       error: { color: "var(--color-error-border)" }
     };
     const defaultIcons = {
-      info: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      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)(
         "path",
         {
           fillRule: "evenodd",
@@ -3398,7 +3700,7 @@ var Alert = import_react16.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      success: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      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)(
         "path",
         {
           fillRule: "evenodd",
@@ -3406,7 +3708,7 @@ var Alert = import_react16.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      warning: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      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)(
         "path",
         {
           fillRule: "evenodd",
@@ -3414,7 +3716,7 @@ var Alert = import_react16.default.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      error: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      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)(
         "path",
         {
           fillRule: "evenodd",
@@ -3423,7 +3725,7 @@ var Alert = import_react16.default.forwardRef(
         }
       ) })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref,
@@ -3431,13 +3733,13 @@ var Alert = import_react16.default.forwardRef(
         className: cn("relative border rounded-lg p-4", className),
         role: "alert",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h5", { className: "font-semibold mb-1", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm", children })
+        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 })
           ] }),
-          dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               type: "button",
@@ -3471,7 +3773,7 @@ var Alert = import_react16.default.forwardRef(
               },
               className: "shrink-0 rounded-lg p-1.5 inline-flex focus:outline-none",
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              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)(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -3489,9 +3791,9 @@ var Alert = import_react16.default.forwardRef(
 Alert.displayName = "Alert";
 
 // src/layout/container.tsx
-var import_react17 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Container = import_react17.default.forwardRef(
+var import_react19 = __toESM(require("react"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Container = import_react19.default.forwardRef(
   ({
     className,
     maxWidth = "xl",
@@ -3508,7 +3810,7 @@ var Container = import_react17.default.forwardRef(
       "2xl": "max-w-screen-2xl",
       full: "max-w-full"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -3528,32 +3830,32 @@ var Container = import_react17.default.forwardRef(
 Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
-var import_react18 = __toESM(require("react"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react20 = __toESM(require("react"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SectionLayout({
   children,
   hasStickyPreview = false
 }) {
   if (!hasStickyPreview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
   }
-  const childArray = import_react18.default.Children.toArray(children);
+  const childArray = import_react20.default.Children.toArray(children);
   if (childArray.length === 0) {
     return null;
   }
   const stickyPreview = childArray[0];
   const scrollableContent = childArray.slice(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     stickyPreview,
-    scrollableContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-8", children: scrollableContent })
+    scrollableContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-8", children: scrollableContent })
   ] });
 }
 
 // src/layout/nav.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_react19 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Nav = import_react19.default.forwardRef(
+var import_react21 = __toESM(require("react"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Nav = import_react21.default.forwardRef(
   ({
     className,
     items,
@@ -3567,16 +3869,42 @@ var Nav = import_react19.default.forwardRef(
     sticky = false,
     activeId,
     onItemClick,
+    borderless = false,
+    transparent = false,
+    blur = false,
+    position = "static",
+    autoHideOnScroll = false,
     ...props
   }, ref) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, import_react19.useState)(false);
-    const [openDropdownId, setOpenDropdownId] = (0, import_react19.useState)(
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, import_react21.useState)(false);
+    const [openDropdownId, setOpenDropdownId] = (0, import_react21.useState)(
       null
     );
-    const dropdownRef = (0, import_react19.useRef)(null);
-    const mobileMenuRef = (0, import_react19.useRef)(null);
-    const [navElement, setNavElement] = (0, import_react19.useState)(null);
-    (0, import_react19.useEffect)(() => {
+    const dropdownRef = (0, import_react21.useRef)(null);
+    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);
+    (0, import_react21.useEffect)(() => {
+      if (!autoHideOnScroll || position === "static") {
+        setIsNavVisible(true);
+        return;
+      }
+      const handleScroll = () => {
+        const currentScrollY = window.scrollY;
+        if (currentScrollY < 10) {
+          setIsNavVisible(true);
+        } else if (currentScrollY > lastScrollY) {
+          setIsNavVisible(false);
+        } else {
+          setIsNavVisible(true);
+        }
+        setLastScrollY(currentScrollY);
+      };
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [lastScrollY, autoHideOnScroll, position]);
+    (0, import_react21.useEffect)(() => {
       function handleClickOutside(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
           setOpenDropdownId(null);
@@ -3590,7 +3918,7 @@ var Nav = import_react19.default.forwardRef(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [isMobileMenuOpen, mobileMenuDirection]);
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       function handleEscape(event) {
         if (event.key === "Escape") {
           setIsMobileMenuOpen(false);
@@ -3602,12 +3930,24 @@ var Nav = import_react19.default.forwardRef(
         document.removeEventListener("keydown", handleEscape);
       };
     }, []);
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       setIsMobileMenuOpen(false);
     }, [mobileMenuDirection]);
+    const positionClass = position === "static" ? "" : position === "fixed" ? "fixed" : "sticky";
+    const transformClass = autoHideOnScroll && position !== "static" ? `transition-transform duration-500 ease-in-out ${isNavVisible ? "translate-y-0" : "-translate-y-full"}` : "";
+    const hasCustomPositioning = className?.match(/(left-|right-|inset-)/);
     const baseStyles = cn(
-      "bg-(--color-background)",
-      sticky && "sticky top-0 [z-index:var(--z-index-nav)]"
+      // Position
+      positionClass && `${positionClass} [z-index:var(--z-index-nav)]`,
+      // Default positioning only if not custom
+      positionClass && !hasCustomPositioning && "top-0 left-0 right-0",
+      // Transform for auto-hide
+      transformClass,
+      // Background
+      !transparent && !blur && "bg-(--color-background)",
+      transparent && "bg-transparent",
+      // Blur effect (glassmorphism)
+      blur && "backdrop-blur-md bg-transparent"
     );
     const containerStyles = cn(
       "min-h-14 md:min-h-16",
@@ -3665,7 +4005,7 @@ var Nav = import_react19.default.forwardRef(
     };
     const renderNavItem = (item, isMobile = false) => {
       if (item.type === "divider") {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             className: cn(
@@ -3677,7 +4017,7 @@ var Nav = import_react19.default.forwardRef(
         );
       }
       if (item.type === "custom" && item.render) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: item.render() }, item.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: item.render() }, item.id);
       }
       const isActive = activeId === item.id;
       const isDropdownOpen = openDropdownId === item.id;
@@ -3691,11 +4031,11 @@ var Nav = import_react19.default.forwardRef(
         orientation === "vertical" && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
-      const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-        item.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: item.label }),
-        item.badge && /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)(
+      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)(
           import_lucide_react3.ChevronDown,
           {
             className: cn(
@@ -3706,8 +4046,8 @@ var Nav = import_react19.default.forwardRef(
         )
       ] });
       if (hasChildren) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: () => handleItemClick(item),
@@ -3716,14 +4056,14 @@ var Nav = import_react19.default.forwardRef(
               children: content
             }
           ),
-          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime20.jsx)("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 "button",
                 {
                   onClick: () => handleItemClick(child),
@@ -3734,9 +4074,9 @@ var Nav = import_react19.default.forwardRef(
                     activeId === child.id && "bg-(--color-primary)/10 text-(--color-primary) [font-weight:var(--font-semibold)]"
                   ),
                   children: [
-                    child.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-shrink-0", children: child.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: child.label }),
-                    child.badge && /* @__PURE__ */ (0, import_jsx_runtime20.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_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.id
@@ -3746,7 +4086,7 @@ var Nav = import_react19.default.forwardRef(
         ] }, item.id);
       }
       if (item.href) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "a",
           {
             href: item.href,
@@ -3758,7 +4098,7 @@ var Nav = import_react19.default.forwardRef(
           item.id
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           onClick: () => handleItemClick(item),
@@ -3769,7 +4109,7 @@ var Nav = import_react19.default.forwardRef(
         item.id
       );
     };
-    const desktopNav = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    const desktopNav = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: cn(
@@ -3780,7 +4120,7 @@ var Nav = import_react19.default.forwardRef(
         children: items.map((item) => renderNavItem(item))
       }
     );
-    const setRefs = import_react19.default.useCallback(
+    const setRefs = import_react21.default.useCallback(
       (node) => {
         setNavElement(node);
         if (typeof ref === "function") {
@@ -3791,22 +4131,25 @@ var Nav = import_react19.default.forwardRef(
       },
       [ref]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "nav",
       {
         ref: setRefs,
         className: cn(
           baseStyles,
-          "relative border border-(--color-border)",
+          "relative",
+          // Border styles
+          !borderless && "border border-(--color-border)",
+          borderless && "border-0",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: containerStyles, children: [
-            logo && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "shrink-0", children: logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: containerStyles, children: [
+            logo && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "shrink-0", children: logo }),
             desktopNav,
-            actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
@@ -3815,11 +4158,11 @@ var Nav = import_react19.default.forwardRef(
                   breakpointClasses[mobileBreakpoint]
                 ),
                 "aria-label": "Toggle menu",
-                children: isMobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react3.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react3.Menu, { className: "w-6 h-6" })
+                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" })
               }
             )
           ] }),
-          mobileMenuDirection === "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          mobileMenuDirection === "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               ref: mobileMenuRef,
@@ -3828,26 +4171,29 @@ var Nav = import_react19.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_runtime20.jsx)("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
             }
           ),
-          mobileMenuDirection !== "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          mobileMenuDirection !== "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            isMobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 className: cn(
-                  "fixed inset-0 bg-black/50 [z-index:var(--z-index-nav-mobile-overlay)]",
+                  "fixed inset-0 [z-index:var(--z-index-nav-mobile-overlay)]",
                   breakpointClasses[mobileBreakpoint]
                 ),
+                style: {
+                  backgroundColor: "var(--overlay-background, rgba(0, 0, 0, 0.4))"
+                },
                 onClick: () => setIsMobileMenuOpen(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 ref: mobileMenuRef,
                 className: cn(
-                  "fixed top-0 bottom-0 w-64 bg-(--color-background) [z-index:var(--z-index-nav-mobile-menu)] overflow-y-auto transition-transform duration-200 ease-in-out shadow-lg",
+                  "fixed top-0 bottom-0 w-64 bg-(--color-background) [z-index:var(--z-index-nav-mobile-menu)] overflow-y-auto transition-transform ease-in-out shadow-lg",
                   breakpointClasses[mobileBreakpoint],
                   mobileMenuDirection === "left" && [
                     "left-0 border-r border-(--color-border)",
@@ -3859,7 +4205,10 @@ var Nav = import_react19.default.forwardRef(
                   ],
                   !isMobileMenuOpen && "invisible"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
+                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)) })
               }
             )
           ] })
@@ -3872,8 +4221,8 @@ Nav.displayName = "Nav";
 
 // src/layout/drawer.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react20 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Drawer({
   title,
   subtitle,
@@ -3885,18 +4234,21 @@ function Drawer({
   position = "right",
   homeUrl,
   autoHideOnScroll = true,
-  headerActions
+  headerActions,
+  borderless = false,
+  transparent = false,
+  blur = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react20.useState)(false);
-  const [isHeaderVisible, setIsHeaderVisible] = (0, import_react20.useState)(true);
-  const [lastScrollY, setLastScrollY] = (0, import_react20.useState)(0);
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react22.useState)(false);
+  const [isHeaderVisible, setIsHeaderVisible] = (0, import_react22.useState)(true);
+  const [lastScrollY, setLastScrollY] = (0, import_react22.useState)(0);
   const isLeft = position === "left";
   const handleItemClick = (itemId) => {
     onItemClick(itemId);
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!autoHideOnScroll) {
       setIsHeaderVisible(true);
       return;
@@ -3915,22 +4267,23 @@ function Drawer({
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY, autoHideOnScroll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.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 ${isHeaderVisible ? "translate-y-0" : "-translate-y-full"}`,
+        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"}`,
         style: {
-          background: "var(--color-background)",
-          borderBottom: "1px solid var(--color-border)"
+          backgroundColor: blur ? "var(--color-muted)" : transparent ? "transparent" : "var(--color-background)",
+          opacity: blur ? 0.85 : 1,
+          borderBottom: !borderless && !blur ? "1px solid var(--color-border)" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
-                homeUrl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+                homeUrl && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "a",
                   {
                     href: homeUrl,
@@ -3939,14 +4292,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_runtime21.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "svg",
                       {
                         className: "w-5 h-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -3959,7 +4312,7 @@ function Drawer({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(!mobileMenuOpen),
@@ -3968,13 +4321,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_runtime21.jsx)(import_lucide_react4.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Menu, { className: "w-6 h-6" })
+                    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" })
                   }
                 )
               ] }),
-              headerActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center", children: headerActions }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              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)(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -3984,7 +4337,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "p",
                   {
                     className: "text-caption",
@@ -4000,41 +4353,46 @@ function Drawer({
         )
       }
     ),
-    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
-        className: "fixed inset-0 bg-black/50 lg:hidden",
-        style: { zIndex: 9998 },
+        className: "fixed inset-0 lg:hidden transition-opacity ease-in-out",
+        style: {
+          zIndex: 9998,
+          transitionDuration: "var(--transition-drawer-duration, 500ms)",
+          backgroundColor: "var(--overlay-background, rgba(0, 0, 0, 0.4))"
+        },
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "aside",
       {
         className: `
           fixed top-0 bottom-0 w-64
-          transition-transform duration-500 ease-in-out overflow-y-auto
+          transition-all ease-out overflow-y-auto
           ${isLeft ? "left-0" : "right-0"}
           lg:translate-x-0 lg:top-0
           ${mobileMenuOpen ? "translate-x-0 top-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} top-0`}
         `,
         style: {
+          transitionDuration: "var(--transition-drawer-duration, 500ms)",
           background: "var(--color-background)",
           borderLeft: isLeft ? "none" : "1px solid var(--color-border)",
           borderRight: isLeft ? "1px solid var(--color-border)" : "none",
           ...mobileMenuOpen && typeof window !== "undefined" && window.innerWidth < 1024 ? { zIndex: 9999 } : {}
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               className: "hidden lg:block px-6 py-5",
               style: {
-                borderBottom: "1px solid var(--color-border)",
-                background: "var(--color-surface-elevated)"
+                borderBottom: "none",
+                background: "var(--color-muted)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -4044,7 +4402,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "p",
                   {
                     className: "mt-0.5 text-caption",
@@ -4057,14 +4415,14 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               className: "lg:hidden p-4 flex items-center justify-between",
               style: { borderBottom: "1px solid var(--color-border)" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "h1",
                     {
                       className: "font-bold text-h5",
@@ -4074,7 +4432,7 @@ function Drawer({
                       children: title
                     }
                   ),
-                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "p",
                     {
                       className: "mt-1 text-caption",
@@ -4085,7 +4443,7 @@ function Drawer({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(false),
@@ -4094,20 +4452,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_runtime21.jsx)(import_lucide_react4.X, { className: "w-5 h-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { className: "w-5 h-5" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               style: {
                 paddingTop: sectionIndex > 0 ? "var(--drawer-section-padding-y)" : "0"
               },
               children: [
-                section.title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                section.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "h3",
                   {
                     className: "font-semibold uppercase tracking-wide text-caption",
@@ -4119,7 +4477,7 @@ function Drawer({
                     children: section.title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "ul",
                   {
                     style: {
@@ -4127,7 +4485,7 @@ function Drawer({
                       flexDirection: "column",
                       gap: "var(--drawer-item-spacing)"
                     },
-                    children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                       "button",
                       {
                         onClick: () => handleItemClick(item.id),
@@ -4155,8 +4513,8 @@ function Drawer({
                           boxShadow: activeItem === item.id ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
                         },
                         children: [
-                          item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "shrink-0 opacity-75", children: item.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.label })
+                          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.id))
@@ -4166,7 +4524,7 @@ function Drawer({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               className: "p-4 mt-auto",
@@ -4180,50 +4538,9 @@ function Drawer({
   ] });
 }
 
-// src/layout/header.tsx
-var import_react21 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function Header({
-  children,
-  autoHideOnScroll = true,
-  className = "",
-  position = "fixed"
-}) {
-  const [isHeaderVisible, setIsHeaderVisible] = (0, import_react21.useState)(true);
-  const [lastScrollY, setLastScrollY] = (0, import_react21.useState)(0);
-  (0, import_react21.useEffect)(() => {
-    if (!autoHideOnScroll || position === "static") {
-      setIsHeaderVisible(true);
-      return;
-    }
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      if (currentScrollY < 10) {
-        setIsHeaderVisible(true);
-      } else if (currentScrollY > lastScrollY) {
-        setIsHeaderVisible(false);
-      } else {
-        setIsHeaderVisible(true);
-      }
-      setLastScrollY(currentScrollY);
-    };
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [lastScrollY, autoHideOnScroll, position]);
-  const positionClass = position === "static" ? "" : position;
-  const transformClass = autoHideOnScroll && position !== "static" ? `transition-transform duration-500 ease-in-out ${isHeaderVisible ? "translate-y-0" : "-translate-y-full"}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "header",
-    {
-      className: `${positionClass} top-0 left-0 right-0 ${transformClass} ${className}`,
-      children
-    }
-  );
-}
-
 // src/layout/sidebar-nav.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function SidebarNav({
   title,
@@ -4235,7 +4552,7 @@ function SidebarNav({
   footer,
   position = "right"
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react22.useState)(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react23.useState)(false);
   const isLeft = position === "left";
   const handleItemClick = (itemId) => {
     onItemClick(itemId);
@@ -4320,9 +4637,9 @@ function SidebarNav({
 }
 
 // src/shared/empty-state.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var EmptyState = import_react23.default.forwardRef(
+var EmptyState = import_react24.default.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
@@ -4346,7 +4663,7 @@ var EmptyState = import_react23.default.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/contexts/ThemeProvider.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/themes/dark.json
 var dark_default = {
@@ -4451,6 +4768,12 @@ var dark_default = {
       "indigo-bg-hover": "#383570",
       "indigo-text": "#a8a5e8"
     }
+  },
+  transitions: {
+    "drawer-duration": "500ms"
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.5)"
   }
 };
 
@@ -4557,6 +4880,12 @@ var light_default = {
       "indigo-bg-hover": "#c7d2fe",
       "indigo-text": "#4f46e5"
     }
+  },
+  transitions: {
+    "drawer-duration": "500ms"
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.4)"
   }
 };
 
@@ -4569,7 +4898,7 @@ var themes_default = themes2;
 
 // src/contexts/ThemeProvider.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react24.createContext)(void 0);
+var ThemeContext = (0, import_react25.createContext)(void 0);
 var themeRegistry = themes_default;
 var getInitialTheme = (defaultTheme = "dark") => {
   if (typeof window === "undefined") return defaultTheme;
@@ -4586,10 +4915,10 @@ function ThemeProvider({
   customTheme,
   storageKey = "yomologic-theme"
 }) {
-  const [currentTheme, setCurrentTheme] = (0, import_react24.useState)(
+  const [currentTheme, setCurrentTheme] = (0, import_react25.useState)(
     () => getInitialTheme(defaultTheme)
   );
-  const [availableThemes] = (0, import_react24.useState)(
+  const [availableThemes] = (0, import_react25.useState)(
     Object.values(themeRegistry).map((t) => ({ id: t.id, name: t.name }))
   );
   const setCSSVariable = (name, value) => {
@@ -4628,6 +4957,16 @@ function ThemeProvider({
         setCSSVariable(varName, value);
       });
     });
+    if (theme.transitions) {
+      Object.entries(theme.transitions).forEach(([key, value]) => {
+        setCSSVariable(`--transition-${key}`, value);
+      });
+    }
+    if (theme.overlay) {
+      Object.entries(theme.overlay).forEach(([key, value]) => {
+        setCSSVariable(`--overlay-${key}`, value);
+      });
+    }
     setCSSVariable("--background", theme.colors.background);
     setCSSVariable("--foreground", theme.colors.foreground);
   };
@@ -4681,7 +5020,7 @@ function ThemeProvider({
 `;
     return css;
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const theme = customTheme || themeRegistry[currentTheme];
     if (theme) {
       applyTheme(theme);
@@ -4703,7 +5042,7 @@ function ThemeProvider({
   );
 }
 function useTheme() {
-  const context = (0, import_react24.useContext)(ThemeContext);
+  const context = (0, import_react25.useContext)(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -4740,7 +5079,6 @@ function useTheme() {
   FormControl,
   FormControlLabel,
   FormHelperText,
-  Header,
   Input,
   Nav,
   RadioGroup,
@@ -4751,6 +5089,7 @@ function useTheme() {
   Slider,
   Spinner,
   Switch,
+  Textarea,
   ThemeProvider,
   cn,
   themes,