@page-speed/forms 0.4.4 → 0.4.6

package/dist/inputs.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { I as InputProps } from './types-BBif0kuP.cjs';
+import { I as InputProps } from './types-4ppM117e.cjs';
 
 /**
  * TextInput - High-performance text input component
@@ -588,6 +588,147 @@ declare namespace Select {
     var displayName: string;
 }
 
+/**
+ * Multi-select option type
+ */
+interface MultiSelectOption {
+    /**
+     * The value for this option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Multi-select option group type for organizing options
+ */
+interface MultiSelectOptionGroup {
+    /**
+     * Group label
+     */
+    label: string;
+    /**
+     * Options in this group
+     */
+    options: MultiSelectOption[];
+}
+/**
+ * Additional props specific to MultiSelect
+ */
+interface MultiSelectProps extends Omit<InputProps<string[]>, "onChange" | "onFocus"> {
+    /**
+     * Change handler - receives array of selected values
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: () => void;
+    /**
+     * Array of select options (flat structure)
+     */
+    options?: MultiSelectOption[];
+    /**
+     * Array of option groups (grouped structure)
+     */
+    optionGroups?: MultiSelectOptionGroup[];
+    /**
+     * Placeholder text when no options are selected
+     * @default "Select..."
+     */
+    placeholder?: string;
+    /**
+     * Enable search/filter functionality
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Enable clearable button to reset all selections
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Loading state for async options
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Maximum number of selections allowed
+     */
+    maxSelections?: number;
+    /**
+     * Show "Select All" button
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Custom render function for options
+     */
+    renderOption?: (option: MultiSelectOption) => React.ReactNode;
+    /**
+     * Custom render function for selected value chips/tags
+     */
+    renderValue?: (option: MultiSelectOption) => React.ReactNode;
+    /**
+     * Additional native input attributes
+     */
+    [key: string]: any;
+}
+/**
+ * MultiSelect - High-performance multi-selection dropdown component
+ *
+ * A lightweight, accessible multi-select dropdown with search, keyboard navigation,
+ * and error state support. Designed to work seamlessly with useForm and Field components.
+ *
+ * Features:
+ * - Multiple value selection
+ * - Full accessibility support (ARIA attributes, role="listbox")
+ * - Error state styling
+ * - Controlled input behavior
+ * - Keyboard navigation (arrow keys, Enter, Escape, Space)
+ * - Searchable options with filtering
+ * - Clearable selections
+ * - Option groups support
+ * - Loading state for async options
+ * - Disabled options support
+ * - Maximum selections limit
+ * - Select All / Clear All functionality
+ * - Selected value chips/tags with individual removal
+ * - Click outside to close
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { skills: [] } });
+ *
+ * <MultiSelect
+ *   {...form.getFieldProps('skills')}
+ *   placeholder="Select skills"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'typescript', label: 'TypeScript' },
+ *     { value: 'node', label: 'Node.js' }
+ *   ]}
+ *   searchable
+ *   clearable
+ *   showSelectAll
+ *   maxSelections={5}
+ *   error={!!form.errors.skills}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/multi-select
+ */
+declare function MultiSelect({ name, value, onChange, onBlur, onFocus, disabled, required, error, className, placeholder, searchable, clearable, loading, maxSelections, showSelectAll, options, optionGroups, renderOption, renderValue, ...props }: MultiSelectProps): React.JSX.Element;
+declare namespace MultiSelect {
+    var displayName: string;
+}
+
 /**
  * File validation error details
  */
@@ -1142,4 +1283,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, 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, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue, type ToolbarButton };

package/dist/inputs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { I as InputProps } from './types-BBif0kuP.js';
+import { I as InputProps } from './types-4ppM117e.js';
 
 /**
  * TextInput - High-performance text input component
@@ -588,6 +588,147 @@ declare namespace Select {
     var displayName: string;
 }
 
+/**
+ * Multi-select option type
+ */
+interface MultiSelectOption {
+    /**
+     * The value for this option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Multi-select option group type for organizing options
+ */
+interface MultiSelectOptionGroup {
+    /**
+     * Group label
+     */
+    label: string;
+    /**
+     * Options in this group
+     */
+    options: MultiSelectOption[];
+}
+/**
+ * Additional props specific to MultiSelect
+ */
+interface MultiSelectProps extends Omit<InputProps<string[]>, "onChange" | "onFocus"> {
+    /**
+     * Change handler - receives array of selected values
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: () => void;
+    /**
+     * Array of select options (flat structure)
+     */
+    options?: MultiSelectOption[];
+    /**
+     * Array of option groups (grouped structure)
+     */
+    optionGroups?: MultiSelectOptionGroup[];
+    /**
+     * Placeholder text when no options are selected
+     * @default "Select..."
+     */
+    placeholder?: string;
+    /**
+     * Enable search/filter functionality
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Enable clearable button to reset all selections
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Loading state for async options
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Maximum number of selections allowed
+     */
+    maxSelections?: number;
+    /**
+     * Show "Select All" button
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Custom render function for options
+     */
+    renderOption?: (option: MultiSelectOption) => React.ReactNode;
+    /**
+     * Custom render function for selected value chips/tags
+     */
+    renderValue?: (option: MultiSelectOption) => React.ReactNode;
+    /**
+     * Additional native input attributes
+     */
+    [key: string]: any;
+}
+/**
+ * MultiSelect - High-performance multi-selection dropdown component
+ *
+ * A lightweight, accessible multi-select dropdown with search, keyboard navigation,
+ * and error state support. Designed to work seamlessly with useForm and Field components.
+ *
+ * Features:
+ * - Multiple value selection
+ * - Full accessibility support (ARIA attributes, role="listbox")
+ * - Error state styling
+ * - Controlled input behavior
+ * - Keyboard navigation (arrow keys, Enter, Escape, Space)
+ * - Searchable options with filtering
+ * - Clearable selections
+ * - Option groups support
+ * - Loading state for async options
+ * - Disabled options support
+ * - Maximum selections limit
+ * - Select All / Clear All functionality
+ * - Selected value chips/tags with individual removal
+ * - Click outside to close
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ initialValues: { skills: [] } });
+ *
+ * <MultiSelect
+ *   {...form.getFieldProps('skills')}
+ *   placeholder="Select skills"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'typescript', label: 'TypeScript' },
+ *     { value: 'node', label: 'Node.js' }
+ *   ]}
+ *   searchable
+ *   clearable
+ *   showSelectAll
+ *   maxSelections={5}
+ *   error={!!form.errors.skills}
+ * />
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/multi-select
+ */
+declare function MultiSelect({ name, value, onChange, onBlur, onFocus, disabled, required, error, className, placeholder, searchable, clearable, loading, maxSelections, showSelectAll, options, optionGroups, renderOption, renderValue, ...props }: MultiSelectProps): React.JSX.Element;
+declare namespace MultiSelect {
+    var displayName: string;
+}
+
 /**
  * File validation error details
  */
@@ -1142,4 +1283,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, 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, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue, type ToolbarButton };