@page-speed/forms 0.4.2 → 0.4.3

package/dist/inputs.js

@@ -23,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(
@@ -70,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(
@@ -304,8 +304,8 @@ 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(
       Checkbox,
       {
@@ -367,7 +367,6 @@ function Radio({
   error = false,
   className = "",
   layout = "stacked",
-  radioVariant = "inline",
   label,
   options,
   ...props
@@ -403,12 +402,16 @@ 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
-  );
+  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",
     {
@@ -455,29 +458,22 @@ function Radio({
         },
         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
-      ));
+      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: 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__ */ 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)
       );
     })
   );
@@ -567,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;
@@ -580,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;
@@ -672,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,
@@ -683,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,
@@ -732,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";
@@ -762,7 +763,7 @@ function FileInput({
   value = [],
   onChange,
   onBlur,
-  placeholder = "Choose file(s)...",
+  placeholder = "Choose file...",
   disabled = false,
   required = false,
   error = false,
@@ -865,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) => {
@@ -891,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"));
@@ -917,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);
@@ -933,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);
@@ -1045,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,
@@ -1060,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",
@@ -1074,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",
     {
@@ -1171,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"
     },
@@ -1212,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;
@@ -1241,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",
@@ -1258,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"
@@ -1652,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",
-    {
-      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",
+  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",
     {
-      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,
@@ -1697,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(
@@ -1711,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;
@@ -1731,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"
@@ -1756,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"
@@ -1801,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);
@@ -1899,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"
       },
@@ -1908,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(
@@ -1928,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),
@@ -1939,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",
@@ -1955,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,
@@ -1989,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) {
@@ -2051,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);
@@ -2164,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",
@@ -2176,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"}`,
@@ -2187,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,
@@ -2202,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,