@page-speed/forms 0.4.7 → 0.4.9

package/dist/inputs.js

@@ -1,6 +1,7 @@
-import * as React9 from 'react';
+import * as React17 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Checkbox as Checkbox$1, Label as Label$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1 } from 'radix-ui';
 import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
 
 // src/inputs/TextInput.tsx
@@ -9,6 +10,36 @@ function cn(...inputs) {
 }
 var INPUT_AUTOFILL_RESET_CLASSES = "autofill:bg-transparent autofill:text-foreground [&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))] [&:-webkit-autofill]:[caret-color:hsl(var(--foreground))] [&:-webkit-autofill]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:hover]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[transition:background-color_9999s_ease-out,color_9999s_ease-out]";
 
+// src/components/ui/input.tsx
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ React17.createElement(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        // Core structure - no hardcoded colors, uses CSS variables
+        "flex h-9 w-full min-w-0 rounded-md border border-input",
+        "bg-transparent px-3 py-1 text-base shadow-sm",
+        "transition-colors outline-none md:text-sm",
+        // Focus state - uses ring-ring CSS variable (adapts to theme)
+        "focus-visible:ring-1 focus-visible:ring-ring",
+        // Error state - uses destructive CSS variables (adapts to theme)
+        "aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive",
+        // Disabled state - no color hardcoding
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        // File input specific - inherits text color from parent
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent",
+        "file:text-sm file:font-medium",
+        // Autofill reset - prevents browser from overriding our dynamic colors
+        INPUT_AUTOFILL_RESET_CLASSES,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/inputs/TextInput.tsx
 function TextInput({
   name,
@@ -31,17 +62,8 @@ function TextInput({
     onBlur?.();
   };
   const hasValue = String(value ?? "").trim().length > 0;
-  const combinedClassName = cn(
-    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-    "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    INPUT_AUTOFILL_RESET_CLASSES,
-    !error && hasValue && "ring-2 ring-ring",
-    error && "border-destructive ring-1 ring-destructive",
-    className
-  );
-  return /* @__PURE__ */ React9.createElement(
-    "input",
+  return /* @__PURE__ */ React17.createElement(
+    Input,
     {
       type,
       id,
@@ -52,7 +74,12 @@ function TextInput({
       placeholder,
       disabled,
       required,
-      className: combinedClassName,
+      className: cn(
+        // Valid value indicator - ring-2 when has value and no error
+        !error && hasValue && "ring-2 ring-ring",
+        // Error state - handled by Input component via aria-invalid
+        className
+      ),
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": props["aria-describedby"],
       "aria-required": required || props["aria-required"],
@@ -61,6 +88,30 @@ function TextInput({
   );
 }
 TextInput.displayName = "TextInput";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ React17.createElement(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        // Core structure - uses CSS variables only
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input",
+        "bg-transparent px-3 py-2 text-base shadow-xs",
+        "transition-[color,box-shadow] outline-none md:text-sm",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/inputs/TextArea.tsx
 function TextArea({
   name,
   value,
@@ -85,17 +136,8 @@ function TextArea({
     onBlur?.();
   };
   const hasValue = String(value ?? "").trim().length > 0;
-  const combinedClassName = cn(
-    "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-    "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    INPUT_AUTOFILL_RESET_CLASSES,
-    !error && hasValue && "ring-2 ring-ring",
-    error && "border-destructive ring-1 ring-destructive",
-    className
-  );
-  return /* @__PURE__ */ React9.createElement(
-    "textarea",
+  return /* @__PURE__ */ React17.createElement(
+    Textarea,
     {
       name,
       value: value ?? "",
@@ -104,7 +146,12 @@ function TextArea({
       placeholder,
       disabled,
       required,
-      className: combinedClassName,
+      className: cn(
+        // Valid value indicator - ring-2 when has value and no error
+        !error && hasValue && "ring-2 ring-ring",
+        // Error state - handled by Textarea component via aria-invalid
+        className
+      ),
       rows,
       cols,
       maxLength,
@@ -118,6 +165,175 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        // Core structure - uses CSS variables
+        "peer size-4 shrink-0 rounded-[4px] border border-input bg-transparent shadow-xs",
+        "transition-shadow outline-none",
+        // Checked state - uses primary CSS variables
+        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "data-[state=checked]:border-primary",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      Checkbox$1.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "grid place-content-center text-current transition-none"
+      },
+      /* @__PURE__ */ React17.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React17.createElement("polyline", { points: "20 6 9 17 4 12" })
+      )
+    )
+  );
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/inputs/Checkbox.tsx
+function Checkbox2({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  label,
+  description,
+  useChoiceCard = false,
+  ...props
+}) {
+  const checkboxId = props.id || `checkbox-${name}`;
+  const handleCheckedChange = (checked) => {
+    onChange(checked);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const showChoiceCard = useChoiceCard || !!description;
+  const checkbox = /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+    "input",
+    {
+      type: "checkbox",
+      name,
+      checked: value,
+      onChange: () => {
+      },
+      disabled,
+      required,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: 0,
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: 0
+      }
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    Checkbox,
+    {
+      id: checkboxId,
+      checked: value,
+      onCheckedChange: handleCheckedChange,
+      onBlur: handleBlur,
+      disabled,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  ));
+  if (!label) {
+    return /* @__PURE__ */ React17.createElement("div", { className }, checkbox);
+  }
+  return /* @__PURE__ */ React17.createElement(
+    "label",
+    {
+      htmlFor: checkboxId,
+      className: cn(
+        "flex gap-3 p-3 duration-200",
+        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
+        showChoiceCard && value && "ring-2 ring-ring",
+        showChoiceCard && error && "border-destructive",
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        className
+      )
+    },
+    /* @__PURE__ */ React17.createElement(
+      "div",
+      {
+        className: cn(
+          "flex w-full gap-3",
+          showChoiceCard ? "items-start" : "items-center"
+        )
+      },
+      checkbox,
+      /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React17.createElement(
+        Label,
+        {
+          htmlFor: checkboxId,
+          className: "cursor-pointer font-medium leading-none"
+        },
+        label
+      ), description && /* @__PURE__ */ React17.createElement(
+        "p",
+        {
+          id: `${checkboxId}-description`,
+          className: "text-sm opacity-70 leading-snug"
+        },
+        description
+      ))
+    )
+  );
+}
+Checkbox2.displayName = "Checkbox";
 var LabelGroup = ({
   labelHtmlFor,
   required = false,
@@ -133,11 +349,11 @@ var LabelGroup = ({
     variant === "legend" ? "mb-1.5" : "mb-1 block",
     primaryClassName
   );
-  const requiredIndicator = required ? /* @__PURE__ */ React9.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  const requiredIndicator = required ? /* @__PURE__ */ React17.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
   let primaryElement = null;
   if (primary) {
     if (variant === "label") {
-      primaryElement = /* @__PURE__ */ React9.createElement(
+      primaryElement = /* @__PURE__ */ React17.createElement(
         "label",
         {
           htmlFor: labelHtmlFor,
@@ -148,12 +364,12 @@ var LabelGroup = ({
         requiredIndicator
       );
     } else if (variant === "legend") {
-      primaryElement = /* @__PURE__ */ React9.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React17.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
     } else {
-      primaryElement = /* @__PURE__ */ React9.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React17.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
     }
   }
-  const secondaryElement = secondary ? /* @__PURE__ */ React9.createElement(
+  const secondaryElement = secondary ? /* @__PURE__ */ React17.createElement(
     "p",
     {
       "data-slot": "field-description",
@@ -164,148 +380,12 @@ var LabelGroup = ({
   ) : null;
   if (!primaryElement && !secondaryElement) return null;
   if (variant === "legend") {
-    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, primaryElement, secondaryElement);
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, primaryElement, secondaryElement);
   }
-  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
+  return /* @__PURE__ */ React17.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
 };
 
-// src/inputs/Checkbox.tsx
-function Checkbox({
-  name,
-  value,
-  onChange,
-  onBlur,
-  disabled = false,
-  required = false,
-  error = false,
-  className = "",
-  indeterminate = false,
-  label,
-  description,
-  useChoiceCard = false,
-  ...props
-}) {
-  const inputRef = React9.useRef(null);
-  const checkboxId = props.id || `checkbox-${name}`;
-  React9.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  const handleChange = (e) => {
-    onChange(e.target.checked);
-  };
-  const handleBlur = () => {
-    onBlur?.();
-  };
-  const isActive = value || indeterminate && !value;
-  const checkbox = /* @__PURE__ */ React9.createElement(
-    "div",
-    {
-      className: cn(
-        "relative inline-flex items-center justify-center",
-        !label && className
-      )
-    },
-    /* @__PURE__ */ React9.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "checkbox",
-        id: checkboxId,
-        name,
-        checked: value,
-        onChange: handleChange,
-        onBlur: handleBlur,
-        disabled,
-        required,
-        className: "peer sr-only",
-        "aria-invalid": error || props["aria-invalid"],
-        "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
-        "aria-required": required || props["aria-required"],
-        ...props
-      }
-    ),
-    /* @__PURE__ */ React9.createElement(
-      "div",
-      {
-        className: cn(
-          "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
-          !error && isActive && "border-primary bg-primary text-primary-foreground",
-          !error && !isActive && "border-input bg-transparent",
-          error && isActive && "border-destructive bg-destructive text-destructive-foreground",
-          error && !isActive && "border-destructive bg-transparent",
-          disabled && "opacity-50",
-          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
-        )
-      },
-      value && /* @__PURE__ */ React9.createElement(
-        "svg",
-        {
-          className: "size-3.5",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        },
-        /* @__PURE__ */ React9.createElement("polyline", { points: "20 6 9 17 4 12" })
-      ),
-      indeterminate && !value && /* @__PURE__ */ React9.createElement(
-        "svg",
-        {
-          className: "size-3.5",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        },
-        /* @__PURE__ */ React9.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-      )
-    )
-  );
-  if (label) {
-    return /* @__PURE__ */ React9.createElement(
-      "label",
-      {
-        className: cn(
-          "w-full h-full flex gap-3 p-3 duration-200",
-          useChoiceCard && "border rounded-lg hover:ring-2",
-          useChoiceCard && value && "ring-2",
-          disabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer",
-          className
-        ),
-        htmlFor: checkboxId
-      },
-      /* @__PURE__ */ React9.createElement(
-        "div",
-        {
-          className: cn(
-            "flex w-full flex-row gap-2",
-            useChoiceCard ? "items-start" : "items-center"
-          )
-        },
-        checkbox,
-        /* @__PURE__ */ React9.createElement(
-          LabelGroup,
-          {
-            variant: "text",
-            primary: label,
-            secondary: description,
-            secondaryId: description ? `${checkboxId}-description` : void 0,
-            primaryClassName: "mb-0",
-            secondaryClassName: "text-xs opacity-75"
-          }
-        )
-      )
-    );
-  }
-  return checkbox;
-}
-Checkbox.displayName = "Checkbox";
+// src/inputs/CheckboxGroup.tsx
 function CheckboxGroup({
   name,
   value = [],
@@ -334,11 +414,11 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
-  const useChoiceCard = React9.useMemo(() => {
+  const useChoiceCard = React17.useMemo(() => {
     if (!options) return false;
     return options?.some((opt) => opt.description);
   }, [options]);
-  const countableValue = React9.useMemo(() => {
+  const countableValue = React17.useMemo(() => {
     if (value?.length > 0) {
       return value.length;
     }
@@ -363,7 +443,7 @@ function CheckboxGroup({
     onBlur?.();
   };
   const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
-  const containerClass = React9.useMemo(() => {
+  const containerClass = React17.useMemo(() => {
     return cn(
       "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
       (layout === "grid" || layout === "inline") && "md:grid-cols-2",
@@ -372,7 +452,7 @@ function CheckboxGroup({
   }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement(
     "fieldset",
     {
       className: containerClass,
@@ -382,7 +462,7 @@ function CheckboxGroup({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelGroup,
       {
         labelHtmlFor: name,
@@ -393,8 +473,8 @@ function CheckboxGroup({
         primary: label
       }
     ),
-    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React9.createElement(
-      Checkbox,
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React17.createElement(
+      Checkbox2,
       {
         name: `${name}-select-all`,
         id: `${name}-select-all`,
@@ -411,8 +491,8 @@ function CheckboxGroup({
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      return /* @__PURE__ */ React9.createElement(
-        Checkbox,
+      return /* @__PURE__ */ React17.createElement(
+        Checkbox2,
         {
           key: option.value,
           name,
@@ -429,7 +509,7 @@ function CheckboxGroup({
         }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React9.createElement(
+    (minSelections || maxSelections) && /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: cn(
@@ -438,12 +518,66 @@ function CheckboxGroup({
         ),
         "aria-live": "polite"
       },
-      minSelections && countableValue < minSelections && /* @__PURE__ */ React9.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
-      maxSelections && /* @__PURE__ */ React9.createElement("span", null, countableValue, "/", maxSelections, " selected")
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React17.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React17.createElement("span", null, countableValue, "/", maxSelections, " selected")
     )
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    RadioGroup$1.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    RadioGroup$1.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        // Core structure - uses CSS variables
+        "aspect-square size-4 shrink-0 rounded-full border border-input bg-transparent shadow-xs",
+        "text-primary transition-[color,box-shadow] outline-none",
+        // Focus state - uses ring-ring CSS variable
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state - uses destructive CSS variables
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      RadioGroup$1.Indicator,
+      {
+        "data-slot": "radio-group-indicator",
+        className: "relative flex items-center justify-center"
+      },
+      /* @__PURE__ */ React17.createElement(
+        "svg",
+        {
+          className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React17.createElement("circle", { cx: "12", cy: "12", r: "12" })
+      )
+    )
+  );
+}
+
+// src/inputs/Radio.tsx
 function Radio({
   name,
   value,
@@ -459,146 +593,433 @@ function Radio({
   options,
   ...props
 }) {
-  const handleChange = (optionValue) => {
-    onChange(optionValue);
-  };
-  const handleKeyDown = (e, currentIndex) => {
-    if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-      e.preventDefault();
-      let nextIndex = (currentIndex + 1) % options.length;
-      let attempts = 0;
-      while (options[nextIndex].disabled && attempts < options.length && !disabled) {
-        nextIndex = (nextIndex + 1) % options.length;
-        attempts++;
-      }
-      if (!options[nextIndex].disabled) {
-        handleChange(options[nextIndex].value);
-      }
-    } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-      e.preventDefault();
-      let prevIndex = (currentIndex - 1 + options.length) % options.length;
-      let attempts = 0;
-      while (options[prevIndex].disabled && attempts < options.length && !disabled) {
-        prevIndex = (prevIndex - 1 + options.length) % options.length;
-        attempts++;
-      }
-      if (!options[prevIndex].disabled) {
-        handleChange(options[prevIndex].value);
-      }
-    }
+  const handleValueChange = (selectedValue) => {
+    onChange(selectedValue);
   };
   const handleBlur = () => {
     onBlur?.();
   };
-  const useChoiceCard = React9.useMemo(() => {
+  const useChoiceCard = React17.useMemo(() => {
     return options.some((option) => option.description);
   }, [options]);
-  const containerClass = React9.useMemo(() => {
-    return cn(
-      "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
-      (layout === "grid" || layout === "inline") && "md:grid-cols-2",
-      className
-    );
-  }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
-  const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React9.createElement(
-    "fieldset",
+  return /* @__PURE__ */ React17.createElement("div", { className: cn("w-full", className) }, (label || description) && /* @__PURE__ */ React17.createElement("div", { className: "mb-3" }, label && /* @__PURE__ */ React17.createElement(Label, { className: "text-base font-medium block mb-1" }, label), description && /* @__PURE__ */ React17.createElement(
+    "p",
     {
-      className: containerClass,
-      role: "radiogroup",
+      id: groupDescriptionId,
+      className: "text-sm opacity-70"
+    },
+    description
+  )), /* @__PURE__ */ React17.createElement(
+    RadioGroup,
+    {
+      name,
+      value,
+      onValueChange: handleValueChange,
+      onBlur: handleBlur,
+      disabled,
+      required,
+      className: cn(
+        "gap-3",
+        layout === "grid" && "grid grid-cols-1 md:grid-cols-2",
+        layout === "inline" && "flex flex-wrap"
+      ),
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": groupAriaDescribedBy,
-      "aria-required": required || props["aria-required"],
-      "aria-label": typeof label === "string" ? label : props["aria-label"]
+      "aria-describedby": groupDescriptionId || props["aria-describedby"],
+      "aria-required": required || props["aria-required"]
     },
-    /* @__PURE__ */ React9.createElement(
-      LabelGroup,
-      {
-        variant: "legend",
-        primary: label,
-        secondary: description,
-        secondaryId: groupDescriptionId
-      }
-    ),
-    options.map((option, index) => {
-      const isChecked = value === option.value;
+    options.map((option) => {
+      const isSelected = value === option.value;
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
-      const hasDescription = option.description != null && option.description !== "";
-      const radioIndicator = /* @__PURE__ */ React9.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
-        "input",
-        {
-          type: "radio",
-          id: radioId,
-          name,
-          value: option.value,
-          checked: isChecked,
-          onChange: (e) => handleChange(e.target.value),
-          onBlur: handleBlur,
-          disabled: isDisabled,
-          required,
-          className: "peer sr-only",
-          "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
-        }
-      ), /* @__PURE__ */ React9.createElement(
-        "div",
-        {
-          className: cn(
-            "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
-            !error && isChecked && "border-primary bg-transparent",
-            !error && !isChecked && "border-input bg-transparent",
-            error && isChecked && "border-destructive bg-transparent",
-            error && !isChecked && "border-destructive bg-transparent",
-            isDisabled && "opacity-50",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
-          )
-        },
-        isChecked && /* @__PURE__ */ React9.createElement("div", { className: "size-3 rounded-full bg-primary" })
-      ));
-      const labelContent = /* @__PURE__ */ React9.createElement(
-        LabelGroup,
-        {
-          variant: "text",
-          primary: option.label,
-          secondary: hasDescription ? option.description : void 0,
-          secondaryId: hasDescription ? `${radioId}-description` : void 0,
-          primaryClassName: "mb-0",
-          secondaryClassName: "text-xs opacity-75"
-        }
-      );
-      return /* @__PURE__ */ React9.createElement(
+      const hasDescription = !!option.description;
+      return /* @__PURE__ */ React17.createElement(
         "label",
         {
           key: option.value,
-          className: cn(
-            "w-full h-full flex gap-3 p-3 duration-200",
-            useChoiceCard && "border rounded-lg hover:ring-2",
-            useChoiceCard && isChecked && "ring-2",
-            isDisabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer"
-          ),
           htmlFor: radioId,
-          onKeyDown: (e) => handleKeyDown(e, index),
-          tabIndex: isDisabled ? -1 : 0
+          className: cn(
+            "flex gap-3 p-3 duration-200",
+            useChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
+            useChoiceCard && isSelected && "ring-2 ring-ring",
+            useChoiceCard && error && "border-destructive",
+            isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+          )
         },
-        /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React17.createElement(
           "div",
           {
             className: cn(
-              "flex w-full flex-row gap-2",
+              "flex w-full gap-3",
               useChoiceCard ? "items-start" : "items-center"
             )
           },
-          !useChoiceCard && radioIndicator,
-          labelContent,
-          useChoiceCard && radioIndicator
+          /* @__PURE__ */ React17.createElement(
+            RadioGroupItem,
+            {
+              value: option.value,
+              id: radioId,
+              disabled: isDisabled,
+              className: "mt-0.5",
+              "aria-describedby": hasDescription ? `${radioId}-description` : void 0
+            }
+          ),
+          /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col gap-1 flex-1" }, /* @__PURE__ */ React17.createElement(
+            Label,
+            {
+              htmlFor: radioId,
+              className: "cursor-pointer font-medium leading-none"
+            },
+            option.label
+          ), option.description && /* @__PURE__ */ React17.createElement(
+            "p",
+            {
+              id: `${radioId}-description`,
+              className: "text-sm opacity-70 leading-snug"
+            },
+            option.description
+          ))
         )
       );
     })
+  ));
+}
+Radio.displayName = "Radio";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        // Core structure - uses CSS variables
+        "peer group/switch inline-flex shrink-0 items-center rounded-full",
+        "border border-transparent shadow-xs transition-all outline-none",
+        // State-based backgrounds - use CSS variables
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        // Focus state
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Size variants
+        "data-[size=default]:h-[1.15rem] data-[size=default]:w-8",
+        "data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      Switch$1.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn(
+          // Thumb appearance - inherits from parent theme
+          "bg-background pointer-events-none block rounded-full ring-0 transition-transform",
+          // Size variants
+          "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3",
+          // Position based on state
+          "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  );
+}
+
+// src/inputs/Switch.tsx
+function Switch2({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  label,
+  description,
+  size = "default",
+  ...props
+}) {
+  const switchId = props.id || `switch-${name}`;
+  const handleCheckedChange = (checked) => {
+    onChange(checked);
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const switchElement = /* @__PURE__ */ React17.createElement(
+    Switch,
+    {
+      id: switchId,
+      checked: value,
+      onCheckedChange: handleCheckedChange,
+      onBlur: handleBlur,
+      disabled,
+      size,
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": description ? `${switchId}-description` : props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      ...props
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ React17.createElement("div", { className }, switchElement);
+  }
+  return /* @__PURE__ */ React17.createElement(
+    "label",
+    {
+      htmlFor: switchId,
+      className: cn(
+        "flex items-center gap-3 cursor-pointer",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )
+    },
+    switchElement,
+    /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React17.createElement(
+      Label,
+      {
+        htmlFor: switchId,
+        className: "cursor-pointer font-medium leading-none"
+      },
+      label
+    ), description && /* @__PURE__ */ React17.createElement(
+      "p",
+      {
+        id: `${switchId}-description`,
+        className: "text-sm opacity-70 leading-snug"
+      },
+      description
+    ))
+  );
+}
+Switch2.displayName = "Switch";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(Select$1.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        // Core structure - uses CSS variables
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input",
+        "bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
+        "transition-[color,box-shadow] outline-none",
+        // Focus state
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // Error state
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Size variants
+        "data-[size=default]:h-9 data-[size=sm]:h-8",
+        // Value styling
+        "*:data-[slot=select-value]:line-clamp-1",
+        "*:data-[slot=select-value]:flex",
+        "*:data-[slot=select-value]:items-center",
+        "*:data-[slot=select-value]:gap-2",
+        // SVG styling
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React17.createElement(Select$1.Icon, { asChild: true }, /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        className: "size-4 opacity-50",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React17.createElement("polyline", { points: "6 9 12 15 18 9" })
+    ))
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(Select$1.Portal, null, /* @__PURE__ */ React17.createElement(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(SelectScrollUpButton, null),
+    /* @__PURE__ */ React17.createElement(
+      Select$1.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+        )
+      },
+      children
+    ),
+    /* @__PURE__ */ React17.createElement(SelectScrollDownButton, null)
+  ));
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Select$1.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("px-2 py-1.5 text-xs opacity-70", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        // Core structure - inherits text color
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm",
+        "py-1.5 pr-8 pl-2 text-sm outline-hidden select-none",
+        // Focus state - uses accent CSS variable
+        "focus:bg-accent focus:text-accent-foreground",
+        // Disabled state
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // SVG styling
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Span styling
+        "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      "span",
+      {
+        "data-slot": "select-item-indicator",
+        className: "absolute right-2 flex size-3.5 items-center justify-center"
+      },
+      /* @__PURE__ */ React17.createElement(Select$1.ItemIndicator, null, /* @__PURE__ */ React17.createElement(
+        "svg",
+        {
+          className: "size-4",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React17.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ))
+    ),
+    /* @__PURE__ */ React17.createElement(Select$1.ItemText, null, children)
   );
 }
-Radio.displayName = "Radio";
-function Select({
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        className: "size-4",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React17.createElement("polyline", { points: "18 15 12 9 6 15" })
+    )
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React17.createElement(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        className: "size-4",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React17.createElement("polyline", { points: "6 9 12 15 18 9" })
+    )
+  );
+}
+
+// src/inputs/Select.tsx
+function Select2({
   name,
   value,
   onChange,
@@ -609,283 +1030,83 @@ function Select({
   error = false,
   className = "",
   placeholder = "Select...",
-  searchable = true,
-  clearable = true,
-  loading = false,
   options = [],
   optionGroups = [],
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [searchQuery, setSearchQuery] = React9.useState("");
-  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
-  const triggerRef = React9.useRef(null);
-  const dropdownRef = React9.useRef(null);
-  const searchInputRef = React9.useRef(null);
-  const dropdownId = `${name}-dropdown`;
-  const allOptions = React9.useMemo(() => {
+  const [hasInteracted, setHasInteracted] = React17.useState(false);
+  const allOptions = React17.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React9.useMemo(() => {
-    if (!searchQuery.trim()) {
-      return allOptions;
-    }
-    const query = searchQuery.toLowerCase();
-    return allOptions.filter((option) => {
-      const label = typeof option.label === "string" ? option.label : String(option.label);
-      return label.toLowerCase().includes(query);
-    });
-  }, [allOptions, searchQuery]);
-  const selectedOption = React9.useMemo(() => {
-    return allOptions.find((opt) => opt.value === value);
-  }, [allOptions, value]);
   const hasValue = Boolean(value);
-  const handleSelect = (optionValue) => {
-    onChange(optionValue);
-    setIsOpen(false);
-    setSearchQuery("");
-    setFocusedIndex(-1);
-  };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    onChange("");
-    setSearchQuery("");
-    setFocusedIndex(-1);
+  const handleValueChange = (newValue) => {
+    onChange(newValue);
   };
-  const handleToggle = () => {
-    if (disabled) return;
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-    if (newIsOpen && searchable && searchInputRef.current) {
-      setTimeout(() => searchInputRef.current?.focus(), 0);
-    }
-    if (newIsOpen) {
+  const handleOpenChange = (open) => {
+    if (open) {
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
       onFocus?.();
-    }
-  };
-  const handleSearchChange = (e) => {
-    setSearchQuery(e.target.value);
-    setFocusedIndex(0);
-  };
-  const handleKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          setFocusedIndex(0);
-        } else {
-          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
-          if (enabledOptions.length > 0) {
-            const currentIndexInFiltered = focusedIndex;
-            const nextIndex = (currentIndexInFiltered + 1) % enabledOptions.length;
-            setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextIndex]));
-          }
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (isOpen) {
-          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
-          if (enabledOptions.length > 0) {
-            const currentIndexInFiltered = focusedIndex;
-            const prevIndex = (currentIndexInFiltered - 1 + enabledOptions.length) % enabledOptions.length;
-            setFocusedIndex(filteredOptions.indexOf(enabledOptions[prevIndex]));
-          }
-        }
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
-          const focusedOption = filteredOptions[focusedIndex];
-          if (!focusedOption.disabled) {
-            handleSelect(focusedOption.value);
-          }
-        } else if (!isOpen) {
-          setIsOpen(true);
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        if (isOpen) {
-          setIsOpen(false);
-          setSearchQuery("");
-          setFocusedIndex(-1);
-        }
-        break;
-      case " ":
-        if (!isOpen && !searchable) {
-          e.preventDefault();
-          setIsOpen(true);
-        }
-        break;
-      default:
-        if (!searchable && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
-          const char = e.key.toLowerCase();
-          const matchingOption = filteredOptions.find((opt) => {
-            const label = typeof opt.label === "string" ? opt.label : String(opt.label);
-            return label.toLowerCase().startsWith(char) && !opt.disabled;
-          });
-          if (matchingOption) {
-            handleSelect(matchingOption.value);
-          }
-        }
-        break;
-    }
-  };
-  const handleBlur = (event) => {
-    const nextTarget = event?.relatedTarget;
-    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
-    if (!nextTarget || !focusStayedInside) {
+    } else if (hasInteracted) {
       onBlur?.();
     }
   };
-  const closeDropdown = React9.useCallback(() => {
-    setIsOpen(false);
-    setSearchQuery("");
-    setFocusedIndex(-1);
-    onBlur?.();
-  }, [onBlur]);
-  useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
-    capture: true
-  });
-  const combinedClassName = cn("relative w-full", className);
-  return /* @__PURE__ */ React9.createElement(
-    "div",
+  return /* @__PURE__ */ React17.createElement(
+    Select,
     {
-      className: combinedClassName,
-      onKeyDown: handleKeyDown,
-      onBlur: handleBlur
+      name,
+      value,
+      onValueChange: handleValueChange,
+      onOpenChange: handleOpenChange,
+      disabled,
+      required
     },
-    /* @__PURE__ */ React9.createElement(
-      "select",
-      {
-        name,
-        value,
-        onChange: () => {
-        },
-        disabled,
-        required,
-        "aria-hidden": "true",
-        tabIndex: -1,
-        style: { display: "none" }
-      },
-      /* @__PURE__ */ React9.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React9.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
-    ),
-    /* @__PURE__ */ React9.createElement(
-      "div",
+    /* @__PURE__ */ React17.createElement(
+      SelectTrigger,
       {
-        ref: triggerRef,
         className: cn(
-          "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
-          "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          // Valid value indicator - ring-2 when has value and no error
           !error && hasValue && "ring-2 ring-ring",
-          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
-          error && "border-destructive ring-1 ring-destructive"
+          // Error state - handled by SelectTrigger via aria-invalid
+          className
         ),
-        onClick: handleToggle,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-controls": dropdownId,
         "aria-invalid": error || props["aria-invalid"],
         "aria-describedby": props["aria-describedby"],
-        "aria-required": required || props["aria-required"],
-        "aria-disabled": disabled,
-        tabIndex: disabled ? -1 : 0
+        "aria-required": required || props["aria-required"]
       },
-      /* @__PURE__ */ React9.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React9.createElement("span", { className: "relative" }, placeholder)),
-      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React9.createElement(
-        "button",
+      /* @__PURE__ */ React17.createElement(SelectValue, { placeholder })
+    ),
+    /* @__PURE__ */ React17.createElement(SelectContent, null, optionGroups.length > 0 ? (
+      // Render grouped options
+      optionGroups.map((group, groupIndex) => /* @__PURE__ */ React17.createElement(SelectGroup, { key: groupIndex }, /* @__PURE__ */ React17.createElement(SelectLabel, null, group.label), group.options.map((option) => /* @__PURE__ */ React17.createElement(
+        SelectItem,
         {
-          type: "button",
-          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
-          onClick: handleClear,
-          "aria-label": "Clear selection",
-          tabIndex: -1
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
         },
-        "\u2715"
-      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
-    ),
-    isOpen && /* @__PURE__ */ React9.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: dropdownId,
-        className: "absolute z-50 top-full mt-1 min-w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-        role: "listbox"
-      },
-      searchable && /* @__PURE__ */ React9.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
-        "input",
+        renderOption ? renderOption(option) : option.label
+      ))))
+    ) : (
+      // Render flat options
+      allOptions.map((option) => /* @__PURE__ */ React17.createElement(
+        SelectItem,
         {
-          ref: searchInputRef,
-          type: "text",
-          className: cn(
-            "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
-            INPUT_AUTOFILL_RESET_CLASSES
-          ),
-          placeholder: "Search...",
-          value: searchQuery,
-          onChange: handleSearchChange,
-          onClick: (e) => e.stopPropagation(),
-          "aria-label": "Search options"
-        }
-      )),
-      /* @__PURE__ */ React9.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
-        // Render grouped options
-        optionGroups.map((group, groupIndex) => {
-          const groupOptions = group.options.filter(
-            (opt) => filteredOptions.includes(opt)
-          );
-          if (groupOptions.length === 0) return null;
-          return /* @__PURE__ */ React9.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
-            const globalIndex = filteredOptions.indexOf(option);
-            const isSelected = value === option.value;
-            const isFocused = globalIndex === focusedIndex;
-            const isDisabled = option.disabled;
-            return /* @__PURE__ */ React9.createElement(
-              "div",
-              {
-                key: option.value,
-                className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-muted ${isFocused ? "bg-muted" : ""} ${isSelected ? "font-medium bg-muted" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
-                onClick: () => !isDisabled && handleSelect(option.value),
-                role: "option",
-                "aria-selected": isSelected,
-                "aria-disabled": isDisabled
-              },
-              renderOption ? renderOption(option) : option.label
-            );
-          }));
-        })
-      ) : (
-        // Render flat options
-        filteredOptions.map((option, index) => {
-          const isSelected = value === option.value;
-          const isFocused = index === focusedIndex;
-          const isDisabled = option.disabled;
-          return /* @__PURE__ */ React9.createElement(
-            "div",
-            {
-              key: option.value,
-              className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-muted ${isFocused ? "bg-muted" : ""} ${isSelected ? "font-medium bg-muted" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
-              onClick: () => !isDisabled && handleSelect(option.value),
-              role: "option",
-              "aria-selected": isSelected,
-              "aria-disabled": isDisabled
-            },
-            renderOption ? renderOption(option) : option.label
-          );
-        })
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
+        },
+        renderOption ? renderOption(option) : option.label
       ))
-    )
+    ))
   );
 }
-Select.displayName = "Select";
+Select2.displayName = "Select";
 function MultiSelect({
   name,
   value = [],
@@ -908,20 +1129,21 @@ function MultiSelect({
   renderValue,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [searchQuery, setSearchQuery] = React9.useState("");
-  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
-  const triggerRef = React9.useRef(null);
-  const dropdownRef = React9.useRef(null);
-  const searchInputRef = React9.useRef(null);
+  const [isOpen, setIsOpen] = React17.useState(false);
+  const [searchQuery, setSearchQuery] = React17.useState("");
+  const [focusedIndex, setFocusedIndex] = React17.useState(-1);
+  const [hasInteracted, setHasInteracted] = React17.useState(false);
+  const triggerRef = React17.useRef(null);
+  const dropdownRef = React17.useRef(null);
+  const searchInputRef = React17.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React9.useMemo(() => {
+  const allOptions = React17.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React9.useMemo(() => {
+  const filteredOptions = React17.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -931,11 +1153,11 @@ function MultiSelect({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOptions = React9.useMemo(() => {
+  const selectedOptions = React17.useMemo(() => {
     return allOptions.filter((opt) => value.includes(opt.value));
   }, [allOptions, value]);
   const hasValue = value.length > 0;
-  const isMaxReached = React9.useMemo(() => {
+  const isMaxReached = React17.useMemo(() => {
     return maxSelections !== void 0 && value.length >= maxSelections;
   }, [maxSelections, value.length]);
   const handleToggleOption = (optionValue) => {
@@ -969,6 +1191,9 @@ function MultiSelect({
     if (disabled) return;
     const newIsOpen = !isOpen;
     setIsOpen(newIsOpen);
+    if (newIsOpen && !hasInteracted) {
+      setHasInteracted(true);
+    }
     if (newIsOpen && searchable && searchInputRef.current) {
       setTimeout(() => searchInputRef.current?.focus(), 0);
     }
@@ -1048,24 +1273,27 @@ function MultiSelect({
       onBlur?.();
     }
   };
-  const closeDropdown = React9.useCallback(() => {
+  const closeDropdown = React17.useCallback(() => {
+    if (!isOpen) return;
     setIsOpen(false);
     setSearchQuery("");
     setFocusedIndex(-1);
-    onBlur?.();
-  }, [onBlur]);
+    if (hasInteracted) {
+      onBlur?.();
+    }
+  }, [isOpen, hasInteracted, onBlur]);
   useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
     capture: true
   });
   const combinedClassName = cn("relative w-full", className);
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: combinedClassName,
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "select",
       {
         name,
@@ -1079,10 +1307,10 @@ function MultiSelect({
         style: { display: "none" },
         multiple: true
       },
-      /* @__PURE__ */ React9.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React9.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React17.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "div",
       {
         ref: triggerRef,
@@ -1103,13 +1331,13 @@ function MultiSelect({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center flex-1 overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React17.createElement("div", { className: "flex items-center flex-1 overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React17.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React17.createElement(
         "span",
         {
           key: option.value,
           className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium"
         },
-        renderValue ? renderValue(option) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React9.createElement(
+        renderValue ? renderValue(option) : /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React17.createElement(
           "button",
           {
             type: "button",
@@ -1120,8 +1348,8 @@ function MultiSelect({
           },
           "\u2715"
         ))
-      ))) : /* @__PURE__ */ React9.createElement("span", { className: "relative" }, placeholder)),
-      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React9.createElement(
+      ))) : /* @__PURE__ */ React17.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React17.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1131,9 +1359,9 @@ function MultiSelect({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React17.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React9.createElement(
+    isOpen && /* @__PURE__ */ React17.createElement(
       "div",
       {
         ref: dropdownRef,
@@ -1142,7 +1370,7 @@ function MultiSelect({
         role: "listbox",
         "aria-multiselectable": "true"
       },
-      searchable && /* @__PURE__ */ React9.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
+      searchable && /* @__PURE__ */ React17.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React17.createElement(
         "input",
         {
           ref: searchInputRef,
@@ -1158,7 +1386,7 @@ function MultiSelect({
           "aria-label": "Search options"
         }
       )),
-      showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React9.createElement("div", { className: "flex gap-2 p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
+      showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React17.createElement("div", { className: "flex gap-2 p-2 border-b border-border" }, /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1167,7 +1395,7 @@ function MultiSelect({
           disabled
         },
         "Select All"
-      ), value.length > 0 && /* @__PURE__ */ React9.createElement(
+      ), value.length > 0 && /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1177,20 +1405,20 @@ function MultiSelect({
         },
         "Clear All"
       )),
-      isMaxReached && /* @__PURE__ */ React9.createElement("div", { className: "px-2 py-1 text-xs font-medium text-amber-600 bg-destructive/80 text-destructive-foreground border-b border-destructive" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
-      /* @__PURE__ */ React9.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "px-2 py-1 text-center text-sm" }, "No options found") : optionGroups.length > 0 ? (
+      isMaxReached && /* @__PURE__ */ React17.createElement("div", { className: "px-2 py-1 text-xs font-medium text-amber-600 bg-destructive/80 text-destructive-foreground border-b border-destructive" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      /* @__PURE__ */ React17.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React17.createElement("div", { className: "px-2 py-1 text-center text-sm" }, "No options found") : optionGroups.length > 0 ? (
         // Render grouped options
         optionGroups.map((group, groupIndex) => {
           const groupOptions = group.options.filter(
             (opt) => filteredOptions.includes(opt)
           );
           if (groupOptions.length === 0) return null;
-          return /* @__PURE__ */ React9.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+          return /* @__PURE__ */ React17.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React17.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
             const globalIndex = filteredOptions.indexOf(option);
             const isSelected = value.includes(option.value);
             const isFocused = globalIndex === focusedIndex;
             const isDisabled = option.disabled || isMaxReached && !isSelected;
-            return /* @__PURE__ */ React9.createElement(
+            return /* @__PURE__ */ React17.createElement(
               "div",
               {
                 key: option.value,
@@ -1205,8 +1433,8 @@ function MultiSelect({
                 "aria-selected": isSelected,
                 "aria-disabled": isDisabled
               },
-              /* @__PURE__ */ React9.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
-              /* @__PURE__ */ React9.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+              /* @__PURE__ */ React17.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+              /* @__PURE__ */ React17.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
             );
           }));
         })
@@ -1216,7 +1444,7 @@ function MultiSelect({
           const isSelected = value.includes(option.value);
           const isFocused = index === focusedIndex;
           const isDisabled = option.disabled || isMaxReached && !isSelected;
-          return /* @__PURE__ */ React9.createElement(
+          return /* @__PURE__ */ React17.createElement(
             "div",
             {
               key: option.value,
@@ -1231,8 +1459,8 @@ function MultiSelect({
               "aria-selected": isSelected,
               "aria-disabled": isDisabled
             },
-            /* @__PURE__ */ React9.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
-            /* @__PURE__ */ React9.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+            /* @__PURE__ */ React17.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+            /* @__PURE__ */ React17.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
           );
         })
       ))
@@ -1265,14 +1493,14 @@ function FileInput({
   onFileRemove,
   ...props
 }) {
-  const inputRef = React9.useRef(null);
-  const [dragActive, setDragActive] = React9.useState(false);
-  const [cropperOpen, setCropperOpen] = React9.useState(false);
-  const [imageToCrop, setImageToCrop] = React9.useState(null);
-  const [crop, setCrop] = React9.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React9.useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = React9.useState(null);
-  const validateFile = React9.useCallback(
+  const inputRef = React17.useRef(null);
+  const [dragActive, setDragActive] = React17.useState(false);
+  const [cropperOpen, setCropperOpen] = React17.useState(false);
+  const [imageToCrop, setImageToCrop] = React17.useState(null);
+  const [crop, setCrop] = React17.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React17.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React17.useState(null);
+  const validateFile = React17.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -1307,7 +1535,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React9.useCallback(
+  const handleFiles = React17.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -1358,7 +1586,7 @@ function FileInput({
       onValidationError
     ]
   );
-  const createCroppedImage = React9.useCallback(
+  const createCroppedImage = React17.useCallback(
     async (imageUrl, cropArea) => {
       return new Promise((resolve, reject) => {
         const image = new Image();
@@ -1402,7 +1630,7 @@ function FileInput({
     },
     []
   );
-  const handleCropSave = React9.useCallback(async () => {
+  const handleCropSave = React17.useCallback(async () => {
     if (!imageToCrop || !croppedAreaPixels) return;
     try {
       const croppedBlob = await createCroppedImage(
@@ -1435,7 +1663,7 @@ function FileInput({
     onChange,
     multiple
   ]);
-  const handleCropCancel = React9.useCallback(() => {
+  const handleCropCancel = React17.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
     }
@@ -1445,13 +1673,13 @@ function FileInput({
     setZoom(1);
     setCroppedAreaPixels(null);
   }, [imageToCrop]);
-  const onCropChange = React9.useCallback((crop2) => {
+  const onCropChange = React17.useCallback((crop2) => {
     setCrop(crop2);
   }, []);
-  const onZoomChange = React9.useCallback((zoom2) => {
+  const onZoomChange = React17.useCallback((zoom2) => {
     setZoom(zoom2);
   }, []);
-  const onCropCompleteInternal = React9.useCallback(
+  const onCropCompleteInternal = React17.useCallback(
     (_, croppedAreaPixels2) => {
       setCroppedAreaPixels(croppedAreaPixels2);
     },
@@ -1512,7 +1740,7 @@ function FileInput({
     }
     return null;
   };
-  React9.useEffect(() => {
+  React17.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -1526,7 +1754,7 @@ function FileInput({
     };
   }, [value, imageToCrop]);
   const combinedClassName = `${className}`.trim();
-  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React17.createElement(
     "input",
     {
       ref: inputRef,
@@ -1543,7 +1771,7 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: `flex min-h-32 w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-input bg-transparent p-6 transition-colors hover:bg-primary/50 hover:border-ring ${dragActive ? "bg-primary text-primary-foreground border-ring" : ""} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${error ? "border-destructive" : ""}`,
@@ -1558,7 +1786,7 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React17.createElement(
       "svg",
       {
         width: "48",
@@ -1571,19 +1799,19 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React9.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React9.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React9.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React9.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React9.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React9.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React9.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React17.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React17.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React17.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React17.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React17.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React17.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React17.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "li",
       {
         key: `${file.name}-${index}`,
         className: "flex items-center gap-3 p-3 rounded-md border border-border bg-card text-card-foreground hover:bg-primary/50 transition-colors"
       },
-      previewUrl && /* @__PURE__ */ React9.createElement(
+      previewUrl && /* @__PURE__ */ React17.createElement(
         "img",
         {
           src: previewUrl,
@@ -1593,7 +1821,7 @@ function FileInput({
           height: "48"
         }
       ),
-      /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React9.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React17.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React17.createElement(
         "div",
         {
           className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
@@ -1603,15 +1831,15 @@ function FileInput({
           "aria-valuemax": 100,
           "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
         },
-        /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React17.createElement(
           "div",
           {
             className: "h-full bg-primary transition-all",
             style: { width: `${uploadProgress[file.name]}%` }
           }
         )
-      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
-      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React9.createElement(
+      ), /* @__PURE__ */ React17.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
+      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1623,7 +1851,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Crop ${file.name}`
         },
-        /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React17.createElement(
           "svg",
           {
             width: "20",
@@ -1636,11 +1864,11 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React9.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
-          /* @__PURE__ */ React9.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+          /* @__PURE__ */ React17.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+          /* @__PURE__ */ React17.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
         )
       ),
-      /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1652,7 +1880,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Remove ${file.name}`
         },
-        /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React17.createElement(
           "svg",
           {
             width: "20",
@@ -1665,19 +1893,19 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React9.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ React9.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          /* @__PURE__ */ React17.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React17.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
         )
       )
     );
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React9.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React17.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React9.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React17.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -1686,7 +1914,7 @@ function FileInput({
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React9.createElement("div", { className: "p-4" }, /* @__PURE__ */ React9.createElement(
+  )), /* @__PURE__ */ React17.createElement("div", { className: "p-4" }, /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
@@ -1708,7 +1936,7 @@ function FileInput({
         document.addEventListener("mouseup", handleMouseUp);
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "img",
       {
         src: imageToCrop.url,
@@ -1743,7 +1971,7 @@ function FileInput({
         }
       }
     ),
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-primary rounded pointer-events-none",
@@ -1752,9 +1980,9 @@ function FileInput({
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React9.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9.createElement("div", null))
+      /* @__PURE__ */ React17.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React17.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React17.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React17.createElement("div", null))
     )
-  ), /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React17.createElement(
     "label",
     {
       htmlFor: "zoom-slider",
@@ -1763,7 +1991,7 @@ function FileInput({
     "Zoom: ",
     zoom.toFixed(1),
     "x"
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1776,7 +2004,7 @@ function FileInput({
       className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -1784,7 +2012,7 @@ function FileInput({
       onClick: handleCropCancel
     },
     "Cancel"
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -1826,13 +2054,14 @@ function DatePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [selectedMonth, setSelectedMonth] = React9.useState(
+  const [isOpen, setIsOpen] = React17.useState(false);
+  const [hasInteracted, setHasInteracted] = React17.useState(false);
+  const [selectedMonth, setSelectedMonth] = React17.useState(
     value || /* @__PURE__ */ new Date()
   );
-  const inputRef = React9.useRef(null);
-  const dropdownRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const inputRef = React17.useRef(null);
+  const dropdownRef = React17.useRef(null);
+  React17.useEffect(() => {
     if (value) {
       setSelectedMonth(value);
     }
@@ -1849,7 +2078,13 @@ function DatePicker({
   };
   const handleToggle = () => {
     if (disabled) return;
-    setIsOpen((prev) => !prev);
+    setIsOpen((prev) => {
+      const newIsOpen = !prev;
+      if (newIsOpen && !hasInteracted) {
+        setHasInteracted(true);
+      }
+      return newIsOpen;
+    });
   };
   const isDisabled = (date) => {
     if (minDate && date < minDate) return true;
@@ -1858,10 +2093,13 @@ function DatePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React9.useCallback(() => {
+  const closeCalendar = React17.useCallback(() => {
+    if (!isOpen) return;
     setIsOpen(false);
-    onBlur?.();
-  }, [onBlur]);
+    if (hasInteracted) {
+      onBlur?.();
+    }
+  }, [isOpen, hasInteracted, onBlur]);
   useOnClickOutside([inputRef, dropdownRef], closeCalendar, void 0, {
     capture: true
   });
@@ -1909,7 +2147,7 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React9.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -1918,7 +2156,7 @@ function DatePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ), /* @__PURE__ */ React9.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React9.createElement(
+    ), /* @__PURE__ */ React17.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -1927,13 +2165,13 @@ function DatePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    )), /* @__PURE__ */ React9.createElement(
+    )), /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React17.createElement(
         "div",
         {
           key: day,
@@ -1941,14 +2179,14 @@ function DatePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React9.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React17.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React9.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React17.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
       }
       const isSelected = value && date.toDateString() === value.toDateString();
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React17.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -1969,20 +2207,20 @@ function DatePicker({
     })));
   };
   const combinedClassName = cn("relative", className);
-  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React17.createElement(
     "input",
     {
       type: "hidden",
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React17.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1995,9 +2233,9 @@ function DatePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React9.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React17.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "input",
     {
       ref: inputRef,
@@ -2022,7 +2260,7 @@ function DatePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React9.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -2032,7 +2270,7 @@ function DatePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React9.createElement(
+  )), isOpen && !disabled && /* @__PURE__ */ React17.createElement(
     "div",
     {
       ref: dropdownRef,
@@ -2099,11 +2337,11 @@ function TimePicker({
   showIcon = true,
   ...props
 }) {
-  const inputRef = React9.useRef(null);
-  const [nativeValue, setNativeValue] = React9.useState(
+  const inputRef = React17.useRef(null);
+  const [nativeValue, setNativeValue] = React17.useState(
     normalizeToNativeTime(value)
   );
-  React9.useEffect(() => {
+  React17.useEffect(() => {
     setNativeValue(normalizeToNativeTime(value));
   }, [value]);
   const handleChange = (e) => {
@@ -2119,13 +2357,13 @@ function TimePicker({
   };
   const hasValue = Boolean(value);
   const stepInSeconds = Math.max(1, minuteStep * 60);
-  return /* @__PURE__ */ React9.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React17.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React17.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2138,10 +2376,10 @@ function TimePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React9.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ React9.createElement("path", { d: "M12 6v6l4 2" })
+      /* @__PURE__ */ React17.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React17.createElement("path", { d: "M12 6v6l4 2" })
     )
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "input",
     {
       ref: inputRef,
@@ -2169,7 +2407,7 @@ function TimePicker({
       "aria-required": required || props["aria-required"],
       ...props
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React9.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -2222,16 +2460,17 @@ function DateRangePicker({
   separator = " - ",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [selectedMonth, setSelectedMonth] = React9.useState(
+  const [isOpen, setIsOpen] = React17.useState(false);
+  const [hasInteracted, setHasInteracted] = React17.useState(false);
+  const [selectedMonth, setSelectedMonth] = React17.useState(
     value.start || /* @__PURE__ */ new Date()
   );
-  const [rangeStart, setRangeStart] = React9.useState(value.start);
-  const [rangeEnd, setRangeEnd] = React9.useState(value.end);
-  const [hoverDate, setHoverDate] = React9.useState(null);
-  const triggerRef = React9.useRef(null);
-  const dropdownRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [rangeStart, setRangeStart] = React17.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React17.useState(value.end);
+  const [hoverDate, setHoverDate] = React17.useState(null);
+  const triggerRef = React17.useRef(null);
+  const dropdownRef = React17.useRef(null);
+  React17.useEffect(() => {
     setRangeStart(value.start);
     setRangeEnd(value.end);
     if (value.start) {
@@ -2265,7 +2504,13 @@ function DateRangePicker({
   };
   const handleToggle = () => {
     if (disabled) return;
-    setIsOpen((prev) => !prev);
+    setIsOpen((prev) => {
+      const newIsOpen = !prev;
+      if (newIsOpen && !hasInteracted) {
+        setHasInteracted(true);
+      }
+      return newIsOpen;
+    });
   };
   const isDisabled = (date) => {
     if (minDate && date < minDate) return true;
@@ -2274,10 +2519,13 @@ function DateRangePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React9.useCallback(() => {
+  const closeCalendar = React17.useCallback(() => {
+    if (!isOpen) return;
     setIsOpen(false);
-    onBlur?.();
-  }, [onBlur]);
+    if (hasInteracted) {
+      onBlur?.();
+    }
+  }, [isOpen, hasInteracted, onBlur]);
   useOnClickOutside([triggerRef, dropdownRef], closeCalendar, void 0, {
     capture: true
   });
@@ -2321,7 +2569,7 @@ function DateRangePicker({
     for (let day = 1; day <= daysInMonth; day++) {
       days.push(new Date(year, month, day));
     }
-    return /* @__PURE__ */ React9.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -2330,7 +2578,7 @@ function DateRangePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ) : /* @__PURE__ */ React9.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React9.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React9.createElement(
+    ) : /* @__PURE__ */ React17.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React17.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -2339,13 +2587,13 @@ function DateRangePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    ) : /* @__PURE__ */ React9.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React9.createElement(
+    ) : /* @__PURE__ */ React17.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React17.createElement(
         "div",
         {
           key: `${month}-${day}`,
@@ -2353,9 +2601,9 @@ function DateRangePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React9.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React17.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React9.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React17.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
       }
       const isStart = rangeStart && date.toDateString() === rangeStart.toDateString();
       const isEnd = rangeEnd && date.toDateString() === rangeEnd.toDateString();
@@ -2367,7 +2615,7 @@ function DateRangePicker({
       );
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React17.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -2392,27 +2640,27 @@ function DateRangePicker({
   };
   const combinedClassName = cn("relative", className);
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
-  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React17.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[start]`,
       value: rangeStart ? rangeStart.toISOString() : ""
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React17.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React17.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2425,9 +2673,9 @@ function DateRangePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React9.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React17.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "input",
     {
       ref: triggerRef,
@@ -2452,7 +2700,7 @@ function DateRangePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React9.createElement(
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -2462,14 +2710,14 @@ function DateRangePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React9.createElement(
+  )), isOpen && !disabled && /* @__PURE__ */ React17.createElement(
     "div",
     {
       ref: dropdownRef,
       className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3"
     },
-    /* @__PURE__ */ React9.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React9.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))),
-    rangeStart && !rangeEnd && /* @__PURE__ */ React9.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")
+    /* @__PURE__ */ React17.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React17.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))),
+    rangeStart && !rangeEnd && /* @__PURE__ */ React17.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")
   ));
 }
 DateRangePicker.displayName = "DateRangePicker";
@@ -2541,11 +2789,11 @@ function RichTextEditor({
   ],
   ...props
 }) {
-  const [currentMode, setCurrentMode] = React9.useState(mode);
-  const [content, setContent] = React9.useState(value);
-  const editorRef = React9.useRef(null);
-  const textareaRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [currentMode, setCurrentMode] = React17.useState(mode);
+  const [content, setContent] = React17.useState(value);
+  const editorRef = React17.useRef(null);
+  const textareaRef = React17.useRef(null);
+  React17.useEffect(() => {
     setContent(value);
     if (currentMode === "wysiwyg" && editorRef.current) {
       editorRef.current.innerHTML = value;
@@ -2633,7 +2881,7 @@ function RichTextEditor({
       }
     }
   };
-  const hasValue = React9.useMemo(() => {
+  const hasValue = React17.useMemo(() => {
     if (!content) return false;
     const stripped = content.replace(/<[^>]+>/g, "").trim();
     return stripped.length > 0;
@@ -2650,10 +2898,10 @@ function RichTextEditor({
     maxHeight,
     overflowY: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React17.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "button",
       {
         key: buttonName,
@@ -2666,7 +2914,7 @@ function RichTextEditor({
       },
       button.icon
     );
-  })), allowModeSwitch && /* @__PURE__ */ React9.createElement(
+  })), allowModeSwitch && /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -2677,7 +2925,7 @@ function RichTextEditor({
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React9.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React9.createElement(
+  )), /* @__PURE__ */ React17.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React17.createElement(
     "div",
     {
       ref: editorRef,
@@ -2692,7 +2940,7 @@ function RichTextEditor({
       "aria-required": required || props["aria-required"],
       suppressContentEditableWarning: true
     }
-  ) : /* @__PURE__ */ React9.createElement(
+  ) : /* @__PURE__ */ React17.createElement(
     "textarea",
     {
       ref: textareaRef,
@@ -2715,6 +2963,6 @@ function RichTextEditor({
 }
 RichTextEditor.displayName = "RichTextEditor";
 
-export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, RichTextEditor, Select, TextArea, TextInput, TimePicker };
+export { Checkbox2 as Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, RichTextEditor, Select2 as Select, Switch2 as Switch, TextArea, TextInput, TimePicker };
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map