@page-speed/forms 0.4.2 → 0.4.4

package/dist/inputs.js

@@ -1,6 +1,13 @@
-import * as React7 from 'react';
+import * as React8 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
+
+// src/inputs/TextInput.tsx
+function cn(...inputs) {
+  return twMerge(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({
@@ -23,10 +30,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 placeholder:text-muted-foreground 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.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.createElement(
     "input",
     {
       type,
@@ -70,10 +84,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 placeholder:text-muted-foreground 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.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.createElement(
     "textarea",
     {
       name,
@@ -97,9 +118,53 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
-function cn(...inputs) {
-  return twMerge(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.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  let primaryElement = null;
+  if (primary) {
+    if (variant === "label") {
+      primaryElement = /* @__PURE__ */ React8.createElement(
+        "label",
+        {
+          htmlFor: labelHtmlFor,
+          "data-slot": "field-label",
+          className: primaryClasses
+        },
+        primary,
+        requiredIndicator
+      );
+    } else if (variant === "legend") {
+      primaryElement = /* @__PURE__ */ React8.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+    } else {
+      primaryElement = /* @__PURE__ */ React8.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+    }
+  }
+  const secondaryElement = secondary ? /* @__PURE__ */ React8.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.createElement(React8.Fragment, null, primaryElement, secondaryElement);
+};
 
 // src/inputs/Checkbox.tsx
 function Checkbox({
@@ -114,12 +179,12 @@ function Checkbox({
   indeterminate = false,
   label,
   description,
-  checkboxVariant = "boxed",
+  useChoiceCard = false,
   ...props
 }) {
-  const inputRef = React7.useRef(null);
+  const inputRef = React8.useRef(null);
   const checkboxId = props.id || `checkbox-${name}`;
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -131,7 +196,7 @@ function Checkbox({
     onBlur?.();
   };
   const isActive = value || indeterminate && !value;
-  const checkbox = /* @__PURE__ */ React7.createElement(
+  const checkbox = /* @__PURE__ */ React8.createElement(
     "div",
     {
       className: cn(
@@ -139,7 +204,7 @@ function Checkbox({
         !label && className
       )
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "input",
       {
         ref: inputRef,
@@ -158,7 +223,7 @@ function Checkbox({
         ...props
       }
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "div",
       {
         className: cn(
@@ -171,7 +236,7 @@ function Checkbox({
           "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
         )
       },
-      value && /* @__PURE__ */ React7.createElement(
+      value && /* @__PURE__ */ React8.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -182,9 +247,9 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })
+        /* @__PURE__ */ React8.createElement("polyline", { points: "20 6 9 17 4 12" })
       ),
-      indeterminate && !value && /* @__PURE__ */ React7.createElement(
+      indeterminate && !value && /* @__PURE__ */ React8.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -195,31 +260,44 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ React8.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       )
     )
   );
   if (label) {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.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.createElement("div", { className: "flex w-full flex-row gap-2" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label), description && /* @__PURE__ */ React7.createElement(
-        "p",
+      /* @__PURE__ */ React8.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.createElement(
+          LabelGroup,
+          {
+            variant: "text",
+            primary: label,
+            secondary: description,
+            secondaryId: description ? `${checkboxId}-description` : void 0,
+            primaryClassName: "mb-0",
+            secondaryClassName: "text-xs opacity-75"
+          }
+        )
+      )
     );
   }
   return checkbox;
@@ -253,13 +331,11 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
-  const checkboxVariant = React7.useMemo(() => {
-    if (options.some((opt) => opt.description)) {
-      return "boxed";
-    }
-    return "inline";
+  const useChoiceCard = React8.useMemo(() => {
+    if (!options) return false;
+    return options?.some((opt) => opt.description);
   }, [options]);
-  const countableValue = React7.useMemo(() => {
+  const countableValue = React8.useMemo(() => {
     if (value?.length > 0) {
       return value.length;
     }
@@ -284,29 +360,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.createElement(
-    "div",
+  const containerClass = React8.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.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.createElement("div", { className: "text-sm font-medium" }, label),
-    description && /* @__PURE__ */ React7.createElement("div", { className: "text-muted-foreground text-sm" }, description),
-    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "legend",
+        secondaryId: groupDescriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React8.createElement(
       Checkbox,
       {
         name: `${name}-select-all`,
@@ -316,7 +400,7 @@ function CheckboxGroup({
         onBlur: handleBlur,
         indeterminate: someSelected,
         label: selectAllLabel,
-        checkboxVariant: "inline",
+        useChoiceCard,
         disabled,
         "aria-label": selectAllLabel
       }
@@ -324,7 +408,7 @@ function CheckboxGroup({
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         Checkbox,
         {
           key: option.value,
@@ -338,11 +422,11 @@ function CheckboxGroup({
           error,
           label: renderOption ? renderOption(option) : option.label,
           description: renderOption ? void 0 : option.description,
-          checkboxVariant
+          useChoiceCard
         }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement(
+    (minSelections || maxSelections) && /* @__PURE__ */ React8.createElement(
       "div",
       {
         className: cn(
@@ -351,8 +435,8 @@ function CheckboxGroup({
         ),
         "aria-live": "polite"
       },
-      minSelections && countableValue < minSelections && /* @__PURE__ */ React7.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
-      maxSelections && /* @__PURE__ */ React7.createElement("span", null, countableValue, "/", maxSelections, " selected")
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React8.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React8.createElement("span", null, countableValue, "/", maxSelections, " selected")
     )
   );
 }
@@ -367,8 +451,8 @@ function Radio({
   error = false,
   className = "",
   layout = "stacked",
-  radioVariant = "inline",
   label,
+  description,
   options,
   ...props
 }) {
@@ -403,29 +487,43 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const containerClass = cn(
-    "w-full gap-3",
-    layout === "stacked" && "flex flex-col",
-    layout === "inline" && "flex flex-row flex-wrap",
-    className
-  );
-  return /* @__PURE__ */ React7.createElement(
-    "div",
+  const useChoiceCard = React8.useMemo(() => {
+    return options.some((option) => option.description);
+  }, [options]);
+  const containerClass = React8.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.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.createElement("div", { className: "text-sm font-medium mb-2" }, label),
+    /* @__PURE__ */ React8.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.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(
+      const radioIndicator = /* @__PURE__ */ React8.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
         "input",
         {
           type: "radio",
@@ -440,7 +538,7 @@ function Radio({
           className: "peer sr-only",
           "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
         }
-      ), /* @__PURE__ */ React7.createElement(
+      ), /* @__PURE__ */ React8.createElement(
         "div",
         {
           className: cn(
@@ -453,31 +551,45 @@ function Radio({
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
           )
         },
-        isChecked && /* @__PURE__ */ React7.createElement("div", { className: "size-3 rounded-full bg-primary" })
+        isChecked && /* @__PURE__ */ React8.createElement("div", { className: "size-3 rounded-full bg-primary" })
       ));
-      const labelContent = /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, option.label), hasDescription && /* @__PURE__ */ React7.createElement(
-        "p",
+      const labelContent = /* @__PURE__ */ React8.createElement(
+        LabelGroup,
         {
-          className: "text-xs opacity-75",
-          id: `${radioId}-description`
-        },
-        option.description
-      ));
-      return /* @__PURE__ */ React7.createElement(
+          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.createElement(
         "label",
         {
           key: option.value,
           className: cn(
             "w-full h-full flex gap-3 p-3 duration-200",
-            radioVariant === "boxed" && "border rounded-lg hover:ring-2",
-            radioVariant === "boxed" && isChecked && "ring-2",
+            useChoiceCard && "border rounded-lg hover:ring-2",
+            useChoiceCard && isChecked && "ring-2",
             isDisabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer"
           ),
           htmlFor: radioId,
           onKeyDown: (e) => handleKeyDown(e, index),
           tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, radioVariant === "inline" && radioIndicator, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), radioVariant === "boxed" && radioIndicator)
+        /* @__PURE__ */ React8.createElement(
+          "div",
+          {
+            className: cn(
+              "flex w-full flex-row gap-2",
+              useChoiceCard ? "items-start" : "items-center"
+            )
+          },
+          !useChoiceCard && radioIndicator,
+          /* @__PURE__ */ React8.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent),
+          useChoiceCard && radioIndicator
+        )
       );
     })
   );
@@ -502,19 +614,19 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [searchQuery, setSearchQuery] = React7.useState("");
-  const [focusedIndex, setFocusedIndex] = React7.useState(-1);
-  const selectRef = React7.useRef(null);
-  const searchInputRef = React7.useRef(null);
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [searchQuery, setSearchQuery] = React8.useState("");
+  const [focusedIndex, setFocusedIndex] = React8.useState(-1);
+  const selectRef = React8.useRef(null);
+  const searchInputRef = React8.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React7.useMemo(() => {
+  const allOptions = React8.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React7.useMemo(() => {
+  const filteredOptions = React8.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -524,9 +636,10 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React7.useMemo(() => {
+  const selectedOption = React8.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
+  const hasValue = Boolean(value);
   const handleSelect = (optionValue) => {
     onChange(optionValue);
     setIsOpen(false);
@@ -567,9 +680,7 @@ function Select({
           if (enabledOptions.length > 0) {
             const currentIndexInFiltered = focusedIndex;
             const nextIndex = (currentIndexInFiltered + 1) % enabledOptions.length;
-            setFocusedIndex(
-              filteredOptions.indexOf(enabledOptions[nextIndex])
-            );
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextIndex]));
           }
         }
         break;
@@ -580,9 +691,7 @@ function Select({
           if (enabledOptions.length > 0) {
             const currentIndexInFiltered = focusedIndex;
             const prevIndex = (currentIndexInFiltered - 1 + enabledOptions.length) % enabledOptions.length;
-            setFocusedIndex(
-              filteredOptions.indexOf(enabledOptions[prevIndex])
-            );
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[prevIndex]));
           }
         }
         break;
@@ -625,27 +734,22 @@ function Select({
         break;
     }
   };
-  const handleBlur = () => {
-    onBlur?.();
-  };
-  React7.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.createElement(
+  };
+  const closeDropdown = React8.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+    onBlur?.();
+  }, [isOpen, onBlur]);
+  useOnClickOutside(selectRef, closeDropdown, "pointerdown", true);
+  const combinedClassName = cn("relative w-full", className);
+  return /* @__PURE__ */ React8.createElement(
     "div",
     {
       ref: selectRef,
@@ -653,7 +757,7 @@ function Select({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "select",
       {
         name,
@@ -666,13 +770,19 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React7.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React7.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React8.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React8.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.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-accent 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,
@@ -683,48 +793,79 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React7.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7.createElement("span", { className: "text-muted-foreground" }, placeholder)),
-      /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React7.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React8.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React8.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React8.createElement(
         "button",
         {
           type: "button",
-          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent text-muted-foreground cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
+          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
           onClick: handleClear,
           "aria-label": "Clear selection",
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React7.createElement("span", { className: "text-muted-foreground text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React8.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React7.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.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
-      "input",
+    isOpen && /* @__PURE__ */ React8.createElement(
+      "div",
       {
-        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",
-        placeholder: "Search...",
-        value: searchQuery,
-        onChange: handleSearchChange,
-        onClick: (e) => e.stopPropagation(),
-        "aria-label": "Search options"
-      }
-    )), /* @__PURE__ */ React7.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React7.createElement("div", { className: "py-2 px-3 text-center text-sm text-muted-foreground" }, "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.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React7.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold text-muted-foreground" }, group.label), groupOptions.map((option) => {
-          const globalIndex = filteredOptions.indexOf(option);
+        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__ */ React8.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React8.createElement(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          className: cn(
+            "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
+            INPUT_AUTOFILL_RESET_CLASSES
+          ),
+          placeholder: "Search...",
+          value: searchQuery,
+          onChange: handleSearchChange,
+          onClick: (e) => e.stopPropagation(),
+          "aria-label": "Search options"
+        }
+      )),
+      /* @__PURE__ */ React8.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React8.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__ */ React8.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React8.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__ */ React8.createElement(
+              "div",
+              {
+                key: option.value,
+                className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-muted ${isFocused ? "bg-muted" : ""} ${isSelected ? "font-medium bg-muted" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
+                onClick: () => !isDisabled && handleSelect(option.value),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              renderOption ? renderOption(option) : option.label
+            );
+          }));
+        })
+      ) : (
+        // Render flat options
+        filteredOptions.map((option, index) => {
           const isSelected = value === option.value;
-          const isFocused = globalIndex === focusedIndex;
+          const isFocused = index === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React7.createElement(
+          return /* @__PURE__ */ React8.createElement(
             "div",
             {
               key: option.value,
-              className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground ${isFocused ? "bg-accent text-accent-foreground" : ""} ${isSelected ? "font-medium bg-accent" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
+              className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-muted ${isFocused ? "bg-muted" : ""} ${isSelected ? "font-medium bg-muted" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
               onClick: () => !isDisabled && handleSelect(option.value),
               role: "option",
               "aria-selected": isSelected,
@@ -732,28 +873,9 @@ function Select({
             },
             renderOption ? renderOption(option) : option.label
           );
-        }));
-      })
-    ) : (
-      // Render flat options
-      filteredOptions.map((option, index) => {
-        const isSelected = value === option.value;
-        const isFocused = index === focusedIndex;
-        const isDisabled = option.disabled;
-        return /* @__PURE__ */ React7.createElement(
-          "div",
-          {
-            key: option.value,
-            className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground ${isFocused ? "bg-accent text-accent-foreground" : ""} ${isSelected ? "font-medium bg-accent" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
-            onClick: () => !isDisabled && handleSelect(option.value),
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": isDisabled
-          },
-          renderOption ? renderOption(option) : option.label
-        );
-      })
-    )))
+        })
+      ))
+    )
   );
 }
 Select.displayName = "Select";
@@ -762,7 +884,7 @@ function FileInput({
   value = [],
   onChange,
   onBlur,
-  placeholder = "Choose file(s)...",
+  placeholder = "Choose file...",
   disabled = false,
   required = false,
   error = false,
@@ -782,14 +904,14 @@ function FileInput({
   onFileRemove,
   ...props
 }) {
-  const inputRef = React7.useRef(null);
-  const [dragActive, setDragActive] = React7.useState(false);
-  const [cropperOpen, setCropperOpen] = React7.useState(false);
-  const [imageToCrop, setImageToCrop] = React7.useState(null);
-  const [crop, setCrop] = React7.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React7.useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = React7.useState(null);
-  const validateFile = React7.useCallback(
+  const inputRef = React8.useRef(null);
+  const [dragActive, setDragActive] = React8.useState(false);
+  const [cropperOpen, setCropperOpen] = React8.useState(false);
+  const [imageToCrop, setImageToCrop] = React8.useState(null);
+  const [crop, setCrop] = React8.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React8.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React8.useState(null);
+  const validateFile = React8.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -824,7 +946,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React7.useCallback(
+  const handleFiles = React8.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -865,9 +987,17 @@ function FileInput({
         inputRef.current.value = "";
       }
     },
-    [value, onChange, validateFile, maxFiles, multiple, enableCropping, onValidationError]
+    [
+      value,
+      onChange,
+      validateFile,
+      maxFiles,
+      multiple,
+      enableCropping,
+      onValidationError
+    ]
   );
-  const createCroppedImage = React7.useCallback(
+  const createCroppedImage = React8.useCallback(
     async (imageUrl, cropArea) => {
       return new Promise((resolve, reject) => {
         const image = new Image();
@@ -891,13 +1021,17 @@ function FileInput({
             cropArea.width,
             cropArea.height
           );
-          canvas.toBlob((blob) => {
-            if (blob) {
-              resolve(blob);
-            } else {
-              reject(new Error("Failed to create blob from canvas"));
-            }
-          }, "image/jpeg", 0.95);
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(blob);
+              } else {
+                reject(new Error("Failed to create blob from canvas"));
+              }
+            },
+            "image/jpeg",
+            0.95
+          );
         };
         image.onerror = () => {
           reject(new Error("Failed to load image"));
@@ -907,7 +1041,7 @@ function FileInput({
     },
     []
   );
-  const handleCropSave = React7.useCallback(async () => {
+  const handleCropSave = React8.useCallback(async () => {
     if (!imageToCrop || !croppedAreaPixels) return;
     try {
       const croppedBlob = await createCroppedImage(
@@ -917,11 +1051,9 @@ function FileInput({
       if (onCropComplete) {
         onCropComplete(croppedBlob, imageToCrop.file);
       }
-      const croppedFile = new File(
-        [croppedBlob],
-        imageToCrop.file.name,
-        { type: "image/jpeg" }
-      );
+      const croppedFile = new File([croppedBlob], imageToCrop.file.name, {
+        type: "image/jpeg"
+      });
       const updatedFiles = multiple ? [...value, croppedFile] : [croppedFile];
       onChange(updatedFiles);
       setCropperOpen(false);
@@ -933,8 +1065,16 @@ function FileInput({
     } catch (error2) {
       console.error("Failed to crop image:", error2);
     }
-  }, [imageToCrop, croppedAreaPixels, createCroppedImage, onCropComplete, value, onChange, multiple]);
-  const handleCropCancel = React7.useCallback(() => {
+  }, [
+    imageToCrop,
+    croppedAreaPixels,
+    createCroppedImage,
+    onCropComplete,
+    value,
+    onChange,
+    multiple
+  ]);
+  const handleCropCancel = React8.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
     }
@@ -944,13 +1084,13 @@ function FileInput({
     setZoom(1);
     setCroppedAreaPixels(null);
   }, [imageToCrop]);
-  const onCropChange = React7.useCallback((crop2) => {
+  const onCropChange = React8.useCallback((crop2) => {
     setCrop(crop2);
   }, []);
-  const onZoomChange = React7.useCallback((zoom2) => {
+  const onZoomChange = React8.useCallback((zoom2) => {
     setZoom(zoom2);
   }, []);
-  const onCropCompleteInternal = React7.useCallback(
+  const onCropCompleteInternal = React8.useCallback(
     (_, croppedAreaPixels2) => {
       setCroppedAreaPixels(croppedAreaPixels2);
     },
@@ -1011,7 +1151,7 @@ function FileInput({
     }
     return null;
   };
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -1025,7 +1165,7 @@ function FileInput({
     };
   }, [value, imageToCrop]);
   const combinedClassName = `${className}`.trim();
-  return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8.createElement(
     "input",
     {
       ref: inputRef,
@@ -1042,10 +1182,10 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.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-accent/50 hover:border-ring ${dragActive ? "bg-accent 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,
@@ -1057,10 +1197,9 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React8.createElement(
       "svg",
       {
-        className: "text-muted-foreground",
         width: "48",
         height: "48",
         viewBox: "0 0 24 24",
@@ -1071,112 +1210,122 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React7.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React7.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React7.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React7.createElement("p", { className: "text-xs text-muted-foreground" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7.createElement("p", { className: "text-xs text-muted-foreground" }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React7.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React8.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React8.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React8.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React8.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React8.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React8.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.createElement("li", { key: `${file.name}-${index}`, className: "flex items-center gap-3 p-3 rounded-md border border-border bg-card hover:bg-accent/50 transition-colors" }, previewUrl && /* @__PURE__ */ React7.createElement(
-      "img",
-      {
-        src: previewUrl,
-        alt: file.name,
-        className: "w-12 h-12 rounded object-cover",
-        width: "48",
-        height: "48"
-      }
-    ), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React7.createElement("span", { className: "text-xs text-muted-foreground" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React7.createElement(
-      "div",
+    return /* @__PURE__ */ React8.createElement(
+      "li",
       {
-        className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
-        role: "progressbar",
-        "aria-valuenow": uploadProgress[file.name],
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
+        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"
       },
-      /* @__PURE__ */ React7.createElement(
-        "div",
+      previewUrl && /* @__PURE__ */ React8.createElement(
+        "img",
         {
-          className: "h-full bg-primary transition-all",
-          style: { width: `${uploadProgress[file.name]}%` }
+          src: previewUrl,
+          alt: file.name,
+          className: "w-12 h-12 rounded object-cover",
+          width: "48",
+          height: "48"
         }
-      )
-    ), /* @__PURE__ */ React7.createElement("span", { className: "text-xs text-muted-foreground" }, uploadProgress[file.name], "%"))), enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React7.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          handleCrop(file);
-        },
-        disabled,
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
-        "aria-label": `Crop ${file.name}`
-      },
-      /* @__PURE__ */ React7.createElement(
-        "svg",
+      ),
+      /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React8.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React8.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React8.createElement(
+        "div",
         {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true"
+          className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
+          role: "progressbar",
+          "aria-valuenow": uploadProgress[file.name],
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
         },
-        /* @__PURE__ */ React7.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
-        /* @__PURE__ */ React7.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
-      )
-    ), /* @__PURE__ */ React7.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          handleRemove(index);
+        /* @__PURE__ */ React8.createElement(
+          "div",
+          {
+            className: "h-full bg-primary transition-all",
+            style: { width: `${uploadProgress[file.name]}%` }
+          }
+        )
+      ), /* @__PURE__ */ React8.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
+      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React8.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleCrop(file);
+          },
+          disabled,
+          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}`
         },
-        disabled,
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
-        "aria-label": `Remove ${file.name}`
-      },
-      /* @__PURE__ */ React7.createElement(
-        "svg",
+        /* @__PURE__ */ React8.createElement(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true"
+          },
+          /* @__PURE__ */ React8.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+          /* @__PURE__ */ React8.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+        )
+      ),
+      /* @__PURE__ */ React8.createElement(
+        "button",
         {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true"
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleRemove(index);
+          },
+          disabled,
+          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.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ React7.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ React8.createElement(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true"
+          },
+          /* @__PURE__ */ React8.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React8.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        )
       )
-    ));
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React7.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(
+    );
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React8.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
     "div",
     {
       className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React7.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React8.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      className: "flex items-center justify-center h-8 w-8 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+      className: "flex items-center justify-center h-8 w-8 rounded hover:bg-primary hover:text-primary-foreground transition-colors",
       onClick: handleCropCancel,
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React7.createElement("div", { className: "p-4" }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement("div", { className: "p-4" }, /* @__PURE__ */ React8.createElement(
     "div",
     {
       className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
@@ -1198,7 +1347,7 @@ function FileInput({
         document.addEventListener("mouseup", handleMouseUp);
       }
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "img",
       {
         src: imageToCrop.url,
@@ -1212,7 +1361,10 @@ function FileInput({
           const img = e.currentTarget;
           const containerWidth = 600;
           const containerHeight = 400;
-          const cropWidth = cropAspectRatio ? Math.min(containerWidth * 0.8, containerHeight * 0.8 * cropAspectRatio) : containerWidth * 0.8;
+          const cropWidth = cropAspectRatio ? Math.min(
+            containerWidth * 0.8,
+            containerHeight * 0.8 * cropAspectRatio
+          ) : containerWidth * 0.8;
           const cropHeight = cropAspectRatio ? cropWidth / cropAspectRatio : containerHeight * 0.8;
           const scale = zoom;
           const imgWidth = img.naturalWidth;
@@ -1230,7 +1382,7 @@ function FileInput({
         }
       }
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.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",
@@ -1239,9 +1391,18 @@ function FileInput({
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7.createElement("div", null))
+      /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8.createElement("div", null))
     )
-  ), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "zoom-slider", className: "text-sm font-medium whitespace-nowrap" }, "Zoom: ", zoom.toFixed(1), "x"), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React8.createElement(
+    "label",
+    {
+      htmlFor: "zoom-slider",
+      className: "text-sm font-medium whitespace-nowrap"
+    },
+    "Zoom: ",
+    zoom.toFixed(1),
+    "x"
+  ), /* @__PURE__ */ React8.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1254,15 +1415,15 @@ function FileInput({
       className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      className: "inline-flex items-center justify-center h-9 rounded-md px-4 text-sm font-medium border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors",
+      className: "inline-flex items-center justify-center h-9 rounded-md px-4 text-sm font-medium border border-input bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
       onClick: handleCropCancel
     },
     "Cancel"
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
@@ -1281,27 +1442,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);
@@ -1325,43 +1465,30 @@ function DatePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [inputValue, setInputValue] = React7.useState("");
-  const [selectedMonth, setSelectedMonth] = React7.useState(
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [selectedMonth, setSelectedMonth] = React8.useState(
     value || /* @__PURE__ */ new Date()
   );
-  const containerRef = React7.useRef(null);
-  const inputRef = React7.useRef(null);
-  React7.useEffect(() => {
-    setInputValue(formatDate(value, format));
+  const containerRef = React8.useRef(null);
+  const inputRef = React8.useRef(null);
+  React8.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;
@@ -1370,20 +1497,17 @@ function DatePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  React7.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.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onBlur?.();
   }, [isOpen, onBlur]);
+  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();
@@ -1416,44 +1540,57 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React7.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React8.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.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
+      "\u2039"
+    ), /* @__PURE__ */ React8.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React8.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.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement(
+      "\u203A"
+    )), /* @__PURE__ */ React8.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.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8.createElement(
+        "div",
+        {
+          key: day,
+          className: "flex items-center justify-center h-8 w-8 font-medium"
+        },
+        day
+      ))
+    ), /* @__PURE__ */ React8.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
+        return /* @__PURE__ */ React8.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.createElement(
+      return /* @__PURE__ */ React8.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)
@@ -1462,21 +1599,21 @@ function DatePicker({
       );
     })));
   };
-  const combinedClassName = `relative ${className}`.trim();
-  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+  const combinedClassName = cn("relative", className);
+  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8.createElement(
     "input",
     {
       type: "hidden",
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1489,16 +1626,24 @@ function DatePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React7.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.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.createElement(
+  ), /* @__PURE__ */ React8.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,
@@ -1509,7 +1654,7 @@ function DatePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React7.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
@@ -1519,49 +1664,49 @@ function DatePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.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.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,
@@ -1579,188 +1724,87 @@ function TimePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [timeValue, setTimeValue] = React7.useState(null);
-  const containerRef = React7.useRef(null);
-  const inputRef = React7.useRef(null);
-  React7.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.useRef(null);
+  const [nativeValue, setNativeValue] = React8.useState(
+    normalizeToNativeTime(value)
+  );
+  React8.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.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.useMemo(() => {
-    if (use24Hour) {
-      return Array.from({ length: 24 }, (_, i) => i);
-    } else {
-      return Array.from({ length: 12 }, (_, i) => i + 1);
-    }
-  }, [use24Hour]);
-  const minutes = React7.useMemo(() => {
-    const mins = [];
-    for (let i = 0; i < 60; i += minuteStep) {
-      mins.push(i);
-    }
-    return mins;
-  }, [minuteStep]);
-  const combinedClassName = `relative ${className}`.trim();
-  const displayValue = formatTimeValue(timeValue, use24Hour);
-  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
-    "input",
-    {
-      type: "hidden",
-      name,
-      value
-    }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
-    "svg",
+  const hasValue = Boolean(value);
+  const stepInSeconds = Math.max(1, minuteStep * 60);
+  return /* @__PURE__ */ React8.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
+    "span",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2"
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ React7.createElement("path", { d: "M12 6v6l4 2" })
-  )), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React8.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React8.createElement("path", { d: "M12 6v6l4 2" })
+    )
+  ), /* @__PURE__ */ React8.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 placeholder:text-muted-foreground 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: displayValue,
-      onClick: handleToggle,
+      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 && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
+      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.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 transition-colors",
       onClick: handleClear,
       "aria-label": "Clear time",
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.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.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, use24Hour ? "Hour" : "Hour"), /* @__PURE__ */ React7.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.createElement(
-      "button",
-      {
-        key: hour,
-        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-accent hover:text-accent-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.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, "Minute"), /* @__PURE__ */ React7.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.createElement(
-      "button",
-      {
-        key: minute,
-        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-accent hover:text-accent-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.createElement("div", { className: "flex flex-col w-20" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, "Period"), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React7.createElement(
-    "button",
-    {
-      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-accent hover:text-accent-foreground ${timeValue?.period === "AM" ? "bg-primary text-primary-foreground font-semibold" : ""}`,
-      onClick: () => handlePeriodChange("AM")
-    },
-    "AM"
-  ), /* @__PURE__ */ React7.createElement(
-    "button",
-    {
-      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-accent hover:text-accent-foreground ${timeValue?.period === "PM" ? "bg-primary text-primary-foreground font-semibold" : ""}`,
-      onClick: () => handlePeriodChange("PM")
-    },
-    "PM"
-  ))))));
+  )));
 }
 TimePicker.displayName = "TimePicker";
 function formatDate2(date, format) {
@@ -1780,6 +1824,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 },
@@ -1800,13 +1847,15 @@ function DateRangePicker({
   separator = " - ",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [selectedMonth, setSelectedMonth] = React7.useState(value.start || /* @__PURE__ */ new Date());
-  const [rangeStart, setRangeStart] = React7.useState(value.start);
-  const [rangeEnd, setRangeEnd] = React7.useState(value.end);
-  const [hoverDate, setHoverDate] = React7.useState(null);
-  const containerRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [selectedMonth, setSelectedMonth] = React8.useState(
+    value.start || /* @__PURE__ */ new Date()
+  );
+  const [rangeStart, setRangeStart] = React8.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React8.useState(value.end);
+  const [hoverDate, setHoverDate] = React8.useState(null);
+  const containerRef = React8.useRef(null);
+  React8.useEffect(() => {
     setRangeStart(value.start);
     setRangeEnd(value.end);
     if (value.start) {
@@ -1840,7 +1889,7 @@ function DateRangePicker({
   };
   const handleToggle = () => {
     if (disabled) return;
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
   const isDisabled = (date) => {
     if (minDate && date < minDate) return true;
@@ -1849,23 +1898,36 @@ function DateRangePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  React7.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.useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onBlur?.();
   }, [isOpen, onBlur]);
-  const renderCalendar = () => {
-    const year = selectedMonth.getFullYear();
-    const month = selectedMonth.getMonth();
+  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 = [];
@@ -1875,60 +1937,65 @@ 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.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React8.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent 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.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
+      "\u2039"
+    ) : /* @__PURE__ */ React8.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React8.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React8.createElement(
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent 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.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "flex items-center justify-center h-8 w-full text-xs text-muted-foreground font-medium" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
+      "\u203A"
+    ) : /* @__PURE__ */ React8.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        className: "grid gap-1 text-xs text-muted-foreground",
+        style: dayGridStyle
+      },
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8.createElement(
+        "div",
+        {
+          key: `${month}-${day}`,
+          className: "flex items-center justify-center h-8 w-8 font-medium"
+        },
+        day
+      ))
+    ), /* @__PURE__ */ React8.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
+        return /* @__PURE__ */ React8.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();
+      const isRangeEndpoint = Boolean(isStart || isEnd);
       const isInRange = rangeStart && rangeEnd && isDateInRange(date, rangeStart, rangeEnd);
       const isInHoverRange = rangeStart && !rangeEnd && hoverDate && (date >= rangeStart && date <= hoverDate || date <= rangeStart && date >= hoverDate);
+      const isRangeHighlight = Boolean(
+        (isInRange || isInHoverRange) && !isRangeEndpoint
+      );
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.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-accent hover:text-accent-foreground ${isStart || isEnd ? "bg-primary text-primary-foreground font-semibold" : ""} ${isInRange || isInHoverRange ? "bg-accent/50" : ""} ${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",
+            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),
           onMouseEnter: () => setHoverDate(date),
           onMouseLeave: () => setHoverDate(null),
@@ -1939,41 +2006,57 @@ function DateRangePicker({
       );
     })));
   };
-  const combinedClassName = `relative ${className}`.trim();
+  const combinedClassName = cn("relative", className);
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
-  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[start]`,
       value: rangeStart ? rangeStart.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
-    "svg",
+  ), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
+    "span",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2"
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7.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.createElement(
+    /* @__PURE__ */ React8.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React8.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.createElement(
     "input",
     {
       type: "text",
-      className: `flex h-9 w-full rounded-md border border-input bg-transparent ${showIcon ? "pl-10" : "pl-3"} ${clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3"} py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground 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" : ""}`,
+      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 && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
+        !error && hasValue && "ring-2 ring-ring",
+        error && "border-destructive ring-1 ring-destructive"
+      ),
       value: displayValue,
       onClick: handleToggle,
       onBlur,
@@ -1985,17 +2068,17 @@ function DateRangePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React7.createElement(
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 transition-colors",
       onClick: handleClear,
       "aria-label": "Clear date range",
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.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.createElement("div", { className: "text-xs text-muted-foreground text-center pt-2 border-t border-border mt-2" }, "Select end date")));
+  )), isOpen && !disabled && /* @__PURE__ */ React8.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.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React8.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))), rangeStart && !rangeEnd && /* @__PURE__ */ React8.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -2051,18 +2134,26 @@ function RichTextEditor({
   className = "",
   mode = "wysiwyg",
   allowModeSwitch = false,
-  placeholder = "Start typing...",
+  placeholder = "Your message...",
   minHeight = "200px",
   maxHeight,
   showToolbar = true,
-  toolbarButtons = ["bold", "italic", "underline", "heading", "bulletList", "orderedList", "link"],
+  toolbarButtons = [
+    "bold",
+    "italic",
+    "underline",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "link"
+  ],
   ...props
 }) {
-  const [currentMode, setCurrentMode] = React7.useState(mode);
-  const [content, setContent] = React7.useState(value);
-  const editorRef = React7.useRef(null);
-  const textareaRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const [currentMode, setCurrentMode] = React8.useState(mode);
+  const [content, setContent] = React8.useState(value);
+  const editorRef = React8.useRef(null);
+  const textareaRef = React8.useRef(null);
+  React8.useEffect(() => {
     setContent(value);
     if (currentMode === "wysiwyg" && editorRef.current) {
       editorRef.current.innerHTML = value;
@@ -2150,21 +2241,32 @@ 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.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.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React8.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "button",
       {
         key: buttonName,
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-muted cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         onClick: () => editorRef.current && button.action(editorRef.current),
         title: button.title,
         disabled: disabled || currentMode === "markdown",
@@ -2172,22 +2274,22 @@ function RichTextEditor({
       },
       button.icon
     );
-  })), allowModeSwitch && /* @__PURE__ */ React7.createElement(
+  })), allowModeSwitch && /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      className: "flex items-center justify-center h-8 px-3 rounded border-none bg-transparent hover:bg-accent text-xs font-medium text-muted-foreground hover:text-foreground cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+      className: "flex items-center justify-center h-8 px-3 rounded border-none bg-transparent hover:bg-muted text-xs font-medium cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
       onClick: handleModeToggle,
       disabled,
       title: `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`,
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React7.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React8.createElement(
     "div",
     {
       ref: editorRef,
-      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent focus-visible:outline-none [&:empty:before]:content-[attr(data-placeholder)] [&:empty:before]:text-muted-foreground",
+      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent focus-visible:outline-none [&:empty:before]:content-[attr(data-placeholder)]",
       role: "textbox",
       contentEditable: !disabled,
       onInput: handleWysiwygChange,
@@ -2198,11 +2300,14 @@ function RichTextEditor({
       "aria-required": required || props["aria-required"],
       suppressContentEditableWarning: true
     }
-  ) : /* @__PURE__ */ React7.createElement(
+  ) : /* @__PURE__ */ React8.createElement(
     "textarea",
     {
       ref: textareaRef,
-      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent resize-none focus-visible:outline-none placeholder:text-muted-foreground 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,