@kubit-ui-web/react-components 2.0.0-beta.2 → 2.0.0-beta.20

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;
@@ -433,10 +485,18 @@ export declare type BreadcrumbsVariantStyles<Variant extends string> = Breadcrum
     [key in Variant]: BreadcrumbsStyleProps;
 };
 
+/**
+ * Defines responsive breakpoints in pixels for different screen sizes.
+ * Used for creating media queries and responsive layouts.
+ */
 declare interface Breakpoints {
+    /** Small screen breakpoint (typically mobile landscape) - default: 576px */
     sm: number;
+    /** Medium screen breakpoint (typically tablets) - default: 768px */
     md: number;
+    /** Large screen breakpoint (typically desktops) - default: 992px */
     lg: number;
+    /** Extra large screen breakpoint (typically large desktops) - default: 1200px */
     xl: number;
 }
 
@@ -534,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>>;
 
 /**
@@ -788,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>>;
 
 /**
@@ -840,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>>;
 
 /**
@@ -950,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;
 }
@@ -988,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: {
@@ -1004,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;
@@ -1079,10 +1240,6 @@ declare type ComponentsTypesComponents = {
             button: string;
             icon: string;
         };
-        $_medium: {
-            button: string;
-            icon: string;
-        };
         $_small: {
             button: string;
             icon: string;
@@ -1518,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;
@@ -1811,7 +1925,6 @@ declare type ComponentsTypesComponents = {
     };
     SELECTOR_BOX_FILE: {
         selector_box_file: string;
-        actiondescriptioncontainer: string;
         actionicon: string;
         actioniconandactiontextcontainer: string;
         animationcontainer: string;
@@ -1824,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;
@@ -3074,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 & {
@@ -3203,16 +3287,30 @@ export declare type DataTableVariantStyles<Variant extends string> = DataTableSt
     [key in Variant]: DataTableStyleProps;
 };
 
+/**
+ * Options for formatting dates using Intl.DateTimeFormat.
+ * Provides granular control over date/time display format.
+ */
 declare interface DateFormatOptions {
+    /** Representation of the weekday ('long', 'short', 'narrow') */
     weekday?: Intl.DateTimeFormatOptions['weekday'];
+    /** Representation of the year ('numeric', '2-digit') */
     year?: Intl.DateTimeFormatOptions['year'];
+    /** Representation of the month ('numeric', '2-digit', 'long', 'short', 'narrow') */
     month?: Intl.DateTimeFormatOptions['month'];
+    /** Representation of the day ('numeric', '2-digit') */
     day?: Intl.DateTimeFormatOptions['day'];
+    /** Representation of the hour ('numeric', '2-digit') */
     hour?: Intl.DateTimeFormatOptions['hour'];
+    /** Representation of the minute ('numeric', '2-digit') */
     minute?: Intl.DateTimeFormatOptions['minute'];
+    /** Representation of the second ('numeric', '2-digit') */
     second?: Intl.DateTimeFormatOptions['second'];
+    /** Representation of the time zone name ('long', 'short', etc.) */
     timeZoneName?: Intl.DateTimeFormatOptions['timeZoneName'];
+    /** Whether to use 12-hour time format (true) or 24-hour format (false) */
     hour12?: Intl.DateTimeFormatOptions['hour12'];
+    /** Hour cycle to use ('h11', 'h12', 'h23', 'h24') */
     hourCycle?: Intl.DateTimeFormatOptions['hourCycle'];
 }
 
@@ -3427,74 +3525,117 @@ declare interface ElementOrIconProps extends Omit<IconProps, 'icon'>, DataAttrib
 
 declare type FormatDateType = 'd' | 'dd' | 'ddd' | 'dddd' | 'f' | 'ff' | 'fff' | 'F' | 'FF' | 'FFF' | 'ffff' | 'FFFF' | 't' | 'tt' | 'T' | 'TT' | 'ttt' | 'TTT' | 'tttt' | 'TTTT';
 
+/**
+ * React Context for generic component implementations.
+ * Provides access to custom Link and Image components throughout the application.
+ */
 export declare const GenericComponentContext: Context<GenericComponentsType | null>;
 
+/**
+ * Provider component for custom generic component implementations.
+ * Allows applications to inject their own Link and Image components
+ * (e.g., Next.js Link, React Router Link) to be used by all Kubit components.
+ *
+ * This is essential for integrating Kubit components with different routing libraries
+ * or custom implementations while maintaining consistent behavior across the application.
+ *
+ * @param props - Provider props
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.value - Custom generic components to be used throughout the application
+ *
+ * @returns The provider component wrapping all child components
+ *
+ * @example
+ * ```tsx
+ * import { Link } from 'react-router-dom';
+ *
+ * const customComponents = {
+ *   LINK: Link,
+ *   IMAGE: CustomImage,
+ * };
+ *
+ * <GenericComponentsProvider value={customComponents}>
+ *   <App />
+ * </GenericComponentsProvider>
+ * ```
+ */
 export declare const GenericComponentsProvider: ({ children, value, }: PropsWithChildren<GenericComponentsProviderProps>) => JSX.Element;
 
 /**
- * Provides the interface for the generic components provider.
- * @property {GenericComponentsType} value - The actual components to be provided.
+ * Props for the GenericComponentsProvider.
+ * Wraps the application with custom component implementations.
  */
 declare interface GenericComponentsProviderProps {
+    /** The custom generic components to be made available to child components */
     value: GenericComponentsType;
 }
 
 /**
- * Defines the types for generic components, including links and images.
+ * Collection of generic component implementations.
+ * Allows customization of primitive components used throughout the library.
  */
 declare interface GenericComponentsType {
+    /** Link component implementation (required) */
     LINK: GenericLinkType;
+    /** Image component implementation (optional) */
     IMAGE?: GenericImageType;
 }
 
 /**
- * Defines the properties for a generic image component.
+ * Props for a generic image component.
+ * Inherits all standard HTML image attributes.
  */
 declare type GenericImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
 /**
- * Defines the type for a generic image component, which can be either a functional component or a forward ref component.
+ * Type definition for a generic image component.
+ * Can be either a functional component or a forward ref component to support refs.
  */
 declare type GenericImageType = ((props: GenericImageProps) => JSX.Element) | ForwardRefExoticComponent<GenericImageProps & RefAttributes<unknown>>;
 
+/**
+ * Subset of ARIA attributes applicable to link elements.
+ * Ensures proper accessibility for navigation components.
+ */
 declare type GenericLinkAriaAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-disabled' | 'aria-current'>;
 
 /**
- * Defines the properties for a generic link component.
- * @property {string} url - The URL the link points to.
- * @property {string | JSX.Element} children - The content inside the link.
- * @property {string} [className] - Optional CSS class for styling.
- * @property {string} [target] - Specifies where to open the linked document.
- * @property {boolean} [aria-disabled] - Indicates that the element is perceivable but disabled.
- * @property {string} [aria-label] - Defines a string value that labels the current element.
- * @property {string} [aria-describedby] - Defines a string value that labels the current element.
- * @property {string} [aria-current] - Defines value for the current element.
- * @property {() => void} [onClick] - Function to call when the link is clicked.
- * @property {() => void} [onFocus] - Function to call when the link is focused.
- * @property {() => void} [onMouseEnter] - Function to call when the mouse enters the link area.
- * @property {() => void} [onMouseLeave] - Function to call when the mouse leaves the link area.
- * @property {ROLES} [role] - ARIA role to describe the link's type.
- * @property {string} [dataTestId] - Test ID for testing purposes.
- * @property {boolean} [draggable] - Indicates whether the element can be dragged.
+ * Props for a generic link component.
+ * Provides a flexible interface for custom link implementations that can be used
+ * throughout the component library (e.g., for React Router, Next.js Link, etc.).
  */
 declare type GenericLinkProps = {
+    /** The destination URL for the link */
     url: string;
+    /** Optional unique identifier for the link element */
     id?: string;
+    /** Content to be displayed inside the link */
     children: string | JSX.Element;
+    /** Optional CSS class name(s) for styling */
     className?: string;
+    /** Specifies where to open the linked document ('_blank', '_self', '_parent', '_top') */
     target?: string;
+    /** Callback function invoked when the link is clicked */
     onClick?: () => void;
+    /** Callback function invoked when the link receives focus */
     onFocus?: () => void;
+    /** Callback function invoked when the mouse pointer enters the link area */
     onMouseEnter?: () => void;
+    /** Callback function invoked when the mouse pointer leaves the link area */
     onMouseLeave?: () => void;
+    /** Relationship between the current document and the linked document */
     rel?: string;
+    /** ARIA role to override the default link role if needed */
     role?: AriaRole;
+    /** Test ID for automated testing purposes */
     dataTestId?: string;
+    /** Whether the element can be dragged */
     draggable?: boolean;
 } & GenericLinkAriaAttributes & DataAttributes;
 
 /**
- * Defines the type for a generic link component, which can be either a functional component or a forward ref component.
+ * Type definition for a generic link component.
+ * Can be either a functional component or a forward ref component to support refs.
  */
 declare type GenericLinkType = ((props: GenericLinkProps) => JSX.Element) | ForwardRefExoticComponent<GenericLinkProps & RefAttributes<unknown>>;
 
@@ -3714,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'>;
@@ -3722,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'>;
@@ -3777,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']>;
@@ -3830,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>>;
 
 /**
@@ -4043,23 +4271,83 @@ export declare interface ISnackbarV2 extends Omit<ISnackbarStandAlone, 'onMouseE
 
 declare type keyMoveType = number | ((previous: number, e?: KeyboardEvent) => number) | null;
 
+/**
+ * Main provider component for the Kubit component library.
+ * Orchestrates all sub-providers (Utils, Styles, and GenericComponents) and provides
+ * a single entry point for configuring the entire component library context.
+ *
+ * This provider wraps the application and supplies:
+ * - Date manipulation and formatting utilities
+ * - Theme and styling configuration
+ * - Custom generic components (Link, Image)
+ *
+ * @param props - Configuration props for the provider
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.genericComponentsProvider - Custom implementations of generic components (Link, Image).
+ *        Defaults to library's built-in components if not provided
+ * @param props.utilsConfig - Optional configuration to override default utility functions
+ *        (date helpers, formatters, asset paths)
+ *
+ * @returns The provider component wrapping all child components
+ *
+ * @example
+ * ```tsx
+ * import { KubitProvider } from '@kubit/react-components';
+ *
+ * function App() {
+ *   return (
+ *     <KubitProvider
+ *       genericComponentsProvider={{
+ *         LINK: CustomLink,
+ *         IMAGE: CustomImage,
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </KubitProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const KubitProvider: ({ children, genericComponentsProvider, utilsConfig, }: KubitProviderProps) => JSX.Element;
 
+/**
+ * Props for the KubitProvider component.
+ * Provides configuration for the entire Kubit component library context.
+ */
 declare interface KubitProviderProps {
+    /**
+     * The React children to be wrapped by the provider.
+     */
     children?: React.ReactNode;
+    /**
+     * Custom generic components (like Link and Image) to be used throughout the application.
+     * Defaults to the library's default generic components if not provided.
+     */
     genericComponentsProvider?: GenericComponentsType;
-    showErrors?: boolean;
-    idCreateModal?: string | null;
-    customFallback?: JSX.Element;
+    /**
+     * Configuration for utility functions like date helpers, formatting, and assets.
+     * Allows overriding the default utility configurations.
+     */
     utilsConfig?: UtilsContextType;
 }
 
-export declare const Label: ForwardRefExoticComponent<LabelStandAloneProps & RefAttributes<HTMLParagraphElement>>;
-
 /**
- * @name ILabelStandAlone
- * @description
- * interface for the label standAlone
+ * LabelStandAlone component renders an accessible label element with optional required indicator.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LabelStandAlone inputId="email" required requiredSymbol="*">
+ *   Email Address
+ * </LabelStandAlone>
+ * ```
+ */
+export declare const Label: ForwardRefExoticComponent<LabelStandAloneProps & RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * @name ILabelStandAlone
+ * @description
+ * interface for the label standAlone
  */
 export declare interface LabelStandAloneProps extends DataAttributes {
     children?: ReactNode;
@@ -4185,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>>;
 
 /**
@@ -4252,129 +4555,21 @@ export declare type ListOptionsVariantStyles<Variant extends string> = ListOptio
     [key in Variant]: ListOptionsStyleProps;
 };
 
+/**
+ * Media query strings for targeting specific screen size ranges.
+ * Built from the provided breakpoints configuration.
+ */
 declare interface MediaQueries {
+    /** Media query for mobile devices only (below md breakpoint) */
     onlyMobile: string;
+    /** Media query for tablets only (between md and lg breakpoints) */
     onlyTablet: string;
+    /** Media query for desktops (below xl breakpoint) */
     onlyDesktop: string;
+    /** Media query for large desktops (xl breakpoint and above) */
     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
  */
@@ -4384,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>>;
@@ -4404,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>>;
 
 /**
@@ -4560,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 }
 
@@ -4627,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>>;
 
 /**
@@ -4694,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>>;
 
 /**
@@ -4792,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>>;
 
 /**
@@ -4828,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;
@@ -4854,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;
 
 /**
@@ -4881,6 +5195,21 @@ export declare interface RadioButtonProps<Variant = undefined extends string ? u
     additionalClasses?: Partial<RadioButtonCssClasses>;
 }
 
+/**
+ * Standalone radio button component for rendering selectable radio inputs.
+ *
+ * This component renders a radio button with label, optional legend, error message,
+ * and custom icon states. It handles accessibility attributes and visual states.
+ *
+ * @example
+ * ```tsx
+ * <RadioButtonStandAlone
+ *   label={{ content: "Option A" }}
+ *   checked={true}
+ *   onChange={() => {}}
+ * />
+ * ```
+ */
 export declare const RadioButtonStandAlone: ({ altVariant, checked, cssClasses, disabled, error, errorAriaLiveType, errorIcon, errorMessage, id, label, lastChild, name, onBlur, onChange, screenReaderId, state, subTitle, tabIndex, value, ...props }: RadioButtonStandAloneProps) => JSX.Element;
 
 /**
@@ -4944,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.
@@ -4981,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>;
@@ -4995,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>;
@@ -5015,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;
@@ -5027,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;
@@ -5057,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>>;
 
 /**
@@ -5112,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>>;
 
 /**
@@ -5246,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']>;
@@ -5340,55 +5707,175 @@ export declare interface StepStateProps {
     ['aria-label']?: string;
 }
 
+/**
+ * React Context for styles and theming.
+ * Provides access to styling utilities, theme management, and responsive breakpoints.
+ */
 export declare const StylesContext: Context<StylesContextProps | undefined>;
 
+/**
+ * Context value provided by StylesProvider.
+ * Contains all styling-related data and utilities available to child components.
+ */
 declare interface StylesContextProps {
+    /** Current responsive breakpoints configuration */
     breakpoints: Breakpoints;
+    /** Array of CSS class names or null */
     classes: string[] | null;
+    /** Pre-built media query strings for responsive design */
     mediaQueries: MediaQueries;
+    /** Map of available icons */
     icons: Record<string, string>;
+    /** Map of available illustrations */
     illustrations: Record<string, string>;
+    /** Currently active theme name, or null if no theme is selected */
     currentTheme: string | null;
+    /** Function to retrieve styles for a specific component and variant */
     getComponentStyles: RecoverComponentStyles;
+    /** Function to change the active theme */
     changeTheme: (themeName: string) => void;
+    /** Array of CSS class names for the current theme */
     themeClassNames: string[];
+    /** Map of all available themes */
     themes: Record<string, string>;
+    /** Map of CSS custom properties (variables) for the current theme */
     themeVariables: Record<string, string>;
 }
 
 /**
- * Provider component to supply styles-related data to its children, including theme management.
+ * Provider component for styles, theming, and responsive design utilities.
+ * Manages theme selection, CSS class generation, and provides styling context to child components.
+ *
+ * Features:
+ * - Theme management with dynamic theme switching
+ * - Responsive breakpoints and media queries
+ * - Icon and illustration asset management
+ * - Component-specific style retrieval
+ * - CSS-in-JS support via Bernova provider
+ *
+ * @param props - Configuration props for the styles provider
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.breakpoints - Custom responsive breakpoints (defaults to standard breakpoints if not provided)
+ * @param props.icons - Map of icon names to URLs or base64 strings
+ * @param props.illustrations - Map of illustration names to URLs or base64 strings
+ * @param props.themeSelected - Initial theme to apply
+ * @param props.bernovaProvider - Custom Bernova provider instance for advanced styling control
+ * @param props.linkId - ID for the style link element in the DOM (default: 'kb-styled-provider')
+ * @param props.jsInCss - Whether to inject CSS directly into JavaScript (default: true)
+ *
+ * @returns The styled provider component wrapping all child components
+ *
+ * @example
+ * ```tsx
+ * <StylesProvider
+ *   themeSelected="dark"
+ *   breakpoints={{ sm: 576, md: 768, lg: 992, xl: 1200 }}
+ *   icons={{ home: '/icons/home.svg' }}
+ * >
+ *   <App />
+ * </StylesProvider>
+ * ```
  */
 export declare const StylesProvider: FC<StylesProviderProps>;
 
+/**
+ * Props for the StylesProvider component.
+ * Configures the styling system including themes, breakpoints, and assets.
+ */
 declare interface StylesProviderProps {
+    /** The React children to be wrapped by the provider */
     children: React.ReactNode;
+    /** Custom breakpoints for responsive design. If not provided, uses default breakpoints */
     breakpoints?: Breakpoints;
+    /** Map of icon names to their corresponding URLs or base64 strings */
     icons?: Record<string, string>;
+    /** Map of illustration names to their corresponding URLs or base64 strings */
     illustrations?: Record<string, string>;
+    /** The initial theme to be applied. If not provided, uses the provider's default theme */
     themeSelected?: string;
+    /** Custom Bernova provider instance for advanced styling control */
     bernovaProvider?: typeof Provider;
+    /** ID for the style link element in the DOM. Default: 'kb-styled-provider' */
     linkId?: string;
+    /** Whether to inject CSS directly into JavaScript. Default: true */
     jsInCss?: boolean;
 }
 
+/**
+ * Table component with automatic sticky column calculations and scroll shadow effects.
+ *
+ * This component wraps TableStandAlone and adds automatic sticky positioning for left
+ * and right columns, scroll shadow effects, and responsive behavior. It manages scroll
+ * state and column positioning internally.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   variant="primary"
+ *   autoLeftStickyCalc={true}
+ *   autoRightStickyCalc={true}
+ * >
+ *   <thead>...</thead>
+ *   <tbody>...</tbody>
+ * </Table>
+ * ```
+ */
 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>>;
+
 declare type TableBodyCssClasses = ComponentSelected<ComponentsTypesComponents['TABLE_BODY']>;
 
-declare interface TableBodyProps extends TableBodyStandAloneProps {
+export declare interface TableBodyProps extends TableBodyStandAloneProps {
     variant?: string;
     additionalClasses?: Partial<TableBodyCssClasses>;
 }
 
-declare interface TableBodyStandAloneProps extends DataAttributes {
+export declare interface TableBodyStandAloneProps extends DataAttributes {
     cssClasses?: TableBodyCssClasses;
     id?: string;
     component?: string | React.ComponentType<any>;
 }
 
+export declare type TableBodyVariantStyles<Variant extends string> = CssLibPropsType & {
+    [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>>;
@@ -5411,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>>;
@@ -5467,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>>;
@@ -5488,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>>;
@@ -5509,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>>;
@@ -5540,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>>;
@@ -5589,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']>;
@@ -5745,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']>;
@@ -6030,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'>;
@@ -6041,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;
 
 /**
@@ -6141,6 +6800,24 @@ export declare type TooltipVariantStyles<Variant extends string> = TooltipStyleP
     [key in Variant]?: TooltipStyleProps;
 };
 
+/**
+ * Custom hook to access the generic components context.
+ * Provides access to the custom Link and Image components configured in the provider.
+ *
+ * @throws {Error} If used outside of a GenericComponentsProvider or with invalid value
+ * @returns The generic components (LINK, IMAGE) from the context
+ *
+ * @example
+ * ```tsx
+ * const { LINK, IMAGE } = useGenericComponents();
+ *
+ * return (
+ *   <LINK url="/home">
+ *     <IMAGE src="/logo.png" alt="Logo" />
+ *   </LINK>
+ * );
+ * ```
+ */
 export declare const useGenericComponents: () => GenericComponentsType;
 
 declare interface UseRoveFocusProps {
@@ -6156,10 +6833,17 @@ declare interface UseRoveFocusProps {
 }
 
 /**
- * Custom hook to access the `StylesContext`.
+ * Custom hook to access the StylesContext.
+ * Provides styling utilities including theme management, breakpoints, and component styles.
  *
- * @throws Will throw an error if used outside of a `StylesProvider`.
- * @returns The current value of the `StylesContext`.
+ * @throws {Error} If used outside of a StylesProvider
+ * @returns The current styles context value
+ *
+ * @example
+ * ```tsx
+ * const { currentTheme, changeTheme, getComponentStyles } = useStylesContext();
+ * const styles = getComponentStyles({ component: 'button', variant: 'primary' });
+ * ```
  */
 export declare const useStylesContext: () => StylesContextProps;
 
@@ -6184,27 +6868,84 @@ export declare const useUtilsProvider: () => UtilsContextType;
  */
 export declare const UtilsContext: Context<UtilsContextType | null>;
 
+/**
+ * Context type for utility functions and configurations.
+ * Provides date manipulation, formatting, and asset management utilities.
+ */
 declare interface UtilsContextType {
+    /**
+     * Base URLs for different types of assets.
+     * Used to construct full paths for icons, illustrations, images, and animations.
+     */
     assets?: {
+        /** Base URL for all assets */
         baseHost: string;
+        /** Specific base URL for icon assets */
         iconsBaseHost?: string;
+        /** Specific base URL for illustration assets */
         illutrationsBaseHost?: string;
+        /** Specific base URL for image assets */
         imagesBaseHost?: string;
+        /** Specific base URL for animation assets */
         animationsBaseHost?: string;
     };
+    /**
+     * Formats a Date object into a string representation.
+     * @param date - The date to format
+     * @param format - Format string or options object (e.g., 'dd/MM/yyyy', 'd', etc.)
+     * @param locale - Optional locale string (e.g., 'en-US', 'es-ES')
+     * @returns Formatted date string
+     */
     formatDate: (date: Date, format: DateFormatOptions | FormatDateType | string, locale?: string) => string;
+    /**
+     * Transforms a string or number into a Date object.
+     * @param date - The date value to transform (timestamp or date string)
+     * @param format - Optional format string to parse the date
+     * @returns Parsed Date object
+     */
     transformDate: (date: string | number, format?: string) => Date;
+    /**
+     * Collection of date manipulation and comparison utilities.
+     */
     dateHelpers: {
+        /** Subtracts a specified number of days from a date */
         getSubDays: (date: Date, amount: number) => Date;
+        /** Subtracts a specified number of months from a date */
         getSubMonths: (date: Date, amount: number) => Date;
+        /** Subtracts a specified number of years from a date */
         getSubYears: (date: Date, amount: number) => Date;
+        /** Adds a specified number of months to a date */
         getAddMonths: (date: Date, amount: number) => Date;
+        /** Adds a specified number of days to a date */
         getAddDays: (date: Date, amount: number) => Date;
+        /** Adds a specified number of years to a date */
         getAddYears: (date: Date, years: number) => Date;
+        /**
+         * Gets all month names in the specified format and locale.
+         * @param monthFormat - Format for month names ('long', 'short', 'narrow')
+         * @param locale - Optional locale string
+         * @returns Array of month names
+         */
         getAllMonthName: (monthFormat: Intl.DateTimeFormatOptions['month'], locale?: string) => Array<string>;
+        /**
+         * Gets all weekday names in the specified format and locale.
+         * @param weekdayFormat - Format for weekday names ('long', 'short', 'narrow')
+         * @param isSundayFirst - Whether Sunday should be the first day of the week
+         * @param locale - Optional locale string
+         * @returns Array of weekday names
+         */
         getAllWeekdayName: (weekdayFormat: Intl.DateTimeFormatOptions['weekday'], isSundayFirst: boolean, locale?: string) => Array<string>;
+        /** Checks if the first date is before the second date */
         isBefore: (date1: Date, date2: Date) => boolean;
+        /** Checks if the first date is after the second date */
         isAfter: (date1: Date, date2: Date) => boolean;
+        /**
+         * Checks if two dates are equal.
+         * @param firstDate - First date to compare
+         * @param secondDate - Second date to compare
+         * @param shouldCompareTime - Whether to include time in comparison
+         * @returns True if dates are equal
+         */
         isDatesEqual: (firstDate: Date | number | string, secondDate: Date | number | string, shouldCompareTime: boolean) => boolean;
     };
 }
@@ -6235,7 +6976,12 @@ declare interface UtilsContextType {
  */
 export declare const UtilsProvider: (props: UtilsProviderProps) => JSX_2.Element;
 
+/**
+ * Props for the UtilsProvider component.
+ * Extends UtilsContextType with required children prop.
+ */
 declare type UtilsProviderProps = UtilsContextType & {
+    /** The React children to be wrapped by the provider */
     children: ReactElement;
 };