@page-speed/forms 0.5.0 → 0.5.1

package/dist/inputs.d.cts

@@ -592,48 +592,7 @@ interface MultiSelectProps extends Omit<InputProps<string[]>, "onChange" | "onFo
     [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
+ * MultiSelect - ShadCN Command + Popover multi-select component
  */
 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 {
@@ -738,55 +697,11 @@ interface FileInputProps extends Omit<InputProps<File[]>, "value" | "onChange">
 /**
  * FileInput component for file selection with validation, progress tracking, and image cropping
  *
- * Features:
- * - Drag-and-drop file upload
- * - File type and size validation
- * - Image preview thumbnails
- * - Upload progress indicators
- * - Image cropping with aspect ratio control
- * - Multiple file support
- *
- * @example
- * ```tsx
- * <FileInput
- *   name="resume"
- *   accept=".pdf,.doc,.docx"
- *   maxSize={5 * 1024 * 1024}
- *   value={files}
- *   onChange={(files) => setFiles(files)}
- *   error={hasError}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With upload progress
- * <FileInput
- *   name="photos"
- *   accept="image/*"
- *   multiple
- *   value={files}
- *   onChange={setFiles}
- *   showProgress
- *   uploadProgress={progress}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With image cropping
- * <FileInput
- *   name="avatar"
- *   accept="image/*"
- *   value={files}
- *   onChange={setFiles}
- *   enableCropping
- *   cropAspectRatio={1}
- *   onCropComplete={(blob, file) => {
- *     // Handle cropped image
- *   }}
- * />
- * ```
+ * Built on the DiceUI-style FileUpload primitive with form-specific behavior:
+ * - Rails/token upload workflow compatibility
+ * - External upload progress support
+ * - Validation + accessibility wiring
+ * - Optional image cropping modal
  */
 declare function FileInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, accept, maxSize, // 5MB default
 maxFiles, multiple, showPreview, showProgress, uploadProgress, enableCropping, cropAspectRatio, onCropComplete, onValidationError, onFileRemove, ...props }: FileInputProps): React.JSX.Element;
@@ -1022,176 +937,12 @@ interface DateRangePickerProps extends Omit<InputProps<DateRange>, "onChange"> {
 /**
  * DateRangePicker - Accessible date range selection component
  *
- * A lightweight date range picker with calendar popup for selecting start and end dates.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Dual calendar view for range selection
- * - Full accessibility support (ARIA attributes, keyboard navigation)
- * - Error state styling
- * - Controlled input behavior
- * - Date range constraints (min/max dates)
- * - Disabled dates support
- * - Clearable selection
- * - Custom date format display
- * - Visual range highlighting
- * - Icon display toggle
- * - Click outside to close
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { dateRange: { start: null, end: null } } });
- *
- * <DateRangePicker
- *   {...form.getFieldProps('dateRange')}
- *   placeholder="Select date range"
- *   format="MM/dd/yyyy"
- *   clearable
- *   showIcon
- *   error={!!form.errors.dateRange}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With date constraints
- * <DateRangePicker
- *   name="vacation"
- *   value={vacationRange}
- *   onChange={setVacationRange}
- *   minDate={new Date()}
- *   maxDate={addDays(new Date(), 365)}
- *   separator=" to "
- * />
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/date-range-picker
+ * Uses ShadCN Calendar + Popover primitives while preserving the existing
+ * public API and interaction semantics.
  */
 declare function DateRangePicker({ name, value, onChange, onBlur, disabled, required, error, className, placeholder, format, minDate, maxDate, disabledDates, isDateDisabled, clearable, showIcon, separator, ...props }: DateRangePickerProps): React.JSX.Element;
 declare namespace DateRangePicker {
     var displayName: string;
 }
 
-/**
- * Editor mode type
- */
-type EditorMode = "wysiwyg" | "markdown";
-/**
- * Toolbar button configuration
- */
-interface ToolbarButton {
-    command: string;
-    icon: string;
-    title: string;
-    action: (editor: HTMLElement) => void;
-}
-/**
- * RichTextEditor props interface
- */
-interface RichTextEditorProps extends Omit<InputProps<string>, "onChange"> {
-    /**
-     * Change handler - receives HTML or Markdown content
-     */
-    onChange: (content: string) => void;
-    /**
-     * Editor mode - WYSIWYG or Markdown
-     * @default "wysiwyg"
-     */
-    mode?: EditorMode;
-    /**
-     * Allow mode switching
-     * @default false
-     */
-    allowModeSwitch?: boolean;
-    /**
-     * Placeholder text when editor is empty
-     * @default "Start typing..."
-     */
-    placeholder?: string;
-    /**
-     * Minimum height of editor
-     * @default "200px"
-     */
-    minHeight?: string;
-    /**
-     * Maximum height of editor (enables scrolling)
-     */
-    maxHeight?: string;
-    /**
-     * Show toolbar
-     * @default true
-     */
-    showToolbar?: boolean;
-    /**
-     * Toolbar buttons to display
-     * @default ["bold", "italic", "underline", "heading", "bulletList", "orderedList", "link"]
-     */
-    toolbarButtons?: string[];
-    /**
-     * Additional native input attributes
-     */
-    [key: string]: any;
-}
-/**
- * RichTextEditor - Basic rich text editing component with WYSIWYG and Markdown support
- *
- * A lightweight rich text editor with basic formatting capabilities and optional Markdown mode.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - WYSIWYG editor with contentEditable
- * - Markdown editor mode
- * - Configurable toolbar with common formatting options
- * - Full accessibility support
- * - Error state styling
- * - Controlled input behavior
- * - Custom toolbar configuration
- * - Mode switching support
- * - Placeholder text support
- * - Adjustable height constraints
- *
- * Toolbar buttons:
- * - bold: Bold text (**text**)
- * - italic: Italic text (*text*)
- * - underline: Underlined text
- * - heading: Heading levels (H1-H3)
- * - bulletList: Unordered list
- * - orderedList: Ordered list
- * - link: Insert hyperlink
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { content: '' } });
- *
- * <RichTextEditor
- *   {...form.getFieldProps('content')}
- *   placeholder="Write your content..."
- *   mode="wysiwyg"
- *   allowModeSwitch
- *   showToolbar
- *   minHeight="200px"
- *   maxHeight="500px"
- *   error={!!form.errors.content}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Markdown mode
- * <RichTextEditor
- *   name="description"
- *   value={description}
- *   onChange={setDescription}
- *   mode="markdown"
- *   toolbarButtons={["bold", "italic", "heading", "link"]}
- * />
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/rich-text-editor
- */
-declare function RichTextEditor({ name, value, onChange, onBlur, disabled, required, error, className, mode, allowModeSwitch, placeholder, minHeight, maxHeight, showToolbar, toolbarButtons, ...props }: RichTextEditorProps): React.JSX.Element;
-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, Switch, type SwitchProps, 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, FileInput, type FileInputProps, type FileUploadProgress, type FileValidationError, MultiSelect, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectProps, Radio, type RadioOption, type RadioProps, Select, type SelectOption, type SelectOptionGroup, type SelectProps, Switch, type SwitchProps, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue };

package/dist/inputs.d.ts

@@ -592,48 +592,7 @@ interface MultiSelectProps extends Omit<InputProps<string[]>, "onChange" | "onFo
     [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
+ * MultiSelect - ShadCN Command + Popover multi-select component
  */
 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 {
@@ -738,55 +697,11 @@ interface FileInputProps extends Omit<InputProps<File[]>, "value" | "onChange">
 /**
  * FileInput component for file selection with validation, progress tracking, and image cropping
  *
- * Features:
- * - Drag-and-drop file upload
- * - File type and size validation
- * - Image preview thumbnails
- * - Upload progress indicators
- * - Image cropping with aspect ratio control
- * - Multiple file support
- *
- * @example
- * ```tsx
- * <FileInput
- *   name="resume"
- *   accept=".pdf,.doc,.docx"
- *   maxSize={5 * 1024 * 1024}
- *   value={files}
- *   onChange={(files) => setFiles(files)}
- *   error={hasError}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With upload progress
- * <FileInput
- *   name="photos"
- *   accept="image/*"
- *   multiple
- *   value={files}
- *   onChange={setFiles}
- *   showProgress
- *   uploadProgress={progress}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With image cropping
- * <FileInput
- *   name="avatar"
- *   accept="image/*"
- *   value={files}
- *   onChange={setFiles}
- *   enableCropping
- *   cropAspectRatio={1}
- *   onCropComplete={(blob, file) => {
- *     // Handle cropped image
- *   }}
- * />
- * ```
+ * Built on the DiceUI-style FileUpload primitive with form-specific behavior:
+ * - Rails/token upload workflow compatibility
+ * - External upload progress support
+ * - Validation + accessibility wiring
+ * - Optional image cropping modal
  */
 declare function FileInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, accept, maxSize, // 5MB default
 maxFiles, multiple, showPreview, showProgress, uploadProgress, enableCropping, cropAspectRatio, onCropComplete, onValidationError, onFileRemove, ...props }: FileInputProps): React.JSX.Element;
@@ -1022,176 +937,12 @@ interface DateRangePickerProps extends Omit<InputProps<DateRange>, "onChange"> {
 /**
  * DateRangePicker - Accessible date range selection component
  *
- * A lightweight date range picker with calendar popup for selecting start and end dates.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - Dual calendar view for range selection
- * - Full accessibility support (ARIA attributes, keyboard navigation)
- * - Error state styling
- * - Controlled input behavior
- * - Date range constraints (min/max dates)
- * - Disabled dates support
- * - Clearable selection
- * - Custom date format display
- * - Visual range highlighting
- * - Icon display toggle
- * - Click outside to close
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { dateRange: { start: null, end: null } } });
- *
- * <DateRangePicker
- *   {...form.getFieldProps('dateRange')}
- *   placeholder="Select date range"
- *   format="MM/dd/yyyy"
- *   clearable
- *   showIcon
- *   error={!!form.errors.dateRange}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With date constraints
- * <DateRangePicker
- *   name="vacation"
- *   value={vacationRange}
- *   onChange={setVacationRange}
- *   minDate={new Date()}
- *   maxDate={addDays(new Date(), 365)}
- *   separator=" to "
- * />
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/date-range-picker
+ * Uses ShadCN Calendar + Popover primitives while preserving the existing
+ * public API and interaction semantics.
  */
 declare function DateRangePicker({ name, value, onChange, onBlur, disabled, required, error, className, placeholder, format, minDate, maxDate, disabledDates, isDateDisabled, clearable, showIcon, separator, ...props }: DateRangePickerProps): React.JSX.Element;
 declare namespace DateRangePicker {
     var displayName: string;
 }
 
-/**
- * Editor mode type
- */
-type EditorMode = "wysiwyg" | "markdown";
-/**
- * Toolbar button configuration
- */
-interface ToolbarButton {
-    command: string;
-    icon: string;
-    title: string;
-    action: (editor: HTMLElement) => void;
-}
-/**
- * RichTextEditor props interface
- */
-interface RichTextEditorProps extends Omit<InputProps<string>, "onChange"> {
-    /**
-     * Change handler - receives HTML or Markdown content
-     */
-    onChange: (content: string) => void;
-    /**
-     * Editor mode - WYSIWYG or Markdown
-     * @default "wysiwyg"
-     */
-    mode?: EditorMode;
-    /**
-     * Allow mode switching
-     * @default false
-     */
-    allowModeSwitch?: boolean;
-    /**
-     * Placeholder text when editor is empty
-     * @default "Start typing..."
-     */
-    placeholder?: string;
-    /**
-     * Minimum height of editor
-     * @default "200px"
-     */
-    minHeight?: string;
-    /**
-     * Maximum height of editor (enables scrolling)
-     */
-    maxHeight?: string;
-    /**
-     * Show toolbar
-     * @default true
-     */
-    showToolbar?: boolean;
-    /**
-     * Toolbar buttons to display
-     * @default ["bold", "italic", "underline", "heading", "bulletList", "orderedList", "link"]
-     */
-    toolbarButtons?: string[];
-    /**
-     * Additional native input attributes
-     */
-    [key: string]: any;
-}
-/**
- * RichTextEditor - Basic rich text editing component with WYSIWYG and Markdown support
- *
- * A lightweight rich text editor with basic formatting capabilities and optional Markdown mode.
- * Designed to work seamlessly with useForm and Field components.
- *
- * Features:
- * - WYSIWYG editor with contentEditable
- * - Markdown editor mode
- * - Configurable toolbar with common formatting options
- * - Full accessibility support
- * - Error state styling
- * - Controlled input behavior
- * - Custom toolbar configuration
- * - Mode switching support
- * - Placeholder text support
- * - Adjustable height constraints
- *
- * Toolbar buttons:
- * - bold: Bold text (**text**)
- * - italic: Italic text (*text*)
- * - underline: Underlined text
- * - heading: Heading levels (H1-H3)
- * - bulletList: Unordered list
- * - orderedList: Ordered list
- * - link: Insert hyperlink
- *
- * @example
- * ```tsx
- * const form = useForm({ initialValues: { content: '' } });
- *
- * <RichTextEditor
- *   {...form.getFieldProps('content')}
- *   placeholder="Write your content..."
- *   mode="wysiwyg"
- *   allowModeSwitch
- *   showToolbar
- *   minHeight="200px"
- *   maxHeight="500px"
- *   error={!!form.errors.content}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Markdown mode
- * <RichTextEditor
- *   name="description"
- *   value={description}
- *   onChange={setDescription}
- *   mode="markdown"
- *   toolbarButtons={["bold", "italic", "heading", "link"]}
- * />
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/rich-text-editor
- */
-declare function RichTextEditor({ name, value, onChange, onBlur, disabled, required, error, className, mode, allowModeSwitch, placeholder, minHeight, maxHeight, showToolbar, toolbarButtons, ...props }: RichTextEditorProps): React.JSX.Element;
-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, Switch, type SwitchProps, 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, FileInput, type FileInputProps, type FileUploadProgress, type FileValidationError, MultiSelect, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectProps, Radio, type RadioOption, type RadioProps, Select, type SelectOption, type SelectOptionGroup, type SelectProps, Switch, type SwitchProps, TextArea, type TextAreaProps, TextInput, TimePicker, type TimePickerProps, type TimeValue };