@marigold/components 0.8.0 → 1.0.0

package/dist/index.d.ts

@@ -1,22 +1,27 @@
-import { Theme as Theme$1, ThemeProviderProps, BoxOwnProps, ResponsiveStyleValue, CSSObject } from '@marigold/system';
+import { Theme as Theme$1, ThemeProviderProps, ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, StateAttrProps, CSSObject, ResponsiveStyleValue } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactElement, ReactChild } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
-import { ToggleProps } from '@react-types/checkbox';
+import * as _react_types_shared from '@react-types/shared';
+import { PressEvents, CollectionElement } from '@react-types/shared';
+import { AriaCheckboxProps, AriaCheckboxGroupProps } from '@react-types/checkbox';
+import { CheckboxGroupState } from '@react-stately/checkbox';
+import { AriaDialogProps } from '@react-types/dialog';
 import { SeparatorProps } from '@react-aria/separator';
+import { AriaNumberFieldProps } from '@react-types/numberfield';
+import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 import { AriaSelectProps } from '@react-types/select';
-import { SingleSelection } from '@react-types/shared';
+import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
+import { TableProps as TableProps$1 } from '@react-aria/table';
+import { TableStateProps, TableBody, Cell, Column, TableHeader, Row } from '@react-stately/table';
 import { AriaTextFieldProps } from '@react-types/textfield';
-import { TooltipTriggerProps } from '@react-types/tooltip';
+import { PositionProps } from '@react-types/overlays';
+import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
 import { aspect, size } from '@marigold/tokens';
-import * as _react_stately_overlays from '@react-stately/overlays';
-import { OverlayProps } from '@react-aria/overlays';
-import { AriaDialogProps } from '@react-types/dialog';
-export { VisuallyHidden } from '@react-aria/visually-hidden';
+import { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
 export { SSRProvider } from '@react-aria/ssr';
-import { TooltipTriggerState } from '@react-stately/tooltip';
-export { Item, Section } from '@react-stately/collections';
+export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 interface RootThemeExtension<Value> {
     root?: {
@@ -28,283 +33,452 @@ interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>
 }
 declare function MarigoldProvider<T extends Theme$1>({ theme, children, }: MarigoldProviderProps<T>): JSX.Element;
 
-interface BadgeThemeExtension<Value> {
-    badge?: {
-        [key: string]: Value;
-    };
+interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
 }
 interface BadgeProps extends ComponentProps<'div'> {
+    children?: React.ReactNode;
     variant?: string;
-    bgColor?: string;
-    borderColor?: string;
+    size?: string;
 }
-declare const Badge: React.FC<BadgeProps>;
+declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
 
-interface ButtonThemeExtension<Value> {
-    button?: {
-        [key: string]: Value;
-    };
+interface ButtonThemeExtension extends ThemeExtension<'Button'> {
+}
+interface ButtonOwnProps extends PressEvents {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
 }
-interface ButtonProps extends PolymorphicPropsWithRef<BoxOwnProps, 'button'> {
+interface ButtonProps extends PolymorphicPropsWithRef<ButtonOwnProps, 'button'> {
 }
-declare const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'>;
+declare const Button: PolymorphicComponentWithRef<ButtonOwnProps, 'button'>;
 
-interface CardThemeExtension<Value> {
-    card?: {
-        [key: string]: Value;
-    };
+interface CardThemeExtension extends ThemeExtension<'Card'> {
 }
-interface CardProps extends ComponentProps<'div'> {
-    title?: string;
-    width?: ResponsiveStyleValue<string>;
-    variant?: string;
+interface CardProps extends ThemeComponentProps, ComponentProps<'div'> {
+    children?: ReactNode;
 }
-declare const Card: React.FC<CardProps>;
+declare const Card: ({ children, variant, size, ...props }: CardProps) => JSX.Element;
 
-interface CheckboxIconProps {
+interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
+    'container',
+    'label',
+    'checkbox'
+]> {
+}
+/**
+ * `react-aria` has a slightly different API for the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur';
+interface CheckboxProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
+    children?: ReactNode;
+    indeterminate?: boolean;
+    error?: boolean;
+}
+declare const Checkbox: ({ size, variant, disabled, checked, defaultChecked, indeterminate, readOnly, required, error, ...props }: CheckboxProps) => JSX.Element;
+
+interface CheckboxGroupContextProps extends CheckboxGroupState {
+    error?: boolean;
     variant?: string;
-    checked?: boolean;
+    size?: string;
+}
+/**
+ * Needs to be falsy so we can check if a checkbox is used as standalone
+ * or in a group.
+ */
+declare const CheckboxGroupContext: React.Context<CheckboxGroupContextProps>;
+declare const useCheckboxGroupContext: () => CheckboxGroupContextProps;
+interface CheckboxGroupThemeExtension extends ThemeExtensionsWithParts<'CheckboxGroup', ['container', 'group']> {
+}
+interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, AriaCheckboxGroupProps {
+    children: ReactNode;
+    variant?: string;
+    size?: string;
+    label?: ReactNode;
+    required?: boolean;
     disabled?: boolean;
-    indeterminated?: boolean;
+    readOnly?: boolean;
     error?: boolean;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
 }
+declare const CheckboxGroup: ({ children, variant, size, required, disabled, readOnly, error, ...rest }: CheckboxGroupProps) => JSX.Element;
 
-interface CheckboxThemeExtension<Value> {
-    checkbox?: {
-        [key: string]: Value;
-    };
+interface ContentThemeExtension extends ThemeExtension<'Content'> {
 }
-declare type CheckboxInputProps = CheckboxIconProps & ToggleProps & ComponentProps<'input'>;
-interface CheckboxProps extends CheckboxInputProps {
-    id: string;
-    required?: boolean;
-    labelVariant?: string;
-    errorMessage?: string;
+interface ContentProps extends ThemeComponentProps, ComponentProps<'section'> {
+    children?: ReactNode;
 }
-declare const Checkbox: React.FC<CheckboxProps>;
+declare const Content: ({ children, variant, size, ...props }: ContentProps) => JSX.Element;
 
-interface DividerThemeExtension<Value> {
-    divider?: {
-        [key: string]: Value;
-    };
+interface DialogTriggerProps {
+    children: [trigger: ReactNode, menu: ReactNode];
+    dismissable?: boolean;
+    keyboardDismissable?: boolean;
+}
+
+interface DialogContextProps {
+    open?: boolean;
+    close?: () => void;
+}
+
+interface DialogThemeExtension extends ThemeExtensionsWithParts<'Dialog', ['container', 'closeButton']> {
+}
+interface DialogChildProps {
+    close: DialogContextProps['close'];
+    titleProps: HTMLAttributes<HTMLElement>;
+}
+interface DialogProps extends AriaDialogProps {
+    children?: ReactNode | ((props: DialogChildProps) => ReactNode);
+    variant?: string;
+    size?: string;
+    closeButton?: boolean;
+}
+declare const Dialog: {
+    ({ children, variant, size, closeButton, ...props }: DialogProps): JSX.Element;
+    Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => JSX.Element;
+};
+
+interface DividerThemeExtension extends ThemeExtension<'Divider'> {
 }
 interface DividerProps extends SeparatorProps {
     variant?: string;
 }
-declare const Divider: React.FC<DividerProps>;
+declare const Divider: ({ variant, ...props }: DividerProps) => JSX.Element;
 
-interface ImageThemeExtension<Value> {
-    image?: {
-        [key: string]: Value;
-    };
+interface FooterThemeExtension extends ThemeExtension<'Footer'> {
+}
+interface FooterProps extends ThemeComponentProps, ComponentProps<'footer'> {
+    children?: ReactNode;
+}
+declare const Footer: ({ children, variant, size, ...props }: FooterProps) => JSX.Element;
+
+interface HeaderThemeExtension extends ThemeExtension<'Header'> {
+}
+interface HeaderProps extends ThemeComponentProps, ComponentProps<'header'> {
+    children?: ReactNode;
+}
+declare const Header: ({ children, variant, size, ...props }: HeaderProps) => JSX.Element;
+
+interface HeadlineThemeExtension extends ThemeExtension<'Headline'> {
+}
+interface HeadlineProps extends ThemeComponentProps, ComponentProps<'h1'> {
+    children?: ReactNode;
+    level?: '1' | '2' | '3' | '4' | '5' | '6';
+}
+declare const Headline: ({ children, variant, size, level, ...props }: HeadlineProps) => JSX.Element;
+
+interface HelpTextThemeExtension extends ThemeExtensionsWithParts<'HelpText', ['container', 'icon']> {
+}
+
+interface ImageThemeExtension extends ThemeExtension<'Image'> {
 }
 interface ImageProps extends ComponentProps<'img'> {
     variant?: string;
     children?: never;
 }
-declare const Image: React.FC<ImageProps>;
+declare const Image: ({ variant, ...props }: ImageProps) => JSX.Element;
 
-interface InputThemeExtension<Value> {
-    input?: {
-        [key: string]: Value;
-    };
+interface InputThemeExtension extends ThemeExtension<'Input'> {
 }
-interface InputProps extends ComponentProps<'input'> {
+interface InputOwnProps extends Omit<ComponentProps<'input'>, 'size'> {
+    size?: string;
     variant?: string;
 }
-declare const Input: React.FC<InputProps>;
+interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
+}
+declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LabelThemeExtension<Value> {
-    label?: {
-        [key: string]: Value;
-    };
+interface LabelThemeExtension extends ThemeExtension<'Label'> {
 }
-declare type LabelBaseProps = {
-    htmlFor?: string;
+interface LabelProps extends ComponentProps<'label'> {
+    as?: 'label' | 'span';
     variant?: string;
-    required?: boolean;
-    color?: ResponsiveStyleValue<string>;
-} & ComponentProps<'label'>;
-declare const LabelBase: React.FC<LabelProps>;
-interface LabelProps extends LabelBaseProps {
+    size?: string;
     required?: boolean;
 }
-declare const Label: React.FC<LabelProps>;
+declare const Label: ({ as, required, children, variant, size, ...props }: LabelProps) => JSX.Element;
 
-interface LinkThemeExtension<Value> {
-    link?: Value;
+interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
 interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
+    variant?: string;
+    size?: string;
+    children?: ReactNode;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
 }
 declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
 
-interface MenuThemeExtension<Value> {
-    menu?: Value;
+interface ListBoxThemeExtension extends ThemeExtensionsWithParts<'ListBox', [
+    'container',
+    'list',
+    'option',
+    'section',
+    'sectionTitle'
+]> {
 }
-interface MenuProps {
-    variant?: string;
-    label?: string;
-    onClick: ComponentProps<typeof Button>['onClick'];
-    show?: boolean;
-    className?: string;
-    title?: string;
+
+interface MenuTriggerProps {
+    children: [trigger: ReactNode, menu: ReactNode];
+    disabled?: boolean;
 }
-declare const Menu: React.FC<MenuProps>;
 
-interface MenuItemThemeExtension<Value> {
-    menuItem?: {
-        [key: string]: Value;
-    };
+interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item']> {
 }
-interface MenuItemProps extends ComponentProps<typeof Link> {
+interface MenuProps extends Omit<ComponentProps<'ul'>, 'onSelect' | 'size'> {
+    children: CollectionElement<object> | CollectionElement<object>[];
     variant?: string;
+    size?: string;
+    onSelect?: (key: Key) => void;
 }
-declare const MenuItem: React.FC<MenuItemProps>;
+declare const Menu: {
+    ({ variant, size, ...props }: MenuProps): JSX.Element;
+    Trigger: ({ disabled, children }: MenuTriggerProps) => JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
 
-interface MessageThemeExtension<Value> {
-    message?: {
-        [key: string]: Value;
-    };
+interface MessageThemeExtension extends ThemeExtensionsWithParts<'Message', [
+    'container',
+    'icon',
+    'title',
+    'content'
+]> {
 }
 interface MessageProps extends ComponentProps<'div'> {
-    messageTitle: string;
+    messageTitle: ReactNode;
     variant?: string;
+    size?: string;
 }
-declare const Message: React.FC<MessageProps>;
+declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
 
-interface RadioIconProps {
+interface FieldBaseProps {
+    children?: ReactNode;
     variant?: string;
-    checked?: boolean;
+    size?: string;
+    width?: string;
     disabled?: boolean;
+    required?: boolean;
+    label?: ReactNode;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
+    description?: ReactNode;
+    descriptionProps?: HTMLAttributes<HTMLElement>;
     error?: boolean;
+    errorMessage?: ReactNode;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    stateProps?: StateAttrProps;
 }
 
-interface RadioThemeExtension<Value> {
-    radio?: {
-        [key: string]: Value;
-    };
+interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberField', ['group', 'stepper']> {
 }
-interface RadioInputProps extends RadioIconProps, ComponentProps<'input'> {
+/**
+ * `react-aria` has a slightly different API for some DOM props.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomProps = 'size' | 'width' | 'type' | 'value' | 'defaultValue' | 'step' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max';
+interface NumberFieldProps extends Omit<ComponentProps<'input'>, CustomProps>, Omit<AriaNumberFieldProps, 'isDisabled' | 'isRequired' | 'isReadOnly'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+    variant?: string;
+    size?: string;
+    width?: string;
+    hideStepper?: boolean;
 }
-interface RadioProps extends RadioInputProps {
-    id: string;
-    required?: boolean;
-    labelVariant?: string;
-    errorMessage?: string;
-}
-declare const Radio: React.FC<RadioProps>;
-
-interface SelectThemeExtension<Value> {
-    select?: {
-        __default: Value;
-        disabled?: Value;
-        listbox?: {
-            __default: Value;
-            error?: Value;
-        };
-        section?: Value;
-        option?: Value;
-    };
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+interface OverlayProps extends ComponentProps<'div'> {
+    children: ReactNode;
+    open?: boolean;
+    container?: HTMLElement;
 }
-declare type SelectProps = {
-    labelVariant?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    width?: ResponsiveStyleValue<number | string>;
-    error?: boolean;
-    errorMessage?: string;
-} & ComponentProps<'select'> & AriaSelectProps<object> & SingleSelection;
-declare const Select: ({ labelVariant, placeholder, disabled, required, error, errorMessage, width, className, ...props }: SelectProps) => JSX.Element;
+declare const Overlay: ({ children, open, container, ...props }: OverlayProps) => JSX.Element | null;
 
-interface SliderThemeExtension<Value> {
-    slider?: {
-        [key: string]: Value;
-    };
+interface PopoverProps extends Omit<OverlayProps$1, 'isOpen' | 'isDismissable' | 'isKeyboardDismissDisabled'> {
+    children?: ReactNode;
+    open?: boolean;
+    dismissable?: boolean;
+    keyboardDismissDisabled?: boolean;
+    /**
+     * Adjust size of the popover. This is used to make the popover
+     * at least the same width as its anchor element.
+     */
+    minWidth?: number | string;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+
+interface UnderlayThemeExtension extends ThemeExtension<'Underlay'> {
 }
-interface SliderProps extends ComponentProps<'input'> {
+interface UnderlayProps extends HTMLAttributes<HTMLElement> {
     variant?: string;
+    size?: string;
 }
-declare const Slider: React.FC<SliderProps>;
+declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => JSX.Element;
 
-interface SwitchThemeExtension<Value> {
-    switch?: {
-        [key: string]: Value;
-    };
+interface RadioGroupThemeExtension extends ThemeExtensionsWithParts<'RadioGroup', ['container', 'group']> {
 }
-declare type SwitchProps = {
+interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRquired' | 'isReadOnly ' | 'validationState'> {
+    children: ReactNode[];
     variant?: string;
-    labelVariant?: string;
+    size?: string;
+    width?: string;
+    required?: boolean;
     disabled?: boolean;
-} & AriaSwitchProps & ToggleProps & ComponentProps<'input'>;
-declare const Switch: React.FC<SwitchProps>;
-
-interface TextThemeExtension<Value> {
-    text?: {
-        [key: string]: Value;
-    };
+    readOnly?: boolean;
+    error?: boolean;
 }
-interface TextOwnProps extends BoxOwnProps {
-    align?: ResponsiveStyleValue<string>;
-    color?: ResponsiveStyleValue<string>;
-    cursor?: ResponsiveStyleValue<string>;
-    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
-    outline?: ResponsiveStyleValue<string>;
-    userSelect?: ResponsiveStyleValue<string>;
+
+interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
 }
-interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+declare type CustomRadioProps = 'size' | 'width' | 'type' | 'defaultChecked' | 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
+interface RadioProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, CustomRadioProps>, AriaRadioProps {
+    width?: string;
+    disabled?: boolean;
 }
-declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
+declare const Radio: {
+    ({ width, disabled, ...props }: RadioProps): JSX.Element;
+    Group: ({ children, orientation, size, variant, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
+};
 
-interface TextareaThemeExtension<Value> {
-    textarea?: {
-        [key: string]: Value;
-    };
+interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
 }
-declare type TextareaProps = {
+interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'isOpen' | 'isLoading' | 'onLoadMore' | 'isDisabled' | 'isRequired' | 'validationState'>, Omit<ComponentProps<'select'>, 'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size'> {
     variant?: string;
-    htmlFor: string;
+    size?: string;
+    width?: string;
+    open?: boolean;
+    disabled?: boolean;
     required?: boolean;
     error?: boolean;
-} & AriaTextFieldProps & ComponentProps<'textarea'>;
-declare const Textarea: React.FC<TextareaProps>;
+}
+declare const Select: {
+    ({ variant, size, width, open, disabled, required, error, ...rest }: SelectProps): JSX.Element;
+    Option: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+    Section: <T_1>(props: _react_types_shared.SectionProps<T_1>) => JSX.Element;
+};
 
-interface TooltipThemeExtension<Value> {
-    tooltip?: {
-        [key: string]: Value;
-    };
+/**
+ * Thanks to react-aria: https://react-spectrum.adobe.com/react-aria/useSlider.html
+ */
+
+interface SliderThemeExtension extends ThemeExtensionsWithParts<'Slider', [
+    'track',
+    'thumb',
+    'label',
+    'output'
+]> {
+}
+interface SliderProps extends Omit<ComponentProps<'input'>, 'step' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>, 
+/**
+ * `react-aria` has a slightly different API for some events e.g `onChange`, `onFocus`
+ * `onBlur`. Thus, we adjust our regular props to match them.
+ */
+Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange'> {
+    variant?: string;
+    size?: string;
+    width?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    children?: ReactNode;
 }
-interface TooltipProps extends TooltipTriggerProps {
+/**
+ * The slider consists of two parts.
+ * A label + the output value and the slider functionality itself.
+ * The slider itself consists of a track line and a thumb.
+ */
+declare const Slider: ({ variant, size, width, ...props }: SliderProps) => JSX.Element;
+
+interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
+    'container',
+    'label',
+    'track',
+    'thumb'
+]> {
+}
+declare type CustomSwitchProps = 'size' | 'value' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
+interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<ComponentProps<'input'>, CustomSwitchProps> {
+    checked?: boolean;
     variant?: string;
+    size?: string;
+    width?: string;
 }
-declare const Tooltip: React.FC<TooltipProps>;
+declare const Switch: ({ variant, size, width, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
 
-declare const TooltipContext: React.Context<{
-    state?: TooltipTriggerState | undefined;
-}>;
-declare const TooltipTrigger: React.FC;
+interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
+    'table',
+    'header',
+    'row',
+    'cell'
+]> {
+}
+interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
+    variant?: string;
+    size?: string;
+}
+declare const Table: Table;
+/**
+ * Necessary since TypeScript can not infer the
+ * types of the @react-stately components.
+ */
+interface Table {
+    (props: TableProps): JSX.Element;
+    Body: typeof TableBody;
+    Cell: typeof Cell;
+    Column: typeof Column;
+    Header: typeof TableHeader;
+    Row: typeof Row;
+}
 
-interface ValidationMessageThemeExtension<Value> {
-    validation?: {
-        [key: string]: Value;
-    };
+interface TextThemeExtension extends ThemeExtension<'Text'> {
+}
+interface TextProps extends ThemeComponentProps, ComponentProps<'p'>, Omit<BoxOwnProps, 'variant'> {
+    align?: CSSObject['textAlign'];
+    color?: string;
+    cursor?: string;
+    fontSize?: string;
+    outline?: string;
+    children?: React.ReactNode;
+}
+declare const Text: ({ variant, size, align, color, fontSize, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+
+interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
 }
-interface ValidationMessageProps extends ComponentProps<'span'> {
+/**
+ * `react-aria` has a slightly different API for the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomTextAreEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSelect' | 'onPaste' | 'onCut' | 'onCompositionStart' | 'onCompositionUpdate' | 'onCompositionEnd' | 'onBeforeInput' | 'onInput';
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreEvents>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
+    size?: string;
+    width?: string;
+    value?: string;
+    defaultValue?: string;
 }
-declare const ValidationMessage: React.FC<ValidationMessageProps>;
+declare const TextArea: ({ variant, size, width, disabled, required, readOnly, error, ...props }: TextAreaProps) => JSX.Element;
 
-interface Theme extends Theme$1, RootThemeExtension<CSSObject>, BadgeThemeExtension<CSSObject>, ButtonThemeExtension<CSSObject>, CardThemeExtension<CSSObject>, CheckboxThemeExtension<CSSObject>, DividerThemeExtension<CSSObject>, ImageThemeExtension<CSSObject>, InputThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, LinkThemeExtension<CSSObject>, MenuThemeExtension<CSSObject>, MenuItemThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, SwitchThemeExtension<CSSObject>, TextThemeExtension<CSSObject>, TextareaThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
+interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
+    children: [trigger: ReactElement, menu: ReactElement];
+    disabled?: boolean;
+    open?: boolean;
 }
 
-interface ActionGroupProps extends ComponentProps<'div'> {
-    space?: ResponsiveStyleValue<string>;
-    verticalAlignment?: boolean;
+interface TooltipThemeExtension extends ThemeExtensionsWithParts<'Tooltip', ['container', 'arrow']> {
+}
+interface TooltipProps extends ComponentProps<'div'> {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+}
+declare const Tooltip: {
+    ({ children, variant, size }: TooltipProps): JSX.Element;
+    Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
+};
+
+interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, ContentThemeExtension, DialogThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
+}
+interface Theme extends Theme$1, RootThemeExtension<CSSObject> {
+    components: ComponentStyles;
 }
-declare const ActionGroup: React.FC<ActionGroupProps>;
 
 interface AsideProps {
     children: [ReactChild, ReactChild];
@@ -321,10 +495,11 @@ declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: Asid
  */
 
 interface AspectProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     ratio?: keyof typeof aspect;
     maxWidth?: string;
 }
-declare const Aspect: React.FC<AspectProps>;
+declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
 interface BreakoutProps extends ComponentProps<'div'> {
     horizontalAlign?: 'top' | 'bottom' | 'center';
@@ -339,54 +514,73 @@ interface CenterProps extends ComponentProps<'div'> {
 declare const Center: React.FC<CenterProps>;
 
 interface ColumnsProps {
+    children?: ReactNode;
     columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
     columnLimit?: number;
     collapseAt?: string;
 }
-declare const Columns: React.FC<ColumnsProps>;
+declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
 
-interface ModalDialogProps extends OverlayProps, AriaDialogProps {
-    variant?: string;
-    backdropVariant?: string;
+interface ContainerProps extends ComponentProps<'div'> {
+    contentType?: 'content' | 'header';
+    size?: keyof typeof size.content | keyof typeof size.header;
+    align?: 'left' | 'right' | 'center';
+    alignContainer?: 'left' | 'right' | 'center';
 }
+declare const Container: React.FC<ContainerProps>;
 
-interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
-    backdropVariant?: string;
-    close: ComponentProps<typeof Button>['onClick'];
-    isOpen: boolean;
-    title?: string;
-    variant?: string;
-    role?: 'dialog' | 'alertdialog';
-}
-declare const Dialog: React.FC<DialogProps>;
-declare const useDialogButtonProps: () => {
-    state: _react_stately_overlays.OverlayTriggerState;
-    openButtonProps: React.HTMLAttributes<HTMLSpanElement>;
-    openButtonRef: React.RefObject<HTMLElement>;
+declare const ALIGNMENT_X$1: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const ALIGNMENT_Y$1: {
+    top: string;
+    center: string;
+    bottom: string;
 };
-
-declare type FieldProps = {
-    variant?: string;
-    labelVariant?: string;
-    htmlFor: string;
-    required?: boolean;
-    error?: boolean;
-} & AriaTextFieldProps & ComponentProps<'input'>;
-declare const Field: React.FC<FieldProps>;
-
 interface InlineProps {
+    children?: ReactNode;
     space?: ResponsiveStyleValue<string>;
-    align?: 'top' | 'center' | 'bottom';
+    alignX?: keyof typeof ALIGNMENT_X$1;
+    alignY?: keyof typeof ALIGNMENT_Y$1;
 }
-declare const Inline: React.FC<InlineProps>;
+declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
 
+declare const ALIGNMENT_X: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const ALIGNMENT_Y: {
+    top: string;
+    center: string;
+    bottom: string;
+};
 interface StackProps {
     as?: 'div' | 'ul' | 'ol';
+    children?: ReactNode;
     space?: ResponsiveStyleValue<string>;
-    align?: 'left' | 'right' | 'center';
+    alignX?: keyof typeof ALIGNMENT_X;
+    alignY?: keyof typeof ALIGNMENT_Y;
+    stretch?: boolean;
 }
-declare const Stack: React.FC<StackProps>;
+declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
+
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>, 
+/**
+ * `react-aria` has a slightly different API for `onChange`, `onFocus`
+ * and `onBlur` events. Thus, we adjust our regular props to match them.
+ */
+Pick<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+    variant?: string;
+    size?: string;
+    width?: string;
+    value?: string;
+    defaultValue?: string;
+}
+declare const TextField: ({ variant, size, width, disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
 
 interface TilesProps {
     space?: ResponsiveStyleValue<string>;
@@ -394,12 +588,4 @@ interface TilesProps {
 }
 declare const Tiles: React.FC<TilesProps>;
 
-interface ContainerProps extends ComponentProps<'div'> {
-    contentType?: 'content' | 'header';
-    size?: keyof typeof size.content | keyof typeof size.header;
-    align?: 'left' | 'right' | 'center';
-    alignContainer?: 'left' | 'right' | 'center';
-}
-declare const Container: React.FC<ContainerProps>;
-
-export { ActionGroup, ActionGroupProps, Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Content, ContentProps, ContentThemeExtension, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreEvents, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };