@marigold/components 5.4.0 → 5.6.0

package/dist/index.d.ts

@@ -1,14 +1,18 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtensionsWithParts, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
+import { ThemeExtensionsWithParts, CSSObject, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, ThemeProvider, useTheme } from '@marigold/system';
+import React, { ReactElement, ReactNode, Key, HTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TreeState } from '@react-stately/tree';
 import * as _react_types_shared from '@react-types/shared';
-import { PressEvents, CollectionElement, StyleProps } from '@react-types/shared';
-import React, { Key, ReactNode, HTMLAttributes, LabelHTMLAttributes, ReactElement, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ItemElement, ItemProps, Node, PressEvents, FocusableDOMProps, CollectionElement, StyleProps, LabelableProps, HelpTextProps } from '@react-types/shared';
 import { SearchAutocompleteProps } from '@react-types/autocomplete';
 import { HtmlProps, PropsOf, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from '@react-types/checkbox';
 import { AriaDialogProps } from '@react-types/dialog';
 import { SeparatorProps } from '@react-aria/separator';
+import { AriaDateFieldProps, AriaDatePickerProps } from '@react-aria/datepicker';
+import { DateValue, CalendarDate } from '@internationalized/date';
+import { AriaButtonProps } from '@react-aria/button';
 import { AriaNumberFieldProps } from '@react-types/numberfield';
 import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 import { Item, Section } from '@react-stately/collections';
@@ -20,13 +24,45 @@ import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, Column, Table
 import { AriaTextFieldProps } from '@react-types/textfield';
 import { PositionProps } from '@react-types/overlays';
 import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
+import { AriaCalendarProps, DateValue as DateValue$1, AriaCalendarCellProps, AriaCalendarGridProps } from '@react-aria/calendar';
+import { AriaTabListProps } from '@react-types/tabs';
+import { AriaAccordionProps } from '@react-aria/accordion';
 import { aspect, size } from '@marigold/tokens';
+import { ComboBoxProps as ComboBoxProps$1 } from '@react-types/combobox';
 import { CheckboxGroupState } from '@react-stately/checkbox';
+import { CalendarState } from '@react-stately/calendar';
 import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
 import { OverlayTriggerState } from '@react-stately/overlays';
 export { SSRProvider } from '@react-aria/ssr';
+import { AriaTagGroupProps } from '@react-aria/tag';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
+interface AccordionProps extends Omit<AriaAccordionProps<object>, 'children' | 'expandedKeys' | 'disabledKeys' | 'onExpandedChange'> {
+    children: ItemElement<object>[] | ItemElement<object>;
+    selectionMode?: string;
+}
+declare const Accordion: {
+    ({ children, ...props }: AccordionProps): JSX.Element;
+    Item: <T>(props: AccordionOwnItemProps<T>) => JSX.Element;
+};
+interface AccordionOwnItemProps<T> extends ItemProps<T> {
+    variant?: string;
+    size?: string;
+    title: string | ReactElement;
+}
+
+interface AccordionThemeExtension extends ThemeExtensionsWithParts<'Accordion', ['button', 'item']> {
+}
+interface AccordionItemProps {
+    item: Node<object>;
+    state: TreeState<object>;
+    css?: CSSObject;
+    title: string | ReactNode;
+    variant?: string;
+    size?: string;
+}
+declare const AccordionItem: ({ item, state, css, title, variant, size, ...props }: AccordionItemProps) => JSX.Element;
+
 interface AutocompleteThemeExtension extends ThemeExtensionsWithParts<'Autocomplete', ['icon', 'clear']> {
 }
 interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
@@ -77,7 +113,7 @@ declare const Body: ({ children, variant, size, ...props }: BodyProps) => JSX.El
 
 interface ButtonThemeExtension extends ThemeExtension<'Button'> {
 }
-interface ButtonOwnProps extends PressEvents, HtmlProps<'button'> {
+interface ButtonOwnProps extends PressEvents, FocusableDOMProps, HtmlProps<'button'> {
     children?: ReactNode;
     variant?: string;
     size?: string;
@@ -91,6 +127,7 @@ interface CardThemeExtension extends ThemeExtension<'Card'> {
 }
 interface CardProps extends ThemeComponentProps, HtmlProps<'div'> {
     children?: ReactNode;
+    space?: ResponsiveStyleValue<string>;
     p?: ResponsiveStyleValue<string>;
     px?: ResponsiveStyleValue<string>;
     py?: ResponsiveStyleValue<string>;
@@ -99,7 +136,7 @@ interface CardProps extends ThemeComponentProps, HtmlProps<'div'> {
     pl?: ResponsiveStyleValue<string>;
     pr?: ResponsiveStyleValue<string>;
 }
-declare const Card: ({ children, variant, size, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
+declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
 
 interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
     'container',
@@ -229,6 +266,33 @@ interface FieldGroupProps {
 }
 declare const FieldGroup: ({ labelWidth, children }: FieldGroupProps) => JSX.Element;
 
+interface DateFieldThemeExtension extends ThemeExtensionsWithParts<'DateField', [
+    'segment',
+    'placeholder',
+    'field',
+    'calendarButton',
+    'segmentsContainer'
+]> {
+}
+interface DateFieldProps extends Omit<AriaDateFieldProps<DateValue>, 'isDisabled' | 'isReadOnly' | 'isRequired'> {
+    onChange?: (value: DateValue) => void;
+    value?: DateValue | null;
+    defaultValue?: DateValue | null;
+    ref?: React.RefObject<unknown> | undefined;
+    icon?: ReactElement;
+    action?: ReactElement;
+    buttonProps?: AriaButtonProps<'button'>;
+    isPressed?: boolean;
+    error?: boolean;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    variant?: string;
+    size?: string;
+}
+declare const DateField: ({ disabled, readOnly, required, error, errorMessage, errorMessageProps, buttonProps, variant, size, icon, action, isPressed, ...res }: DateFieldProps) => JSX.Element;
+
 interface FooterThemeExtension extends ThemeExtension<'Footer'> {
 }
 interface FooterProps extends ThemeComponentProps, HtmlProps<'footer'> {
@@ -325,7 +389,7 @@ interface MenuTriggerProps {
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item']> {
+interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item', 'section']> {
 }
 interface MenuProps extends Omit<HtmlProps<'ul'>, 'onSelect' | 'size'> {
     children: CollectionElement<object> | CollectionElement<object>[];
@@ -337,6 +401,7 @@ declare const Menu: {
     ({ variant, size, ...props }: MenuProps): JSX.Element;
     Trigger: ({ disabled, open, onOpenChange, children, }: MenuTriggerProps) => JSX.Element;
     Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+    Section: <T_1>(props: _react_types_shared.SectionProps<T_1>) => JSX.Element;
 };
 
 interface ActionMenuProps extends MenuProps {
@@ -585,7 +650,58 @@ declare const Tooltip: {
     Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
 };
 
-interface ComponentStyles extends AutocompleteThemeExtension, BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
+interface CalendarProps extends Omit<AriaCalendarProps<DateValue$1>, 'isDisabled' | 'isReadOnly'> {
+    disabled?: boolean;
+    readOnly?: boolean;
+    variant?: string;
+    size?: string;
+}
+interface CalendarThemeExtension extends ThemeExtensionsWithParts<'Calendar', [
+    'calendar',
+    'calendarCell',
+    'calendarControllers'
+]> {
+}
+declare const Calendar: ({ disabled, readOnly, size, variant, ...rest }: CalendarProps) => JSX.Element;
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+    state: CalendarState;
+}
+declare const CalendarCell: (props: CalendarCellProps) => JSX.Element;
+
+interface CalendarGridProps extends AriaCalendarGridProps {
+    state: CalendarState;
+}
+declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => JSX.Element;
+
+interface DatePickerThemeExtension extends ThemeExtensionsWithParts<'DatePicker', ['field', 'actionButton']> {
+}
+interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'isOpen'> {
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    open?: boolean;
+    error?: boolean;
+    shouldCloseOnSelect?: boolean;
+}
+declare const DatePicker: ({ disabled, required, readonly, open, error, shouldCloseOnSelect, ...rest }: DatePickerProps) => JSX.Element;
+
+interface TagThemeExtension extends ThemeExtensionsWithParts<'Tag', ['tag', 'gridCell', 'closeButton']> {
+}
+
+interface TabsThemeExtension extends ThemeExtensionsWithParts<'Tabs', ['tabs', 'tab', 'tabPanel']> {
+}
+interface TabsProps extends Omit<AriaTabListProps<object>, 'orientation' | 'isDisabled'> {
+    gap?: number;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+}
+declare const Tabs: {
+    ({ gap, size, disabled, ...res }: TabsProps): JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
+interface ComponentStyles extends AccordionThemeExtension, AutocompleteThemeExtension, BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, DateFieldThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, DateFieldThemeExtension, CalendarThemeExtension, DatePickerThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension, TagThemeExtension, CalendarThemeExtension, TabsThemeExtension {
 }
 interface Theme extends Theme$1 {
     components: ComponentStyles;
@@ -616,6 +732,23 @@ interface AspectProps extends HtmlProps<'div'> {
 }
 declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
+interface ComboBoxProps extends Omit<ComboBoxProps$1<object>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'defaultInputValue' | 'inputValue' | 'onInputChange'> {
+    variant?: string;
+    size?: string;
+    error?: boolean;
+    width?: string;
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    defaultValue?: ComboBoxProps$1<object>['defaultInputValue'];
+    value?: ComboBoxProps$1<object>['inputValue'];
+    onChange?: ComboBoxProps$1<object>['onInputChange'];
+}
+declare const ComboBox: {
+    ({ error, width, disabled, required, readOnly, defaultValue, value, onChange, ...rest }: ComboBoxProps): JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
 interface BreakoutProps extends HtmlProps<'div'> {
     children?: ReactNode;
     alignY?: 'top' | 'bottom' | 'center';
@@ -738,6 +871,23 @@ interface TilesProps {
 }
 declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => JSX.Element;
 
+interface TagGroupProps extends Omit<AriaTagGroupProps<object>, 'isRequired' | 'validationState'>, LabelableProps, HelpTextProps {
+    width?: string;
+    required?: boolean;
+    error?: boolean;
+}
+declare const TagGroup: ({ width, required, error, ...rest }: TagGroupProps) => JSX.Element;
+
+declare const Tag: TagComponent;
+/**
+ * We need this so that TypeScripts allows us to add
+ * additional properties to the component (function).
+ */
+type ItemComponent = typeof Item;
+interface TagComponent extends ItemComponent {
+    Group: typeof TagGroup;
+}
+
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 
-export { ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, AutocompleteThemeExtension, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, FieldThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Inset, InsetProps, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Modal, ModalProps, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RadioThemeExtension, RowProps, 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, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext, useFieldGroupContext };
+export { Accordion, AccordionItem, AccordionItemProps, AccordionOwnItemProps, AccordionProps, AccordionThemeExtension, ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, AutocompleteThemeExtension, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Calendar, CalendarCell, CalendarCellProps, CalendarGrid, CalendarGridProps, CalendarProps, CalendarThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, ComboBox, ComboBoxProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, DateField, DateFieldProps, DateFieldThemeExtension, DatePicker, DatePickerProps, DatePickerThemeExtension, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, FieldThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Inset, InsetProps, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Modal, ModalProps, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RadioThemeExtension, RowProps, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Tabs, TabsThemeExtension, Tag, TagComponent, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext, useFieldGroupContext };