its-just-ui/dist/components/Select/Select.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';
import { SelectOption } from './types';

export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    options: SelectOption[];
    value?: SelectOption | SelectOption[] | null;
    onChange?: (value: SelectOption | SelectOption[] | null) => void;
    defaultValue?: SelectOption | SelectOption[] | null;
    placeholder?: string;
    disabled?: boolean;
    loading?: boolean;
    multiple?: boolean;
    clearable?: boolean;
    searchable?: boolean;
    required?: boolean;
    label?: string;
    helperText?: string;
    errorMessage?: string;
    emptyMessage?: string;
    loadingMessage?: string;
    variant?: 'default' | 'filled' | 'outlined' | 'ghost' | 'underlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'scale' | 'flip';
    transitionDuration?: number;
    renderOption?: (option: SelectOption, isSelected: boolean) => React.ReactNode;
    renderValue?: (value: SelectOption | SelectOption[]) => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
    dropdownIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
    placement?: 'top' | 'bottom';
    offset?: number;
    maxHeight?: number;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    dropdownBackgroundColor?: string;
    dropdownBorderColor?: string;
    dropdownBorderWidth?: string;
    dropdownBorderRadius?: string;
    dropdownBoxShadow?: string;
    dropdownZIndex?: string;
    optionPadding?: string;
    optionHoverBackgroundColor?: string;
    optionSelectedBackgroundColor?: string;
    optionSelectedTextColor?: string;
    optionDisabledOpacity?: string;
    iconColor?: string;
    clearIconColor?: string;
    dropdownIconColor?: string;
    loadingIconColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelColor?: string;
    labelMarginBottom?: string;
    helperTextFontSize?: string;
    helperTextColor?: string;
    helperTextMarginTop?: string;
    requiredColor?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
    onSearch?: (query: string) => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
    'aria-required'?: boolean;
}
export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    placeholder?: string;
    dropdownIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
}
declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLDivElement>>;
export interface SelectDropdownProps extends React.HTMLAttributes<HTMLUListElement> {
    maxHeight?: number;
    offset?: number;
}
declare const SelectDropdown: React.ForwardRefExoticComponent<SelectDropdownProps & React.RefAttributes<HTMLUListElement>>;
export interface SelectOptionProps extends React.LiHTMLAttributes<HTMLLIElement> {
    option: SelectOption;
    index: number;
}
declare const SelectOptionComponent: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLLIElement>>;
export interface SelectEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const SelectEmpty: React.ForwardRefExoticComponent<SelectEmptyProps & React.RefAttributes<HTMLDivElement>>;
interface SelectComponent extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>> {
    Input: typeof SelectInput;
    Dropdown: typeof SelectDropdown;
    Option: typeof SelectOptionComponent;
    Empty: typeof SelectEmpty;
}
declare const SelectCompound: SelectComponent;
export { SelectCompound, SelectInput, SelectDropdown, SelectOptionComponent, SelectEmpty };
export default SelectCompound;