@marigold/components 2.1.3 → 3.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ResponsiveStyleValue, ThemeProviderProps, GlobalProps } from '@marigold/system';
+import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ThemeProviderProps, GlobalProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
 import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, NonZeroPercentage } from '@marigold/types';
@@ -34,6 +34,13 @@ interface BadgeProps extends ComponentProps<'div'> {
 }
 declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
 
+interface BodyThemeExtension extends ThemeExtension<'Body'> {
+}
+interface BodyProps extends ThemeComponentProps, ComponentProps<'section'> {
+    children?: ReactNode;
+}
+declare const Body: ({ children, variant, size, ...props }: BodyProps) => JSX.Element;
+
 interface ButtonThemeExtension extends ThemeExtension<'Button'> {
 }
 interface ButtonOwnProps extends PressEvents, ComponentProps<'button'> {
@@ -50,8 +57,15 @@ interface CardThemeExtension extends ThemeExtension<'Card'> {
 }
 interface CardProps extends ThemeComponentProps, ComponentProps<'div'> {
     children?: ReactNode;
+    p?: ResponsiveStyleValue<string>;
+    px?: ResponsiveStyleValue<string>;
+    py?: ResponsiveStyleValue<string>;
+    pt?: ResponsiveStyleValue<string>;
+    pb?: ResponsiveStyleValue<string>;
+    pl?: ResponsiveStyleValue<string>;
+    pr?: ResponsiveStyleValue<string>;
 }
-declare const Card: ({ children, variant, size, ...props }: CardProps) => JSX.Element;
+declare const Card: ({ children, variant, size, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
 
 interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
     'container',
@@ -63,7 +77,7 @@ interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'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';
+declare type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
 interface CheckboxProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
     children?: ReactNode;
     indeterminate?: boolean;
@@ -99,13 +113,6 @@ interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, Ar
 }
 declare const CheckboxGroup: ({ children, variant, size, required, disabled, readOnly, error, ...rest }: CheckboxGroupProps) => JSX.Element;
 
-interface ContentThemeExtension extends ThemeExtension<'Content'> {
-}
-interface ContentProps extends ThemeComponentProps, ComponentProps<'section'> {
-    children?: ReactNode;
-}
-declare const Content: ({ children, variant, size, ...props }: ContentProps) => JSX.Element;
-
 interface DialogTriggerProps {
     children: [trigger: ReactNode, menu: ReactNode];
     dismissable?: boolean;
@@ -470,8 +477,8 @@ interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
  * `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'> {
+declare type CustomTextAreaEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSelect' | 'onPaste' | 'onCut' | 'onCompositionStart' | 'onCompositionUpdate' | 'onCompositionEnd' | 'onBeforeInput' | 'onInput' | 'onKeyDown' | 'onKeyUp';
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreaEvents>, Pick<AriaTextFieldProps, CustomTextAreaEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
     width?: string;
@@ -498,11 +505,15 @@ declare const Tooltip: {
     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, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
+interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
 }
 interface Theme extends Theme$1 {
     components: ComponentStyles;
 }
+interface CustomizedTheme extends Theme$1 {
+    components?: Partial<ComponentStyles>;
+}
+declare const extendTheme: (baseTheme: Theme, extendTheme: CustomizedTheme) => Theme;
 
 interface AsideProps {
     children: [ReactElement, ReactElement];
@@ -527,10 +538,11 @@ declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Eleme
 
 interface BreakoutProps extends ComponentProps<'div'> {
     children?: ReactNode;
-    horizontalAlign?: 'top' | 'bottom' | 'center';
-    verticalAlign?: 'left' | 'right' | 'center';
+    alignY?: 'top' | 'bottom' | 'center';
+    alignX?: 'left' | 'right' | 'center';
+    height?: string;
 }
-declare const Breakout: ({ horizontalAlign, verticalAlign, children, ...props }: BreakoutProps) => JSX.Element;
+declare const Breakout: ({ alignX, alignY, height, children, ...props }: BreakoutProps) => JSX.Element;
 
 interface CenterProps extends ComponentProps<'div'> {
     children?: ReactNode;
@@ -544,18 +556,19 @@ interface ColumnsProps {
     columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
     columnLimit?: number;
-    collapseAt?: string;
+    collapseAt?: string | 0;
+    stretch?: boolean;
 }
-declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
+declare const Columns: ({ space, columns, collapseAt, stretch, 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';
+    alignItems?: 'left' | 'right' | 'center' | 'none';
 }
-declare const Container: ({ contentType, size, align, alignContainer, children, ...props }: ContainerProps) => JSX.Element;
+declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => JSX.Element;
 
 declare const ALIGNMENT_X$1: {
     left: string;
@@ -584,17 +597,18 @@ interface SplitProps extends ComponentProps<'div'> {
 declare const Split: (props: SplitProps) => JSX.Element;
 
 declare const ALIGNMENT_X: {
+    none: string;
     left: string;
     center: string;
     right: string;
 };
 declare const ALIGNMENT_Y: {
+    none: string;
     top: string;
     center: string;
     bottom: string;
 };
 interface StackProps {
-    as?: 'div' | 'ul' | 'ol';
     children?: ReactNode;
     space?: ResponsiveStyleValue<string>;
     alignX?: keyof typeof ALIGNMENT_X;
@@ -603,12 +617,17 @@ interface 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 the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomTextFieldEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'size' | 'width' | CustomTextFieldEvents>, 
 /**
  * `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'> {
+Pick<AriaTextFieldProps, CustomTextFieldEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
     width?: string;
@@ -624,4 +643,4 @@ interface 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, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, 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 };
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, 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, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, 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, extendTheme, useCheckboxGroupContext };