@page-speed/forms 0.1.0

package/dist/inputs.d.ts

@@ -0,0 +1,433 @@
+import * as React from 'react';
+import { I as InputProps } from './types-Cw5CeZP-.js';
+
+/**
+ * TextInput - High-performance text input component
+ *
+ * A lightweight, accessible text input with error state support.
+ * Designed to work seamlessly with useForm and Field components.
+ *
+ * Features:
+ * - Full accessibility support
+ * - Error state styling
+ * - Controlled input behavior
+ * - All native input attributes supported
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { email: '' } });
+ *
+ * <TextInput
+ *   {...form.getFieldProps('email')}
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error={!!form.errors.email}
+ *   aria-invalid={!!form.errors.email}
+ *   aria-describedby={form.errors.email ? 'email-error' : undefined}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/text-input
+ */
+declare function TextInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, type, ...props }: InputProps<string> & {
+    type?: "text" | "email" | "password" | "url" | "tel" | "search";
+}): React.JSX.Element;
+declare namespace TextInput {
+    var displayName: string;
+}
+
+/**
+ * Additional props specific to TextArea
+ */
+interface TextAreaProps extends Omit<InputProps<string>, "onChange"> {
+    /**
+     * Number of visible text rows
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Number of visible text columns (characters)
+     */
+    cols?: number;
+    /**
+     * Maximum character length
+     */
+    maxLength?: number;
+    /**
+     * Minimum character length
+     */
+    minLength?: number;
+    /**
+     * Text wrapping behavior
+     * - soft: text wraps but newlines not submitted (default)
+     * - hard: text wraps and newlines submitted (requires cols)
+     * - off: no wrapping
+     */
+    wrap?: "soft" | "hard" | "off";
+    /**
+     * Change handler
+     */
+    onChange: (value: string) => void;
+    /**
+     * Additional native textarea attributes
+     */
+    [key: string]: any;
+}
+/**
+ * TextArea - High-performance multi-line text input component
+ *
+ * A lightweight, accessible textarea with error state support.
+ * Designed to work seamlessly with useForm and Field components.
+ *
+ * Features:
+ * - 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
+ * const form = useForm({ initialValues: { bio: '' } });
+ *
+ * <TextArea
+ *   {...form.getFieldProps('bio')}
+ *   rows={5}
+ *   placeholder="Tell us about yourself"
+ *   error={!!form.errors.bio}
+ *   aria-invalid={!!form.errors.bio}
+ *   aria-describedby={form.errors.bio ? 'bio-error' : undefined}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/textarea
+ */
+declare function TextArea({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, rows, cols, maxLength, minLength, wrap, ...props }: TextAreaProps): React.JSX.Element;
+declare namespace TextArea {
+    var displayName: string;
+}
+
+/**
+ * Additional props specific to Checkbox
+ */
+interface CheckboxProps extends Omit<InputProps<boolean>, "onChange" | "placeholder"> {
+    /**
+     * 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
+     * Can also wrap checkbox in a label element
+     */
+    label?: React.ReactNode;
+    /**
+     * Additional native input attributes
+     */
+    [key: string]: any;
+}
+/**
+ * Checkbox - High-performance boolean input component
+ *
+ * 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 text
+ * - All native checkbox attributes supported
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { terms: false } });
+ *
+ * <Checkbox
+ *   {...form.getFieldProps('terms')}
+ *   label="I agree to the terms and conditions"
+ *   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, ...props }: CheckboxProps): React.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+/**
+ * Radio option type
+ */
+interface RadioOption {
+    /**
+     * The value for this radio option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: React.ReactNode;
+    /**
+     * Optional description text below the label
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Additional props specific to Radio
+ */
+interface RadioProps extends Omit<InputProps<string>, "onChange" | "placeholder"> {
+    /**
+     * Change handler - receives selected value
+     */
+    onChange: (value: string) => void;
+    /**
+     * Array of radio options
+     */
+    options: RadioOption[];
+    /**
+     * Layout direction
+     * @default "stacked"
+     */
+    layout?: "inline" | "stacked";
+    /**
+     * Group-level label
+     */
+    label?: React.ReactNode;
+    /**
+     * Additional native input attributes
+     */
+    [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)
+ * - Inline or stacked layout
+ * - Optional descriptions for each option
+ * - Individual option disabled state
+ * - All native radio attributes supported
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { plan: 'basic' } });
+ *
+ * <Radio
+ *   {...form.getFieldProps('plan')}
+ *   label="Select your plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/month' },
+ *     { value: 'pro', label: 'Pro', description: '$29/month' },
+ *     { value: 'enterprise', label: 'Enterprise', description: '$99/month' }
+ *   ]}
+ *   error={!!form.errors.plan}
+ *   aria-describedby={form.errors.plan ? 'plan-error' : undefined}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Inline layout
+ * <Radio
+ *   name="size"
+ *   value={size}
+ *   onChange={handleSizeChange}
+ *   layout="inline"
+ *   options={[
+ *     { value: 'sm', label: 'Small' },
+ *     { value: 'md', label: 'Medium' },
+ *     { value: 'lg', label: 'Large' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/radio
+ */
+declare function Radio({ name, value, onChange, onBlur, disabled, required, error, className, layout, label, options, ...props }: RadioProps): React.JSX.Element;
+declare namespace Radio {
+    var displayName: string;
+}
+
+/**
+ * Select option type
+ */
+interface SelectOption {
+    /**
+     * The value for this option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Select option group type for organizing options
+ */
+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.
+ *
+ * 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
+ * - Option groups support
+ * - Loading state for async options
+ * - Disabled options support
+ * - Click outside to close
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { country: '' } });
+ *
+ * <Select
+ *   {...form.getFieldProps('country')}
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { 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 namespace Select {
+    var displayName: string;
+}
+
+export { Checkbox, type CheckboxProps, Radio, type RadioOption, type RadioProps, Select, type SelectOption, type SelectOptionGroup, type SelectProps, TextArea, type TextAreaProps, TextInput };