@marigold/components 1.0.0-beta.0 → 1.1.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactElement, ReactChild } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, CollectionElement } from '@react-types/shared';
@@ -16,11 +16,11 @@ 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 { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
 export { SSRProvider } from '@react-aria/ssr';
-import { TooltipTriggerState } from '@react-stately/tooltip';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 interface RootThemeExtension<Value> {
@@ -177,6 +177,7 @@ interface ImageThemeExtension extends ThemeExtension<'Image'> {
 }
 interface ImageProps extends ComponentProps<'img'> {
     variant?: string;
+    size?: string;
     children?: never;
 }
 declare const Image: ({ variant, ...props }: ImageProps) => JSX.Element;
@@ -207,6 +208,7 @@ interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
     variant?: string;
     size?: string;
+    children?: ReactNode;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
 }
@@ -258,6 +260,7 @@ interface FieldBaseProps {
     children?: ReactNode;
     variant?: string;
     size?: string;
+    width?: string;
     disabled?: boolean;
     required?: boolean;
     label?: ReactNode;
@@ -276,10 +279,11 @@ interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberFiel
  * `react-aria` has a slightly different API for some DOM props.
  * Thus, we adjust our regular props to match them.
  */
-declare type CustomProps = 'size' | 'type' | 'value' | 'defaultValue' | 'step' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max';
+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;
 }
 declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
@@ -318,6 +322,7 @@ interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRq
     children: ReactNode[];
     variant?: string;
     size?: string;
+    width?: string;
     required?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
@@ -326,28 +331,29 @@ interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRq
 
 interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
 }
-declare type CustomRadioProps = 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
-interface RadioProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultChecked' | CustomRadioProps>, AriaRadioProps {
+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 Radio: {
-    ({ disabled, ...props }: RadioProps): JSX.Element;
-    Group: ({ children, orientation, size, variant, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
+    ({ width, disabled, ...props }: RadioProps): JSX.Element;
+    Group: ({ children, orientation, size, variant, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
 };
 
 interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
 }
 interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'isOpen' | 'isLoading' | 'onLoadMore' | 'isDisabled' | 'isRequired' | 'validationState'>, Omit<ComponentProps<'select'>, 'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size'> {
+    variant?: string;
+    size?: string;
+    width?: string;
     open?: boolean;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
-    variant?: string;
-    size?: string;
-    css?: CSSObject;
 }
 declare const Select: {
-    ({ open, disabled, required, error, variant, size, css, ...rest }: SelectProps): JSX.Element;
+    ({ 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;
 };
@@ -363,7 +369,7 @@ interface SliderThemeExtension extends ThemeExtensionsWithParts<'Slider', [
     'output'
 ]> {
 }
-interface SliderProps extends Omit<ComponentProps<'input'>, 'step' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size'>, 
+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.
@@ -371,16 +377,16 @@ interface SliderProps extends Omit<ComponentProps<'input'>, 'step' | 'value' | '
 Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange'> {
     variant?: string;
     size?: string;
+    width?: string;
     formatOptions?: Intl.NumberFormatOptions;
     children?: ReactNode;
 }
 /**
- * Component Slider
  * 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, ...props }: SliderProps) => JSX.Element;
+declare const Slider: ({ variant, size, width, ...props }: SliderProps) => JSX.Element;
 
 interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
     'container',
@@ -394,8 +400,9 @@ interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<Componen
     checked?: boolean;
     variant?: string;
     size?: string;
+    width?: string;
 }
-declare const Switch: ({ variant, size, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
+declare const Switch: ({ variant, size, width, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
 
 interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'table',
@@ -404,14 +411,15 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'cell'
 ]> {
 }
-interface TableProps extends Pick<TableProps$1<object>, 'onRowAction' | 'onCellAction'>, TableStateProps<object> {
+interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
+    stretch?: boolean;
 }
 declare const Table: Table;
 /**
  * Necessary since TypeScript can not infer the
- * types of the @react-stately components correctly.
+ * types of the @react-stately components.
  */
 interface Table {
     (props: TableProps): JSX.Element;
@@ -441,32 +449,36 @@ interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
  * 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' | CustomTextAreEvents | 'size'>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+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 TextArea: ({ disabled, required, readOnly, error, variant, size, ...props }: TextAreaProps) => JSX.Element;
+declare const TextArea: ({ variant, size, width, disabled, required, readOnly, error, rows, ...props }: TextAreaProps) => JSX.Element;
 
-interface TooltipThemeExtension<Value> {
-    tooltip?: {
-        [key: string]: Value;
-    };
+interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
+    children: [trigger: ReactElement, menu: ReactElement];
+    disabled?: boolean;
+    open?: boolean;
+}
+
+interface TooltipThemeExtension extends ThemeExtensionsWithParts<'Tooltip', ['container', 'arrow']> {
 }
-interface TooltipProps extends TooltipTriggerProps {
+interface TooltipProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     variant?: string;
+    size?: string;
 }
-declare const Tooltip: React.FC<TooltipProps>;
-
-declare const TooltipContext: React.Context<{
-    state?: TooltipTriggerState | undefined;
-}>;
-declare const TooltipTrigger: React.FC;
+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, UnderlayThemeExtension {
+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>, TooltipThemeExtension<CSSObject> {
+interface Theme extends Theme$1, RootThemeExtension<CSSObject> {
     components: ComponentStyles;
 }
 
@@ -492,16 +504,18 @@ interface AspectProps extends ComponentProps<'div'> {
 declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
 interface BreakoutProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     horizontalAlign?: 'top' | 'bottom' | 'center';
     verticalAlign?: 'left' | 'right' | 'center';
 }
-declare const Breakout: React.FC<BreakoutProps>;
+declare const Breakout: ({ horizontalAlign, verticalAlign, children, ...props }: BreakoutProps) => JSX.Element;
 
 interface CenterProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     maxWidth?: string;
     space?: ResponsiveStyleValue<string>;
 }
-declare const Center: React.FC<CenterProps>;
+declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => JSX.Element;
 
 interface ColumnsProps {
     children?: ReactNode;
@@ -513,28 +527,57 @@ interface ColumnsProps {
 declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
 
 interface ContainerProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     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>;
+declare const Container: ({ contentType, size, align, alignContainer, children, ...props }: ContainerProps) => JSX.Element;
 
+declare const ALIGNMENT_X$1: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const ALIGNMENT_Y$1: {
+    top: string;
+    center: string;
+    bottom: string;
+};
 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: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
+
+interface SplitProps extends ComponentProps<'div'> {
 }
-declare const Inline: React.FC<InlineProps>;
+declare const Split: (props: SplitProps) => 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';
-    space?: ResponsiveStyleValue<string>;
-    align?: 'left' | 'right' | 'center';
     children?: ReactNode;
+    space?: ResponsiveStyleValue<string>;
+    alignX?: keyof typeof ALIGNMENT_X;
+    alignY?: keyof typeof ALIGNMENT_Y;
+    stretch?: boolean;
 }
-declare const Stack: ({ space, align, children, ...props }: StackProps) => JSX.Element;
+declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
 
-interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size'>, 
+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.
@@ -542,15 +585,17 @@ interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaul
 Pick<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
+    width?: string;
     value?: string;
     defaultValue?: string;
 }
-declare const TextField: ({ disabled, required, readOnly, error, variant, size, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ variant, size, width, disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
 
 interface TilesProps {
+    children: ReactNode;
     space?: ResponsiveStyleValue<string>;
     itemMinWidth?: ResponsiveStyleValue<string>;
 }
-declare const Tiles: React.FC<TilesProps>;
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
 
-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, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };
+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, Split, SplitProps, 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 };