@page-speed/forms 0.4.1 → 0.4.3

package/dist/inputs.js

@@ -1,4 +1,6 @@
 import * as React7 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 // src/inputs/TextInput.tsx
 function TextInput({
@@ -21,7 +23,7 @@ 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 baseClassName = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
   const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
   return /* @__PURE__ */ React7.createElement(
@@ -68,7 +70,7 @@ 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 baseClassName = "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
   const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
   return /* @__PURE__ */ React7.createElement(
@@ -95,6 +97,11 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/inputs/Checkbox.tsx
 function Checkbox({
   name,
   value,
@@ -107,6 +114,7 @@ function Checkbox({
   indeterminate = false,
   label,
   description,
+  checkboxVariant = "boxed",
   ...props
 }) {
   const inputRef = React7.useRef(null);
@@ -122,36 +130,92 @@ function Checkbox({
   const handleBlur = () => {
     onBlur?.();
   };
-  const checkbox = /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
-    "input",
+  const isActive = value || indeterminate && !value;
+  const checkbox = /* @__PURE__ */ React7.createElement(
+    "div",
     {
-      ref: inputRef,
-      type: "checkbox",
-      id: checkboxId,
-      name,
-      checked: value,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      disabled,
-      required,
-      className: `peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive ring-3 ring-destructive/20" : ""} ${value ? "bg-primary border-primary" : ""} ${className}`,
-      "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
-      "aria-required": required || props["aria-required"],
-      ...props
-    }
-  ), value && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" }))), indeterminate && !value && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))));
+      className: cn(
+        "relative inline-flex items-center justify-center",
+        !label && className
+      )
+    },
+    /* @__PURE__ */ React7.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        id: checkboxId,
+        name,
+        checked: value,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        disabled,
+        required,
+        className: "peer sr-only",
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
+        "aria-required": required || props["aria-required"],
+        ...props
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
+          !error && isActive && "border-primary bg-primary text-primary-foreground",
+          !error && !isActive && "border-input bg-transparent",
+          error && isActive && "border-destructive bg-destructive text-destructive-foreground",
+          error && !isActive && "border-destructive bg-transparent",
+          disabled && "opacity-50",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
+        )
+      },
+      value && /* @__PURE__ */ React7.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ),
+      indeterminate && !value && /* @__PURE__ */ React7.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      )
+    )
+  );
   if (label) {
     return /* @__PURE__ */ React7.createElement(
       "label",
       {
-        className: `flex w-fit gap-2 items-center ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        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",
+          disabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer",
+          className
+        ),
         htmlFor: checkboxId
       },
-      /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, label), description && /* @__PURE__ */ React7.createElement(
+      /* @__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",
         {
-          className: "text-muted-foreground text-sm",
+          className: "text-xs opacity-75",
           id: `${checkboxId}-description`
         },
         description
@@ -189,6 +253,18 @@ 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";
+  }, [options]);
+  const countableValue = React7.useMemo(() => {
+    if (value?.length > 0) {
+      return value.length;
+    }
+    return 0;
+  }, [value]);
   const handleChange = (optionValue, checked) => {
     const newValues = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
     if (maxSelections && checked && newValues.length > maxSelections) {
@@ -207,9 +283,14 @@ function CheckboxGroup({
   const handleBlur = () => {
     onBlur?.();
   };
-  const layoutClass = layout === "inline" ? "flex flex-row flex-wrap gap-4" : layout === "grid" ? `grid gap-3` : "flex flex-col gap-3";
-  const containerClass = `w-full ${layoutClass} ${className}`.trim();
-  const maxReached = Boolean(maxSelections && value.length >= maxSelections);
+  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",
     {
@@ -223,68 +304,56 @@ function CheckboxGroup({
         gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
       } : void 0
     },
-    label && /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label),
-    description && /* @__PURE__ */ React7.createElement("div", { className: "text-muted-foreground text-sm" }, description),
+    label ? /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label) : null,
+    description ? /* @__PURE__ */ React7.createElement("div", { className: "text-xs opacity-70" }, description) : null,
     showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement(
-      "label",
+      Checkbox,
       {
-        className: `flex w-fit gap-2 items-center ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`
-      },
-      /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
-        "input",
-        {
-          type: "checkbox",
-          checked: allSelected,
-          ref: (input) => {
-            if (input) {
-              input.indeterminate = someSelected;
-            }
-          },
-          onChange: (e) => handleSelectAll(e.target.checked),
-          onBlur: handleBlur,
-          disabled,
-          className: "peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-label": selectAllLabel
-        }
-      ), allSelected && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" }))), someSelected && !allSelected && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })))), /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium" }, selectAllLabel))
+        name: `${name}-select-all`,
+        id: `${name}-select-all`,
+        value: allSelected,
+        onChange: handleSelectAll,
+        onBlur: handleBlur,
+        indeterminate: someSelected,
+        label: selectAllLabel,
+        checkboxVariant: "inline",
+        disabled,
+        "aria-label": selectAllLabel
+      }
     ),
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      const checkboxId = `${name}-${option.value}`;
       return /* @__PURE__ */ React7.createElement(
-        "label",
+        Checkbox,
         {
           key: option.value,
-          className: `flex w-fit gap-2 items-center ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
-          htmlFor: checkboxId
-        },
-        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
-          "input",
-          {
-            type: "checkbox",
-            id: checkboxId,
-            name,
-            value: option.value,
-            checked: isChecked,
-            onChange: (e) => handleChange(option.value, e.target.checked),
-            onBlur: handleBlur,
-            disabled: isDisabled,
-            required: required && minSelections ? value.length < minSelections : false,
-            className: `peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive ring-3 ring-destructive/20" : ""} ${isChecked ? "bg-primary border-primary" : ""}`,
-            "aria-describedby": option.description ? `${checkboxId}-description` : props["aria-describedby"]
-          }
-        ), isChecked && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })))), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, renderOption ? renderOption(option) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
-          "p",
-          {
-            className: "text-muted-foreground text-sm",
-            id: `${checkboxId}-description`
-          },
-          option.description
-        ))))
+          name,
+          id: `${name}-${option.value}`,
+          value: isChecked,
+          onChange: (checked) => handleChange(option.value, checked),
+          onBlur: handleBlur,
+          disabled: isDisabled,
+          required: required && minSelections ? value.length < minSelections : false,
+          error,
+          label: renderOption ? renderOption(option) : option.label,
+          description: renderOption ? void 0 : option.description,
+          checkboxVariant
+        }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement("div", { className: "text-sm text-muted-foreground mt-2", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React7.createElement("span", { className: "text-destructive" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React7.createElement("span", null, value.length, "/", maxSelections, " selected"))
+    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "text-sm p-2 rounded-lg border font-semibold mt-2",
+          minSelections && countableValue < minSelections ? "border-destructive bg-destructive/80 text-destructive-foreground" : "border-border bg-card text-card-foreground"
+        ),
+        "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")
+    )
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
@@ -333,8 +402,16 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const layoutClass = layout === "inline" ? "flex flex-row flex-wrap gap-4" : "grid w-full gap-2";
-  const containerClass = `${layoutClass} ${className}`.trim();
+  const useChoiceCard = React7.useMemo(() => {
+    return options.some((option) => option.description);
+  }, [options]);
+  const containerClass = React7.useMemo(() => {
+    return cn(
+      "w-full gap-3 grid grid-cols-1",
+      layout === "inline" && "md:grid-cols-2",
+      className
+    );
+  }, [layout, className]);
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
@@ -350,38 +427,53 @@ function Radio({
       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(
+        "input",
+        {
+          type: "radio",
+          id: radioId,
+          name,
+          value: option.value,
+          checked: isChecked,
+          onChange: (e) => handleChange(e.target.value),
+          onBlur: handleBlur,
+          disabled: isDisabled,
+          required,
+          className: "peer sr-only",
+          "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
+        }
+      ), /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
+            !error && isChecked && "border-primary bg-transparent",
+            !error && !isChecked && "border-input bg-transparent",
+            error && isChecked && "border-destructive bg-transparent",
+            error && !isChecked && "border-destructive bg-transparent",
+            isDisabled && "opacity-50",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
+          )
+        },
+        isChecked && /* @__PURE__ */ React7.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", { className: "text-xs opacity-75", id: `${radioId}-description` }, option.description));
       return /* @__PURE__ */ React7.createElement(
         "label",
         {
           key: option.value,
-          className: `flex w-fit gap-2 items-center ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+          className: cn(
+            "w-full h-full flex gap-3 p-3 duration-200",
+            useChoiceCard && "border rounded-lg hover:ring-2",
+            useChoiceCard && isChecked && "ring-2",
+            isDisabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer"
+          ),
           htmlFor: radioId,
           onKeyDown: (e) => handleKeyDown(e, index),
           tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, option.description ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), /* @__PURE__ */ React7.createElement(
-          "p",
-          {
-            className: "text-muted-foreground text-sm",
-            id: `${radioId}-description`
-          },
-          option.description
-        )) : /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium" }, option.label)), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, /* @__PURE__ */ React7.createElement(
-          "input",
-          {
-            type: "radio",
-            id: radioId,
-            name,
-            value: option.value,
-            checked: isChecked,
-            onChange: (e) => handleChange(e.target.value),
-            onBlur: handleBlur,
-            disabled: isDisabled,
-            required,
-            className: `peer relative flex aspect-square size-4 shrink-0 appearance-none rounded-full border border-input outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive" : ""} ${isChecked ? "border-primary bg-primary" : "bg-transparent"}`,
-            "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
-          }
-        ), isChecked && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex size-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-2 fill-current", viewBox: "0 0 24 24" }, /* @__PURE__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" })))))
+        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, !useChoiceCard && radioIndicator, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), useChoiceCard && radioIndicator)
       );
     })
   );
@@ -471,9 +563,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;
@@ -484,9 +574,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;
@@ -576,7 +664,7 @@ function Select({
     /* @__PURE__ */ React7.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: `flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${disabled ? "cursor-not-allowed opacity-50 pointer-events-none" : ""} ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
         onClick: handleToggle,
         role: "combobox",
         "aria-expanded": isOpen,
@@ -587,48 +675,76 @@ 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("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7.createElement("span", { className: "relative" }, 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(
         "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__ */ React7.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__ */ React7.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__ */ React7.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          className: "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
+          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 " }, "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 " }, group.label), groupOptions.map((option) => {
+            const globalIndex = filteredOptions.indexOf(option);
+            const isSelected = value === option.value;
+            const isFocused = globalIndex === focusedIndex;
+            const isDisabled = option.disabled;
+            return /* @__PURE__ */ React7.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(
             "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,
@@ -636,28 +752,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";
@@ -666,7 +763,7 @@ function FileInput({
   value = [],
   onChange,
   onBlur,
-  placeholder = "Choose file(s)...",
+  placeholder = "Choose file...",
   disabled = false,
   required = false,
   error = false,
@@ -769,7 +866,15 @@ function FileInput({
         inputRef.current.value = "";
       }
     },
-    [value, onChange, validateFile, maxFiles, multiple, enableCropping, onValidationError]
+    [
+      value,
+      onChange,
+      validateFile,
+      maxFiles,
+      multiple,
+      enableCropping,
+      onValidationError
+    ]
   );
   const createCroppedImage = React7.useCallback(
     async (imageUrl, cropArea) => {
@@ -795,13 +900,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"));
@@ -821,11 +930,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);
@@ -837,7 +944,15 @@ function FileInput({
     } catch (error2) {
       console.error("Failed to crop image:", error2);
     }
-  }, [imageToCrop, croppedAreaPixels, createCroppedImage, onCropComplete, value, onChange, multiple]);
+  }, [
+    imageToCrop,
+    croppedAreaPixels,
+    createCroppedImage,
+    onCropComplete,
+    value,
+    onChange,
+    multiple
+  ]);
   const handleCropCancel = React7.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
@@ -949,7 +1064,7 @@ function FileInput({
   ), /* @__PURE__ */ React7.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-red-500" : ""}`,
       onDragEnter: handleDrag,
       onDragLeave: handleDrag,
       onDragOver: handleDrag,
@@ -964,7 +1079,6 @@ function FileInput({
     /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React7.createElement(
       "svg",
       {
-        className: "text-muted-foreground",
         width: "48",
         height: "48",
         viewBox: "0 0 24 24",
@@ -978,92 +1092,102 @@ function FileInput({
       /* @__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)))
+    ), /* @__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" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7.createElement("p", { className: "text-xs " }, "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) => {
     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__ */ React7.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__ */ React7.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__ */ 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" }, 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",
         {
-          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__ */ React7.createElement(
+          "div",
+          {
+            className: "h-full bg-primary transition-all",
+            style: { width: `${uploadProgress[file.name]}%` }
+          }
+        )
+      ), /* @__PURE__ */ React7.createElement("span", { className: "text-xs " }, 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-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",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true"
+          },
+          /* @__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(
-        "svg",
+        "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__ */ React7.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__ */ React7.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React7.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(
     "div",
     {
@@ -1075,7 +1199,7 @@ function FileInput({
     "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"
     },
@@ -1116,7 +1240,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;
@@ -1145,7 +1272,16 @@ function FileInput({
       },
       /* @__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__ */ 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__ */ 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(
     "input",
     {
       id: "zoom-slider",
@@ -1162,7 +1298,7 @@ function FileInput({
     "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"
@@ -1231,7 +1367,9 @@ function DatePicker({
 }) {
   const [isOpen, setIsOpen] = React7.useState(false);
   const [inputValue, setInputValue] = React7.useState("");
-  const [selectedMonth, setSelectedMonth] = React7.useState(value || /* @__PURE__ */ new Date());
+  const [selectedMonth, setSelectedMonth] = React7.useState(
+    value || /* @__PURE__ */ new Date()
+  );
   const containerRef = React7.useRef(null);
   const inputRef = React7.useRef(null);
   React7.useEffect(() => {
@@ -1322,7 +1460,7 @@ function DatePicker({
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handlePrevMonth,
         "aria-label": "Previous month"
       },
@@ -1331,12 +1469,19 @@ function DatePicker({
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handleNextMonth,
         "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) => {
+    )), /* @__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 font-medium"
+      },
+      day
+    ))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
       if (!date) {
         return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
       }
@@ -1348,7 +1493,7 @@ function DatePicker({
         {
           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 ${isSelected ? "bg-primary text-primary-foreground font-semibold" : ""} ${isToday ? "border border-primary" : ""} ${disabled2 ? "cursor-not-allowed opacity-50 pointer-events-none" : ""}`,
+          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" : ""}`,
           onClick: () => !disabled2 && handleDateSelect(date),
           disabled: disabled2,
           "aria-label": formatDate(date, format)
@@ -1365,26 +1510,33 @@ function DatePicker({
       name,
       value: value ? value.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__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.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__ */ React7.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__ */ 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(
     "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" : ""}`,
+      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,
       onClick: handleToggle,
@@ -1401,7 +1553,7 @@ function DatePicker({
     "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",
       tabIndex: -1
@@ -1540,36 +1692,43 @@ function TimePicker({
     }
     return mins;
   }, [minuteStep]);
-  const combinedClassName = `relative ${className}`.trim();
+  const combinedClassName = cn("relative", className);
   const displayValue = formatTimeValue(timeValue, use24Hour);
-  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
-    "input",
+  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",
     {
-      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",
-    {
-      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__ */ React7.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__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React7.createElement("path", { d: "M12 6v6l4 2" })
+    )
+  ), /* @__PURE__ */ React7.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" : ""}`,
+      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",
+        showIcon ? "pl-10" : "pl-3",
+        clearable && value ? "pr-10" : "pr-3",
+        error && "border-red-500 ring-1 ring-red-500"
+      ),
       value: displayValue,
       onClick: handleToggle,
       onBlur,
@@ -1585,13 +1744,13 @@ function TimePicker({
     "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) => {
+  )), 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 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(
@@ -1599,7 +1758,12 @@ function TimePicker({
       {
         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" : ""}`,
+        className: cn(
+          "flex items-center justify-center h-8 w-full rounded",
+          "border-none bg-transparent cursor-pointer text-sm transition-colors",
+          "hover:bg-primary hover:text-primary-foreground",
+          isSelected ? "bg-primary text-primary-foreground font-semibold" : ""
+        ),
         onClick: () => {
           if (use24Hour) {
             const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
@@ -1619,24 +1783,34 @@ function TimePicker({
       },
       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) => {
+  }))), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium 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" : ""}`,
+        className: cn(
+          "flex items-center justify-center h-8 w-full",
+          "rounded border-none bg-transparent cursor-pointer text-sm transition-colors",
+          "hover:bg-primary hover:text-primary-foreground",
+          isSelected ? "bg-primary text-primary-foreground font-semibold" : ""
+        ),
         onClick: () => handleMinuteChange(minute),
         "aria-label": `${String(minute).padStart(2, "0")} minutes`
       },
       String(minute).padStart(2, "0")
     );
-  }))), !use24Hour && /* @__PURE__ */ React7.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(
+  }))), !use24Hour && /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col w-20" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium 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" : ""}`,
+      className: cn(
+        "flex items-center justify-center h-8 w-full",
+        "rounded border-none bg-transparent cursor-pointer text-sm",
+        "transition-colors hover:bg-primary hover:text-primary-foreground",
+        timeValue?.period === "AM" ? "bg-muted font-semibold" : ""
+      ),
       onClick: () => handlePeriodChange("AM")
     },
     "AM"
@@ -1644,7 +1818,12 @@ function TimePicker({
     "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" : ""}`,
+      className: cn(
+        "flex items-center justify-center h-8 w-full",
+        "rounded border-none bg-transparent cursor-pointer text-sm",
+        "transition-colors hover:bg-primary hover:text-primary-foreground",
+        timeValue?.period === "PM" ? "bg-muted font-semibold" : ""
+      ),
       onClick: () => handlePeriodChange("PM")
     },
     "PM"
@@ -1689,7 +1868,9 @@ function DateRangePicker({
   ...props
 }) {
   const [isOpen, setIsOpen] = React7.useState(false);
-  const [selectedMonth, setSelectedMonth] = React7.useState(value.start || /* @__PURE__ */ new Date());
+  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);
@@ -1787,7 +1968,7 @@ function DateRangePicker({
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handlePrevMonth,
         "aria-label": "Previous month"
       },
@@ -1796,19 +1977,30 @@ function DateRangePicker({
       "button",
       {
         type: "button",
-        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handleNextMonth,
         "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) => {
+    )), /* @__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 font-medium"
+      },
+      day
+    ))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
       if (!date) {
         return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
       }
       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(
@@ -1816,7 +2008,14 @@ function DateRangePicker({
         {
           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-full rounded border-none bg-transparent",
+            "cursor-pointer text-sm transition-colors hover:bg-muted",
+            isRangeEndpoint && "bg-muted font-semibold",
+            isRangeHighlight && "bg-muted/70",
+            isToday && "border border-primary",
+            disabled2 && "cursor-not-allowed opacity-50 pointer-events-none"
+          ),
           onClick: () => !disabled2 && handleDateSelect(date),
           onMouseEnter: () => setHoverDate(date),
           onMouseLeave: () => setHoverDate(null),
@@ -1827,7 +2026,7 @@ 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(
     "input",
@@ -1843,25 +2042,39 @@ function DateRangePicker({
       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__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.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__ */ React7.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__ */ 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(
     "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",
+        showIcon ? "pl-10" : "pl-3",
+        clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
+        error && "border-red-500 ring-1 ring-red-500"
+      ),
       value: displayValue,
       onClick: handleToggle,
       onBlur,
@@ -1877,13 +2090,13 @@ function DateRangePicker({
     "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__ */ 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-center pt-2 border-t border-border mt-2" }, "Select end date")));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -1939,11 +2152,19 @@ 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);
@@ -2052,7 +2273,7 @@ function RichTextEditor({
       {
         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",
@@ -2064,7 +2285,7 @@ function RichTextEditor({
     "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"}`,
@@ -2075,7 +2296,7 @@ function RichTextEditor({
     "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,
@@ -2090,7 +2311,7 @@ function RichTextEditor({
     "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: "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",
       value: content,
       onChange: handleMarkdownChange,
       onBlur,