@papernote/ui/dist/components/Select.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
/**
 * Single option in a select dropdown
 */
export interface SelectOption {
    /** Unique value for this option */
    value: string;
    /** Display label for this option */
    label: string;
    /** Disable selection of this option */
    disabled?: boolean;
    /** Optional icon to display before label */
    icon?: React.ReactNode;
}
/**
 * Group of options with a section header
 */
export interface SelectOptionGroup {
    /** Group header label */
    label: string;
    /** Options in this group */
    options: SelectOption[];
}
/**
 * Imperative handle for Select component (via ref)
 */
export interface SelectHandle {
    /** Focus the select button */
    focus: () => void;
    /** Blur the select button */
    blur: () => void;
    /** Open the dropdown */
    open: () => void;
    /** Close the dropdown */
    close: () => void;
}
/**
 * Select component props
 */
export interface SelectProps {
    /** Flat list of options */
    options?: SelectOption[];
    /** Grouped options with section headers */
    groups?: SelectOptionGroup[];
    /** Currently selected value */
    value?: string;
    /** Callback when selection changes */
    onChange?: (value: string) => void;
    /** Placeholder text when no option selected */
    placeholder?: string;
    /** Enable search/filter functionality */
    searchable?: boolean;
    /** Disable the select */
    disabled?: boolean;
    /** Label text above select */
    label?: string;
    /** Helper text below select */
    helperText?: string;
    /** Error message (displayed below select in red) */
    error?: string;
    /** Show loading spinner */
    loading?: boolean;
    /** Show clear button to reset selection */
    clearable?: boolean;
    /** Allow creating new options (requires searchable=true) */
    creatable?: boolean;
    /** Callback when new option is created */
    onCreateOption?: (inputValue: string) => void;
    /** Enable virtual scrolling for large option lists (100+ items) */
    virtualized?: boolean;
    /** Height of dropdown when virtualized (default: '300px') */
    virtualHeight?: string;
    /** Height of each option row in pixels (default: 42) */
    virtualItemHeight?: number;
    /** Size of the select trigger - 'lg' provides 44px touch-friendly target */
    size?: 'sm' | 'md' | 'lg';
    /** Mobile display mode - 'auto' uses BottomSheet on mobile, 'dropdown' always uses dropdown, 'native' uses native select on mobile */
    mobileMode?: 'auto' | 'dropdown' | 'native';
    /** Render dropdown via portal (default: true). Set to false when overflow clipping is not an issue */
    usePortal?: boolean;
}
/**
 * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
 *
 * A feature-rich select component supporting flat or grouped options, search/filter,
 * option creation, virtual scrolling for large lists, and mobile-optimized BottomSheet display.
 *
 * @example Basic select
 * ```tsx
 * const options = [
 *   { value: '1', label: 'Option 1' },
 *   { value: '2', label: 'Option 2' },
 *   { value: '3', label: 'Option 3' },
 * ];
 *
 * <Select
 *   label="Choose option"
 *   options={options}
 *   value={selected}
 *   onChange={setSelected}
 * />
 * ```
 *
 * @example Mobile-optimized with large touch targets
 * ```tsx
 * <Select
 *   options={options}
 *   size="lg"
 *   mobileMode="auto"
 *   placeholder="Select..."
 * />
 * ```
 *
 * @example Searchable with groups
 * ```tsx
 * const groups = [
 *   {
 *     label: 'Fruits',
 *     options: [
 *       { value: 'apple', label: 'Apple', icon: <Apple /> },
 *       { value: 'banana', label: 'Banana' },
 *     ]
 *   },
 *   {
 *     label: 'Vegetables',
 *     options: [
 *       { value: 'carrot', label: 'Carrot' },
 *     ]
 *   },
 * ];
 *
 * <Select
 *   groups={groups}
 *   searchable
 *   clearable
 *   placeholder="Search food..."
 * />
 * ```
 *
 * @example Creatable with virtual scrolling
 * ```tsx
 * <Select
 *   options={largeOptionList}
 *   searchable
 *   creatable
 *   onCreateOption={handleCreate}
 *   virtualized
 *   virtualHeight="400px"
 * />
 * ```
 */
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectHandle>>;
export default Select;
//# sourceMappingURL=Select.d.ts.map