@marigold/components 5.2.0 → 5.4.0

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
+import { ThemeExtensionsWithParts, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactNode, HTMLAttributes, LabelHTMLAttributes, Key, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
-import { HtmlProps, PropsOf, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 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 { 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';
@@ -20,13 +21,44 @@ import { AriaTextFieldProps } from '@react-types/textfield';
 import { PositionProps } from '@react-types/overlays';
 import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
 import { aspect, size } from '@marigold/tokens';
-import { SearchAutocompleteProps } from '@react-types/autocomplete';
 import { CheckboxGroupState } from '@react-stately/checkbox';
 import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
 import { OverlayTriggerState } from '@react-stately/overlays';
 export { SSRProvider } from '@react-aria/ssr';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
+interface AutocompleteThemeExtension extends ThemeExtensionsWithParts<'Autocomplete', ['icon', 'clear']> {
+}
+interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    defaultValue?: SearchAutocompleteProps<object>['defaultInputValue'];
+    value?: SearchAutocompleteProps<object>['inputValue'];
+    /**
+     * Handler that is called when the input value changes.
+     */
+    onChange?: SearchAutocompleteProps<object>['onInputChange'];
+    /**
+     * Handler that is called when the SearchAutocomplete is submitted.
+     *
+     * A `key` will be passed if the submission is a selected item (e.g. a user
+     * clicks or presses enter on an option). If the input is a custom `value`, `key` will be `null`.
+     *
+     * A `value` will be passed if the submission is a custom value (e.g. a user
+     * types then presses enter). If the input is a selected item, `value` will be `null`.
+     */
+    onSubmit?: (key: Key | null, value: string | null) => void;
+    variant?: string;
+    size?: string;
+    width?: string;
+}
+declare const Autocomplete: {
+    ({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
 interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
 }
 interface BadgeProps extends HtmlProps<'div'> {
@@ -236,24 +268,17 @@ interface ImageProps extends HtmlProps<'img'> {
 }
 declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => JSX.Element;
 
-interface InputFieldOwnProps extends Omit<HtmlProps<'input'>, 'size'> {
+interface InputThemeExtension extends ThemeExtensionsWithParts<'Input', ['input', 'icon', 'container']> {
 }
-interface InputFieldProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputFieldOwnProps {
-}
-declare const InputField: React.ForwardRefExoticComponent<InputFieldOwnProps & React.RefAttributes<HTMLInputElement>>;
-
-interface InputThemeExtension extends ThemeExtension<'Input'> {
-}
-interface InputProps extends Omit<HtmlProps<'div'>, 'size'> {
-    children: ReactNode;
-    space?: ResponsiveStyleValue<string>;
+interface InputOwnProps extends Omit<HtmlProps<'input'>, 'size'> {
+    icon?: ReactElement;
+    action?: ReactElement;
     variant?: string;
     size?: string;
 }
-declare const Input: {
-    ({ space, children, variant, size, ...props }: InputProps): JSX.Element;
-    Field: React.ForwardRefExoticComponent<InputFieldOwnProps & React.RefAttributes<HTMLInputElement>>;
-};
+interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
+}
+declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
 interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
@@ -520,10 +545,11 @@ interface TextProps extends ThemeComponentProps, HtmlProps<'p'> {
     cursor?: string;
     fontSize?: string;
     fontWeight?: string;
+    fontStyle?: string;
     outline?: string;
     children?: React.ReactNode;
 }
-declare const Text: ({ variant, size, display, align, color, fontSize, fontWeight, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+declare const Text: ({ variant, size, display, align, color, fontSize, fontStyle, fontWeight, cursor, outline, children, ...props }: TextProps) => JSX.Element;
 
 interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
 }
@@ -559,7 +585,7 @@ declare const Tooltip: {
     Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
 };
 
-interface ComponentStyles extends 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 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 Theme extends Theme$1 {
     components: ComponentStyles;
@@ -590,34 +616,6 @@ interface AspectProps extends HtmlProps<'div'> {
 }
 declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
-interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    error?: boolean;
-    defaultValue?: SearchAutocompleteProps<object>['defaultInputValue'];
-    value?: SearchAutocompleteProps<object>['inputValue'];
-    /**
-     * Handler that is called when the input value changes.
-     */
-    onChange?: SearchAutocompleteProps<object>['onInputChange'];
-    /**
-     * Handler that is called when the SearchAutocomplete is submitted.
-     *
-     * A `key` will be passed if the submission is a selected item (e.g. a user
-     * clicks or presses enter on an option). If the input is a custom `value`, `key` will be `null`.
-     *
-     * A `value` will be passed if the submission is a custom value (e.g. a user
-     * types then presses enter). If the input is a selected item, `value` will be `null`.
-     */
-    onSubmit?: (key: Key | null, value: string | null) => void;
-    width?: string;
-}
-declare const Autocomplete: {
-    ({ disabled, required, readOnly, error, onChange, value, defaultValue, width, ...rest }: AutocompleteProps): JSX.Element;
-    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
-};
-
 interface BreakoutProps extends HtmlProps<'div'> {
     children?: ReactNode;
     alignY?: 'top' | 'bottom' | 'center';
@@ -742,4 +740,4 @@ declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...pr
 
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 
-export { ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, 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, InputField, InputFieldOwnProps, InputFieldProps, 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 { 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 };