@als-tp/als-react-ts-ui/dist/components/ALSCombobox/ALSCombobox.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import React from "react";
import { Combobox } from "@base-ui-components/react/combobox";
export interface ALSComboboxRootProps {
    /**
     * Visual variant of the combobox
     * @default 'default'
     */
    variant?: "default" | "filled" | "outlined";
    /**
     * Size of the combobox
     * @default 'md'
     */
    size?: "sm" | "md" | "lg";
    /**
     * Whether the combobox has an error state
     * @default false
     */
    error?: boolean;
    /**
     * The items to be displayed in the list
     */
    items?: unknown[];
    /**
     * The selected value
     */
    value?: unknown;
    /**
     * Callback when value changes
     */
    onValueChange?: (value: unknown) => void;
    /**
     * The input value
     */
    inputValue?: string;
    /**
     * Callback when input value changes
     */
    onInputValueChange?: (value: string) => void;
    /**
     * Whether the popup is open (controlled)
     */
    open?: boolean;
    /**
     * Callback when open state changes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Function to convert item value to string label for display
     */
    itemToStringLabel?: (itemValue: unknown) => string;
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Inline styles
     */
    style?: React.CSSProperties;
    /**
     * Child components
     */
    children: React.ReactNode;
}
export interface ALSComboboxLabelProps {
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Child components
     */
    children: React.ReactNode;
}
export interface ALSComboboxInputProps {
    /**
     * Placeholder text
     */
    placeholder?: string;
    /**
     * Additional CSS class name
     */
    className?: string;
}
export interface ALSComboboxPopupProps {
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Inline styles
     */
    style?: React.CSSProperties;
    /**
     * Child components
     */
    children: React.ReactNode;
}
export interface ALSComboboxItemProps extends Combobox.Item.Props {
    /**
     * The value of the item
     */
    value: unknown;
    /**
     * Label to display for the item
     */
    label?: string;
    /**
     * Whether the item is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional CSS class name
     */
    /**
     * Child components
     */
    children?: React.ReactNode;
}
export interface ALSComboboxEmptyProps {
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Child components
     */
    children: React.ReactNode;
}
export type ALSComboboxIconProps = Combobox.Icon.Props;
export type ALSComboboxValueProps = Combobox.Value.Props;
export type ALSComboboxVariant = "default" | "filled" | "outlined";
export type ALSComboboxSize = "sm" | "md" | "lg";
/**
 * Root component that provides context for all combobox subcomponents
 */
export declare const ALSComboboxRoot: React.ForwardRefExoticComponent<ALSComboboxRootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Label for the combobox input
 */
export declare const ALSComboboxLabel: React.ForwardRefExoticComponent<ALSComboboxLabelProps & React.RefAttributes<HTMLLabelElement>>;
/**
 * Input field for the combobox
 */
export declare const ALSComboboxInput: React.ForwardRefExoticComponent<ALSComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Icon container for the combobox (typically a chevron)
 */
export declare const ALSComboboxIcon: React.ForwardRefExoticComponent<import("@base-ui-components/react/combobox").ComboboxIconProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Popup container that holds the list of items
 */
export declare const ALSComboboxPopup: React.ForwardRefExoticComponent<ALSComboboxPopupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * List container for items
 */
export declare const ALSComboboxList: React.ForwardRefExoticComponent<{
    className?: string;
    children: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
/**
 * Individual item within the combobox popup
 */
export declare const ALSComboboxItem: React.ForwardRefExoticComponent<ALSComboboxItemProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Component to display when no items match the search
 */
export declare const ALSComboboxEmpty: React.ForwardRefExoticComponent<ALSComboboxEmptyProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Displays the selected value in the input
 */
export declare const ALSComboboxValue: React.ForwardRefExoticComponent<import("@base-ui-components/react/combobox").ComboboxValueProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ALSCombobox.d.ts.map