@page-speed/forms 0.4.1 → 0.4.2

package/dist/inputs.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var React7 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -117,6 +119,11 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/inputs/Checkbox.tsx
 function Checkbox({
   name,
   value,
@@ -129,6 +136,7 @@ function Checkbox({
   indeterminate = false,
   label,
   description,
+  checkboxVariant = "boxed",
   ...props
 }) {
   const inputRef = React7__namespace.useRef(null);
@@ -144,36 +152,92 @@ function Checkbox({
   const handleBlur = () => {
     onBlur?.();
   };
-  const checkbox = /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7__namespace.createElement(
-    "input",
+  const isActive = value || indeterminate && !value;
+  const checkbox = /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "20 6 9 17 4 12" }))), indeterminate && !value && /* @__PURE__ */ React7__namespace.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__namespace.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))));
+      className: cn(
+        "relative inline-flex items-center justify-center",
+        !label && className
+      )
+    },
+    /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ),
+      indeterminate && !value && /* @__PURE__ */ React7__namespace.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      )
+    )
+  );
   if (label) {
     return /* @__PURE__ */ React7__namespace.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__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, label), description && /* @__PURE__ */ React7__namespace.createElement(
+      /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex w-full flex-row gap-2" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, label), description && /* @__PURE__ */ React7__namespace.createElement(
         "p",
         {
-          className: "text-muted-foreground text-sm",
+          className: "text-xs opacity-75",
           id: `${checkboxId}-description`
         },
         description
@@ -211,6 +275,18 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
+  const checkboxVariant = React7__namespace.useMemo(() => {
+    if (options.some((opt) => opt.description)) {
+      return "boxed";
+    }
+    return "inline";
+  }, [options]);
+  const countableValue = React7__namespace.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) {
@@ -229,9 +305,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__namespace.createElement(
     "div",
     {
@@ -248,65 +329,53 @@ function CheckboxGroup({
     label && /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, label),
     description && /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-muted-foreground text-sm" }, description),
     showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7__namespace.createElement(
-      "label",
+      Checkbox,
       {
-        className: `flex w-fit gap-2 items-center ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`
-      },
-      /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "20 6 9 17 4 12" }))), someSelected && !allSelected && /* @__PURE__ */ React7__namespace.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__namespace.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })))), /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, renderOption ? renderOption(option) : /* @__PURE__ */ React7__namespace.createElement(React7__namespace.Fragment, null, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), option.description && /* @__PURE__ */ React7__namespace.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__namespace.createElement("div", { className: "text-sm text-muted-foreground mt-2", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-destructive" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React7__namespace.createElement("span", null, value.length, "/", maxSelections, " selected"))
+    (minSelections || maxSelections) && /* @__PURE__ */ React7__namespace.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__namespace.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React7__namespace.createElement("span", null, countableValue, "/", maxSelections, " selected")
+    )
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
@@ -320,6 +389,7 @@ function Radio({
   error = false,
   className = "",
   layout = "stacked",
+  radioVariant = "inline",
   label,
   options,
   ...props
@@ -355,8 +425,12 @@ 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 containerClass = cn(
+    "w-full gap-3",
+    layout === "stacked" && "flex flex-col",
+    layout === "inline" && "flex flex-row flex-wrap",
+    className
+  );
   return /* @__PURE__ */ React7__namespace.createElement(
     "div",
     {
@@ -372,38 +446,60 @@ 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__namespace.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("div", { className: "size-3 rounded-full bg-primary" })
+      ));
+      const labelContent = /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "text-sm font-medium" }, option.label), hasDescription && /* @__PURE__ */ React7__namespace.createElement(
+        "p",
+        {
+          className: "text-xs opacity-75",
+          id: `${radioId}-description`
+        },
+        option.description
+      ));
       return /* @__PURE__ */ React7__namespace.createElement(
         "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",
+            radioVariant === "boxed" && "border rounded-lg hover:ring-2",
+            radioVariant === "boxed" && 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__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, option.description ? /* @__PURE__ */ React7__namespace.createElement(React7__namespace.Fragment, null, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), /* @__PURE__ */ React7__namespace.createElement(
-          "p",
-          {
-            className: "text-muted-foreground text-sm",
-            id: `${radioId}-description`
-          },
-          option.description
-        )) : /* @__PURE__ */ React7__namespace.createElement("span", { className: "text-sm font-medium" }, option.label)), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React7__namespace.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__namespace.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__namespace.createElement("svg", { className: "size-2 fill-current", viewBox: "0 0 24 24" }, /* @__PURE__ */ React7__namespace.createElement("circle", { cx: "12", cy: "12", r: "10" })))))
+        /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, radioVariant === "inline" && radioIndicator, /* @__PURE__ */ React7__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), radioVariant === "boxed" && radioIndicator)
       );
     })
   );
@@ -1253,7 +1349,9 @@ function DatePicker({
 }) {
   const [isOpen, setIsOpen] = React7__namespace.useState(false);
   const [inputValue, setInputValue] = React7__namespace.useState("");
-  const [selectedMonth, setSelectedMonth] = React7__namespace.useState(value || /* @__PURE__ */ new Date());
+  const [selectedMonth, setSelectedMonth] = React7__namespace.useState(
+    value || /* @__PURE__ */ new Date()
+  );
   const containerRef = React7__namespace.useRef(null);
   const inputRef = React7__namespace.useRef(null);
   React7__namespace.useEffect(() => {
@@ -1344,7 +1442,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"
       },
@@ -1353,12 +1451,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__namespace.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7__namespace.createElement("div", { key: day, className: "flex items-center justify-center h-8 w-full text-xs text-muted-foreground font-medium" }, day))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
+    )), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7__namespace.createElement(
+      "div",
+      {
+        key: day,
+        className: "flex items-center justify-center h-8 w-full text-xs font-medium"
+      },
+      day
+    ))), /* @__PURE__ */ React7__namespace.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
       if (!date) {
         return /* @__PURE__ */ React7__namespace.createElement("div", { key: `empty-${index}` });
       }
@@ -1370,7 +1475,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)
@@ -1387,26 +1492,33 @@ function DatePicker({
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7__namespace.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ React7__namespace.createElement(
-    "svg",
+  ), /* @__PURE__ */ React7__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7__namespace.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__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
-  )), /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React7__namespace.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__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+    )
+  ), /* @__PURE__ */ React7__namespace.createElement(
     "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,
@@ -1423,7 +1535,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