@marigold/components 7.8.1 → 8.0.0

package/dist/index.d.ts

@@ -12,11 +12,18 @@ import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-
 export { Form, FormProps, RouterProvider } from 'react-aria-components';
 export { I18nProvider } from '@react-aria/i18n';
 import { AriaTableProps } from '@react-aria/table';
-import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, TableHeader, ColumnProps as ColumnProps$1 } from '@react-stately/table';
+import { TableStateProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, TableBody, Cell, TableHeader } from '@react-stately/table';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 interface AccordionProps extends Omit<AriaAccordionProps<object>, 'children' | 'expandedKeys' | 'disabledKeys' | 'onExpandedChange'> {
+    /**
+     * The children of the component
+     */
     children: ItemElement<object>[] | ItemElement<object>;
+    /**
+     * Sets the mode of items open at the same time.
+     * @default single
+     */
     selectionMode?: SelectionMode;
 }
 declare const Accordion: {
@@ -30,8 +37,17 @@ interface AccordionOwnItemProps<T> extends ItemProps<T> {
 }
 
 interface AccordionItemProps {
+    /**
+     * Represents a single node in the tree structure, including its key, value, and any child nodes.
+     */
     item: Node<object>;
+    /**
+     *  Manages the state of the tree structure, including selection and expansion of nodes.
+     */
     state: TreeState<object>;
+    /**
+     * Sets title of the accordion item which will be displayed to the button.
+     */
     title: string | ReactNode;
     variant?: string;
     size?: string;
@@ -39,15 +55,36 @@ interface AccordionItemProps {
 declare const AccordionItem: ({ item, state, title, variant, size, ...props }: AccordionItemProps) => react_jsx_runtime.JSX.Element;
 
 interface AsideProps extends GapSpaceProp {
+    /**
+     * The children of the component.
+     */
     children: [ReactElement, ReactElement];
+    /**
+     * The side of the aside content.
+     * @default left
+     */
     side?: 'left' | 'right';
+    /**
+     * The side width of the aside content.
+     */
     sideWidth?: string;
+    /**
+     * At which percent the content should wrap.
+     * @default 50%
+     */
     wrap?: NonZeroPercentage;
 }
 declare const Aside: ({ children, sideWidth, space, side, wrap, }: AsideProps) => react_jsx_runtime.JSX.Element;
 
 interface AspectProps extends Omit<HtmlProps<'div'>, 'className'>, AspectProp {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
+    /**
+     * The maximum width of the image.
+     * @default 100%
+     */
     maxWidth?: string;
 }
 declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => react_jsx_runtime.JSX.Element;
@@ -55,7 +92,13 @@ declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => react_jsx
 interface HelpTextProps {
     variant?: string;
     size?: string;
+    /**
+     * A helpful text.
+     */
     description?: ReactNode;
+    /**
+     * An error message.
+     */
     errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
 
@@ -65,6 +108,11 @@ interface FieldBaseProps<T extends ElementType> extends WidthProp, Pick<HelpText
     variant?: string;
     size?: string;
     children?: ReactNode;
+    /**
+     * Use RAC prop names here so we can directly pass the components via "as"
+     */
+    isInvalid?: boolean;
+    isRequired?: boolean;
 }
 declare const FieldBase: <T extends ElementType>(props: FieldBaseProps<T> & DistributiveOmit<ComponentPropsWithRef<T>, "as"> & react.RefAttributes<any>) => ReactNode;
 
@@ -99,13 +147,45 @@ declare const _ListBox: ListBoxComponent;
 
 type RemovedProps$n = 'className' | 'style' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'onInputChange' | 'defaultValue' | 'validate' | 'validationState';
 interface AutocompleteProps extends Omit<RAC.ComboBoxProps<object>, RemovedProps$n>, Pick<FieldBaseProps<'label'>, 'width' | 'label' | 'description' | 'errorMessage'> {
+    /**
+     * The value of the input (uncontrolled).
+     */
     defaultValue?: RAC.ComboBoxProps<object>['defaultInputValue'];
+    /**
+     * The value of the input (controlled).
+     */
     value?: RAC.ComboBoxProps<object>['inputValue'];
+    /**
+     * Called when the input value changes.
+     */
     onChange?: RAC.ComboBoxProps<object>['onInputChange'];
+    /**
+     * Called when the clear button is pressed.
+     */
     onClear?: () => void;
+    /**
+     * If `true`, the input is disabled.
+     *
+     * @default false
+     */
     disabled?: RAC.ComboBoxProps<object>['isDisabled'];
+    /**
+     * If `true`, the input is required.
+     *
+     * @default false
+     */
     required?: RAC.ComboBoxProps<object>['isRequired'];
+    /**
+     * If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     *
+     * @default false
+     */
     error?: RAC.ComboBoxProps<object>['isInvalid'];
+    /**
+     * If `true`, the input is readOnly.
+     *
+     * @default false
+     */
     readOnly?: RAC.ComboBoxProps<object>['isReadOnly'];
     variant?: string;
     size?: string;
@@ -130,14 +210,45 @@ type RemovedProps$m = 'className' | 'style' | 'children' | 'isDisabled' | 'isReq
 interface ComboBoxProps extends Omit<RAC.ComboBoxProps<any>, RemovedProps$m>, Pick<FieldBaseProps<'label'>, 'width' | 'label' | 'description' | 'errorMessage'> {
     variant?: string;
     size?: string;
+    /**
+     * If `true`, the input is disabled.
+     * @default false
+     */
     disabled?: RAC.ComboBoxProps<any>['isDisabled'];
+    /**
+     * If `true`, the input is required.
+     * @default false
+     */
     required?: RAC.ComboBoxProps<any>['isRequired'];
+    /**
+     * If `true`, the input is readOnly.
+     * @default false
+     */
     readOnly?: RAC.ComboBoxProps<any>['isReadOnly'];
+    /**
+     * If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.ComboBoxProps<any>['isInvalid'];
+    /**
+     * The value of the input (uncontrolled).
+     */
     defaultValue?: RAC.ComboBoxProps<any>['defaultInputValue'];
+    /**
+     * The value of the input (controlled).
+     */
     value?: RAC.ComboBoxProps<any>['inputValue'];
+    /**
+     * Called when the input value changes.
+     */
     onChange?: RAC.ComboBoxProps<any>['onInputChange'];
+    /**
+     * ReactNode or function to render the list of items.
+     */
     children?: ReactNode | ((item: any) => ReactNode);
+    /**
+     * Set the placeholder for the select.
+     */
     placeholder?: string;
 }
 interface ComboBoxComponent extends ForwardRefExoticComponent<ComboBoxProps & RefAttributes<HTMLInputElement>> {
@@ -146,6 +257,9 @@ interface ComboBoxComponent extends ForwardRefExoticComponent<ComboBoxProps & Re
 declare const _ComboBox: ComboBoxComponent;
 
 interface BadgeProps extends Omit<HtmlProps<'div'>, 'className'> {
+    /**
+     * Children of the component
+     */
     children?: React.ReactNode;
     variant?: string;
     size?: string;
@@ -154,13 +268,27 @@ declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => reac
 
 interface BreakoutProps extends Omit<HtmlProps<'div'>, 'className'>, AlignmentProp {
     children?: ReactNode;
+    /**
+     * Set the height of the breakout element.
+     */
     height?: string;
+    /**
+     * Horizontal alignment of the items inside the breakout element.
+     * @default left
+     */
     alignX?: keyof typeof alignment.horizontal.alignmentX;
+    /**
+     * Vertical alignment of the items inside the breakout element.
+     * @default top
+     */
     alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
-declare const Breakout: ({ height, children, orientation, alignX, alignY, ...props }: BreakoutProps) => react_jsx_runtime.JSX.Element;
+declare const Breakout: ({ height, children, alignX, alignY, ...props }: BreakoutProps) => react_jsx_runtime.JSX.Element;
 
 interface BodyProps extends Omit<HtmlProps<'section'>, 'className'> {
+    /**
+     * Children of the component
+     */
     children?: ReactNode;
     variant?: string;
     size?: string;
@@ -171,9 +299,23 @@ type RemovedProps$l = 'isDisabled';
 interface ButtonProps extends Omit<RAC.ButtonProps, RemovedProps$l> {
     variant?: string;
     size?: string;
+    /**
+     * Stretches the button width with full available space.
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * Class of the component.
+     */
     className?: string;
+    /**
+     * Children of the component
+     */
     children?: ReactNode;
+    /**
+     * Disables the button.
+     * @default false
+     */
     disabled?: RAC.ButtonProps['isDisabled'];
 }
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -182,21 +324,42 @@ interface CardProps extends Omit<HtmlProps<'div'>, 'className'>, GapSpaceProp, P
     children?: ReactNode;
     variant?: string;
     size?: string;
+    /**
+     * Padding of the component.
+     */
     p?: PaddingSpaceProp['space'];
+    /**
+     * Padding horizontal (left and right) of the component.
+     */
     px?: PaddingSpacePropX['spaceX'];
+    /**
+     * Padding vertical (top and bottom) of the component.
+     */
     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 {
     children?: ReactNode;
+    /**
+     * The maximum width of the container.
+     * @default 100%
+     */
     maxWidth?: string;
 }
 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> {
+    /**
+     * Use when it represents both selected and not selected values.
+     * @default false
+     */
     indeterminate?: boolean;
+    /**
+     * If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: boolean;
     variant?: string;
     size?: string;
@@ -205,31 +368,82 @@ declare const _Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.R
 
 type RemovedProps$k = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly';
 interface CheckboxGroupProps extends Omit<RAC.CheckboxGroupProps, RemovedProps$k>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
+    /**
+     * The children of the component
+     */
     children?: ReactNode;
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * Sets all checkboxes to disabled
+     * @default false
+     */
     disabled?: RAC.CheckboxGroupProps['isDisabled'];
+    /**
+     * Sets the checkbox as required.
+     * @default false
+     */
     required?: RAC.CheckboxGroupProps['isRequired'];
+    /**
+     * If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.CheckboxGroupProps['isInvalid'];
+    /**
+     * Sets the checkbox on read only.
+     * @default false
+     */
     readOnly?: RAC.CheckboxGroupProps['isReadOnly'];
+    /**
+     * Wheather the component is displayed vertically or horizontally.
+     * @default vertical
+     */
     orientation?: Orientation;
 }
 declare const _CheckboxGroup: ({ children, variant, size, required, disabled, readOnly, error, width, orientation, ...rest }: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
 
 interface ColumnsProps extends GapSpaceProp {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
+    /**
+     * An array of numbers to set the size of the children. The columns array length and the count of children must be the same. Write "fit" for the column you want to have it fitting the contents width and height.
+     */
     columns: Array<number | 'fit'>;
+    /**
+     * Collapse children into a vertical layout at given width. Note that `collapseAt` is based on the total element width, and not the window width. With a default value of "0" columns will not collapse by default.
+     */
     collapseAt?: string;
+    /**
+     * Stretch to height of parent container.
+     * @default false
+     */
     stretch?: boolean;
 }
 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 {
     children?: ReactNode;
+    /**
+     * The content type of the container.
+     * @default 'content'
+     */
     contentType?: 'content' | 'header';
     size?: keyof typeof content | keyof typeof header;
+    /**
+     * Set alignment the content inside the container.
+     * @default left
+     */
     align?: 'left' | 'right' | 'center';
+    /**
+     * Set alignment of the items inside the container.
+     */
     alignItems?: PlaceItemsProp['align'];
 }
 declare const content: {
@@ -245,17 +459,37 @@ declare const header: {
 declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
 interface DialogTriggerProps extends Omit<RAC.DialogTriggerProps, 'isOpen'> {
+    /**
+     * Wheather compnent is rendered.
+     * @default false
+     */
     open?: boolean;
+    /**
+     * Whether to close the overlay when the user interacts outside it.
+     * @default false
+     */
     dismissable?: boolean;
+    /**
+     * Whether pressing the escape key to close the overlay should be disabled.
+     */
     keyboardDismissable?: boolean;
+    /**
+     * If `true`, the dialog will be non-modal, meaning it will not block interaction with the background content.
+     */
     isNonModal?: boolean;
 }
 
 type RemovedProps$j = 'className' | 'level';
 interface HeadlineProps extends Omit<RAC.HeadingProps, RemovedProps$j>, TextAlignProp {
+    /**
+     * Set the color of the headline.
+     */
     color?: string;
     variant?: string;
     size?: string;
+    /**
+     * Set a different level from theme, values are from 1 - 6.
+     */
     level?: '1' | '2' | '3' | '4' | '5' | '6' | RAC.HeadingProps['level'];
 }
 declare const _Headline: ({ variant, size, children, align, color, level, ...props }: HeadlineProps) => react_jsx_runtime.JSX.Element;
@@ -265,7 +499,14 @@ interface DialogHeadlineProps extends Omit<HeadlineProps, 'slot'> {
 interface DialogProps extends Omit<RAC.DialogProps, 'className' | 'style'> {
     variant?: string;
     size?: string;
+    /**
+     * Show the close button.
+     */
     closeButton?: boolean;
+    /**
+     * If `true`, the dialog will be non-modal, meaning it will not block interaction with the background content.
+     * @default false
+     */
     isNonModal?: boolean;
 }
 declare const _Dialog: {
@@ -280,6 +521,9 @@ interface DividerProps extends RAC.SeparatorProps {
 declare const _Divider: ({ variant, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
 
 interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
     variant?: string;
     size?: string;
@@ -307,6 +551,9 @@ declare const Grid: {
 };
 
 interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
     variant?: string;
     size?: string;
@@ -316,14 +563,28 @@ declare const _Header: ({ variant, size, ...props }: HeaderProps) => react_jsx_r
 interface ImageProps extends Omit<HtmlProps<'img'>, 'className'>, ObjectFitProp, ObjectPositionProp {
     variant?: string;
     size?: string;
+    /**
+     * The children of the component.
+     */
     children?: never;
+    /**
+     * specifies an alternate text for an image, if the image cannot be displayed.
+     */
     alt: string;
 }
 declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => react_jsx_runtime.JSX.Element;
 
 interface InlineProps extends AlignmentProp, GapSpaceProp {
     children?: ReactNode;
+    /**
+     * Horizontal alignment of the items inside the breakout element.
+     * @default 'left'
+     */
     alignX?: keyof typeof alignment.horizontal.alignmentX;
+    /**
+     * Vertical alignment of the items inside the breakout element.
+     * @default 'center'
+     */
     alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
 declare const Inline: ({ space, orientation, alignX, alignY, children, ...props }: InlineProps) => react_jsx_runtime.JSX.Element;
@@ -343,17 +604,45 @@ interface DateFieldProps extends Omit<RAC.DateFieldProps<DateValue>, RemovedProp
     variant?: string;
     size?: string;
     action?: ReactElement;
+    /**
+     * If `true`, the date field is required.
+     * @default false
+     */
     required?: RAC.DateFieldProps<DateValue>['isRequired'];
+    /**
+     * If `true`, the date field is disabled.
+     * @default false
+     */
     disabled?: RAC.DateFieldProps<DateValue>['isDisabled'];
+    /**
+     * If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.DateFieldProps<DateValue>['isInvalid'];
+    /**
+     * If `true`, the date field is readOnly.
+     * @default false
+     */
     readOnly?: RAC.DateFieldProps<DateValue>['isReadOnly'];
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default 'full'
+     */
     width?: WidthProp['width'];
 }
 declare const _DateField: react.ForwardRefExoticComponent<DateFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 type RemovedProps$g = 'isDisabled' | 'isReadOnly' | 'isInvalid' | 'errorMessage' | 'className' | 'style';
 interface CalendarProps extends Omit<RAC.CalendarProps<DateValue>, RemovedProps$g> {
+    /**
+     * Disables the Calendar.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the calendar value is immutable.
+     * @default false
+     */
     readOnly?: boolean;
     variant?: string;
     size?: string;
@@ -363,24 +652,59 @@ declare const _Calendar: ({ disabled, readOnly, size, variant, ...rest }: Calend
 
 type RemovedProps$f = 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'style' | 'className' | 'isOpen';
 interface DatePickerProps extends Omit<RAC.DatePickerProps<DateValue>, RemovedProps$f>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
+    /**
+     * If `true`, the date picker is disabled.
+     * @default false
+     */
     disabled?: RAC.DatePickerProps<DateValue>['isDisabled'];
+    /**
+     * If `true`, the date picker is required.
+     * @default false
+     */
     required?: RAC.DatePickerProps<DateValue>['isRequired'];
+    /**
+     * If `true`, the date picker is readOnly.
+     * @default false
+     */
     readOnly?: RAC.DatePickerProps<DateValue>['isReadOnly'];
+    /**
+     * If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.DatePickerProps<DateValue>['isInvalid'];
+    /**
+     * Whether the calendar is open by default (controlled).
+     * @default false
+     */
     open?: RAC.DatePickerProps<DateValue>['isOpen'];
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     */
     width?: WidthProp['width'];
 }
 declare const _DatePicker: ({ disabled, required, readOnly, error, variant, size, open, granularity, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 type InsetProps = {
+    /**
+     * The children of the component
+     */
     children: ReactNode;
     space?: never;
+    /**
+     * Horizontal alignment for the children
+     */
     spaceX?: PaddingSpacePropX['spaceX'];
+    /**
+     * Vertical alignment for the children
+     */
     spaceY?: PaddingSpacePropY['spaceY'];
 } | {
     children: ReactNode;
+    /**
+     * The space between the children
+     */
     space?: PaddingSpaceProp['space'];
     spaceX?: never;
     spaceY?: never;
@@ -398,6 +722,10 @@ type RemovedProps$d = 'className' | 'isDisabled';
 interface LinkProps extends Omit<RAC.LinkProps, RemovedProps$d> {
     variant?: string;
     size?: string;
+    /**
+     * The link can't be clicked
+     * @default false
+     */
     disabled?: RAC.LinkProps['isDisabled'];
 }
 declare const _Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
@@ -409,7 +737,14 @@ interface ListItemProps extends Omit<HtmlProps<'li'>, 'className'> {
 interface ListProps extends Omit<HtmlProps<'ul'>, 'className'> {
     variant?: string;
     size?: string;
+    /**
+     * Displaying a unordered or ordered list for showing Information.
+     * @default 'ul'
+     */
     as?: 'ul' | 'ol';
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
 }
 declare const List: {
@@ -436,13 +771,33 @@ declare const _Popover: react.ForwardRefExoticComponent<PopoverProps & react.Ref
 
 type RemovedProps$a = 'isOpen' | 'className' | 'style' | 'children';
 interface MenuProps extends Omit<RAC.MenuTriggerProps, RemovedProps$a>, Omit<RAC.MenuProps<object>, RemovedProps$a> {
+    /**
+     * Whether the menu is open.
+     * @default false
+     */
     open?: RAC.MenuTriggerProps['isOpen'];
+    /**
+     * Placement of the popover.
+     * @default 'bottom'
+     */
     placement?: PopoverProps['placement'];
+    /**
+     * The label for the menu trigger button.
+     */
     label?: ReactNode;
     variant?: string;
     size?: string;
+    /**
+     * Handler that is called when an action is performed on an item.
+     */
     onAction?: (key: Key$1) => void;
+    /**
+     * The contents of the menu.
+     */
     children?: ReactNode;
+    /**
+     * Whether the menu trigger is disabled.
+     */
     disabled?: boolean;
 }
 declare const _Menu: {
@@ -458,18 +813,29 @@ interface ActionMenuProps extends RAC.MenuProps<object> {
 }
 declare const ActionMenu: ({ variant, size, disabled, ...props }: ActionMenuProps) => react_jsx_runtime.JSX.Element;
 
+interface SectionMessageContentProps {
+    children?: ReactNode;
+}
+
+interface SectionMessageTitleProps {
+    children?: ReactNode;
+}
+
 declare const icons: {
     success: () => react_jsx_runtime.JSX.Element;
     info: () => react_jsx_runtime.JSX.Element;
     warning: () => react_jsx_runtime.JSX.Element;
     error: () => react_jsx_runtime.JSX.Element;
 };
-interface MessageProps extends Omit<HtmlProps<'div'>, 'className'> {
-    messageTitle: ReactNode;
+interface SectionMessageProps extends Omit<HtmlProps<'div'>, 'className'> {
     variant?: keyof typeof icons;
     size?: string;
 }
-declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLDivElement>>;
+declare const SectionMessage: {
+    ({ variant, size, children, ...props }: SectionMessageProps): react_jsx_runtime.JSX.Element;
+    Title: ({ children }: SectionMessageTitleProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ children, }: SectionMessageContentProps) => react_jsx_runtime.JSX.Element;
+};
 
 interface MultiSelectItemProps {
     id: Key;
@@ -489,12 +855,40 @@ type RemovedProps$9 = 'className' | 'style' | 'children' | 'isDisabled' | 'isReq
 interface NumberFieldProps extends Omit<RAC.NumberFieldProps, RemovedProps$9>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * If `true`, the input is disabled.
+     * @default false
+     */
     disabled?: RAC.NumberFieldProps['isDisabled'];
+    /**
+     * If `true`, the input is required.
+     * @default false
+     */
     required?: RAC.NumberFieldProps['isRequired'];
+    /**
+     * If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.NumberFieldProps['isInvalid'];
+    /**
+     * If `true`, the input is readOnly.
+     * @default false
+     */
     readOnly?: RAC.NumberFieldProps['isReadOnly'];
+    /**
+     * Property for hiding the step buttons of the field.
+     * @default false
+     */
     hideStepper?: boolean;
+    /**
+     * Placeholder text for the input field.
+     * @default none
+     */
     placeholder?: string;
 }
 declare const _NumberField: react.ForwardRefExoticComponent<NumberFieldProps & react.RefAttributes<HTMLInputElement>>;
@@ -526,16 +920,59 @@ type RemovedProps$8 = 'className' | 'style' | 'isDisabled' | 'isInvalid' | 'isRe
 interface RadioGroupProps extends Omit<RAC.RadioGroupProps, RemovedProps$8> {
     variant?: string;
     size?: string;
+    /**
+     * Set the label of the radio group.
+     * @default none
+     */
     label?: string;
+    /**
+     * Set the radio group help text.
+     * @default none
+     */
     description?: string;
+    /**
+     * Set the radio group error message if an error occurs.
+     * @default none
+     */
     errorMessage?: string;
+    /**
+     * The children elements of the radio group.
+     */
     children: ReactNode[];
+    /**
+     * Control the width of the field.
+     * @default 100%
+     */
     width?: WidthProp['width'];
+    /**
+     * If `true`, the radio group is considered invalid and if set the `errorMessage` is shown.
+     * @default false
+     */
     error?: RAC.RadioGroupProps['isInvalid'];
+    /**
+     * If `true`, the radio group is required.
+     * @default false
+     */
     required?: RAC.RadioGroupProps['isRequired'];
+    /**
+     * If `true`, the radio group is disabled.
+     * @default false
+     */
     disabled?: RAC.RadioGroupProps['isDisabled'];
+    /**
+     * Set the radio group as read-only.
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * The selected value of the radio group.
+     */
     value?: string;
+    /**
+     * Set the radio group direction.
+     * @default vertical
+     */
+    orientation?: 'horizontal' | 'vertical';
 }
 declare const _RadioGroup: ({ variant, size, label, error, disabled, required, readOnly, description, errorMessage, orientation, children, width, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
 
@@ -543,8 +980,16 @@ type RemovedProps$7 = 'className' | 'style' | 'children' | 'isDisabled';
 interface RadioProps extends Omit<RAC.RadioProps, RemovedProps$7> {
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: string;
     children?: ReactNode;
+    /**
+     * Set the radio disabled.
+     * @default false
+     */
     disabled?: RAC.RadioProps['isDisabled'];
 }
 declare const _Radio: RadioComponent;
@@ -559,17 +1004,55 @@ interface RadioComponent extends ForwardRefExoticComponent<RadioProps & RefAttri
 
 type RemovedProps$6 = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'value' | 'defaultValue';
 interface SearchFieldProps extends Omit<RAC.SearchFieldProps, RemovedProps$6>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
+    /**
+     * Icon element to display in the search field.
+     */
     icon?: ReactElement;
+    /**
+     * Action element to display in the search field.
+     */
     action?: ReactElement;
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * If `true`, the input is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.SearchFieldProps['isInvalid'];
+    /**
+     * If `true`, the input is disabled.
+     * @default false
+     */
     disabled?: RAC.SearchFieldProps['isDisabled'];
+    /**
+     * If `true`, the input is required.
+     * @default false
+     */
     required?: RAC.SearchFieldProps['isRequired'];
+    /**
+     * If `true`, the input is readOnly.
+     * @default false
+     */
     readOnly?: RAC.SearchFieldProps['isReadOnly'];
+    /**
+     * The current value of the input field.
+     * @default none
+     */
     value?: string;
+    /**
+     * The default value of the input field.
+     * @default none
+     */
     defaultValue?: string;
+    /**
+     * Placeholder text for the input field.
+     * @default none
+     */
     placeholder?: string;
 }
 declare const _SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
@@ -616,10 +1099,21 @@ interface ScrollableProps extends WidthProp {
 declare const Scrollable: ({ children, width, height, ...props }: ScrollableProps) => react_jsx_runtime.JSX.Element;
 
 interface SliderProps<T> extends Omit<RAC.SliderProps<T>, 'isDisabled' | 'label'> {
+    /**
+     * Labels for the thumbs in the slider.
+     */
     thumbLabels?: string[];
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
     variant?: string;
     size?: string;
+    /**
+     * If `true`, the input is disabled.
+     * @default false
+     */
     disabled?: boolean;
 }
 declare const _Slider: react__default.ForwardRefExoticComponent<SliderProps<number | number[]> & react__default.RefAttributes<HTMLDivElement>>;
@@ -630,20 +1124,48 @@ declare const Split: (props: SplitProps) => react_jsx_runtime.JSX.Element;
 
 interface StackProps extends AlignmentProp, GapSpaceProp {
     children?: ReactNode;
+    /**
+     * Stretch to fill space (vertical AND horizontal, useful if you want to change y alignment).
+     * @default false
+     */
     stretch?: boolean;
+    /**
+     * Horizontal alignment for the children.
+     * @default none
+     */
     alignX?: keyof typeof alignment.vertical.alignmentX;
+    /**
+     * Vertical alignment for the children.
+     * @default none
+     */
     alignY?: keyof typeof alignment.vertical.alignmentY;
 }
-declare const Stack: ({ children, space, stretch, orientation, alignX, alignY, ...props }: StackProps) => react_jsx_runtime.JSX.Element;
+declare const Stack: ({ children, space, stretch, alignX, alignY, ...props }: StackProps) => react_jsx_runtime.JSX.Element;
 
 type RemovedProps$5 = 'className' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'children';
 interface SwitchProps extends Omit<RAC.SwitchProps, RemovedProps$5> {
     variant?: string;
     size?: string;
     children?: ReactNode;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * Disables the switch.
+     * @default false
+     */
     disabled?: RAC.SwitchProps['isDisabled'];
+    /**
+     * Set the switch to read-only.
+     * @default false
+     */
     readOnly?: RAC.SwitchProps['isReadOnly'];
+    /**
+     * With this prop you can set the switch selected.
+     * @default false
+     */
     selected?: RAC.SwitchProps['isSelected'];
 }
 declare const _Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLLabelElement>>;
@@ -651,8 +1173,20 @@ declare const _Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAt
 interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
+    /**
+     * Stretch table to fill the container.
+     * @default false
+     */
     stretch?: boolean;
+    /**
+     * Make the column sticky to the top of the table.
+     * @default true
+     */
     stickyHeader?: boolean;
+    /**
+     * Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.
+     * @default false
+     */
     disableKeyboardNavigation?: boolean;
 }
 interface RowProps extends RowProps$1<any> {
@@ -660,6 +1194,10 @@ interface RowProps extends RowProps$1<any> {
     size?: string;
 }
 interface ColumnProps extends Omit<ColumnProps$1<any>, 'width'>, WidthProp {
+    /**
+     * Control the alignment of Column.
+     * @default left
+     */
     align?: Exclude<JSX.IntrinsicElements['td']['align'], 'char'>;
 }
 declare const Table: Table;
@@ -677,8 +1215,15 @@ interface Table {
 }
 
 interface TextProps extends Omit<HtmlProps<'p'>, 'className'>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
+    /**
+     * The children of the component
+     */
     children?: React.ReactNode;
     variant?: string;
+    /**
+     * Set the text color.
+     * @default currentColor
+     */
     color?: string;
     size?: string;
 }
@@ -688,14 +1233,51 @@ type RemovedProps$4 = 'className' | 'style' | 'children' | 'isDisabled' | 'isReq
 interface TextAreaProps extends Omit<RAC.TextFieldProps, RemovedProps$4>, Pick<RAC.TextAreaProps, 'rows'>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * If `true`, the textarea is disabled.
+     * @default false
+     */
     disabled?: RAC.TextFieldProps['isDisabled'];
+    /**
+     * If `true`, the textarea is required.
+     * @default false
+     */
     required?: RAC.TextFieldProps['isRequired'];
+    /**
+     * If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.TextFieldProps['isInvalid'];
+    /**
+     * If `true`, the textarea is read-only.
+     * @default false
+     */
     readOnly?: RAC.TextFieldProps['isReadOnly'];
+    /**
+     * The value of the textarea.
+     * @default none
+     */
     value?: string;
+    /**
+     * The default value of the textarea.
+     * @default none
+     */
     defaultValue?: string;
+    /**
+     * Placeholder text for the textarea.
+     * @default none
+     */
     placeholder?: string;
+    /**
+     * Sets the number of rows in the textarea.
+     * @default none
+     */
+    rows?: number;
 }
 declare const _TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
@@ -703,23 +1285,78 @@ type RemovedProps$3 = 'className' | 'style' | 'children' | 'isDisabled' | 'isReq
 interface TextFieldProps extends Omit<RAC.TextFieldProps, RemovedProps$3>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * If `true`, the input is disabled.
+     * @default false
+     */
     disabled?: RAC.TextFieldProps['isDisabled'];
+    /**
+     * If `true`, the input is required.
+     * @default false
+     */
     required?: RAC.TextFieldProps['isRequired'];
+    /**
+     * If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
+     * @default false
+     */
     error?: RAC.TextFieldProps['isInvalid'];
+    /**
+     * If `true`, the input is readOnly.
+     * @default false
+     */
     readOnly?: RAC.TextFieldProps['isReadOnly'];
+    /**
+     * The minimum value for the input field.
+     * @default none
+     */
     min?: HTMLInputElement['min'];
+    /**
+     * The maximum value for the input field.
+     * @default none
+     */
     max?: HTMLInputElement['max'];
+    /**
+     * The value of the input field.
+     * @default none
+     */
     value?: string;
+    /**
+     * The default value of the input field.
+     * @default none
+     */
     defaultValue?: string;
+    /**
+     * Placeholder text for the input field.
+     * @default none
+     */
     placeholder?: string;
 }
 declare const _TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TilesProps extends GapSpaceProp {
+    /**
+     * The children of the component.
+     */
     children: ReactNode;
+    /**
+     * Set minimum width for all items inside.
+     * @default '250px'
+     */
     tilesWidth: string;
+    /**
+     * Tiles will stretch to available width and will distribute their width equally. Note that this can make them wider than the specified tiles width, but not smaller than the given "tilesWidth". Basically, this is full responsive mode.
+     * @default false
+     */
     stretch?: boolean;
+    /**
+     * If true, all items will have the size of the biggest item.
+     * @default false
+     */
     equalHeight?: boolean;
 }
 declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => react_jsx_runtime.JSX.Element;
@@ -732,9 +1369,15 @@ interface TooltipTriggerProps extends Omit<RAC.TooltipTriggerComponentProps, Rem
 
 type RemovedProps$1 = 'className' | 'isOpen' | 'style';
 interface TooltipProps extends Omit<RAC.TooltipProps, RemovedProps$1> {
+    /**
+     * The children of the component.
+     */
     children?: ReactNode;
     variant?: string;
     size?: string;
+    /**
+     * Whether the element is rendered.
+     */
     open?: RAC.TooltipProps['isOpen'];
 }
 declare const _Tooltip: {
@@ -746,7 +1389,15 @@ type RemovedProps = 'className' | 'style' | 'children' | 'isRequired';
 interface TagGroupProps extends Omit<RAC.TagGroupProps, RemovedProps>, Pick<TagListProps<object>, 'items' | 'children' | 'renderEmptyState'>, Pick<FieldBaseProps<'label'>, 'label' | 'description'> {
     variant?: string;
     size?: string;
+    /**
+     * Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
+     * @default full
+     */
     width?: WidthProp['width'];
+    /**
+     * Displays a remove button on each tag.
+     * @default false
+     */
     allowsRemoving?: boolean;
 }
 
@@ -775,6 +1426,10 @@ interface TabListProps extends Omit<RAC.TabListProps<Object>, 'className' | 'sty
 }
 
 interface TabsProps extends Omit<RAC.TabsProps, 'className' | 'style' | 'isDisabled' | 'orientation'> {
+    /**
+     * Set All TabPanel disabled
+     * @default false
+     */
     disabled?: boolean;
     size?: 'small' | 'medium' | 'large';
     variant?: string;
@@ -786,4 +1441,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, 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 };
+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 };