@page-speed/forms 0.3.6 → 0.3.7

package/dist/inputs.d.cts

@@ -124,10 +124,13 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      */
     indeterminate?: boolean;
     /**
-     * Label text for the checkbox
-     * Can also wrap checkbox in a label element
+     * Label text for the checkbox (primary text)
      */
     label?: React.ReactNode;
+    /**
+     * Optional description text below the label (secondary text)
+     */
+    description?: React.ReactNode;
     /**
      * Additional native input attributes
      */
@@ -144,7 +147,8 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  * - Error state styling
  * - Controlled input behavior
  * - Indeterminate state support
- * - Optional label text
+ * - Optional label and description text (with nil guards)
+ * - Proper field-based layout structure
  * - All native checkbox attributes supported
  *
  * @example
@@ -154,6 +158,7 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  * <Checkbox
  *   {...form.getFieldProps('terms')}
  *   label="I agree to the terms and conditions"
+ *   description="By clicking this checkbox, you agree to the terms."
  *   error={!!form.errors.terms}
  *   aria-describedby={form.errors.terms ? 'terms-error' : undefined}
  * />
@@ -173,7 +178,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, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -329,11 +334,11 @@ interface RadioOption {
      */
     value: string;
     /**
-     * Display label for the option
+     * Display label for the option (primary text)
      */
     label: React.ReactNode;
     /**
-     * Optional description text below the label
+     * Optional description text below the label (secondary text)
      */
     description?: React.ReactNode;
     /**
@@ -379,8 +384,9 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  * - Controlled input behavior
  * - Keyboard navigation (arrow keys)
  * - Inline or stacked layout
- * - Optional descriptions for each option
+ * - Optional descriptions for each option (with nil guard)
  * - Individual option disabled state
+ * - Card-based styling with proper visual hierarchy
  * - All native radio attributes supported
  *
  * @example

package/dist/inputs.d.ts

@@ -124,10 +124,13 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      */
     indeterminate?: boolean;
     /**
-     * Label text for the checkbox
-     * Can also wrap checkbox in a label element
+     * Label text for the checkbox (primary text)
      */
     label?: React.ReactNode;
+    /**
+     * Optional description text below the label (secondary text)
+     */
+    description?: React.ReactNode;
     /**
      * Additional native input attributes
      */
@@ -144,7 +147,8 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  * - Error state styling
  * - Controlled input behavior
  * - Indeterminate state support
- * - Optional label text
+ * - Optional label and description text (with nil guards)
+ * - Proper field-based layout structure
  * - All native checkbox attributes supported
  *
  * @example
@@ -154,6 +158,7 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  * <Checkbox
  *   {...form.getFieldProps('terms')}
  *   label="I agree to the terms and conditions"
+ *   description="By clicking this checkbox, you agree to the terms."
  *   error={!!form.errors.terms}
  *   aria-describedby={form.errors.terms ? 'terms-error' : undefined}
  * />
@@ -173,7 +178,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, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -329,11 +334,11 @@ interface RadioOption {
      */
     value: string;
     /**
-     * Display label for the option
+     * Display label for the option (primary text)
      */
     label: React.ReactNode;
     /**
-     * Optional description text below the label
+     * Optional description text below the label (secondary text)
      */
     description?: React.ReactNode;
     /**
@@ -379,8 +384,9 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  * - Controlled input behavior
  * - Keyboard navigation (arrow keys)
  * - Inline or stacked layout
- * - Optional descriptions for each option
+ * - Optional descriptions for each option (with nil guard)
  * - Individual option disabled state
+ * - Card-based styling with proper visual hierarchy
  * - All native radio attributes supported
  *
  * @example

package/dist/inputs.js

@@ -106,9 +106,11 @@ function Checkbox({
   className = "",
   indeterminate = false,
   label,
+  description,
   ...props
 }) {
   const inputRef = React7.useRef(null);
+  const checkboxId = props.id || `checkbox-${name}`;
   React7.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
@@ -122,27 +124,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.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.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React7.createElement("label", { className: `checkbox-field ${combinedClassName}`, htmlFor: checkboxId }, /* @__PURE__ */ React7.createElement("div", { className: "checkbox-field-content" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "checkbox-field-text" }, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, label), description && /* @__PURE__ */ React7.createElement(
+      "span",
+      {
+        className: "checkbox-description",
+        id: `${checkboxId}-description`
+      },
+      description
+    ))));
   }
   return checkbox;
 }
@@ -338,10 +350,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.createElement(
+        /* @__PURE__ */ React7.createElement("div", { className: "radio-option-content" }, /* @__PURE__ */ React7.createElement("div", { className: "radio-option-text" }, /* @__PURE__ */ React7.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
+          "span",
+          {
+            className: "radio-description",
+            id: `${radioId}-description`
+          },
+          option.description
+        )), /* @__PURE__ */ React7.createElement(
           "input",
           {
             type: "radio",
@@ -351,20 +372,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.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React7.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
-          "span",
-          {
-            className: "radio-description",
-            id: `${radioId}-description`
-          },
-          option.description
         ))
       );
     }))