@vtex/admin-ui/dist/vtex-admin-ui.cjs.d.ts

> VTEX admin component library

/// <reference types="react" />
import * as _vtex_admin_ui_core from '@vtex/admin-ui-core';
import { CSSPropAutocomplete, SpaceTokens } from '@vtex/admin-ui-core';
export * from '@vtex/admin-ui-core';
export * from '@vtex/admin-ui-hooks';
import { WithRequiredProps, AnyObject } from '@vtex/admin-ui-util';
export * from '@vtex/admin-ui-util';
import * as React$1 from 'react';
import React__default, { Dispatch, SetStateAction, ComponentPropsWithoutRef, ReactNode, PropsWithChildren, ChangeEventHandler, HTMLAttributeAnchorTarget, RefObject, FunctionComponentElement, ComponentPropsWithRef, HTMLAttributes, Ref } from 'react';
import { ValueBase } from '@react-types/shared';
import { PopoverInitialState } from 'reakit/Popover';
export { I18nProvider as experimental_I18nProvider, useDateFormatter as experimental_useDateFormatter } from '@react-aria/i18n';
import { ComboboxStateProps as ComboboxStateProps$1, ComboboxState as ComboboxState$1 } from 'ariakit/combobox';
import { GetTogglePropsInput, GetTogglePropsOutput, GetCollapsePropsInput, GetCollapsePropsOutput } from 'react-collapsed/dist/types';
export { IconActivity, IconAlarm, IconArchive, IconArrowCircleUpRight, IconArrowCounterClockwise, IconArrowDown, IconArrowLeft, IconArrowLineDown, IconArrowLineUp, IconArrowRight, IconArrowSquareOut, IconArrowSquareUpRight, IconArrowUUpLeft, IconArrowUp, IconArrowUpRight, IconArrowsClockwise, IconBarcode, IconBell, IconCalendarBlank, IconCaretDown, IconCaretLeft, IconCaretRight, IconCaretUp, IconChartBar, IconChartLineUp, IconChatText, IconCheck, IconCheckCircle, IconCirclesThreePlus, IconClock, IconCloudArrowUp, IconCode, IconCopySimple, IconCornersOut, IconCreditCard, IconCube, IconCurrencyCircleDollar, IconDotsSixVertical, IconDotsThreeVertical, IconEnvelope, IconEye, IconEyeSlash, IconFaders, IconFileText, IconFlag, IconFolder, IconGear, IconGearSix, IconGift, IconGlobeHemisphereWest, IconHandbagSimple, IconHeadset, IconHeart, IconHouse, IconIdentificationCard, IconImageSquare, IconKey, IconLayout, IconLink, IconLinkBreak, IconList, IconListDashes, IconListNumbers, IconLockKey, IconLockKeyOpen, IconMagnifyingGlass, IconMagnifyingGlassPlus, IconMapPin, IconMegaphone, IconMinus, IconNotebook, IconPackage, IconPaperPlaneTilt, IconPaperclip, IconPencil, IconPlus, IconPrinter, IconProps, IconQuestion, IconReceipt, IconRocketLaunch, IconRows, IconShareNetwork, IconShoppingCartSimple, IconSignOut, IconSquaresFour, IconStack, IconStorefront, IconTag, IconTextAlignCenter, IconTextAlignLeft, IconTextAlignRight, IconTextBolder, IconTextItalic, IconTextUnderline, IconTicket, IconTrash, IconTreeStructure, IconTruck, IconUser, IconUsers, IconWarning, IconWarningCircle, IconX, IconXCircle, IconXOctagon } from '@vtex/phosphor-icons';
import * as CSS from 'csstype';
import { RadioState } from 'ariakit/radio';
export { RadioState, useRadioState } from 'ariakit/radio';
import { CheckboxState as CheckboxState$1, Checkbox as Checkbox$1 } from 'ariakit/checkbox';
export { useCheckboxState as useSwitchState } from 'ariakit/checkbox';
import { MenuStateProps, MenuState } from 'ariakit/menu';
export { MenuState } from 'ariakit/menu';
import { TooltipStateProps } from 'ariakit/Tooltip';
import { TabState, MenuState as MenuState$1, Dialog } from 'ariakit';
export { HeadingLevel, TabState, VisuallyHidden, useDialogState as useModalState, useTabState } from 'ariakit';
import { UseSelectReturnValue } from 'downshift';
export { UseSelectReturnValue as UseDropdownReturnValue, useSelect as useDropdownState } from 'downshift';
import { ToolbarStateReturn } from 'reakit/Toolbar';
export { ToolbarStateReturn as ToolbarState, useToolbarState } from 'reakit/Toolbar';
export { isChrome, isEdge, isFirefox, isMobile, isSafari } from 'react-device-detect';

interface DateObject {
    year: number;
    month: number;
    day: number;
}

type IconSize = 'regular' | 'small';
declare module '@vtex/phosphor-icons' {
    interface IconOptions {
        title?: string;
        size?: IconSize;
        className?: string;
    }
}
interface InputState {
    /** Whether the input is disabled. */
    isDisabled?: boolean;
    /** Whether the input can be selected but not changed by the user. */
    isReadOnly?: boolean;
}

interface CalendarState {
    minDateValue: Date;
    maxDateValue: Date;
    /**
     * Id for the Calendar Header
     */
    calendarId: string | undefined;
    /**
     * Selected Date value
     */
    dateValue: Date;
    /**
     * Month of the current date value
     */
    month: number;
    /**
     * Year of the current date value
     */
    year: number;
    /**
     * Start of the week for the current date value
     */
    weekStart: number;
    /**
     * Generated week days for CalendarWeekTitle based on weekStart
     */
    weekDays: Array<{
        title: string;
        abbr: string;
    }>;
    /**
     * Generated days in the current month
     */
    daysInMonth: Date[][];
    /**
     * `true` if the calendar is disabled
     */
    isDisabled: boolean;
    /**
     * `true` if the calendar is focused
     */
    isFocused: boolean;
    /**
     * `true` if the calendar is only readonly
     */
    isReadOnly: boolean;
    /**
     * Month of the current Date
     */
    currentMonth: Date;
    /**
     * Date value that is currently focused
     */
    focusedDate: Date;
    /**
     * Informs if the given date is within the min & max date.
     */
    isInvalidDateRange: (value: Date) => boolean;
}
interface CalendarActions {
    /**
     * Sets `isFocused`
     */
    setFocused: Dispatch<SetStateAction<boolean>>;
    /**
     * Sets `currentMonth`
     */
    setCurrentMonth: Dispatch<SetStateAction<Date>>;
    /**
     *  Sets `focusedDate`
     */
    setFocusedDate: Dispatch<SetStateAction<Date>>;
    /**
     * Sets `dateValue`
     */
    setDateValue: (value: Date) => void;
    /**
     * Focus the cell of the specified date
     */
    focusCell: (value: Date) => void;
    /**
     * Focus the cell next to the current date
     */
    focusNextDay: () => void;
    /**
     * Focus the cell prev to the current date
     */
    focusPreviousDay: () => void;
    /**
     * Focus the cell one week next to the current date
     */
    focusNextWeek: () => void;
    /**
     * Focus the cell one week prev to the current date
     */
    focusPreviousWeek: () => void;
    /**
     * Focus the cell one month next to the current date
     */
    focusNextMonth: () => void;
    /**
     * Focus the cell one month prev to the current date
     */
    focusPreviousMonth: () => void;
    /**
     * Focus the cell of the first day of the month
     */
    focusStartOfMonth: () => void;
    /**
     * Focus the cell of the last day of the month
     */
    focusEndOfMonth: () => void;
    /**
     * Focus the cell of the date one year from the current date
     */
    focusNextYear: () => void;
    /**
     * Focus the cell of the date one year before the current date
     */
    focusPreviousYear: () => void;
    /**
     * Selects the `focusedDate`
     */
    selectFocusedDate: () => void;
    /**
     * sets `dateValue`
     */
    selectDate: (value: Date) => void;
}
interface RangeValueMinMax {
    /** The lowest date allowed. */
    minValue?: DateObject;
    /** The highest date allowed. */
    maxValue?: DateObject;
}
interface CalendarInitialState extends RangeValueMinMax, InputState {
    /** Id for the calendar grid */
    id?: string;
    /** The current date (controlled). */
    value?: DateObject;
    /** The default date (uncontrolled). */
    defaultValue?: DateObject;
    /** Handler that is called when the date changes. */
    onChange?: (value: DateObject) => void;
    /** Whether the element should receive focus on render. */
    autoFocus?: boolean;
}
type CalendarStateReturn = CalendarState & CalendarActions;

interface PickerState {
    pickerId?: string;
    popoverId?: string;
    /**
     * Function to be called on picker mousedown
     * for focusing first tabbable element
     */
    segmentFocus?: () => void;
}
type PickerInitialState = PopoverInitialState & InputState & PickerState;

interface ControllableState<T> {
    /**
     * value for uncontrolled mode
     */
    defaultValue?: T;
    /**
     * value for controlled mode
     */
    value?: T;
    /**
     * onChange for controlled mode
     */
    onChange?: (value: T, ...args: any[]) => void;
}
interface SegmentInitialState extends ControllableState<Date> {
    /**
     * Sets formmating of date based on Intl.DateFormatOptions
     *
     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
     *
     * @example
     * {
     *   year: "numeric",
     *   month: "2-digit",
     *   day: "2-digit",
     *   weekday: "long",
     * }
     */
    formatOptions?: Intl.DateTimeFormatOptions;
    placeholder?: {
        year: string;
        month: string;
        day: string;
    };
}

type DatePickerInitialState = ValueBase<string> & {} & PickerInitialState & Pick<Partial<SegmentInitialState>, 'formatOptions' | 'placeholder'> & Pick<CalendarInitialState, 'minValue' | 'maxValue' | 'defaultValue'> & {
    /**
     * Whether should receive focus on render
     * @default false
     */
    autoFocus?: boolean;
    /**
     * Whether is invalid
     * @default false
     */
    tone?: 'neutral' | 'critical';
    /**
     * Whether is required
     * @default false
     */
    required?: boolean;
    /**
     * Whether is disabled
     * @default false
     */
    disabled?: boolean;
};
declare function useDatePickerState(props?: DatePickerInitialState): {
    dateValue: DateObject;
    setDateValue: React$1.Dispatch<React$1.SetStateAction<DateObject>>;
    selectDate: (newValue: DateObject) => void;
    required: boolean;
    disabled: boolean;
    calendarState: CalendarStateReturn;
    tone: "critical" | "neutral";
    pickerState: {
        baseId: string;
        unstable_idCountRef: React$1.MutableRefObject<number>;
        visible: boolean;
        animated: number | boolean;
        animating: boolean;
        setBaseId: React$1.Dispatch<React$1.SetStateAction<string>>;
        show: () => void;
        hide: () => void;
        toggle: () => void;
        setVisible: React$1.Dispatch<React$1.SetStateAction<boolean>>;
        setAnimated: React$1.Dispatch<React$1.SetStateAction<number | boolean>>;
        stopAnimation: () => void;
        modal: boolean;
        unstable_disclosureRef: React$1.MutableRefObject<HTMLElement | null>;
        setModal: React$1.Dispatch<React$1.SetStateAction<boolean>>;
        unstable_referenceRef: React$1.RefObject<HTMLElement | null>;
        unstable_popoverRef: React$1.RefObject<HTMLElement | null>;
        unstable_arrowRef: React$1.RefObject<HTMLElement | null>;
        unstable_popoverStyles: React$1.CSSProperties;
        unstable_arrowStyles: React$1.CSSProperties;
        unstable_originalPlacement: "auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start";
        unstable_update: () => boolean;
        placement: "auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start";
        place: React$1.Dispatch<React$1.SetStateAction<"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start">>;
        pickerId: string | undefined;
        popoverId: string | undefined;
        isDisabled: boolean | undefined;
        isReadOnly: boolean | undefined;
        segmentFocus: (() => void) | undefined;
    };
    dateFieldState: any;
};
type DatePickerStateReturn = ReturnType<typeof useDatePickerState>;

declare const DatePickerCalendar: React__default.ForwardRefExoticComponent<DatePickerCalendarProps & React__default.RefAttributes<HTMLDivElement>>;
interface DatePickerCalendarProps extends ComponentPropsWithoutRef<'div'> {
    state: DatePickerStateReturn;
}

declare const DatePickerField: React__default.ForwardRefExoticComponent<DatePickerFieldProps & React__default.RefAttributes<HTMLDivElement>>;
interface DatePickerFieldProps extends ComponentPropsWithoutRef<'div'> {
    state: DatePickerStateReturn;
    label: string;
    helperText?: string;
    criticalText?: string;
}

declare function useComboboxState<T>(props?: ComboboxStateProps<T>): ComboboxState<T>;
type ComboboxStatus = 'ready' | 'loading' | 'not-found' | 'empty' | 'error';
type ComboboxStateProps<T> = Pick<ComboboxStateProps$1, 'virtualFocus'> & {
    /** Initial list of values that will be filtered on search, should be set unless the input will be controlled */
    list?: T[];
    /** Function for transforming item shape into a string value, no need to use it on string[] lists */
    getOptionValue?: (item: T) => string;
    /** Function for transforming item shape into renderable node, no need to use it on string[] lists */
    renderOption?: (item: T) => ReactNode;
    /** Debounce interval */
    timeoutMs?: number;
};
type ComboboxState<T> = Omit<ComboboxState$1, 'matches'> & {
    /** Debounced value. */
    deferredValue: string;
    /** Sets component state to error */
    setError: Dispatch<SetStateAction<boolean>>;
    /** Sets component state to loading */
    setLoading: Dispatch<SetStateAction<boolean>>;
    /** Component status */
    status: ComboboxStatus;
    /** Sets component status */
    setStatus: Dispatch<SetStateAction<ComboboxStatus | undefined>>;
    /** Function that gets text value from the items in matches or list */
    getOptionValue: (item: T) => string;
    /** Function that render items from matches or list */
    renderOption: (item: T) => ReactNode;
    /** Array of options that matched with the input value */
    matches: T[];
    /** Setter for array of options that matched with the input value */
    setMatches: (arg: T[]) => void;
    /** Full value of current selected item */
    selectedItem: T | undefined;
    /** Setter for current selected item */
    setSelectedItem: (arg?: T) => void;
};

declare const ComboboxField: React__default.ForwardRefExoticComponent<ComboboxFieldProps & React__default.RefAttributes<HTMLDivElement>>;
interface ComboboxFieldProps extends ComponentPropsWithoutRef<'div'> {
    id: string;
    state: ComboboxState<any>;
    label: string;
}

declare const ComboboxPopover: React__default.ForwardRefExoticComponent<ComboboxPopoverProps & React__default.RefAttributes<HTMLDivElement>>;
interface ComboboxPopoverProps extends ComponentPropsWithoutRef<'div'> {
    state: ComboboxState<any>;
    onRetry?: () => void;
}

declare const ComboboxMultiplePopover: React__default.ForwardRefExoticComponent<ComboboxMultiplePopoverProps & React__default.RefAttributes<HTMLDivElement>>;
interface ComboboxMultiplePopoverProps extends ComponentPropsWithoutRef<'div'> {
    state: ComboboxMultipleState<any>;
    onRetry?: () => void;
}

declare function useComboboxMultipleState<T>(props?: ComboboxMultipleStateProps<T>): ComboboxMultipleState<T>;
interface ComboboxMultipleStateProps<T> extends ComboboxStateProps<T> {
    compare?: (itemA: T, itemB: T) => boolean;
    defaultSelected?: T[];
    renderTag?: (item: T) => ReactNode;
    shouldClearOnSelect?: boolean;
}
interface ComboboxMultipleState<T> extends ComboboxState<T> {
    renderTag: (item: T) => ReactNode;
    selectedItems: T[];
    setSelectedItems: Dispatch<SetStateAction<T[]>>;
    clearSelected: () => void;
    select: (item: T) => void;
    unselect: (item: T) => void;
    onChange: (item: T) => void;
    isSelected: (item: T) => boolean;
}

interface ComboboxMultipleFieldProps extends ComponentPropsWithoutRef<'div'> {
    state: ComboboxMultipleState<any>;
    label: string;
    id: string;
    value?: any;
    list?: any;
}
declare const ComboboxMultipleField: React__default.ForwardRefExoticComponent<ComboboxMultipleFieldProps & React__default.RefAttributes<HTMLDivElement>>;

interface ThemeProviderProps {
    children?: ReactNode;
    experimentalTheme?: any;
    experimentalDisabledGlobalStyles?: boolean;
}
declare function ThemeProvider(props: ThemeProviderProps): React__default.JSX.Element;

declare const useCollapse: (props?: UseCollapsibleParams) => CollapsibleState;
interface UseCollapsibleParams {
    onCollapseStart?: () => void;
    onCollapseEnd?: () => void;
    onExpandStart?: () => void;
    onExpandEnd?: () => void;
    /** Weather the content is visible at first or not */
    visible?: boolean;
}
interface CollapsibleState {
    getToggleProps: (config?: GetTogglePropsInput) => GetTogglePropsOutput;
    getCollapseProps: (config?: GetCollapsePropsInput) => GetCollapsePropsOutput;
    /** Is true if content is currently visible */
    visible: boolean;
    /** Toggle collapsible expansion */
    toggle: () => void;
}

/**
 * React hook that tracks state of a CSS media query
 */
declare function useBreakpoint(): {
    breakpoint: Breakpoint;
    matches: boolean[];
};
/**
 * Get the responsive value for the responsive prop
 * @param prop the responsive prop
 * @param breakpoint desired breakpoint
 * @example
 * const { prop } = props
 * const { breakpoint } = useBreakpoint()
 * const responsiveProp = getResponsiveValue(prop, breakpoint)
 */
declare function getResponsiveValue<T>(prop: ResponsiveProp<T>, breakpoint: Breakpoint, index?: number): T;
type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'widescreen';
type ResponsiveValue<T> = {
    mobile: T;
    tablet?: T;
    desktop?: T;
    widescreen?: T;
};
type ResponsiveProp<T> = T | ResponsiveValue<T>;

/**
 * React hook that tracks state of a CSS media query
 *
 * @param query the media query to match
 */
declare function useMediaQuery(query: string | string[]): boolean[];

declare const IconProvider: (iconProps: {
    children?: React__default.ReactNode;
}) => JSX.Element;
declare const IconContainerContext: React__default.Context<IconContext>;
declare function IconContainer(props: PropsWithChildren<IconContext>): React__default.JSX.Element;
declare function useIconContainer(): UseIconReturn;
type AvailableSize = 'regular' | 'small';
interface IconContext {
    size: AvailableSize;
    className?: string;
}
type UseIconReturn = {
    size: AvailableSize;
    isSmall: boolean;
    isRegular: boolean;
    className?: string;
};

/**
 * Layout that aligns its children on the center
 * @example
 * import { Center } from `@vtex/admin-ui`
 * <Center>Centralized content</Center>
 */
declare const Center: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
type CenterProps = ComponentPropsWithoutRef<'div'>;

declare const Inline: React__default.ForwardRefExoticComponent<InlineProps & React__default.RefAttributes<HTMLDivElement>>;
interface InlineProps extends ComponentPropsWithoutRef<'div'> {
    /**
     * Vertical space
     * @default '$space-05'
     */
    vSpace?: CSSPropAutocomplete<SpaceTokens>;
    /**
     * Horizontal space
     * @default '$space-1'
     */
    hSpace?: CSSPropAutocomplete<SpaceTokens>;
    /**
     * Disable wrap
     * @default false
     */
    noWrap?: boolean;
    /**
     * Items vertical alignment
     * @default 'start'
     */
    align?: CSS.Properties['alignItems'];
    /**
     * Don't space the container
     * @default false
     */
    spaceInside?: boolean;
}

interface BleedThemeValues {
    /**
     * Top bleed
     * @default 0
     */
    top?: CSSPropAutocomplete<SpaceTokens>;
    /**
     * Bottom bleed
     * @default 0
     */
    bottom?: CSSPropAutocomplete<SpaceTokens>;
    /**
     * Left bleed
     * @default 0
     */
    left?: CSSPropAutocomplete<SpaceTokens>;
    /**
     * Right bleed
     * @default 0
     */
    right?: CSSPropAutocomplete<SpaceTokens>;
}

declare const Bleed: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & BleedThemeValues & React__default.RefAttributes<HTMLDivElement>>;
type BleedProps = ComponentPropsWithoutRef<'div'> & BleedThemeValues;

/**
 * Button component
 * @example
 * import { Button } from `@vtex/admin-ui`
 * <Button>Button text</Button>
 */
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
type ButtonSize = 'normal' | 'large';
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical' | 'criticalSecondary' | 'criticalTertiary' | 'neutralTertiary';
interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
    /**
     *  Whether is loading
     * @default false
     */
    loading?: boolean;
    /**
     * Icon of the button
     */
    icon?: ReactNode;
    /**
     * Position of the icon
     * @default start
     */
    iconPosition?: 'start' | 'end';
    /**
     * Vertical bleed
     */
    bleedY?: boolean;
    /**
     * Horizontal bleed
     */
    bleedX?: boolean;
    size?: ButtonSize;
    variant?: ButtonVariant;
}

/**
 * Component used to display a set of components that are spaced evenly.
 * @example
 * <Stack space="$space-3">
 *  <Button />
 *  <Button />
 * </Stack>
 */
declare const Stack: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * direction of items
     * @default column
     */
    direction?: ResponsiveProp<"row" | "column"> | undefined;
    /**
     * if the items should grow in width to match the container
     * @default false
     */
    fluid?: ResponsiveProp<boolean> | undefined;
    /**
     * space between items
     * @default 0
     */
    space?: ResponsiveProp<CSSPropAutocomplete<"$space-0" | "$space-05" | "$space-1" | "$space-2" | "$space-3" | "$space-4" | "$space-5" | "$space-6" | "$space-7" | "$space-8" | "$space-10" | "$space-12" | "$space-16" | "$space-20" | "$space-24" | "$space-28" | "$space-32">> | undefined;
    /**
     * items alignment
     * @default start
     */
    align?: ResponsiveProp<"end" | "start"> | undefined;
} & React__default.RefAttributes<HTMLDivElement>>;
type StackProps = ComponentPropsWithoutRef<'div'> & {
    /**
     * direction of items
     * @default column
     */
    direction?: ResponsiveProp<'column' | 'row'>;
    /**
     * if the items should grow in width to match the container
     * @default false
     */
    fluid?: ResponsiveProp<boolean>;
    /**
     * space between items
     * @default 0
     */
    space?: ResponsiveProp<CSSPropAutocomplete<SpaceTokens>>;
    /**
     * items alignment
     * @default start
     */
    align?: ResponsiveProp<'start' | 'end'>;
};

declare const RadioButton: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value"> & {
    /** Radio value */
    value: string | number;
} & React__default.RefAttributes<HTMLInputElement>>;
type RadioButtonProps = Omit<React__default.ComponentPropsWithoutRef<'input'>, 'value'> & {
    /** Radio value */
    value: string | number;
};

declare const Radio: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value"> & {
    value: string | number;
} & {
    /**
     * Radio label
     */
    label: ReactNode;
    /**
     * Helper text
     */
    helpText?: ReactNode;
} & React__default.RefAttributes<HTMLInputElement>>;
type RadioProps = RadioButtonProps & {
    /**
     * Radio label
     */
    label: ReactNode;
    /**
     * Helper text
     */
    helpText?: ReactNode;
};

declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * useRadioState hook return
     */
    state: RadioState;
    /**
     * RadioGroup label
     */
    label: ReactNode;
    /**
     * Whether is a error field or not
     * @default false
     */
    error?: boolean | undefined;
    /**
     * RadioGroup children direction
     * @default row
     */
    direction?: "row" | "column" | undefined;
    /**
     * RadioGroup helper text
     */
    helpText?: ReactNode;
    /**
     * RadioGroup error text. It appears when error property is set to true.
     */
    errorText?: ReactNode;
    /**
     * Whether the field is optional or not
     */
    optional?: boolean | undefined;
} & React__default.RefAttributes<HTMLDivElement>>;
type RadioGroupProps = React__default.ComponentPropsWithoutRef<'div'> & {
    /**
     * useRadioState hook return
     */
    state: RadioState;
    /**
     * RadioGroup label
     */
    label: ReactNode;
    /**
     * Whether is a error field or not
     * @default false
     */
    error?: boolean;
    /**
     * RadioGroup children direction
     * @default row
     */
    direction?: 'row' | 'column';
    /**
     * RadioGroup helper text
     */
    helpText?: ReactNode;
    /**
     * RadioGroup error text. It appears when error property is set to true.
     */
    errorText?: ReactNode;
    /**
     * Whether the field is optional or not
     */
    optional?: boolean;
};

type SwitchButtonProps = Omit<ComponentPropsWithoutRef<'input'>, 'value'> & {
    state: CheckboxState$1;
    value?: string | number;
};

declare const Switch: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value"> & {
    state: CheckboxState$1<string | number | boolean | (string | number)[]>;
    value?: string | number | undefined;
} & {
    label: ReactNode;
    helpText?: ReactNode;
    errorText?: ReactNode;
    error?: boolean | undefined;
} & React__default.RefAttributes<HTMLInputElement>>;
type SwitchProps = SwitchButtonProps & {
    label: ReactNode;
    helpText?: ReactNode;
    errorText?: ReactNode;
    error?: boolean;
};
type SwitchState = CheckboxState$1;

declare const CheckboxInput: React__default.ForwardRefExoticComponent<Omit<CheckboxInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
type CheckboxInputProps = React__default.ComponentPropsWithRef<typeof Checkbox$1> & {
    /**
     * Whether has a error or not
     * @default false
     */
    error?: boolean;
    /**
     * Checkbox id
     */
    id?: string;
};

declare function useCheckboxState(state?: CheckboxStateProps): {
    value: boolean | any[] | "indeterminate";
    setValue: React$1.Dispatch<React$1.SetStateAction<boolean | any[] | "indeterminate">>;
};
type CheckboxState = boolean | 'indeterminate' | any[];
type CheckboxStateProps = {
    initialValue?: CheckboxState;
};
type CheckboxStateReturn = {
    value: CheckboxState;
    setValue: React.Dispatch<React.SetStateAction<CheckboxState>>;
};

declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
type CheckboxProps = CheckboxInputProps & {
    /**
     * Checkbox error text. It appears when error property is set to true.
     */
    errorText?: ReactNode;
    /**
     * Helper text
     */
    helpText?: ReactNode;
    /**
    /**
     * Checkbox label
     */
    label?: ReactNode;
};

declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * CheckboxGroup children direction
     * @default row
     */
    direction?: "row" | "column" | undefined;
    /**
     * Whether is a error field or not
     * @default false
     */
    error?: boolean | undefined;
    /**
     * CheckboxGroup error text. It appears when error property is set to true.
     */
    errorText?: ReactNode;
    /**
     * CheckboxGroup helper text
     */
    helpText?: ReactNode;
    /**
     * Whether is a optional field or not
     */
    optional?: boolean | undefined;
    /**
     * CheckboxGroup label
     */
    label: ReactNode;
} & React__default.RefAttributes<HTMLDivElement>>;
type CheckboxGroupProps = React__default.ComponentPropsWithoutRef<'div'> & {
    /**
     * CheckboxGroup children direction
     * @default row
     */
    direction?: 'row' | 'column';
    /**
     * Whether is a error field or not
     * @default false
     */
    error?: boolean;
    /**
     * CheckboxGroup error text. It appears when error property is set to true.
     */
    errorText?: ReactNode;
    /**
     * CheckboxGroup helper text
     */
    helpText?: ReactNode;
    /**
     * Whether is a optional field or not
     */
    optional?: boolean;
    /**
     * CheckboxGroup label
     */
    label: ReactNode;
};

declare const disabled: _vtex_admin_ui_core.StyleProp;
declare const icon: _vtex_admin_ui_core.StyleProp;
declare const checkmark: _vtex_admin_ui_core.StyleProp;
declare const checked: _vtex_admin_ui_core.StyleProp;
declare const indeterminate: _vtex_admin_ui_core.StyleProp;
declare const checkboxTheme: string;
declare const labelTheme: string;

type TextInputElementProps = ComponentPropsWithoutRef<'input'>;

declare const TextInput: React__default.ForwardRefExoticComponent<TextInputOptions & Omit<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof TextInputOptions> & React__default.RefAttributes<HTMLInputElement>>;
interface TextInputOptions {
    prefix?: ReactNode;
    suffix?: ReactNode;
    error?: boolean;
    errorText?: ReactNode;
    helpText?: ReactNode;
    label?: ReactNode;
}
type TextInputProps = TextInputOptions & Omit<TextInputElementProps, keyof TextInputOptions>;

declare const Search: React__default.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React__default.RefAttributes<HTMLFormElement>>;
type SearchOptions = {
    disabled?: boolean;
    loading?: boolean;
    onClear?: () => void;
    value?: string;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    placeholder?: string;
};
type SearchProps = Omit<React__default.ComponentPropsWithRef<'form'>, keyof SearchOptions> & SearchOptions;

declare function useSearchState(params?: UseSearchStateParams): SearchFormState;
interface GetInputPropsReturn {
    /**
     * Search input value
     */
    value: string;
    /**
     * Search input change handler event
     */
    onChange: ChangeEventHandler<HTMLInputElement>;
    /**
     * On clear button is clicked event
     */
    onClear: () => void;
}
interface UseSearchStateParams {
    /**
     * Search initial value
     */
    initialValue?: string;
    /**
     * Search default value. When clicking the clear button the value should be reseted to the default one
     * @default ''
     */
    defaultValue?: string;
    /**
     * Debounced value timeout in milliseconds
     * @default 250
     */
    timeout?: number;
    /**
     * Search input change handler event
     */
    onChange?: ChangeEventHandler;
}
interface SearchFormState {
    /**
     * Returns the search input props: value, onChange, onClear
     */
    getInputProps: () => GetInputPropsReturn;
    /**
     * Debounced search input value
     */
    debouncedValue: string;
    /**
     * Sets the value state
     */
    setValue: (value: string) => void;
    /**
     * Search input value
     */
    value: string;
    /**
     * On clear button is clicked event
     */
    onClear: () => void;
    /**
     * Search input change handler event
     */
    onChange: ChangeEventHandler<HTMLInputElement>;
}

declare function useQuerySearchState(props: UseQuerySearchStateParams): SearchFormState;
type UseQuerySearchStateParams = Omit<UseSearchStateParams, 'initialValue'>;

type NumberInputValue = number | string;

declare const NumberInput: React__default.ForwardRefExoticComponent<NumberInputOptions & Omit<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof NumberInputOptions> & React__default.RefAttributes<HTMLInputElement>>;
type JSXInputProps = ComponentPropsWithoutRef<'input'>;
interface NumberInputOptions {
    prefix?: ReactNode;
    suffix?: ReactNode;
    label?: ReactNode;
    value?: NumberInputValue;
    step?: number;
    min?: string | number;
    max?: string | number;
    optional?: boolean;
    error?: boolean;
    errorText?: ReactNode;
    helpText?: ReactNode;
    onChange?: (value: NumberInputValue) => void;
}
type NumberInputProps = NumberInputOptions & Omit<JSXInputProps, keyof NumberInputOptions>;

/**
 * Tags represent a status, or a common denominator. They make sections and entities quickly identifiable and searchable.
 *
 * @example
 * <Tag
 *   label="Here goes your label!"
 *   variant="red"
 * />
 */
declare const Tag: React__default.ForwardRefExoticComponent<TagProps & React__default.RefAttributes<HTMLDivElement>>;
type TagVariant = 'gray' | 'red' | 'orange' | 'green' | 'lightBlue' | 'cyan' | 'purple' | 'teal' | 'pink';
type TagSize = 'normal' | 'large';
interface TagProps extends ComponentPropsWithoutRef<'div'> {
    /**
     * Tag Label
     */
    label: string;
    variant?: TagVariant;
    size?: TagSize;
}

type TextAreaElementProps = ComponentPropsWithoutRef<'textarea'>;

declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaOptions & Omit<Omit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof TextAreaOptions> & React__default.RefAttributes<HTMLTextAreaElement>>;
interface TextAreaOptions {
    /** Optional limit for char ammount allowed. */
    maxLength?: number;
    /** Wheter there's an error. */
    error?: boolean;
    /** Error message. */
    errorText?: ReactNode;
    /** Help text that will be rendered bellow input. */
    helpText?: ReactNode;
    /** Inputs label. */
    label?: ReactNode;
}
type TextAreaProps = TextAreaOptions & Omit<TextAreaElementProps, keyof TextAreaOptions>;

declare const SelectInput: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
    error?: boolean | undefined;
    optional?: boolean | undefined;
} & React__default.RefAttributes<HTMLSelectElement>>;
type SelectInputProps = ComponentPropsWithoutRef<'select'> & {
    error?: boolean;
    optional?: boolean;
};

declare const Select: React__default.ForwardRefExoticComponent<SelectOptions & Omit<SelectInputProps, keyof SelectOptions> & React__default.RefAttributes<HTMLSelectElement>>;
interface SelectOptions {
    label?: ReactNode;
    helpText?: ReactNode;
    errorText?: ReactNode;
    optional?: boolean;
}
type SelectProps = SelectOptions & Omit<SelectInputProps, keyof SelectOptions>;

declare function useTableSort<T>(params: UseTableSortParams<T>): {
    sort: (id: keyof T) => void;
    resolveSorting: (compareResult: number) => number;
    order?: SortOrder | undefined;
    by?: string | number | symbol | undefined;
};
type SortOrder = 'ASC' | 'DESC';
type SortDirections = ['ASC', 'DESC'] | ['DESC', 'ASC'] | ['ASC' | 'DESC'];
interface SortState {
    order?: SortOrder;
    by?: string | number | symbol;
}
interface SortAction {
    type: SortOrder;
    columnId?: string | number | symbol;
}
interface SortCallbackParams<T> {
    currentSortState: SortState;
    dispatch: Dispatch<SortAction>;
    columnId: keyof T;
    directions: SortDirections;
}
interface UseTableSortParams<T> {
    initialValue?: Partial<SortState>;
    directions?: SortDirections;
    reducer?(state: SortState, action: SortAction): SortState;
    callback?(params: SortCallbackParams<T>): void;
}
interface UseSortReturn extends SortState {
    sort(id: string | number | symbol): void;
}

/**
 * Keeps the state of the DataView component
 * @example
 * const view = useDataViewState()
 *
 * <DataView state={view} />
 */
declare function useDataViewState(initialState?: DataViewStatusObject): DataViewState;
interface DataViewStatusObject {
    loading: boolean;
    notFound: boolean;
    error: ErrorState | null;
    empty: EmptyState | null;
}
type DataViewStatus = 'ready' | 'loading' | 'not-found' | 'empty' | 'error';
type DataViewStatusDispatch = Dispatch<StatusReducerAction>;
interface DataViewState {
    status: DataViewStatus;
    statusObject: DataViewStatusObject;
    setStatus: DataViewStatusDispatch;
}
type StatusAction = {
    text: string;
    onClick: () => void;
    href?: string;
} | {
    text: string;
    href: string;
    type?: string;
    rel?: string;
    target?: HTMLAttributeAnchorTarget;
    onClick?: () => void;
};
interface ErrorState {
    action?: StatusAction;
}
interface EmptyState {
    action?: StatusAction;
}
type AliasedState<T, S> = {
    type: T;
} & S;
type StatusReducerAction = {
    type: 'ready' | 'loading' | 'not-found';
} | AliasedState<'error', ErrorState> | AliasedState<'empty', EmptyState>;

/**
 * Layout to organize Tables and its controllers
 * @example
 * const view = useDataViewState()
 *
 * <DataView state={view} />
 */
declare const DataView: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    state: DataViewState;
} & React__default.RefAttributes<HTMLDivElement>>;
type DataViewProps = ComponentPropsWithoutRef<'div'> & {
    state: DataViewState;
};

/**
 * Organizes the DataView header
 * @example
 * const view = useDataViewState()
 *
 * <DataView state={view}>
 *    <DataViewHeader>
 *      {content}
 *    </DataViewHeader>
 * </DataView>
 */
declare const DataViewHeader: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
type DataViewHeaderProps = ComponentPropsWithoutRef<'div'>;

/**
 * Organizes the DataView actions
 * @example
 * const view = useDataViewState()
 *
 * <DataView state={view}>
 *    <DataViewHeader>
 *      <DataViewActions>
 *        <Button>...</Button>
 *        <Pagination />
 *      </DataViewActions>
 *    </DataViewHeader>
 * </DataView>
 */
declare const DataViewActions: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
type DataViewActionsProps = ComponentPropsWithoutRef<'div'>;

/**
 * Table context
 */
type ResolverContext = DataViewStatus;
/**
 * Render props of the resolver
 * @generic D: Type of returned data
 * @generic T: Type of returned item
 */
type ResolverRenderProps<D, T> = {
    data: D;
    item: T;
    context: ResolverContext;
};
type ResolverCallee<T> = Omit<T, 'resolvers' | 'context' | 'sortState'>;
type ResolveHeaderArgs<T> = {
    column: TableColumn<T>;
    context: ResolverContext;
    sortState?: SortState;
};
type ResolveHeaderReturn = {
    isSortable: boolean;
    content: ReactNode;
    sortDirection?: SortOrder | null;
};
type ResolveCellArgs<T> = {
    column: TableColumn<T>;
    item: T;
    context: ResolverContext;
};

type PlainResolver<T> = {
    type: 'plain';
    render?: (props: ResolverRenderProps<ReactNode, T>) => ReactNode;
};

type DateResolver<T> = {
    type: 'date';
    locale: string;
    options?: Intl.DateTimeFormatOptions;
    render?: (props: ResolverRenderProps<string, T>) => ReactNode;
};

type CurrencyResolver<T> = {
    type: 'currency';
    locale: string;
    currency: string;
    render?: (props: ResolverRenderProps<string, T>) => ReactNode;
};

type RootResolver<T> = {
    type: 'root';
    /**
     * render function
     */
    render: (props: ResolverRenderProps<null, T>) => ReactNode;
};

type ImagePreview = {
    /**
     * if should display preview or not
     * @default true
     */
    display: boolean;
    /**
     * Delay to show (in ms)
     * @default 0
     */
    delay: number;
    /**
     * Preview size
     * @default regular
     */
    size: 'small' | 'regular' | 'large';
};
type ImageResolver<T> = {
    type: 'image';
    /**
     * HTML img alt
     */
    alt?: string;
    /**
     * Preview options
     * @default {display:true,delay:0,size:'regular'}
     */
    preview?: ImagePreview;
    /**
     * optional render function
     */
    render?: (props: ResolverRenderProps<JSX.Element, T>) => ReactNode;
};

interface SelectionResolver<T> {
    type: 'selection';
    mapId: (item: T) => string | number;
    isSelected?: (item: T) => boolean;
    onSelect?: (items: T[]) => void;
    render?: (props: ResolverRenderProps<ReactNode, T>) => ReactNode;
}

type TextResolver<T> = {
    type: 'text';
    columnType?: 'name' | 'text';
    overflow?: 'ellipsis' | 'auto';
    mapText: (item: T) => ReactNode;
    mapDescription?: (item: T) => ReactNode;
    render?: (props: ResolverRenderProps<ReactNode, T>) => ReactNode;
};

interface MenuActions<T> {
    label: string;
    onClick: (item: T, event: React__default.MouseEvent<HTMLDivElement>) => void;
    icon?: ReactNode;
    disabled?: boolean;
    critical?: boolean;
}
type MenuResolver<T> = {
    type: 'menu';
    actions: Array<MenuActions<T>>;
    render?: (props: ResolverRenderProps<JSX.Element, T>) => JSX.Element;
};

/**
 * SelectionTree state
 * @example
 * const state = useSelectionTreeState({
 *  items: []
 * })
 *
 * console.log(state.selectedItems) // to display the currently selected items
 */
declare function useSelectionTreeState<T>(params: UseSelectionTreeStateParams<T>): SelectionTreeState<T>;
interface SelectionTreeState<T> {
    /**
     * currently selected items
     */
    selectedItems: T[];
    /**
     * Root state
     */
    root: ReturnType<typeof useCheckboxState>;
    /**
     * Items state
     */
    items: ReturnType<typeof useCheckboxState>;
    allSelected?: boolean;
}
interface UseSelectionTreeStateParams<T> {
    /**
     * Collection of items
     */
    items: T[];
    /**
     * Maps the unique key (id) for the collection
     * @default (item) => item.id
     */
    mapId?: (item: T) => string | number;
    /**
     * Condition that makes an item initially selected
     * @default () => false
     */
    isInitiallySelected?: (item: T) => boolean;
}

/**
 * SelectionTree context
 * @example
 * const state = useSelectionTreeState({
 *  items: []
 * })
 *
 * <SelectionTree state={state} />
 */
declare function SelectionTree<T>(props: SelectionTreeProps<T>): React__default.JSX.Element;
interface SelectionTreeProps<T> {
    state: SelectionTreeState<T>;
    children?: ReactNode;
}

declare const SelectionTreeContext: React$1.Context<SelectionTreeState<any> | null>;
declare function useSelectionTreeContext(): SelectionTreeState<any>;

/**
 * SelectionTree item
 * @example
 * const items = []
 *
 * const state = useSelectionTreeState({
 *  items,
 * })
 *
 * <SelectionTree state={state}>
 *  {items.map(item => (
 *    <SelectionTreeItem value={item.id} />
 *  ))}
 * </SelectionTree>
 */
declare function SelectionTreeItem(props: SelectionTreeItemProps): React__default.JSX.Element;
type SelectionTreeItemProps = Omit<CheckboxProps & any, 'state'>;

/**
 * SelectionTree root
 * @example
 * const state = useSelectionTreeState({
 *  items: [],
 * })
 *
 * <SelectionTree state={state}>
 *  <SelectionTreeRoot />
 * </SelectionTree>
 */
declare function SelectionTreeRoot(props: SelectionTreeRootProps): React__default.JSX.Element;
type SelectionTreeRootProps = Omit<CheckboxProps & any, 'state'>;

declare function useBulkActions<T extends {
    id: string | number;
}>(props: UseBulkActionsParams<T>): BulkActionsState<T>;
interface BulkActionsState<T> {
    setAllSelected: Dispatch<SetStateAction<boolean>>;
    allSelected: boolean;
    pageIds: Array<number | string>;
    root: boolean | any[] | 'indeterminate';
    setRoot: Dispatch<SetStateAction<boolean | 'indeterminate' | any[]>>;
    pageSelectedItems: T[];
    getSelectedIds: () => Array<number | string>;
    selectedItemsIds: boolean | any[] | 'indeterminate';
    setSelectedItemsIds: (value: SetStateAction<boolean | any[] | 'indeterminate'>) => void;
    isItemSelected: (item: T) => boolean;
    isVisible: boolean;
    totalItems: number;
    selectionTree: SelectionTreeState<T>;
}
interface UseBulkActionsParams<T> {
    pageItems: T[];
    totalItems: number;
    pageSize: number;
}

interface BulkActionsOptions extends ComponentPropsWithoutRef<'div'> {
    state: BulkActionsState<any>;
    children?: ReactNode;
}
declare const BulkActions: React__default.ForwardRefExoticComponent<BulkActionsOptions & React__default.RefAttributes<HTMLDivElement>>;

interface BulkResolver<T> {
    type: 'bulk';
    state: BulkActionsState<T>;
    render?: (props: ResolverRenderProps<ReactNode, T>) => ReactNode;
}

type BaseResolvers<T> = PlainResolver<T> | ImageResolver<T> | CurrencyResolver<T> | DateResolver<T> | RootResolver<T> | SelectionResolver<T> | TextResolver<T> | MenuResolver<T> | BulkResolver<T>;

/**
 * Column type
 * Each column, represents a field within an item
 * @template T: Item
 * @template R: Resolver filed
 */
type TableColumn<T, R = BaseResolvers<T>> = {
    id: keyof T;
    header?: ((column: TableColumn<T>) => ReactNode) | string;
    accessor?: ((item: T) => ReactNode) | string;
    resolver?: R;
    width?: any;
    compare?: (a: T, b: T) => number;
    sortable?: boolean;
    fixed?: boolean;
} | {
    id: Exclude<string, keyof T>;
    header?: ((column: TableColumn<T>) => ReactNode) | string;
    accessor: ((item: T) => ReactNode) | string;
    resolver?: R;
    width?: any;
    compare?: (a: T, b: T) => number;
    sortable?: boolean;
    fixed?: boolean;
} | {
    id: Exclude<string, keyof T>;
    header?: ((column: TableColumn<T>) => ReactNode) | string;
    accessor?: ((item: T) => ReactNode) | string;
    resolver: R;
    width?: any;
    compare?: (a: T, b: T) => number;
    sortable?: boolean;
    fixed?: boolean;
};

declare function Table<T>(props: TableProps<T>): React__default.JSX.Element | null;
interface TableProps<T> extends ComponentPropsWithoutRef<'table'> {
    columns: Array<TableColumn<T, BaseResolvers<T>>>;
    status: DataViewStatus;
    tableRef?: RefObject<HTMLTableElement>;
}

/**
 * Utility to create typesafe columns
 * @param columns
 */
declare function createColumns<T>(columns: Array<TableColumn<T>>): Array<TableColumn<T>>;

declare function TableHead(props: TableHeadProps): React__default.JSX.Element;
type TableHeadProps = React__default.ComponentPropsWithoutRef<'thead'>;
declare const THead: typeof TableHead;

declare function _TableCell<T>(props: TableCellProps<T>): React__default.JSX.Element;
declare const TableCell: typeof _TableCell;
type TableCellProps<T> = React__default.ComponentPropsWithRef<'td'> & {
    clickable?: boolean;
    fixed?: boolean;
    lastFixed?: boolean;
    hasHorizontalScroll?: boolean;
    column: TableColumn<T, BaseResolvers<T>>;
    lastFixedColumn?: TableColumn<T, BaseResolvers<T>>;
    tableRef?: RefObject<HTMLTableElement>;
};

declare function TableHeadCell<T>(props: TableHeadCellProps<T>): React__default.JSX.Element;
declare const THeadCell: typeof TableHeadCell;
interface TableHeadCellProps<T> extends TableCellProps<T> {
    resolveHeader: (args: ResolverCallee<ResolveHeaderArgs<T>>) => ResolveHeaderReturn;
    sortState: UseSortReturn;
    key: React__default.Key;
}
type SortIndicatorProps = ComponentPropsWithoutRef<'div'> & {
    direction?: 'ASC' | 'DESC' | null;
};

declare function TableBody(props: TableBodyProps): React__default.JSX.Element;
declare const TBody: typeof TableBody;
type TableBodyProps = React__default.ComponentPropsWithoutRef<'tbody'>;

declare function TableBodyCell<T>(props: TableBodyCellProps<T>): React__default.JSX.Element;
interface TableBodyCellProps<T> extends TableCellProps<T> {
    item: T;
    resolveCell: (args: ResolverCallee<ResolveCellArgs<T>>) => ReactNode;
    key: React__default.Key;
}
declare const TBodyCell: typeof TableBodyCell;

declare function TableBodyRow(props: TableBodyRowProps): React__default.JSX.Element;
type TableBodyRowProps = {
    selected?: boolean;
} & React__default.ComponentPropsWithoutRef<'tr'>;
declare const TBodyRow: typeof TableBodyRow;

declare function useTableState<T extends {}>(params: UseTableStateParams<T>): UseTableStateReturn<T>;
interface UseTableStateParams<T> {
    /**
     * Table column spec
     */
    columns: Array<TableColumn<T>>;
    /**
     * data-view state
     */
    status?: DataViewStatus;
    /**
     * Resolver context
     */
    context?: ResolverContext;
    /**
     * Table items
     * @default []
     */
    items?: T[];
    /**
     * Expected items length
     * @default 5
     */
    length?: number;
    /**
     * Object used in sort hook
     */
    sort?: UseTableSortParams<T>;
}
interface UseTableStateReturn<T> {
    /**
     * Collection rendered while loading
     */
    skeletonCollection: T[];
    /**
     * Resolves the cell content
     */
    resolveCell: (args: ResolverCallee<ResolveCellArgs<T>>) => ReactNode;
    /**
     * Resolvers the header content
     */
    resolveHeader: (args: ResolverCallee<ResolveHeaderArgs<T>>) => ResolveHeaderReturn;
    /**
     * Items to render
     */
    data: T[];
    /**
     * Grid columns
     */
    columns: Array<TableColumn<T>>;
    /**
     * Current sorting state
     */
    sortState: UseSortReturn;
    /**
     * Table ref
     */
    tableRef: RefObject<HTMLTableElement>;
    getBodyCell: (column: TableColumn<T