@page-speed/forms 0.3.6 → 0.4.1

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