infinity-ui-elements/dist/components/Select/Select.d.ts

A React TypeScript component library with Tailwind CSS design system

import * as React from "react";
import { type DropdownMenuItem } from "../Dropdown/DropdownMenu";
export interface SelectOption extends DropdownMenuItem {
    value: string | number;
    label?: string;
}
declare const selectVariants: (props?: ({
    size?: "medium" | "large" | "small" | null | undefined;
    validationState?: "none" | "positive" | "negative" | null | undefined;
    isDisabled?: boolean | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "prefix"> {
    /**
     * Options to display in the select dropdown
     */
    options?: SelectOption[];
    /**
     * Selected value (controlled)
     */
    value?: string | number;
    /**
     * Default selected value (uncontrolled)
     */
    defaultValue?: string | number;
    /**
     * Callback when selection changes
     */
    onChange?: (value: string | number, option: SelectOption) => void;
    /**
     * Placeholder text when no value is selected
     */
    placeholder?: string;
    /**
     * Label for the select
     */
    label?: string;
    /**
     * Helper text below the select
     */
    helperText?: string;
    /**
     * Error text (overrides helperText when present)
     */
    errorText?: string;
    /**
     * Success text (overrides helperText when present)
     */
    successText?: string;
    /**
     * Validation state for the select
     */
    validationState?: "none" | "positive" | "negative";
    /**
     * Whether the select is disabled
     */
    isDisabled?: boolean;
    /**
     * Whether the select is required
     */
    isRequired?: boolean;
    /**
     * Whether the select is optional
     */
    isOptional?: boolean;
    /**
     * Whether the select is in loading state
     */
    isLoading?: boolean;
    /**
     * Size of the select
     */
    size?: "small" | "medium" | "large";
    /**
     * Prefix element (icon or text)
     */
    prefix?: React.ReactNode;
    /**
     * Suffix element (icon or text)
     */
    suffix?: React.ReactNode;
    /**
     * Show clear button when value is selected
     */
    showClearButton?: boolean;
    /**
     * Callback when clear button is clicked
     */
    onClear?: () => void;
    /**
     * Custom class for the container
     */
    containerClassName?: string;
    /**
     * Custom class for the label
     */
    labelClassName?: string;
    /**
     * Custom class for the trigger button
     */
    triggerClassName?: string;
    /**
     * Custom class for the dropdown menu
     */
    menuClassName?: string;
    /**
     * Width of the dropdown menu
     */
    menuWidth?: "auto" | "full" | string;
    /**
     * Section heading for the dropdown
     */
    sectionHeading?: string;
    /**
     * Empty state title
     */
    emptyTitle?: string;
    /**
     * Empty state description
     */
    emptyDescription?: string;
    /**
     * Show search icon in empty state
     */
    emptyIcon?: React.ReactNode;
    /**
     * Info heading for tooltip
     */
    infoHeading?: string;
    /**
     * Info description for tooltip
     */
    infoDescription?: string;
    /**
     * Link text
     */
    linkText?: string;
    /**
     * Link href
     */
    linkHref?: string;
    /**
     * Link click handler
     */
    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
export { selectVariants };
//# sourceMappingURL=Select.d.ts.map