@page-speed/forms 0.3.6 → 0.3.7

package/dist/inputs.cjs

@@ -128,9 +128,11 @@ function Checkbox({
   className = "",
   indeterminate = false,
   label,
+  description,
   ...props
 }) {
   const inputRef = React7__namespace.useRef(null);
+  const checkboxId = props.id || `checkbox-${name}`;
   React7__namespace.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
@@ -144,27 +146,37 @@ function Checkbox({
   };
   const baseClassName = "checkbox";
   const errorClassName = error ? "checkbox--error" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
+  const checkedClassName = value ? "checkbox--checked" : "";
+  const disabledClassName = disabled ? "checkbox--disabled" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${checkedClassName} ${disabledClassName} ${className}`.trim();
   const checkbox = /* @__PURE__ */ React7__namespace.createElement(
     "input",
     {
       ref: inputRef,
       type: "checkbox",
+      id: checkboxId,
       name,
       checked: value,
       onChange: handleChange,
       onBlur: handleBlur,
       disabled,
       required,
-      className: combinedClassName,
+      className: "checkbox-input",
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": props["aria-describedby"],
+      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
       "aria-required": required || props["aria-required"],
       ...props
     }
   );
   if (label) {
-    return /* @__PURE__ */ React7__namespace.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React7__namespace.createElement("label", { className: `checkbox-field ${combinedClassName}`, htmlFor: checkboxId }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "checkbox-field-content" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("div", { className: "checkbox-field-text" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "checkbox-label" }, label), description && /* @__PURE__ */ React7__namespace.createElement(
+      "span",
+      {
+        className: "checkbox-description",
+        id: `${checkboxId}-description`
+      },
+      description
+    ))));
   }
   return checkbox;
 }
@@ -360,10 +372,19 @@ function Radio({
         "label",
         {
           key: option.value,
-          className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
-          htmlFor: radioId
+          className: `radio-option ${isChecked ? "radio-option--checked" : ""} ${isDisabled ? "radio-option--disabled" : ""}`,
+          htmlFor: radioId,
+          onKeyDown: (e) => handleKeyDown(e, index),
+          tabIndex: 0
         },
-        /* @__PURE__ */ React7__namespace.createElement(
+        /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-option-content" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-option-text" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7__namespace.createElement(
+          "span",
+          {
+            className: "radio-description",
+            id: `${radioId}-description`
+          },
+          option.description
+        )), /* @__PURE__ */ React7__namespace.createElement(
           "input",
           {
             type: "radio",
@@ -373,20 +394,11 @@ function Radio({
             checked: isChecked,
             onChange: (e) => handleChange(e.target.value),
             onBlur: handleBlur,
-            onKeyDown: (e) => handleKeyDown(e, index),
             disabled: isDisabled,
             required,
             className: "radio-input",
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
-        ),
-        /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7__namespace.createElement(
-          "span",
-          {
-            className: "radio-description",
-            id: `${radioId}-description`
-          },
-          option.description
         ))
       );
     }))