@marigold/components 1.0.1 → 1.2.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';
+import { ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, StateAttrProps, CSSObject, Theme as Theme$1, ResponsiveStyleValue, ThemeProviderProps, GlobalProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactElement, ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, 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';
@@ -10,6 +10,7 @@ import { AriaDialogProps } from '@react-types/dialog';
 import { SeparatorProps } from '@react-aria/separator';
 import { AriaNumberFieldProps } from '@react-types/numberfield';
 import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
+import { Item, Section } from '@react-stately/collections';
 import { AriaSelectProps } from '@react-types/select';
 import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
@@ -23,16 +24,6 @@ import { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
 export { SSRProvider } from '@react-aria/ssr';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
-interface RootThemeExtension<Value> {
-    root?: {
-        body?: Value;
-        html?: Value;
-    };
-}
-interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T> {
-}
-declare function MarigoldProvider<T extends Theme$1>({ theme, children, }: MarigoldProviderProps<T>): JSX.Element;
-
 interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
 }
 interface BadgeProps extends ComponentProps<'div'> {
@@ -76,7 +67,7 @@ interface CheckboxProps extends ThemeComponentProps, Omit<ComponentProps<'input'
     indeterminate?: boolean;
     error?: boolean;
 }
-declare const Checkbox: ({ size, variant, disabled, checked, defaultChecked, indeterminate, readOnly, required, error, ...props }: CheckboxProps) => JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface CheckboxGroupContextProps extends CheckboxGroupState {
     error?: boolean;
@@ -328,6 +319,7 @@ interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRq
     readOnly?: boolean;
     error?: boolean;
 }
+declare const RadioGroup: ({ children, orientation, size, variant, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
 
 interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
 }
@@ -336,10 +328,14 @@ interface RadioProps extends ThemeComponentProps, Omit<ComponentProps<'input'>,
     width?: string;
     disabled?: boolean;
 }
-declare const Radio: {
-    ({ width, disabled, ...props }: RadioProps): JSX.Element;
-    Group: ({ children, orientation, size, variant, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
-};
+declare const Radio: RadioComponent;
+/**
+ * We need this so that TypeScripts allows us to add
+ * additional properties to the component (function).
+ */
+interface RadioComponent extends ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>> {
+    Group: typeof RadioGroup;
+}
 
 interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
 }
@@ -352,11 +348,15 @@ interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'is
     required?: boolean;
     error?: boolean;
 }
-declare const Select: {
-    ({ 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;
-};
+declare const Select: SelectComponent;
+/**
+ * We need this so that TypeScripts allows us to add
+ * additional properties to the component (function).
+ */
+interface SelectComponent extends ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLButtonElement>> {
+    Option: typeof Item;
+    Section: typeof Section;
+}
 
 /**
  * Thanks to react-aria: https://react-spectrum.adobe.com/react-aria/useSlider.html
@@ -386,7 +386,7 @@ Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange
  * 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, width, ...props }: SliderProps) => JSX.Element;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
 
 interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
     'container',
@@ -402,7 +402,7 @@ interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<Componen
     size?: string;
     width?: string;
 }
-declare const Switch: ({ variant, size, width, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 
 interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'table',
@@ -414,6 +414,7 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
 interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
+    stretch?: boolean;
 }
 declare const Table: Table;
 /**
@@ -455,7 +456,7 @@ interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defa
     value?: string;
     defaultValue?: string;
 }
-declare const TextArea: ({ variant, size, width, disabled, required, readOnly, error, rows, ...props }: TextAreaProps) => JSX.Element;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
     children: [trigger: ReactElement, menu: ReactElement];
@@ -477,7 +478,7 @@ declare const Tooltip: {
 
 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> {
+interface Theme extends Theme$1 {
     components: ComponentStyles;
 }
 
@@ -552,6 +553,14 @@ interface InlineProps {
 }
 declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
 
+interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>, GlobalProps {
+}
+declare function MarigoldProvider<T extends Theme$1>({ children, theme, selector, normalizeDocument, }: MarigoldProviderProps<T>): JSX.Element;
+
+interface SplitProps extends ComponentProps<'div'> {
+}
+declare const Split: (props: SplitProps) => JSX.Element;
+
 declare const ALIGNMENT_X: {
     left: string;
     center: string;
@@ -584,7 +593,7 @@ Pick<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur'>, Pick<FieldBaseProps
     value?: string;
     defaultValue?: string;
 }
-declare const TextField: ({ variant, size, width, disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
 interface TilesProps {
     children: ReactNode;
@@ -593,4 +602,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, 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, TooltipProps, TooltipThemeExtension, 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, 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 };