tcce-design-system-test 0.3.30 → 0.3.32

package/dist/tcce-design-system-components.d.ts

@@ -1,26 +1,48 @@
 import { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import { Cell } from '@tanstack/react-table';
+import { ChangeEvent } from 'react';
+import { ClipboardEvent as ClipboardEvent_2 } from 'react';
+import { Column } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { ColumnFiltersState } from '@tanstack/react-table';
 import { Component } from 'react';
 import { Context } from 'react';
-import { default as default_2 } from 'react';
+import { createColumnHelper } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
 import { DetailedHTMLProps } from 'react';
+import { Dispatch } from 'react';
 import { FastOmit } from 'styled-components';
 import { ForwardRefComponent } from 'motion/react';
 import { ForwardRefExoticComponent } from 'react';
+import { Header as Header_2 } from '@tanstack/react-table';
+import { HeaderGroup } from '@tanstack/react-table';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { HTMLAttributes } from 'react';
 import { HTMLMotionProps } from 'motion/react';
+import { InputHTMLAttributes } from 'react';
 import { IStyledComponentBase } from 'styled-components/dist/types';
 import { JSX } from 'react/jsx-runtime';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { LabelHTMLAttributes } from 'react';
+import { MemoExoticComponent } from 'react';
 import { MouseEventHandler } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { RemixiconComponentType } from '@remixicon/react';
+import { Row } from '@tanstack/react-table';
 import { RuleSet } from 'styled-components';
+import { SelectHTMLAttributes } from 'react';
+import { SetStateAction } from 'react';
+import { SortingState } from '@tanstack/react-table';
 import { Substitute } from 'styled-components/dist/types';
+import { Table as TanStackTableType } from '@tanstack/react-table';
+import { TextareaHTMLAttributes } from 'react';
 import { toast } from 'sonner';
 import { ToasterProps } from 'sonner';
+import { Updater } from '@tanstack/react-table';
 
 /**
  * Valid input types supported by the FormField component
@@ -44,7 +66,7 @@ $open: boolean;
  * @param param0 - Props for the Badge component.
  * @returns The Badge component.
  */
-export declare const Badge: default_2.FC<BadgeProps>;
+export declare const Badge: ({ children, variant, size, color, leftIcon, rightIcon, iconColor, iconSize, ...props }: BadgeProps) => JSX.Element;
 
 /**
  * Props for the Badge component.
@@ -56,7 +78,7 @@ export declare const Badge: default_2.FC<BadgeProps>;
  * @param iconColor - Color of the icons. Default is 'currentColor'.
  * @param iconSize - Size of the icons. Default is 'sm'.
  */
-declare interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, WithIconsProps {
+declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, WithIconsProps {
     variant?: BadgeVariant;
     size?: BadgeSize;
     color?: string;
@@ -79,11 +101,9 @@ declare type BadgeSize = 'sm' | 'md' | 'lg';
  */
 declare type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral' | 'outline';
 
-export declare const baseContentTableStyles: RuleSet<object>;
-
 export declare const baseFieldStyles: RuleSet<object>;
 
-export declare interface BaseFormFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export declare interface BaseFormFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: FormFieldSize;
     hasError?: boolean;
     disabled?: boolean;
@@ -99,18 +119,31 @@ export declare interface BaseInputProps extends Omit<BaseFormFieldProps, 'type'>
 
 export declare const baseInputStyles: RuleSet<object>;
 
-export declare interface BaseLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export declare interface BaseLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     size?: LabelSize;
     disabled?: boolean;
     required?: boolean;
     className?: string;
 }
 
-export declare const baseTableCellsSizes: {
-    sm: RuleSet<object>;
-    md: RuleSet<object>;
-    lg: RuleSet<object>;
-};
+/**
+ * Base props for the Spinner component.
+ * @interface BaseSpinnerProps
+ * @property {Size} [size] - Size of the spinner.
+ * @property {ColorKey} [color] - Color variant of the spinner.
+ * @property {boolean} [centered] - Whether to center the spinner in a container.
+ * @property {string} [message] - Optional message to display with the spinner.
+ * @property {string} [title] - Optional title for accessibility.
+ * @property {Variant} [variant] - Animation variant of the spinner.
+ */
+export declare interface BaseSpinnerProps {
+    size?: Size;
+    color?: ColorKey;
+    centered?: boolean;
+    message?: string;
+    title?: string;
+    variant?: Variant;
+}
 
 export declare const bodyTextStyles: {
     80: RuleSet<object>;
@@ -127,9 +160,9 @@ export declare const bodyTextStyles: {
 
 export declare const BrandLogo: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 
-export declare const Button: default_2.FC<ButtonProps>;
+export declare const Button: ({ children, variant, size, isLoading, disabled, leftIcon, rightIcon, iconSize, iconColor, ...props }: ButtonProps) => JSX.Element;
 
-declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, WithIconsProps {
+declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, WithIconsProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
@@ -137,49 +170,54 @@ declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
 
 declare type ButtonSize = 'sm' | 'md' | 'lg';
 
-export declare const ButtonSpinner: default_2.FC<{
-    color?: ColorKey;
-    variant?: Variant;
-}>;
-
 declare type ButtonVariant = 'primary' | 'secondary' | 'cancel' | 'outline';
 
-export declare const Card: default_2.FC<CardProps>;
+export declare const Card: ({ variant, size, disabled, onClick, children, ...props }: CardProps) => JSX.Element;
+
+export declare const CardBody: ({ children, showDivider, ...props }: CardBodyProps) => JSX.Element;
+
+declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    showDivider?: boolean;
+}
 
-export declare const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const CardFooter: ({ children, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
-export declare const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const CardHeader: ({ children, showDivider, ...props }: CardHeaderProps) => JSX.Element;
 
-export declare const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    showDivider?: boolean;
+}
 
-export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
     variant?: CardVariant;
     size?: CardSize;
     disabled?: boolean;
 }
 
-declare type CardSize = 'sm' | 'md' | 'lg';
+export declare type CardSize = 'sm' | 'md' | 'lg';
+
+export declare type CardVariant = 'elevated' | 'flat' | 'info';
 
-declare type CardVariant = 'elevated' | 'flat' | 'info';
+export declare type CellAlignment = 'left' | 'center' | 'right';
 
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 
-export declare const CheckboxInput: default_2.ForwardRefExoticComponent<CheckboxInputProps & default_2.RefAttributes<HTMLInputElement>>;
+export declare const CheckboxInput: ForwardRefExoticComponent<CheckboxInputProps & RefAttributes<HTMLInputElement>>;
 
-declare interface CheckboxInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+declare interface CheckboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: FormFieldSize;
     hasError?: boolean;
     indeterminate?: boolean;
     checkboxClassName?: string;
 }
 
-export declare const CheckboxLabel: React.FC<CheckboxLabelProps>;
+export declare const CheckboxLabel: ({ children, size, disabled, htmlFor, onLabelClick, className, onClick, ...props }: CheckboxLabelProps) => JSX.Element;
 
 declare interface CheckboxLabelProps extends BaseLabelProps {
     onLabelClick?: () => void;
 }
 
-export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: FormFieldSize;
     label?: string;
     hasError?: boolean;
@@ -200,10 +238,147 @@ export declare interface CheckboxSpecificProps {
  */
 export declare const CloseOpenButton: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 
-declare type ColorKey = 'primary' | 'orange' | 'white' | 'gray';
+export declare type ColorKey = 'primary' | 'orange' | 'white' | 'gray';
 
 declare type ColorKey_2 = 'primary' | 'orange' | 'white' | 'gray';
 
+export { Column }
+
+export { ColumnDef }
+
+export declare const ColumnFilter: {
+    <T extends Record<string, unknown>>({ column, uniqueValues, selectedValues, onChange, }: ColumnFilterProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare const ColumnFilterMenu: {
+    ({ options, selectedValues, onChange, onClose, searchPlaceholder, }: ColumnFilterMenuProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ColumnFilterMenuProps {
+    options: string[];
+    selectedValues: string[];
+    onChange: (values: string[]) => void;
+    onClose: () => void;
+    searchPlaceholder?: string;
+}
+
+export declare interface ColumnFilterProps<T extends Record<string, unknown>> {
+    column: Column<T, unknown>;
+    uniqueValues: string[];
+    selectedValues: string[];
+    onChange: (values: string[]) => void;
+}
+
+export { ColumnFiltersState }
+
+/**
+ * Converts ColumnFiltersState to individual query params per value
+ * Example: [{ id: 'status', value: ['Active', 'Pending'] }]
+ * => 'filter[status][]=Active&filter[status][]=Pending'
+ *
+ * @param filters - The column filters state from TanStack Table
+ * @returns Object suitable for URLSearchParams with array notation
+ */
+export declare function columnFiltersToArrayQueryParams(filters: ColumnFiltersState): Record<string, string[]>;
+
+/**
+ * Converts ColumnFiltersState to a JSON string
+ * Useful for API calls that expect JSON format
+ *
+ * @param filters - The column filters state from TanStack Table
+ * @returns JSON string representation of filters
+ */
+export declare function columnFiltersToJsonString(filters: ColumnFiltersState): string;
+
+/**
+ * Converts ColumnFiltersState to URL query params format
+ * Example: [{ id: 'status', value: ['Active', 'Pending'] }]
+ * => 'filter[status]=Active,Pending'
+ *
+ * @param filters - The column filters state from TanStack Table
+ * @param separator - Separator for multiple values (default: ',')
+ * @returns Object suitable for URLSearchParams
+ */
+export declare function columnFiltersToQueryParams(filters: ColumnFiltersState, separator?: string): Record<string, string>;
+
+/**
+ * Converts ColumnFiltersState to a simple object format
+ * Example: [{ id: 'status', value: ['Active', 'Pending'] }]
+ * => { status: ['Active', 'Pending'] }
+ *
+ * @param filters - The column filters state from TanStack Table
+ * @returns Object with columnId as keys and filter values as values
+ */
+export declare function columnFiltersToRecord(filters: ColumnFiltersState): Record<string, string[]>;
+
+/**
+ *
+ * Column metadata for additional configurations
+ * Includes alignment, size, sortable, filterable, truncate, variant, and width
+ */
+export declare interface ColumnMeta {
+    align?: CellAlignment;
+    size?: TableCellSize;
+    sortable?: boolean;
+    filterable?: boolean;
+    ellipsis?: boolean;
+    variant?: 'default' | 'numeric';
+    width?: string | number;
+    className?: string;
+}
+
+/**
+ * Creates URLSearchParams for backend pagination with sorting
+ * Compatible with Laravel PaginateHelper
+ *
+ * @param options - Pagination and sorting options
+ * @returns URLSearchParams ready to append to API request
+ *
+ * @example
+ * ```ts
+ * const params = createBackendParams({
+ *   sorting: [{ id: 'name', desc: false }],
+ *   perPage: 20,
+ *   genericSearch: 'john',
+ *   filters: { role: 'admin', status: 'active' }
+ * });
+ *
+ * fetch(`/api/users?${params.toString()}`);
+ * // Result: /api/users?sorts={"name":"asc"}&perPage=20&genericSearch=john&filters={"role":"admin","status":"active"}
+ * ```
+ */
+export declare function createBackendParams(options: {
+    sorting?: SortingState;
+    perPage?: number;
+    genericSearch?: string;
+    filters?: Record<string, unknown>;
+}): URLSearchParams;
+
+/**
+ * Creates complete backend request params with filters, sorting, and pagination
+ * Combines filtering with other table features
+ *
+ * @param options - Configuration object
+ * @param options.filters - Column filters state
+ * @param options.sorts - Optional sorting state
+ * @param options.page - Optional page number
+ * @param options.perPage - Optional items per page
+ * @returns Complete params object for API requests
+ */
+export declare function createBackendParamsWithFilters({ filters, sorts, page, perPage, }: {
+    filters: ColumnFiltersState;
+    sorts?: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+    page?: number;
+    perPage?: number;
+}): Record<string, string | number>;
+
+export { createColumnHelper }
+
 /**
  * Helper to create field configurations for common patterns
  */
@@ -234,36 +409,79 @@ export declare const createInputRefs: (length: number) => InputRef[];
  */
 export declare function deleteCookie(name: string): void;
 
-export declare const Dialog: React.FC<DialogProps>;
+/**
+ * Dialog component for displaying modal dialogs.
+ * @params props - DialogProps
+ * @return JSX.Element
+ */
+export declare const Dialog: ({ isOpen, onClose, children, className, closeOnBackdropClick, showCloseButton, size, fullScreen, closeOnEsc, ariaLabel, ariaLabelledBy, ariaDescribedBy, }: DialogProps) => JSX.Element;
 
-export declare const DialogBody: React.FC<DialogBodyProps>;
+/**
+ * DialogBody component for displaying the main content of a dialog.
+ * @params props - DialogBodyProps
+ * @return JSX.Element
+ */
+export declare const DialogBody: ({ children, padded, showTopDivider, showBottomDivider, className, ...props }: DialogBodyProps) => JSX.Element;
 
-declare interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+/**
+ * Props for the DialogBody component.
+ * @param padded: Whether to apply padding to the body content.
+ * @param showTopDivider: Whether to show a divider at the top of the body.
+ * @param showBottomDivider: Whether to show a divider at the bottom of the body.
+ */
+export declare interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
     padded?: boolean;
     showTopDivider?: boolean;
     showBottomDivider?: boolean;
 }
 
-export declare const DialogFooter: React.FC<DialogFooterProps>;
+/**
+ * DialogFooter component for displaying footer content in a dialog.
+ * @params props - DialogFooterProps
+ * @return JSX.Element
+ */
+export declare const DialogFooter: ({ align, showDivider, gap, sticky, children, className, ...props }: DialogFooterProps) => JSX.Element;
 
-declare interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+/**
+ * Props for the DialogFooter component.
+ * @param align: Alignment of the footer content.
+ * @param showDivider: Whether to show a divider at the top of the footer.
+ * @param gap: Gap between footer items in pixels.
+ * @param sticky: Whether the footer should be sticky at the bottom.
+ */
+export declare interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
     align?: 'start' | 'center' | 'end' | 'space-between';
     showDivider?: boolean;
     gap?: number;
     sticky?: boolean;
 }
 
-export declare const DialogHeader: React.FC<DialogHeaderProps>;
+export declare const DialogHeader: ({ showDivider, variant, children, className, ...props }: DialogHeaderProps) => JSX.Element;
 
-declare interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
     showDivider?: boolean;
     variant?: 'default' | 'compact';
 }
 
-declare interface DialogProps {
+/**
+ * 'Props for the Dialog component.
+ * @param isOpen: Whether the dialog is open.
+ * @param onClose: Callback function to close the dialog.
+ * @param children: Content of the dialog.
+ * @param className: Optional additional class name for styling.
+ * @param closeOnBackdropClick: Whether clicking the backdrop closes the dialog.
+ * @param showCloseButton: Whether to show a close button in the dialog.
+ * @param size: Size of the dialog ('sm', 'md', 'lg').
+ * @param fullScreen: Whether the dialog should be full screen.
+ * @param closeOnEsc: Whether pressing the Escape key closes the dialog.
+ * @param ariaLabel: ARIA label for accessibility.
+ * @param ariaLabelledBy: ID of the element that labels the dialog for accessibility.
+ * @param ariaDescribedBy: ID of the element that describes the dialog for accessibility.
+ */
+export declare interface DialogProps {
     isOpen: boolean;
     onClose: () => void;
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
     closeOnBackdropClick?: boolean;
     showCloseButton?: boolean;
@@ -282,7 +500,7 @@ export declare const disabledStyles: RuleSet<object>;
  * @param param0 - Props for the Divider component.
  * @returns The Divider component.
  */
-export declare const Divider: default_2.FC<DividerProps>;
+export declare const Divider: ({ orientation, color, length, thickness, className, }: DividerProps) => JSX.Element;
 
 /**
  * Divider component to separate content either horizontally or vertically.
@@ -300,14 +518,14 @@ export declare interface DividerProps {
     className?: string;
 }
 
-export declare const ErrorMessage: default_2.FC<ErrorMessageProps>;
+export declare const ErrorMessage: ({ children, className, size, ...props }: ErrorMessageProps) => JSX.Element;
 
-declare interface ErrorMessageProps extends default_2.HTMLAttributes<HTMLDivElement> {
+declare interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
     size?: ErrorMessageSize;
     className?: string;
 }
 
-declare type ErrorMessageSize = 'sm' | 'md' | 'lg';
+declare type ErrorMessageSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export declare const errorStyles: RuleSet<object>;
 
@@ -343,6 +561,8 @@ export declare interface FieldConfig {
     messageErrorClassName?: string;
 }
 
+declare type FieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'datetime-local' | 'time' | 'search' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'pin';
+
 /**
  *
  * @param files - Array of files to display
@@ -350,7 +570,7 @@ export declare interface FieldConfig {
  * @param disabled - Whether the component is disabled
  * @returns FileList component
  */
-declare const FileList_2: default_2.FC<FileListProps>;
+declare const FileList_2: ({ files, onRemove, disabled }: FileListProps) => JSX.Element | null;
 export { FileList_2 as FileList }
 
 /**
@@ -370,9 +590,9 @@ declare interface FileListProps {
  * Controlled mode: Provide `value` prop and handle `onChange`
  * Uncontrolled mode: Optionally provide `defaultValue` for initial files
  */
-export declare const FileUpload: default_2.FC<FileUploadProps>;
+export declare const FileUpload: ({ variant, multiple, maxFileSize, accept, helperText, value, defaultValue, onChange, onError, onFileRemove, disabled, hasError, errorMessage, className, dropZoneContainerClassName, size, }: FileUploadProps) => JSX.Element;
 
-export declare interface FileUploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue' | 'onError'> {
+export declare interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue' | 'onError'> {
     variant?: FileUploadVariant;
     size?: FormFieldSize;
     multiple?: boolean;
@@ -393,15 +613,24 @@ export declare interface FileUploadProps extends Omit<React.InputHTMLAttributes<
 
 export declare type FileUploadVariant = 'default' | 'compact';
 
+export declare const FilterOption: MemoExoticComponent<({ value, label, checked, onChange }: FilterOptionProps) => JSX.Element>;
+
+export declare interface FilterOptionProps {
+    value: string;
+    label: string;
+    checked: boolean;
+    onChange: (value: string, checked: boolean) => void;
+}
+
 export declare const flushedStyles: RuleSet<object>;
 
-export declare const FormField: default_2.FC<FormFieldComponentProps>;
+export declare const FormField: ({ id, name, label, type, size, placeholder, disabled, required, options, checkboxLabel, radioName, pinLength, pinType, rows, className, inputClassName, labelClassName, messageErrorClassName, leftIcon, rightIcon, iconSize, iconColor, onOptionSelect, onRadioChange, onPinComplete, onChange, ...props }: FormFieldComponentProps) => JSX.Element;
 
 export declare interface FormFieldComponentProps extends WithIconsProps {
     id?: string | number;
     name: string;
     label?: string;
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'datetime-local' | 'time' | 'search' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'pin';
+    type?: FieldType;
     size?: FormFieldSize;
     placeholder?: string;
     disabled?: boolean;
@@ -410,19 +639,19 @@ export declare interface FormFieldComponentProps extends WithIconsProps {
         value: string | number;
         label: string;
     }>;
-    checkboxValue?: boolean;
     checkboxLabel?: string;
     radioName?: string;
     pinLength?: number;
     pinType?: 'text' | 'number';
+    rows?: number;
     className?: string;
     inputClassName?: string;
     labelClassName?: string;
     messageErrorClassName?: string;
     onOptionSelect?: (option: SelectOption) => void;
-    onRadioChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onRadioChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onPinComplete?: (value: string) => void;
-    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     [key: string]: any;
 }
 
@@ -433,15 +662,55 @@ export declare interface FormFieldProps extends BaseFormFieldProps, Omit<WithIco
     className?: string;
 }
 
-export declare type FormFieldSize = 'sm' | 'md' | 'lg';
+export declare type FormFieldSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export declare type FormFieldState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
 
-export declare const FullScreenSpinner: default_2.FC<{
+/**
+ * FullScreenSpinner Component
+ * Renders a full-screen spinner with an optional message.
+ * @param {FullScreenSpinnerProps} props - Props for the FullScreenSpinner component see in Spinner.types.ts .
+ * @returns JSX.Element The rendered FullScreenSpinner component.
+ */
+export declare const FullScreenSpinner: ({ message, color, variant, }: FullScreenSpinnerProps) => JSX.Element;
+
+/**
+ * Props for the FullScreenSpinner component.
+ * @interface FullScreenSpinnerProps
+ * @property {string} [message] - Optional message to display with the spinner.
+ * @property {ColorKey} [color] - Color variant of the spinner.
+ * @property {Variant} [variant] - Animation variant of the spinner.
+ */
+export declare interface FullScreenSpinnerProps {
     message?: string;
     color?: ColorKey;
     variant?: Variant;
-}>;
+}
+
+/**
+ * Gets the count of active filters across all columns
+ * @param columnFilters - Current column filters state
+ * @returns Total number of active filter values
+ */
+export declare function getActiveFilterCount(columnFilters: ColumnFiltersState): number;
+
+/**
+ * Gets the active filter values for a specific column
+ * @param columnFilters - Current column filters state
+ * @param columnId - The column identifier
+ * @returns Array of active filter values for the column
+ */
+export declare function getActiveFilterValues(columnFilters: ColumnFiltersState, columnId: string): string[];
+
+/**
+ * Gets the count of rows for each unique value in a column
+ * Useful for showing counts next to filter options (e.g., "Active (5)")
+ * @param data - The array of data objects
+ * @param columnId - The column identifier
+ * @param accessor - Optional accessor function to get the value from a row
+ * @returns Object mapping values to their counts
+ */
+export declare function getColumnValueCounts<T>(data: T[], columnId: string, accessor?: (row: T, index: number) => unknown): Record<string, number>;
 
 /**
  * Retrieves the value of a cookie by name
@@ -459,6 +728,15 @@ export declare const getPropsForInputType: (type: string | null | undefined, bas
     props: any;
 };
 
+/**
+ * Extracts unique values from a column in the dataset
+ * @param data - The array of data objects
+ * @param columnId - The column identifier
+ * @param accessor - Optional accessor function to get the value from a row
+ * @returns Array of unique string values, sorted alphabetically
+ */
+export declare function getUniqueColumnValues<T>(data: T[], columnId: string, accessor?: (row: T, index: number) => unknown): string[];
+
 /**
  * Handles user input in a single digit field of a verification code.
  *
@@ -487,7 +765,7 @@ export declare const getPropsForInputType: (type: string | null | undefined, bas
  * />
  * ```
  */
-export declare const handleDigitChange: (e: default_2.ChangeEvent<HTMLInputElement>, index: number, digits: string[], setDigits: SetDigits, inputRefs: InputRefs, length: number, type?: "text" | "number", onChange?: (value: string) => void, onComplete?: (value: string) => void) => void;
+export declare const handleDigitChange: (e: ChangeEvent<HTMLInputElement>, index: number, digits: string[], setDigits: SetDigits, inputRefs: InputRefs, length: number, type?: "text" | "number", onChange?: (value: string) => void, onComplete?: (value: string) => void) => void;
 
 /**
  * Handles keyboard navigation in verification code input fields.
@@ -511,7 +789,7 @@ export declare const handleDigitChange: (e: default_2.ChangeEvent<HTMLInputEleme
  * />
  * ```
  */
-export declare const handleKeyDown: (e: default_2.KeyboardEvent<HTMLInputElement>, index: number, digits: string[], inputRefs: InputRefs, setDigits: SetDigits, onChange?: (value: string) => void) => void;
+export declare const handleKeyDown: (e: KeyboardEvent_2<HTMLInputElement>, index: number, digits: string[], inputRefs: InputRefs, setDigits: SetDigits, onChange?: (value: string) => void) => void;
 
 /**
  * Handles paste operations for verification code input fields.
@@ -547,7 +825,15 @@ export declare const handleKeyDown: (e: default_2.KeyboardEvent<HTMLInputElement
  * />
  * ```
  */
-export declare const handlePaste: (e: default_2.ClipboardEvent<HTMLInputElement>, index: number, digits: string[], setDigits: SetDigits, inputRefs: InputRefs, length: number, type?: "text" | "number", onChange?: (value: string) => void, onComplete?: (value: string) => void) => void;
+export declare const handlePaste: (e: ClipboardEvent_2<HTMLInputElement>, index: number, digits: string[], setDigits: SetDigits, inputRefs: InputRefs, length: number, type?: "text" | "number", onChange?: (value: string) => void, onComplete?: (value: string) => void) => void;
+
+/**
+ * Checks if a column has active filters
+ * @param columnFilters - Current column filters state
+ * @param columnId - The column identifier
+ * @returns true if the column has active filters
+ */
+export declare function hasActiveFilters(columnFilters: ColumnFiltersState, columnId: string): boolean;
 
 /**
  * Tipo helper para determinar si un componente tiene iconos
@@ -575,9 +861,12 @@ export declare const hasPermission: (userRoles?: string[], permissions?: string[
  * Displays notifications, user profile, and optional children.
  *
  * @param {HeaderProps} props - Header component props.
- * @returns {JSX.Element} The rendered header.
+ * @returns JSX.Element The rendered header.
  */
-export declare const Header: default_2.FC<HeaderProps>;
+export declare const Header: {
+    ({ user, hasNotifications, notificationCount, onNotificationClick, onUserProfileClick, onLogout, userMenuItems, children, }: HeaderProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Props for the Header component.
@@ -590,7 +879,7 @@ export declare const Header: default_2.FC<HeaderProps>;
  * @param userMenuItems: Additional menu items for the user dropdown.
  * @param children: Any additional elements to render in the left section.
  */
-declare interface HeaderProps {
+export declare interface HeaderProps {
     user?: User;
     hasNotifications?: boolean;
     notificationCount?: number;
@@ -598,7 +887,7 @@ declare interface HeaderProps {
     onUserProfileClick?: () => void;
     onLogout?: () => void;
     userMenuItems?: UserMenuItem[];
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
 export declare const HeadingBold: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
@@ -631,10 +920,10 @@ export declare const headingRegularStyles: {
     16: RuleSet<object>;
 };
 
-export declare const Icon: default_2.FC<IconProps>;
+export declare const Icon: ({ component: Component, size, color, className, iconProps, }: IconProps) => JSX.Element;
 
 declare interface IconProps {
-    component: default_2.ReactNode | RemixiconComponentType;
+    component: ReactNode | RemixiconComponentType;
     size?: IconSizes | string | number;
     color?: string;
     className?: string;
@@ -650,7 +939,7 @@ export declare const IconWrapperStyles: RuleSet<object>;
  * @param param0 - Props for the InfoLabel component.
  * @returns The InfoLabel component.
  */
-export declare const InfoLabel: default_2.FC<InfoLabelProps>;
+export declare const InfoLabel: ({ children, size, color, className, style }: InfoLabelProps) => JSX.Element;
 
 /**
  * Props for the InfoLabel component
@@ -664,8 +953,8 @@ export declare interface InfoLabelProps {
     size?: keyof typeof bodyTextStyles;
     color?: string;
     className?: string;
-    style?: default_2.CSSProperties;
-    children: default_2.ReactNode;
+    style?: CSSProperties;
+    children: ReactNode;
 }
 
 /**
@@ -681,7 +970,7 @@ export declare interface InputComponentProps {
     size: FormFieldSize;
     placeholder?: string;
     type?: string;
-    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     [key: string]: any;
 }
 
@@ -699,9 +988,9 @@ export declare interface InputComponentProps {
  *
  * Used by: PinInputGroup component for PIN/verification code workflows
  */
-export declare type InputRef = default_2.RefObject<HTMLInputElement | null>;
+export declare type InputRef = RefObject<HTMLInputElement | null>;
 
-export declare type InputRefs = default_2.RefObject<HTMLInputElement | null>[];
+export declare type InputRefs = RefObject<HTMLInputElement | null>[];
 
 /**
  * Interfaz específica para componentes de input que necesitan iconos
@@ -717,16 +1006,33 @@ export declare interface InputWithIconsProps extends WithIconsProps {
  */
 export declare const isAllowedInputType: (t: string) => t is AllowedInputType;
 
-export declare const Label: default_2.FC<BaseLabelProps>;
+export declare const Label: ({ children, htmlFor, className, required, disabled, size, ...props }: BaseLabelProps) => JSX.Element;
 
-export declare type LabelSize = 'sm' | 'md' | 'lg';
+export declare type LabelSize = 'xs' | 'sm' | 'md' | 'lg';
 
 /**
  * Top-level Layout component.
  * Wraps the layout in a SidebarProvider context.
  * @param props - Layout properties
  */
-export declare const Layout: default_2.FC<LayoutProps>;
+export declare const Layout: (props: LayoutProps) => JSX.Element;
+
+/**
+ * LayoutMainContent component for the layout.
+ * Provides the main content area with responsive spacing and scrolling.
+ */
+export declare const LayoutMainContent: {
+    ({ children, className }: LayoutMainContentProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the LayoutMainContent component.
+ */
+export declare interface LayoutMainContentProps {
+    children: ReactNode;
+    className?: string;
+}
 
 /**
  * Props for the Layout component.
@@ -742,7 +1048,7 @@ export declare const Layout: default_2.FC<LayoutProps>;
  * @contentClassName - Optional class name for main content area.
  */
 export declare interface LayoutProps extends SidebarProps {
-    children: default_2.ReactNode;
+    children: ReactNode;
     user?: User;
     hasNotifications?: boolean;
     notificationCount?: number;
@@ -761,7 +1067,7 @@ export declare interface LayoutProps extends SidebarProps {
  * @param ref - Ref to the anchor element
  * @return JSX.Element
  */
-export declare const Link: default_2.ForwardRefExoticComponent<LinkProps & default_2.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
 
 /**
  * CSS styles applied when the Link is disabled.
@@ -818,6 +1124,14 @@ export declare const LinkVariantStyles: {
     plain: RuleSet<object>;
 };
 
+/**
+ * Merges multiple filter states, with later filters overriding earlier ones
+ *
+ * @param filterStates - Multiple ColumnFiltersState arrays to merge
+ * @returns Merged ColumnFiltersState
+ */
+export declare function mergeFilters(...filterStates: ColumnFiltersState[]): ColumnFiltersState;
+
 /**
  * Button to open sidebar on mobile devices.
  * @param $hidden - Whether the button is hidden.
@@ -826,6 +1140,16 @@ export declare const MobileOpenBtn: IStyledComponentBase<"web", Substitute<Detai
 $hidden: boolean;
 }>> & string;
 
+/**
+ * Custom filter function for TanStack Table multi-select filtering
+ * Checks if the row's value is included in the array of selected filter values
+ * @param row - The row being filtered
+ * @param columnId - The column identifier
+ * @param filterValue - Array of selected filter values
+ * @returns true if the row should be included in filtered results
+ */
+export declare function multiSelectFilter<T>(row: Row<T>, columnId: string, filterValue: unknown): boolean;
+
 /**
  * Navigation container for sidebar menu items.
  */
@@ -847,7 +1171,7 @@ export declare const Nav: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps
 export declare interface NavigationItem {
     id: string;
     label: string;
-    icon?: default_2.ReactNode | RemixiconComponentType;
+    icon?: ReactNode | RemixiconComponentType;
     iconSize?: IconSizes | string | number;
     iconColor?: string;
     href?: string;
@@ -873,6 +1197,24 @@ export declare const normalizeSelectOptions: (options: Array<{
     label: string;
 }> | SelectOption[]) => SelectOption[];
 
+/**
+ * NotificationButton component with badge and count display.
+ * Handles notification state and provides accessible interaction.
+ */
+export declare const NotificationButton: {
+    ({ hasNotifications, notificationCount, onNotificationClick, }: NotificationButtonProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the NotificationButton component.
+ */
+export declare interface NotificationButtonProps {
+    hasNotifications?: boolean;
+    notificationCount?: number;
+    onNotificationClick?: () => void;
+}
+
 /**
  * Overlay component for mobile sidebar.
  */
@@ -898,7 +1240,25 @@ export declare const overlayAnimation: {
     };
 };
 
-export declare const PasswordInput: default_2.FC<PasswordInputProps>;
+/**
+ * Parses JSON string back to ColumnFiltersState
+ *
+ * @param jsonString - JSON string representation of filters
+ * @returns ColumnFiltersState
+ */
+export declare function parseJsonToFilters(jsonString: string): ColumnFiltersState;
+
+/**
+ * Parses URL query params back to ColumnFiltersState
+ * Useful for restoring filters from URL
+ *
+ * @param params - URLSearchParams or query string
+ * @param separator - Separator used in the query params (default: ',')
+ * @returns ColumnFiltersState
+ */
+export declare function parseQueryParamsToFilters(params: URLSearchParams | string, separator?: string): ColumnFiltersState;
+
+export declare const PasswordInput: ({ size, leftIcon, iconSize, iconColor, placeholder, hasError, disabled, className, ...props }: PasswordInputProps) => JSX.Element;
 
 export declare interface PasswordInputProps extends BaseFormFieldProps, Omit<WithIconsProps, 'rightIcon'> {
 }
@@ -907,7 +1267,10 @@ export declare type Permission = string;
 
 export declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLInputElement>>;
 
-export declare const PinInputGroup: default_2.FC<PinInputGroupProps>;
+export declare const PinInputGroup: {
+    ({ length, size, variant, hasError, type, onChange, onComplete, className, pinInputClassName, }: PinInputGroupProps): JSX.Element;
+    displayName: string;
+};
 
 export declare interface PinInputGroupProps {
     length?: number;
@@ -933,17 +1296,20 @@ export declare interface PinSpecificProps {
 
 export declare const RadioInput: ForwardRefExoticComponent<RadioInputProps & RefAttributes<HTMLInputElement>>;
 
-export declare const RadioInputDot: default_2.ForwardRefExoticComponent<RadioInputDotProps & default_2.RefAttributes<HTMLInputElement>>;
+export declare const RadioInputDot: ForwardRefExoticComponent<RadioInputDotProps & RefAttributes<HTMLInputElement>>;
 
-declare interface RadioInputDotProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+declare interface RadioInputDotProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     size?: FormFieldSize;
     hasError?: boolean;
     dotClassName?: string;
 }
 
-export declare const RadioInputLabel: React.FC<BaseLabelProps>;
+export declare const RadioInputLabel: {
+    ({ children, htmlFor, className, disabled, size, ...props }: BaseLabelProps): JSX.Element;
+    displayName: string;
+};
 
-export declare interface RadioInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export declare interface RadioInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     size?: FormFieldSize;
     label?: string;
     hasError?: boolean;
@@ -957,10 +1323,20 @@ export declare interface RadioSpecificProps {
         label: string;
     }>;
     radioName?: string;
-    onRadioChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onRadioChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export declare const SearchInput: default_2.FC<SearchInputProps>;
+export { Row }
+
+/**
+ * Searches for a term within an array of items (case-insensitive)
+ * @param items - Array of items to search through
+ * @param searchTerm - The search term
+ * @returns Filtered array of items matching the search term
+ */
+export declare function searchInArray(items: string[], searchTerm: string): string[];
+
+export declare const SearchInput: ({ size, leftIcon, rightIcon, iconSize, iconColor, placeholder, onSearch, className, ...props }: SearchInputProps) => JSX.Element;
 
 export declare interface SearchInputProps extends BaseInputProps {
     size?: FormFieldSize;
@@ -973,15 +1349,30 @@ export declare interface SearchSpecificProps {
     onSearch?: (value: string) => void;
 }
 
-export declare const SectionSpinner: default_2.FC<{
+/**
+ * SectionSpinner Component
+ * Renders a spinner suitable for section loading states with an optional message.
+ * @param {SectionSpinnerProps} props - Props for the SectionSpinner component see in Spinner.types.ts .
+ * @returns JSX.Element The rendered SectionSpinner component.
+ */
+export declare const SectionSpinner: ({ message, color, variant, }: SectionSpinnerProps) => JSX.Element;
+
+/**
+ * Props for the SectionSpinner component
+ * @interface SectionSpinnerProps
+ * @property {string} [message] - Optional message to display with the spinner.
+ * @property {ColorKey} [color] - Color variant of the spinner.
+ * @property {Variant} [variant] - Animation variant of the spinner.
+ */
+export declare interface SectionSpinnerProps {
     message?: string;
     color?: ColorKey;
     variant?: Variant;
-}>;
+}
 
-export declare const SelectInput: default_2.ForwardRefExoticComponent<SelectInputProps & default_2.RefAttributes<HTMLButtonElement>>;
+export declare const SelectInput: ForwardRefExoticComponent<SelectInputProps & RefAttributes<HTMLButtonElement>>;
 
-export declare interface SelectInputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+export declare interface SelectInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     size?: FormFieldSize;
     hasError?: boolean;
     disabled?: boolean;
@@ -1016,7 +1407,7 @@ export declare interface SelectSpecificProps {
  */
 export declare function setCookie(name: string, value: string, days?: number): void;
 
-export declare type SetDigits = default_2.Dispatch<default_2.SetStateAction<string[]>>;
+export declare type SetDigits = Dispatch<SetStateAction<string[]>>;
 
 /**
  * Sidebar component for navigation.
@@ -1026,7 +1417,10 @@ export declare type SetDigits = default_2.Dispatch<default_2.SetStateAction<stri
  * @param logoImgExpanded - Logo when sidebar is expanded.
  * @param logoImgCollapsed - Logo when sidebar is collapsed.
  */
-export declare const Sidebar: default_2.FC<SidebarProps>;
+export declare const Sidebar: {
+    ({ navigationConfig, userRoles, activePath, logoImgExpanded, logoImgCollapsed, onNavigate, }: SidebarProps): JSX.Element;
+    displayName: string;
+};
 
 export declare const SidebarContext: Context<SidebarContextValue | undefined>;
 
@@ -1066,16 +1460,27 @@ export declare interface SidebarProps {
     navigationConfig: NavigationItem[];
     userRoles?: string[];
     activePath?: string;
-    logoImgExpanded?: default_2.ReactNode;
-    logoImgCollapsed?: default_2.ReactNode;
+    logoImgExpanded?: ReactNode;
+    logoImgCollapsed?: ReactNode;
     onNavigate?: (href: string) => void;
 }
 
 export declare const SidebarProvider: ({ children }: PropsWithChildren) => JSX.Element;
 
-declare type Size = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Size options for the Spinner component.
+ * typedef {('sm' | 'md' | 'lg' | 'xl')} Size
+ *
+ * Color key options for the Spinner component.
+ * typedef {('primary' | 'orange' | 'white' | 'gray')} ColorKey
+ *
+ * Animation variant options for the Spinner component.
+ * typedef {('rotate' | 'sweep')} Variant
+ */
+export declare type Size = 'sm' | 'md' | 'lg' | 'xl';
 
 export declare const sizeStyles: {
+    xs: RuleSet<object>;
     sm: RuleSet<object>;
     md: RuleSet<object>;
     lg: RuleSet<object>;
@@ -1198,21 +1603,79 @@ export declare const smartAnimation: {
 
 export declare type SortDirection = 'asc' | 'desc' | 'none';
 
-export declare interface SortState {
-    columnId: string | null;
-    direction: SortDirection;
-}
+export { SortingState }
+
+/**
+ * Converts SortingState to JSON string ready to send to Laravel backend
+ * This is a convenience function for API calls
+ *
+ * @param sortingState - TanStack sorting state array
+ * @returns JSON string representation of sort record
+ *
+ * @example
+ * ```ts
+ * const sortingState = [{ id: 'name', desc: false }];
+ * const sortsParam = sortingStateToJsonString(sortingState);
+ * // Result: '{"name":"asc"}'
+ *
+ * // Use in API call:
+ * fetch(`/api/users?sorts=${sortsParam}`);
+ * ```
+ */
+export declare function sortingStateToJsonString(sortingState: SortingState): string;
 
-export declare const Spinner: default_2.FC<SpinnerProps>;
+/**
+ * Converts TanStack Table SortingState to backend-friendly record format
+ *
+ * @param sortingState - TanStack sorting state array
+ * @returns Object with field names as keys and 'asc'/'desc' as values
+ *
+ * @example
+ * ```ts
+ * const sortingState = [
+ *   { id: 'name', desc: false },
+ *   { id: 'created_at', desc: true }
+ * ];
+ *
+ * const sortRecord = sortingStateToRecord(sortingState);
+ * // Result: { name: 'asc', created_at: 'desc' }
+ * ```
+ */
+export declare function sortingStateToRecord(sortingState: SortingState): SortRecord;
 
-declare interface SpinnerProps {
-    size?: Size;
-    color?: ColorKey;
-    centered?: boolean;
-    message?: string;
-    title?: string;
-    variant?: Variant;
-}
+/**
+ * Backend sorting format - object representation
+ * Example: { name: 'asc', created_at: 'desc' }
+ */
+export declare type SortRecord = Record<string, 'asc' | 'desc'>;
+
+/**
+ * Converts backend sort record to TanStack Table SortingState
+ * Useful for initializing sorting state from backend response
+ *
+ * @param sortRecord - Object with field names and sort directions
+ * @returns TanStack sorting state array
+ *
+ * @example
+ * ```ts
+ * const sortRecord = { name: 'asc', created_at: 'desc' };
+ *
+ * const sortingState = sortRecordToSortingState(sortRecord);
+ * // Result: [
+ * //   { id: 'name', desc: false },
+ * //   { id: 'created_at', desc: true }
+ * // ]
+ * ```
+ */
+export declare function sortRecordToSortingState(sortRecord: SortRecord): SortingState;
+
+/**
+ * Spinner Component
+ * Renders a customizable spinner with optional message and centering.
+ * @param {BaseSpinnerProps} props - Props for the Spinner component see in Spinner.types.ts .
+ * @returns JSX.Element The rendered Spinner component.
+ */
+export declare const Spinner: ({ size, color, centered, message, title, variant, }: BaseSpinnerProps) => JSX.Element;
 
 /**
  * Represents a single step in the Stepper.
@@ -1220,14 +1683,14 @@ declare interface SpinnerProps {
 export declare interface Step {
     id: string | number;
     label?: string;
-    content?: React.ReactNode | string;
+    content?: ReactNode | string;
 }
 
 /**
  * Stepper component for displaying multi-step navigation UI.
  * Simple and functional with hover labels.
  */
-export declare const Stepper: default_2.FC<StepperProps>;
+export declare const Stepper: ({ steps, currentStep, orientation, size, onStepClick, className, }: StepperProps) => JSX.Element;
 
 /**
  * Orientation options for the Stepper component.
@@ -1283,119 +1746,197 @@ export declare const submenuAnimationTopDown: {
 };
 
 /**
- * Table component for rendering customizable tables with support for
- * sticky headers, sorting, and custom cell rendering.
- *
- * @param columns - Array of column definitions.
- * @param rows - Array of row data.
- * @param size - Table size variant ('sm', 'md', 'lg'). Default is 'md'.
- * @param variant - Table visual variant. Default is 'default'.
- * @param className - Optional CSS class for the table.
- * @param stickyHeader - Enables sticky table headers.
- * @param onSortChange - Callback for sort direction changes.
+ * Main Table component
+ * Uses TanStack Table v8 as headless layer
  */
 export declare const Table: {
-    ({ columns, rows, size, variant, tableWrapperClassName, tableClassName, stickyHeader, onSortChange, }: TableProps): JSX.Element;
+    <T extends Record<string, unknown>>({ data, columns, size, variant, stickyHeader, maxHeight, sorting, defaultSorting, onSortingChange, columnFilters, defaultColumnFilters, onColumnFiltersChange, onRowClick, classNames, enableSorting, manualSorting, enableFiltering, manualFiltering, isLoading, getUniqueValues: getUniqueValuesProp, }: TableProps<T>): JSX.Element;
     displayName: string;
 };
 
-/**
- * TableCell component for rendering a styled table cell with optional icons and content.
- *
- * @param {TableCellProps} props - Props for the TableCell component you can see them in @components/tables/types/table.types.ts.
- * @returns {JSX.Element} The rendered table cell.
- */
-export declare const TableCell: default_2.FC<TableCellProps>;
+export declare const TableBody: <T extends Record<string, unknown>>({ rows, className, rowClassName, cellClassName, }: TableBodyProps<T>) => JSX.Element;
 
-export declare interface TableCellData<T = default_2.ReactNode> extends WithIconsProps {
-    content: default_2.ReactNode | T;
-    size?: TableCellSize;
-    align?: 'left' | 'center' | 'right';
-    width?: string | number;
-    truncate?: boolean;
-    variant?: 'default' | 'numeric';
+declare interface TableBodyProps<T extends Record<string, unknown>> {
+    rows: Row<T>[];
     className?: string;
+    rowClassName?: string | ((row: Row<T>) => string);
+    cellClassName?: string | ((row: Row<T>) => string);
 }
 
-export declare interface TableCellProps extends default_2.HTMLAttributes<HTMLTableCellElement>, WithIconsProps {
-    children: default_2.ReactNode;
-    size?: TableCellSize;
-    align?: 'left' | 'center' | 'right';
-    width?: string | number;
-    truncate?: boolean;
-    variant?: 'default' | 'numeric';
+export declare const TableCell: <T extends Record<string, unknown>>({ cell, rowClassName, }: TableCellProps<T>) => JSX.Element;
+
+declare interface TableCellProps<T extends Record<string, unknown>> {
+    cell: Cell<T, unknown>;
+    rowClassName?: string;
 }
 
 export declare type TableCellSize = 'sm' | 'md' | 'lg';
 
-export declare interface TableColumnDef<T = default_2.ReactNode> extends WithIconsProps, Omit<TableHeaderCellProps, 'children' | 'onSort'> {
-    id?: string;
-    header: default_2.ReactNode | T;
-    sortable?: boolean;
-    filterable?: boolean;
-    resizable?: boolean;
-    fixed?: 'left' | 'right';
-    stickyHeader?: boolean;
-    onSort?: (direction: SortDirection) => void;
+export declare interface TableClassNames<T> {
+    wrapper?: string;
+    table?: string;
+    header?: string;
+    body?: string;
+    row?: string | ((row: Row<T>) => string);
+    cell?: string | ((row: Row<T>) => string);
 }
 
 /**
- * TableHeaderCell component for rendering a table header cell with optional sorting and icons.
- *
- * @param {TableHeaderCellProps} props - The props for the TableHeaderCell component.
- * @returns {JSX.Element} The rendered table header cell.
+ * Extended ColumnDef type that includes metadata
  */
-export declare const TableHeaderCell: default_2.FC<TableHeaderCellProps>;
+export declare type TableColumnDef<T> = ColumnDef<T, unknown> & {
+    meta?: ColumnMeta;
+};
 
-export declare interface TableHeaderCellProps extends default_2.HTMLAttributes<HTMLTableCellElement>, WithIconsProps {
-    children: default_2.ReactNode;
-    size?: TableCellSize;
-    sortable?: boolean;
-    sortDirection?: SortDirection;
-    align?: 'left' | 'center' | 'right';
-    width?: string | number;
-    active?: boolean;
-    fixed?: 'left' | 'right';
-    onSort?: (direction: SortDirection) => void;
+/**
+ * Table context to share state between components
+ */
+export declare interface TableContextType<T> {
+    size: TableCellSize;
+    variant: TableVariant;
+    sorting: SortingState;
+    setSorting: (state: SortingState) => void;
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: (state: ColumnFiltersState) => void;
+    getUniqueValues: (columnId: string) => unknown[];
+    onRowClick?: (row: T) => void;
+}
+
+export declare const TableHeader: <T extends Record<string, unknown>>({ headerGroups, stickyHeader, className, }: TableHeadProps<T>) => JSX.Element;
+
+export declare const TableHeaderCell: <T extends Record<string, unknown>>({ header, }: TableHeaderCellProps<T>) => JSX.Element;
+
+declare interface TableHeaderCellProps<T extends Record<string, unknown>> {
+    header: Header_2<T, unknown>;
 }
 
-export declare const tableHoverMixin: RuleSet<object>;
+export declare const TableHeaderRow: <T extends Record<string, unknown>>({ headerGroup, }: TableHeaderRowProps<T>) => JSX.Element;
+
+declare interface TableHeaderRowProps<T extends Record<string, unknown>> {
+    headerGroup: HeaderGroup<T>;
+}
+
+declare interface TableHeadProps<T extends Record<string, unknown>> {
+    headerGroups: HeaderGroup<T>[];
+    stickyHeader?: boolean;
+    className?: string;
+}
 
-export declare const tableIconContainerStyles: RuleSet<object>;
+/**
+ *
+ * TablePagination component for paginating table data
+ * @params TablePaginationProps
+ * @returns JSX.Element
+ */
+export declare const TablePagination: ({ onPageChange, onPerPageChange, perPage, page, totalPages, totalRecords, rowsPerPageOptions, }: TablePaginationProps) => JSX.Element;
+
+/**
+ * Props for TablePagination component
+ * @prop onPageChange - Callback when page changes
+ * @prop onPerPageChange - Callback when rows per page changes
+ * @prop perPage - Current rows per page
+ * @prop page - Current active page
+ * @prop totalPages - Total number of pages
+ * @prop totalRecords - (Optional) Total number of records
+ * @prop rowsPerPageOptions - (Optional) Options for rows per page selection
+ */
+export declare interface TablePaginationProps {
+    onPageChange: (newPage: number) => void;
+    onPerPageChange: (newPerPage: number) => void;
+    perPage: number;
+    page: number;
+    totalPages: number;
+    totalRecords?: number;
+    rowsPerPageOptions?: SelectOption[];
+}
 
-export declare interface TableProps<T = default_2.ReactNode> {
+/**
+ * Main Table component props
+ */
+export declare interface TableProps<T = unknown> {
+    data: T[];
     columns: TableColumnDef<T>[];
-    rows: TableRowData<T>[];
     size?: TableCellSize;
     variant?: TableVariant;
-    tableWrapperClassName?: string;
-    tableClassName?: string;
+    isLoading?: boolean;
     stickyHeader?: boolean;
-    sortState?: SortState;
-    onSortChange?: (state: SortState) => void;
+    maxHeight?: string | number;
+    /**
+     * Controlled sorting state
+     * When provided, the table operates in controlled mode
+     */
+    sorting?: SortingState;
+    /**
+     * Default sorting for uncontrolled mode
+     * @default []
+     */
+    defaultSorting?: SortingState;
+    /**
+     * Callback fired when sorting changes
+     * Required for controlled mode, optional for uncontrolled
+     */
+    onSortingChange?: (state: SortingState) => void;
+    /**
+     * Enable/disable sorting functionality
+     * @default true
+     */
+    enableSorting?: boolean;
+    /**
+     * Enable manual sorting mode (sorting handled by backend)
+     * When true, the table will not sort data locally.
+     * Data must be pre-sorted by the backend and passed via the 'data' prop.
+     * The table will maintain sorting UI state and fire onSortingChange callbacks.
+     * @default false
+     */
+    manualSorting?: boolean;
+    /**
+     * Controlled column filters state
+     * When provided, the table operates in controlled mode
+     */
+    columnFilters?: ColumnFiltersState;
+    /**
+     * Default column filters for uncontrolled mode
+     * @default []
+     */
+    defaultColumnFilters?: ColumnFiltersState;
+    /**
+     * Callback fired when column filters change
+     * Required for controlled mode, optional for uncontrolled
+     */
+    onColumnFiltersChange?: (state: ColumnFiltersState) => void;
+    /**
+     * Enable/disable filtering functionality
+     * @default true
+     */
+    enableFiltering?: boolean;
+    /**
+     * Enable manual filtering mode (filtering handled by backend)
+     * When true, the table will not filter data locally.
+     * Data must be pre-filtered by the backend and passed via the 'data' prop.
+     * The table will maintain filtering UI state and fire onColumnFiltersChange callbacks.
+     * @default false
+     */
+    manualFiltering?: boolean;
+    onRowClick?: (row: T) => void;
+    classNames?: TableClassNames<T>;
+    getUniqueValues?: (columnId: string) => string[];
 }
 
-export declare const tableResponsiveMixin: RuleSet<object>;
+export declare const TableRow: typeof TableRowComponent;
 
-export declare interface TableRowData<T = default_2.ReactNode> {
-    id?: string | number;
-    cells?: TableCellData<T>[];
-    size?: TableCellSize;
-    align?: 'left' | 'center' | 'right';
-    width?: string | number;
-    truncate?: boolean;
-    variant?: 'default' | 'numeric';
+declare function TableRowComponent<T extends Record<string, unknown>>({ row, className, cellClassName, }: TableRowProps<T>): JSX.Element;
+
+declare interface TableRowProps<T extends Record<string, unknown>> {
+    row: Row<T>;
     className?: string;
+    cellClassName?: string;
 }
 
 export declare type TableVariant = 'default' | 'striped';
 
-export declare const tableVariants: {
-    default: RuleSet<object>;
-    striped: RuleSet<object>;
-};
+export { TanStackTableType }
 
-export declare const TermsAndConditions: default_2.FC<TermsAndConditionsProps>;
+export declare const TermsAndConditions: ({ isOpen, onAccept, onCancel, title, subtitle, content, bodyFooter, confirmationLabel, acceptLabel, cancelLabel, size, fullScreen, showCloseButton, closeOnBackdropClick, containerClassName, headerClassName, bodyClassName, footerClassName, initiallyConfirmed, onConfirmChange, }: TermsAndConditionsProps) => JSX.Element;
 
 export declare interface TermsAndConditionsProps {
     isOpen: boolean;
@@ -1403,8 +1944,8 @@ export declare interface TermsAndConditionsProps {
     onCancel: () => void;
     title: string;
     subtitle?: string;
-    content: default_2.ReactNode;
-    bodyFooter?: default_2.ReactNode;
+    content: ReactNode;
+    bodyFooter?: ReactNode;
     confirmationLabel?: string;
     acceptLabel?: string;
     cancelLabel?: string;
@@ -1428,7 +1969,7 @@ export { Text_2 as Text }
 
 export declare const TextAreaInput: ForwardRefExoticComponent<TextAreaInputProps & RefAttributes<HTMLTextAreaElement>>;
 
-export declare interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+export declare interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     size?: FormFieldSize;
     hasError?: boolean;
     disabled?: boolean;
@@ -1458,6 +1999,61 @@ declare type ToastProviderProps = ToasterProps & {
     spinnerColor?: ColorKey_2;
 };
 
+/**
+ * Tooltip component to display contextual information on hover or click.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip" placement="top">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ * ```
+ */
+export declare const Tooltip: {
+    ({ content, children, placement, trigger, className, arrowClassName, delay, showArrow, }: TooltipProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Placement options for the tooltip
+ */
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Props for the Tooltip component
+ */
+export declare interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: TooltipPlacement;
+    trigger?: TooltipTrigger;
+    className?: string;
+    arrowClassName?: string;
+    delay?: number;
+    showArrow?: boolean;
+}
+
+/**
+ * Trigger mechanism for showing/hiding the tooltip
+ */
+export declare type TooltipTrigger = 'hover' | 'click';
+
+export declare const useColumnFilter: (columnId: string) => {
+    selectedValues: string[];
+    handleChange: (values: string[]) => void;
+};
+
+/**
+ * Custom hook to handle notification logic and state.
+ * Returns computed values for notification display.
+ */
+export declare const useNotifications: ({ hasNotifications, notificationCount, }: Pick<NotificationButtonProps, "hasNotifications" | "notificationCount">) => {
+    effectiveHasNotifications: boolean;
+    displayCount: number | undefined;
+    badgeLabel: string;
+    bellAriaLabel: string;
+};
+
 /**
  * User interface for the UserProfile component
  */
@@ -1469,17 +2065,194 @@ export declare interface User {
 
 /**
  * User menu item configuration
- */
-declare interface UserMenuItem {
+ * Defines a single item in the user profile dropdown menu.
+ * @param id Unique identifier for the menu item
+ * @param label Display text for the menu item
+ * @param icon Icon component to display next to the label
+ * @param onClick Function to call when the item is clicked
+ * @param variant Optional styling variant ('default' or 'danger')
+ */
+export declare interface UserMenuItem {
     id: string;
     label: string;
-    icon: React.ReactNode | RemixiconComponentType;
+    icon: ReactNode | RemixiconComponentType;
     onClick: () => void;
     variant?: 'default' | 'danger';
 }
 
+/**
+ * UserProfile component with dropdown menu functionality.
+ * Displays user avatar, name, role, and provides a dropdown menu with configurable actions.
+ */
+export declare const UserProfile: {
+    ({ user, onProfileClick, onLogout, menuItems, }: UserProfileProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the UserProfile component.
+ * @param user The user object containing name and role information
+ * @param onProfileClick Optional function to call when profile is clicked
+ * @param onLogout Optional function to call when logout is selected
+ * @param menuItems Optional array of custom menu items to display
+ */
+export declare interface UserProfileProps {
+    user: User;
+    onProfileClick?: () => void;
+    onLogout?: () => void;
+    menuItems?: UserMenuItem[];
+}
+
 export declare const useSidebar: () => SidebarContextValue;
 
+export declare const useTableContext: <T extends Record<string, unknown>>() => TableContextType<T>;
+
+export declare const useTableData: <T extends Record<string, unknown>>({ data, columns, initialPage, initialPerPage, initialSorting, initialColumnFilters, }: UseTableDataProps<T>) => UseTableDataReturn<T>;
+
+declare interface UseTableDataProps<T> {
+    data: T[];
+    columns: ColumnDef<T, unknown>[];
+    initialPage?: number;
+    initialPerPage?: number;
+    initialSorting?: SortingState;
+    initialColumnFilters?: ColumnFiltersState;
+}
+
+declare interface UseTableDataReturn<T> {
+    paginatedData: T[];
+    processedData: T[];
+    page: number;
+    perPage: number;
+    totalPages: number;
+    totalRecords: number;
+    filteredRecords: number;
+    setPage: (page: number) => void;
+    setPerPage: (perPage: number) => void;
+    sorting: SortingState;
+    setSorting: (sorting: SortingState) => void;
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: (filters: ColumnFiltersState) => void;
+    getUniqueValues: (columnId: string) => string[];
+}
+
+/**
+ * Hook to manage table column filtering state (controlled or uncontrolled)
+ *
+ * @example Uncontrolled mode
+ * ```tsx
+ * const { columnFiltersState, handleColumnFiltersChange } = useTableFiltering({
+ *   defaultColumnFilters: [{ id: 'status', value: ['Active'] }],
+ *   onColumnFiltersChange: (state) => console.log(state)
+ * });
+ * ```
+ *
+ * @example Controlled mode
+ * ```tsx
+ * const [filters, setFilters] = useState<ColumnFiltersState>([]);
+ * const { columnFiltersState, handleColumnFiltersChange } = useTableFiltering({
+ *   columnFilters: filters,
+ *   onColumnFiltersChange: setFilters
+ * });
+ * ```
+ */
+export declare const useTableFiltering: ({ columnFilters: controlledFilters, defaultColumnFilters, onColumnFiltersChange, }: UseTableFilteringProps) => UseTableFilteringReturn;
+
+declare interface UseTableFilteringProps {
+    /**
+     * Controlled column filters state (optional)
+     * If provided, the component operates in controlled mode
+     */
+    columnFilters?: ColumnFiltersState;
+    /**
+     * Default column filters state for uncontrolled mode
+     * @default []
+     */
+    defaultColumnFilters?: ColumnFiltersState;
+    /**
+     * Callback fired when column filters change
+     * Required for controlled mode, optional for uncontrolled
+     */
+    onColumnFiltersChange?: (columnFilters: ColumnFiltersState) => void;
+}
+
+declare interface UseTableFilteringReturn {
+    /**
+     * Current column filters state (controlled or internal)
+     */
+    columnFiltersState: ColumnFiltersState;
+    /**
+     * Handler for TanStack Table's onColumnFiltersChange
+     */
+    handleColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => void;
+    /**
+     * Whether the component is in controlled mode
+     */
+    isControlled: boolean;
+    /**
+     * Manual setter for uncontrolled mode (useful for imperative actions)
+     */
+    setColumnFilters: (columnFilters: ColumnFiltersState) => void;
+}
+
+/**
+ * Hook to manage table sorting state (controlled or uncontrolled)
+ *
+ * @example Uncontrolled mode
+ * ```tsx
+ * const { sortingState, handleSortingChange } = useTableSorting({
+ *   defaultSorting: [{ id: 'name', desc: false }],
+ *   onSortingChange: (state) => console.log(state)
+ * });
+ * ```
+ *
+ * @example Controlled mode
+ * ```tsx
+ * const [sorting, setSorting] = useState<SortingState>([]);
+ * const { sortingState, handleSortingChange } = useTableSorting({
+ *   sorting,
+ *   onSortingChange: setSorting
+ * });
+ * ```
+ */
+export declare const useTableSorting: ({ sorting: controlledSorting, defaultSorting, onSortingChange, }: UseTableSortingProps) => UseTableSortingReturn;
+
+declare interface UseTableSortingProps {
+    /**
+     * Controlled sorting state (optional)
+     * If provided, the component operates in controlled mode
+     */
+    sorting?: SortingState;
+    /**
+     * Default sorting state for uncontrolled mode
+     * @default []
+     */
+    defaultSorting?: SortingState;
+    /**
+     * Callback fired when sorting changes
+     * Required for controlled mode, optional for uncontrolled
+     */
+    onSortingChange?: (sorting: SortingState) => void;
+}
+
+declare interface UseTableSortingReturn {
+    /**
+     * Current sorting state (controlled or internal)
+     */
+    sortingState: SortingState;
+    /**
+     * Handler for TanStack Table's onSortingChange
+     */
+    handleSortingChange: (updater: Updater<SortingState>) => void;
+    /**
+     * Whether the component is in controlled mode
+     */
+    isControlled: boolean;
+    /**
+     * Manual setter for uncontrolled mode (useful for imperative actions)
+     */
+    setSorting: (sorting: SortingState) => void;
+}
+
 /**
  * Validates if a complete code meets certain criteria
  *
@@ -1490,15 +2263,15 @@ export declare const useSidebar: () => SidebarContextValue;
  */
 export declare const validateCode: (code: string, length: number, type?: "text" | "number") => boolean;
 
-declare type Variant = 'rotate' | 'sweep';
+export declare type Variant = 'rotate' | 'sweep';
 
 /**
  * Interfaz base para componentes que soportan iconos a la izquierda y derecha
  * Puede ser extendida por cualquier componente que necesite funcionalidad de iconos
  */
 export declare interface WithIconsProps {
-    leftIcon?: React.ReactNode | RemixiconComponentType;
-    rightIcon?: React.ReactNode | RemixiconComponentType;
+    leftIcon?: ReactNode | RemixiconComponentType;
+    rightIcon?: ReactNode | RemixiconComponentType;
     iconSize?: IconSizes | string | number;
     iconColor?: string;
 }