tcce-design-system 0.1.21 → 0.1.23

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

@@ -1,24 +1,35 @@
 import { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import { ChangeEvent } from 'react';
+import { ClipboardEvent as ClipboardEvent_2 } from 'react';
 import { Component } from 'react';
 import { Context } from 'react';
+import { CSSProperties } from 'react';
 import { default as default_2 } 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 { 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 { 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 { RuleSet } from 'styled-components';
+import { SelectHTMLAttributes } from 'react';
+import { SetStateAction } from 'react';
 import { Substitute } from 'styled-components/dist/types';
+import { TextareaHTMLAttributes } from 'react';
 import { toast } from 'sonner';
 import { ToasterProps } from 'sonner';
 
@@ -44,7 +55,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 +67,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;
@@ -83,7 +94,7 @@ 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,13 +110,32 @@ 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;
 }
 
+/**
+ * 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 baseTableCellsSizes: {
     sm: RuleSet<object>;
     md: RuleSet<object>;
@@ -127,9 +157,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 +167,52 @@ 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;
 
-export declare const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    showDivider?: boolean;
+}
 
-export declare const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const CardFooter: ({ children, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
-export declare const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const CardHeader: ({ children, showDivider, ...props }: CardHeaderProps) => JSX.Element;
 
-export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    showDivider?: boolean;
+}
+
+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';
 
-declare type CardVariant = 'elevated' | 'flat' | 'info';
+export declare type CardVariant = 'elevated' | 'flat' | 'info';
 
 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,7 +233,7 @@ 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';
 
@@ -234,36 +267,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 +358,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,9 +376,9 @@ 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;
 }
@@ -343,6 +419,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 +428,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 +448,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;
@@ -395,13 +473,13 @@ export declare type FileUploadVariant = 'default' | 'compact';
 
 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 +488,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;
 }
 
@@ -437,11 +515,26 @@ export declare type FormFieldSize = '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;
-}>;
+}
 
 /**
  * Retrieves the value of a cookie by name
@@ -487,7 +580,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 +604,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 +640,7 @@ 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;
 
 /**
  * Tipo helper para determinar si un componente tiene iconos
@@ -575,9 +668,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 +686,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 +694,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 +727,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 +746,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 +760,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 +777,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 +795,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,7 +813,7 @@ 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';
 
@@ -726,7 +822,24 @@ export declare type LabelSize = 'sm' | 'md' | 'lg';
  * 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 +855,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 +874,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.
@@ -847,7 +960,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 +986,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 +1029,7 @@ export declare const overlayAnimation: {
     };
 };
 
-export declare const PasswordInput: default_2.FC<PasswordInputProps>;
+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 +1038,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 +1067,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 +1094,10 @@ 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 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 +1110,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 +1168,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 +1178,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,14 +1221,24 @@ 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: {
     sm: RuleSet<object>;
@@ -1203,16 +1368,13 @@ export declare interface SortState {
     direction: SortDirection;
 }
 
-export declare const Spinner: default_2.FC<SpinnerProps>;
-
-declare interface SpinnerProps {
-    size?: Size;
-    color?: ColorKey;
-    centered?: boolean;
-    message?: string;
-    title?: string;
-    variant?: Variant;
-}
+/**
+ * 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 +1382,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.
@@ -1395,7 +1557,7 @@ export declare const tableVariants: {
     striped: RuleSet<object>;
 };
 
-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 +1565,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 +1590,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 +1620,17 @@ declare type ToastProviderProps = ToasterProps & {
     spinnerColor?: ColorKey_2;
 };
 
+/**
+ * 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,15 +1642,44 @@ 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;
 
 /**
@@ -1490,15 +1692,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;
 }