@parrot-co/parrot-ui/dist/types.d.ts

React UI components by Parrot built on top of react-aria (https://react-spectrum.adobe.com/react-aria/index.html

import { SectionProps, ItemProps, MenuTriggerProps, ListState, OverlayTriggerProps, OverlayTriggerState, ListProps, CheckboxGroupProps as _CheckboxGroupProps1, RadioGroupProps as _RadioGroupProps1 } from "react-stately";
import * as React from "react";
import { AriaTextFieldProps, AriaButtonProps, AriaNumberFieldProps, AriaTextFieldOptions, AriaCheckboxGroupProps, AriaCheckboxProps, AriaCheckboxGroupItemProps, AriaMenuProps, Placement, AriaListBoxOptions, AriaComboBoxProps, AriaRadioGroupProps, AriaRadioProps, Key, AriaCalendarProps, AriaDatePickerProps, AriaProgressBarProps, AriaSwitchProps, AriaSliderProps, AriaTabListProps, AriaModalOverlayProps, AriaPopoverProps, AriaTagGroupProps } from "react-aria";
import { ToggleButtonProps } from "react-aria-components";
import { DateValue } from "@react-types/calendar";
import { DateValue as _DateValue1 } from "@internationalized/date";
import { Color as _Color1, ColorAreaProps as _ColorAreaProps1 } from "@react-stately/color";
import { AriaColorFieldProps, AriaColorSliderOptions } from "@react-aria/color";
import { Color as _Color2 } from "@react-types/color";
declare const supportedColors: readonly ["tomato", "red", "crimson", "pink", "plum", "purple", "violet", "indigo", "blue", "cyan", "teal", "green", "grass", "orange", "brown", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray", "mauve", "slate", "sage", "olive", "sand"];
type Color = (typeof supportedColors)[number];
type ColorVariant = "solid" | "outline" | "light" | "lightOutline" | "solidMono" | "ghost" | "pastel";
type InputAppearance = "outline" | "filled" | "filled-outline";
type BorderRadius = "none" | "sm" | "md" | "lg" | "full";
type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
type ButtonAppearance = "primary" | "secondary" | "minimal";
type ButtonAppearanceSchemaType = Partial<Record<ButtonAppearance, {
    variant: ColorVariant;
    color: Color;
}>>;
type PositionType = "absolute" | "relative" | "fixed" | "sticky";
type JustifyContentType = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
type AlignItemsType = "start" | "center" | "end" | "stretch" | "baseline";
type FlexDirectionType = "row" | "column" | "row-reverse" | "column-reverse";
type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
type ActionStatus = "idle" | "loading" | "success" | "error";
type ID = string | number;
type SectionElement<T> = React.ReactElement<SectionProps<T>>;
type ItemElement<T> = React.ReactElement<ItemProps<T>>;
type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
type Breakpoints = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
interface StyleProps<S extends string = string> {
    /** Use this to add classes to the component. you can also use the `className` prop. But i won't recommend to use both at the same time. */
    classNames?: Partial<Record<S, string>>;
    /** Use this to add styles to the component. you can also use the `style` prop. But i won't recommend to use both at the same time. */
    styles?: Partial<Record<S, React.CSSProperties>>;
    className?: string;
    style?: React.CSSProperties;
}
type ResponsiveProp<T> = T | {
    [K in Breakpoints]?: T;
};
interface ColorProps {
    color?: Color;
    variant?: ColorVariant;
}
interface BoxProps {
    stretchX?: boolean;
    stretchY?: boolean;
    stretchXY?: boolean;
    position?: PositionType;
}
export const Box: {
    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">({ stretchX, stretchY, stretchXY, children, className, position, as, ...props }: BoxProps & {
        children?: React.ReactNode;
    } & {
        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | T | undefined;
    } & Omit<React.ComponentPropsWithRef<T>, "as" | "color">, ref: React.Ref<T>): React.JSX.Element;
    displayName: string;
};
type Columns = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface GridProps {
    columns?: ResponsiveProp<Columns>;
    gap?: ResponsiveProp<SizeOption>;
    gapX?: ResponsiveProp<SizeOption>;
    gapY?: ResponsiveProp<SizeOption>;
    align?: ResponsiveProp<AlignItemsType>;
    justify?: ResponsiveProp<JustifyContentType>;
}
export const Grid: {
    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: GridProps & BoxProps & {
        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | T | undefined;
    } & Omit<React.ComponentPropsWithRef<T>, "as" | "color">, ref: React.Ref<T>): React.JSX.Element;
    displayName: string;
};
interface GridItemProps extends React.ComponentProps<typeof Box> {
    colSpan?: ResponsiveProp<Columns>;
}
export const GridItem: {
    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: GridItemProps & {
        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | T | undefined;
    } & Omit<React.ComponentPropsWithRef<T>, "as" | "color">, ref: React.Ref<T>): React.JSX.Element;
    displayName: string;
};
interface FlexProps extends BoxProps {
    justify?: JustifyContentType;
    align?: AlignItemsType;
    direction?: FlexDirectionType;
    gap?: ResponsiveProp<SizeOption>;
    columnGap?: ResponsiveProp<SizeOption>;
    rowGap?: ResponsiveProp<SizeOption>;
    stack?: boolean;
    inline?: boolean;
    wrap?: "wrap" | "nowrap" | "wrap-reverse";
}
export const Flex: {
    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: FlexProps & {
        children?: React.ReactNode;
    } & {
        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | T | undefined;
    } & Omit<React.ComponentPropsWithRef<T>, "as" | "color">, ref: React.Ref<T>): React.JSX.Element;
    displayName: string;
};
type TextWeight = "light" | "regular" | "medium" | "semi-bold" | "bold" | "heavy" | "inherit";
type TextColorVariant = "light" | "lighter" | "dark" | "default";
interface TextProps {
    size?: ResponsiveProp<SizeOption>;
    weight?: TextWeight;
    highlight?: boolean;
    color?: Color | "inherit" | "white" | "black";
    variant?: TextColorVariant;
    align?: "left" | "center" | "right";
    numeric?: boolean;
    underline?: boolean;
    italic?: boolean;
    lineHeight?: "normal" | "shorter" | "short" | "base" | "tall";
    textCase?: "uppercase" | "lowercase" | "capitalize";
}
export const Text: {
    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "span">(props: TextProps & {
        children?: React.ReactNode;
    } & {
        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | T | undefined;
    } & Omit<React.ComponentPropsWithRef<T>, "as" | "color">, ref?: React.Ref<T> | undefined): React.JSX.Element;
    displayName: string;
};
type SpaceProps = FlexProps & StyleProps<"wrapper"> & {
    compact?: boolean;
    gap?: SizeOption;
};
export function Space({ children, compact, gap, className, classNames, style, styles, ...props }: React.PropsWithChildren<SpaceProps>): React.JSX.Element;
interface ThemeProviderValue {
    color?: Color;
    scaling?: SizeScale;
    grayVariant?: string;
    radius?: BorderRadius;
    buttonAppearance?: ButtonAppearanceSchemaType;
    avatarRadiusSize?: BorderRadius;
    inputAppearance?: InputAppearance;
}
interface ThemeProviderProps extends ThemeProviderValue {
    children?: React.ReactNode;
    className?: string;
}
type SizeScale = "90%" | "95%" | "100%" | "105%" | "110%";
export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
export function useTheme(options?: {
    requireThemeProvider: boolean;
}): ThemeProviderValue | null;
type FocusableElement = Element | HTMLOrSVGElement;
type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "label" | "input" | "description"> & {
    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> | React.DOMAttributes<FocusableElement>;
    descriptionProps?: React.DOMAttributes<FocusableElement>;
    errorMessageProps?: React.DOMAttributes<FocusableElement>;
    children?: React.ReactNode;
    replaceDefaultControlWrapper?: boolean;
};
type FieldComponentProps<S extends string> = Omit<FieldProps<S>, "labelProps" | "descriptionProps" | "errorMessageProps">;
type InputProps = {
    description?: React.ReactNode;
    label?: React.ReactNode;
    error?: React.ReactNode;
    append?: React.ReactNode;
    prepend?: React.ReactNode;
    validationStatus?: "error" | "success" | "warning";
    shape?: "rounded" | "sharp";
    inputRef?: React.RefObject<HTMLInputElement>;
    wrapperRef?: React.RefObject<HTMLDivElement>;
    appearance?: InputAppearance;
    size?: "xs" | "sm" | "md" | "lg" | "xl";
    color?: Color;
    radius?: BorderRadius;
    isDisabled?: boolean;
};
export declare namespace Field {
    var displayName: string;
}
type TextInputProps = AriaTextFieldProps & FieldComponentProps<"input">;
export function Input({ className, classNames, style, styles, onChange, inputRef, ...props }: TextInputProps): React.JSX.Element;
interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
}
export const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
type ButtonGroupProps = Pick<ButtonProps, "color" | "variant" | "size" | "radius" | "idleColor" | "idleVariant" | "activeColor" | "activeVariant" | "isToggle"> & StyleProps<"wrapper"> & {
    label?: string;
};
export function ButtonGroup({ color, variant, size, compact, radius, gap, children, idleColor, activeColor, idleVariant, activeVariant, isToggle, className, classNames, style, styles, }: ButtonGroupProps & React.ComponentProps<typeof Space>): React.JSX.Element;
interface ButtonToggleProps {
    isToggle?: boolean;
    idleColor?: Color;
    idleVariant?: ColorVariant;
    activeColor?: Color;
    activeVariant?: ColorVariant;
}
type ButtonProps = StyleProps<"wrapper" | "loader"> & AriaButtonProps<"button" | "div" | "a"> & ButtonToggleProps & {
    appearance?: ButtonAppearance;
    append?: React.ReactNode;
    as?: React.ElementType;
    color?: Color;
    defaultSelected?: boolean;
    form?: string;
    isIconButton?: boolean;
    isLoading?: boolean;
    isSelected?: boolean;
    prepend?: React.ReactNode;
    radius?: BorderRadius;
    role?: string;
    size?: ResponsiveProp<ButtonSize>;
    variant?: ColorVariant;
} & Pick<ToggleButtonProps, "onChange">;
export const Button: React.ForwardRefExoticComponent<StyleProps<"wrapper" | "loader"> & AriaButtonProps<"a" | "button" | "div"> & ButtonToggleProps & {
    appearance?: ButtonAppearance | undefined;
    append?: React.ReactNode;
    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
    color?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "grass" | "orange" | "brown" | "sky" | "mint" | "lime" | "yellow" | "amber" | "gold" | "bronze" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | undefined;
    defaultSelected?: boolean | undefined;
    form?: string | undefined;
    isIconButton?: boolean | undefined;
    isLoading?: boolean | undefined;
    isSelected?: boolean | undefined;
    prepend?: React.ReactNode;
    radius?: BorderRadius | undefined;
    role?: string | undefined;
    size?: ResponsiveProp<ButtonSize> | undefined;
    variant?: ColorVariant | undefined;
} & Pick<ToggleButtonProps, "onChange"> & React.RefAttributes<HTMLButtonElement>>;
interface IconButtonProps extends ButtonProps {
    isIcon?: boolean;
}
export const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
type NumberInputProps = AriaNumberFieldProps & FieldComponentProps<"input" | "decrement" | "increment"> & {
    showSteppers?: boolean;
    decrementIcon?: React.ReactNode;
    incrementIcon?: React.ReactNode;
};
export function NumberInput({ appearance, size, color, classNames, styles, append, prepend, placeholder, showSteppers, error, label, minValue, maxValue, formatOptions, inputRef, incrementIcon, decrementIcon, onChange, ...props }: NumberInputProps): React.JSX.Element;
interface TextareaProps extends AriaTextFieldOptions<"textarea">, FieldProps<"input"> {
    resize?: "none" | "both" | "horizontal" | "vertical";
    className?: string;
    style?: React.CSSProperties;
}
export const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLDivElement>>;
interface CheckboxGroupProps extends AriaCheckboxGroupProps, CheckboxVariantProps {
    children?: React.ReactNode;
}
export const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & FlexProps & React.RefAttributes<HTMLDivElement>>;
interface CheckboxVariantProps extends StyleProps<"wrapper" | "icon" | "checkbox"> {
    appearance?: "outline" | "filled";
    size?: "xs" | "sm" | "md" | "lg" | "xl";
    shape?: "sharp" | "round";
    color?: Color;
}
interface CheckboxProps extends AriaCheckboxProps, CheckboxVariantProps {
    className?: string;
}
export const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
interface CheckBoxItemProps extends AriaCheckboxGroupItemProps, StyleProps<"wrapper"> {
    className?: string;
}
export function CheckboxItem({ className, classNames, styles, style, ...props }: CheckBoxItemProps): React.JSX.Element;
interface DropdownProps extends MenuTriggerProps {
    something?: string;
}
declare function _DropdownMenu1({ children, ...props }: React.PropsWithChildren<DropdownProps>): React.JSX.Element;
interface DropdownTriggerProps extends StyleProps {
    asChild?: boolean;
    useClickEvent?: boolean;
}
declare function DropdownTrigger({ asChild, children, useClickEvent, }: React.PropsWithChildren<DropdownTriggerProps>): React.JSX.Element;
interface MenuProps<T> extends AriaMenuProps<T>, StyleProps {
    menuHeader?: React.ReactNode | (() => React.ReactNode);
    menuFooter?: React.ReactNode | (() => React.ReactNode);
    minWidth?: number | string;
    maxHeight?: number | string;
    maxWidth?: number | string;
    placement?: Placement;
    offset?: number;
    color?: Color;
}
declare function Menu<T extends object>({ placement, offset, ...props }: MenuProps<T>): React.JSX.Element | null;
interface MenuItemRenderProps {
    icon?: React.ReactNode;
    label?: React.ReactNode;
    description?: React.ReactNode;
    asChild?: boolean;
    className?: string;
    style?: React.CSSProperties;
    isReadOnly?: boolean;
    color?: Color;
    onAction?: () => void;
}
declare const MenuItem: <T>(props: ItemProps<T> & MenuItemRenderProps) => JSX.Element;
declare const MenuSection: <T>(props: SectionProps<T> & MenuItemRenderProps) => JSX.Element;
type DropdownMenuType = {
    Root: typeof _DropdownMenu1;
    Menu: typeof Menu;
    Trigger: typeof DropdownTrigger;
    Item: typeof MenuItem;
    Section: typeof MenuSection;
};
export const DropdownMenu: DropdownMenuType;
type CollectionItemProps<T> = ItemProps<T> & StyleProps<"wrapper" | "label" | "append" | "prepend" | "selectionIndicator" | "selectedMarker"> & ColorProps;
type CollectionSectionProps<T> = SectionProps<T> & StyleProps<"wrapper" | "heading" | "separator" | "items"> & ColorProps;
export const ListBoxItem: <T>(props: CollectionItemProps<T>) => JSX.Element;
export const ListBoxSection: <T>(props: CollectionSectionProps<T>) => JSX.Element;
interface ListBoxRenderProps<T> {
    children?: CollectionChildren<T>;
    labelKey?: keyof T | string;
    valueKey?: keyof T | string;
    sectionKey?: keyof T;
    state?: ListState<T>;
    color?: Color;
    width?: number | string;
    showSectionSeparator?: boolean;
    showSelectionIndicator?: boolean;
    renderOption?: (item: T) => React.ReactNode;
    renderSelectionIndicator?: (item: T) => React.ReactNode;
    renderSectionLabel?: (item: T) => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
}
interface ListBoxProps<T> extends AriaListBoxOptions<T>, ListBoxRenderProps<T>, StyleProps<"wrapper" | "label" | "section" | "option"> {
    listBoxRef?: React.RefObject<HTMLUListElement>;
}
export function ListBox<T extends object>({ state, color, width, listBoxRef, renderEmpty, classNames, className, style, styles, ...props }: ListBoxProps<T>): React.JSX.Element;
interface ComboBoxProps<T extends object> extends Omit<FieldProps<"input">, "children">, Omit<AriaComboBoxProps<T>, "children">, ListBoxRenderProps<T> {
    selectorIcon?: React.ReactNode;
    selectorSize?: ButtonSize;
    isLoading?: boolean;
    loadingIndicator?: React.ReactNode;
    loadData?: (filter?: string, signal?: AbortSignal) => Promise<T[]>;
}
export function ComboBox<T extends object>({ description, descriptionProps, error, errorMessageProps, label, labelProps, selectorIcon, selectorSize, style, styles, className, classNames, isLoading, loadData, loadingIndicator, ...props }: ComboBoxProps<T>): React.JSX.Element;
interface RadioProps extends AriaRadioProps {
    className?: string;
    style?: React.CSSProperties;
    size?: "xs" | "sm" | "md" | "lg";
    appearance?: InputAppearance;
    color?: Color;
}
export const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
interface RadioGroupProps extends AriaRadioGroupProps, FlexProps, StyleProps<"wrapper"> {
    children?: React.ReactNode;
}
export const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
interface RadioCardProps extends AriaRadioProps {
    title?: React.ReactNode;
    description?: React.ReactNode;
    children?: React.ReactNode;
    showIndicator?: boolean;
    appearance?: InputAppearance;
    color?: Color;
}
export const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLLabelElement>>;
interface RadioItemProps extends AriaRadioProps, StyleProps<"wrapper"> {
    children?: React.ReactNode;
}
export function RadioItem({ className, style, classNames, styles, ...props }: RadioItemProps): React.JSX.Element;
export const Tag: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
    prepend?: React.ReactNode;
    append?: React.ReactNode;
    hashValue?: string | undefined;
    color?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "grass" | "orange" | "brown" | "sky" | "mint" | "lime" | "yellow" | "amber" | "gold" | "bronze" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | undefined;
    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
    shape?: "rounded" | "sharp" | "pill" | undefined;
    radius?: BorderRadius | undefined;
    variant?: ColorVariant | undefined;
} & React.RefAttributes<HTMLDivElement>>;
type SingleOrMultipleValue = ID | Array<ID>;
interface MockNativeOnChangeEvent {
    target: {
        value: SingleOrMultipleValue;
        name?: string;
    };
}
type SelectProps<T> = ListBoxProps<T> & FieldProps<"trigger" | "listbox" | "label" | "popover" | "description" | "errorMessage" | "value" | "placeholder"> & {
    renderValue?: (value: T) => React.ReactNode;
    placeholder?: string;
    isDisabled?: boolean;
    name?: string;
    listBoxColor?: Color;
    value?: SingleOrMultipleValue;
    defaultValue?: SingleOrMultipleValue;
    onChange?(event: MockNativeOnChangeEvent): void;
    onSelectionChange?(keys: Array<Key>): void;
};
export function Select<T>({ label, selectionMode, appearance, renderValue, color, error, description, size, radius, listBoxColor, className, value, onChange, onSelectionChange, style, classNames, styles, showSectionSeparator, showSelectionIndicator, ...props }: SelectProps<T>): React.JSX.Element;
interface CalendarProps extends AriaCalendarProps<DateValue> {
    numberOfMonths?: number;
    color?: Color;
}
export const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
interface DateInputProps extends Omit<AriaDatePickerProps<_DateValue1>, "value" | "onChange" | "defaultValue">, FieldProps<"input"> {
    numberOfMonths?: number;
    value?: string;
    defaultValue?: string;
    onChange?(value: string | null, dateObject?: _DateValue1 | null): void;
    dropdownIcon?: React.ReactNode;
}
export const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLDivElement>>;
type AvatarSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
type AvatarShape = "circle" | "square";
interface AvatarProps extends React.ComponentProps<"div">, StyleProps<"base" | "fallback" | "img"> {
    src?: string;
    alt?: string;
    name?: string;
    fallback?: React.ReactNode;
    radius?: BorderRadius;
    color?: Color;
    variant?: ColorVariant;
    size?: AvatarSize;
    initialsLength?: number;
    /**@deprecated use radius instead */
    shape?: AvatarShape;
}
export const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
type Upload = {
    name: string;
    url: string;
    id: string;
    file?: File;
    status?: ActionStatus;
    progress?: number;
};
interface FileUploaderProps {
    onFileUpload?: (files: Array<Upload>) => void;
    onRemoveFile?: () => void;
    onStatusChange?: (status: ActionStatus) => void;
    error?: React.ReactNode;
    label?: React.ReactNode;
    allowMultiple?: boolean;
    uploads?: Array<Upload>;
    hideFileList?: boolean;
    color?: Color;
}
export const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<HTMLDivElement>>;
interface SeparatorProps extends React.ComponentPropsWithoutRef<"div"> {
    orientation?: "horizontal" | "vertical";
    color?: Color;
    opacity?: "faint" | "medium" | "strong";
}
export const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
interface ProgressProps extends AriaProgressBarProps, React.ComponentPropsWithoutRef<"div"> {
    height?: number;
    color?: Color;
}
export const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
interface Props extends AriaSwitchProps {
    color?: Color;
    variant?: ColorVariant;
    size?: "sm" | "md" | "lg";
    className?: string;
}
export const Switch: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
type SliderProps = {
    name?: string;
    size?: SizeOption;
    color?: Color;
} & StyleProps<"wrapper" | "track" | "fill" | "thumb" | "innerThumb" | "label"> & AriaSliderProps;
export function Slider({ className, classNames, style, styles, name, size, color, orientation, ...props }: SliderProps): React.JSX.Element;
export function IconTray(props: any): React.JSX.Element;
interface StickerProps extends FlexProps {
    padded?: boolean;
    color?: Color;
    variant?: ColorVariant;
    radius?: BorderRadius;
}
export const Sticker: React.ForwardRefExoticComponent<StickerProps & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
interface TabsProps extends AriaTabListProps<any>, StyleProps {
    orientation?: "horizontal" | "vertical";
}
export function Tabs({ className, style, ...props }: TabsProps): React.JSX.Element;
export const Tab: <T>(props: ItemProps<T>) => React.JSX.Element;
export function Table(): React.JSX.Element;
interface TimelineProps<T> {
    items: Array<T>;
    render?(item: T): React.ReactNode;
    labelKey?: keyof T;
    getIndicator?(item: T): React.ReactNode;
    hideLastItemTail?: boolean;
}
export function Timeline<T>({ items, render, labelKey, getIndicator, hideLastItemTail, }: TimelineProps<T>): React.JSX.Element;
export interface ModalProps extends AriaModalOverlayProps, StyleProps<"wrapper" | "underlay" | "content" | "header" | "body" | "footer" | "title"> {
    hideTitle?: boolean;
    state?: OverlayTriggerState;
    children?: React.ReactNode;
    title?: React.ReactNode;
    description?: React.ReactNode;
    onConfirm?(): void;
    onCancel?(): void;
    confirmLabel?: string;
    cancelLabel?: string;
    confirmButtonProps?: React.ComponentProps<typeof Button>;
    cancelButtonProps?: React.ComponentProps<typeof Button>;
    width?: number | string;
    variant?: "modal" | "drawer";
    showCloseButton?: boolean;
    onOpenChange?(open: boolean): void;
    onClose?(): void;
    isOpen?: boolean;
    defaultOpen?: boolean;
}
export function Modal({ isOpen, defaultOpen, onOpenChange, ...props }: Omit<ModalProps, "state">): React.JSX.Element;
export declare namespace Modal {
    var useModal: $$parcel$import$7;
}
export function useModal(props?: OverlayTriggerProps): OverlayTriggerState;
interface TagField extends FieldProps<"input"> {
    tags?: Array<string>;
    defaultTags?: Array<string>;
    placeholder?: string;
    onInputValueChange?(value: string): void;
    onChange?(tags: Array<string>): void;
    tagVariant?: React.ComponentProps<typeof Tag>["variant"];
    tagColor?: React.ComponentProps<typeof Tag>["color"];
    tagShape?: React.ComponentProps<typeof Tag>["shape"];
    tagSize?: React.ComponentProps<typeof Tag>["size"];
    renderTag?(value: string, onRemove: (value: string) => void): React.ReactNode;
}
export function TagInput({ appearance, size, label, error, placeholder, tags, defaultTags, tagColor, tagVariant, tagShape, tagSize, color, onChange, renderTag, radius, }: TagField): React.JSX.Element;
interface PopoverProps extends OverlayTriggerProps {
    children?: React.ReactNode;
    useNativeClickHandler?: boolean;
}
export function Popover({ children, useNativeClickHandler, ...props }: PopoverProps): React.JSX.Element;
interface PopoverTriggerProps {
    children: React.ReactElement;
}
export function PopoverTrigger({ children }: PopoverTriggerProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
interface PopoverContentProps extends StyleProps, Omit<AriaPopoverProps, "triggerRef" | "popoverRef"> {
    width?: number;
}
export function PopoverContent({ children, offset, placement, style, className, ...props }: React.PropsWithChildren<PopoverContentProps>): React.JSX.Element | null;
interface TagVariantProps {
    activeColor?: Color;
    activeVariant?: ColorVariant;
    idleColor?: Color;
    idleVariant?: ColorVariant;
    autoColor?: boolean;
}
interface TagGroupProps<T> extends AriaTagGroupProps<T>, FlexProps, TagVariantProps {
}
export function TagGroup<T extends object>({ wrap, gap, columnGap, rowGap, align, justify, activeColor, activeVariant, idleColor, idleVariant, autoColor, ...props }: TagGroupProps<T>): React.JSX.Element;
export const TagGroupItem: <T>(props: ItemProps<T>) => React.JSX.Element;
type ColorPickerProps = StyleProps<"wrapper" | "area" | "swatch" | "hue" | "alpha"> & {
    onChange?: (color: _Color1) => void;
    color?: _Color1;
};
export function ColorPicker({ onChange, color: colorProp, styles, classNames, className, style, }: ColorPickerProps): React.JSX.Element;
type ColorAreaProps = _ColorAreaProps1 & StyleProps<"wrapper" | "thumb"> & {
    size?: SizeOption;
    radius?: BorderRadius;
};
export function ColorArea({ className, classNames, style, styles, radius, ...props }: ColorAreaProps): React.JSX.Element;
type ColorFieldProps = AriaColorFieldProps & FieldComponentProps<"input">;
export function ColorField({ label, description, className, classNames, style, styles, ...props }: ColorFieldProps): React.JSX.Element;
interface ColorOption {
    key: string;
    color: string;
    label?: string;
}
type ColorSwatchPickerProps<T> = FlexProps & ListProps<T> & StyleProps<"wrapper" | "swatch"> & {
    colors: Array<ColorOption>;
    onChange?: (color: _Color1) => void;
    size?: SizeOption;
    radius?: BorderRadius;
};
export function ColorSwatchPicker({ colors, items, children, radius, size, onChange, selectionMode, className, classNames, style, styles, ...props }: ColorSwatchPickerProps<ColorOption>): React.JSX.Element;
type ColorSliderProps = Omit<AriaColorSliderOptions, "trackRef" | "inputRef">;
export function ColorSlider({ label, ...props }: ColorSliderProps): React.JSX.Element;
export function parseColor(color: string): _Color2;
type Mode = "single" | "multiple";
type ValueType<M> = M extends "single" ? string : string[];
type CFGroupProps<P> = Omit<P, "onChange" | "value" | "defaultValue" | "validate">;
type CFUnion = CFGroupProps<_RadioGroupProps1> | CFGroupProps<_CheckboxGroupProps1>;
type GroupProps<T> = StyleProps<"wrapper"> & ButtonToggleProps & T & {
    children?: React.ReactNode;
    radius?: BorderRadius;
    size?: ButtonSize;
};
type ToggleGroupProps<M extends Mode> = GroupProps<CFUnion> & {
    mode?: M;
} & React.ComponentProps<typeof Space>;
type ValueProps<M extends Mode> = {
    value?: ValueType<M>;
    defaultValue?: ValueType<M>;
    onChange?: (value: ValueType<M>) => void;
    validate?: (value: ValueType<M>) => void;
};
export function ToggleGroup<M extends Mode = "single">({ children, mode, value, defaultValue, onChange, validate, styles, classNames, className, style, ...props }: ToggleGroupProps<M> & ValueProps<M>): React.JSX.Element;
type ToggleProps = StyleProps<"wrapper"> & ButtonToggleProps & {
    value: string;
    children: React.ReactNode;
    color?: Color;
    variant?: ColorVariant;
    size?: SizeOption;
    radius?: BorderRadius;
    isIconButton?: boolean;
};
export function Toggle({ ...props }: ToggleProps): React.JSX.Element;

//# sourceMappingURL=types.d.ts.map