@page-speed/forms 0.4.3 → 0.4.4

package/dist/inputs.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-var React7 = require('react');
+var React8 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var useOnClickOutside = require('@opensite/hooks/useOnClickOutside');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -22,7 +23,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
+
+// src/inputs/TextInput.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(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/inputs/TextInput.tsx
 function TextInput({
@@ -45,10 +52,17 @@ function TextInput({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "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";
-  const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React7__namespace.createElement(
+  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__ */ React8__namespace.createElement(
     "input",
     {
       type,
@@ -92,10 +106,17 @@ function TextArea({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "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";
-  const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React7__namespace.createElement(
+  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__ */ React8__namespace.createElement(
     "textarea",
     {
       name,
@@ -119,9 +140,53 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+var LabelGroup = ({
+  labelHtmlFor,
+  required = false,
+  variant = "label",
+  secondaryId,
+  secondary,
+  primary,
+  primaryClassName,
+  secondaryClassName
+}) => {
+  const primaryClasses = cn(
+    "text-sm font-medium leading-snug",
+    variant === "legend" ? "mb-1.5" : "mb-1 block",
+    primaryClassName
+  );
+  const requiredIndicator = required ? /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  let primaryElement = null;
+  if (primary) {
+    if (variant === "label") {
+      primaryElement = /* @__PURE__ */ React8__namespace.createElement(
+        "label",
+        {
+          htmlFor: labelHtmlFor,
+          "data-slot": "field-label",
+          className: primaryClasses
+        },
+        primary,
+        requiredIndicator
+      );
+    } else if (variant === "legend") {
+      primaryElement = /* @__PURE__ */ React8__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+    } else {
+      primaryElement = /* @__PURE__ */ React8__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+    }
+  }
+  const secondaryElement = secondary ? /* @__PURE__ */ React8__namespace.createElement(
+    "p",
+    {
+      "data-slot": "field-description",
+      id: secondaryId,
+      className: cn("text-sm leading-normal font-normal", secondaryClassName)
+    },
+    secondary
+  ) : null;
+  if (!primaryElement && !secondaryElement) return null;
+  return /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, primaryElement, secondaryElement);
+};
 
 // src/inputs/Checkbox.tsx
 function Checkbox({
@@ -136,12 +201,12 @@ function Checkbox({
   indeterminate = false,
   label,
   description,
-  checkboxVariant = "boxed",
+  useChoiceCard = false,
   ...props
 }) {
-  const inputRef = React7__namespace.useRef(null);
+  const inputRef = React8__namespace.useRef(null);
   const checkboxId = props.id || `checkbox-${name}`;
-  React7__namespace.useEffect(() => {
+  React8__namespace.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -153,7 +218,7 @@ function Checkbox({
     onBlur?.();
   };
   const isActive = value || indeterminate && !value;
-  const checkbox = /* @__PURE__ */ React7__namespace.createElement(
+  const checkbox = /* @__PURE__ */ React8__namespace.createElement(
     "div",
     {
       className: cn(
@@ -161,7 +226,7 @@ function Checkbox({
         !label && className
       )
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "input",
       {
         ref: inputRef,
@@ -180,7 +245,7 @@ function Checkbox({
         ...props
       }
     ),
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
         className: cn(
@@ -193,7 +258,7 @@ function Checkbox({
           "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
         )
       },
-      value && /* @__PURE__ */ React7__namespace.createElement(
+      value && /* @__PURE__ */ React8__namespace.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -204,9 +269,9 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })
+        /* @__PURE__ */ React8__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })
       ),
-      indeterminate && !value && /* @__PURE__ */ React7__namespace.createElement(
+      indeterminate && !value && /* @__PURE__ */ React8__namespace.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -217,31 +282,44 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React7__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ React8__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       )
     )
   );
   if (label) {
-    return /* @__PURE__ */ React7__namespace.createElement(
+    return /* @__PURE__ */ React8__namespace.createElement(
       "label",
       {
         className: cn(
           "w-full h-full flex gap-3 p-3 duration-200",
-          checkboxVariant === "boxed" && "border rounded-lg hover:ring-2",
-          checkboxVariant === "boxed" && value && "ring-2",
+          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__ */ React7__namespace.createElement("div", { className: "flex w-full flex-row gap-2" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, label), description && /* @__PURE__ */ React7__namespace.createElement(
-        "p",
+      /* @__PURE__ */ React8__namespace.createElement(
+        "div",
         {
-          className: "text-xs opacity-75",
-          id: `${checkboxId}-description`
+          className: cn(
+            "flex w-full flex-row gap-2",
+            useChoiceCard ? "items-start" : "items-center"
+          )
         },
-        description
-      )))
+        checkbox,
+        /* @__PURE__ */ React8__namespace.createElement(
+          LabelGroup,
+          {
+            variant: "text",
+            primary: label,
+            secondary: description,
+            secondaryId: description ? `${checkboxId}-description` : void 0,
+            primaryClassName: "mb-0",
+            secondaryClassName: "text-xs opacity-75"
+          }
+        )
+      )
     );
   }
   return checkbox;
@@ -275,13 +353,11 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
-  const checkboxVariant = React7__namespace.useMemo(() => {
-    if (options.some((opt) => opt.description)) {
-      return "boxed";
-    }
-    return "inline";
+  const useChoiceCard = React8__namespace.useMemo(() => {
+    if (!options) return false;
+    return options?.some((opt) => opt.description);
   }, [options]);
-  const countableValue = React7__namespace.useMemo(() => {
+  const countableValue = React8__namespace.useMemo(() => {
     if (value?.length > 0) {
       return value.length;
     }
@@ -306,29 +382,37 @@ function CheckboxGroup({
     onBlur?.();
   };
   const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
-  const containerClass = cn(
-    "w-full gap-3",
-    layout === "stacked" && "flex flex-col",
-    layout === "inline" && "flex flex-row flex-wrap",
-    layout === "grid" && "grid",
-    className
-  );
-  return /* @__PURE__ */ React7__namespace.createElement(
-    "div",
+  const containerClass = React8__namespace.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__ */ React8__namespace.createElement(
+    "fieldset",
     {
       className: containerClass,
       role: "group",
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": props["aria-describedby"],
+      "aria-describedby": groupAriaDescribedBy,
       "aria-required": required || props["aria-required"],
-      "aria-label": typeof label === "string" ? label : props["aria-label"],
-      style: layout === "grid" ? {
-        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
-      } : void 0
+      "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label ? /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, label) : null,
-    description ? /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-xs opacity-70" }, description) : null,
-    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "legend",
+        secondaryId: groupDescriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React8__namespace.createElement(
       Checkbox,
       {
         name: `${name}-select-all`,
@@ -338,7 +422,7 @@ function CheckboxGroup({
         onBlur: handleBlur,
         indeterminate: someSelected,
         label: selectAllLabel,
-        checkboxVariant: "inline",
+        useChoiceCard,
         disabled,
         "aria-label": selectAllLabel
       }
@@ -346,7 +430,7 @@ function CheckboxGroup({
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      return /* @__PURE__ */ React7__namespace.createElement(
+      return /* @__PURE__ */ React8__namespace.createElement(
         Checkbox,
         {
           key: option.value,
@@ -360,11 +444,11 @@ function CheckboxGroup({
           error,
           label: renderOption ? renderOption(option) : option.label,
           description: renderOption ? void 0 : option.description,
-          checkboxVariant
+          useChoiceCard
         }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React7__namespace.createElement(
+    (minSelections || maxSelections) && /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
         className: cn(
@@ -373,8 +457,8 @@ function CheckboxGroup({
         ),
         "aria-live": "polite"
       },
-      minSelections && countableValue < minSelections && /* @__PURE__ */ React7__namespace.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
-      maxSelections && /* @__PURE__ */ React7__namespace.createElement("span", null, countableValue, "/", maxSelections, " selected")
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React8__namespace.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React8__namespace.createElement("span", null, countableValue, "/", maxSelections, " selected")
     )
   );
 }
@@ -390,6 +474,7 @@ function Radio({
   className = "",
   layout = "stacked",
   label,
+  description,
   options,
   ...props
 }) {
@@ -424,33 +509,43 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const useChoiceCard = React7__namespace.useMemo(() => {
+  const useChoiceCard = React8__namespace.useMemo(() => {
     return options.some((option) => option.description);
   }, [options]);
-  const containerClass = React7__namespace.useMemo(() => {
+  const containerClass = React8__namespace.useMemo(() => {
     return cn(
-      "w-full gap-3 grid grid-cols-1",
-      layout === "inline" && "md:grid-cols-2",
+      "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]);
-  return /* @__PURE__ */ React7__namespace.createElement(
-    "div",
+  const groupDescriptionId = description ? `${name}-description` : void 0;
+  const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ React8__namespace.createElement(
+    "fieldset",
     {
       className: containerClass,
       role: "radiogroup",
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": props["aria-describedby"],
+      "aria-describedby": groupAriaDescribedBy,
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label && /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium mb-2" }, label),
+    /* @__PURE__ */ React8__namespace.createElement(
+      LabelGroup,
+      {
+        variant: "legend",
+        primary: label,
+        secondary: description,
+        secondaryId: groupDescriptionId
+      }
+    ),
     options.map((option, index) => {
       const isChecked = value === option.value;
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
       const hasDescription = option.description != null && option.description !== "";
-      const radioIndicator = /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React7__namespace.createElement(
+      const radioIndicator = /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React8__namespace.createElement(
         "input",
         {
           type: "radio",
@@ -465,7 +560,7 @@ function Radio({
           className: "peer sr-only",
           "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
         }
-      ), /* @__PURE__ */ React7__namespace.createElement(
+      ), /* @__PURE__ */ React8__namespace.createElement(
         "div",
         {
           className: cn(
@@ -478,10 +573,20 @@ function Radio({
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
           )
         },
-        isChecked && /* @__PURE__ */ React7__namespace.createElement("div", { className: "size-3 rounded-full bg-primary" })
+        isChecked && /* @__PURE__ */ React8__namespace.createElement("div", { className: "size-3 rounded-full bg-primary" })
       ));
-      const labelContent = /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, option.label), hasDescription && /* @__PURE__ */ React7__namespace.createElement("p", { className: "text-xs opacity-75", id: `${radioId}-description` }, option.description));
-      return /* @__PURE__ */ React7__namespace.createElement(
+      const labelContent = /* @__PURE__ */ React8__namespace.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__ */ React8__namespace.createElement(
         "label",
         {
           key: option.value,
@@ -495,7 +600,18 @@ function Radio({
           onKeyDown: (e) => handleKeyDown(e, index),
           tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, !useChoiceCard && radioIndicator, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), useChoiceCard && radioIndicator)
+        /* @__PURE__ */ React8__namespace.createElement(
+          "div",
+          {
+            className: cn(
+              "flex w-full flex-row gap-2",
+              useChoiceCard ? "items-start" : "items-center"
+            )
+          },
+          !useChoiceCard && radioIndicator,
+          /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent),
+          useChoiceCard && radioIndicator
+        )
       );
     })
   );
@@ -520,19 +636,19 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const [searchQuery, setSearchQuery] = React7__namespace.useState("");
-  const [focusedIndex, setFocusedIndex] = React7__namespace.useState(-1);
-  const selectRef = React7__namespace.useRef(null);
-  const searchInputRef = React7__namespace.useRef(null);
+  const [isOpen, setIsOpen] = React8__namespace.useState(false);
+  const [searchQuery, setSearchQuery] = React8__namespace.useState("");
+  const [focusedIndex, setFocusedIndex] = React8__namespace.useState(-1);
+  const selectRef = React8__namespace.useRef(null);
+  const searchInputRef = React8__namespace.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React7__namespace.useMemo(() => {
+  const allOptions = React8__namespace.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React7__namespace.useMemo(() => {
+  const filteredOptions = React8__namespace.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -542,9 +658,10 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React7__namespace.useMemo(() => {
+  const selectedOption = React8__namespace.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
+  const hasValue = Boolean(value);
   const handleSelect = (optionValue) => {
     onChange(optionValue);
     setIsOpen(false);
@@ -639,27 +756,22 @@ function Select({
         break;
     }
   };
-  const handleBlur = () => {
-    onBlur?.();
-  };
-  React7__namespace.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (selectRef.current && !selectRef.current.contains(event.target)) {
-        setIsOpen(false);
-        setSearchQuery("");
-        setFocusedIndex(-1);
-        handleBlur();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    if (!nextTarget || !selectRef.current?.contains(nextTarget)) {
+      onBlur?.();
     }
-  }, [isOpen]);
-  const combinedClassName = `relative w-full ${className}`.trim();
-  return /* @__PURE__ */ React7__namespace.createElement(
+  };
+  const closeDropdown = React8__namespace.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+    onBlur?.();
+  }, [isOpen, onBlur]);
+  useOnClickOutside.useOnClickOutside(selectRef, closeDropdown, "pointerdown", true);
+  const combinedClassName = cn("relative w-full", className);
+  return /* @__PURE__ */ React8__namespace.createElement(
     "div",
     {
       ref: selectRef,
@@ -667,7 +779,7 @@ function Select({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "select",
       {
         name,
@@ -680,13 +792,19 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React7__namespace.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React7__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React8__namespace.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React8__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
-        className: `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 hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${disabled ? "cursor-not-allowed opacity-50 pointer-events-none" : ""} ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
+        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",
+          !error && hasValue && "ring-2 ring-ring",
+          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+          error && "border-destructive ring-1 ring-destructive"
+        ),
         onClick: handleToggle,
         role: "combobox",
         "aria-expanded": isOpen,
@@ -697,8 +815,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React7__namespace.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7__namespace.createElement("span", { className: "relative" }, placeholder)),
-      /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React7__namespace.createElement(
+      /* @__PURE__ */ React8__namespace.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React8__namespace.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React8__namespace.createElement(
         "button",
         {
           type: "button",
@@ -708,21 +826,24 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React7__namespace.createElement(
+    isOpen && /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
         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__ */ React7__namespace.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React7__namespace.createElement(
+      searchable && /* @__PURE__ */ React8__namespace.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React8__namespace.createElement(
         "input",
         {
           ref: searchInputRef,
           type: "text",
-          className: "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
+          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,
@@ -730,19 +851,19 @@ function Select({
           "aria-label": "Search options"
         }
       )),
-      /* @__PURE__ */ React7__namespace.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React7__namespace.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
+      /* @__PURE__ */ React8__namespace.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React8__namespace.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__ */ React7__namespace.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+          return /* @__PURE__ */ React8__namespace.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React8__namespace.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__ */ React7__namespace.createElement(
+            return /* @__PURE__ */ React8__namespace.createElement(
               "div",
               {
                 key: option.value,
@@ -762,7 +883,7 @@ function Select({
           const isSelected = value === option.value;
           const isFocused = index === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React7__namespace.createElement(
+          return /* @__PURE__ */ React8__namespace.createElement(
             "div",
             {
               key: option.value,
@@ -805,14 +926,14 @@ function FileInput({
   onFileRemove,
   ...props
 }) {
-  const inputRef = React7__namespace.useRef(null);
-  const [dragActive, setDragActive] = React7__namespace.useState(false);
-  const [cropperOpen, setCropperOpen] = React7__namespace.useState(false);
-  const [imageToCrop, setImageToCrop] = React7__namespace.useState(null);
-  const [crop, setCrop] = React7__namespace.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React7__namespace.useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = React7__namespace.useState(null);
-  const validateFile = React7__namespace.useCallback(
+  const inputRef = React8__namespace.useRef(null);
+  const [dragActive, setDragActive] = React8__namespace.useState(false);
+  const [cropperOpen, setCropperOpen] = React8__namespace.useState(false);
+  const [imageToCrop, setImageToCrop] = React8__namespace.useState(null);
+  const [crop, setCrop] = React8__namespace.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React8__namespace.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React8__namespace.useState(null);
+  const validateFile = React8__namespace.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -847,7 +968,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React7__namespace.useCallback(
+  const handleFiles = React8__namespace.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -898,7 +1019,7 @@ function FileInput({
       onValidationError
     ]
   );
-  const createCroppedImage = React7__namespace.useCallback(
+  const createCroppedImage = React8__namespace.useCallback(
     async (imageUrl, cropArea) => {
       return new Promise((resolve, reject) => {
         const image = new Image();
@@ -942,7 +1063,7 @@ function FileInput({
     },
     []
   );
-  const handleCropSave = React7__namespace.useCallback(async () => {
+  const handleCropSave = React8__namespace.useCallback(async () => {
     if (!imageToCrop || !croppedAreaPixels) return;
     try {
       const croppedBlob = await createCroppedImage(
@@ -975,7 +1096,7 @@ function FileInput({
     onChange,
     multiple
   ]);
-  const handleCropCancel = React7__namespace.useCallback(() => {
+  const handleCropCancel = React8__namespace.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
     }
@@ -985,13 +1106,13 @@ function FileInput({
     setZoom(1);
     setCroppedAreaPixels(null);
   }, [imageToCrop]);
-  const onCropChange = React7__namespace.useCallback((crop2) => {
+  const onCropChange = React8__namespace.useCallback((crop2) => {
     setCrop(crop2);
   }, []);
-  const onZoomChange = React7__namespace.useCallback((zoom2) => {
+  const onZoomChange = React8__namespace.useCallback((zoom2) => {
     setZoom(zoom2);
   }, []);
-  const onCropCompleteInternal = React7__namespace.useCallback(
+  const onCropCompleteInternal = React8__namespace.useCallback(
     (_, croppedAreaPixels2) => {
       setCroppedAreaPixels(croppedAreaPixels2);
     },
@@ -1052,7 +1173,7 @@ function FileInput({
     }
     return null;
   };
-  React7__namespace.useEffect(() => {
+  React8__namespace.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -1066,7 +1187,7 @@ function FileInput({
     };
   }, [value, imageToCrop]);
   const combinedClassName = `${className}`.trim();
-  return /* @__PURE__ */ React7__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7__namespace.createElement(
+  return /* @__PURE__ */ React8__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       ref: inputRef,
@@ -1083,10 +1204,10 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.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-red-500" : ""}`,
+      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" : ""}`,
       onDragEnter: handleDrag,
       onDragLeave: handleDrag,
       onDragOver: handleDrag,
@@ -1098,7 +1219,7 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React8__namespace.createElement(
       "svg",
       {
         width: "48",
@@ -1111,19 +1232,19 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React7__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React7__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React7__namespace.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React7__namespace.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7__namespace.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React7__namespace.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React8__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React8__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React8__namespace.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React7__namespace.createElement(
+    return /* @__PURE__ */ React8__namespace.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__ */ React7__namespace.createElement(
+      previewUrl && /* @__PURE__ */ React8__namespace.createElement(
         "img",
         {
           src: previewUrl,
@@ -1133,7 +1254,7 @@ function FileInput({
           height: "48"
         }
       ),
-      /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React7__namespace.createElement(
+      /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React8__namespace.createElement(
         "div",
         {
           className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
@@ -1143,15 +1264,15 @@ function FileInput({
           "aria-valuemax": 100,
           "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
         },
-        /* @__PURE__ */ React7__namespace.createElement(
+        /* @__PURE__ */ React8__namespace.createElement(
           "div",
           {
             className: "h-full bg-primary transition-all",
             style: { width: `${uploadProgress[file.name]}%` }
           }
         )
-      ), /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
-      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React7__namespace.createElement(
+      ), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
+      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React8__namespace.createElement(
         "button",
         {
           type: "button",
@@ -1163,7 +1284,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__ */ React7__namespace.createElement(
+        /* @__PURE__ */ React8__namespace.createElement(
           "svg",
           {
             width: "20",
@@ -1176,11 +1297,11 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React7__namespace.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
-          /* @__PURE__ */ React7__namespace.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+          /* @__PURE__ */ React8__namespace.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+          /* @__PURE__ */ React8__namespace.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
         )
       ),
-      /* @__PURE__ */ React7__namespace.createElement(
+      /* @__PURE__ */ React8__namespace.createElement(
         "button",
         {
           type: "button",
@@ -1192,7 +1313,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__ */ React7__namespace.createElement(
+        /* @__PURE__ */ React8__namespace.createElement(
           "svg",
           {
             width: "20",
@@ -1205,19 +1326,19 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React7__namespace.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ React7__namespace.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          /* @__PURE__ */ React8__namespace.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React8__namespace.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
         )
       )
     );
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React7__namespace.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React7__namespace.createElement(
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React8__namespace.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React8__namespace.createElement(
     "div",
     {
       className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React7__namespace.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React8__namespace.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1226,7 +1347,7 @@ function FileInput({
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React7__namespace.createElement("div", { className: "p-4" }, /* @__PURE__ */ React7__namespace.createElement(
+  )), /* @__PURE__ */ React8__namespace.createElement("div", { className: "p-4" }, /* @__PURE__ */ React8__namespace.createElement(
     "div",
     {
       className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
@@ -1248,7 +1369,7 @@ function FileInput({
         document.addEventListener("mouseup", handleMouseUp);
       }
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "img",
       {
         src: imageToCrop.url,
@@ -1283,7 +1404,7 @@ function FileInput({
         }
       }
     ),
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.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",
@@ -1292,9 +1413,9 @@ function FileInput({
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React7__namespace.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7__namespace.createElement("div", null))
+      /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", null))
     )
-  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React8__namespace.createElement(
     "label",
     {
       htmlFor: "zoom-slider",
@@ -1303,7 +1424,7 @@ function FileInput({
     "Zoom: ",
     zoom.toFixed(1),
     "x"
-  ), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1316,7 +1437,7 @@ function FileInput({
       className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React7__namespace.createElement(
+  ))), /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1324,7 +1445,7 @@ function FileInput({
       onClick: handleCropCancel
     },
     "Cancel"
-  ), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1343,27 +1464,6 @@ function formatDate(date, format) {
   const year = d.getFullYear();
   return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
 }
-function parseDate(dateString, format) {
-  if (!dateString) return null;
-  try {
-    if (format === "MM/dd/yyyy" || format === "MM-dd-yyyy") {
-      const parts = dateString.split(/[/-]/);
-      if (parts.length === 3) {
-        const month = parseInt(parts[0], 10) - 1;
-        const day = parseInt(parts[1], 10);
-        const year = parseInt(parts[2], 10);
-        const date2 = new Date(year, month, day);
-        if (!isNaN(date2.getTime())) {
-          return date2;
-        }
-      }
-    }
-    const date = new Date(dateString);
-    return isNaN(date.getTime()) ? null : date;
-  } catch {
-    return null;
-  }
-}
 function isDateInArray(date, dates) {
   const dateStr = date.toDateString();
   return dates.some((d) => d.toDateString() === dateStr);
@@ -1387,43 +1487,30 @@ function DatePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const [inputValue, setInputValue] = React7__namespace.useState("");
-  const [selectedMonth, setSelectedMonth] = React7__namespace.useState(
+  const [isOpen, setIsOpen] = React8__namespace.useState(false);
+  const [selectedMonth, setSelectedMonth] = React8__namespace.useState(
     value || /* @__PURE__ */ new Date()
   );
-  const containerRef = React7__namespace.useRef(null);
-  const inputRef = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
-    setInputValue(formatDate(value, format));
+  const containerRef = React8__namespace.useRef(null);
+  const inputRef = React8__namespace.useRef(null);
+  React8__namespace.useEffect(() => {
     if (value) {
       setSelectedMonth(value);
     }
-  }, [value, format]);
+  }, [value]);
   const handleDateSelect = (date) => {
     onChange(date);
     setIsOpen(false);
     onBlur?.();
   };
-  const handleInputChange = (e) => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    const parsedDate = parseDate(newValue, format);
-    if (parsedDate && !isNaN(parsedDate.getTime())) {
-      onChange(parsedDate);
-    } else if (newValue === "") {
-      onChange(null);
-    }
-  };
   const handleClear = (e) => {
     e.stopPropagation();
     onChange(null);
-    setInputValue("");
     inputRef.current?.focus();
   };
   const handleToggle = () => {
     if (disabled) return;
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
   const isDisabled = (date) => {
     if (minDate && date < minDate) return true;
@@ -1432,20 +1519,17 @@ function DatePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  React7__namespace.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-        onBlur?.();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }
+  const closeCalendar = React8__namespace.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onBlur?.();
   }, [isOpen, onBlur]);
+  useOnClickOutside.useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  const dayGridStyle = {
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+  };
+  const hasValue = Boolean(value);
+  const displayValue = formatDate(value, format);
   const renderCalendar = () => {
     const year = selectedMonth.getFullYear();
     const month = selectedMonth.getMonth();
@@ -1478,44 +1562,57 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React7__namespace.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7__namespace.createElement(
+    return /* @__PURE__ */ React8__namespace.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React8__namespace.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent hover:bg-muted cursor-pointer transition-colors",
         onClick: handlePrevMonth,
         "aria-label": "Previous month"
       },
-      "\u2190"
-    ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7__namespace.createElement(
+      "\u2039"
+    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React8__namespace.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent hover:bg-muted cursor-pointer transition-colors",
         onClick: handleNextMonth,
         "aria-label": "Next month"
       },
-      "\u2192"
-    )), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7__namespace.createElement(
+      "\u203A"
+    )), /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
-        key: day,
-        className: "flex items-center justify-center h-8 w-full text-xs font-medium"
+        className: "grid gap-1 text-xs text-muted-foreground",
+        style: dayGridStyle
       },
-      day
-    ))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8__namespace.createElement(
+        "div",
+        {
+          key: day,
+          className: "flex items-center justify-center h-8 w-8 font-medium"
+        },
+        day
+      ))
+    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7__namespace.createElement("div", { key: `empty-${index}` });
+        return /* @__PURE__ */ React8__namespace.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__ */ React7__namespace.createElement(
+      return /* @__PURE__ */ React8__namespace.createElement(
         "button",
         {
           key: date.toISOString(),
           type: "button",
-          className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-primary hover:text-primary-foreground ${isSelected ? "bg-primary text-primary-foreground font-semibold" : ""} ${isToday ? "border border-primary" : ""} ${disabled2 ? "cursor-not-allowed opacity-50 pointer-events-none" : ""}`,
+          className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
+            "hover:bg-muted",
+            isSelected && "bg-primary text-primary-foreground font-semibold",
+            !isSelected && isToday && "border border-primary",
+            disabled2 && "cursor-not-allowed opacity-50 pointer-events-none"
+          ),
           onClick: () => !disabled2 && handleDateSelect(date),
           disabled: disabled2,
           "aria-label": formatDate(date, format)
@@ -1524,21 +1621,21 @@ function DatePicker({
       );
     })));
   };
-  const combinedClassName = `relative ${className}`.trim();
-  return /* @__PURE__ */ React7__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7__namespace.createElement(
+  const combinedClassName = cn("relative", className);
+  return /* @__PURE__ */ React8__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       type: "hidden",
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1551,16 +1648,24 @@ function DatePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React7__namespace.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__ */ React8__namespace.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__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       ref: inputRef,
       type: "text",
-      className: `flex h-9 w-full rounded-md border border-input bg-transparent ${showIcon ? "pl-10" : "pl-3"} ${clearable && value ? "pr-10" : "pr-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 ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
-      value: inputValue,
-      onChange: handleInputChange,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent 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,
+        showIcon ? "pl-10" : "pl-3",
+        clearable && value ? "pr-10" : "pr-3",
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      value: displayValue,
       onClick: handleToggle,
       onBlur,
       disabled,
@@ -1571,7 +1676,7 @@ function DatePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React7__namespace.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1581,49 +1686,49 @@ function DatePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar()));
+  )), isOpen && !disabled && /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar()));
 }
 DatePicker.displayName = "DatePicker";
-function parseTimeString(timeStr, use24Hour) {
-  if (!timeStr) return null;
-  try {
-    if (use24Hour) {
-      const [hourStr, minuteStr] = timeStr.split(":");
-      const hour24 = parseInt(hourStr, 10);
-      const minute = parseInt(minuteStr, 10);
-      if (isNaN(hour24) || isNaN(minute)) return null;
-      if (hour24 < 0 || hour24 > 23) return null;
-      if (minute < 0 || minute > 59) return null;
-      const period = hour24 >= 12 ? "PM" : "AM";
-      const hour = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
-      return { hour, minute, period };
-    } else {
-      const match = timeStr.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-      if (!match) return null;
-      const hour = parseInt(match[1], 10);
-      const minute = parseInt(match[2], 10);
-      const period = match[3].toUpperCase();
-      if (hour < 1 || hour > 12) return null;
-      if (minute < 0 || minute > 59) return null;
-      return { hour, minute, period };
+function normalizeToNativeTime(value) {
+  if (!value) return "";
+  const twelveHourMatch = value.match(
+    /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)$/i
+  );
+  if (twelveHourMatch) {
+    const rawHour = parseInt(twelveHourMatch[1], 10);
+    const minute = parseInt(twelveHourMatch[2], 10);
+    const period = twelveHourMatch[4].toUpperCase();
+    if (Number.isNaN(rawHour) || Number.isNaN(minute) || rawHour < 1 || rawHour > 12 || minute < 0 || minute > 59) {
+      return "";
     }
-  } catch {
-    return null;
+    const normalizedHour = period === "PM" ? rawHour === 12 ? 12 : rawHour + 12 : rawHour === 12 ? 0 : rawHour;
+    return `${String(normalizedHour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
   }
+  const twentyFourHourMatch = value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+  if (twentyFourHourMatch) {
+    const hour = parseInt(twentyFourHourMatch[1], 10);
+    const minute = parseInt(twentyFourHourMatch[2], 10);
+    if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+      return "";
+    }
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+  return "";
 }
-function formatTimeValue(time, use24Hour) {
-  if (!time) return "";
+function formatFromNativeTime(nativeValue, use24Hour) {
+  if (!nativeValue) return "";
+  const [hourValue, minuteValue] = nativeValue.split(":");
+  const hour = parseInt(hourValue, 10);
+  const minute = parseInt(minuteValue, 10);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) {
+    return "";
+  }
   if (use24Hour) {
-    let hour24 = time.hour;
-    if (time.period === "PM" && time.hour !== 12) {
-      hour24 = time.hour + 12;
-    } else if (time.period === "AM" && time.hour === 12) {
-      hour24 = 0;
-    }
-    return `${String(hour24).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
-  } else {
-    return `${time.hour}:${String(time.minute).padStart(2, "0")} ${time.period}`;
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
   }
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour % 12 || 12;
+  return `${hour12}:${String(minute).padStart(2, "0")} ${period}`;
 }
 function TimePicker({
   name,
@@ -1641,88 +1746,33 @@ function TimePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const [timeValue, setTimeValue] = React7__namespace.useState(null);
-  const containerRef = React7__namespace.useRef(null);
-  const inputRef = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
-    const parsed = parseTimeString(value, use24Hour);
-    setTimeValue(parsed);
-  }, [value, use24Hour]);
-  const handleHourChange = (hour) => {
-    const newTime = {
-      hour,
-      minute: timeValue?.minute || 0,
-      period: timeValue?.period || "AM"
-    };
-    setTimeValue(newTime);
-    onChange(formatTimeValue(newTime, use24Hour));
-  };
-  const handleMinuteChange = (minute) => {
-    const newTime = {
-      hour: timeValue?.hour || 12,
-      minute,
-      period: timeValue?.period || "AM"
-    };
-    setTimeValue(newTime);
-    onChange(formatTimeValue(newTime, use24Hour));
-  };
-  const handlePeriodChange = (period) => {
-    const newTime = {
-      hour: timeValue?.hour || 12,
-      minute: timeValue?.minute || 0,
-      period
-    };
-    setTimeValue(newTime);
-    onChange(formatTimeValue(newTime, use24Hour));
+  const inputRef = React8__namespace.useRef(null);
+  const [nativeValue, setNativeValue] = React8__namespace.useState(
+    normalizeToNativeTime(value)
+  );
+  React8__namespace.useEffect(() => {
+    setNativeValue(normalizeToNativeTime(value));
+  }, [value]);
+  const handleChange = (e) => {
+    const nextNativeValue = e.target.value;
+    setNativeValue(nextNativeValue);
+    onChange(formatFromNativeTime(nextNativeValue, use24Hour));
   };
   const handleClear = (e) => {
     e.stopPropagation();
+    setNativeValue("");
     onChange("");
-    setTimeValue(null);
     inputRef.current?.focus();
   };
-  const handleToggle = () => {
-    if (disabled) return;
-    setIsOpen(!isOpen);
-  };
-  React7__namespace.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-        onBlur?.();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }
-  }, [isOpen, onBlur]);
-  const hours = React7__namespace.useMemo(() => {
-    if (use24Hour) {
-      return Array.from({ length: 24 }, (_, i) => i);
-    } else {
-      return Array.from({ length: 12 }, (_, i) => i + 1);
-    }
-  }, [use24Hour]);
-  const minutes = React7__namespace.useMemo(() => {
-    const mins = [];
-    for (let i = 0; i < 60; i += minuteStep) {
-      mins.push(i);
-    }
-    return mins;
-  }, [minuteStep]);
-  const combinedClassName = cn("relative", className);
-  const displayValue = formatTimeValue(timeValue, use24Hour);
-  return /* @__PURE__ */ React7__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7__namespace.createElement(
+  const hasValue = Boolean(value);
+  const stepInSeconds = Math.max(1, minuteStep * 60);
+  return /* @__PURE__ */ React8__namespace.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React8__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1735,34 +1785,38 @@ function TimePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React7__namespace.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ React7__namespace.createElement("path", { d: "M12 6v6l4 2" })
+      /* @__PURE__ */ React8__namespace.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M12 6v6l4 2" })
     )
-  ), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       ref: inputRef,
-      type: "text",
+      type: "time",
       className: cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent 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",
+        "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
+        INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && value ? "pr-10" : "pr-3",
-        error && "border-red-500 ring-1 ring-red-500"
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
       ),
-      value: displayValue,
-      onClick: handleToggle,
+      value: nativeValue,
+      onChange: handleChange,
       onBlur,
       disabled,
       required,
+      step: stepInSeconds,
       placeholder,
       "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
       "aria-describedby": props["aria-describedby"],
       "aria-required": required || props["aria-required"],
-      readOnly: true
+      ...props
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React7__namespace.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1772,84 +1826,7 @@ function TimePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-xs font-medium mb-2 text-center" }, use24Hour ? "Hour" : "Hour"), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto" }, hours.map((hour) => {
-    const displayHour = use24Hour ? hour : hour;
-    const isSelected = use24Hour ? timeValue?.hour === (hour === 0 ? 12 : hour > 12 ? hour - 12 : hour) && timeValue?.period === (hour >= 12 ? "PM" : "AM") : timeValue?.hour === hour;
-    return /* @__PURE__ */ React7__namespace.createElement(
-      "button",
-      {
-        key: hour,
-        type: "button",
-        className: cn(
-          "flex items-center justify-center h-8 w-full rounded",
-          "border-none bg-transparent cursor-pointer text-sm transition-colors",
-          "hover:bg-primary hover:text-primary-foreground",
-          isSelected ? "bg-primary text-primary-foreground font-semibold" : ""
-        ),
-        onClick: () => {
-          if (use24Hour) {
-            const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-            const period = hour >= 12 ? "PM" : "AM";
-            const newTime = {
-              hour: hour12,
-              minute: timeValue?.minute || 0,
-              period
-            };
-            setTimeValue(newTime);
-            onChange(formatTimeValue(newTime, use24Hour));
-          } else {
-            handleHourChange(hour);
-          }
-        },
-        "aria-label": `${String(displayHour).padStart(2, "0")} hours`
-      },
-      String(displayHour).padStart(2, "0")
-    );
-  }))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-xs font-medium mb-2 text-center" }, "Minute"), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto" }, minutes.map((minute) => {
-    const isSelected = timeValue?.minute === minute;
-    return /* @__PURE__ */ React7__namespace.createElement(
-      "button",
-      {
-        key: minute,
-        type: "button",
-        className: cn(
-          "flex items-center justify-center h-8 w-full",
-          "rounded border-none bg-transparent cursor-pointer text-sm transition-colors",
-          "hover:bg-primary hover:text-primary-foreground",
-          isSelected ? "bg-primary text-primary-foreground font-semibold" : ""
-        ),
-        onClick: () => handleMinuteChange(minute),
-        "aria-label": `${String(minute).padStart(2, "0")} minutes`
-      },
-      String(minute).padStart(2, "0")
-    );
-  }))), !use24Hour && /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col w-20" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-xs font-medium mb-2 text-center" }, "Period"), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React7__namespace.createElement(
-    "button",
-    {
-      type: "button",
-      className: cn(
-        "flex items-center justify-center h-8 w-full",
-        "rounded border-none bg-transparent cursor-pointer text-sm",
-        "transition-colors hover:bg-primary hover:text-primary-foreground",
-        timeValue?.period === "AM" ? "bg-muted font-semibold" : ""
-      ),
-      onClick: () => handlePeriodChange("AM")
-    },
-    "AM"
-  ), /* @__PURE__ */ React7__namespace.createElement(
-    "button",
-    {
-      type: "button",
-      className: cn(
-        "flex items-center justify-center h-8 w-full",
-        "rounded border-none bg-transparent cursor-pointer text-sm",
-        "transition-colors hover:bg-primary hover:text-primary-foreground",
-        timeValue?.period === "PM" ? "bg-muted font-semibold" : ""
-      ),
-      onClick: () => handlePeriodChange("PM")
-    },
-    "PM"
-  ))))));
+  )));
 }
 TimePicker.displayName = "TimePicker";
 function formatDate2(date, format) {
@@ -1869,6 +1846,9 @@ function isDateInRange(date, start, end) {
   const time = date.getTime();
   return time >= start.getTime() && time <= end.getTime();
 }
+function addMonths(date, delta) {
+  return new Date(date.getFullYear(), date.getMonth() + delta, 1);
+}
 function DateRangePicker({
   name,
   value = { start: null, end: null },
@@ -1889,15 +1869,15 @@ function DateRangePicker({
   separator = " - ",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const [selectedMonth, setSelectedMonth] = React7__namespace.useState(
+  const [isOpen, setIsOpen] = React8__namespace.useState(false);
+  const [selectedMonth, setSelectedMonth] = React8__namespace.useState(
     value.start || /* @__PURE__ */ new Date()
   );
-  const [rangeStart, setRangeStart] = React7__namespace.useState(value.start);
-  const [rangeEnd, setRangeEnd] = React7__namespace.useState(value.end);
-  const [hoverDate, setHoverDate] = React7__namespace.useState(null);
-  const containerRef = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
+  const [rangeStart, setRangeStart] = React8__namespace.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React8__namespace.useState(value.end);
+  const [hoverDate, setHoverDate] = React8__namespace.useState(null);
+  const containerRef = React8__namespace.useRef(null);
+  React8__namespace.useEffect(() => {
     setRangeStart(value.start);
     setRangeEnd(value.end);
     if (value.start) {
@@ -1931,7 +1911,7 @@ function DateRangePicker({
   };
   const handleToggle = () => {
     if (disabled) return;
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
   const isDisabled = (date) => {
     if (minDate && date < minDate) return true;
@@ -1940,23 +1920,36 @@ function DateRangePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  React7__namespace.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-        onBlur?.();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }
+  const closeCalendar = React8__namespace.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onBlur?.();
   }, [isOpen, onBlur]);
-  const renderCalendar = () => {
-    const year = selectedMonth.getFullYear();
-    const month = selectedMonth.getMonth();
+  useOnClickOutside.useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  const dayGridStyle = {
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+  };
+  const monthsGridStyle = {
+    gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))"
+  };
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const hasValue = Boolean(rangeStart || rangeEnd);
+  const renderMonth = (monthDate, controls) => {
+    const year = monthDate.getFullYear();
+    const month = monthDate.getMonth();
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
     const days = [];
@@ -1966,54 +1959,41 @@ function DateRangePicker({
     for (let day = 1; day <= daysInMonth; day++) {
       days.push(new Date(year, month, day));
     }
-    const monthNames = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December"
-    ];
-    const handlePrevMonth = () => {
-      setSelectedMonth(new Date(year, month - 1, 1));
-    };
-    const handleNextMonth = () => {
-      setSelectedMonth(new Date(year, month + 1, 1));
-    };
-    return /* @__PURE__ */ React7__namespace.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7__namespace.createElement(
+    return /* @__PURE__ */ React8__namespace.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React8__namespace.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
-        onClick: handlePrevMonth,
+        className: "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent hover:bg-muted cursor-pointer transition-colors",
+        onClick: () => setSelectedMonth((prev) => addMonths(prev, -1)),
         "aria-label": "Previous month"
       },
-      "\u2190"
-    ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7__namespace.createElement(
+      "\u2039"
+    ) : /* @__PURE__ */ React8__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React8__namespace.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
-        onClick: handleNextMonth,
+        className: "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent hover:bg-muted cursor-pointer transition-colors",
+        onClick: () => setSelectedMonth((prev) => addMonths(prev, 1)),
         "aria-label": "Next month"
       },
-      "\u2192"
-    )), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7__namespace.createElement(
+      "\u203A"
+    ) : /* @__PURE__ */ React8__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React8__namespace.createElement(
       "div",
       {
-        key: day,
-        className: "flex items-center justify-center h-8 w-full text-xs font-medium"
+        className: "grid gap-1 text-xs text-muted-foreground",
+        style: dayGridStyle
       },
-      day
-    ))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8__namespace.createElement(
+        "div",
+        {
+          key: `${month}-${day}`,
+          className: "flex items-center justify-center h-8 w-8 font-medium"
+        },
+        day
+      ))
+    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7__namespace.createElement("div", { key: `empty-${index}` });
+        return /* @__PURE__ */ React8__namespace.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();
@@ -2025,17 +2005,17 @@ function DateRangePicker({
       );
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React7__namespace.createElement(
+      return /* @__PURE__ */ React8__namespace.createElement(
         "button",
         {
           key: date.toISOString(),
           type: "button",
           className: cn(
-            "flex items-center justify-center h-8 w-full rounded border-none bg-transparent",
-            "cursor-pointer text-sm transition-colors hover:bg-muted",
-            isRangeEndpoint && "bg-muted font-semibold",
-            isRangeHighlight && "bg-muted/70",
-            isToday && "border border-primary",
+            "flex items-center justify-center h-8 w-8 rounded-md border-none bg-transparent cursor-pointer text-sm transition-colors",
+            "hover:bg-muted",
+            isRangeEndpoint && "bg-primary text-primary-foreground font-semibold",
+            isRangeHighlight && "bg-muted",
+            !isRangeEndpoint && !isRangeHighlight && isToday && "border border-primary",
             disabled2 && "cursor-not-allowed opacity-50 pointer-events-none"
           ),
           onClick: () => !disabled2 && handleDateSelect(date),
@@ -2050,27 +2030,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__ */ React7__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7__namespace.createElement(
+  return /* @__PURE__ */ React8__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[start]`,
       value: rangeStart ? rangeStart.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React8__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2083,9 +2063,9 @@ function DateRangePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React7__namespace.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__ */ React8__namespace.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__ */ React7__namespace.createElement(
+  ), /* @__PURE__ */ React8__namespace.createElement(
     "input",
     {
       type: "text",
@@ -2093,9 +2073,11 @@ function DateRangePicker({
         "flex h-9 w-full rounded-md border border-input bg-transparent 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,
         showIcon ? "pl-10" : "pl-3",
         clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
-        error && "border-red-500 ring-1 ring-red-500"
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
       ),
       value: displayValue,
       onClick: handleToggle,
@@ -2108,7 +2090,7 @@ function DateRangePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React7__namespace.createElement(
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -2118,7 +2100,7 @@ function DateRangePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar(), rangeStart && !rangeEnd && /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")));
+  )), isOpen && !disabled && /* @__PURE__ */ React8__namespace.createElement("div", { 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__ */ React8__namespace.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))), rangeStart && !rangeEnd && /* @__PURE__ */ React8__namespace.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -2189,11 +2171,11 @@ function RichTextEditor({
   ],
   ...props
 }) {
-  const [currentMode, setCurrentMode] = React7__namespace.useState(mode);
-  const [content, setContent] = React7__namespace.useState(value);
-  const editorRef = React7__namespace.useRef(null);
-  const textareaRef = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
+  const [currentMode, setCurrentMode] = React8__namespace.useState(mode);
+  const [content, setContent] = React8__namespace.useState(value);
+  const editorRef = React8__namespace.useRef(null);
+  const textareaRef = React8__namespace.useRef(null);
+  React8__namespace.useEffect(() => {
     setContent(value);
     if (currentMode === "wysiwyg" && editorRef.current) {
       editorRef.current.innerHTML = value;
@@ -2281,16 +2263,27 @@ function RichTextEditor({
       }
     }
   };
-  const combinedClassName = `rounded-md border border-input ${error ? "border-red-500 ring-1 ring-red-500" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`.trim();
+  const hasValue = React8__namespace.useMemo(() => {
+    if (!content) return false;
+    const stripped = content.replace(/<[^>]+>/g, "").trim();
+    return stripped.length > 0;
+  }, [content]);
+  const combinedClassName = cn(
+    "rounded-md border border-input",
+    !error && hasValue && "ring-2 ring-ring",
+    error && "border-destructive ring-1 ring-destructive",
+    disabled && "opacity-50 cursor-not-allowed",
+    className
+  );
   const editorStyle = {
     minHeight,
     maxHeight,
     overflowY: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ React7__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7__namespace.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React8__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
-    return /* @__PURE__ */ React7__namespace.createElement(
+    return /* @__PURE__ */ React8__namespace.createElement(
       "button",
       {
         key: buttonName,
@@ -2303,7 +2296,7 @@ function RichTextEditor({
       },
       button.icon
     );
-  })), allowModeSwitch && /* @__PURE__ */ React7__namespace.createElement(
+  })), allowModeSwitch && /* @__PURE__ */ React8__namespace.createElement(
     "button",
     {
       type: "button",
@@ -2314,7 +2307,7 @@ function RichTextEditor({
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React7__namespace.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React7__namespace.createElement(
+  )), /* @__PURE__ */ React8__namespace.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React8__namespace.createElement(
     "div",
     {
       ref: editorRef,
@@ -2329,11 +2322,14 @@ function RichTextEditor({
       "aria-required": required || props["aria-required"],
       suppressContentEditableWarning: true
     }
-  ) : /* @__PURE__ */ React7__namespace.createElement(
+  ) : /* @__PURE__ */ React8__namespace.createElement(
     "textarea",
     {
       ref: textareaRef,
-      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent resize-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+      className: cn(
+        "w-full p-3 text-base md:text-sm outline-none bg-transparent resize-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        INPUT_AUTOFILL_RESET_CLASSES
+      ),
       value: content,
       onChange: handleMarkdownChange,
       onBlur,