tcce-design-system-test 0.1.7 → 0.2.0

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

@@ -1,11 +1,60 @@
+import { AnchorHTMLAttributes } from 'react';
+import { Context } from 'react';
 import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributeAnchorTarget } from 'react';
 import { HTMLAttributes } from 'react';
 import { IStyledComponentBase } from 'styled-components/dist/types';
+import { JSX } from 'react/jsx-runtime';
+import { MouseEventHandler } from 'react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { RemixiconComponentType } from '@remixicon/react';
 import { RuleSet } from 'styled-components';
 import { Substitute } from 'styled-components/dist/types';
 
+/**
+ * Valid input types supported by the FormField component
+ */
+export declare const ALLOWED_INPUT_TYPES: readonly ["text", "email", "password", "number", "tel", "url", "date", "datetime-local", "time", "search", "textarea", "select", "checkbox", "radio", "pin"];
+
+export declare type AllowedInputType = (typeof ALLOWED_INPUT_TYPES)[number];
+
+export declare const baseContentTableStyles: RuleSet<object>;
+
+export declare const baseFieldStyles: RuleSet<object>;
+
+export declare interface BaseFormFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare const BaseInput: ForwardRefExoticComponent<BaseInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface BaseInputProps extends Omit<BaseFormFieldProps, 'type'>, WithIconsProps {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    flushed?: boolean;
+}
+
+export declare const baseInputStyles: RuleSet<object>;
+
+export declare interface BaseLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    size?: LabelSize;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+}
+
+export declare const baseTableCellsSizes: {
+    sm: RuleSet<object>;
+    md: RuleSet<object>;
+    lg: RuleSet<object>;
+};
+
 declare const bodyTextStyles: {
     80: RuleSet<object>;
     60: RuleSet<object>;
@@ -15,36 +64,413 @@ declare const bodyTextStyles: {
     20: RuleSet<object>;
     18: RuleSet<object>;
     16: RuleSet<object>;
+    14: RuleSet<object>;
     12: RuleSet<object>;
 };
 
 export declare const Button: default_2.FC<ButtonProps>;
 
-declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement>, WithIconsProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
-    leftIcon?: default_2.ReactNode | RemixiconComponentType;
-    rightIcon?: default_2.ReactNode | RemixiconComponentType;
-    iconSize?: IconSize | string | number;
-    iconColor?: string;
 }
 
 declare type ButtonSize = 'sm' | 'md' | 'lg';
 
 export declare const ButtonSpinner: default_2.FC<{
-    color?: 'primary' | 'orange' | 'white' | 'gray';
+    color?: ColorKey;
+    variant?: Variant;
 }>;
 
 declare type ButtonVariant = 'primary' | 'secondary' | 'cancel';
 
+export declare const Card: default_2.FC<CardProps>;
+
+export declare const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+
+export declare const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+
+export declare const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+
+declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    size?: CardSize;
+    disabled?: boolean;
+}
+
+declare type CardSize = 'sm' | 'md' | 'lg';
+
+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>>;
+
+declare interface CheckboxInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    indeterminate?: boolean;
+    checkboxClassName?: string;
+}
+
+export declare const CheckboxLabel: React.FC<CheckboxLabelProps>;
+
+declare interface CheckboxLabelProps extends BaseLabelProps {
+    onLabelClick?: () => void;
+}
+
+export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: FormFieldSize;
+    label?: string;
+    hasError?: boolean;
+    indeterminate?: boolean;
+    checkboxClassName?: string;
+    labelClassName?: string;
+    onLabelClick?: () => void;
+}
+
+export declare interface CheckboxSpecificProps {
+    label?: string;
+    checked?: boolean;
+    checkboxLabel?: string;
+}
+
+declare type ColorKey = 'primary' | 'orange' | 'white' | 'gray';
+
+/**
+ * Helper to create field configurations for common patterns
+ */
+export declare const createFieldConfig: {
+    /**
+     * Creates a text input field configuration
+     */
+    text: (name: string, label: string, options?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates an email input field configuration
+     */
+    email: (name: string, label: string, options?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates a password input field configuration
+     */
+    password: (name: string, label: string, options?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates a select input field configuration
+     */
+    select: (name: string, label: string, options: SelectOption[], config?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates a checkbox input field configuration
+     */
+    checkbox: (name: string, label: string, options?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates a radio group field configuration
+     */
+    radio: (name: string, label: string, options: Array<{
+        value: string | number;
+        label: string;
+    }>, config?: Partial<FieldConfig>) => FieldConfig;
+    /**
+     * Creates a PIN input field configuration
+     */
+    pin: (name: string, label: string, length?: number, options?: Partial<FieldConfig>) => FieldConfig;
+};
+
+/**
+ * Creates an array of refs for input fields
+ *
+ * @param length - Number of input fields
+ * @returns Array of refs initialized to null
+ */
+export declare const createInputRefs: (length: number) => InputRef[];
+
+export declare const Dialog: React.FC<DialogProps>;
+
+export declare const DialogBody: React.FC<DialogBodyProps>;
+
+declare interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    padded?: boolean;
+    showTopDivider?: boolean;
+    showBottomDivider?: boolean;
+}
+
+export declare const DialogFooter: React.FC<DialogFooterProps>;
+
+declare interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: 'start' | 'center' | 'end' | 'space-between';
+    showDivider?: boolean;
+    gap?: number;
+    sticky?: boolean;
+}
+
+export declare const DialogHeader: React.FC<DialogHeaderProps>;
+
+declare interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    showDivider?: boolean;
+    variant?: 'default' | 'compact';
+}
+
+declare interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+    closeOnBackdropClick?: boolean;
+    showCloseButton?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullScreen?: boolean;
+    closeOnEsc?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+}
+
+export declare const disabledStyles: RuleSet<object>;
+
+export declare const ErrorMessage: default_2.FC<ErrorMessageProps>;
+
+declare interface ErrorMessageProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    size?: ErrorMessageSize;
+    className?: string;
+}
+
+declare type ErrorMessageSize = 'sm' | 'md' | 'lg';
+
+export declare const errorStyles: RuleSet<object>;
+
+/**
+ * Standard field configuration interface
+ */
+export declare interface FieldConfig {
+    name: string;
+    label: string;
+    type: AllowedInputType;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    options?: SelectOption[] | Array<{
+        value: string | number;
+        label: string;
+    }>;
+    validation?: {
+        min?: number;
+        max?: number;
+        pattern?: string;
+        custom?: (value: any) => string | undefined;
+    };
+    checkboxLabel?: string;
+    radioName?: string;
+    pinLength?: number;
+    pinType?: 'text' | 'number';
+    rows?: number;
+}
+
+export declare const flushedStyles: RuleSet<object>;
+
+export declare const FormField: default_2.FC<FormFieldComponentProps>;
+
+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';
+    size?: FormFieldSize;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    options?: SelectOption[] | Array<{
+        value: string | number;
+        label: string;
+    }>;
+    checkboxValue?: boolean;
+    checkboxLabel?: string;
+    radioName?: string;
+    pinLength?: number;
+    pinType?: 'text' | 'number';
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    messageErrorClassName?: string;
+    onOptionSelect?: (option: SelectOption) => void;
+    onRadioChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onPinComplete?: (value: string) => void;
+    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    [key: string]: any;
+}
+
+export declare interface FormFieldProps extends BaseFormFieldProps, Omit<WithIconsProps, 'rightIcon'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare type FormFieldSize = 'sm' | 'md' | 'lg';
+
+export declare type FormFieldState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
+
 export declare const FullScreenSpinner: default_2.FC<{
     message?: string;
-    color?: 'primary' | 'orange' | 'white' | 'gray';
+    color?: ColorKey;
+    variant?: Variant;
 }>;
 
+/**
+ * Returns normalized props for different input types based on the type
+ * This function replaces the renderInput switch logic from FormField component
+ */
+export declare const getPropsForInputType: (type: string | null | undefined, baseProps: InputComponentProps, selectProps?: SelectSpecificProps, checkboxProps?: CheckboxSpecificProps, radioProps?: RadioSpecificProps, pinProps?: PinSpecificProps, textAreaProps?: TextAreaSpecificProps, searchProps?: SearchSpecificProps) => {
+    component: string;
+    props: any;
+};
+
+/**
+ * Handles user input in a single digit field of a verification code.
+ *
+ * This function manages the core input behavior:
+ * - Restricts input to single characters only
+ * - Updates the digits array at the correct position
+ * - Automatically moves focus to the next field when a digit is entered
+ * - Prevents multiple characters from being entered in one field
+ * - Supports both text and number validation
+ *
+ * @param e - The input change event containing the new value
+ * @param index - Current input field position (0-based)
+ * @param digits - Current state array of all digit values
+ * @param setDigits - React state setter to update the digits array
+ * @param inputRefs - Array of refs to all input fields for focus management
+ * @param length - Total number of input fields
+ * @param type - Input type validation ('text' | 'number')
+ * @param onChange - Optional callback when value changes
+ * @param onComplete - Optional callback when all fields are filled
+ *
+ * @example
+ * ```tsx
+ * <input
+ *   onChange={(e) => handleDigitChange(e, 0, digits, setDigits, inputRefs, 6, 'number', onChange, onComplete)}
+ *   value={digits[0]}
+ * />
+ * ```
+ */
+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;
+
+/**
+ * Handles keyboard navigation in verification code input fields.
+ *
+ * Provides intuitive backspace behavior that moves focus to the previous
+ * field when the current field is empty. This creates a smooth user experience
+ * when correcting mistakes or clearing fields. Also supports arrow key navigation.
+ *
+ * @param e - The keyboard event (watching for 'Backspace', 'ArrowLeft', 'ArrowRight')
+ * @param index - Current input field position (0-based)
+ * @param digits - Current state array of all digit values
+ * @param inputRefs - Array of refs to all input fields for focus management
+ * @param setDigits - React state setter to update the digits array
+ * @param onChange - Optional callback when value changes
+ *
+ * @example
+ * ```tsx
+ * <input
+ *   onKeyDown={(e) => handleKeyDown(e, 2, digits, inputRefs, setDigits, onChange)}
+ *   // When backspace is pressed on empty field 2, focus moves to field 1
+ * />
+ * ```
+ */
+export declare const handleKeyDown: (e: default_2.KeyboardEvent<HTMLInputElement>, index: number, digits: string[], inputRefs: InputRefs, setDigits: SetDigits, onChange?: (value: string) => void) => void;
+
+/**
+ * Handles paste operations for verification code input fields.
+ *
+ * Enables users to paste complete verification codes (like from SMS or email)
+ * and automatically distributes the digits across multiple input fields.
+ * This greatly improves user experience by avoiding manual digit-by-digit entry.
+ *
+ * Features:
+ * - Prevents default paste behavior to handle custom distribution
+ * - Splits pasted text into individual characters
+ * - Fills consecutive input fields starting from the paste position
+ * - Respects the length limit (won't paste beyond field boundaries)
+ * - Supports type validation (number-only if specified)
+ * - Moves focus to the appropriate field after paste
+ * - Calls completion callback if all fields are filled
+ *
+ * @param e - The clipboard paste event containing the pasted data
+ * @param index - Starting input field position where paste occurred
+ * @param digits - Current state array of all digit values
+ * @param setDigits - React state setter to update the digits array
+ * @param inputRefs - Array of refs to all input fields for focus management
+ * @param length - Total number of input fields
+ * @param type - Input type validation ('text' | 'number')
+ * @param onChange - Optional callback when value changes
+ * @param onComplete - Optional callback when all fields are filled
+ *
+ * @example
+ * ```tsx
+ * <input
+ *   onPaste={(e) => handlePaste(e, 0, digits, setDigits, inputRefs, 6, 'number', onChange, onComplete)}
+ *   // Pasting "123456" at field 0 fills all 6 fields and focuses field 5
+ * />
+ * ```
+ */
+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;
+
+/**
+ * Checks if the user has at least one of the required permissions.
+ *
+ * @param {string[]} userRoles - The roles or permissions assigned to the user.
+ * @param {string[]} permissions - The required permissions to check against.
+ * @returns {boolean} True if the user has permission, otherwise false.
+ *
+ * - Returns false if no permissions are provided.
+ * - Returns true if 'all' is included in the permissions array.
+ * - Returns true if any of the user's roles match the required permissions.
+ */
+export declare const hasPermission: (userRoles?: string[], permissions?: string[]) => boolean;
+
+/**
+ * Main Header component for the application.
+ * Displays notifications, user profile, and optional children.
+ *
+ * @param {HeaderProps} props - Header component props.
+ * @returns {JSX.Element} The rendered header.
+ */
+export declare const Header: default_2.FC<HeaderProps>;
+
+/**
+ * Props for the Header component.
+ * @parram sidebarCollapsed: Whether the sidebar is collapsed.
+ * @parram user: User information for profile display.
+ * @param hasNotifications: Whether there are new notifications.
+ * @param notificationCount: Optional count of notifications to display.
+ * @param onNotificationClick: Callback when notification button is clicked.
+ * @param onUserProfileClick: Callback when user profile is clicked.
+ * @param children: Any additional elements to render in the left section.
+ */
+export declare interface HeaderProps {
+    sidebarCollapsed?: boolean;
+    user?: HeaderUser;
+    hasNotifications?: boolean;
+    /** Optional count. If provided and > 0, overrides hasNotifications and shows the number (capped). */
+    notificationCount?: number;
+    onNotificationClick?: () => void;
+    onUserProfileClick?: () => void;
+    children?: default_2.ReactNode;
+}
+
+/**
+ * User information for the Header component.
+ * @param name User's full name.
+ * @param role User's role or title.
+ * @param avatarUrl Optional URL for user's avatar image.
+ */
+export declare interface HeaderUser {
+    name: string;
+    role: string;
+    avatarUrl?: string;
+}
+
 export declare const HeadingBold: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
 size?: keyof typeof headingBoldStyles;
+color?: string;
 }>> & string;
 
 declare const headingBoldStyles: {
@@ -59,6 +485,7 @@ declare const headingBoldStyles: {
 
 export declare const HeadingRegular: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
 size?: keyof typeof headingRegularStyles;
+color?: string;
 }>> & string;
 
 declare const headingRegularStyles: {
@@ -75,33 +502,530 @@ export declare const Icon: default_2.FC<IconProps>;
 
 declare interface IconProps {
     component: default_2.ReactNode | RemixiconComponentType;
-    size?: IconSize_2 | string | number;
+    size?: IconSizes | string | number;
     color?: string;
     className?: string;
     iconProps?: Record<string, unknown>;
 }
 
-declare type IconSize = 'tn' | 'sm' | 'md' | 'lg';
+declare type IconSizes = 'tn' | 'sm' | 'md' | 'lg';
+
+export declare const IconWrapperStyles: RuleSet<object>;
+
+/**
+ * Input component props interfaces for the getPropsForInputType function
+ */
+export declare interface InputComponentProps {
+    field: any;
+    id?: string | number;
+    name: string;
+    className?: string;
+    hasError: boolean;
+    disabled: boolean;
+    size: FormFieldSize;
+    placeholder?: string;
+    type?: string;
+    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    [key: string]: any;
+}
+
+/**
+ * CodeInputUtils - Utilities for handling verification code input fields
+ *
+ * This utility provides functions to manage multi-digit input fields commonly used
+ * for verification codes, OTP (One-Time Password), or similar authentication flows.
+ *
+ * Key features:
+ * - Auto-focus navigation between input fields
+ * - Paste support for complete codes
+ * - Backspace navigation to previous fields
+ * - Single character validation per field
+ *
+ * Used by: PinInputGroup component for PIN/verification code workflows
+ */
+export declare type InputRef = default_2.RefObject<HTMLInputElement | null>;
+
+export declare type InputRefs = default_2.RefObject<HTMLInputElement | null>[];
+
+export declare const Label: default_2.FC<BaseLabelProps>;
+
+export declare type LabelSize = 'sm' | 'md' | 'lg';
+
+export declare const Layout: default_2.FC<LayoutProps>;
+
+export declare interface LayoutProps {
+    children: default_2.ReactNode;
+    navigationConfig: NavigationItem[];
+    userRoles?: string[];
+    activePath?: string;
+    user?: HeaderUser;
+    hasNotifications?: boolean;
+    onNavigate?: (path: string) => void;
+    onNotificationClick?: () => void;
+    onUserProfileClick?: () => void;
+    contentClassName?: string;
+}
+
+/**
+ * Link component with support for icons, variants, sizes, and accessibility.
+ *
+ * @param props - LinkProps
+ * @param ref - Ref to the anchor element
+ * @return JSX.Element
+ */
+export declare const Link: default_2.ForwardRefExoticComponent<LinkProps & default_2.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * Props for the Link component.
+ * Extends standard anchor attributes and WithIconsProps.
+ */
+export declare interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, WithIconsProps {
+    id?: string;
+    size?: LinkSize;
+    variant?: LinkVariant;
+    children: ReactNode;
+    disabled?: boolean;
+    /** Target attribute for the anchor */
+    target?: HTMLAttributeAnchorTarget;
+    rel?: string;
+    className?: string;
+    truncate?: boolean;
+    /** Accessible label for the link */
+    'aria-label'?: string;
+    /** Accessible description for the link */
+    'aria-describedby'?: string;
+    tabIndex?: number;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+
+/**
+ * Defines the available sizes for the Link component.
+ */
+export declare type LinkSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Defines the available visual variants for the Link component.
+ */
+export declare type LinkVariant = 'underlined' | 'plain';
+
+/**
+ * Represents a navigation item used in the sidebar navigation component.
+ *
+ * @property id - Unique identifier for the navigation item.
+ * @property label - Display text for the navigation item.
+ * @property icon - Optional icon component or React node to display alongside the label.
+ * @property iconSize - Optional size for the icon; can be a predefined IconSizes value, string, or number.
+ * @property iconColor - Optional color for the icon.
+ * @property path - Optional navigation path or URL associated with the item.
+ * @property permissions - List of permissions required to access this navigation item.
+ * @property children - Optional array of child navigation items for nested navigation structures.
+ */
+export declare interface NavigationItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode | RemixiconComponentType;
+    iconSize?: IconSizes | string | number;
+    iconColor?: string;
+    path?: string;
+    permissions: Permission[];
+    children?: NavigationItem[];
+}
+
+/**
+ * Normalizes field configurations to ensure only valid types are used
+ * @param fields - Array of field configurations
+ * @returns Normalized field configurations with valid types
+ */
+export declare const normalizeFieldTypes: (fields: Partial<FieldConfig>[]) => FieldConfig[];
+
+/**
+ * Transforms select options to the expected format
+ * @param options - Options in various formats
+ * @returns Normalized SelectOption array
+ */
+export declare const normalizeSelectOptions: (options: Array<{
+    value: string | number;
+    label: string;
+}> | SelectOption[]) => SelectOption[];
 
-declare type IconSize_2 = 'tn' | 'sm' | 'md' | 'lg';
+export declare const PasswordInput: default_2.FC<PasswordInputProps>;
+
+export declare interface PasswordInputProps extends BaseFormFieldProps, Omit<WithIconsProps, 'rightIcon'> {
+}
+
+export declare type Permission = string;
+
+export declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare const PinInputGroup: default_2.FC<PinInputGroupProps>;
+
+export declare interface PinInputGroupProps {
+    length?: number;
+    size?: FormFieldSize;
+    variant?: 'outlined' | 'filled';
+    hasError?: boolean;
+    type?: 'text' | 'number';
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    className?: string;
+    pinInputClassName?: string;
+}
+
+export declare interface PinInputProps extends BaseFormFieldProps {
+    variant?: 'outlined' | 'filled';
+}
+
+export declare interface PinSpecificProps {
+    pinLength?: number;
+    pinType?: 'text' | 'number';
+    onPinComplete?: (value: string) => void;
+}
+
+export declare const RadioInput: ForwardRefExoticComponent<RadioInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare const RadioInputDot: default_2.ForwardRefExoticComponent<RadioInputDotProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface RadioInputDotProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    dotClassName?: string;
+}
+
+export declare const RadioInputLabel: React.FC<BaseLabelProps>;
+
+export declare interface RadioInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: FormFieldSize;
+    label?: string;
+    hasError?: boolean;
+    dotClassName?: string;
+    labelClassName?: string;
+}
+
+export declare interface RadioSpecificProps {
+    options: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    radioName?: string;
+    onRadioChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export declare const SearchInput: default_2.FC<SearchInputProps>;
+
+export declare interface SearchInputProps extends WithIconsProps {
+    size?: FormFieldSize;
+    placeholder?: string;
+    onSearch?: (value: string) => void;
+    className?: string;
+}
+
+export declare interface SearchSpecificProps {
+    onSearch?: (value: string) => void;
+}
 
 export declare const SectionSpinner: default_2.FC<{
     message?: string;
-    color?: 'primary' | 'orange' | 'white' | 'gray';
+    color?: ColorKey;
+    variant?: Variant;
 }>;
 
+export declare const SelectInput: default_2.ForwardRefExoticComponent<SelectInputProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectInputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    disabled?: boolean;
+    options: SelectOption[];
+    placeholder?: string;
+    onOptionSelect?: (option: SelectOption) => void;
+    className?: string;
+    inputClassName?: string;
+    optionsClassName?: string;
+    optionClassName?: string;
+}
+
+export declare interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface SelectSpecificProps {
+    options: SelectOption[];
+    onOptionSelect?: (option: SelectOption) => void;
+}
+
+export declare type SetDigits = default_2.Dispatch<default_2.SetStateAction<string[]>>;
+
+/**
+ * Sidebar component for navigation.
+ *
+ * @param {SidebarProps} props - Sidebar properties.
+ * @param {Array} props.navigationConfig - Navigation items configuration.
+ * @param {Array} [props.userRoles=[]] - User roles for access control.
+ * @param {Function} [props.onNavigate] - Callback when navigation occurs.
+ * @param {string} [props.activePath] - Currently active navigation path.
+ * @returns {JSX.Element} Sidebar navigation component.
+ */
+export declare const Sidebar: default_2.FC<SidebarProps>;
+
+export declare const SidebarContext: Context<SidebarContextValue | undefined>;
+
+/**
+ * Context value for managing the sidebar state.
+ * @property isCollapsed - Boolean indicating whether the sidebar is collapsed.
+ * @property setIsCollapsed - Function to toggle the collapsed state of the sidebar.
+ * @property isMobileOpen - Boolean indicating whether the sidebar is open on mobile devices.
+ * @property setIsMobileOpen - Function to toggle the mobile open state of the sidebar.
+ */
+export declare interface SidebarContextValue {
+    isCollapsed: boolean;
+    setIsCollapsed: (v: boolean) => void;
+    isMobileOpen: boolean;
+    setIsMobileOpen: (v: boolean) => void;
+}
+
+/**
+ * Props for the Sidebar component.
+ *
+ * @property navigationConfig - Array of NavigationItem objects defining the sidebar structure.
+ * @property userRoles - Optional array of roles assigned to the current user for permission checks.
+ * @property currentUser - Optional SidebarUser object containing user information like name and role.
+ * @property onNavigate - Optional callback function invoked when a navigation item is clicked, receiving the item's path as an argument.
+ * @property activePath - Optional string representing the currently active navigation path for highlighting purposes.
+ */
+export declare interface SidebarProps {
+    navigationConfig: NavigationItem[];
+    userRoles?: string[];
+    currentUser?: SidebarUser;
+    onNavigate?: (path: string) => void;
+    activePath?: string;
+}
+
+export declare const SidebarProvider: ({ children }: PropsWithChildren) => JSX.Element;
+
+export declare interface SidebarUser {
+    name?: string;
+    role?: string;
+}
+
+declare type Size = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const sizeStyles: {
+    sm: RuleSet<object>;
+    md: RuleSet<object>;
+    lg: RuleSet<object>;
+};
+
+export declare type SortDirection = 'asc' | 'desc' | 'none';
+
+export declare interface SortState {
+    columnId: string | null;
+    direction: SortDirection;
+}
+
 export declare const Spinner: default_2.FC<SpinnerProps>;
 
 declare interface SpinnerProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'orange' | 'white' | 'gray';
+    size?: Size;
+    color?: ColorKey;
     centered?: boolean;
     message?: string;
+    title?: string;
+    variant?: Variant;
+}
+
+/**
+ * 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.
+ */
+export declare const Table: {
+    ({ columns, rows, size, variant, className, stickyHeader, onSortChange, }: TableProps): 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 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';
+    className?: 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 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;
+}
+
+/**
+ * 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.
+ */
+export declare const TableHeaderCell: default_2.FC<TableHeaderCellProps>;
+
+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;
+    sticky?: boolean;
+    fixed?: 'left' | 'right';
+    onSort?: (direction: SortDirection) => void;
+}
+
+export declare const tableHoverMixin: RuleSet<object>;
+
+export declare const tableIconContainerStyles: RuleSet<object>;
+
+export declare interface TableProps<T = default_2.ReactNode> {
+    columns: TableColumnDef<T>[];
+    rows: TableRowData<T>[];
+    size?: TableCellSize;
+    variant?: TableVariant;
+    className?: string;
+    stickyHeader?: boolean;
+    sortState?: SortState;
+    onSortChange?: (state: SortState) => void;
+}
+
+export declare const tableResponsiveMixin: RuleSet<object>;
+
+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';
+    className?: string;
+}
+
+export declare type TableVariant = 'default' | 'striped';
+
+export declare const tableVariants: {
+    default: RuleSet<object>;
+    striped: RuleSet<object>;
+};
+
+export declare const TermsAndConditions: default_2.FC<TermsAndConditionsProps>;
+
+export declare interface TermsAndConditionsProps {
+    isOpen: boolean;
+    onAccept: () => void;
+    onCancel: () => void;
+    title: string;
+    subtitle?: string;
+    content: default_2.ReactNode;
+    bodyFooter?: default_2.ReactNode;
+    confirmationLabel?: string;
+    acceptLabel?: string;
+    cancelLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    fullScreen?: boolean;
+    showCloseButton?: boolean;
+    closeOnBackdropClick?: boolean;
+    containerClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+    initiallyConfirmed?: boolean;
+    onConfirmChange?: (checked: boolean) => void;
 }
 
 declare const Text_2: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
 size?: keyof typeof bodyTextStyles;
+color?: string;
 }>> & string;
 export { Text_2 as Text }
 
+export declare const TextAreaInput: ForwardRefExoticComponent<TextAreaInputProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    size?: FormFieldSize;
+    hasError?: boolean;
+    disabled?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    autoResize?: boolean;
+}
+
+export declare interface TextAreaSpecificProps {
+    rows?: number;
+}
+
+/**
+ * ToastProvider component for displaying toast notifications.
+ *
+ * This component wraps the Toaster component from the 'sonner' library
+ * to provide a consistent toast notification system across the application.
+ *
+ * @returns The rendered ToastProvider component.
+ */
+export declare const ToastProvider: () => JSX.Element;
+
+/**
+ * Validates if a complete code meets certain criteria
+ *
+ * @param code - The complete code string
+ * @param length - Expected length
+ * @param type - Expected type ('text' | 'number')
+ * @returns boolean indicating if code is valid
+ */
+export declare const validateCode: (code: string, length: number, type?: "text" | "number") => boolean;
+
+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
+ */
+declare interface WithIconsProps {
+    leftIcon?: React.ReactNode | RemixiconComponentType;
+    rightIcon?: React.ReactNode | RemixiconComponentType;
+    iconSize?: IconSizes | string | number;
+    iconColor?: string;
+}
+
 export { }