@marigold/components 7.7.2 → 7.8.1

package/dist/index.d.mts

@@ -5,7 +5,7 @@ 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, ObjectFitProp, ObjectPositionProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
+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';
 export { ThemeProvider, useTheme } from '@marigold/system';
 import { NonZeroPercentage, HtmlProps, DistributiveOmit } from '@marigold/types';
 import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-components';
@@ -286,6 +286,26 @@ interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
 }
 declare const Footer: ({ children, variant, size, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
+interface GridAreaProps {
+    name: string;
+    children?: ReactNode;
+}
+
+type TemplateValue = 'none' | 'auto' | 'min-content' | 'max-content' | (string & {}) | number;
+interface GridProps extends GapSpaceProp, HeightProp {
+    areas: string[];
+    columns: TemplateValue[];
+    rows: TemplateValue[];
+    /**
+     * Children of the layout.
+     */
+    children?: ReactNode;
+}
+declare const Grid: {
+    ({ children, areas, columns, rows, height, space, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+    Area: ({ name, children }: GridAreaProps) => react_jsx_runtime.JSX.Element;
+};
+
 interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
     children?: ReactNode;
     variant?: string;
@@ -581,10 +601,10 @@ interface SelectListItemProps extends Omit<RAC.GridListItemProps<object>, 'class
 declare const _SelectListItem: react.ForwardRefExoticComponent<SelectListItemProps & react.RefAttributes<HTMLDivElement>>;
 
 type RemoveProps = 'style' | 'className' | 'onSelectionChange';
-interface GridListProps extends Omit<RAC.GridListProps<object>, RemoveProps> {
+interface SelectListProps extends Omit<RAC.GridListProps<object>, RemoveProps> {
     onChange?: RAC.GridListProps<object>['onSelectionChange'] | Dispatch<SetStateAction<any>>;
 }
-interface SelectListComponent extends ForwardRefExoticComponent<GridListProps & RefAttributes<HTMLUListElement>> {
+interface SelectListComponent extends ForwardRefExoticComponent<SelectListProps & RefAttributes<HTMLUListElement>> {
     Item: typeof _SelectListItem;
 }
 declare const _SelectList: SelectListComponent;
@@ -766,4 +786,4 @@ declare const _Tabs: {
     Item: (props: TabProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionOwnItemProps, type AccordionProps, ActionMenu, 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, 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, type GridListProps, _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, Message, type MessageProps, _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, _Select as Select, type SelectComponent, _SelectList as SelectList, 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, 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, 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, Message, type MessageProps, _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, _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 };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ 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, ObjectFitProp, ObjectPositionProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
+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';
 export { ThemeProvider, useTheme } from '@marigold/system';
 import { NonZeroPercentage, HtmlProps, DistributiveOmit } from '@marigold/types';
 import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-components';
@@ -286,6 +286,26 @@ interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
 }
 declare const Footer: ({ children, variant, size, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
+interface GridAreaProps {
+    name: string;
+    children?: ReactNode;
+}
+
+type TemplateValue = 'none' | 'auto' | 'min-content' | 'max-content' | (string & {}) | number;
+interface GridProps extends GapSpaceProp, HeightProp {
+    areas: string[];
+    columns: TemplateValue[];
+    rows: TemplateValue[];
+    /**
+     * Children of the layout.
+     */
+    children?: ReactNode;
+}
+declare const Grid: {
+    ({ children, areas, columns, rows, height, space, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+    Area: ({ name, children }: GridAreaProps) => react_jsx_runtime.JSX.Element;
+};
+
 interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
     children?: ReactNode;
     variant?: string;
@@ -581,10 +601,10 @@ interface SelectListItemProps extends Omit<RAC.GridListItemProps<object>, 'class
 declare const _SelectListItem: react.ForwardRefExoticComponent<SelectListItemProps & react.RefAttributes<HTMLDivElement>>;
 
 type RemoveProps = 'style' | 'className' | 'onSelectionChange';
-interface GridListProps extends Omit<RAC.GridListProps<object>, RemoveProps> {
+interface SelectListProps extends Omit<RAC.GridListProps<object>, RemoveProps> {
     onChange?: RAC.GridListProps<object>['onSelectionChange'] | Dispatch<SetStateAction<any>>;
 }
-interface SelectListComponent extends ForwardRefExoticComponent<GridListProps & RefAttributes<HTMLUListElement>> {
+interface SelectListComponent extends ForwardRefExoticComponent<SelectListProps & RefAttributes<HTMLUListElement>> {
     Item: typeof _SelectListItem;
 }
 declare const _SelectList: SelectListComponent;
@@ -766,4 +786,4 @@ declare const _Tabs: {
     Item: (props: TabProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionOwnItemProps, type AccordionProps, ActionMenu, 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, 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, type GridListProps, _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, Message, type MessageProps, _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, _Select as Select, type SelectComponent, _SelectList as SelectList, 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, 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, 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, Message, type MessageProps, _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, _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 };