@marigold/components 8.0.2 → 9.0.1

package/dist/index.d.ts

@@ -5,9 +5,9 @@ import react__default, { ReactElement, ReactNode, ElementType, ComponentPropsWit
 import { AriaAccordionProps } from '@react-aria/accordion';
 import { ItemElement, SelectionMode, ItemProps, Node, Orientation } from '@react-types/shared';
 import { TreeState } from '@react-stately/tree';
-import { GapSpaceProp, AspectProp, WidthProp, AlignmentProp, alignment, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PlaceItemsProp, GridColumn, GridColsAlignProp, TextAlignProp, HeightProp, ObjectFitProp, ObjectPositionProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
+import { GapSpaceProp, AspectProp, WidthProp, alignment, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PaddingSpacePropX, PaddingSpacePropY, GridColsAlignProp, PlaceItemsProp, TextAlignProp, HeightProp, ObjectFitProp, ObjectPositionProp, AlignmentProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
 export { ThemeProvider, useTheme } from '@marigold/system';
-import { NonZeroPercentage, HtmlProps, DistributiveOmit } from '@marigold/types';
+import { NonZeroPercentage, DistributiveOmit, HtmlProps } from '@marigold/types';
 import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-components';
 export { Form, FormProps, RouterProvider } from 'react-aria-components';
 export { I18nProvider } from '@react-aria/i18n';
@@ -76,7 +76,7 @@ interface AsideProps extends GapSpaceProp {
 }
 declare const Aside: ({ children, sideWidth, space, side, wrap, }: AsideProps) => react_jsx_runtime.JSX.Element;
 
-interface AspectProps extends Omit<HtmlProps<'div'>, 'className'>, AspectProp {
+interface AspectProps extends AspectProp {
     /**
      * The children of the component.
      */
@@ -104,6 +104,9 @@ interface HelpTextProps {
 
 interface FieldBaseProps<T extends ElementType> extends WidthProp, Pick<HelpTextProps, 'description' | 'errorMessage'> {
     as?: T;
+    /**
+     * Specifies the label of the field.
+     */
     label?: ReactNode;
     variant?: string;
     size?: string;
@@ -259,7 +262,7 @@ interface ComboBoxComponent extends ForwardRefExoticComponent<ComboBoxProps & Re
 }
 declare const _ComboBox: ComboBoxComponent;
 
-interface BadgeProps extends Omit<HtmlProps<'div'>, 'className'> {
+interface BadgeProps {
     /**
      * Children of the component
      */
@@ -269,7 +272,7 @@ interface BadgeProps extends Omit<HtmlProps<'div'>, 'className'> {
 }
 declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
-interface BreakoutProps extends Omit<HtmlProps<'div'>, 'className'>, AlignmentProp {
+interface BreakoutProps {
     children?: ReactNode;
     /**
      * Set the height of the breakout element.
@@ -286,7 +289,7 @@ interface BreakoutProps extends Omit<HtmlProps<'div'>, 'className'>, AlignmentPr
      */
     alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
-declare const Breakout: ({ height, children, alignX, alignY, ...props }: BreakoutProps) => react_jsx_runtime.JSX.Element;
+declare const Breakout: ({ height, children, alignX, alignY, }: BreakoutProps) => react_jsx_runtime.JSX.Element;
 
 interface BodyProps extends Omit<HtmlProps<'section'>, 'className'> {
     /**
@@ -323,12 +326,12 @@ interface ButtonProps extends Omit<RAC.ButtonProps, RemovedProps$l> {
 }
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface CardProps extends Omit<HtmlProps<'div'>, 'className'>, GapSpaceProp, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp {
+interface CardProps extends GapSpaceProp, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp {
     children?: ReactNode;
     variant?: string;
     size?: string;
     /**
-     * Padding of the component.
+     * Padding of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
      */
     p?: PaddingSpaceProp['space'];
     /**
@@ -336,13 +339,13 @@ interface CardProps extends Omit<HtmlProps<'div'>, 'className'>, GapSpaceProp, P
      */
     px?: PaddingSpacePropX['spaceX'];
     /**
-     * Padding vertical (top and bottom) of the component.
+     * Padding vertical (top and bottom) of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
      */
     py?: PaddingSpacePropY['spaceY'];
 }
 declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
-interface CenterProps extends Omit<HtmlProps<'div'>, 'className'>, GapSpaceProp {
+interface CenterProps extends GapSpaceProp {
     children?: ReactNode;
     /**
      * The maximum width of the container.
@@ -352,8 +355,31 @@ interface CenterProps extends Omit<HtmlProps<'div'>, 'className'>, GapSpaceProp
 }
 declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => react_jsx_runtime.JSX.Element;
 
-type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
-interface CheckboxProps extends Omit<HtmlProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<RAC.CheckboxProps, CustomCheckboxProps> {
+type RemovedProps$k = 'className' | 'style' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'isSelected' | 'isIndeterminate' | 'defaultSelected';
+interface CheckboxProps extends Omit<RAC.CheckboxProps, RemovedProps$k> {
+    /**
+     * Whether the element should be checked (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * Whether the element should be checked (uncontrolled).
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the checkbox is read-only.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Use when it represents both selected and not selected values.
      * @default false
@@ -366,11 +392,15 @@ interface CheckboxProps extends Omit<HtmlProps<'input'>, 'size' | 'type' | 'defa
     error?: boolean;
     variant?: string;
     size?: string;
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
 }
 declare const _Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLLabelElement>>;
 
-type RemovedProps$k = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly';
-interface CheckboxGroupProps extends Omit<RAC.CheckboxGroupProps, RemovedProps$k>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
+type RemovedProps$j = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly';
+interface CheckboxGroupProps extends Omit<RAC.CheckboxGroupProps, RemovedProps$j>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
     /**
      * The children of the component
      */
@@ -431,7 +461,7 @@ interface ColumnsProps extends GapSpaceProp {
 }
 declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => react_jsx_runtime.JSX.Element;
 
-interface ContainerProps extends Omit<HtmlProps<'div'>, 'className'>, PlaceItemsProp, GridColumn, GridColsAlignProp {
+interface ContainerProps {
     children?: ReactNode;
     /**
      * The content type of the container.
@@ -443,7 +473,7 @@ interface ContainerProps extends Omit<HtmlProps<'div'>, 'className'>, PlaceItems
      * Set alignment the content inside the container.
      * @default left
      */
-    align?: 'left' | 'right' | 'center';
+    align?: GridColsAlignProp['align'];
     /**
      * Set alignment of the items inside the container.
      */
@@ -482,8 +512,7 @@ interface DialogTriggerProps extends Omit<RAC.DialogTriggerProps, 'isOpen'> {
     isNonModal?: boolean;
 }
 
-type RemovedProps$j = 'className' | 'level';
-interface HeadlineProps extends Omit<RAC.HeadingProps, RemovedProps$j>, TextAlignProp {
+interface HeadlineProps extends TextAlignProp {
     /**
      * Set the color of the headline.
      */
@@ -491,9 +520,17 @@ interface HeadlineProps extends Omit<RAC.HeadingProps, RemovedProps$j>, TextAlig
     variant?: string;
     size?: string;
     /**
-     * Set a different level from theme, values are from 1 - 6.
+     * Set a different level.
+     */
+    level?: '1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Children of the component.
      */
-    level?: '1' | '2' | '3' | '4' | '5' | '6' | RAC.HeadingProps['level'];
+    children?: ReactNode;
+    /**
+     * A slot to place the element in.
+     */
+    slot?: string;
 }
 declare const _Headline: ({ variant, size, children, align, color, level, ...props }: HeadlineProps) => react_jsx_runtime.JSX.Element;
 
@@ -534,14 +571,29 @@ interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
 declare const Footer: ({ children, variant, size, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
 interface GridAreaProps {
+    /**
+     * Name of the grid area slot to put the component.
+     */
     name: string;
+    /**
+     * Children of the component.
+     */
     children?: ReactNode;
 }
 
 type TemplateValue = 'none' | 'auto' | 'min-content' | 'max-content' | (string & {}) | number;
 interface GridProps extends GapSpaceProp, HeightProp {
+    /**
+     * Specifies the named grid areas, much like `grid-template-areas`.
+     */
     areas: string[];
+    /**
+     * Specifies the width of each column in the grid.
+     */
     columns: TemplateValue[];
+    /**
+     * Specifies the height of each rows in the grid.
+     */
     rows: TemplateValue[];
     /**
      * Children of the layout.
@@ -563,7 +615,7 @@ interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
 }
 declare const _Header: ({ variant, size, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
-interface ImageProps extends Omit<HtmlProps<'img'>, 'className'>, ObjectFitProp, ObjectPositionProp {
+interface ImageProps extends Pick<HtmlProps<'img'>, 'src' | 'srcSet' | 'sizes' | 'slot' | 'title' | 'height' | 'width' | 'role' | 'datatype'>, ObjectFitProp, ObjectPositionProp {
     variant?: string;
     size?: string;
     /**
@@ -696,17 +748,17 @@ type InsetProps = {
     children: ReactNode;
     space?: never;
     /**
-     * Horizontal alignment for the children
+     * Horizontal alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
      */
     spaceX?: PaddingSpacePropX['spaceX'];
     /**
-     * Vertical alignment for the children
+     * Vertical alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
      */
     spaceY?: PaddingSpacePropY['spaceY'];
 } | {
     children: ReactNode;
     /**
-     * The space between the children
+     * The space between the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
      */
     space?: PaddingSpaceProp['space'];
     spaceX?: never;
@@ -733,11 +785,14 @@ interface LinkProps extends Omit<RAC.LinkProps, RemovedProps$d> {
 }
 declare const _Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-interface ListItemProps extends Omit<HtmlProps<'li'>, 'className'> {
+interface ListItemProps {
+    /**
+     * Children of the component.
+     */
     children?: ReactNode;
 }
 
-interface ListProps extends Omit<HtmlProps<'ul'>, 'className'> {
+interface ListProps {
     variant?: string;
     size?: string;
     /**
@@ -817,10 +872,16 @@ interface ActionMenuProps extends RAC.MenuProps<object> {
 declare const ActionMenu: ({ variant, size, disabled, ...props }: ActionMenuProps) => react_jsx_runtime.JSX.Element;
 
 interface SectionMessageContentProps {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
 }
 
 interface SectionMessageTitleProps {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
 }
 
@@ -830,9 +891,13 @@ declare const icons: {
     warning: () => react_jsx_runtime.JSX.Element;
     error: () => react_jsx_runtime.JSX.Element;
 };
-interface SectionMessageProps extends Omit<HtmlProps<'div'>, 'className'> {
+interface SectionMessageProps {
     variant?: keyof typeof icons;
     size?: string;
+    /**
+     * The children of the component.
+     */
+    children?: ReactNode;
 }
 declare const SectionMessage: {
     ({ variant, size, children, ...props }: SectionMessageProps): react_jsx_runtime.JSX.Element;
@@ -1155,7 +1220,13 @@ interface SelectListComponent extends ForwardRefExoticComponent<SelectListProps
 declare const _SelectList: SelectListComponent;
 
 interface ScrollableProps extends WidthProp {
+    /**
+     * Children of the layout.
+     */
     children?: ReactNode;
+    /**
+     * Specifies the height of the scrollable container.
+     */
     height?: string;
 }
 declare const Scrollable: ({ children, width, height, ...props }: ScrollableProps) => react_jsx_runtime.JSX.Element;
@@ -1180,11 +1251,14 @@ interface SliderProps<T> extends Omit<RAC.SliderProps<T>, 'isDisabled' | 'label'
 }
 declare const _Slider: react__default.ForwardRefExoticComponent<SliderProps<number | number[]> & react__default.RefAttributes<HTMLDivElement>>;
 
-interface SplitProps extends Omit<HtmlProps<'div'>, 'className'> {
+interface SplitProps {
 }
-declare const Split: (props: SplitProps) => react_jsx_runtime.JSX.Element;
+declare const Split: () => react_jsx_runtime.JSX.Element;
 
-interface StackProps extends AlignmentProp, GapSpaceProp {
+interface StackProps extends GapSpaceProp {
+    /**
+     * Children of the component.
+     */
     children?: ReactNode;
     /**
      * Stretch to fill space (vertical AND horizontal, useful if you want to change y alignment).
@@ -1232,7 +1306,7 @@ interface SwitchProps extends Omit<RAC.SwitchProps, RemovedProps$5> {
 }
 declare const _Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLLabelElement>>;
 
-interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
+interface TableProps extends Pick<AriaTableProps, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes' | 'showDragButtons' | 'allowDuplicateSelectionEvents'> {
     variant?: string;
     size?: string;
     /**
@@ -1250,6 +1324,10 @@ interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAc
      * @default false
      */
     disableKeyboardNavigation?: boolean;
+    /**
+     * Content to display when there are no rows in the table.
+     */
+    emptyState?: () => ReactNode;
 }
 interface RowProps extends RowProps$1<any> {
     variant?: string;
@@ -1276,17 +1354,17 @@ interface Table {
     Row: (props: RowProps) => JSX.Element;
 }
 
-interface TextProps extends Omit<HtmlProps<'p'>, 'className'>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
+interface TextProps extends TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
     /**
      * The children of the component
      */
     children?: React.ReactNode;
-    variant?: string;
     /**
      * Set the text color.
      * @default currentColor
      */
     color?: string;
+    variant?: string;
     size?: string;
 }
 declare const Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
@@ -1503,4 +1581,4 @@ declare const _Tabs: {
     Item: (props: TabProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionOwnItemProps, type AccordionProps, ActionMenu, type GridAreaProps as AreaProps, Aside, type AsideProps, Aspect, type AspectProps, _Autocomplete as Autocomplete, type AutocompleteProps, Badge, type BadgeProps, Body, type BodyProps, Breakout, type BreakoutProps, _Button as Button, type ButtonProps, _Calendar as Calendar, type CalendarProps, Card, type CardProps, Center, type CenterProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CloseButton, type ColumnProps, Columns, type ColumnsProps, _ComboBox as ComboBox, type ComboBoxProps, Container, type ContainerProps, type CustomCheckboxProps, _DateField as DateField, type DateFieldProps, _DatePicker as DatePicker, type DatePickerProps, _Dialog as Dialog, type DialogProps, _Divider as Divider, type DividerProps, FieldBase, type FieldBaseProps, FieldGroup, FieldGroupContext, type FieldGroupContextProps, type FieldGroupProps, Footer, type FooterProps, Grid, type GridProps, _Header as Header, type HeaderProps, _Headline as Headline, type HeadlineProps, Image, type ImageProps, Inline, type InlineProps, _Input as Input, type InputProps, Inset, type InsetProps, _Label as Label, type LabelProps, _Link as Link, type LinkProps, List, type ListProps, MarigoldProvider, type MarigoldProviderProps, _Menu as Menu, type MenuProps, _Modal as Modal, type ModalProps, type MultiSelectItemProps, type MultiSelectProps, Multiselect, _NumberField as NumberField, type NumberFieldProps, OverlayContainerProvider, _Popover as Popover, type PopoverProps, _Radio as Radio, type RadioComponent, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, type RowProps, Scrollable, type ScrollableProps, _SearchField as SearchField, type SearchFieldProps, SectionMessage, type SectionMessageProps, _Select as Select, type SelectComponent, _SelectList as SelectList, type SelectListProps, type SelectProps, _Slider as Slider, type SliderProps, Split, type SplitProps, Stack, type StackProps, _Switch as Switch, type SwitchProps, Table, type TableProps, _Tabs as Tabs, type TabsProps, _Tag as Tag, type TagProps, type TemplateValue, Text, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, type TextProps, Tiles, type TilesProps, _Tooltip as Tooltip, type TooltipProps, Underlay, type UnderlayProps, XLoader, _Calendar, useFieldGroupContext, usePortalContainer };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionOwnItemProps, type AccordionProps, ActionMenu, type GridAreaProps as AreaProps, Aside, type AsideProps, Aspect, type AspectProps, _Autocomplete as Autocomplete, type AutocompleteProps, Badge, type BadgeProps, Body, type BodyProps, Breakout, type BreakoutProps, _Button as Button, type ButtonProps, _Calendar as Calendar, type CalendarProps, Card, type CardProps, Center, type CenterProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CloseButton, type ColumnProps, Columns, type ColumnsProps, _ComboBox as ComboBox, type ComboBoxProps, Container, type ContainerProps, _DateField as DateField, type DateFieldProps, _DatePicker as DatePicker, type DatePickerProps, _Dialog as Dialog, type DialogProps, _Divider as Divider, type DividerProps, FieldBase, type FieldBaseProps, FieldGroup, FieldGroupContext, type FieldGroupContextProps, type FieldGroupProps, Footer, type FooterProps, Grid, type GridProps, _Header as Header, type HeaderProps, _Headline as Headline, type HeadlineProps, Image, type ImageProps, Inline, type InlineProps, _Input as Input, type InputProps, Inset, type InsetProps, _Label as Label, type LabelProps, _Link as Link, type LinkProps, List, type ListProps, MarigoldProvider, type MarigoldProviderProps, _Menu as Menu, type MenuProps, _Modal as Modal, type ModalProps, type MultiSelectItemProps, type MultiSelectProps, Multiselect, _NumberField as NumberField, type NumberFieldProps, OverlayContainerProvider, _Popover as Popover, type PopoverProps, _Radio as Radio, type RadioComponent, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, type RemovedProps$k as RemovedProps, type RowProps, Scrollable, type ScrollableProps, _SearchField as SearchField, type SearchFieldProps, SectionMessage, type SectionMessageProps, _Select as Select, type SelectComponent, _SelectList as SelectList, type SelectListProps, type SelectProps, _Slider as Slider, type SliderProps, Split, type SplitProps, Stack, type StackProps, _Switch as Switch, type SwitchProps, Table, type TableProps, _Tabs as Tabs, type TabsProps, _Tag as Tag, type TagProps, type TemplateValue, Text, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, type TextProps, Tiles, type TilesProps, _Tooltip as Tooltip, type TooltipProps, Underlay, type UnderlayProps, XLoader, _Calendar, useFieldGroupContext, usePortalContainer };