@usefui/components 1.5.1

package/dist/index.d.ts

@@ -0,0 +1,1299 @@
+import React$1 from 'react';
+import * as styled_components from 'styled-components';
+
+interface IReactChildren {
+    children: React.ReactNode;
+}
+
+type TComponentHeight = "fullscreen" | "display" | "auto";
+type TComponentAPI = boolean | string | number | null | unknown;
+type TComponentSize = "small" | "medium" | "large";
+type TComponentSide = "top" | "right" | "bottom" | "left";
+type TComponentVariant = "primary" | "secondary" | "tertiary" | "mono" | "border" | "ghost";
+type TKeyBinding = "ctrlKey" | "metaKey" | "altKey" | "shiftKey";
+interface IComponentAPI {
+    id: string;
+    states: Record<string, TComponentAPI | Record<string, TComponentAPI> | any>;
+    methods: Record<string, (args?: TComponentAPI | any) => void>;
+}
+interface IComponentStyling {
+    raw?: boolean;
+}
+interface IComponentSize {
+    sizing?: TComponentSize;
+}
+interface IComponentVariant {
+    variant?: TComponentVariant;
+}
+interface IComponentControlProperties {
+    shortcut?: boolean;
+    hotkey?: string;
+    bindkey?: TKeyBinding;
+}
+interface IComponentSpacing {
+    spacing?: TComponentSize;
+}
+
+interface IButtonProperties extends IComponentStyling, IComponentSize, IComponentVariant, React$1.ComponentPropsWithRef<"button"> {
+    rawicon?: boolean;
+}
+/**
+ * Buttons are used to initialize an action.
+ *
+ * **Best practices:**
+ *
+ * - Define the hierarchy of buttons with different variants.
+ * - Button label must be short and understandable.
+ *
+ * @param {IButtonProperties} props - The props for the Button component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.rawicon - Define whether the component is styles its svg children.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {ReactNode} props.children - The content to be rendered inside the button.
+ * @returns {ReactElement} The Button component.
+ */
+declare const Button: React$1.ForwardRefExoticComponent<Omit<IButtonProperties, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface IAccordionComposition {
+    Root: typeof AccordionRoot;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+}
+interface IAccordionProperties extends IComponentSpacing, React$1.ComponentProps<"div"> {
+}
+interface IAccordionTriggerProperties extends IButtonProperties {
+    value: string;
+}
+interface IAccordionContentProperties extends IAccordionProperties {
+    defaultOpen?: boolean;
+    value: string;
+}
+/**
+ * Accordions are used to expand and collapse sections of content.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for each accordion section.
+ * - Ensure that the accordion can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the accordion section is expanded/collapsed.
+ *
+ * @param {IAccordionProperties} props - The props for the Accordion component.
+ * @param {ReactNode} props.children - The content to be rendered inside the accordion.
+ * @returns {ReactElement} The Accordion component.
+ */
+declare const Accordion: {
+    (props: IAccordionProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IAccordionTriggerProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: IAccordionContentProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const AccordionRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Accordion.Trigger is used to triggers the expansion and collapse of the associated Accordion.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated accordion section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IAccordionTriggerProperties} props - The props for the Accordion.Trigger component.
+ * @param {string} props.value - The value used to bind the Accordion.Trigger and Accordion.Content components.
+ * @param {ReactNode} props.children - The content to be rendered inside the accordion trigger.
+ * @returns {ReactElement} The Accordion.Trigger component.
+ */
+declare const AccordionTrigger: {
+    (props: IAccordionTriggerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Accordion.Content is used to contains the content of the associated Accordion.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated accordion section is collapsed.
+ * - Ensure that the content is properly focused when the associated accordion section is expanded.
+ *
+ * @param {IAccordionContentProperties} props - The props for the Accordion.Content component.
+ * @param {string} props.value - The value used to bind the Accordion.Content and Accordion.Trigger components.
+ * @param {boolean} props.defaultOpen - The initial open state of the accordion content. Defaults to false.
+ * @param {IComponentSpacing} props.spacing - The value used by the accordion's content spacings.
+ * @param {ReactNode} props.children - The content to be rendered inside the accordion.
+ * @returns {ReactElement} The Accordion.Content component.
+ */
+declare const AccordionContent: {
+    (props: IAccordionContentProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+declare enum AvataStatusEnum {
+    Online = "online",
+    Away = "away",
+    Busy = "busy",
+    Offline = "offline"
+}
+interface IAvatarProperties extends IComponentStyling, IComponentSize, React$1.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    status?: "online" | "away" | "busy" | "offline";
+}
+/**
+ * Avatar are used to represents a user or an entity on an interface.
+ *
+ * **Best practices:**
+ *
+ * - Use the appropriate size to match the context and the importance of the information.
+ * - Always provide an `alt` attribute for accessibility when using an image.
+ * - Indicate the user's activity status.
+ *
+ * @param {IAvatarProperties} props - The props for the Avatar component.
+ * @param {boolean} props.raw - Whether the avatar is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the avatar. Defaults to ComponentSizeEnum.Medium.
+ * @param {string} props.status - The status of the user represented by the avatar.
+ * @param {string} props.src - The source URL of the image to be displayed in the avatar.
+ * @param {string} props.alt - The alternative text for the image in the avatar.
+ * @param {ReactNode} props.children - The content to be rendered inside the avatar.
+ * @returns {ReactElement} The Avatar component.
+ */
+declare const Avatar: {
+    (props: IAvatarProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IBadgeProperties extends IComponentStyling, React$1.ComponentProps<"div"> {
+    variant?: "primary" | "secondary" | "border" | "error" | "warning" | "success" | "meta";
+    shape?: "square" | "smooth" | "round";
+}
+/**
+ * Badges are used to convey data or states to the users.
+ *
+ * **Best practices:**
+ *
+ * - Define the hierarchy of badges with different variants.
+ * - Badge label must convey short and understandable information.
+ *
+ * @param {IBadgeProperties} props - The props for the Badge component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {ReactNode} props.children - The content to be rendered inside the Badge.
+ * @returns {ReactElement} The Badge component.
+ */
+declare const Badge: {
+    (props: IBadgeProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ICheckboxComposition {
+    Root: typeof CheckboxRoot;
+    Indicator: typeof CheckboxIndicator;
+}
+interface ICheckboxProperties extends IComponentStyling, IComponentSize, IComponentVariant, React$1.ComponentProps<"input"> {
+}
+/**
+ * Checkbox are used to select one or more options from a set.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each checkbox.
+ *
+ * @param {ICheckboxProperties} props - The props for the Checkbox component.
+ * @param {boolean} props.raw - Whether the checkbox is styled or not. Defaults to `false`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the checkbox. Defaults to `medium`.
+ * @param {ComponentVariantEnum} props.variant - The styles used by the checkbox. Defaults to `tertiary`.
+ * @param {boolean} props.defaultChecked - The initial checked state of the checkbox..
+ * @param {ReactNode} props.children - The content to be rendered inside the checkbox.
+ * @returns {ReactElement} The Checkbox component.
+ */
+declare const Checkbox: {
+    (props: ICheckboxProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        (props: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Indicator: {
+        (props: React$1.ComponentProps<"span">): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const CheckboxRoot: {
+    (props: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+declare const CheckboxIndicator: {
+    (props: React$1.ComponentProps<"span">): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ICollapsibleComposition {
+    Root: typeof CollapsibleRoot;
+    Trigger: typeof CollapsibleTrigger;
+    Content: typeof CollapsibleContent;
+}
+interface ICollapsibleProperties extends React$1.ComponentProps<"div"> {
+    defaultOpen?: boolean;
+    showFirstChild?: boolean;
+}
+/**
+ * Collapsible is a component that can be expanded or collapsed by its child trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements inside the collapsible content.
+ * - Ensure that the collapsible content is hidden from screen readers when it is collapsed.
+ * - Provide a clear and descriptive label for the trigger element that accurately conveys the content of the collapsible section.
+ *
+ * @returns {ReactElement} The Collapsible component.
+ */
+declare const Collapsible: {
+    (props: ICollapsibleProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: ICollapsibleProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const CollapsibleRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Collapsible.Trigger is used to triggers the expansion and collapse of the associated Collapsible.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated Collapsible section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Collapsible.Trigger component.
+ * @returns {ReactElement} The Collapsible.Trigger component.
+ */
+declare const CollapsibleTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Collapsible.Content is used to contains the content of the associated Collapsible.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated Collapsible section is collapsed.
+ * - Ensure that the content is properly focused when the associated Collapsible section is expanded.
+ *
+ * @param {ICollapsibleProperties} props - The props for the Collapsible.Content component.components.
+ * @param {boolean} props.defaultOpen - The initial open state of the Collapsible content. Defaults to false.
+ * @param {boolean} props.showFirstChild - The props used to render the first child component whether the component is closed or not.
+ * @param {ReactNode} props.children - The content to be rendered inside the Collapsible.
+ * @returns {ReactElement} The Collapsible.Content component.
+ */
+declare const CollapsibleContent: {
+    (props: ICollapsibleProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IDialogItemProperties extends IComponentStyling, IComponentSize, IScrollAreaProperties, React$1.ComponentProps<"dialog"> {
+    lock?: boolean;
+}
+/**
+ * Dialog are used displays a modal window to the user on top of the current layer.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the dialog is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the dialog.
+ * - Ensure that the dialog is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IDialogItemProperties} props - The props for the Dialog component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {boolean} props.open - Whether the dialog is open or not.
+ * @param {ReactNode} props.children - The content to be rendered inside the dialog.
+ * @returns {ReactElement} The Dialog component.
+ */
+declare const Dialog: {
+    (props: IDialogItemProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Control: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Menu: {
+        (props: IDialogItemProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Overlay: {
+        (props: IOverlayProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const DialogRoot: {
+    ({ children }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+};
+declare const DialogOverlay: {
+    (props: IOverlayProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Dialog.Trigger is used to trigger the render of the associated Dialog component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated Dialog.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Dialog.Trigger component.
+ * @returns {ReactElement} The Dialog.Trigger component.
+ */
+declare const DialogTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+declare const DialogMenu: {
+    (props: IDialogItemProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Dialog.Control is used to trigger action inside the associated Dialog component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated action.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Dialog.Control component.
+ * @returns {ReactElement} The Dialog.Control component.
+ */
+declare const DialogControl: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+declare const Divider: styled_components.StyledComponent<"hr", any, {}, never>;
+
+interface IDropdownContentProperties extends IComponentStyling, IComponentSize, React$1.ComponentPropsWithRef<"ul"> {
+    defaultOpen?: boolean;
+}
+interface IDropdownItemProperties extends IComponentStyling, React$1.ComponentProps<"li"> {
+    radio?: boolean;
+    disabled?: boolean;
+    onClick?: (event: React$1.MouseEvent<HTMLLIElement> | React$1.KeyboardEvent<HTMLLIElement>) => void;
+    onKeyDown?: (event: React$1.KeyboardEvent<HTMLLIElement>) => void;
+}
+interface IDropdownComposition {
+    Root: typeof DropdownMenuRoot;
+    Trigger: typeof DropdownMenuTrigger;
+    Content: typeof DropdownMenuContent;
+    Item: typeof DropdownMenuItem;
+}
+/**
+ * Dropdown are used to expand and collapse list of actions.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the dropdown menu content.
+ * - Ensure that the dropdown menu can be opened and closed using the keyboard.
+ * - Ensure that the dropdown menu is visibly focused when opened using the keyboard.
+ * - Ensure that the dropdown menu is dismissed when the user clicks outside of it or presses the Esc key.
+ *
+ * @param {React.ComponentProps<"div">} props - The props for the DropdownMenu component.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
+ * @returns {ReactElement} The DropdownMenu component.
+ */
+declare const DropdownMenu: {
+    ({ children }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: React$1.ForwardRefExoticComponent<Omit<IDropdownContentProperties, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+    Item: {
+        (props: IDropdownItemProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const DropdownMenuRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * DropdownMenu.Trigger is used to triggers the expansion and collapse of the associated DropdownMenu.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated dropdown section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the DropdownMenu.Trigger component.components.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown trigger.
+ * @returns {ReactElement} The DropdownMenu.Trigger component.
+ */
+declare const DropdownMenuTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * DropdownMenu.Content is used to contains the content of the associated DropdownMenu.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated dropdown menu is collapsed.
+ * - Ensure that the content is properly focused when the associated dropdown menu is expanded.
+ *
+ * @param {IDropdownContentProperties} props - The props for the DropdownMenu.Content component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {boolean} props.defaultOpen - The initial open state of the dropdown menu. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
+ * @returns {ReactElement} The DropdownMenu.Content component.
+ */
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<IDropdownContentProperties, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+/**
+ * DropdownMenu.Item is used to handle action inside DropdownMenu.Content.
+ *
+ * @param {IDropdownItemProperties} props - The props for the DropdownMenu.Item component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.radio - Define whether the component is collapses the dropdown menu on click or not.
+ * @returns {ReactElement} The DropdownMenu.Content component.
+ */
+declare const DropdownMenuItem: {
+    (props: IDropdownItemProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+declare enum MetaVariantEnum {
+    Default = "default",
+    Hint = "hint",
+    Emphasis = "emphasis",
+    Error = "error"
+}
+type TMetaVariant = "default" | "hint" | "emphasis" | "error";
+interface IField extends React$1.ComponentProps<"input">, IComponentSize, IComponentVariant, IComponentStyling {
+    hint?: string;
+    error?: string;
+}
+interface IFieldLabel extends React$1.ComponentProps<"label">, IComponentStyling {
+    optional?: boolean;
+}
+interface IFieldMeta extends React$1.ComponentProps<"small">, IComponentStyling {
+    variant?: TMetaVariant;
+}
+interface IFieldComposition {
+    Root: typeof FieldRoot;
+    Wrapper: typeof FieldWrapper;
+    Label: typeof FieldLabel;
+    Meta: typeof FieldMeta;
+}
+/**
+ * Fields are input element that provides additional functionality such as error and hint messages.
+ *
+ * **Best practices:**
+ *
+ * - Provide clear and descriptive labels for all input elements.
+ * - Ensure that error and hint messages are visible and easily identifiable by users.
+ *
+ * @param {IField} props - The props for the Field component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.error - The error message to display.
+ * @param {string} props.hint - The hint message to display.
+ * @returns {ReactElement} The Field component.
+ */
+declare const Field: {
+    (props: IField): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Wrapper: {
+        ({ children, ...restProps }: IReactChildren & React$1.ComponentProps<"fieldset">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        (props: IFieldLabel): React$1.JSX.Element;
+        displayName: string;
+    };
+    Meta: {
+        (props: IFieldMeta): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const FieldRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+declare const FieldWrapper: {
+    ({ children, ...restProps }: IReactChildren & React$1.ComponentProps<"fieldset">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Labels are component used to describe the expected value of an input.
+ *
+ * **Best practices:**
+ *
+ * - Provide a clear and descriptive label for each input.
+ * - The `required` criteria of an input must be reflected in the label.
+ *
+ * @param {IFieldLabel} props - The props for the Field.Label component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.optional - Whether the form field is required or not.
+ * @param {string} props.children - The label text.
+ * @returns {ReactElement} The Field.Label component.
+ */
+declare const FieldLabel: {
+    (props: IFieldLabel): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Meta are component used to bring more context about an input's usage.
+ *
+ * @param {IFieldMeta} props - The props for the Field.Meta component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {TMetaVariant} props.variant - The style definition used by the component.
+ * @param {string} props.children - The meta text.
+ * @returns {ReactElement} The Field.Meta component.
+ */
+declare const FieldMeta: {
+    (props: IFieldMeta): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface OTPFieldProps {
+    name?: string;
+    id?: string;
+    children: React.ReactNode;
+    length?: number;
+    onComplete?: (value: string) => void;
+}
+interface OTPFieldSlotProps {
+    index: number;
+}
+
+interface IOTPFieldComposition {
+    Slot: typeof OTPFieldSlot;
+}
+/**
+ * A field for entering one-time passwords.
+ * This component holds the state and logic for the entire OTP input group.
+ *
+ * @param {OTPFieldProps} props - The props for the OTPField component.
+ * @param {ReactNode} props.children - The content to be rendered, typically OTPField.Group.
+ * @param {number} [props.length=6] - The number of characters in the OTP.
+ * @param {function} [props.onComplete] - Callback fired when all inputs are filled.
+ * @returns {ReactElement} The OTPField component.
+ */
+declare const OTPField: {
+    ({ children, length, onComplete }: OTPFieldProps): React$1.JSX.Element;
+    displayName: string;
+    Group: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+    Slot: {
+        ({ index, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
+        displayName: string;
+    };
+};
+/**
+ * Represents a single character input slot in the OTP field.
+ *
+ * @param {OTPFieldSlotProps & React.InputHTMLAttributes<HTMLInputElement>} props - The props for the OTPField.Slot component.
+ * @param {number} props.index - The zero-based index of the slot.
+ * @returns {ReactElement} The OTPField.Slot component.
+ */
+declare const OTPFieldSlot: {
+    ({ index, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
+    displayName: string;
+};
+
+interface IOverlayProperties extends IComponentStyling, React$1.ComponentProps<"div"> {
+    visible?: boolean;
+    closeOnInteract?: boolean;
+}
+/**
+ * Overlay are used to display content on top of the current layer.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the overlay.
+ * - Ensure that the overlay is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the overlay.
+ * - Ensure that the overlay is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IOverlayProperties} props - The props for the Overlay component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.visible - Whether the component is visible or not.
+ * @param {boolean} props.closeOnInteract - Whether the overlay should be closed when the user interacts with it.
+ * @param {function} props.onClick - The callback function to be invoked when the overlay is clicked.
+ * @returns {ReactElement} The Overlay component.
+ */
+declare const Overlay: {
+    (props: IOverlayProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IPageToolsProperties extends IToolbarBodyProperties, IToolbarSectionProperties {
+    trigger?: React$1.ReactNode | string;
+    triggerProps?: IButtonProperties;
+    fixed?: boolean;
+}
+interface IPageWrapperProperties {
+    $menus?: number;
+    $navigations?: number;
+}
+/**
+ * Pages are structured components used to build User Interface layouts.
+ *
+ * @param {React.ComponentProps<"div">} props - The props for the Page component.
+ * @returns {ReactElement} The Page component.
+ */
+declare const Page: {
+    (props: React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+    Navigation: {
+        (props: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Tools: {
+        (props: IPageToolsProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Wrapper: {
+        (props: IPageWrapperProperties & React$1.ComponentProps<"div">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: React$1.ComponentProps<"div"> & IScrollAreaProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        (props: IPageToolsProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Menu: {
+        (props: React$1.ComponentProps<"menu">): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * Navigations are used to hold links and actions.
+ *
+ * @param {React.ComponentProps<"div">} props - The props for the Page.Navigation component.
+ * @returns {ReactElement} The Page.Navigation component.
+ */
+declare const PageNavigation: {
+    (props: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Toolbar are component that provides a set of tools or actions for the user.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the Page.Toolbar.
+ * - Ensure that the Page.Toolbar is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the Page.Toolbar.
+ * - Ensure that the Page.Toolbar is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IPageToolsProperties} props - The props for the Page.Toolbar component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the Page.Toolbar.
+ * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
+ * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
+ * @param {ComponentSizeEnum} props.sizing - The size of the Page.Toolbar.
+ * @param {ComponentHeightEnum} props.height - The height definition of the Page.Toolbar.
+ * @param {TComponentSide} props.side - The side of the Page.Toolbar.
+ * @param {boolean} props.defaultOpen - Whether the Page.Toolbar should be open by default.
+ * @param {ReactNode} props.children - The content to be rendered inside the Page.Toolbar.
+ * @returns {ReactElement} The Page.Toolbar component.
+ */
+declare const PageTools: {
+    (props: IPageToolsProperties): React$1.JSX.Element;
+    displayName: string;
+};
+declare const PageContent: {
+    (props: React$1.ComponentProps<"div"> & IScrollAreaProperties): React$1.JSX.Element;
+    displayName: string;
+};
+declare const PageWrapper: {
+    (props: IPageWrapperProperties & React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Panel are component that provides a set of tools or actions for the user.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the Page.Panel.
+ * - Ensure that the Page.Panel is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the Page.Panel.
+ * - Ensure that the Page.Panel is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IPageToolsProperties} props - The props for the Page.Panel component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the Page.Panel.
+ * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
+ * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
+ * @param {ComponentSizeEnum} props.sizing - The size of the Page.Panel.
+ * @param {ComponentHeightEnum} props.height - The height definition of the Page.Panel.
+ * @param {TComponentSide} props.side - The side of the Page.Panel.
+ * @param {boolean} props.defaultOpen - Whether the Page.Panel should be open by default.
+ * @param {ReactNode} props.children - The content to be rendered inside the Page.Panel.
+ * @returns {ReactElement} The Page.Panel component.
+ */
+declare const PagePanel: {
+    (props: IPageToolsProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Menus are used to hold links and actions.
+ *
+ * @param {React.ComponentProps<"menu">} props - The props for the Page.Menu component.
+ * @returns {ReactElement} The Page.Menu component.
+ */
+declare const PageMenu: {
+    (props: React$1.ComponentProps<"menu">): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IPortalProperties {
+    container: string;
+    children?: React$1.ReactNode;
+}
+/**
+ * Portal are used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ *
+ * @param {IPortalProperties} props - The props for the Portal component.
+ * @param {string} props.container - The ID of the DOM element to render the portal into.
+ * @param {ReactNode} props.children - The content to be rendered inside the portal.
+ * @returns {ReactElement} The Portal component.
+ */
+declare const Portal: {
+    (props: IPortalProperties): React$1.ReactPortal | null;
+    displayName: string;
+};
+
+interface ISheetProperties extends IComponentStyling, IComponentSize, IComponentControlProperties, React$1.ComponentProps<"dialog"> {
+    side?: "left" | "right";
+    lock?: boolean;
+    overlay?: boolean;
+    closeOnInteract?: boolean;
+    open?: boolean;
+}
+interface ISheetComposition {
+    Root: typeof SheetRoot;
+    Trigger: typeof SheetTrigger;
+}
+declare const SheetRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Sheets are component that provides additional information in a top layer.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the sheet.
+ * - Ensure that the sheet is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the sheet.
+ * - Ensure that the sheet is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {ISheetProperties} props - The props for the Sheet component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the sheet.
+ * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
+ * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
+ * @param {TComponentSide} props.sizing - The size of the sheet.
+ * @param {ComponentSideEnum} props.side - The side of the sheet.
+ * @param {boolean} props.open - Whether the sheet should be open by default.
+ * @param {boolean} props.lock - Whether the sheet blocks the scroll once opened. True by default.
+ * @param {boolean} props.overlay - Whether the sheet has an overlay between the page and the sheet itself.
+ * @param {boolean} props.closeOnInteract - Whether the over should be closed if interacted with.
+ * @param {ReactNode} props.children - The content to be rendered inside the sheet.
+ * @returns {ReactElement} The Sheet component.
+ */
+declare const Sheet: {
+    (props: ISheetProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * Sheet.Trigger are used to triggers the expansion and collapse of the associated Sheet component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated sheet section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Sheet.Trigger component.
+ * @param {ReactNode} props.children - The content to be rendered inside the Sheet trigger.
+ * @returns {ReactElement} The Sheet.Trigger component.
+ */
+declare const SheetTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IScrollAreaProperties extends React$1.ComponentProps<any> {
+    scrollbar?: boolean;
+}
+/**
+ * Add native scroll functionality to custom components.
+ */
+declare const ScrollArea: ({ scrollbar, children, ...restProps }: IScrollAreaProperties) => React$1.JSX.Element;
+
+interface ISwitchComposition {
+    Root: typeof SwitchRoot;
+    Thumb: typeof SwitchThumb;
+}
+interface ISwitchProperties extends React$1.ComponentProps<"button">, IComponentSize, IComponentVariant, IComponentStyling {
+    defaultChecked?: boolean;
+}
+interface ISwitchThumbProperties extends React$1.ComponentProps<"span">, IComponentSize, IComponentStyling {
+}
+/**
+ * Switch are toggle components that allows the user to turn a setting on or off.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each switch.
+ * - The interaction must have predictable behavior.
+ *
+ * @param {ISwitchProperties} props - The props for the Switch component.
+ * @param {boolean} props.raw - Whether the switch should be rendered without any styles.
+ * @param {ComponentSizeEnum} props.sizing - The size of the switch.
+ * @param {ComponentVariantEnum} props.variant - The variant of the switch.
+ * @param {boolean} props.defaultChecked - The initial state of the switch.
+ * @param {ReactNode} props.children - The content to be rendered inside the switch.
+ * @returns {ReactElement} The Switch component.
+ */
+declare const Switch: {
+    (props: ISwitchProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Thumb: {
+        (props: ISwitchThumbProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const SwitchRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+declare const SwitchThumb: {
+    (props: ISwitchThumbProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Table component that provides a scrollable table with styled elements.
+ *
+ * @param {IScrollAreaProperties & React.ComponentProps<"table">} props - The props for the Table component
+ * @returns {React.ReactElement} The Table component
+ */
+declare const Table: {
+    ({ children, ...restProps }: IScrollAreaProperties & React$1.ComponentProps<"table">): React$1.JSX.Element;
+    displayName: string;
+    Head: {
+        ({ children, ...restProps }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, ...restProps }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+        displayName: string;
+    };
+    HeadCell: {
+        ({ children, ...restProps }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ children, ...restProps }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ children, ...restProps }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, ...restProps }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * Table head component
+ *
+ * @param {React.ComponentProps<"thead">} props - The props for the TableHead component
+ * @returns {React.ReactElement} The TableHead component
+ */
+declare const TableHead: {
+    ({ children, ...restProps }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Table body component
+ *
+ * @param {React.ComponentProps<"tbody">} props - The props for the TableBody component
+ * @returns {React.ReactElement} The TableBody component
+ */
+declare const TableBody: {
+    ({ children, ...restProps }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Table head cell component
+ *
+ * @param {React.ComponentProps<"th">} props - The props for the TableHeadCell component
+ * @returns {React.ReactElement} The TableHeadCell component
+ */
+declare const TableHeadCell: {
+    ({ children, ...restProps }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Table row component
+ *
+ * @param {React.ComponentProps<"tr">} props - The props for the TableRow component
+ * @returns {React.ReactElement} The TableRow component
+ */
+declare const TableRow: {
+    ({ children, ...restProps }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Table cell component
+ *
+ * @param {React.ComponentProps<"td">} props - The props for the TableCell component
+ * @returns {React.ReactElement} The TableCell component
+ */
+declare const TableCell: {
+    ({ children, ...restProps }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Table footer component
+ *
+ * @param {React.ComponentProps<"tfoot">} props - The props for the TableFooter component
+ * @returns {React.ReactElement} The TableFooter component
+ */
+declare const TableFooter: {
+    ({ children, ...restProps }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ITabsProperties extends React$1.ComponentProps<"div"> {
+    value?: string;
+    defaultOpen?: string;
+}
+interface ITabsComposition {
+    Root: typeof TabsRoot;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+}
+/**
+ * Tabs are components for a set of tab panels that allows the user to switch between them.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the tabs can be navigated and activated using the keyboard.
+ * - Ensure that the focus is managed correctly when switching between tabs.
+ * - Ensure that the active tab is visibly indicated and that its content is visible and focusable.
+ *
+ * @param {ITabsProperties} props - The props for the Tabs component.
+ * @param {string} props.defaultOpen - The value of the tab panel that should be open by default.
+ * @param {ReactNode} props.children - The content to be rendered inside the tabs component.
+ * @returns {ReactElement} The Tabs component.
+ */
+declare const Tabs: {
+    (props: ITabsProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: ITabsProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const TabsRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tabs.Trigger is used to triggers the expansion and collapse of the associated Tabs.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated tab panel.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Tabs.Trigger component.
+ * @param {string} props.value - The value used to bind the Tabs.Trigger and Tabs.Content components.
+ * @param {ReactNode} props.children - The content to be rendered inside the tabs trigger.
+ * @returns {ReactElement} The Tabs.Trigger component.
+ */
+declare const TabsTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tabs.Content is used to contains the content of the associated Tabs.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated tab panel is collapsed.
+ * - Ensure that the content is properly focused when the associated tab panel is expanded.
+ *
+ * @param {ITabsProperties} props - The props for the Tabs.Content component.
+ * @param {string} props.value - The value used to bind the Tabs.Content and Tabs.Trigger components.
+ * @param {ReactNode} props.children - The content to be rendered inside the tab.
+ * @returns {ReactElement} The Tabs.Content component.
+ */
+declare const TabsContent: {
+    (props: ITabsProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IToggleProperties extends IButtonProperties {
+    defaultChecked?: boolean;
+}
+/**
+ * Toggle are button that can be switched on or off.
+ *
+ * **Best practices:**
+ *
+ * - Define the checked state of toggles with different variants, labels.
+ * - The interaction must have predictable behavior.
+ *
+ * @param {IToggleProperties} props - The props for the Toggle component.
+ * @param {boolean} props.defaultChecked - The initial checked state of the toggle. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the toggle button.
+ * @returns {ReactElement} The Toggle component.
+ */
+declare const Toggle: {
+    (props: IToggleProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface IToolbarBodyProperties extends IComponentStyling, IComponentSize, IComponentControlProperties, React$1.ComponentProps<"aside"> {
+    defaultOpen?: boolean;
+    side?: TComponentSide;
+    height?: TComponentHeight;
+}
+interface IToolbarSectionProperties extends React$1.ComponentProps<"section"> {
+    showoncollapse?: boolean;
+}
+interface IToolbarItemProperties extends React$1.ComponentProps<"div"> {
+    showfirstchild?: boolean;
+}
+interface IToolbarComposition {
+    Root: typeof ToolbarRoot;
+    Trigger: typeof ToolbarTrigger;
+    Item: typeof ToolbarItem;
+    Section: typeof ToolbarSection;
+}
+/**
+ * Toolbar are component that provides a set of tools or actions for the user.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the toolbar.
+ * - Ensure that the toolbar is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the toolbar.
+ * - Ensure that the toolbar is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IToolbarBodyProperties} props - The props for the Toolbar component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the toolbar.
+ * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
+ * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
+ * @param {TComponentSide} props.sizing - The size of the toolbar.
+ * @param {ComponentHeightEnum} props.height - The height definition of the toolbar.
+ * @param {ComponentSideEnum} props.side - The side of the toolbar.
+ * @param {boolean} props.defaultOpen - Whether the toolbar should be open by default.
+ * @param {ReactNode} props.children - The content to be rendered inside the toolbar.
+ * @returns {ReactElement} The Toolbar component.
+ */
+declare const Toolbar: {
+    (props: IToolbarBodyProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: IButtonProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        (props: IToolbarItemProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        (props: IToolbarSectionProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const ToolbarRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Toolbar.Trigger are used to triggers the expansion and collapse of the associated Toolbar component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated toolbar section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Toolbar.Trigger component.
+ * @param {ReactNode} props.children - The content to be rendered inside the Toolbar trigger.
+ * @returns {ReactElement} The Toolbar.Trigger component.
+ */
+declare const ToolbarTrigger: {
+    (props: IButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * ToolbarSection are used to hold components within a toolbar.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the toolbar section.
+ * - Ensure that the toolbar section is visible and accessible to all users, including those using assistive technologies.
+ *
+ * @param {IToolbarSectionProperties} props - The props for the Toolbar.Section component.
+ * @param {boolean} props.showoncollapse - Whether the section should be shown only when the toolbar is collapsed.
+ * @param {ReactNode} props.children - The content to be rendered inside the toolbar section.
+ * @returns {ReactElement} The Toolbar.Section component.
+ */
+declare const ToolbarSection: {
+    (props: IToolbarSectionProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * ToolbarItem is a component that represents an item within a toolbar.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the toolbar item.
+ * - Ensure that the toolbar item is visible and accessible to all users, including those using assistive technologies.
+ * - Ensure that the toolbar item is focusable and can be interacted with using the keyboard.
+ *
+ * @param {IToolbarItemProperties} props - The props for the Toolbar.Item component.
+ * @param {boolean} props.showfirstchild - Whether to show only the first child of the toolbar item when the toolbar is collapsed.
+ * @param {ReactNode} props.children - The content to be rendered inside the toolbar item.
+ * @returns {ReactElement} The Toolbar.Item component.
+ */
+declare const ToolbarItem: {
+    (props: IToolbarItemProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ITooltipProperties extends IComponentStyling, React$1.ComponentProps<"span"> {
+    delay?: number;
+    content: string;
+    children: React$1.ReactNode;
+}
+/**
+ * Tooltips are used to convey additional information while hovering a component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is short and readable.
+ *
+ * @param {ITooltipProperties} props - The props for the Tooltip component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {number} props.delay - The delay in ms awaited until the Tooltip is displayed. Default to 200ms.
+ * @param {string} props.content - The additional content to be rendered inside the Tooltip.
+ * @param {ReactNode} props.children - The content to be rendered as Tooltip children.
+ * @returns {ReactElement} The Tooltip component.
+ */
+declare const Tooltip: {
+    ({ delay, content, children, ...restProps }: ITooltipProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
+declare const useAccordion: () => IComponentAPI;
+
+declare const useCheckbox: () => IComponentAPI;
+
+declare const useCollapsible: () => IComponentAPI;
+
+declare const useDialog: () => IComponentAPI;
+
+declare const useDropdownMenu: () => IComponentAPI;
+
+declare const useField: () => IComponentAPI;
+
+type MethodsType = React$1.Dispatch<React$1.SetStateAction<boolean>> | any;
+interface IContextProperties {
+    id: Record<string, string>;
+    states: Record<string, string | boolean>;
+    methods: Record<string, MethodsType>;
+}
+declare const useSheet: () => IContextProperties;
+
+declare const useSwitch: () => IComponentAPI;
+
+declare const useTabs: () => IComponentAPI;
+
+declare const useToolbar: () => IComponentAPI;
+
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Button, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, ScrollArea, Sheet, SheetRoot, SheetTrigger, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useSheet, useSwitch, useTabs, useToolbar };