@kubit-ui-web/react-components 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/types/index.d.ts

@@ -542,6 +542,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 +818,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 +917,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 +1043,6 @@ export declare interface ChipStandAloneProps extends DataAttributes {
     rangeIcon?: ElementOrIconProps;
     errorMessage?: CommonTextProps;
     rangeSeparator?: CommonTextProps;
-    /**
-     * @deprecated
-     * Use closeIcon -> altText instead
-     */
-    deleteText?: string;
     state: ChipStateType;
     cssClasses?: ChipCssClasses;
 }
@@ -3082,6 +3162,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 +3874,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 +3899,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 +3971,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 +4042,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 +4492,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,6 +4589,23 @@ declare interface MediaQueries {
     onlyLargeDesktop: string;
 }
 
+/**
+ * MessageUnControlled component with internal visibility state.
+ *
+ * This component renders a message that manages its own open/close state internally.
+ * It displays by default and can be dismissed by the user via a close button.
+ * Useful for notifications that don't require external state management.
+ *
+ * @example
+ * ```tsx
+ * <MessageUnControlled
+ *   variant="info"
+ *   title="Information"
+ *   description="This is an informational message"
+ *   defaultOpen={true}
+ * />
+ * ```
+ */
 export declare const Message: ForwardRefExoticComponent<MessageUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4411,6 +4625,23 @@ export declare interface MessageContainerAsLinkProps {
     target?: React.HTMLAttributeAnchorTarget;
 }
 
+/**
+ * MessageControlled component for displaying notification messages.
+ *
+ * This component renders styled messages with icons, close buttons, and optional
+ * action links. Useful for alerts, notifications, success/error messages, and
+ * informational banners. State is controlled externally via props.
+ *
+ * @example
+ * ```tsx
+ * <MessageControlled
+ *   variant="success"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   onClose={() => {}}
+ * />
+ * ```
+ */
 export declare const MessageControlled: ForwardRefExoticComponent<MessageProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type MessageCssClasses = ComponentSelected<ComponentsTypesComponents['MESSAGE']>;
@@ -4517,6 +4748,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 +4785,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 +4959,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 +5044,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 +5128,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 +5246,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>>;
 
 /**
@@ -4987,6 +5326,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,6 +5447,23 @@ declare interface ScreenReaderOnlyProps extends DataAttributes {
     role?: React.AriaRole;
 }
 
+/**
+ * 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 const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -5216,6 +5588,20 @@ export declare type SelectorBoxFileVariantStyles<Variant extends string> = Selec
     [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 +5646,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 +5805,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 +6034,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 +6070,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 +6108,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 +6178,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 +6216,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 +6256,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 +6304,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 +6369,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 +6561,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 +6863,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 +6891,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;
 
 /**