@page-speed/forms 0.4.7 → 0.4.9

package/dist/inputs.d.cts

@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { I as InputProps } from './types-4ppM117e.cjs';
+import { I as InputProps } from './types-DuX3q6A4.cjs';
 
 /**
- * TextInput - High-performance text input component
+ * TextInput - High-performance text input component (ShadCN-based)
  *
- * A lightweight, accessible text input with error state support.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
+ * Built on ShadCN Input component with form-specific behavior:
+ * - Error state handling
+ * - Valid value indicator (ring-2)
+ * - Form integration (onChange, onBlur)
  * - Full accessibility support
- * - Error state styling
- * - Controlled input behavior
- * - All native input attributes supported
  *
  * @example
  * ```tsx
@@ -74,19 +71,13 @@ interface TextAreaProps extends Omit<InputProps<string>, "onChange"> {
     [key: string]: any;
 }
 /**
- * TextArea - High-performance multi-line text input component
+ * TextArea - High-performance multi-line text input component (ShadCN-based)
  *
- * A lightweight, accessible textarea with error state support.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
+ * Built on ShadCN Textarea component with form-specific behavior:
+ * - Error state handling
+ * - Valid value indicator (ring-2)
+ * - Form integration (onChange, onBlur)
  * - Full accessibility support
- * - Error state styling
- * - Controlled input behavior
- * - Configurable rows and columns
- * - Text wrapping options
- * - Character length validation
- * - All native textarea attributes supported
  *
  * @example
  * ```tsx
@@ -117,12 +108,6 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      * Change handler - receives boolean checked state
      */
     onChange: (checked: boolean) => void;
-    /**
-     * Indeterminate state for partial selections
-     * Useful for "select all" checkboxes with some items selected
-     * @default false
-     */
-    indeterminate?: boolean;
     /**
      * Label text for the checkbox (primary text)
      */
@@ -132,8 +117,7 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
      */
     description?: React.ReactNode;
     /**
-     * Layout variant
-     * Utilized if any checkboxes have a description
+     * Layout variant - automatically enabled if description exists
      * @default false
      */
     useChoiceCard?: boolean;
@@ -143,19 +127,14 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
     [key: string]: any;
 }
 /**
- * Checkbox - High-performance boolean input component
+ * Checkbox - High-performance boolean input component (ShadCN-based)
  *
- * A lightweight, accessible checkbox with error state support.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Full accessibility support (ARIA attributes)
- * - Error state styling
- * - Controlled input behavior
- * - Indeterminate state support
- * - Optional label and description text (with nil guards)
- * - Proper field-based layout structure
- * - All native checkbox attributes supported
+ * Built on ShadCN Checkbox with form-specific behavior:
+ * - Error state handling
+ * - Choice Card variant (automatic when description exists)
+ * - Label and description support
+ * - Form integration (onChange, onBlur)
+ * - Full accessibility support
  *
  * @example
  * ```tsx
@@ -166,25 +145,12 @@ interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placehol
  *   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}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With indeterminate state
- * <Checkbox
- *   name="selectAll"
- *   value={allSelected}
- *   onChange={handleSelectAll}
- *   indeterminate={someSelected}
- *   label="Select all items"
  * />
  * ```
  *
  * @see https://opensite.ai/developers/page-speed/forms/checkbox
  */
-declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, indeterminate, label, description, useChoiceCard, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ name, value, onChange, onBlur, disabled, required, error, className, label, description, useChoiceCard, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -383,21 +349,15 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
     [key: string]: any;
 }
 /**
- * Radio - High-performance single selection component
- *
- * A lightweight, accessible radio group with error state support.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Full accessibility support (ARIA attributes, role="radiogroup")
- * - Error state styling
- * - Controlled input behavior
- * - Keyboard navigation (arrow keys)
- * - Grid or stacked layout
- * - Optional descriptions for each option (with nil guard)
- * - Individual option disabled state
- * - Card-based styling with proper visual hierarchy
- * - All native radio attributes supported
+ * Radio - High-performance single selection component (ShadCN-based)
+ *
+ * Built on ShadCN RadioGroup with form-specific behavior:
+ * - Error state handling
+ * - Choice Card variant (automatic when any option has description)
+ * - Keyboard navigation (built into RadioGroup)
+ * - Grid/stacked layouts
+ * - Form integration (onChange, onBlur)
+ * - Full accessibility support
  *
  * @example
  * ```tsx
@@ -412,23 +372,6 @@ interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"
  *     { value: 'enterprise', label: 'Enterprise', description: '$99/month' }
  *   ]}
  *   error={!!form.errors.plan}
- *   aria-describedby={form.errors.plan ? 'plan-error' : undefined}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Grid layout
- * <Radio
- *   name="size"
- *   value={size}
- *   onChange={handleSizeChange}
- *   layout="grid"
- *   options={[
- *     { value: 'sm', label: 'Small' },
- *     { value: 'md', label: 'Medium' },
- *     { value: 'lg', label: 'Large' }
- *   ]}
  * />
  * ```
  *
@@ -440,101 +383,98 @@ declare namespace Radio {
 }
 
 /**
- * Select option type
+ * Additional props specific to Switch
  */
-interface SelectOption {
+interface SwitchProps extends Omit<InputProps<boolean>, "onChange" | "placeholder"> {
     /**
-     * The value for this option
+     * Change handler - receives boolean checked state
      */
-    value: string;
+    onChange: (checked: boolean) => void;
     /**
-     * Display label for the option
+     * Label text for the switch
      */
-    label: React.ReactNode;
+    label?: React.ReactNode;
     /**
-     * Whether this option is disabled
+     * Optional description text below the label
      */
+    description?: React.ReactNode;
+    /**
+     * Size variant
+     * @default "default"
+     */
+    size?: "sm" | "default";
+    /**
+     * Additional native input attributes
+     */
+    [key: string]: any;
+}
+/**
+ * Switch - High-performance toggle input component (ShadCN-based)
+ *
+ * Built on ShadCN Switch with form-specific behavior:
+ * - Error state handling
+ * - Label and description support
+ * - Form integration (onChange, onBlur)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { notifications: false } });
+ *
+ * <Switch
+ *   {...form.getFieldProps('notifications')}
+ *   label="Enable notifications"
+ *   description="Receive email notifications for important updates"
+ *   error={!!form.errors.notifications}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/switch
+ */
+declare function Switch({ name, value, onChange, onBlur, disabled, required, error, className, label, description, size, ...props }: SwitchProps): React.JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+
+/**
+ * Select option type
+ */
+interface SelectOption {
+    value: string;
+    label: React.ReactNode;
     disabled?: boolean;
 }
 /**
- * Select option group type for organizing options
+ * Select option group type
  */
 interface SelectOptionGroup {
-    /**
-     * Group label
-     */
     label: string;
-    /**
-     * Options in this group
-     */
     options: SelectOption[];
 }
 /**
  * Additional props specific to Select
  */
 interface SelectProps extends Omit<InputProps<string>, "onChange" | "onFocus"> {
-    /**
-     * Change handler - receives selected value
-     */
     onChange: (value: string) => void;
-    /**
-     * Focus handler
-     */
     onFocus?: () => void;
-    /**
-     * Array of select options (flat structure)
-     */
     options?: SelectOption[];
-    /**
-     * Array of option groups (grouped structure)
-     */
     optionGroups?: SelectOptionGroup[];
-    /**
-     * Placeholder text when no option is selected
-     * @default "Select..."
-     */
     placeholder?: string;
-    /**
-     * Enable search/filter functionality
-     * @default true
-     */
-    searchable?: boolean;
-    /**
-     * Enable clearable button to reset selection
-     * @default true
-     */
-    clearable?: boolean;
-    /**
-     * Loading state for async options
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Custom render function for options
-     */
     renderOption?: (option: SelectOption) => React.ReactNode;
-    /**
-     * Additional native input attributes
-     */
     [key: string]: any;
 }
 /**
- * Select - High-performance dropdown selection component
- *
- * A lightweight, accessible select/dropdown with search, keyboard navigation,
- * and error state support. Designed to work seamlessly with useForm and Field components.
+ * Select - High-performance dropdown selection component (ShadCN-based)
  *
- * Features:
- * - Full accessibility support (ARIA attributes, role="combobox")
- * - Error state styling
- * - Controlled input behavior
- * - Keyboard navigation (arrow keys, Enter, Escape, type-ahead)
- * - Searchable options with filtering
- * - Clearable selection
+ * Built on ShadCN Select with form-specific behavior:
+ * - Error state handling
+ * - Valid value indicator (ring-2)
+ * - Form integration (onChange, onBlur)
  * - Option groups support
- * - Loading state for async options
- * - Disabled options support
- * - Click outside to close
+ * - Full accessibility support
+ *
+ * NOTE: This is a simplified refactored version. For advanced features like
+ * search, clearable, and loading states, use the Command component or MultiSelect.
  *
  * @example
  * ```tsx
@@ -548,42 +488,13 @@ interface SelectProps extends Omit<InputProps<string>, "onChange" | "onFocus"> {
  *     { value: 'ca', label: 'Canada' },
  *     { value: 'mx', label: 'Mexico' }
  *   ]}
- *   searchable
- *   clearable
  *   error={!!form.errors.country}
- *   aria-describedby={form.errors.country ? 'country-error' : undefined}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With option groups
- * <Select
- *   name="timezone"
- *   value={timezone}
- *   onChange={handleTimezoneChange}
- *   optionGroups={[
- *     {
- *       label: 'North America',
- *       options: [
- *         { value: 'est', label: 'Eastern Time' },
- *         { value: 'cst', label: 'Central Time' }
- *       ]
- *     },
- *     {
- *       label: 'Europe',
- *       options: [
- *         { value: 'gmt', label: 'GMT' },
- *         { value: 'cet', label: 'Central European Time' }
- *       ]
- *     }
- *   ]}
  * />
  * ```
  *
  * @see https://opensite.ai/developers/page-speed/forms/select
  */
-declare function Select({ name, value, onChange, onBlur, onFocus, disabled, required, error, className, placeholder, searchable, clearable, loading, options, optionGroups, renderOption, ...props }: SelectProps): React.JSX.Element;
+declare function Select({ name, value, onChange, onBlur, onFocus, disabled, required, error, className, placeholder, options, optionGroups, renderOption, ...props }: SelectProps): React.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }
@@ -1283,4 +1194,4 @@ declare namespace RichTextEditor {
     var displayName: string;
 }
 
-export { Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CropArea, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type EditorMode, FileInput, type FileInputProps, type FileUploadProgress, type FileValidationError, MultiSelect, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectProps, Radio, type RadioOption, type RadioProps, RichTextEditor, type RichTextEditorProps, Select, type SelectOption, type SelectOptionGroup, type SelectProps, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue, type ToolbarButton };
+export { Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CropArea, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type EditorMode, FileInput, type FileInputProps, type FileUploadProgress, type FileValidationError, MultiSelect, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectProps, Radio, type RadioOption, type RadioProps, RichTextEditor, type RichTextEditorProps, Select, type SelectOption, type SelectOptionGroup, type SelectProps, Switch, type SwitchProps, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue, type ToolbarButton };