@page-speed/forms 0.4.2 → 0.4.4

package/dist/inputs.d.cts

@@ -133,8 +133,10 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
     description?: React.ReactNode;
     /**
      * Layout variant
+     * Utilized if any checkboxes have a description
+     * @default false
      */
-    checkboxVariant?: "boxed" | "inline";
+    useChoiceCard?: boolean;
     /**
      * Additional native input attributes
      */
@@ -182,7 +184,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, checkboxVariant, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, useChoiceCard, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -224,7 +226,7 @@ interface CheckboxGroupProps extends Omit<InputProps<string[]>, "onChange" | "pl
      * Layout direction
      * @default "stacked"
      */
-    layout?: "inline" | "stacked" | "grid";
+    layout?: "stacked" | "grid" | "inline";
     /**
      * Group-level label
      */
@@ -275,7 +277,7 @@ interface CheckboxGroupProps extends Omit<InputProps<string[]>, "onChange" | "pl
  * - Full accessibility support (ARIA attributes, role="group")
  * - Error state styling
  * - Controlled input behavior
- * - Multiple layout options (inline, stacked, grid)
+ * - Multiple layout options (stacked, grid)
  * - Optional "select all" checkbox
  * - Individual option disabled state
  * - Minimum/maximum selection validation
@@ -366,18 +368,15 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
      * Layout direction
      * @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";
+    layout?: "stacked" | "grid" | "inline";
     /**
      * Group-level label
      */
     label?: React.ReactNode;
+    /**
+     * Group-level description
+     */
+    description?: React.ReactNode;
     /**
      * Additional native input attributes
      */
@@ -394,7 +393,7 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  * - Error state styling
  * - Controlled input behavior
  * - Keyboard navigation (arrow keys)
- * - Inline or stacked layout
+ * - Grid or stacked layout
  * - Optional descriptions for each option (with nil guard)
  * - Individual option disabled state
  * - Card-based styling with proper visual hierarchy
@@ -419,12 +418,12 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  *
  * @example
  * ```tsx
- * // Inline layout
+ * // Grid layout
  * <Radio
  *   name="size"
  *   value={size}
  *   onChange={handleSizeChange}
- *   layout="inline"
+ *   layout="grid"
  *   options={[
  *     { value: 'sm', label: 'Small' },
  *     { value: 'md', label: 'Medium' },
@@ -435,7 +434,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, radioVariant, label, options, ...props }: RadioProps): React.JSX.Element;
+declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, label, description, options, ...props }: RadioProps): React.JSX.Element;
 declare namespace Radio {
     var displayName: string;
 }
@@ -850,7 +849,7 @@ declare namespace DatePicker {
 }
 
 /**
- * Time value format
+ * Legacy time value shape retained for backward-compatible type exports.
  */
 interface TimeValue {
     hour: number;
@@ -862,7 +861,8 @@ interface TimeValue {
  */
 interface TimePickerProps extends Omit<InputProps<string>, "onChange"> {
     /**
-     * Change handler - receives time string in format "HH:mm AM/PM"
+     * Change handler - receives time string in format "HH:mm" (24-hour)
+     * or "h:mm AM/PM" (12-hour)
      */
     onChange: (time: string) => void;
     /**
@@ -896,50 +896,10 @@ interface TimePickerProps extends Omit<InputProps<string>, "onChange"> {
     [key: string]: any;
 }
 /**
- * TimePicker - Accessible time selection component with AM/PM support
- *
- * A lightweight time picker with dropdown selection for hours, minutes, and AM/PM period.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Dropdown selection with hour/minute spinners
- * - 12-hour or 24-hour format support
- * - AM/PM period selector
- * - Configurable minute step intervals
- * - Full accessibility support (ARIA attributes, keyboard navigation)
- * - Error state styling
- * - Controlled input behavior
- * - Clearable selection
- * - Icon display toggle
- * - Click outside to close
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { appointment: '' } });
- *
- * <TimePicker
- *   {...form.getFieldProps('appointment')}
- *   placeholder="Select time"
- *   minuteStep={15}
- *   clearable
- *   showIcon
- *   error={!!form.errors.appointment}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With 24-hour format
- * <TimePicker
- *   name="startTime"
- *   value={startTime}
- *   onChange={setStartTime}
- *   use24Hour
- *   minuteStep={30}
- * />
- * ```
+ * TimePicker - Accessible time input component using native time picker UX.
  *
- * @see https://opensite.ai/developers/page-speed/forms/time-picker
+ * Uses a native `type="time"` input for a streamlined UX while preserving
+ * formatting compatibility for 12-hour and 24-hour output formats.
  */
 declare function TimePicker({ name, value, onChange, onBlur, disabled, required, error, className, placeholder, use24Hour, minuteStep, clearable, showIcon, ...props }: TimePickerProps): React.JSX.Element;
 declare namespace TimePicker {

package/dist/inputs.d.ts

@@ -133,8 +133,10 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
     description?: React.ReactNode;
     /**
      * Layout variant
+     * Utilized if any checkboxes have a description
+     * @default false
      */
-    checkboxVariant?: "boxed" | "inline";
+    useChoiceCard?: boolean;
     /**
      * Additional native input attributes
      */
@@ -182,7 +184,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, checkboxVariant, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, useChoiceCard, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -224,7 +226,7 @@ interface CheckboxGroupProps extends Omit<InputProps<string[]>, "onChange" | "pl
      * Layout direction
      * @default "stacked"
      */
-    layout?: "inline" | "stacked" | "grid";
+    layout?: "stacked" | "grid" | "inline";
     /**
      * Group-level label
      */
@@ -275,7 +277,7 @@ interface CheckboxGroupProps extends Omit<InputProps<string[]>, "onChange" | "pl
  * - Full accessibility support (ARIA attributes, role="group")
  * - Error state styling
  * - Controlled input behavior
- * - Multiple layout options (inline, stacked, grid)
+ * - Multiple layout options (stacked, grid)
  * - Optional "select all" checkbox
  * - Individual option disabled state
  * - Minimum/maximum selection validation
@@ -366,18 +368,15 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
      * Layout direction
      * @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";
+    layout?: "stacked" | "grid" | "inline";
     /**
      * Group-level label
      */
     label?: React.ReactNode;
+    /**
+     * Group-level description
+     */
+    description?: React.ReactNode;
     /**
      * Additional native input attributes
      */
@@ -394,7 +393,7 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  * - Error state styling
  * - Controlled input behavior
  * - Keyboard navigation (arrow keys)
- * - Inline or stacked layout
+ * - Grid or stacked layout
  * - Optional descriptions for each option (with nil guard)
  * - Individual option disabled state
  * - Card-based styling with proper visual hierarchy
@@ -419,12 +418,12 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  *
  * @example
  * ```tsx
- * // Inline layout
+ * // Grid layout
  * <Radio
  *   name="size"
  *   value={size}
  *   onChange={handleSizeChange}
- *   layout="inline"
+ *   layout="grid"
  *   options={[
  *     { value: 'sm', label: 'Small' },
  *     { value: 'md', label: 'Medium' },
@@ -435,7 +434,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, radioVariant, label, options, ...props }: RadioProps): React.JSX.Element;
+declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, label, description, options, ...props }: RadioProps): React.JSX.Element;
 declare namespace Radio {
     var displayName: string;
 }
@@ -850,7 +849,7 @@ declare namespace DatePicker {
 }
 
 /**
- * Time value format
+ * Legacy time value shape retained for backward-compatible type exports.
  */
 interface TimeValue {
     hour: number;
@@ -862,7 +861,8 @@ interface TimeValue {
  */
 interface TimePickerProps extends Omit<InputProps<string>, "onChange"> {
     /**
-     * Change handler - receives time string in format "HH:mm AM/PM"
+     * Change handler - receives time string in format "HH:mm" (24-hour)
+     * or "h:mm AM/PM" (12-hour)
      */
     onChange: (time: string) => void;
     /**
@@ -896,50 +896,10 @@ interface TimePickerProps extends Omit<InputProps<string>, "onChange"> {
     [key: string]: any;
 }
 /**
- * TimePicker - Accessible time selection component with AM/PM support
- *
- * A lightweight time picker with dropdown selection for hours, minutes, and AM/PM period.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Dropdown selection with hour/minute spinners
- * - 12-hour or 24-hour format support
- * - AM/PM period selector
- * - Configurable minute step intervals
- * - Full accessibility support (ARIA attributes, keyboard navigation)
- * - Error state styling
- * - Controlled input behavior
- * - Clearable selection
- * - Icon display toggle
- * - Click outside to close
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { appointment: '' } });
- *
- * <TimePicker
- *   {...form.getFieldProps('appointment')}
- *   placeholder="Select time"
- *   minuteStep={15}
- *   clearable
- *   showIcon
- *   error={!!form.errors.appointment}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With 24-hour format
- * <TimePicker
- *   name="startTime"
- *   value={startTime}
- *   onChange={setStartTime}
- *   use24Hour
- *   minuteStep={30}
- * />
- * ```
+ * TimePicker - Accessible time input component using native time picker UX.
  *
- * @see https://opensite.ai/developers/page-speed/forms/time-picker
+ * Uses a native `type="time"` input for a streamlined UX while preserving
+ * formatting compatibility for 12-hour and 24-hour output formats.
  */
 declare function TimePicker({ name, value, onChange, onBlur, disabled, required, error, className, placeholder, use24Hour, minuteStep, clearable, showIcon, ...props }: TimePickerProps): React.JSX.Element;
 declare namespace TimePicker {