@yomologic/react-ui 0.5.2 → 0.5.3

package/dist/index.mjs

@@ -148,7 +148,10 @@ var Button = React.forwardRef(
 Button.displayName = "Button";
 
 // src/ui/input.tsx
-import React2, { useId as useId2, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import React2 from "react";
+
+// src/ui/hooks/useFormField.ts
+import { useEffect, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/ui/form.tsx
 import {
@@ -686,6 +689,209 @@ 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 = useId2();
+  const form = useForm();
+  const formControl = useFormControl();
+  const internalRef = useRef2(null);
+  const [validationError, setValidationError] = useState3();
+  const stableId = useRef2(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);
+  };
+  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
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Input = React2.forwardRef(
@@ -709,66 +915,186 @@ var Input = React2.forwardRef(
     errorMessages,
     ...props
   }, ref) => {
-    const autoId = useId2();
+    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__ */ jsxs3(
+      "div",
+      {
+        className: cn("flex flex-col", fullWidth && "w-full"),
+        style: { marginBottom: "var(--form-control-spacing)" },
+        children: [
+          shouldRenderLabel && label && /* @__PURE__ */ jsxs3(
+            "label",
+            {
+              htmlFor: fieldId,
+              className: "block text-small font-semibold text-(--color-muted-foreground) mb-1",
+              children: [
+                label,
+                isRequired && /* @__PURE__ */ jsx4("span", { className: "ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+            leftIcon && /* @__PURE__ */ jsx4("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-(--color-placeholder)", children: leftIcon }),
+            /* @__PURE__ */ jsx4(
+              "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__ */ jsx4("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-(--color-placeholder)", children: rightIcon })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "h-5 mt-1.5", children: [
+            shouldRenderError && inputError && /* @__PURE__ */ jsx4(
+              "p",
+              {
+                className: "text-small text-error",
+                id: `${fieldId}-error`,
+                role: "alert",
+                children: inputError
+              }
+            ),
+            helperText && !inputError && shouldRenderLabel && /* @__PURE__ */ jsx4(
+              "p",
+              {
+                className: "text-small text-(--color-muted-foreground)",
+                id: `${fieldId}-helper`,
+                children: helperText
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/textarea.tsx
+import React3, { useId as useId3, useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Textarea = React3.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 = useId3();
     const form = useForm();
     const formControl = useFormControl();
-    const internalRef = useRef2(null);
-    const [validationError, setValidationError] = useState3();
-    const stableId = useRef2(void 0);
+    const internalRef = useRef3(null);
+    const [validationError, setValidationError] = useState4();
+    const stableId = useRef3(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;
     };
@@ -788,44 +1114,27 @@ var Input = React2.forwardRef(
       setValidationError(void 0);
       onValidationError?.(void 0);
     };
-    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`;
+      }
+    };
+    useEffect2(() => {
       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);
@@ -835,13 +1144,18 @@ var Input = React2.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]);
+    useEffect2(() => {
+      if (autoResize) {
+        adjustHeight();
+      }
+    }, [textareaValue, autoResize]);
     const handleChange = (e) => {
       const newValue = e.target.value;
       if (form && name) {
@@ -851,6 +1165,9 @@ var Input = React2.forwardRef(
       } else {
         runValidation(newValue);
       }
+      if (autoResize) {
+        adjustHeight();
+      }
       onChange?.(e);
     };
     const handleBlur = (e) => {
@@ -867,103 +1184,90 @@ var Input = React2.forwardRef(
       onBlur?.(e);
     };
     const shouldRenderLabel = label && !formControl;
-    const shouldRenderError = inputError && !formControl;
-    return /* @__PURE__ */ jsxs3(
+    const shouldRenderError = textareaError && !formControl;
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn("flex flex-col", fullWidth && "w-full"),
         style: { marginBottom: "var(--form-control-spacing)" },
-        suppressHydrationWarning: true,
         children: [
-          shouldRenderLabel && /* @__PURE__ */ jsxs3(
-            "label",
-            {
-              htmlFor: inputId,
-              className: "block text-small font-semibold text-(--color-muted-foreground) mb-1",
-              suppressHydrationWarning: true,
-              children: [
-                label,
-                isRequired && /* @__PURE__ */ jsx4("span", { className: "ml-1", children: "*" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs3(
-            "div",
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-1", children: [
+            shouldRenderLabel && /* @__PURE__ */ jsxs4(
+              "label",
+              {
+                htmlFor: textareaId,
+                className: "block text-small font-semibold text-(--color-muted-foreground)",
+                children: [
+                  label,
+                  isRequired && /* @__PURE__ */ jsx5("span", { className: "ml-1", children: "*" })
+                ]
+              }
+            ),
+            showCharacterCount && maxLengthValue && /* @__PURE__ */ jsxs4("span", { className: "text-small text-(--color-muted-foreground)", children: [
+              currentLength,
+              "/",
+              maxLengthValue
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "relative", children: /* @__PURE__ */ jsx5(
+            "textarea",
             {
-              className: "relative *:data-lastpass-icon-root:hidden",
-              suppressHydrationWarning: true,
-              children: [
-                leftIcon && /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-(--color-placeholder)",
-                    suppressHydrationWarning: true,
-                    children: leftIcon
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "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__ */ jsx4(
-                  "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__ */ jsxs3("div", { className: "h-5 mt-1.5", suppressHydrationWarning: true, children: [
-            shouldRenderError && inputError && /* @__PURE__ */ jsx4(
+          ) }),
+          /* @__PURE__ */ jsxs4("div", { className: "h-5 mt-1.5", children: [
+            shouldRenderError && textareaError && /* @__PURE__ */ jsx5(
               "p",
               {
                 className: "text-small text-error",
-                id: `${inputId}-error`,
+                id: `${textareaId}-error`,
                 role: "alert",
-                suppressHydrationWarning: true,
-                children: inputError
+                children: textareaError
               }
             ),
-            helperText && !inputError && !formControl && /* @__PURE__ */ jsx4(
+            helperText && !textareaError && !formControl && /* @__PURE__ */ jsx5(
               "p",
               {
                 className: "text-small text-(--color-muted-foreground)",
-                id: `${inputId}-helper`,
-                suppressHydrationWarning: true,
+                id: `${textareaId}-helper`,
                 children: helperText
               }
             )
@@ -973,12 +1277,12 @@ var Input = React2.forwardRef(
     );
   }
 );
-Input.displayName = "Input";
+Textarea.displayName = "Textarea";
 
 // src/ui/card.tsx
-import React3 from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var Card = React3.forwardRef(
+import React4 from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Card = React4.forwardRef(
   ({
     className,
     variant = "default",
@@ -1002,7 +1306,7 @@ var Card = React3.forwardRef(
       lg: "p-6"
     };
     const hoverStyles = hoverable ? "hover:shadow-lg transition-shadow cursor-pointer" : "";
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         ref,
@@ -1018,7 +1322,7 @@ var Card = React3.forwardRef(
         } : void 0,
         ...props,
         children: [
-          variant === "accent" && /* @__PURE__ */ jsx5(
+          variant === "accent" && /* @__PURE__ */ jsx6(
             "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",
@@ -1032,7 +1336,7 @@ var Card = React3.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "div",
   {
     ref,
@@ -1041,7 +1345,7 @@ var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "h3",
   {
     ref,
@@ -1053,7 +1357,7 @@ var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "p",
   {
     ref,
@@ -1062,9 +1366,9 @@ var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("pt-0", className), ...props }));
+var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: cn("pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "div",
   {
     ref,
@@ -1073,7 +1377,7 @@ var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardFooter.displayName = "CardFooter";
-var CardMedia = React3.forwardRef(
+var CardMedia = React4.forwardRef(
   ({
     className,
     image,
@@ -1091,7 +1395,7 @@ var CardMedia = React3.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__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "img",
         {
           ref,
@@ -1104,7 +1408,7 @@ var CardMedia = React3.forwardRef(
       );
     }
     if (component === "video" && video) {
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "video",
         {
           ref,
@@ -1115,7 +1419,7 @@ var CardMedia = React3.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         ref,
@@ -1132,7 +1436,7 @@ var CardMedia = React3.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = React3.forwardRef(
+var CardActions = React4.forwardRef(
   ({ className, disableSpacing = false, position = "left", ...props }, ref) => {
     const justifyContent = {
       left: "justify-start",
@@ -1144,7 +1448,7 @@ var CardActions = React3.forwardRef(
       center: "px-4 py-4",
       right: "pl-4 pr-4 py-4"
     }[position];
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         ref,
@@ -1160,8 +1464,8 @@ var CardActions = React3.forwardRef(
   }
 );
 CardActions.displayName = "CardActions";
-var CardActionArea = React3.forwardRef(
-  ({ className, disabled = false, children, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardActionArea = React4.forwardRef(
+  ({ className, disabled = false, children, ...props }, ref) => /* @__PURE__ */ jsx6(
     "div",
     {
       ref,
@@ -1183,9 +1487,9 @@ var CardActionArea = React3.forwardRef(
 CardActionArea.displayName = "CardActionArea";
 
 // src/ui/badge.tsx
-import React4 from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var Badge = React4.forwardRef(
+import React5 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Badge = React5.forwardRef(
   ({
     className,
     variant = "default",
@@ -1232,7 +1536,7 @@ var Badge = React4.forwardRef(
       lg: "w-4 h-4",
       xl: "w-5 h-5"
     };
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "span",
       {
         ref,
@@ -1240,7 +1544,7 @@ var Badge = React4.forwardRef(
         className: cn(baseStyles, sizes[size], className),
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsx6(
+          leftIcon && /* @__PURE__ */ jsx7(
             "span",
             {
               className: cn(
@@ -1251,7 +1555,7 @@ var Badge = React4.forwardRef(
             }
           ),
           children,
-          rightIcon && /* @__PURE__ */ jsx6(
+          rightIcon && /* @__PURE__ */ jsx7(
             "span",
             {
               className: cn(
@@ -1269,8 +1573,8 @@ var Badge = React4.forwardRef(
 Badge.displayName = "Badge";
 
 // src/ui/checkbox.tsx
-import React5, { useId as useId3, useState as useState4, useRef as useRef3, useEffect as useEffect2 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import React6, { useId as useId4, useState as useState5, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Checkbox({
   label,
   name,
@@ -1286,13 +1590,13 @@ function Checkbox({
   errorMessage
 }) {
   const form = useForm();
-  const autoId = useId3();
-  const stableId = useRef3(void 0);
+  const autoId = useId4();
+  const stableId = useRef4(void 0);
   if (!stableId.current) {
     stableId.current = id || `checkbox-${autoId}`;
   }
   const checkboxId = stableId.current;
-  const [validationError, setValidationError] = useState4();
+  const [validationError, setValidationError] = useState5();
   let checked;
   let displayError;
   if (form && name) {
@@ -1308,7 +1612,7 @@ function Checkbox({
     }
     return void 0;
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -1357,10 +1661,10 @@ function Checkbox({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
-      /* @__PURE__ */ jsxs6("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-        /* @__PURE__ */ jsx7("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
+      /* @__PURE__ */ jsxs7("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+        /* @__PURE__ */ jsx8("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx8(
           "div",
           {
             className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
@@ -1371,7 +1675,7 @@ function Checkbox({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -1379,7 +1683,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"
@@ -1395,7 +1698,7 @@ function Checkbox({
           }
         )
       ] }),
-      label && /* @__PURE__ */ jsxs6(
+      label && /* @__PURE__ */ jsxs7(
         "label",
         {
           htmlFor: checkboxId,
@@ -1404,7 +1707,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)",
@@ -1412,12 +1714,12 @@ function Checkbox({
           },
           children: [
             label,
-            required && /* @__PURE__ */ jsx7("span", { className: "ml-1", children: "*" })
+            required && /* @__PURE__ */ jsx8("span", { className: "ml-1", children: "*" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx7("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+    /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx8("p", { className: "text-small text-error", role: "alert", children: displayError }) })
   ] });
 }
 function CheckboxGroup({
@@ -1436,7 +1738,7 @@ function CheckboxGroup({
   validate
 }) {
   const form = useForm();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (form && name) {
       const validator = validate || (required ? (value2) => {
         if (!value2 || value2.length === 0) {
@@ -1467,24 +1769,24 @@ function CheckboxGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs6(
+        label && /* @__PURE__ */ jsxs7(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ jsx7("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx8("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             className: cn(
@@ -1492,7 +1794,7 @@ function CheckboxGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ jsxs6(
+              return /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   className: cn(
@@ -1500,8 +1802,8 @@ function CheckboxGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs6("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-                      /* @__PURE__ */ jsx7("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsxs7("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+                      /* @__PURE__ */ jsx8("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx8(
                         "div",
                         {
                           className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
@@ -1512,7 +1814,7 @@ function CheckboxGroup({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ jsx7(
+                      /* @__PURE__ */ jsx8(
                         "input",
                         {
                           type: "checkbox",
@@ -1540,7 +1842,7 @@ function CheckboxGroup({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       "label",
                       {
                         htmlFor: `${name}-${option.value}`,
@@ -1564,7 +1866,7 @@ function CheckboxGroup({
             })
           }
         ),
-        /* @__PURE__ */ jsx7("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ jsx8(
           "p",
           {
             className: `text-small ${error ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -1578,8 +1880,8 @@ function CheckboxGroup({
 }
 
 // src/ui/radio.tsx
-import { useState as useState5, useEffect as useEffect3 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect4 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function RadioGroup({
   label,
   name,
@@ -1597,8 +1899,8 @@ function RadioGroup({
   validate
 }) {
   const form = useForm();
-  const [validationError, setValidationError] = useState5();
-  const [touched, setTouched] = useState5(false);
+  const [validationError, setValidationError] = useState6();
+  const [touched, setTouched] = useState6(false);
   let value;
   let displayError;
   if (form && name) {
@@ -1608,7 +1910,7 @@ function RadioGroup({
     value = externalValue;
     displayError = error || validationError;
   }
-  useEffect3(() => {
+  useEffect4(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -1623,7 +1925,7 @@ function RadioGroup({
       return () => form.unregisterField(name);
     }
   }, [form, name]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!form && touched && required && !value) {
       setValidationError(errorMessage || "Please select an option");
     } else if (!form) {
@@ -1648,24 +1950,24 @@ function RadioGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs7(
+        label && /* @__PURE__ */ jsxs8(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ jsx8("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx9("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             className: cn(
@@ -1674,7 +1976,7 @@ function RadioGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ jsxs7(
+              return /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   className: cn(
@@ -1682,8 +1984,8 @@ function RadioGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "relative group/radio flex items-center shrink-0", children: [
-                      /* @__PURE__ */ jsx8("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsxs8("div", { className: "relative group/radio flex items-center shrink-0", children: [
+                      /* @__PURE__ */ jsx9("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx9(
                         "div",
                         {
                           className: "rounded-full scale-0 group-hover/radio:scale-100 group-active/radio:scale-100 transition-transform duration-200 ease-out",
@@ -1694,7 +1996,7 @@ function RadioGroup({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx9(
                         "input",
                         {
                           type: "radio",
@@ -1719,7 +2021,7 @@ function RadioGroup({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "label",
                       {
                         htmlFor: `${name}-${option.value}`,
@@ -1743,7 +2045,7 @@ function RadioGroup({
             })
           }
         ),
-        /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ jsx9(
           "p",
           {
             className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -1758,8 +2060,8 @@ function RadioGroup({
 
 // src/ui/select.tsx
 import { ChevronDown, X } from "lucide-react";
-import { useState as useState6, useRef as useRef4, useEffect as useEffect4 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState7, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Select({
   name,
   label,
@@ -1779,9 +2081,9 @@ function Select({
   errorMessage
 }) {
   const form = useForm();
-  const [isOpen, setIsOpen] = useState6(false);
-  const dropdownRef = useRef4(null);
-  const [validationError, _setValidationError] = useState6();
+  const [isOpen, setIsOpen] = useState7(false);
+  const dropdownRef = useRef5(null);
+  const [validationError, _setValidationError] = useState7();
   let value;
   let displayError;
   if (form && name) {
@@ -1791,7 +2093,7 @@ function Select({
     value = externalValue;
     displayError = error || validationError;
   }
-  useEffect4(() => {
+  useEffect5(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && (val === void 0 || val === null || val === "")) {
@@ -1832,7 +2134,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)]`
   };
-  useEffect4(() => {
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1871,25 +2173,25 @@ function Select({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `w-full ${className}`,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs8(
+        label && /* @__PURE__ */ jsxs9(
           "label",
           {
             className: "block text-small font-semibold mb-1",
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ jsx9("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx10("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs8("div", { ref: dropdownRef, className: "relative", children: [
-          /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9("div", { ref: dropdownRef, className: "relative", children: [
+          /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
@@ -1905,9 +2207,9 @@ function Select({
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "truncate", children: getSelectedLabel() }),
-                /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 ml-2", children: [
-                  value && /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10("span", { className: "truncate", children: getSelectedLabel() }),
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 ml-2", children: [
+                  value && /* @__PURE__ */ jsx10(
                     "div",
                     {
                       onClick: handleClear,
@@ -1915,7 +2217,7 @@ function Select({
                       role: "button",
                       "aria-label": "Clear selection",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ jsx9(
+                      children: /* @__PURE__ */ jsx10(
                         X,
                         {
                           className: `${iconSizeStyles[size]} text-(--color-muted-foreground)`
@@ -1923,7 +2225,7 @@ function Select({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     ChevronDown,
                     {
                       className: `${iconSizeStyles[size]} text-(--color-placeholder) transition-transform duration-200 shrink-0 ${isOpen ? "transform rotate-180" : ""}`
@@ -1933,18 +2235,18 @@ function Select({
               ]
             }
           ),
-          isOpen && !disabled && /* @__PURE__ */ jsx9(
+          isOpen && !disabled && /* @__PURE__ */ jsx10(
             "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__ */ jsx9("div", { onClick: () => setIsOpen(false), children })
+                /* @__PURE__ */ jsx10("div", { onClick: () => setIsOpen(false), children })
               ) : (
                 // Standard options
-                /* @__PURE__ */ jsxs8("ul", { children: [
-                  /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs9("ul", { children: [
+                  /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -1959,7 +2261,7 @@ function Select({
                       children: placeholder
                     }
                   ) }, "__placeholder__"),
-                  options.map((option) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
+                  options.map((option) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -1981,7 +2283,7 @@ function Select({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx10(
           "p",
           {
             className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
@@ -1994,9 +2296,9 @@ function Select({
 }
 
 // src/ui/spinner.tsx
-import React6 from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var Spinner = React6.forwardRef(
+import React7 from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var Spinner = React7.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
       sm: "h-4 w-4",
@@ -2009,7 +2311,7 @@ var Spinner = React6.forwardRef(
       secondary: "text-(--color-muted-foreground)",
       white: "text-white"
     };
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         ref,
@@ -2019,7 +2321,7 @@ var Spinner = React6.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs10(
             "svg",
             {
               className: cn("animate-spin", sizes[size], colors[color]),
@@ -2027,7 +2329,7 @@ var Spinner = React6.forwardRef(
               fill: "none",
               viewBox: "0 0 24 24",
               children: [
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "circle",
                   {
                     className: "opacity-25",
@@ -2038,7 +2340,7 @@ var Spinner = React6.forwardRef(
                     strokeWidth: "4"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "path",
                   {
                     className: "opacity-75",
@@ -2049,7 +2351,7 @@ var Spinner = React6.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsx10("p", { className: "text-small text-(--color-muted-foreground)", children: label })
+          label && /* @__PURE__ */ jsx11("p", { className: "text-small text-(--color-muted-foreground)", children: label })
         ]
       }
     );
@@ -2059,8 +2361,8 @@ Spinner.displayName = "Spinner";
 
 // src/ui/code-snippet.tsx
 import { Highlight, themes } from "prism-react-renderer";
-import { useState as useState7 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function CodeSnippet({
   code,
   language = "tsx",
@@ -2072,8 +2374,8 @@ function CodeSnippet({
     body: "text-body",
     h6: "text-h6"
   };
-  const [copied, setCopied] = useState7(false);
-  const [showTooltip, setShowTooltip] = useState7(false);
+  const [copied, setCopied] = useState8(false);
+  const [showTooltip, setShowTooltip] = useState8(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -2083,9 +2385,9 @@ function CodeSnippet({
       console.error("Failed to copy:", err);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "relative group w-full", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs11("div", { className: "relative group w-full", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
+      /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: handleCopy,
@@ -2095,14 +2397,14 @@ function CodeSnippet({
           "aria-label": "Copy code",
           children: copied ? (
             // Check icon
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "svg",
               {
                 className: "w-4 h-4 text-green-400",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx11(
+                children: /* @__PURE__ */ jsx12(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2115,14 +2417,14 @@ function CodeSnippet({
             )
           ) : (
             // Copy icon
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "svg",
               {
                 className: "w-4 h-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx11(
+                children: /* @__PURE__ */ jsx12(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2136,26 +2438,26 @@ function CodeSnippet({
           )
         }
       ),
-      showTooltip && !copied && /* @__PURE__ */ jsxs10("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__ */ jsxs11("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-[#1f2937] text-white text-caption rounded shadow-lg whitespace-nowrap border border-[#374151]", children: [
         "Copy code",
-        /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
+        /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
       ] }),
-      copied && /* @__PURE__ */ jsxs10("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__ */ jsxs11("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-caption rounded shadow-lg whitespace-nowrap", children: [
         "Copied!",
-        /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+        /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           Highlight,
           {
             theme: themes.vsDark,
             code,
             language,
-            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx11(
+            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx12(
               "pre",
               {
                 style: {
@@ -2167,7 +2469,7 @@ function CodeSnippet({
                   whiteSpace: wrap ? "pre-wrap" : "pre",
                   wordBreak: wrap ? "break-word" : "normal"
                 },
-                children: tokens.map((line, i) => /* @__PURE__ */ jsx11("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx11(
+                children: tokens.map((line, i) => /* @__PURE__ */ jsx12("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx12(
                   "span",
                   {
                     ...getTokenProps({ token })
@@ -2185,8 +2487,8 @@ function CodeSnippet({
 
 // src/ui/rating.tsx
 import { Star } from "lucide-react";
-import React7, { useId as useId4 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import React8, { useId as useId5 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var Rating = ({
   value,
   max = 5,
@@ -2201,8 +2503,8 @@ var Rating = ({
   valuePosition = "inline",
   valueFormat = "decimal"
 }) => {
-  const uniqueId = useId4();
-  const [hoverValue, setHoverValue] = React7.useState(null);
+  const uniqueId = useId5();
+  const [hoverValue, setHoverValue] = React8.useState(null);
   const handleStarClick = (starIndex) => {
     if (interactive && onChange) {
       onChange(starIndex);
@@ -2228,7 +2530,7 @@ var Rating = ({
     const isHalf = displayValue >= i - 0.5 && displayValue < i;
     const isEmpty = displayValue < i - 0.5;
     stars.push(
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(
         "span",
         {
           onClick: () => handleStarClick(i),
@@ -2261,7 +2563,7 @@ var Rating = ({
           },
           className: responsive ? "sm:w-(--star-size) sm:h-(--star-size) w-(--star-mobile-size) h-(--star-mobile-size)" : "",
           children: [
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               Star,
               {
                 size: displaySize,
@@ -2270,7 +2572,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isFull && /* @__PURE__ */ jsx12(
+            isFull && /* @__PURE__ */ jsx13(
               Star,
               {
                 size: displaySize,
@@ -2279,7 +2581,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isHalf && /* @__PURE__ */ jsxs11(
+            isHalf && /* @__PURE__ */ jsxs12(
               "svg",
               {
                 width: displaySize,
@@ -2287,7 +2589,7 @@ var Rating = ({
                 viewBox: `0 0 ${displaySize} ${displaySize}`,
                 style: { position: "absolute", left: 0, top: 0 },
                 children: [
-                  /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs11(
+                  /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs12(
                     "linearGradient",
                     {
                       id: `half-${uniqueId}-${i}`,
@@ -2296,12 +2598,12 @@ var Rating = ({
                       y1: "0",
                       y2: "0",
                       children: [
-                        /* @__PURE__ */ jsx12("stop", { offset: "50%", stopColor: color }),
-                        /* @__PURE__ */ jsx12("stop", { offset: "50%", stopColor: "transparent" })
+                        /* @__PURE__ */ jsx13("stop", { offset: "50%", stopColor: color }),
+                        /* @__PURE__ */ jsx13("stop", { offset: "50%", stopColor: "transparent" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     Star,
                     {
                       size: displaySize,
@@ -2320,7 +2622,7 @@ var Rating = ({
   }
   const valueText = valueFormat === "fraction" ? `${value.toFixed(1)}/${max}` : value.toFixed(1);
   if (showValue && valuePosition === "bottom") {
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className,
@@ -2331,7 +2633,7 @@ var Rating = ({
           gap: gap * 2
         },
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "div",
             {
               style: {
@@ -2342,7 +2644,7 @@ var Rating = ({
               children: stars
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "span",
             {
               style: {
@@ -2357,7 +2659,7 @@ var Rating = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className,
@@ -2370,7 +2672,7 @@ var Rating = ({
       },
       children: [
         stars,
-        showValue && /* @__PURE__ */ jsx12(
+        showValue && /* @__PURE__ */ jsx13(
           "span",
           {
             style: {
@@ -2388,7 +2690,7 @@ var Rating = ({
 };
 
 // src/ui/divider.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var Divider = ({
   variant = "fullWidth",
   orientation = "horizontal",
@@ -2418,21 +2720,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__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         role: "presentation",
         className: `flex items-center gap-3 ${variantClasses[variant]} ${className}`,
         children: [
-          textAlign !== "left" && /* @__PURE__ */ jsx13(
+          textAlign !== "left" && /* @__PURE__ */ jsx14(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
               className: leftLineClasses
             }
           ),
-          /* @__PURE__ */ jsx13("div", { style: textStyles, className: "whitespace-nowrap", children }),
-          textAlign !== "right" && /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14("div", { style: textStyles, className: "whitespace-nowrap", children }),
+          textAlign !== "right" && /* @__PURE__ */ jsx14(
             "div",
             {
               style: { ...baseStyles, ...thicknessStyle },
@@ -2444,7 +2746,7 @@ var Divider = ({
     );
   }
   if (isVertical) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         role: "separator",
@@ -2454,7 +2756,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "hr",
     {
       style: { ...baseStyles, ...thicknessStyle },
@@ -2464,8 +2766,8 @@ var Divider = ({
 };
 
 // src/ui/slider.tsx
-import { useState as useState8, useRef as useRef5, useEffect as useEffect5 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState9, useRef as useRef6, useEffect as useEffect6 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 0,
@@ -2489,21 +2791,21 @@ var Slider = ({
   "aria-labelledby": ariaLabelledBy
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = useState8(
+  const [internalValue, setInternalValue] = useState9(
     controlledValue ?? defaultValue
   );
-  const [isDragging, setIsDragging] = useState8(false);
-  const [activeThumb, setActiveThumb] = useState8(null);
-  const sliderRef = useRef5(null);
+  const [isDragging, setIsDragging] = useState9(false);
+  const [activeThumb, setActiveThumb] = useState9(null);
+  const sliderRef = useRef6(null);
   const currentValue = isControlled ? controlledValue : internalValue;
   const isRange = Array.isArray(currentValue);
   const isVertical = orientation === "vertical";
-  useEffect5(() => {
+  useEffect6(() => {
     if (isControlled) {
       setInternalValue(controlledValue);
     }
   }, [isControlled, controlledValue]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isRange && Array.isArray(currentValue)) {
       const clampedValues = currentValue.map(
         (v) => Math.max(min, Math.min(max, v))
@@ -2576,7 +2878,7 @@ var Slider = ({
       updateValue(newValue);
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isDragging) return;
     const handleGlobalMove = (e) => {
       if (isVertical && "touches" in e) {
@@ -2703,7 +3005,7 @@ var Slider = ({
       const showLabelAlways = valueLabelDisplay === "on";
       const showLabelOnActiveOrHover = valueLabelDisplay === "auto";
       const thumbStyle = isVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
-      return /* @__PURE__ */ jsxs13(
+      return /* @__PURE__ */ jsxs14(
         "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`,
@@ -2711,19 +3013,19 @@ var Slider = ({
           onMouseDown: handleMouseDown(index),
           onTouchStart: handleMouseDown(index),
           children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "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__ */ jsxs13(
+            showLabelAlways && /* @__PURE__ */ jsxs14(
               "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__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "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"}`
@@ -2732,13 +3034,13 @@ var Slider = ({
                 ]
               }
             ),
-            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs13(
+            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs14(
               "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__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "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"}`
@@ -2756,13 +3058,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__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: `${containerClasses} ${className}`,
       style: isVertical ? { minHeight: "200px", height: "200px" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             ref: sliderRef,
@@ -2780,13 +3082,13 @@ var Slider = ({
             "aria-orientation": orientation,
             tabIndex: disabled ? -1 : 0,
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "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__ */ jsx14(
+              track !== false && /* @__PURE__ */ jsx15(
                 "div",
                 {
                   className: `absolute ${isVertical ? "inset-x-0" : "inset-y-0"} ${currentColorStyles.track} rounded-full ${disabled ? "opacity-50" : ""} z-0`,
@@ -2809,32 +3111,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__ */ jsxs13(
+                return /* @__PURE__ */ jsxs14(
                   "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__ */ jsx14(
+                      /* @__PURE__ */ jsx15(
                         "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__ */ jsx14(
+                      mark.label && /* @__PURE__ */ jsx15(
                         "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__ */ jsxs13(
+                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ jsxs14(
                         "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__ */ jsx14(
+                            /* @__PURE__ */ jsx15(
                               "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"}`
@@ -2852,7 +3154,7 @@ var Slider = ({
             ]
           }
         ),
-        name && /* @__PURE__ */ jsx14(
+        name && /* @__PURE__ */ jsx15(
           "input",
           {
             type: "hidden",
@@ -2867,8 +3169,8 @@ var Slider = ({
 };
 
 // src/ui/switch.tsx
-import { useState as useState9, useEffect as useEffect6 } from "react";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState10, useEffect as useEffect7 } from "react";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Switch({
   checked: controlledChecked,
   onChange,
@@ -2884,7 +3186,7 @@ function Switch({
   errorMessage
 }) {
   const form = useForm();
-  const [internalChecked, setInternalChecked] = useState9(false);
+  const [internalChecked, setInternalChecked] = useState10(false);
   let checked;
   if (form && name) {
     checked = form.values[name] ?? controlledChecked ?? false;
@@ -2892,7 +3194,7 @@ function Switch({
     const isControlled = controlledChecked !== void 0;
     checked = isControlled ? controlledChecked : internalChecked;
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (form && name) {
       const validator = async (val) => {
         if (required && !val) {
@@ -2965,7 +3267,7 @@ function Switch({
     top: "gap-2",
     bottom: "gap-2"
   };
-  const switchElement = /* @__PURE__ */ jsx15(
+  const switchElement = /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -2982,7 +3284,7 @@ function Switch({
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:opacity-90",
         checked && !disabled && "focus:ring-blue-500"
       ),
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "span",
         {
           className: cn(
@@ -2995,9 +3297,9 @@ function Switch({
       )
     }
   );
-  const content = !label ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+  const content = !label ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
     switchElement,
-    name && /* @__PURE__ */ jsx15(
+    name && /* @__PURE__ */ jsx16(
       "input",
       {
         type: "checkbox",
@@ -3009,7 +3311,7 @@ function Switch({
         required
       }
     )
-  ] }) : /* @__PURE__ */ jsxs14(
+  ] }) : /* @__PURE__ */ jsxs15(
     "label",
     {
       className: cn(
@@ -3020,7 +3322,7 @@ function Switch({
       ),
       children: [
         switchElement,
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "span",
           {
             className: cn(
@@ -3030,11 +3332,11 @@ function Switch({
             style: !disabled ? { color: "var(--color-muted-foreground)" } : void 0,
             children: [
               label,
-              required && /* @__PURE__ */ jsx15("span", { className: "ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx16("span", { className: "ml-1", children: "*" })
             ]
           }
         ),
-        name && /* @__PURE__ */ jsx15(
+        name && /* @__PURE__ */ jsx16(
           "input",
           {
             type: "checkbox",
@@ -3049,7 +3351,7 @@ function Switch({
       ]
     }
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className,
@@ -3062,8 +3364,8 @@ function Switch({
 }
 
 // src/ui/dialog.tsx
-import React9, { useEffect as useEffect7 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import React10, { useEffect as useEffect8 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   onClose,
@@ -3074,7 +3376,7 @@ var Dialog = ({
   closeOnEscape = true,
   children
 }) => {
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open || !closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -3084,7 +3386,7 @@ var Dialog = ({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open, closeOnEscape, onClose]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (open) {
       document.body.style.overflow = "hidden";
     } else {
@@ -3114,14 +3416,14 @@ var Dialog = ({
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "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__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs16(
         "div",
         {
           className: cn(
@@ -3129,7 +3431,7 @@ var Dialog = ({
             sizes[size]
           ),
           children: [
-            showCloseButton && /* @__PURE__ */ jsx16(
+            showCloseButton && /* @__PURE__ */ jsx17(
               "button",
               {
                 onClick: onClose,
@@ -3172,14 +3474,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__ */ jsx16(
+                children: /* @__PURE__ */ jsx17(
                   "svg",
                   {
                     className: "w-5 h-5",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx16(
+                    children: /* @__PURE__ */ jsx17(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3192,7 +3494,7 @@ var Dialog = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx16(DialogContext.Provider, { value: { variant }, children })
+            /* @__PURE__ */ jsx17(DialogContext.Provider, { value: { variant }, children })
           ]
         }
       )
@@ -3200,9 +3502,9 @@ var Dialog = ({
   );
 };
 Dialog.displayName = "Dialog";
-var DialogContext = React9.createContext({ variant: "default" });
-var DialogHeader = React9.forwardRef(({ className, children, ...props }, ref) => {
-  const { variant } = React9.useContext(DialogContext);
+var DialogContext = React10.createContext({ variant: "default" });
+var DialogHeader = React10.forwardRef(({ className, children, ...props }, ref) => {
+  const { variant } = React10.useContext(DialogContext);
   const variantStyles = {
     default: {
       backgroundColor: "var(--color-background)",
@@ -3225,7 +3527,7 @@ var DialogHeader = React9.forwardRef(({ className, children, ...props }, ref) =>
       borderColor: "var(--color-error-border)"
     }
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ref,
@@ -3240,7 +3542,7 @@ var DialogHeader = React9.forwardRef(({ className, children, ...props }, ref) =>
   );
 });
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(
+var DialogTitle = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
   "h2",
   {
     ref,
@@ -3253,7 +3555,7 @@ var DialogTitle = React9.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(
+var DialogDescription = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
   "p",
   {
     ref,
@@ -3263,9 +3565,9 @@ var DialogDescription = React9.forwardRef(({ className, children, ...props }, re
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17("div", { ref, className: cn("px-6 py-4", className), ...props, children }));
 DialogContent.displayName = "DialogContent";
-var DialogFooter = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(
+var DialogFooter = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx17(
   "div",
   {
     ref,
@@ -3280,9 +3582,9 @@ var DialogFooter = React9.forwardRef(({ className, children, ...props }, ref) =>
 DialogFooter.displayName = "DialogFooter";
 
 // src/feedback/alert.tsx
-import React10 from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var Alert = React10.forwardRef(
+import React11 from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var Alert = React11.forwardRef(
   ({
     className,
     variant = "info",
@@ -3322,7 +3624,7 @@ var Alert = React10.forwardRef(
       error: { color: "var(--color-error-border)" }
     };
     const defaultIcons = {
-      info: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17(
+      info: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
         "path",
         {
           fillRule: "evenodd",
@@ -3330,7 +3632,7 @@ var Alert = React10.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      success: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17(
+      success: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
         "path",
         {
           fillRule: "evenodd",
@@ -3338,7 +3640,7 @@ var Alert = React10.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      warning: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17(
+      warning: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
         "path",
         {
           fillRule: "evenodd",
@@ -3346,7 +3648,7 @@ var Alert = React10.forwardRef(
           clipRule: "evenodd"
         }
       ) }),
-      error: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17(
+      error: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
         "path",
         {
           fillRule: "evenodd",
@@ -3355,7 +3657,7 @@ var Alert = React10.forwardRef(
         }
       ) })
     };
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         ref,
@@ -3363,13 +3665,13 @@ var Alert = React10.forwardRef(
         className: cn("relative border rounded-lg p-4", className),
         role: "alert",
         ...props,
-        children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx17("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
-          /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
-            title && /* @__PURE__ */ jsx17("h5", { className: "font-semibold mb-1", children: title }),
-            /* @__PURE__ */ jsx17("div", { className: "text-sm", children })
+        children: /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx18("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
+          /* @__PURE__ */ jsxs17("div", { className: "flex-1", children: [
+            title && /* @__PURE__ */ jsx18("h5", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ jsx18("div", { className: "text-sm", children })
           ] }),
-          dismissible && onDismiss && /* @__PURE__ */ jsx17(
+          dismissible && onDismiss && /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
@@ -3403,7 +3705,7 @@ var Alert = React10.forwardRef(
               },
               className: "shrink-0 rounded-lg p-1.5 inline-flex focus:outline-none",
               "aria-label": "Close",
-              children: /* @__PURE__ */ jsx17("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17(
+              children: /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -3421,9 +3723,9 @@ var Alert = React10.forwardRef(
 Alert.displayName = "Alert";
 
 // src/layout/container.tsx
-import React11 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Container = React11.forwardRef(
+import React12 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Container = React12.forwardRef(
   ({
     className,
     maxWidth = "xl",
@@ -3440,7 +3742,7 @@ var Container = React11.forwardRef(
       "2xl": "max-w-screen-2xl",
       full: "max-w-full"
     };
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -3460,32 +3762,32 @@ var Container = React11.forwardRef(
 Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
-import React12 from "react";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import React13 from "react";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function SectionLayout({
   children,
   hasStickyPreview = false
 }) {
   if (!hasStickyPreview) {
-    return /* @__PURE__ */ jsx19(Fragment3, { children });
+    return /* @__PURE__ */ jsx20(Fragment3, { children });
   }
-  const childArray = React12.Children.toArray(children);
+  const childArray = React13.Children.toArray(children);
   if (childArray.length === 0) {
     return null;
   }
   const stickyPreview = childArray[0];
   const scrollableContent = childArray.slice(1);
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
     stickyPreview,
-    scrollableContent.length > 0 && /* @__PURE__ */ jsx19("div", { className: "space-y-8", children: scrollableContent })
+    scrollableContent.length > 0 && /* @__PURE__ */ jsx20("div", { className: "space-y-8", children: scrollableContent })
   ] });
 }
 
 // src/layout/nav.tsx
 import { Menu, X as X2, ChevronDown as ChevronDown2 } from "lucide-react";
-import React13, { useState as useState10, useEffect as useEffect8, useRef as useRef6 } from "react";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-var Nav = React13.forwardRef(
+import React14, { useState as useState11, useEffect as useEffect9, useRef as useRef7 } from "react";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var Nav = React14.forwardRef(
   ({
     className,
     items,
@@ -3499,16 +3801,42 @@ var Nav = React13.forwardRef(
     sticky = false,
     activeId,
     onItemClick,
+    borderless = false,
+    transparent = false,
+    blur = false,
+    position = "static",
+    autoHideOnScroll = false,
     ...props
   }, ref) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState10(false);
-    const [openDropdownId, setOpenDropdownId] = useState10(
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState11(false);
+    const [openDropdownId, setOpenDropdownId] = useState11(
       null
     );
-    const dropdownRef = useRef6(null);
-    const mobileMenuRef = useRef6(null);
-    const [navElement, setNavElement] = useState10(null);
-    useEffect8(() => {
+    const dropdownRef = useRef7(null);
+    const mobileMenuRef = useRef7(null);
+    const [navElement, setNavElement] = useState11(null);
+    const [isNavVisible, setIsNavVisible] = useState11(true);
+    const [lastScrollY, setLastScrollY] = useState11(0);
+    useEffect9(() => {
+      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]);
+    useEffect9(() => {
       function handleClickOutside(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
           setOpenDropdownId(null);
@@ -3522,7 +3850,7 @@ var Nav = React13.forwardRef(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [isMobileMenuOpen, mobileMenuDirection]);
-    useEffect8(() => {
+    useEffect9(() => {
       function handleEscape(event) {
         if (event.key === "Escape") {
           setIsMobileMenuOpen(false);
@@ -3534,12 +3862,24 @@ var Nav = React13.forwardRef(
         document.removeEventListener("keydown", handleEscape);
       };
     }, []);
-    useEffect8(() => {
+    useEffect9(() => {
       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",
@@ -3597,7 +3937,7 @@ var Nav = React13.forwardRef(
     };
     const renderNavItem = (item, isMobile = false) => {
       if (item.type === "divider") {
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21(
           "div",
           {
             className: cn(
@@ -3609,7 +3949,7 @@ var Nav = React13.forwardRef(
         );
       }
       if (item.type === "custom" && item.render) {
-        return /* @__PURE__ */ jsx20("div", { children: item.render() }, item.id);
+        return /* @__PURE__ */ jsx21("div", { children: item.render() }, item.id);
       }
       const isActive = activeId === item.id;
       const isDropdownOpen = openDropdownId === item.id;
@@ -3623,11 +3963,11 @@ var Nav = React13.forwardRef(
         orientation === "vertical" && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
-      const content = /* @__PURE__ */ jsxs18(Fragment4, { children: [
-        item.icon && /* @__PURE__ */ jsx20("span", { className: "flex-shrink-0", children: item.icon }),
-        /* @__PURE__ */ jsx20("span", { children: item.label }),
-        item.badge && /* @__PURE__ */ jsx20("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__ */ jsx20(
+      const content = /* @__PURE__ */ jsxs19(Fragment4, { children: [
+        item.icon && /* @__PURE__ */ jsx21("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsx21("span", { children: item.label }),
+        item.badge && /* @__PURE__ */ jsx21("span", { className: "ml-auto inline-flex items-center rounded-full bg-(--color-primary) px-2 py-0.5 text-caption font-medium text-white", children: item.badge }),
+        hasChildren && /* @__PURE__ */ jsx21(
           ChevronDown2,
           {
             className: cn(
@@ -3638,8 +3978,8 @@ var Nav = React13.forwardRef(
         )
       ] });
       if (hasChildren) {
-        return /* @__PURE__ */ jsxs18("div", { className: "relative", ref: dropdownRef, children: [
-          /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsxs19("div", { className: "relative", ref: dropdownRef, children: [
+          /* @__PURE__ */ jsx21(
             "button",
             {
               onClick: () => handleItemClick(item),
@@ -3648,14 +3988,14 @@ var Nav = React13.forwardRef(
               children: content
             }
           ),
-          isDropdownOpen && /* @__PURE__ */ jsx20(
+          isDropdownOpen && /* @__PURE__ */ jsx21(
             "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__ */ jsx20("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs18(
+              children: /* @__PURE__ */ jsx21("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs19(
                 "button",
                 {
                   onClick: () => handleItemClick(child),
@@ -3666,9 +4006,9 @@ var Nav = React13.forwardRef(
                     activeId === child.id && "bg-(--color-primary)/10 text-(--color-primary) [font-weight:var(--font-semibold)]"
                   ),
                   children: [
-                    child.icon && /* @__PURE__ */ jsx20("span", { className: "flex-shrink-0", children: child.icon }),
-                    /* @__PURE__ */ jsx20("span", { children: child.label }),
-                    child.badge && /* @__PURE__ */ jsx20("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__ */ jsx21("span", { className: "flex-shrink-0", children: child.icon }),
+                    /* @__PURE__ */ jsx21("span", { children: child.label }),
+                    child.badge && /* @__PURE__ */ jsx21("span", { className: "ml-auto px-2 py-0.5 [font-size:var(--text-xs)] font-semibold bg-(--color-primary) text-white rounded-[var(--radius-full)]", children: child.badge })
                   ]
                 },
                 child.id
@@ -3678,7 +4018,7 @@ var Nav = React13.forwardRef(
         ] }, item.id);
       }
       if (item.href) {
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21(
           "a",
           {
             href: item.href,
@@ -3690,7 +4030,7 @@ var Nav = React13.forwardRef(
           item.id
         );
       }
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => handleItemClick(item),
@@ -3701,7 +4041,7 @@ var Nav = React13.forwardRef(
         item.id
       );
     };
-    const desktopNav = /* @__PURE__ */ jsx20(
+    const desktopNav = /* @__PURE__ */ jsx21(
       "div",
       {
         className: cn(
@@ -3712,7 +4052,7 @@ var Nav = React13.forwardRef(
         children: items.map((item) => renderNavItem(item))
       }
     );
-    const setRefs = React13.useCallback(
+    const setRefs = React14.useCallback(
       (node) => {
         setNavElement(node);
         if (typeof ref === "function") {
@@ -3723,22 +4063,25 @@ var Nav = React13.forwardRef(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "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__ */ jsxs18("div", { className: containerStyles, children: [
-            logo && /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: logo }),
+          /* @__PURE__ */ jsxs19("div", { className: containerStyles, children: [
+            logo && /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: logo }),
             desktopNav,
-            actions && /* @__PURE__ */ jsx20("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
-            /* @__PURE__ */ jsx20(
+            actions && /* @__PURE__ */ jsx21("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
@@ -3747,11 +4090,11 @@ var Nav = React13.forwardRef(
                   breakpointClasses[mobileBreakpoint]
                 ),
                 "aria-label": "Toggle menu",
-                children: isMobileMenuOpen ? /* @__PURE__ */ jsx20(X2, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx20(Menu, { className: "w-6 h-6" })
+                children: isMobileMenuOpen ? /* @__PURE__ */ jsx21(X2, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx21(Menu, { className: "w-6 h-6" })
               }
             )
           ] }),
-          mobileMenuDirection === "top" && /* @__PURE__ */ jsx20(
+          mobileMenuDirection === "top" && /* @__PURE__ */ jsx21(
             "div",
             {
               ref: mobileMenuRef,
@@ -3760,26 +4103,29 @@ var Nav = React13.forwardRef(
                 breakpointClasses[mobileBreakpoint],
                 isMobileMenuOpen ? "max-h-96 opacity-100 border-(--color-border)" : "max-h-0 opacity-0 border-transparent"
               ),
-              children: /* @__PURE__ */ jsx20("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
+              children: /* @__PURE__ */ jsx21("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
             }
           ),
-          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
-            isMobileMenuOpen && /* @__PURE__ */ jsx20(
+          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs19(Fragment4, { children: [
+            isMobileMenuOpen && /* @__PURE__ */ jsx21(
               "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__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "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)",
@@ -3791,7 +4137,10 @@ var Nav = React13.forwardRef(
                   ],
                   !isMobileMenuOpen && "invisible"
                 ),
-                children: /* @__PURE__ */ jsx20("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__ */ jsx21("div", { className: "flex flex-col space-y-1 px-2 pt-2", children: items.map((item) => renderNavItem(item, true)) })
               }
             )
           ] })
@@ -3804,8 +4153,8 @@ Nav.displayName = "Nav";
 
 // src/layout/drawer.tsx
 import { Menu as Menu2, X as X3 } from "lucide-react";
-import { useState as useState11, useEffect as useEffect9 } from "react";
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState12, useEffect as useEffect10 } from "react";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function Drawer({
   title,
   subtitle,
@@ -3817,18 +4166,21 @@ function Drawer({
   position = "right",
   homeUrl,
   autoHideOnScroll = true,
-  headerActions
+  headerActions,
+  borderless = false,
+  transparent = false,
+  blur = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState11(false);
-  const [isHeaderVisible, setIsHeaderVisible] = useState11(true);
-  const [lastScrollY, setLastScrollY] = useState11(0);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState12(false);
+  const [isHeaderVisible, setIsHeaderVisible] = useState12(true);
+  const [lastScrollY, setLastScrollY] = useState12(0);
   const isLeft = position === "left";
   const handleItemClick = (itemId) => {
     onItemClick(itemId);
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!autoHideOnScroll) {
       setIsHeaderVisible(true);
       return;
@@ -3847,22 +4199,23 @@ function Drawer({
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY, autoHideOnScroll]);
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsx22(
       "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__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs20(
           "div",
           {
             className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
             children: [
-              /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                homeUrl && /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                homeUrl && /* @__PURE__ */ jsx22(
                   "a",
                   {
                     href: homeUrl,
@@ -3871,14 +4224,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__ */ jsx21(
+                    children: /* @__PURE__ */ jsx22(
                       "svg",
                       {
                         className: "w-5 h-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ jsx21(
+                        children: /* @__PURE__ */ jsx22(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -3891,7 +4244,7 @@ function Drawer({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(!mobileMenuOpen),
@@ -3900,13 +4253,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__ */ jsx21(X3, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx21(Menu2, { className: "w-6 h-6" })
+                    children: mobileMenuOpen ? /* @__PURE__ */ jsx22(X3, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx22(Menu2, { className: "w-6 h-6" })
                   }
                 )
               ] }),
-              headerActions && /* @__PURE__ */ jsx21("div", { className: "flex items-center", children: headerActions }),
-              /* @__PURE__ */ jsxs19("div", { children: [
-                /* @__PURE__ */ jsx21(
+              headerActions && /* @__PURE__ */ jsx22("div", { className: "flex items-center", children: headerActions }),
+              /* @__PURE__ */ jsxs20("div", { children: [
+                /* @__PURE__ */ jsx22(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -3916,7 +4269,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ jsx21(
+                subtitle && /* @__PURE__ */ jsx22(
                   "p",
                   {
                     className: "text-caption",
@@ -3932,41 +4285,46 @@ function Drawer({
         )
       }
     ),
-    mobileMenuOpen && /* @__PURE__ */ jsx21(
+    mobileMenuOpen && /* @__PURE__ */ jsx22(
       "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__ */ jsxs19(
+    /* @__PURE__ */ jsxs20(
       "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__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             "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__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "h1",
                   {
                     className: "font-bold text-h5",
@@ -3976,7 +4334,7 @@ function Drawer({
                     children: title
                   }
                 ),
-                subtitle && /* @__PURE__ */ jsx21(
+                subtitle && /* @__PURE__ */ jsx22(
                   "p",
                   {
                     className: "mt-0.5 text-caption",
@@ -3989,14 +4347,14 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             "div",
             {
               className: "lg:hidden p-4 flex items-center justify-between",
               style: { borderBottom: "1px solid var(--color-border)" },
               children: [
-                /* @__PURE__ */ jsxs19("div", { children: [
-                  /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsxs20("div", { children: [
+                  /* @__PURE__ */ jsx22(
                     "h1",
                     {
                       className: "font-bold text-h5",
@@ -4006,7 +4364,7 @@ function Drawer({
                       children: title
                     }
                   ),
-                  subtitle && /* @__PURE__ */ jsx21(
+                  subtitle && /* @__PURE__ */ jsx22(
                     "p",
                     {
                       className: "mt-1 text-caption",
@@ -4017,7 +4375,7 @@ function Drawer({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "button",
                   {
                     onClick: () => setMobileMenuOpen(false),
@@ -4026,20 +4384,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__ */ jsx21(X3, { className: "w-5 h-5" })
+                    children: /* @__PURE__ */ jsx22(X3, { className: "w-5 h-5" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx21("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsx22("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs20(
             "div",
             {
               style: {
                 paddingTop: sectionIndex > 0 ? "var(--drawer-section-padding-y)" : "0"
               },
               children: [
-                section.title && /* @__PURE__ */ jsx21(
+                section.title && /* @__PURE__ */ jsx22(
                   "h3",
                   {
                     className: "font-semibold uppercase tracking-wide text-caption",
@@ -4051,7 +4409,7 @@ function Drawer({
                     children: section.title
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   "ul",
                   {
                     style: {
@@ -4059,7 +4417,7 @@ function Drawer({
                       flexDirection: "column",
                       gap: "var(--drawer-item-spacing)"
                     },
-                    children: section.items.map((item) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsxs19(
+                    children: section.items.map((item) => /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsxs20(
                       "button",
                       {
                         onClick: () => handleItemClick(item.id),
@@ -4087,8 +4445,8 @@ function Drawer({
                           boxShadow: activeItem === item.id ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
                         },
                         children: [
-                          item.icon && /* @__PURE__ */ jsx21("span", { className: "shrink-0 opacity-75", children: item.icon }),
-                          /* @__PURE__ */ jsx21("span", { children: item.label })
+                          item.icon && /* @__PURE__ */ jsx22("span", { className: "shrink-0 opacity-75", children: item.icon }),
+                          /* @__PURE__ */ jsx22("span", { children: item.label })
                         ]
                       }
                     ) }, item.id))
@@ -4098,7 +4456,7 @@ function Drawer({
             },
             sectionIndex
           )) }),
-          footer && /* @__PURE__ */ jsx21(
+          footer && /* @__PURE__ */ jsx22(
             "div",
             {
               className: "p-4 mt-auto",
@@ -4112,51 +4470,10 @@ function Drawer({
   ] });
 }
 
-// src/layout/header.tsx
-import { useState as useState12, useEffect as useEffect10 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-function Header({
-  children,
-  autoHideOnScroll = true,
-  className = "",
-  position = "fixed"
-}) {
-  const [isHeaderVisible, setIsHeaderVisible] = useState12(true);
-  const [lastScrollY, setLastScrollY] = useState12(0);
-  useEffect10(() => {
-    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__ */ jsx22(
-    "header",
-    {
-      className: `${positionClass} top-0 left-0 right-0 ${transformClass} ${className}`,
-      children
-    }
-  );
-}
-
 // src/layout/sidebar-nav.tsx
 import { Menu as Menu3, X as X4 } from "lucide-react";
 import { useState as useState13 } from "react";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function SidebarNav({
   title,
   subtitle,
@@ -4174,8 +4491,8 @@ function SidebarNav({
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsx23("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx23("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs21(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
@@ -4189,7 +4506,7 @@ function SidebarNav({
               children: mobileMenuOpen ? /* @__PURE__ */ jsx23(X4, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ jsx23(Menu3, { className: "w-6 h-6 text-(--color-muted-foreground)" })
             }
           ),
-          /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsxs21("div", { children: [
             /* @__PURE__ */ jsx23("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
             subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
           ] })
@@ -4204,7 +4521,7 @@ function SidebarNav({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       "aside",
       {
         className: `
@@ -4215,18 +4532,18 @@ function SidebarNav({
           ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
         `,
         children: [
-          /* @__PURE__ */ jsxs20("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
             /* @__PURE__ */ jsx23("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
             subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
           ] }),
           /* @__PURE__ */ jsx23("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx23("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsx23("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs21(
             "div",
             {
               className: sectionIndex > 0 ? "mt-6" : "",
               children: [
                 section.title && /* @__PURE__ */ jsx23("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
-                /* @__PURE__ */ jsx23("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs20(
+                /* @__PURE__ */ jsx23("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs21(
                   "button",
                   {
                     onClick: () => handleItemClick(item.id),
@@ -4253,10 +4570,10 @@ function SidebarNav({
 
 // src/shared/empty-state.tsx
 import React17 from "react";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var EmptyState = React17.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       "div",
       {
         ref,
@@ -4388,6 +4705,12 @@ var dark_default = {
       "indigo-bg-hover": "#383570",
       "indigo-text": "#a8a5e8"
     }
+  },
+  transitions: {
+    "drawer-duration": "500ms"
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.5)"
   }
 };
 
@@ -4494,6 +4817,12 @@ var light_default = {
       "indigo-bg-hover": "#c7d2fe",
       "indigo-text": "#4f46e5"
     }
+  },
+  transitions: {
+    "drawer-duration": "500ms"
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.4)"
   }
 };
 
@@ -4565,6 +4894,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);
   };
@@ -4676,7 +5015,6 @@ export {
   FormControl,
   FormControlLabel,
   FormHelperText,
-  Header,
   Input,
   Nav,
   RadioGroup,
@@ -4687,6 +5025,7 @@ export {
   Slider,
   Spinner,
   Switch,
+  Textarea,
   ThemeProvider,
   cn,
   themes_default as themes,