retro-react/dist/cjs/components/select/Select.d.ts

A React component library for building retro-style websites

/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export declare type SelectVariants = 'outlined' | 'filled' | 'terminal' | 'classic';
export declare type SelectSizes = 'small' | 'medium' | 'large';
export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement> {
    /**
     * The label for the Select.
     *
     * @default undefined
     */
    label?: string;
    /**
     * The variant of the Select.
     * - classic: Deep sunken Windows 95/98 dialog style with heavy inset shadow
     * - filled: Prominent raised 3D button-like appearance with outer shadow
     * - outlined: Clean flat design with simple border and focus ring
     * - terminal: Subtle dark terminal aesthetic with soft green text
     *
     * @default 'filled'
     */
    variant?: SelectVariants;
    /**
     * The size of the Select.
     *
     * @default 'medium'
     */
    size?: SelectSizes;
    /**
     * If disabled is passed, the Select will be disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * If required is passed, the Select will be required.
     *
     * @default false
     */
    required?: boolean;
    /**
     * The error message of the Select. Used for accessibility.
     *
     * @default undefined
     */
    errorMessage?: string;
    /**
     * The options of the Select.
     *
     * @default undefined
     */
    children?: React.ReactNode;
    sx?: ThemeUICSSObject;
}
/**
 * Retro-themed select dropdowns inspired by classic 90s computing aesthetics.
 *
 * Features four distinct authentic variants:
 * - Classic: Deep sunken Windows 95/98 dialog style with heavy inset shadows
 * - Filled: Prominent raised 3D button-style with outer drop shadows (default)
 * - Outlined: Clean flat design with simple borders and focus rings
 * - Terminal: Subtle dark console style with soft phosphor green text
 *
 * @example
 * // Deep Windows 95 sunken style
 * <Select variant="classic" label="Choose option">
 *   <option value="1">Option 1</option>
 * </Select>
 *
 * // Prominent 3D raised select (default)
 * <Select label="Select car">
 *   <option value="camaro">Camaro</option>
 * </Select>
 *
 * // Clean flat outlined style
 * <Select variant="outlined" label="Filter by">
 *   <option value="all">All</option>
 * </Select>
 *
 * // Subtle terminal style
 * <Select variant="terminal" label="System">
 *   <option value="dos">MS-DOS</option>
 * </Select>
 */
export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;