@kubit-ui-web/react-components 2.0.0-beta.17 → 2.0.0-beta.19

package/dist/types/index.d.ts

@@ -121,6 +121,58 @@ export declare type AccordionVariantStyles<Variant extends string> = AccordionSt
     [key in Variant]: AccordionStyleProps;
 };
 
+/**
+ * Alert component for displaying notification messages.
+ *
+ * This component renders styled alerts.
+ * Useful for notifications, success/error messages, and informational banners.
+ * Always visible - no open/close functionality.
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   variant="success"
+ *   content={{ content: "Your changes have been saved." }}
+ * />
+ * ```
+ */
+export declare const Alert: ForwardRefExoticComponent<AlertProps<string> & RefAttributes<HTMLDivElement>>;
+
+declare type AlertCssClasses = ComponentSelected<ComponentsTypesComponents['ALERT']>;
+
+/**
+ * Interface for the Alert component.
+ * Extends the AlertStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Alert.
+ */
+export declare interface AlertProps<Variant = undefined extends string ? unknown : string> extends AlertStandAloneProps {
+    variant?: Variant;
+    additionalClasses?: Partial<AlertCssClasses>;
+}
+
+/**
+ * Interface for the standalone Alert component.
+ * A simplified component that displays alert messages. Always visible.
+ */
+export declare interface AlertStandAloneProps extends DataAttributes {
+    content: CommonTextProps;
+    role?: React.AriaRole;
+    id?: string;
+    ariaLive?: AriaAttributes['aria-live'];
+    cssClasses?: AlertCssClasses;
+}
+
+export declare interface AlertStyleProps extends CssLibPropsType {
+    _container?: CssLibPropsType;
+    _contentContainer?: CssLibPropsType;
+    _description?: CssLibPropsType;
+}
+
+export declare type AlertVariantStyles<Variant extends string> = AlertStyleProps & {
+    [key in Variant]: AlertStyleProps;
+};
+
 export declare interface ArrowsControlStyleProps extends CssLibPropsType {
     _leftArrowControlContainer?: CssLibPropsType;
     _rightArrowControlContainer?: CssLibPropsType;
@@ -542,6 +594,28 @@ export declare type ButtonVariantStyles<Variant extends string> = ButtonStylePro
     [key in Variant]?: Partial<ButtonStyleProps>;
 };
 
+/**
+ * Calendar component for date selection.
+ *
+ * This component provides an interactive calendar interface for selecting single dates
+ * or date ranges. It supports month/year navigation, date restrictions, and customizable variants.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   selectedDate={new Date()}
+ *   onSelectedDateChange={(date) => console.log(date)}
+ * />
+ *
+ * // Date range selection:
+ * <Calendar
+ *   hasRange
+ *   selectedDate={startDate}
+ *   secondSelectedDate={endDate}
+ *   onSelectedDateChange={(dates) => console.log(dates)}
+ * />
+ * ```
+ */
 export declare const Calendar: ForwardRefExoticComponent<CalendarProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -796,16 +870,63 @@ export declare type ChecboxVariantStyles<Variant extends string> = ChecboxStyleP
     [key in Variant]?: ChecboxStyleProps;
 };
 
+/**
+ * CheckboxUnControlled component with internal state management.
+ *
+ * This component renders a checkbox that manages its own checked state internally.
+ * Useful when you don't need to control the checkbox state from a parent component.
+ * It automatically handles toggle behavior on user interaction.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxUnControlled
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ *   label="Remember me"
+ * />
+ * ```
+ */
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type CheckboxAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'aria-describedby'>;
 
+/**
+ * CheckboxBaseUnControlled component with internal state management.
+ *
+ * This is a low-level uncontrolled checkbox that manages its own checked state.
+ * It automatically handles toggle behavior and notifies via onChange callback.
+ * Useful for checkboxes that don't require external state control.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxBaseUnControlled
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
 export declare const CheckboxBase: ForwardRefExoticComponent<CheckboxBaseUnControlledProps<string> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
 declare type CheckboxBaseAriaAttributesProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'aria-describedby'>;
 
+/**
+ * CheckboxBaseControlled component for managed checkbox state.
+ *
+ * This is a low-level checkbox component where the checked state is controlled
+ * externally. It handles error states, required validation, and applies appropriate
+ * styling based on the checkbox state (checked, unchecked, indeterminate, disabled).
+ *
+ * @example
+ * ```tsx
+ * <CheckboxBaseControlled
+ *   checked={isChecked}
+ *   onChange={(e) => setIsChecked(e.target.checked)}
+ *   error={hasError}
+ * />
+ * ```
+ */
 export declare const CheckboxBaseControlled: ForwardRefExoticComponent<CheckboxBaseControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -848,6 +969,22 @@ export declare interface CheckboxBaseStandAloneProps extends InputActionsProps,
  */
 export declare type CheckboxBaseUnControlledProps<Variant = undefined extends string ? unknown : string> = CheckboxBaseControlledProps<Variant>;
 
+/**
+ * CheckboxControlled component for managed checkbox state.
+ *
+ * This component renders a checkbox where the checked state is controlled
+ * externally via props. It handles checked, indeterminate, disabled, and
+ * error states with appropriate styling and ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxControlled
+ *   checked={isChecked}
+ *   onChange={(e) => setIsChecked(e.target.checked)}
+ *   label="Accept terms"
+ * />
+ * ```
+ */
 export declare const CheckboxControlled: ForwardRefExoticComponent<CheckboxControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -958,11 +1095,6 @@ export declare interface ChipStandAloneProps extends DataAttributes {
     rangeIcon?: ElementOrIconProps;
     errorMessage?: CommonTextProps;
     rangeSeparator?: CommonTextProps;
-    /**
-     * @deprecated
-     * Use closeIcon -> altText instead
-     */
-    deleteText?: string;
     state: ChipStateType;
     cssClasses?: ChipCssClasses;
 }
@@ -996,7 +1128,7 @@ declare type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
 
 declare type ComponentSelected_2<T> = Pick<T, NonVariablesKeys_2<T>>;
 
-declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD_IMAGE' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'DROPDOWN_SELECTED' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MESSAGE' | 'MODAL' | 'NAVBAR' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
+declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD_IMAGE' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'DROPDOWN_SELECTED' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'NAVBAR' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
 
 declare type ComponentsTypesComponents = {
     ACCORDION: {
@@ -1012,6 +1144,27 @@ declare type ComponentsTypesComponents = {
             accordion: string;
         };
     };
+    ALERT: {
+        container: string;
+        contentcontainer: string;
+        description: string;
+        $_error: {
+            alert: string;
+            container: string;
+        };
+        $_informative: {
+            alert: string;
+            container: string;
+        };
+        $_success: {
+            alert: string;
+            container: string;
+        };
+        $_warning: {
+            alert: string;
+            container: string;
+        };
+    };
     AVATAR: {
         avatar: string;
         dot: string;
@@ -1087,10 +1240,6 @@ declare type ComponentsTypesComponents = {
             button: string;
             icon: string;
         };
-        $_medium: {
-            button: string;
-            icon: string;
-        };
         $_small: {
             button: string;
             icon: string;
@@ -1526,49 +1675,6 @@ declare type ComponentsTypesComponents = {
             titlecontainer: string;
         };
     };
-    MESSAGE: {
-        message: string;
-        actionbuttoncontainer: string;
-        buttonsectioncontainer: string;
-        closeicon: string;
-        container: string;
-        contentcontainer: string;
-        contentcontainerlargemessage: string;
-        description: string;
-        extraactionbuttoncontainer: string;
-        headercontainer: string;
-        headercontainerlargemessage: string;
-        infoicon: string;
-        linkcontainer: string;
-        linkscontainer: string;
-        title: string;
-        titlecontainer: string;
-        $_error: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_informative: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_success: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_warning: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        action_button: {
-            button: string;
-            icon: string;
-            loader: string;
-        };
-    };
     MODAL: {
         modal: string;
         closebuttoncontainer: string;
@@ -1819,7 +1925,6 @@ declare type ComponentsTypesComponents = {
     };
     SELECTOR_BOX_FILE: {
         selector_box_file: string;
-        actiondescriptioncontainer: string;
         actionicon: string;
         actioniconandactiontextcontainer: string;
         animationcontainer: string;
@@ -1832,57 +1937,13 @@ declare type ComponentsTypesComponents = {
         containerboxfilename: string;
         containerboxicon: string;
         containerboxtextscontainer: string;
-        description: string;
-        descriptioncontainer: string;
-        errormessage: string;
-        errormessagecontainer: string;
-        errormessageicon: string;
         header: string;
         leftanimationcontainer: string;
         rightanimationcontainer: string;
-        subtitle: string;
-        subtitletooltipcontainer: string;
-        title: string;
-        titlesubtitlecontainer: string;
-        tooltipicon: string;
-        tooltipiconcontainer: string;
         topanimationcontainer: string;
         $_default: {
             selector_box_file: string;
         };
-        button_size: {
-            icon: string;
-            button: string;
-            loader: string;
-        };
-        button_variant: {
-            button: string;
-            icon: string;
-            loader: string;
-        };
-        tooltip: {
-            arrowcontainer: string;
-            arrowposition: string;
-            arrowsize: string;
-            closebuttoncontainer: string;
-            closebuttonicon: string;
-            headercontainer: string;
-            paragraph: string;
-            paragraphcontainer: string;
-            title: string;
-            tooltipexternalcontainer: string;
-            tooltipinternalcontainer: string;
-            popover: {
-                arrow: string;
-                popover: string;
-            };
-            arrow: string;
-            divider: string;
-            dragicon: string;
-            dragiconcontainer: string;
-            tooltipalignstyles: string;
-            tooltipasmodal: string;
-        };
     };
     SKELETON: {
         skeleton: string;
@@ -3082,6 +3143,21 @@ declare type DataAttributes = {
     [key in `data-${string}`]?: string;
 };
 
+/**
+ * DataTable component for displaying structured data in a table format.
+ *
+ * This component provides advanced table functionality including sticky columns,
+ * scrollable content, shadow effects, and divider management. It handles complex
+ * table behaviors automatically through internal hooks.
+ *
+ * @example
+ * ```tsx
+ * <DataTable variant="striped">
+ *   <TableHead>...</TableHead>
+ *   <TableBody>...</TableBody>
+ * </DataTable>
+ * ```
+ */
 export declare const DataTable: ForwardRefExoticComponent<DataTableProps<string> & RefAttributes<HTMLDivElement>>;
 
 export declare type DataTableCellProps = TableCellProps & {
@@ -3779,6 +3855,23 @@ export declare interface ImageStyleProps {
     width?: string;
 }
 
+/**
+ * Input component for text input fields.
+ *
+ * This component provides a styled text input with support for labels, helper text,
+ * error messages, icons, and various states (disabled, error, success). It manages
+ * focus state internally and applies appropriate styling.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error="Invalid email"
+ * />
+ * ```
+ */
 export declare const Input: ForwardRefExoticComponent<InputProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type InputActionsProps = Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onChange'>;
@@ -3787,6 +3880,23 @@ export declare type InputActionsType = Pick<DOMAttributes<HTMLInputElement>, 'on
 
 declare type InputActionsType_2 = Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onChange'>;
 
+/**
+ * InputBase component for basic text input functionality.
+ *
+ * This is a low-level input component that provides the foundation for more
+ * complex input components. It manages states (focused, filled, error, disabled)
+ * and applies appropriate styling and ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * <InputBase
+ *   placeholder="Enter text"
+ *   error={hasError}
+ *   filled={!!value}
+ *   focused={isFocused}
+ * />
+ * ```
+ */
 export declare const InputBase: ForwardRefExoticComponent<InputBaseProps<string> & RefAttributes<HTMLInputElement>>;
 
 export declare type InputBaseActionsType = Pick<DOMAttributes<HTMLInputElement>, 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPaste' | 'onCopy'>;
@@ -3842,6 +3952,24 @@ export declare type InputBaseVariantStyles<Variant extends string> = CssLibProps
 
 declare type InputCssClasses = ComponentSelected<ComponentsTypesComponents['INPUT']>;
 
+/**
+ * InputDecoration component for wrapping and decorating input fields.
+ *
+ * This component provides a styled container for input elements with support
+ * for labels, icons, helper text, and various visual states. It manages the
+ * state representation (focused, filled, error, disabled) for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <InputDecoration
+ *   label="Email"
+ *   error={hasError}
+ *   helperText="Enter a valid email"
+ * >
+ *   <input type="email" />
+ * </InputDecoration>
+ * ```
+ */
 export declare const InputDecoration: ForwardRefExoticComponent<InputDecorationProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type InputDecorationCssClasses = ComponentSelected<ComponentsTypesComponents['INPUT_DECORATION']>;
@@ -3895,8 +4023,43 @@ export declare interface InputProps<Variant = undefined extends string ? unknown
     additionalClasses?: Partial<InputCssClasses>;
 }
 
+/**
+ * InputSignatureUnControlled component with internal signature management.
+ *
+ * This component provides a canvas-based signature capture that manages its own
+ * state internally. It handles drawing, clearing, and state updates automatically.
+ * Exposes methods via ref for resetting the signature canvas.
+ *
+ * @example
+ * ```tsx
+ * const signatureRef = useRef();
+ *
+ * <InputSignatureUnControlled
+ *   ref={signatureRef}
+ *   onChange={(dataUrl) => console.log(dataUrl)}
+ * />
+ *
+ * // Reset signature: signatureRef.current.reset()
+ * ```
+ */
 export declare const InputSignature: ForwardRefExoticComponent<InputSignatureUnControlledProps<string> & RefAttributes<InputSignatureCustomHandle | undefined>>;
 
+/**
+ * InputSignatureControlled component for capturing handwritten signatures.
+ *
+ * This component provides a canvas-based signature capture interface where
+ * signature style (color, line width) is controlled externally. It's useful
+ * for forms requiring user signatures.
+ *
+ * @example
+ * ```tsx
+ * <InputSignatureControlled
+ *   signatureStyle={{ color: '#000000', lineWidth: 2 }}
+ *   setSignatureStyles={(style) => console.log(style)}
+ *   onSignatureChange={(dataUrl) => setSignature(dataUrl)}
+ * />
+ * ```
+ */
 export declare const InputSignatureControlled: ForwardRefExoticComponent<InputSignatureControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4310,6 +4473,21 @@ export declare type LinkVariantStyles<Variant extends string> = LinkStylesProps
     [key in Variant]?: LinkStylesProps;
 };
 
+/**
+ * ListOptions component for displaying a list of selectable options.
+ *
+ * This component renders a list container for options/items, commonly used
+ * in dropdowns, select menus, or autocomplete interfaces. It manages styling
+ * and provides a consistent container for option elements.
+ *
+ * @example
+ * ```tsx
+ * <ListOptions variant="default">
+ *   <Option>Option 1</Option>
+ *   <Option>Option 2</Option>
+ * </ListOptions>
+ * ```
+ */
 export declare const ListOptions: ForwardRefExoticComponent<ListOptionsProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4392,122 +4570,6 @@ declare interface MediaQueries {
     onlyLargeDesktop: string;
 }
 
-export declare const Message: ForwardRefExoticComponent<MessageUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
-
-/**
- * Represents the type for the action button in the Message component.
- */
-export declare type MessageActionButtonProps = Omit<ButtonProps, 'children' | 'size'> & {
-    content?: React.ReactNode;
-    size?: string;
-};
-
-/**
- * Represents the type for the container as a link in the Message component.
- */
-export declare interface MessageContainerAsLinkProps {
-    onClick?: () => void;
-    url?: string;
-    target?: React.HTMLAttributeAnchorTarget;
-}
-
-export declare const MessageControlled: ForwardRefExoticComponent<MessageProps<string> & RefAttributes<HTMLDivElement>>;
-
-declare type MessageCssClasses = ComponentSelected<ComponentsTypesComponents['MESSAGE']>;
-
-/**
- * Represents the type for the extra action button in the Message component.
- */
-export declare type MessageExtraActionButtonProps = Omit<ButtonProps, 'children'> & {
-    content?: React.ReactNode;
-};
-
-/**
- * Represents the type for the link in the Message component.
- */
-export declare type MessageLinkProps = Omit<LinkProps, 'children'> & {
-    content?: string;
-};
-
-/**
- * Interface for the controlled Message component.
- * Extends the MessageStandAloneProps interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the Message.
- */
-export declare interface MessageProps<Variant = undefined extends string ? unknown : string> extends Omit<MessageStandAloneProps, 'linkComponent'> {
-    open: boolean;
-    variant?: Variant;
-    additionalClasses?: Partial<MessageCssClasses>;
-}
-
-/**
- * Interface for the standalone Message component.
- * Includes properties for icons, buttons, links, tags, and CSS classes.
- */
-export declare interface MessageStandAloneProps extends DataAttributes {
-    linkComponent: GenericLinkType;
-    messageContainerProps?: MessageContainerAsLinkProps;
-    titleAndContentContainerProps?: MessageContainerAsLinkProps;
-    titleAndContentRole?: AriaRole;
-    infoIcon?: ElementOrIconProps;
-    actionButton?: MessageActionButtonProps;
-    extraActionButton?: MessageExtraActionButtonProps;
-    content: CommonTextProps;
-    inlineLink?: MessageLinkProps;
-    title?: CommonTextProps;
-    tag?: MessageTagProps;
-    ariaMessageId?: string;
-    closeIcon?: ElementOrIconProps;
-    maxContentLength?: number;
-    open: boolean;
-    role?: React.AriaRole;
-    id?: string;
-    ariaLive?: AriaAttributes['aria-live'];
-    links?: MessageLinkProps[];
-    cssClasses?: MessageCssClasses;
-}
-
-export declare interface MessageStyleProps extends CssLibPropsType {
-    _container?: CssLibPropsType;
-    _headerContainer?: CssLibPropsType;
-    _headerContainerLargeMessage?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _titleContainer?: CssLibPropsType;
-    _contentContainer?: CssLibPropsType;
-    _contentContainerLargeMessage?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _infoIcon?: CssLibPropsType;
-    _closeIcon?: CssLibPropsType;
-    _buttonSectionContainer?: CssLibPropsType;
-    _actionButtonContainer?: CssLibPropsType;
-    _extraActionButtonContainer?: CssLibPropsType;
-    _illustration?: CssLibPropsType;
-    _linkContainer?: CssLibPropsType;
-    _linksContainer?: CssLibPropsType;
-}
-
-/**
- * Represents the type for the tag in the Message component.
- */
-export declare type MessageTagProps = Omit<TagProps, 'children'> & {
-    content: string;
-};
-
-/**
- * Interface for the uncontrolled Message component.
- * Extends the MessageProps interface and omits specific properties.
- *
- * @template Variant - The type of the variant for the Message.
- */
-export declare interface MessageUnControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<MessageProps<Variant>, 'open'> {
-    defaultOpen?: boolean;
-}
-
-export declare type MessageVariantStyles<Variant extends string> = MessageStyleProps & {
-    [key in Variant]: MessageStyleProps;
-};
-
 /**
  * Options for middleware configuration in the popover
  */
@@ -4517,6 +4579,23 @@ declare interface MiddlewareOptions {
     hideWhenDetached?: boolean;
 }
 
+/**
+ * ModalUnControlled component with internal state management.
+ *
+ * This component renders a modal that manages its own open/close state internally.
+ * It automatically syncs with prop changes and handles keyboard interactions.
+ * Useful when you don't need external control over the modal's visibility.
+ *
+ * @example
+ * ```tsx
+ * <ModalUnControlled
+ *   open={true}
+ *   onClose={() => console.log('closed')}
+ * >
+ *   Modal content
+ * </ModalUnControlled>
+ * ```
+ */
 export declare const Modal: ForwardRefExoticComponent<ModalUnControlledProps<string | undefined> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
@@ -4537,6 +4616,24 @@ export declare interface ModalContentContainerProps extends Pick<AriaAttributes,
     role?: string;
 }
 
+/**
+ * ModalControlled component for displaying overlay dialogs.
+ *
+ * This component manages modal visibility externally through props. It provides
+ * scroll detection, swipe-down gestures, focus management, and portal rendering.
+ * Use this when you need full control over the modal's open/close state.
+ *
+ * @example
+ * ```tsx
+ * <ModalControlled
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="default"
+ * >
+ *   Modal content here
+ * </ModalControlled>
+ * ```
+ */
 export declare const ModalControlled: ForwardRefExoticComponent<ModalControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4693,6 +4790,24 @@ declare type NonVariablesKeys_2<T> = {
     [K in keyof T]: K extends `$${string}` ? never : K;
 }[keyof T];
 
+/**
+ * Option component for rendering selectable list items.
+ *
+ * This component represents a single option within a list, dropdown, or menu.
+ * It manages focus states and supports custom variants for flexible styling.
+ * Useful for building accessible select menus, autocomplete lists, or navigation options.
+ *
+ * Accepts a generic type parameter `<Variant extends string>` for custom variant values.
+ *
+ * @example
+ * ```tsx
+ * <Option value="option1" variant="default">Option 1</Option>
+ *
+ * // With custom variant:
+ * type MyVariant = "primary" | "secondary";
+ * <Option<MyVariant> variant="primary" value="item">Primary Option</Option>
+ * ```
+ */
 declare const Option_2: ForwardRefExoticComponent<OptionProps<string> & RefAttributes<HTMLElement>>;
 export { Option_2 as Option }
 
@@ -4760,6 +4875,23 @@ export declare type OptionVariantStyles<Variant extends string> = OptionStylePro
     [key in Variant]: OptionStyleProps;
 };
 
+/**
+ * PageControl component for pagination/slide navigation indicators.
+ *
+ * This component displays navigation dots or bullets with arrow controls for
+ * paginated content like carousels. It handles position tracking, visibility
+ * of dots, and direction-based navigation.
+ *
+ * @example
+ * ```tsx
+ * <PageControl
+ *   pages={10}
+ *   currentPosition={3}
+ *   onPageChange={(page) => console.log(page)}
+ *   isBullet
+ * />
+ * ```
+ */
 export declare const PageControl: ForwardRefExoticComponent<PageControlProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4827,6 +4959,26 @@ export declare type PageControlVariantStyles<Variant extends string> = PageContr
     [key in Variant]: PageControlStyleProps;
 };
 
+/**
+ * Pagination component for navigating through multiple pages.
+ *
+ * This component renders a pagination control with page numbers and navigation buttons.
+ * It automatically adjusts the visible page numbers based on screen size and configuration.
+ * Useful for implementing page navigation in lists, tables, or content galleries.
+ *
+ * Accepts a generic type parameter `<Variant extends string>` for custom variant styling.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   variant="default"
+ *   currentStep={5}
+ *   maxStepsNumber={100}
+ *   maxCountersNumber={7}
+ *   onStepChange={handlePageChange}
+ * />
+ * ```
+ */
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4925,6 +5077,24 @@ export declare interface PopoverStylePropsV2 extends CssLibPropsType {
 
 declare type PositionType = 'bottom' | 'bottom-center' | 'bottom-center-fixed' | 'bottom-fixed' | 'bottom-gap-right' | 'bottom-left' | 'bottom-left-fit-content' | 'bottom-right' | 'bottom-right-fit-content' | 'center' | 'left' | 'left-bottom-fixed' | 'left-fixed' | 'right' | 'right-fixed' | 'top' | 'top-center' | 'top-center-fixed' | 'top-left' | 'top-right' | 'without';
 
+/**
+ * ProgressBar component for displaying progress indicators.
+ *
+ * This component visualizes completion progress with customizable variants and sizes.
+ * It displays a filled bar representing the percentage of progress completed.
+ * Useful for showing loading states, task completion, or any measurable progress.
+ *
+ * Accepts generic type parameters `<Variant, Size>` for custom styling values.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar variant="primary" size="md" percentProgressCompleted={60} />
+ *
+ * // With custom types:
+ * type MyVariant = "success" | "warning";
+ * <ProgressBar<MyVariant> variant="success" percentProgressCompleted={100} />
+ * ```
+ */
 export declare const ProgressBar: ForwardRefExoticComponent<ProgressBarProps<string | undefined, unknown> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4961,11 +5131,6 @@ export declare interface ProgressBarStandAloneProps extends DataAttributes {
     cssSizeClasses?: ProgressBarCssClasses;
     barAriaLabel?: string;
     progressCompleted: number;
-    onChange?: (value: number) => void;
-    onDragStart?: () => void;
-    onDragEnd?: () => void;
-    tooltip?: SliderTooltipProps;
-    useAsSlider?: boolean;
     progressAnimation?: {
         duration?: string;
         timingFunction?: string;
@@ -4987,6 +5152,22 @@ export declare type ProgressBarVariantStyles<Variant extends string> = {
 
 declare type propsToOmit = 'styles' | 'filled' | 'focused' | 'inputBaseId' | 'labelId';
 
+/**
+ * RadioButton component for single selection from multiple options.
+ *
+ * This component renders a styled radio input for use in forms and option groups.
+ * It manages checked, disabled, and error states with appropriate visual feedback.
+ *
+ * @example
+ * ```tsx
+ * <RadioButton
+ *   name="option"
+ *   value="1"
+ *   checked={selectedValue === "1"}
+ *   onChange={(e) => setSelectedValue(e.target.value)}
+ * />
+ * ```
+ */
 export declare const RadioButton: ({ additionalClasses, checked, cssClasses: propsStyles, disabled, error, variant, ...props }: RadioButtonProps) => JSX.Element;
 
 /**
@@ -5092,16 +5273,24 @@ declare interface ScreenReaderOnlyProps extends DataAttributes {
     role?: React.AriaRole;
 }
 
-export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
-
 /**
- * Represents the type for the button in the SelectorBoxFile component.
+ * SelectorBoxFile component for file upload with drag-and-drop support.
+ *
+ * This component provides a file selection interface with validation for file type
+ * and size, upload progress display, error handling, and visual feedback states
+ * (loading, success, error). It manages internal state for file selection and focus.
+ *
+ * @example
+ * ```tsx
+ * <SelectorBoxFile
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   onChange={(files) => console.log(files)}
+ *   onSizeError={(file) => alert('File too large')}
+ * />
+ * ```
  */
-export declare type SelectorBoxFileButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'size'> & {
-    content: string;
-    variant?: string;
-    size?: string;
-};
+export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
  * Represents the mapping of states to content in the SelectorBoxFile component.
@@ -5129,6 +5318,8 @@ export declare interface SelectorBoxFileProps<Variant = undefined extends string
     success?: boolean;
     error?: boolean;
     disabled?: boolean;
+    errorMaxSizeMessage?: CommonTextProps;
+    errorFileExtensionMessage?: CommonTextProps;
     percentage?: number;
     variant?: Variant;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -5143,16 +5334,8 @@ export declare interface SelectorBoxFileProps<Variant = undefined extends string
  */
 export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
     state: SelectorBoxFileStateType;
-    title?: CommonTextProps;
-    subtitle?: CommonTextProps;
-    tooltipIcon?: ElementOrIconProps;
-    tooltip?: SelectorBoxFileTooltipProps;
     containerBoxStateContent: SelectorBoxFileContainerBoxStateContentProps;
     filename?: string;
-    errorMessageIcon?: ElementOrIconProps;
-    errorMessage?: CommonTextProps;
-    errorMaxSizeMessage?: CommonTextProps;
-    errorFileExtensionMessage?: CommonTextProps;
     focus: boolean;
     onFocus: React.FocusEventHandler<HTMLInputElement>;
     onBlur: React.FocusEventHandler<HTMLInputElement>;
@@ -5163,8 +5346,6 @@ export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onAnimationCompleted?: () => void;
-    description?: CommonTextProps;
-    button?: SelectorBoxFileButtonProps;
     maxSize?: number;
     fileExtension?: string[];
     loader?: React.ReactNode;
@@ -5175,19 +5356,7 @@ export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
 declare type SelectorBoxFileStateType = Extract<StateType, 'default' | 'loading' | 'success' | 'error' | 'disabled'>;
 
 export declare interface SelectorBoxFileStyleProps extends CssLibPropsType {
-    _actionDescriptionContainer?: CssLibPropsType;
     _header?: CssLibPropsType;
-    _titleSubtitleContainer?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _subtitle?: CssLibPropsType;
-    _subtitleTooltipContainer?: CssLibPropsType;
-    _descriptionContainer?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _tooltipIconContainer?: CssLibPropsType;
-    _tooltipIcon?: CssLibPropsType;
-    _errorMessageContainer?: CssLibPropsType;
-    _errorMessageIcon?: CssLibPropsType;
-    _errorMessage?: CssLibPropsType;
     _animationContainer?: CssLibPropsType;
     _topAnimationContainer?: CssLibPropsType;
     _leftAnimationContainer?: CssLibPropsType;
@@ -5205,17 +5374,24 @@ export declare interface SelectorBoxFileStyleProps extends CssLibPropsType {
     _containerActionContainer?: CssLibPropsType;
 }
 
-/**
- * Represents the type for the tooltip in the SelectorBoxFile component.
- */
-export declare type SelectorBoxFileTooltipProps = Omit<TooltipUnControlledProps, 'children' | 'variant'> & {
-    variant?: string;
-};
-
 export declare type SelectorBoxFileVariantStyles<Variant extends string> = SelectorBoxFileStyleProps & {
     [key in Variant]?: SelectorBoxFileStyleProps;
 };
 
+/**
+ * Skeleton component for displaying loading placeholders.
+ *
+ * This component renders animated placeholder shapes while content is loading.
+ * It supports different shapes (rectangle, circle, text) and variants for styling.
+ * Useful for improving perceived performance by showing content structure during loading.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="rectangular" shapeVariant="image" />
+ * <Skeleton variant="text" shapeVariant="heading" />
+ * <Skeleton variant="circular" shapeVariant="avatar" />
+ * ```
+ */
 export declare const Skeleton: ForwardRefExoticComponent<SkeletonProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -5260,6 +5436,31 @@ export declare type SkeletonVariantStyles<Variant extends string> = CssLibPropsT
     [key in Variant]?: CssLibPropsType;
 };
 
+/**
+ * Slider component for selecting values within a range.
+ *
+ * This component provides a draggable slider control for selecting single values
+ * or value ranges. It supports keyboard navigation, custom min/max/step values,
+ * tooltips, and range selection. Handles both mouse and touch interactions.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider:
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   rangeValue={[25, 75]}
+ *   onChange={(range) => console.log(range)}
+ * />
+ * ```
+ */
 export declare const Slider: ForwardRefExoticComponent<SliderProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -5394,6 +5595,24 @@ export declare type SnackbarV2Popover = Omit<IPopover, 'children' | 'open'>;
 
 declare type StateType = 'active' | 'active_filled' | 'active_filled_hide' | 'completed' | 'default' | 'default_selected' | 'default_unselected' | 'disabled' | 'disabled_empty' | 'disabled_filled' | 'disabled_filled_hide' | 'disabled_selected' | 'disabled_unselected' | 'error' | 'error_empty' | 'error_filled' | 'error_filled_hide' | 'empty' | 'filled' | 'filled_hide' | 'focus' | 'hover' | 'loading' | 'multiple_selected' | 'multiple_selected_hover' | 'prefilled' | 'pressed' | 'selected' | 'selected_hover' | 'success' | 'warning' | 'visited' | 'inactive' | 'filling' | 'blocked_by_system' | 'error_unselected' | 'error_selected' | 'current' | 'current_day' | 'start_date_range' | 'end_date_range' | 'midle_date_range' | 'pending' | 'unselected';
 
+/**
+ * StepperNumber component for incrementing/decrementing numeric values.
+ *
+ * This component provides plus/minus buttons for adjusting numeric values with
+ * configurable step intervals. Supports both horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * <StepperNumber
+ *   value={5}
+ *   min={0}
+ *   max={10}
+ *   step={1}
+ *   onChange={(newValue) => console.log(newValue)}
+ *   orientation="horizontal"
+ * />
+ * ```
+ */
 export declare const StepperNumber: ForwardRefExoticComponent<StepperNumberProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type StepperNumberCssClasses = ComponentSelected<ComponentsTypesComponents['STEPPER_NUMBER']>;
@@ -5605,6 +5824,21 @@ export declare const Table: ForwardRefExoticComponent<TableProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
+/**
+ * TableBody component for rendering table body sections.
+ *
+ * This component wraps the tbody element with consistent styling and variant support.
+ * Use it as a container for TableRow components within a Table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody variant="default">
+ *     <TableRow>...</TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export declare const TableBody: ForwardRefExoticComponent<TableBodyProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5626,6 +5860,22 @@ export declare type TableBodyVariantStyles<Variant extends string> = CssLibProps
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableCaption component for providing titles or descriptions for tables.
+ *
+ * This component renders a caption element for tables, helping users understand
+ * the table's purpose or contents. Important for accessibility and SEO.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableCaption variant="default">
+ *     Sales Report for Q4 2024
+ *   </TableCaption>
+ *   <TableHead>...</TableHead>
+ * </Table>
+ * ```
+ */
 export declare const TableCaption: ForwardRefExoticComponent<TableCaptionProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5648,6 +5898,20 @@ export declare type TableCaptionVariantStyles<Variant extends string> = CssLibPr
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableCell component for rendering individual table cells.
+ *
+ * This component wraps td or th elements with consistent styling and variant support.
+ * Use it within TableRow components to display data or headers in a table.
+ *
+ * @example
+ * ```tsx
+ * <TableRow>
+ *   <TableCell variant="default">Cell content</TableCell>
+ *   <TableCell>Another cell</TableCell>
+ * </TableRow>
+ * ```
+ */
 export declare const TableCell: ForwardRefExoticComponent<TableCellProps<string> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableCellElement>>;
@@ -5704,6 +5968,23 @@ export declare type TableCellVariantStyles<Variant extends string> = CssLibProps
 
 declare type TableCssClasses = ComponentSelected<ComponentsTypesComponents['TABLE']>;
 
+/**
+ * TableDivider component for rendering visual separators in tables.
+ *
+ * This component creates visual dividers or separators between table sections.
+ * Useful for organizing complex tables with multiple logical groups of data.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody>
+ *     <TableRow>...</TableRow>
+ *     <TableDivider variant="default" />
+ *     <TableRow>...</TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export declare const TableDivider: ForwardRefExoticComponent<TableDividerProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5725,6 +6006,25 @@ export declare type TableDividerVariantStyles<Variant extends string> = CssLibPr
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableFoot component for rendering table footer sections.
+ *
+ * This component wraps the tfoot element with consistent styling and variant support.
+ * Use it to display summary rows, totals, or footer information in a table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody>...</TableBody>
+ *   <TableFoot variant="default">
+ *     <TableRow>
+ *       <TableCell>Total</TableCell>
+ *       <TableCell>$1,234</TableCell>
+ *     </TableRow>
+ *   </TableFoot>
+ * </Table>
+ * ```
+ */
 export declare const TableFoot: ForwardRefExoticComponent<TableFootProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5746,6 +6046,23 @@ export declare type TableFootVariantStyles<Variant extends string> = CssLibProps
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableHead component for rendering table header sections.
+ *
+ * This component wraps the thead element with consistent styling and variant support.
+ * Use it as a container for TableRow components with header cells within a Table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHead variant="default">
+ *     <TableRow>
+ *       <TableCell>Header 1</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ * </Table>
+ * ```
+ */
 export declare const TableHead: ForwardRefExoticComponent<TableHeadProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5777,6 +6094,22 @@ export declare interface TableProps extends Omit<TableStandAloneProps, 'hasScrol
     additionalClasses?: Partial<TableCssClasses>;
 }
 
+/**
+ * TableRow component for rendering table rows.
+ *
+ * This component wraps the tr element with consistent styling and variant support.
+ * Use it as a container for TableCell components within TableHead or TableBody sections.
+ *
+ * @example
+ * ```tsx
+ * <TableBody>
+ *   <TableRow variant="default">
+ *     <TableCell>Data 1</TableCell>
+ *     <TableCell>Data 2</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ * ```
+ */
 export declare const TableRow: ForwardRefExoticComponent<TableRowProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableRowElement>>;
@@ -5826,8 +6159,44 @@ export declare type TableVariantStyles<Variant extends string> = TableStyleProps
     [key in Variant]: TableStyleProps;
 };
 
+/**
+ * TabsUnControlled component with internal tab selection state.
+ *
+ * This component renders a tab navigation that manages the selected tab internally.
+ * It starts with a default selected tab and updates automatically on user interaction.
+ * Useful when you don't need to control tab selection from a parent component.
+ *
+ * @example
+ * ```tsx
+ * <TabsUnControlled
+ *   defaultSelectedTab={0}
+ *   tabs={[
+ *     { id: 'tab1', label: 'Tab 1' },
+ *     { id: 'tab2', label: 'Tab 2' }
+ *   ]}
+ *   onSelectTab={(index) => console.log(index)}
+ * />
+ * ```
+ */
 export declare const Tabs: ForwardRefExoticComponent<TabsUnControlledProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
+/**
+ * TabsControlled component for tab navigation with external state management.
+ *
+ * This component displays a set of tabs where the selected tab is controlled
+ * externally via props. It's device-aware and adjusts behavior based on screen size.
+ *
+ * @example
+ * ```tsx
+ * <TabsControlled
+ *   defaultSelectedTab="tab1"
+ *   tabs={[
+ *     { id: 'tab1', label: 'Tab 1' },
+ *     { id: 'tab2', label: 'Tab 2' }
+ *   ]}
+ * />
+ * ```
+ */
 export declare const TabsControlled: ForwardRefExoticComponent<TabsUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type TabsCssClasses = ComponentSelected<ComponentsTypesComponents['TABS']>;
@@ -5982,6 +6351,23 @@ export declare type TagVariantStyles<Variant extends string> = TagStyleProps & {
 declare const Text_2: ForwardRefExoticComponent<TextProps<string> & RefAttributes<HTMLParagraphElement>>;
 export { Text_2 as Text }
 
+/**
+ * TextArea component for multi-line text input.
+ *
+ * This component provides a styled textarea with support for labels, error states,
+ * character counting, and focus management. It handles internal focus state and
+ * applies appropriate styling based on filled and error states.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   label="Comments"
+ *   placeholder="Enter your comments"
+ *   maxLength={500}
+ *   error="Required field"
+ * />
+ * ```
+ */
 export declare const TextArea: ForwardRefExoticComponent<TextAreaProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
 export declare type TextAreaCssClasses = ComponentSelected<ComponentsTypesComponents['TEXT_AREA']>;
@@ -6267,6 +6653,23 @@ export declare type ToggleVariantStyles<Variant extends string> = ToggleVariantS
     [key in Variant]?: ToggleVariantStyleProps;
 };
 
+/**
+ * TooltipUnControlled component with internal visibility management.
+ *
+ * This component renders a tooltip that manages its own open/close state based
+ * on user interactions (hover, focus). It handles modal behavior on mobile devices,
+ * scroll detection, swipe gestures, and focus trapping automatically.
+ *
+ * @example
+ * ```tsx
+ * <TooltipUnControlled
+ *   title="Helpful information"
+ *   variant="default"
+ * >
+ *   <button>Hover me</button>
+ * </TooltipUnControlled>
+ * ```
+ */
 export declare const Tooltip: ForwardRefExoticComponent<TooltipUnControlledProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
 declare type TooltipAlignType = Extract<PositionType, 'top' | 'right' | 'bottom' | 'left'>;
@@ -6278,6 +6681,25 @@ export declare type TooltipCloseIconProps = Omit<IconProps, 'icon'> & {
     icon?: string;
 };
 
+/**
+ * TooltipControlled component for displaying contextual information.
+ *
+ * This component renders a tooltip that can be shown on hover or focus.
+ * It supports modal behavior on mobile devices and adjusts positioning based
+ * on scroll detection. State is managed externally via props.
+ *
+ * @example
+ * ```tsx
+ * <TooltipControlled
+ *   variant="default"
+ *   title="Help text"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ * >
+ *   <button>Hover me</button>
+ * </TooltipControlled>
+ * ```
+ */
 export declare const TooltipControlled: <Variant extends string>({ additionalClasses, tooltipAriaLabel, tooltipAsModal: propTooltipAsModal, tooltipAsModal: isModal, tooltipRef, variant, ...props }: TooltipControlledProps<Variant>) => JSX.Element;
 
 /**