npm - @page-speed/forms - Versions diffs - 0.4.1 → 0.4.2 - Mend

@page-speed/forms 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/inputs.d.cts CHANGED Viewed

@@ -131,6 +131,10 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      * Optional description text below the label (secondary text)
      */
     description?: React.ReactNode;
+    /**
+     * Layout variant
+     */
+    checkboxVariant?: "boxed" | "inline";
     /**
      * Additional native input attributes
      */
@@ -178,7 +182,7 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  *
  * @see https://opensite.ai/developers/page-speed/forms/checkbox
  */
-declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, checkboxVariant, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -363,6 +367,13 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
      * @default "stacked"
      */
     layout?: "inline" | "stacked";
+    /**
+     * Visual variant for radio options
+     * - "boxed": bordered card with ring on hover/selected, radio circle on right
+     * - "inline": minimal style, radio circle on left
+     * @default "inline"
+     */
+    radioVariant?: "boxed" | "inline";
     /**
      * Group-level label
      */
@@ -424,7 +435,7 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  *
  * @see https://opensite.ai/developers/page-speed/forms/radio
  */
-declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, label, options, ...props }: RadioProps): React.JSX.Element;
+declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, radioVariant, label, options, ...props }: RadioProps): React.JSX.Element;
 declare namespace Radio {
     var displayName: string;
 }

package/dist/inputs.d.ts CHANGED Viewed

@@ -131,6 +131,10 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      * Optional description text below the label (secondary text)
      */
     description?: React.ReactNode;
+    /**
+     * Layout variant
+     */
+    checkboxVariant?: "boxed" | "inline";
     /**
      * Additional native input attributes
      */
@@ -178,7 +182,7 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  *
  * @see https://opensite.ai/developers/page-speed/forms/checkbox
  */
-declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, checkboxVariant, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -363,6 +367,13 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
      * @default "stacked"
      */
     layout?: "inline" | "stacked";
+    /**
+     * Visual variant for radio options
+     * - "boxed": bordered card with ring on hover/selected, radio circle on right
+     * - "inline": minimal style, radio circle on left
+     * @default "inline"
+     */
+    radioVariant?: "boxed" | "inline";
     /**
      * Group-level label
      */
@@ -424,7 +435,7 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  *
  * @see https://opensite.ai/developers/page-speed/forms/radio
  */
-declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, label, options, ...props }: RadioProps): React.JSX.Element;
+declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, radioVariant, label, options, ...props }: RadioProps): React.JSX.Element;
 declare namespace Radio {
     var displayName: string;
 }

package/dist/inputs.js CHANGED Viewed

@@ -1,4 +1,6 @@
 import * as React7 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 // src/inputs/TextInput.tsx
 function TextInput({
@@ -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",
     {
@@ -226,65 +307,53 @@ function CheckboxGroup({
     label && /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label),
     description && /* @__PURE__ */ React7.createElement("div", { className: "text-muted-foreground text-sm" }, description),
     showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement(
-      "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";
@@ -298,6 +367,7 @@ function Radio({
   error = false,
   className = "",
   layout = "stacked",
+  radioVariant = "inline",
   label,
   options,
   ...props
@@ -333,8 +403,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.createElement(
     "div",
     {
@@ -350,38 +424,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.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",
+            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.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" }, radioVariant === "inline" && radioIndicator, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), radioVariant === "boxed" && radioIndicator)
       );
     })
   );
@@ -1231,7 +1327,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 +1420,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 +1429,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 +1453,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 +1470,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 +1513,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