@aws-amplify/ui-react 2.11.0 → 2.14.0

package/dist/types/primitives/types/loader.d.ts

@@ -0,0 +1,23 @@
+import { Property } from 'csstype';
+import { ViewProps } from '../types/view';
+import { Sizes } from './base';
+export declare type LoaderSizes = Sizes;
+export declare type LoaderVariations = 'linear';
+export interface LoaderProps extends ViewProps {
+    /**
+     * This will set the size of Loader.
+     */
+    size?: LoaderSizes;
+    /**
+     * This will set the variation of Loader. Available options are linear and none(circular).
+     */
+    variation?: LoaderVariations;
+    /**
+     * This will set the filled color of Loader.
+     */
+    filledColor?: Property.Color;
+    /**
+     * This will set the empty color of Loader.
+     */
+    emptyColor?: Property.Color;
+}

package/dist/types/primitives/types/menu.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ButtonProps } from './button';
+import { FlexProps } from './flex';
+import { Sizes } from './base';
+export interface MenuProps extends FlexProps {
+    /**
+     * Alignment of menu against trigger
+     * @default "start"
+     */
+    menuAlign?: 'start' | 'center' | 'end';
+    /**
+     * Handle open and close event of menu
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Default for controlled menu
+     */
+    isOpen?: boolean;
+    /**
+     * Size of Menu button and items
+     */
+    size?: Sizes;
+    /**
+     * Trigger node
+     * @default MenuButton with IconMenu
+     * @note Must forward refs to DOM element
+     */
+    trigger?: React.ReactNode;
+    /**
+     * ClassName to apply to default trigger button
+     * Note: only applies if `trigger` prop is null
+     */
+    triggerClassName?: string;
+}
+export interface MenuItemProps extends ButtonProps {
+    children?: React.ReactNode;
+}

package/dist/types/primitives/types/pagination.d.ts

@@ -0,0 +1,65 @@
+import { BaseComponentProps, AriaProps } from './base';
+import { BaseStyleProps } from './style';
+import { ViewProps } from './view';
+export declare type PaginationItemType = 'page' | 'next' | 'previous' | 'ellipsis';
+export declare type PaginationCallbackType = 'onNext' | 'onPrevious' | 'onChange';
+interface BasePaginationProps {
+    /**
+     * Index of the current page. (starting from 1)
+     */
+    currentPage?: number;
+    /**
+     * Total number of available pages.
+     */
+    totalPages: number;
+    /**
+     * The number of siblings on each side of current page.
+     */
+    siblingCount?: number;
+    /**
+     * Optionally indicates whether there are more pages after `totalPages`. Can be combined with `totalPages` to enable the next button when reaching the last page.
+     * @default false
+     */
+    hasMorePages?: boolean;
+    /**
+     * Callback function triggered when the next-page button is pressed
+     */
+    onNext?: () => void;
+    /**
+     * Callback function triggered when the prev-page button is pressed
+     */
+    onPrevious?: () => void;
+    /**
+     * Callback function triggered every time the page changes
+     */
+    onChange?: (newPageIndex: number, prevPageIndex: number) => void;
+}
+export interface PaginationProps extends BasePaginationProps, ViewProps {
+}
+export interface UsePaginationProps extends Omit<BasePaginationProps, PaginationCallbackType> {
+}
+export interface UsePaginationResult extends Required<BasePaginationProps> {
+}
+export interface PaginationItemProps extends BaseComponentProps, BaseStyleProps, AriaProps {
+    /**
+     * Available item type are 'page', 'next', 'previous' and 'ellipsis'.
+     */
+    type: PaginationItemType;
+    /**
+     * For 'page' item, this is the page number to be rendered.
+     */
+    page?: number;
+    /**
+     * The index of current page.
+     */
+    currentPage?: number;
+    /**
+     * An item is not clickable if disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Triggered every time the item is clicked.
+     */
+    onClick?: (newPageIndex?: number, prevPageIndex?: number) => void;
+}
+export {};

package/dist/types/primitives/types/passwordField.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ButtonProps } from './button';
+import { TextInputFieldProps } from './textField';
+export interface PasswordFieldProps extends TextInputFieldProps {
+    /**
+     * For password fields, will hide the "show password" button
+     */
+    hideShowPassword?: boolean;
+    /**
+     * Password autocomplete type
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+     * @default "current-password"
+     */
+    autoComplete?: 'new-password' | 'current-password' | string;
+    /**
+     * Forwarded ref for access to show password button DOM element
+     */
+    showPasswordButtonRef?: React.Ref<HTMLButtonElement>;
+}
+export declare type PasswordFieldType = 'password' | 'text';
+export interface ShowPasswordButtonProps extends ButtonProps {
+    fieldType: PasswordFieldType;
+}

package/dist/types/primitives/types/phoneNumberField.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SelectFieldProps } from './selectField';
+import { TextInputFieldProps } from './textField';
+export interface PhoneNumberFieldProps extends TextInputFieldProps {
+    countryCodeLabel?: string;
+    countryCodeName?: string;
+    defaultCountryCode: string;
+    dialCodeList?: Array<string>;
+    onCountryCodeChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    type?: 'tel';
+    /**
+     * Forwarded ref for access to Country Code select DOM element
+     */
+    countryCodeRef?: React.Ref<HTMLSelectElement>;
+}
+export interface CountryCodeSelectProps extends SelectFieldProps {
+    defaultValue: string;
+    dialCodeList?: Array<string>;
+}

package/dist/types/primitives/types/placeholder.d.ts

@@ -0,0 +1,14 @@
+import { Sizes } from './base';
+import { ViewProps } from './view';
+export declare type PlaceholderSizes = Sizes;
+export interface PlaceholderProps extends ViewProps {
+    /**
+     * If true, the placeholder won't show, if false the placeholder will show.
+     * @default false
+     */
+    isLoaded?: boolean;
+    /**
+     * Controls the display size of placeholder
+     */
+    size?: PlaceholderSizes;
+}

package/dist/types/primitives/types/radio.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from './input';
+import { LabelPositions } from './field';
+export interface RadioProps extends InputProps {
+    value: string;
+    /**
+     * Position of label in relation to the radio,
+     * default is 'start'
+     */
+    labelPosition?: LabelPositions;
+}

package/dist/types/primitives/types/radioGroupField.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { FlexContainerStyleProps } from './flex';
+import { FieldProps, LabelPositions } from './field';
+import { InputProps } from './input';
+export interface RadioGroupFieldProps extends FieldProps, FlexContainerStyleProps, InputProps {
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    /**
+     * Handle onChange event
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Position of label in relation to the radio,
+     * default is 'start'
+     */
+    labelPosition?: LabelPositions;
+}

package/dist/types/primitives/types/rating.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { Property } from 'csstype';
+import { FlexProps } from './flex';
+import { Sizes } from './base';
+export declare type RatingSizes = Sizes;
+export interface RatingOptions {
+    /**
+     * The CSS color to use on the empty rating icon
+     * Default css value is #A2A2A2
+     */
+    emptyColor?: Property.Color;
+    /**
+     * This will override which icon to use as the empty icon. This will only
+     * override the empty icon an will create a rating component that uses
+     * different icons for filled and empty icons.
+     */
+    emptyIcon?: JSX.Element;
+    /**
+     * The CSS color to use on the filled rating icon
+     * Default css value is #ffb400
+     */
+    fillColor?: Property.Color;
+    /**
+     * This will override which icon to use. This will override both
+     * the filled and empty icon values unless an empty icon is specified
+     * with the emptyIcon prop
+     * Default is <IconStar />
+     */
+    icon?: JSX.Element;
+    /**
+     * The max rating integer value
+     * Default is 5
+     */
+    maxValue?: number;
+    /**
+     *
+     * This will set the icon size of the stars
+     * Default css value is medium
+     */
+    size?: RatingSizes;
+    /**
+     * The value of the rating
+     * Default is 0
+     */
+    value?: number;
+}
+export interface RatingProps extends RatingOptions, FlexProps {
+}

package/dist/types/primitives/types/responsive.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@aws-amplify/ui';
+export declare type Breakpoints = Theme['breakpoints']['values'];
+export declare type Breakpoint = keyof Theme['breakpoints']['values'];
+export interface MediaQueryBreakpoint {
+    breakpoint: Breakpoint;
+    query: string;
+    maxWidth: number;
+    minWidth: number;
+}
+export interface GetMediaQueriesParams {
+    breakpoints: Breakpoints;
+}
+export interface GetMediaQueries {
+    (params: GetMediaQueriesParams): MediaQueryBreakpoint[];
+}
+export interface UseBreakpointParams {
+    breakpoints: Breakpoints;
+    defaultBreakpoint: Breakpoint;
+}
+export interface UseBreakpoint {
+    (params: UseBreakpointParams): Breakpoint;
+}

package/dist/types/primitives/types/scrollView.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from './view';
+declare type ScrollViewOrientation = 'horizontal' | 'vertical';
+export interface ScrollViewProps extends ViewProps {
+    orientation?: ScrollViewOrientation;
+}
+export {};

package/dist/types/primitives/types/searchField.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FieldGroupIconButtonProps } from './fieldGroupIcon';
+import { TextInputFieldProps } from './textField';
+export interface SearchFieldProps extends TextInputFieldProps {
+    /**
+     * Handle submission of search field input
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * Triggered when search field is cleared
+     */
+    onClear?: () => void;
+    /**
+     * Visually hide label
+     * @default true
+     */
+    labelHidden?: boolean;
+    /**
+     * Provides ref access to search button DOM element
+     */
+    searchButtonRef?: React.Ref<HTMLButtonElement>;
+}
+export interface SearchFieldButtonProps extends Partial<FieldGroupIconButtonProps> {
+}
+export declare type UseSearchFieldProps = Partial<SearchFieldProps> & {
+    externalRef?: React.ForwardedRef<HTMLInputElement>;
+};

package/dist/types/primitives/types/select.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ViewProps } from './view';
+export declare type SelectSize = 'small' | 'large';
+export declare type SelectVariation = 'quiet';
+export interface SelectProps extends ViewProps {
+    autoComplete?: string;
+    name?: string;
+    defaultValue?: string;
+    value?: string;
+    size?: SelectSize;
+    variation?: SelectVariation;
+    icon?: React.ReactElement;
+    iconColor?: string;
+    placeholder?: string;
+    hasError?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}

package/dist/types/primitives/types/selectField.d.ts

@@ -0,0 +1,9 @@
+import { FlexContainerStyleProps } from './flex';
+import { SelectProps } from './select';
+import { FieldProps } from './field';
+export interface SelectFieldProps extends FieldProps, FlexContainerStyleProps, SelectProps {
+    /**
+     * List of option values for select dropdown
+     */
+    options?: string[];
+}

package/dist/types/primitives/types/sliderField.d.ts

@@ -0,0 +1,19 @@
+import { Property } from 'csstype';
+import { TextInputFieldProps } from './textField';
+import { ViewProps } from './view';
+declare type SliderOrientation = 'horizontal' | 'vertical';
+export interface SliderFieldProps extends TextInputFieldProps, ViewProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: SliderOrientation;
+    isValueHidden?: boolean;
+    trackSize?: string;
+    emptyTrackColor?: Property.Color;
+    filledTrackColor?: Property.Color;
+    thumbColor?: Property.Color;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+}
+export {};

package/dist/types/primitives/types/stepperField.d.ts

@@ -0,0 +1,17 @@
+import { TextInputFieldProps } from '../types/textField';
+export interface StepperFieldProps extends TextInputFieldProps {
+    type?: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    /**
+     * TODO:
+     * Extends StepperField props from Omit<TextFieldProps, 'onChange'>, after removing [key: string]: any from the base type
+     * and rename onStepChange to onChange
+     */
+    onStepChange?: (value: number) => void;
+    onIncrease?: () => void;
+    onDecrease?: () => void;
+}

package/dist/types/primitives/types/style.d.ts

@@ -0,0 +1,117 @@
+/// <reference types="react" />
+import { Property } from 'csstype';
+import { WebDesignToken } from '@aws-amplify/ui';
+import { FlexItemStyleProps, FlexContainerStyleProps } from './flex';
+import { GridItemStyleProps, GridContainerStyleProps } from './grid';
+import { ImageStyleProps } from './image';
+import { TextAreaStyleProps } from './textArea';
+/**
+ * Extract style compatible types (string literal | number | any string)
+ */
+export declare type StyleProp<PropertyType> = (PropertyType extends number ? number : PropertyType extends string | WebDesignToken ? PropertyType : never) | (string & {});
+export interface ResponsiveObject<PropertyType> {
+    base?: PropertyType;
+    small?: PropertyType;
+    medium?: PropertyType;
+    large?: PropertyType;
+    xl?: PropertyType;
+    xxl?: PropertyType;
+}
+/**
+ * Allows a style prop to be the property type
+ * or a design token of that property type.
+ */
+declare type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
+export declare type ResponsiveStyle<PropertyType> = StyleProp<PropertyType> | StyleProp<PropertyType>[] | ResponsiveObject<StyleProp<PropertyType>>;
+export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
+    alignSelf?: ResponsiveStyle<StyleToken<Property.AlignSelf>>;
+    backgroundColor?: ResponsiveStyle<StyleToken<Property.BackgroundColor>>;
+    backgroundImage?: ResponsiveStyle<StyleToken<Property.BackgroundImage>>;
+    border?: ResponsiveStyle<StyleToken<Property.Border>>;
+    borderRadius?: ResponsiveStyle<StyleToken<Property.BorderRadius>>;
+    bottom?: ResponsiveStyle<StyleToken<Property.Bottom>>;
+    boxShadow?: ResponsiveStyle<StyleToken<Property.BoxShadow>>;
+    color?: ResponsiveStyle<StyleToken<Property.Color>>;
+    display?: ResponsiveStyle<StyleToken<Property.Display>>;
+    fontFamily?: ResponsiveStyle<StyleToken<Property.FontFamily>>;
+    fontSize?: ResponsiveStyle<StyleToken<Property.FontSize>>;
+    fontStyle?: ResponsiveStyle<StyleToken<Property.FontStyle>>;
+    fontWeight?: ResponsiveStyle<StyleToken<Property.FontWeight>>;
+    height?: ResponsiveStyle<StyleToken<Property.Height>>;
+    left?: ResponsiveStyle<StyleToken<Property.Left>>;
+    letterSpacing?: ResponsiveStyle<StyleToken<Property.LetterSpacing>>;
+    lineHeight?: ResponsiveStyle<StyleToken<Property.LineHeight>>;
+    margin?: ResponsiveStyle<StyleToken<Property.Margin>>;
+    marginBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
+    marginBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
+    marginBottom?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
+    marginInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
+    marginInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
+    marginLeft?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
+    marginRight?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
+    marginTop?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
+    maxHeight?: ResponsiveStyle<StyleToken<Property.MaxHeight>>;
+    maxWidth?: ResponsiveStyle<StyleToken<Property.MaxWidth>>;
+    minHeight?: ResponsiveStyle<StyleToken<Property.MinHeight>>;
+    minWidth?: ResponsiveStyle<StyleToken<Property.MinWidth>>;
+    opacity?: ResponsiveStyle<StyleToken<Property.Opacity>>;
+    overflow?: ResponsiveStyle<StyleToken<Property.Overflow>>;
+    padding?: ResponsiveStyle<StyleToken<Property.Padding>>;
+    paddingBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
+    paddingBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
+    paddingBottom?: ResponsiveStyle<StyleToken<Property.PaddingBlockEnd>>;
+    paddingInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
+    paddingInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
+    paddingLeft?: ResponsiveStyle<StyleToken<Property.PaddingInlineStart>>;
+    paddingRight?: ResponsiveStyle<StyleToken<Property.PaddingInlineEnd>>;
+    paddingTop?: ResponsiveStyle<StyleToken<Property.PaddingBlockStart>>;
+    position?: ResponsiveStyle<StyleToken<Property.Position>>;
+    right?: ResponsiveStyle<StyleToken<Property.Right>>;
+    textAlign?: ResponsiveStyle<StyleToken<Property.TextAlign>>;
+    textDecoration?: ResponsiveStyle<StyleToken<Property.TextDecoration>>;
+    textTransform?: ResponsiveStyle<StyleToken<Property.TextTransform>>;
+    top?: ResponsiveStyle<StyleToken<Property.Top>>;
+    transform?: ResponsiveStyle<StyleToken<Property.Transform>>;
+    transformOrigin?: ResponsiveStyle<StyleToken<Property.TransformOrigin>>;
+    width?: ResponsiveStyle<StyleToken<Property.Width>>;
+    whiteSpace?: ResponsiveStyle<StyleToken<Property.WhiteSpace>>;
+}
+export interface CSSLayoutStyleProps {
+    /**
+     * Controls where the Flex/Grid items sit on the cross axis.
+     */
+    alignItems?: ResponsiveStyle<Property.AlignItems>;
+    /**
+     * Sets the distribution of space between and around content items
+     */
+    alignContent?: ResponsiveStyle<Property.AlignContent>;
+    /**
+     * Controls where the Flex/Grid items sit on the main axis.
+     */
+    justifyContent?: ResponsiveStyle<Property.JustifyContent>;
+    /**
+     * Spacing between child components. Shorthand for rowGap and columnGap.
+     */
+    gap?: ResponsiveStyle<StyleToken<Property.Gap>>;
+    /**
+     * Spacing between Flex/Grid child columns
+     */
+    columnGap?: ResponsiveStyle<StyleToken<Property.GridColumnGap>>;
+    /**
+     * Spacing between Flex/Grid child rows
+     */
+    rowGap?: ResponsiveStyle<StyleToken<Property.RowGap>>;
+}
+export interface AllStyleProps extends BaseStyleProps, ImageStyleProps, FlexContainerStyleProps, GridContainerStyleProps, TextAreaStyleProps {
+}
+export declare type ComponentPropToStyleProp = Required<{
+    [key in keyof AllStyleProps]: keyof React.CSSProperties;
+}>;
+/**
+ * Maps from component style props to React `style` props
+ * Note: Primarily needed to map from component style props that don't match CSS Properties directly
+ * such as wrap => flexWrap and direction => flexDirection
+ */
+export declare const ComponentPropsToStylePropsMap: ComponentPropToStyleProp;
+export declare const ComponentPropsToStylePropsMapKeys: (keyof AllStyleProps)[];
+export {};

package/dist/types/primitives/types/switchField.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { Sizes } from './base';
+import { BaseStyleProps } from './style';
+import { InputProps } from './input';
+import { FieldProps, LabelPositions } from './field';
+import { Property } from 'csstype';
+export interface SwitchFieldProps extends InputProps, FieldProps, BaseStyleProps {
+    /**
+     * Use this to provide a default checked value for an uncontrolled SwitchField
+     */
+    defaultChecked?: boolean;
+    /**
+     * If isChecked is provided, this will be a controlled SwitchField
+     */
+    isChecked?: boolean;
+    /**
+     * This property will set the switch to disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Visually hide the label, but the associated label text will still be required for accessibility.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Label text for field (required)
+     */
+    label: React.ReactNode;
+    /**
+     * Position of label in relation to the switchfield
+     */
+    labelPosition?: LabelPositions;
+    /**
+     * This prop adds a name attribute to the input element
+     */
+    name?: string;
+    /**
+     * Assign an onChange event to the switch field
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * This prop adjusts the size of the switch component
+     */
+    size?: Sizes;
+    /**
+     * This property will change the color of the thumb in the switch component
+     */
+    thumbColor?: Property.Color;
+    /**
+     * This property will change the color of the track in the switch component
+     */
+    trackColor?: Property.Color;
+    /**
+     * This property will change the color of the checked track in the switch component
+     */
+    trackCheckedColor?: Property.Color;
+    /**
+     * This is the value of the switch input and will be submitted with a form submission
+     */
+    value?: string | number;
+}

package/dist/types/primitives/types/table.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Sizes } from './base';
+import { ViewProps } from './view';
+export declare type TableSize = Sizes;
+export declare type TableVariation = 'bordered' | 'striped';
+export interface TableProps extends ViewProps {
+    /**
+     * Optional caption which serves as an accessible title/caption for
+     * the table.
+     */
+    caption?: React.ReactNode;
+    /**
+     * If set to true, will highlight a table row on hover. Default is false.
+     */
+    highlightOnHover?: boolean;
+    /**
+     * Affects font size and padding. Default is in between 'small' and 'large'.
+     */
+    size?: TableSize;
+    /**
+     * Sets a supported style variation. Default is no specific variation.
+     */
+    variation?: TableVariation;
+}
+export interface TableBodyProps extends ViewProps {
+}
+export declare type TableCellElement = 'td' | 'th';
+export interface TableCellProps extends ViewProps {
+    as?: TableCellElement;
+    colspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'colSpan'>;
+    rowspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'rowSpan'>;
+}
+export interface TableFootProps extends ViewProps {
+}
+export interface TableHeadProps extends ViewProps {
+}
+export interface TableRowProps extends ViewProps {
+}

package/dist/types/primitives/types/tabs.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { BaseComponentProps } from './base';
+import { BaseStyleProps } from './style';
+import { FlexProps } from './flex';
+export declare type TabsSpacing = 'equal' | 'relative';
+export interface TabsProps extends FlexProps {
+    /**
+     * The Tabs component only accepts TabItem components as children.
+     */
+    children: React.ReactElement | React.ReactElement[];
+    /**
+     * Change which Tab content is initially displayed. Pass in the index of the Tab you wish to show. The default is index 0 (the first tab).
+     */
+    defaultIndex?: number | string;
+    /**
+     * The controlled index of the currently selected tab. This should be used with
+     * `onChange` as well to make the component controlled.
+     */
+    currentIndex?: number | string;
+    /**
+     * For controlled usage, use the onChange event to listen to when a tab is clicked
+     * and update the `currentIndex` accordingly. The index of the tab clicked is passed
+     * to onChange.
+     */
+    onChange?: (value: number | string) => void;
+    /**
+     * Control how Tabs take up the remaining space. Pass `equal` to make each tab take up the same amount of space,
+     * and `relative` to make each tab take up space relative to the size of its title.
+     */
+    spacing?: TabsSpacing;
+    /**
+     * Sets the border and indicator of the tabs to be the top or bottom.
+     */
+    indicatorPosition?: 'top' | 'bottom';
+}
+export interface TabItemProps extends BaseComponentProps, BaseStyleProps {
+    /**
+     * Change the title corresponding with each Tab's content panel.
+     */
+    title: React.ReactNode;
+    /**
+     * Make a Tab not clickable and its content not visible to the user. Defaults to false (i.e., visible).
+     */
+    isDisabled?: boolean;
+}