@kubit-ui-web/react-components 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/esm/lib/provider/stylesProvider/stylesProvider.js

@@ -1,2 +1,2 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{createContext as t,useContext as s,useMemo as r,useState as n}from"react";import{Provider as i}from"../cssProvider/provider.js";const o=t(void 0),a=()=>{const e=s(o);if(!e)throw new Error("useStylesContext must be used within a StylesProvider");return e},l={lg:992,md:768,sm:576,xl:1200},m=({breakpoints:t=l,children:s,icons:a={},illustrations:m={},themeSelected:d,bernovaProvider:c,linkId:h="kb-styled-provider",jsInCss:p=!0})=>{const x=t,u=(e=>({onlyDesktop:`(max-width: ${e.xl}px)`,onlyLargeDesktop:`(min-width: ${e.xl}px)`,onlyMobile:`(max-width: ${e.md-1}px)`,onlyTablet:`(min-width: ${e.md}px) and (max-width: ${e.lg-1}px)`}))(t),v=a,y=m,b=r(()=>new(c||i)({jsInCss:p,linkId:h}),[]),[w,C]=n(d||b.themeSelected);b.themeSelected=w||"";/* @__PURE__ */
-return e.jsx(o.Provider,{value:{breakpoints:x,changeTheme:e=>{try{b.themeSelected=e,C(e)}catch(t){}},classes:[],currentTheme:w,getComponentStyles:({additionalClassNames:e,component:t,variant:s})=>{try{return b.getComponentStyles({additionalClassNames:e,component:t,variant:s||""})}catch(r){return{}}},icons:v,illustrations:y,mediaQueries:u,themeClassNames:b.classNames,themes:b.allThemes,themeVariables:b.variables},children:s})};export{o as StylesContext,m as StylesProvider,a as useStylesContext};
+import{j as e}from"../../../_virtual/jsx-runtime.js";import{createContext as t,useContext as s,useMemo as r,useState as n}from"react";import{Provider as i}from"../cssProvider/provider.js";const o=t(void 0),a=()=>{const e=s(o);if(!e)throw new Error("useStylesContext must be used within a StylesProvider");return e},l={lg:992,md:768,sm:576,xl:1200},m=({bernovaProvider:t,breakpoints:s=l,children:a,icons:m={},illustrations:d={},jsInCss:c=!0,linkId:h="kb-styled-provider",themeSelected:p})=>{const x=s,u=(e=>({onlyDesktop:`(max-width: ${e.xl}px)`,onlyLargeDesktop:`(min-width: ${e.xl}px)`,onlyMobile:`(max-width: ${e.md-1}px)`,onlyTablet:`(min-width: ${e.md}px) and (max-width: ${e.lg-1}px)`}))(s),v=m,y=d,b=r(()=>new(t||i)({jsInCss:c,linkId:h}),[]),[w,C]=n(p||b.themeSelected);b.themeSelected=w||"";/* @__PURE__ */
+return e.jsx(o.Provider,{value:{breakpoints:x,changeTheme:e=>{try{b.themeSelected=e,C(e)}catch(t){}},classes:[],currentTheme:w,getComponentStyles:({additionalClassNames:e,component:t,variant:s})=>{try{return b.getComponentStyles({additionalClassNames:e,component:t,variant:s||""})}catch(r){return{}}},icons:v,illustrations:y,mediaQueries:u,themeClassNames:b.classNames,themes:b.allThemes,themeVariables:b.variables},children:a})};export{o as StylesContext,m as StylesProvider,a as useStylesContext};

package/dist/esm/lib/utils/process/processIcon/processIcon.js

@@ -1 +1 @@
-import{isString as i}from"../../is/isString.js";const o=o=>o?i(o)?{icon:o}:o:{};export{o as processIcon};
+const o=o=>o?"string"==typeof o?{icon:o}:o:{};export{o as processIcon};

package/dist/esm/lib/utils/process/processText/processText.js

@@ -1 +1 @@
-import{isReactNode as t}from"../../is/isReactNode.js";import{isString as e}from"../../is/isString.js";const i=(i,n)=>{if(!i)return{children:null};let r;return e(i)||t(i)?r=e(i)?i:void 0:"object"==typeof i&&"content"in i&&(r=i.content),n&&r&&(r=r.substring(0,n)),t(i)?{children:i}:"object"==typeof i?{children:r,...i}:{children:r}};export{i as processText};
+import{isValidElement as t}from"react";const e=(e,n)=>{if(!e)return{children:null};let r;return"string"==typeof e||t(e)?r="string"==typeof e?e:void 0:"object"==typeof e&&"content"in e&&(r=e.content),n&&r&&(r=r.substring(0,n)),t(e)?{children:e}:"object"==typeof e?{children:r,...e}:{children:r}};export{e as processText};

package/dist/styles/kubit/css/kubit.css

@@ -738,7 +738,7 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
 .carousel__content[data-center-mode="true"] > *[data-highlighted] { transform: scale(1); }
 .carousel__content[data-shifting="true"] { transition: left 0.5s ease-out; }
 .carousel__content > * { flex-shrink: 0; }
-.carousel__viewer { cursor: grab; overflow: hidden; position: relative; padding: 0.5rem; }
+.carousel__viewer { cursor: grab; overflow: hidden; padding: 0.5rem; position: relative; }
 .carousel__viewer[data-allow-modify-slice-width="false"] { width: 0px; }
 .carousel__viewer[data-allow-modify-slice-width="true"] { width: 100%; }
 .carousel__viewer[data-disabled="true"] { cursor: default; }

package/dist/types/index.d.ts

@@ -433,10 +433,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;
 }
 
@@ -3203,16 +3211,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 +3449,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>>;
 
@@ -4043,14 +4108,63 @@ 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;
 }
 
@@ -4252,10 +4366,18 @@ 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;
 }
 
@@ -5340,35 +5462,97 @@ 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;
 }
 
@@ -5376,19 +5560,27 @@ export declare const Table: ForwardRefExoticComponent<TableProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
+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;
+};
+
 export declare const TableCaption: ForwardRefExoticComponent<TableCaptionProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -6141,6 +6333,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 +6366,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 +6401,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 +6509,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;
 };