@nimbus-ds/patterns 1.0.0 → 1.1.0-rc.1

package/dist/index.d.ts

@@ -1,244 +1,446 @@
 // Generated by dts-bundle-generator v8.0.0
 
-import { BoxProps, ButtonProps, CheckboxProps, IconButtonProps, InputProps, Link, PaginationProps, PopoverProps, RadioProps, SelectProps, SidebarProps, TableProps, TableRowProps, TextareaProps, ThumbnailProps, ToggleProps } from '@nimbus-ds/components';
+import { BoxProperties, ButtonProperties, CheckboxProperties, IconButtonProperties, InputProperties, PaginationProperties, PopoverProperties, RadioProperties, SelectProperties, SidebarProperties, TableProperties, TableRowProperties, TextareaProperties, ThumbnailProperties, ToggleProperties } from '@nimbus-ds/components';
 import { IconProps } from '@nimbus-ds/icons';
 import { PolymorphicForwardRefComponent } from '@nimbus-ds/typings';
 import React from 'react';
 import { ButtonHTMLAttributes, ComponentPropsWithRef, FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 
-export interface AppShellHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Optional content for the left-hand-side slot */
+export interface AppShellHeaderProperties {
+	/**
+	 * Optional content for the left-hand-side slot.
+	 * @TJS-type React.ReactNode
+	 */
 	leftSlot?: ReactNode;
-	/** Optional content for the right-hand-side slot */
+	/**
+	 * Optional content for the right-hand-side slot.
+	 * @TJS-type React.ReactNode
+	 */
 	rightSlot?: ReactNode;
 }
+export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const AppShellHeader: React.FC<AppShellHeaderProps>;
 export interface AppShellComponents {
 	Header: typeof AppShellHeader;
 }
-export interface AppShellProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content for the body of the application */
+export interface AppShellProperties {
+	/**
+	 * Content for the body of the application.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
-	/** Optional slot for left sidebar menu */
+	/**
+	 * Optional slot for left sidebar menu.
+	 * @TJS-type React.ReactNode
+	 */
 	menu?: ReactNode;
 }
+export type AppShellProps = AppShellProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const AppShell: React.FC<AppShellProps> & AppShellComponents;
-export interface CalloutCardProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** CalloutCard color */
+export interface CalloutCardProperties {
+	/**
+	 * CalloutCard color.
+	 */
 	appearance: "primary" | "success" | "warning" | "danger" | "neutral";
+	/**
+	 * The SVG contents to display in the Icon.
+	 * @TJS-type React.FC<IconProps>
+	 */
 	icon: FC<IconProps>;
-	/** Title */
+	/**
+	 * Title.
+	 */
 	title: string;
-	/** Subtitle */
+	/**
+	 * Subtitle.
+	 */
 	subtitle: string;
-	/** Subtitle */
-	link?: ComponentPropsWithRef<typeof Link>;
-	/** Event fired when clicking the component */
+	/**
+	 * Slot intended to position the Callout Card link correctly.
+	 * @TJS-type <Link />
+	 */
+	link?: ReactNode;
+	/**
+	 * Event fired when clicking the component.
+	 * @TJS-type () => void;
+	 */
 	onClick?: MouseEventHandler<HTMLElement>;
 }
+export type CalloutCardProps = CalloutCardProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const CalloutCard: React.FC<CalloutCardProps>;
-export interface DataListRowProperties {
-	/** Optional padding for the row */
+export interface DataListRowProperties extends Omit<BoxProperties, "padding"> {
+	/**
+	 * Optional padding for the row.
+	 * @default base
+	 */
 	padding?: "small" | "base" | "none";
-	/** Content of the row */
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
-export type DataListRowProps = DataListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProps, "padding">;
+export type DataListRowProps = DataListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const DataListRow: React.FC<DataListRowProps>;
 export interface DataListComponents {
 	Row: typeof DataListRow;
 }
-export interface DataListProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content of the List component */
+export interface DataListProperties {
+	/**
+	 * Content of the List component.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type DataListProps = DataListProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const DataList: React.FC<DataListProps> & DataListComponents;
-export interface DataTableBulkActionsProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Properties of the checkbox element rendered in the Bulk Actions component */
-	checkbox: Omit<CheckboxProps, "label" | "id">;
-	/** Optional link element rendered next to the Bulk Actions controller */
+export interface DataTableBulkActionsProperties {
+	/**
+	 * Properties of the checkbox element rendered in the Bulk Actions component.
+	 */
+	checkbox: Omit<CheckboxProperties, "label" | "id">;
+	/**
+	 * Optional link element rendered next to the Bulk Actions controller.
+	 * @TJS-type <Link />
+	 */
 	link?: ReactNode;
-	/** Action component that controls the Bulk Actions */
+	/**
+	 * Action component that controls the Bulk Actions.
+	 * @TJS-type React.ReactNode
+	 */
 	action: ReactNode;
-	/** Lable for the checkbox element */
+	/**
+	 * Lable for the checkbox element.
+	 */
 	label: string;
 }
+export type DataTableBulkActionsProps = DataTableBulkActionsProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const DataTableBulkActions: React.FC<DataTableBulkActionsProps>;
-export interface DataTableFooterProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Left-hand side text intended for displaying an item count */
+export interface DataTableFooterProperties {
+	/**
+	 * Left-hand side text intended for displaying an item count.
+	 */
 	itemCount: string;
-	/** Pagination element rendered on the right-side of the footer */
-	pagination?: PaginationProps;
+	/**
+	 * Pagination element rendered on the right-side of the footer.
+	 */
+	pagination?: PaginationProperties;
 }
+export type DataTableFooterProps = DataTableFooterProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const DataTableFooter: React.FC<DataTableFooterProps>;
-export interface DataTableHeaderProps extends HTMLAttributes<HTMLElement> {
-	/** Checkbox element rendered on the table header that controls all rows */
-	checkbox: CheckboxProps;
-	/** Row content */
+export interface DataTableHeaderProperties {
+	/**
+	 * Checkbox element rendered on the table header that controls all rows.
+	 */
+	checkbox: CheckboxProperties;
+	/**
+	 * Row content.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type DataTableHeaderProps = DataTableHeaderProperties & HTMLAttributes<HTMLElement>;
 declare const DataTableHeader: React.FC<DataTableHeaderProps>;
-export type DataTableRowExtends = TableRowProps & HTMLAttributes<HTMLElement>;
-export interface DataTableRowProps extends DataTableRowExtends {
-	/** Checkbox element rendered on the row that controls whether the row is selected */
-	checkbox: CheckboxProps;
-	/** Content of the row */
+export interface DataTableRowProperties {
+	/**
+	 * Checkbox element rendered on the row that controls whether the row is selected.
+	 */
+	checkbox: CheckboxProperties;
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type DataTableRowProps = DataTableRowProperties & TableRowProperties & HTMLAttributes<HTMLElement>;
 declare const DataTableRow: React.FC<DataTableRowProps>;
-export type DataTableExtend = TableProps & HTMLAttributes<HTMLElement>;
 export interface DataTableComponents {
 	BulkActions: typeof DataTableBulkActions;
 	Header: typeof DataTableHeader;
 	Footer: typeof DataTableFooter;
 	Row: typeof DataTableRow;
 }
-export interface DataTableProps extends DataTableExtend {
-	/** Bulk actions component rendered with a sticky position over the top of the table element */
+export interface DataTableProperties {
+	/**
+	 * Bulk actions component rendered with a sticky position over the top of the table element.
+	 * @TJS-type React.ReactNode
+	 */
 	bulkActions?: ReactNode;
-	/** Table header content */
+	/**
+	 * Table header content.
+	 * @TJS-type React.ReactNode
+	 */
 	header: ReactNode;
-	/** Optional table footer content */
+	/**
+	 * Optional table footer content.
+	 * @TJS-type React.ReactNode
+	 */
 	footer?: ReactNode;
-	/** Table body content */
+	/**
+	 * Table body content.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type DataTableProps = DataTableProperties & TableProperties & HTMLAttributes<HTMLElement>;
 export declare const DataTable: React.FC<DataTableProps> & DataTableComponents;
-export interface EmptyMessageProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop. */
+export interface EmptyMessageProperties {
+	/**
+	 * Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop.
+	 * @TJS-type React.ReactNode
+	 */
 	illustration?: ReactNode;
-	/** Optional icon to display on top of the text. */
+	/**
+	 * Optional icon to display on top of the text.
+	 * @TJS-type React.ReactNode
+	 */
 	icon?: ReactNode;
-	/** Title of the component */
+	/**
+	 * Title of the component.
+	 */
 	title: string;
-	/** Optional content text for additional context. */
+	/**
+	 * Optional content text for additional context.
+	 */
 	text?: string;
-	/** Optional node to showcase buttons or actions. */
+	/**
+	 * Optional node to showcase buttons or actions.
+	 * @TJS-type React.ReactNode
+	 */
 	actions?: ReactNode;
 }
+export type EmptyMessageProps = EmptyMessageProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const EmptyMessage: React.FC<EmptyMessageProps>;
-export type FormFieldSelectProps = Omit<FormFieldProps, "children"> & Omit<SelectProps, "appearance"> & HTMLAttributes<HTMLElement>;
+export type FormFieldSelectProperties = Omit<FormFieldProperties, "children"> & Omit<SelectProperties, "appearance">;
+export type FormFieldSelectProps = FormFieldSelectProperties & HTMLAttributes<HTMLElement>;
 declare const FormFieldSelect: React.FC<FormFieldSelectProps>;
-export type FormFieldTextareaProps = Omit<FormFieldProps, "children"> & Omit<TextareaProps, "appearance"> & HTMLAttributes<HTMLElement>;
+export type FormFieldTextareaProperties = Omit<FormFieldProperties, "children"> & Omit<TextareaProperties, "appearance">;
+export type FormFieldTextareaProps = FormFieldTextareaProperties & HTMLAttributes<HTMLElement>;
 declare const FormFieldTextarea: React.FC<FormFieldTextareaProps>;
-export type FormFieldInputProps = Omit<FormFieldProps, "children"> & Omit<InputProps, "appearance"> & HTMLAttributes<HTMLElement>;
+export type FormFieldInputProperties = Omit<FormFieldProperties, "children"> & Omit<InputProperties, "appearance">;
+export type FormFieldInputProps = FormFieldInputProperties & HTMLAttributes<HTMLElement>;
 declare const FormFieldInput: React.FC<FormFieldInputProps>;
 export interface FormFieldComponents {
 	Select: typeof FormFieldSelect;
 	Textarea: typeof FormFieldTextarea;
 	Input: typeof FormFieldInput;
 }
-export interface FormFieldProps extends HTMLAttributes<HTMLElement> {
-	/** Optional label for the field component */
+export interface FormFieldProperties {
+	/**
+	 * Optional label for the field component.
+	 * @TJS-type React.ReactNode
+	 */
 	label?: ReactNode;
-	/** Help text displaying optional hints or validation messages under the field */
+	/**
+	 * Help text displaying optional hints or validation messages under the field.
+	 */
 	helpText?: string;
-	/** Icon supporting the help text message */
+	/**
+	 * Icon supporting the help text message.
+	 * @TJS-type React.FC<IconProps>
+	 */
 	helpIcon?: FC<IconProps>;
-	/** Appearance of the field and help text elements */
+	/**
+	 * Appearance of the field and help text elements.
+	 * @default none
+	 */
 	appearance?: "danger" | "warning" | "success" | "none";
-	/** Control to conditionally show the help text and icon */
+	/**
+	 * Control to conditionally show the help text and icon.
+	 * @default false
+	 */
 	showHelpText?: boolean;
-	/** Content of the field */
+	/**
+	 * Content of the field.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type FormFieldProps = FormFieldProperties & HTMLAttributes<HTMLElement>;
 export declare const FormField: React.FC<FormFieldProps> & FormFieldComponents;
-export interface InteractiveListStructureProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Title of the list item element. Also used to generate the ID for the interactive element */
+export interface InteractiveListStructureProperties {
+	/**
+	 * Title of the list item element. Also used to generate the ID for the interactive element.
+	 */
 	title: string;
-	/** Determines if the title is visible or not */
+	/**
+	 * Determines if the title is visible or not.
+	 */
 	showTitle?: boolean;
-	/** Description of the list item element */
+	/**
+	 * Description of the list item element.
+	 */
 	description?: string;
-	/** Custom content for the list item element */
+	/**
+	 * Custom content for the list item element.
+	 * @TJS-type React.ReactNode
+	 */
 	children?: ReactNode;
 }
+export type InteractiveListStructureProps = InteractiveListStructureProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListStructure: React.FC<InteractiveListStructureProps>;
-export interface InteractiveListCheckboxItemProperties {
-	/** Checkbox props inherited from Nimbus components */
-	checkbox: CheckboxProps;
-}
-export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+export type InteractiveListStructureSkeletonProperties = InteractiveListStructureProperties;
+export type InteractiveListStructureSkeletonProps = InteractiveListStructureSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListStructureSkeleton: React.FC<InteractiveListStructureSkeletonProps>;
+export interface InteractiveListCheckboxItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Checkbox props inherited from Nimbus components.
+	 */
+	checkbox: CheckboxProperties;
+}
+export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListCheckboxItem: React.FC<InteractiveListCheckboxItemProps>;
-export interface InteractiveListRadioItemProperties {
-	/** Radio props inherited from Nimbus components */
-	radio: RadioProps;
-}
-export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+export type InteractiveListCheckboxItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListCheckboxItemSkeletonProps = InteractiveListCheckboxItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListCheckboxItemSkeleton: React.FC<InteractiveListCheckboxItemSkeletonProps>;
+export interface InteractiveListRadioItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Radio props inherited from Nimbus components.
+	 */
+	radio: RadioProperties;
+}
+export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListRadioItem: React.FC<InteractiveListRadioItemProps>;
-export interface InteractiveListToggleItemProperties {
-	/** Toggle props inherited from Nimbus components */
-	toggle: ToggleProps;
-}
-export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+export type InteractiveListRadioItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListRadioItemSkeletonProps = InteractiveListRadioItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListRadioItemSkeleton: React.FC<InteractiveListRadioItemSkeletonProps>;
+export interface InteractiveListToggleItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Toggle props inherited from Nimbus components.
+	 */
+	toggle: ToggleProperties;
+}
+export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListToggleItem: React.FC<InteractiveListToggleItemProps>;
-export interface InteractiveListButtonItemProperties {
-	/** Button props inherited from Nimbus components */
-	iconButton: Omit<IconButtonProps, "backgroundColor" | "borderColor" | "size" | "source">;
-}
-export type InteractiveListButtonItemProps = InteractiveListButtonItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+export interface InteractiveListToggleItemSkeletonProperties extends InteractiveListStructureProperties {
+	/**
+	 * Toggle props inherited from Nimbus components.
+	 */
+	toggle: ToggleProperties;
+}
+export type InteractiveListToggleItemSkeletonProps = InteractiveListToggleItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListToggleItemSkeleton: React.FC<InteractiveListToggleItemSkeletonProps>;
+export type IconButtonProps = Omit<IconButtonProperties, "backgroundColor" | "borderColor" | "size" | "source"> & {
+	onClick: () => void;
+};
+export interface InteractiveListButtonItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Button props inherited from Nimbus components
+	 */
+	iconButton: IconButtonProps;
+}
+export type InteractiveListButtonItemProps = InteractiveListButtonItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListButtonItem: React.FC<InteractiveListButtonItemProps>;
+export type InteractiveListButtonItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListButtonItemSkeletonProps = InteractiveListButtonItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListButtonItemSkeleton: React.FC<InteractiveListButtonItemSkeletonProps>;
 export interface InteractiveListComponents {
 	Structure: typeof InteractiveListStructure;
+	StructureSkeleton: typeof InteractiveListStructureSkeleton;
 	ButtonItem: typeof InteractiveListButtonItem;
+	ButtonItemSkeleton: typeof InteractiveListButtonItemSkeleton;
 	CheckboxItem: typeof InteractiveListCheckboxItem;
+	CheckboxItemSkeleton: typeof InteractiveListCheckboxItemSkeleton;
 	ToggleItem: typeof InteractiveListToggleItem;
+	ToggleItemSkeleton: typeof InteractiveListToggleItemSkeleton;
 	RadioItem: typeof InteractiveListRadioItem;
+	RadioItemSkeleton: typeof InteractiveListRadioItemSkeleton;
 }
-export interface InteractiveListProps extends HTMLAttributes<HTMLElement> {
-	/** Content of the InteractiveList */
+export interface InteractiveListProperties {
+	/**
+	 * Content of the InteractiveList
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type InteractiveListProps = InteractiveListProperties & HTMLAttributes<HTMLElement>;
 export declare const InteractiveList: React.FC<InteractiveListProps> & InteractiveListComponents;
-export interface LayoutSectionProperties {
-	/** Content of the section body */
+export interface LayoutSectionProperties extends Omit<BoxProperties, "children" | "boxSizing" | "display" | "flexDirection"> {
+	/**
+	 * Content of the section body.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
-export type LayoutSectionProps = LayoutSectionProperties & Omit<BoxProps, "children" | "boxSizing" | "display" | "flexDirection"> & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type LayoutSectionProps = LayoutSectionProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const LayoutSection: React.FC<LayoutSectionProps>;
 export interface LayoutComponents {
 	Section: typeof LayoutSection;
 }
-export interface LayoutProperties {
-	/** Content to be rendered inside the layout. */
+export interface LayoutProperties extends Omit<BoxProperties, "children" | "boxSizing" | "display" | "gridTemplateColumns"> {
+	/**
+	 * Content to be rendered inside the layout.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
-	/** Number of columns to be rendered for the children */
+	/**
+	 * Number of columns to be rendered for the children.
+	 */
 	columns?: "1" | "2 - symmetric" | "2 - asymmetric" | "3";
 }
-export type LayoutProps = LayoutProperties & Omit<BoxProps, "children" | "boxSizing" | "display" | "gridTemplateColumns"> & HTMLAttributes<HTMLElement>;
+export type LayoutProps = LayoutProperties & HTMLAttributes<HTMLElement>;
 export declare const Layout: React.FC<LayoutProps> & LayoutComponents;
-export interface MenuButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
-	/** Text label for the button */
+export interface MenuButtonProperties {
+	/**
+	 * Text label for the button.
+	 */
 	label: string;
-	/** Function executed when clicking the button */
+	/**
+	 * Function executed when clicking the button.
+	 * @TJS-type () => void;
+	 */
 	onClick?: () => void;
-	/** Sets an icon element on the left of the button */
+	/**
+	 * Sets an icon element on the left of the button.
+	 * @TJS-type React.FC<IconProps>
+	 */
 	startIcon?: FC<IconProps>;
-	/** Sets the state of the button as active/inactive */
+	/**
+	 * Sets the state of the button as active/inactive.
+	 */
 	active?: boolean;
-	/** Inner components displayed on the right of the button component */
+	/**
+	 * Inner components displayed on the right of the button component.
+	 * @TJS-type React.ReactNode
+	 */
 	children?: ReactNode;
 }
+export type MenuButtonBaseProps = MenuButtonProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">;
 export declare const MenuButton: PolymorphicForwardRefComponent<"a" | "button", MenuButtonBaseProps>;
 export type MenuButtonProps = ComponentPropsWithRef<typeof MenuButton>;
-export interface MenuHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content of the menu header */
+export interface MenuHeaderProperties {
+	/**
+	 * Content of the menu header.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type MenuHeaderProps = MenuHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const MenuHeader: React.FC<MenuHeaderProps>;
-export interface MenuBodyProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content of the menu body */
+export interface MenuBodyProperties {
+	/**
+	 * Content of the menu body.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type MenuBodyProps = MenuBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const MenuBody: React.FC<MenuBodyProps>;
-export type MenuFooterProps = Omit<MenuButtonProps, "children">;
+export type MenuFooterProperties = Omit<MenuButtonProperties, "children">;
+export type MenuFooterProps = MenuFooterProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">;
 declare const MenuFooter: React.FC<MenuFooterProps>;
-export interface MenuSectionProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Optional title of the section */
+export interface MenuSectionProperties {
+	/**
+	 * Optional title of the section.
+	 */
 	title?: string;
-	/** Content of the menu section */
+	/**
+	 * Content of the menu section.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type MenuSectionProps = MenuSectionProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const MenuSection: React.FC<MenuSectionProps>;
 export interface MenuComponents {
 	Section: typeof MenuSection;
@@ -247,105 +449,183 @@ export interface MenuComponents {
 	Body: typeof MenuBody;
 	Footer: typeof MenuFooter;
 }
-export interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content of the menu */
+export interface MenuProperties {
+	/**
+	 * Content of the menu.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type MenuProps = MenuProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const Menu: React.FC<MenuProps> & MenuComponents;
-export interface NavTabsItemProperties {
-	/** Icon element to be rendered inside the button */
+export interface NavTabsItemProperties extends BoxProperties {
+	/**
+	 * Icon element to be rendered inside the button.
+	 * @TJS-type React.ReactNode
+	 */
 	icon: ReactNode;
-	/** Controls whether the button is active or not */
+	/**
+	 * Controls whether the button is active or not.
+	 */
 	active?: boolean;
-	/** Displays a small badge on top of the button */
+	/**
+	 * Displays a small badge on top of the button.
+	 */
 	badge?: boolean;
-	/** Function executed on click */
+	/**
+	 * Function executed on click.
+	 * @TJS-type onClick: () => void;
+	 */
 	onClick: () => void;
 }
-export type NavTabsItemProps = NavTabsItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProps;
+export type NavTabsItemProps = NavTabsItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const NavTabsItem: React.FC<NavTabsItemProps>;
 export interface NavTabsComponents {
 	Item: typeof NavTabsItem;
 }
-export interface NavTabsProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content to be rendered inside the Nav element  */
+export interface NavTabsProperties {
+	/**
+	 * Content to be rendered inside the Nav element.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type NavTabsProps = NavTabsProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const NavTabs: React.FC<NavTabsProps> & NavTabsComponents;
-export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Main title of the page. Corresponds to an h1 HTML tag */
+export interface PageHeaderProperties {
+	/**
+	 * Main title of the page. Corresponds to an h1 HTML tag.
+	 */
 	title: string;
-	/** Optional subtitle for the page */
+	/**
+	 * Optional subtitle for the page.
+	 */
 	subtitle?: string;
-	/** Button stack that appears on the right-hand side of the title */
+	/**
+	 * Button stack that appears on the right-hand side of the title.
+	 * @TJS-type React.ReactNode
+	 */
 	buttonStack?: ReactNode;
-	/** Optional header content that appears underneath the title and button stack */
+	/**
+	 * Optional header content that appears underneath the title and button stack.
+	 * @TJS-type React.ReactNode
+	 */
 	children?: ReactNode;
 }
+export type PageHeaderProps = PageHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const PageHeader: React.FC<PageHeaderProps>;
-export interface PageBodyProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content of the page body */
+export interface PageBodyProperties {
+	/**
+	 * Content of the page body.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
 }
+export type PageBodyProps = PageBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const PageBody: React.FC<PageBodyProps>;
 export interface PageComponents {
 	Header: typeof PageHeader;
 	Body: typeof PageBody;
 }
-export interface PageProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
-	/** Content to be rendered inside the page body. */
+export interface PageProperties {
+	/**
+	 * Content to be rendered inside the page body.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
-	/** Optional parameter to define a maximum width of the page content. */
+	/**
+	 * Optional parameter to define a maximum width of the page content.
+	 */
 	maxWidth?: string;
 }
+export type PageProps = PageProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const Page: React.FC<PageProps> & PageComponents;
-export interface ProductUpdatesProperties {
-	/** Title of the Popover */
+export interface ProductUpdatesProperties extends Omit<PopoverProperties, "content" | "appearance" | "padding" | "enabledDismiss"> {
+	/**
+	 * Title of the Popover.
+	 */
 	title: string;
-	/** Content text of the Popover */
+	/**
+	 * Content text of the Popover.
+	 */
 	text: string;
-	/** Optional content for the body of the Popover */
+	/**
+	 * Optional content for the body of the Popover.
+	 * @TJS-type React.ReactNode
+	 */
 	bodyContent?: ReactNode;
-	/** Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner. */
+	/**
+	 * Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner.
+	 * @TJS-type React.ReactNode
+	 */
 	dismissLink?: ReactNode;
 }
-export type ProductUpdatesProps = ProductUpdatesProperties & Omit<PopoverProps, "content" | "appearance" | "padding" | "enabledDismiss"> & HTMLAttributes<HTMLElement>;
+export type ProductUpdatesProps = ProductUpdatesProperties & HTMLAttributes<HTMLElement>;
 export declare const ProductUpdates: React.FC<ProductUpdatesProps>;
 export type SideModalPadding = "none" | "base";
-export interface SideModalProperties {
-	/** Title */
+export interface SideModalProperties extends Pick<SidebarProperties, "position" | "onRemove" | "open" | "padding" | "maxWidth"> {
+	/**
+	 * Title.
+	 */
 	title?: string;
-	/** Action Title (ReactNode) */
+	/**
+	 * Action Title
+	 * @TJS-type React.ReactNode
+	 */
 	titleAction?: ReactNode;
-	/** Action Header (ReactNode) */
+	/**
+	 * Action Header
+	 * @TJS-type React.ReactNode
+	 */
 	headerAction?: ReactNode;
-	/** Icon Header (ReactNode) */
+	/**
+	 * Icon Header
+	 * @TJS-type React.ReactNode
+	 */
 	headerIcon?: ReactNode;
-	/** Body Content (ReactNode) */
+	/**
+	 * Body Content
+	 * @TJS-type React.ReactNode
+	 */
 	children?: ReactNode;
-	/** Header padding */
+	/**
+	 * Header padding.
+	 */
 	paddingHeader?: SideModalPadding;
-	/** Body padding */
+	/**
+	 * Body padding.
+	 */
 	paddingBody?: SideModalPadding;
-	/** Footer padding */
+	/**
+	 * Footer padding.
+	 */
 	paddingFooter?: SideModalPadding;
-	/** Footer element actions */
+	/**
+	 * Footer element actions.
+	 */
 	footer?: {
-		primaryAction: ButtonProps;
-		secondaryAction: ButtonProps;
+		primaryAction: ButtonProperties;
+		secondaryAction: ButtonProperties;
 	};
 }
-export type SideModalProps = SideModalProperties & Pick<SidebarProps, "position" | "onRemove" | "open" | "padding" | "maxWidth"> & HTMLAttributes<HTMLElement>;
+export type SideModalProps = SideModalProperties & HTMLAttributes<HTMLElement>;
 export declare const SideModal: React.FC<SideModalProps>;
-export interface ThumbnailWithActionProperties {
-	/** Thumbnail component properties */
-	thumbnail: ThumbnailProps;
-	/** Element to be rendered inside the Thumbnail */
+export interface ThumbnailWithActionProperties extends BoxProperties {
+	/**
+	 * Thumbnail component properties.
+	 */
+	thumbnail: ThumbnailProperties;
+	/**
+	 * Element to be rendered inside the Thumbnail.
+	 * @TJS-type React.ReactNode
+	 */
 	children: ReactNode;
-	/** Optional position of the element */
+	/**
+	 * Optional position of the element.
+	 */
 	contentPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }
-export type ThumbnailWithActionProps = ThumbnailWithActionProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProps;
+export type ThumbnailWithActionProps = ThumbnailWithActionProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const ThumbnailWithAction: React.FC<ThumbnailWithActionProps>;
 
 export {};