lambda-ui-components 1.0.0

package/dist/main.d.ts

@@ -0,0 +1,3264 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ClassProp } from 'class-variance-authority/types';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { Dispatch } from 'react';
+import { FC } from 'react';
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributeAnchorTarget } from 'react';
+import { HTMLAttributes } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { SetStateAction } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+export declare const Accordion: default_2.ForwardRefExoticComponent<AccordionProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Item: default_2.ForwardRefExoticComponent<AccordionItemProps & default_2.RefAttributes<HTMLDivElement>>;
+    Header: default_2.ForwardRefExoticComponent<AccordionHeaderProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Content: default_2.ForwardRefExoticComponent<AccordionContentProps & default_2.RefAttributes<HTMLDivElement>>;
+};
+
+declare interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * El contenido del panel del item (el contenido expandible/colapsable).
+     */
+    children: default_2.ReactNode;
+    size?: AccordionVariants["size"];
+}
+
+declare interface AccordionHeaderProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * El contenido del encabezado del item (el texto clickeable).
+     */
+    children: default_2.ReactNode;
+    /**
+     * Si es true, este item está deshabilitado y no se puede expandir/colapsar.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Opcional: Tamaño visual del Accordion.
+     * @type `AccordionSize`
+     * @default `medium`
+     */
+    size?: AccordionVariants["size"];
+    /**
+     * Opcional: Variante visual del Accordion.
+     */
+    variant?: AccordionVariants["variant"];
+}
+
+declare interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Un valor único que identifica este item dentro del Accordion padre.
+     * Se usa para controlar su estado abierto/cerrado. Requerido.
+     */
+    value: string | number;
+    /**
+     * Los hijos del AccordionItem. Deben ser `AccordionHeader` y `AccordionContent`.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Si es true, este item está deshabilitado y no se puede expandir/colapsar.
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    /**
+     * El/los valor(es) del AccordionItem que está/n actualmente abierto(s).
+     * Para un Accordion single-open (predeterminado), es un único valor (string | number)
+     * o null/undefined si ninguno está abierto.
+     * Usar con `onValueChange` para un componente controlado.
+     */
+    value?: AccordionValue;
+    /**
+     * El valor del AccordionItem que debe estar abierto por defecto (al montar)
+     * cuando el componente es no controlado.
+     * Para un Accordion single-open (predeterminado), es un único valor.
+     */
+    defaultValue?: AccordionValue;
+    /**
+     * Callback llamado cuando el estado de un AccordionItem cambia (se abre o cierra).
+     * Recibe el nuevo valor del item abierto (o null/undefined si se cierra).
+     * Usar con `value` para un componente controlado.
+     */
+    onValueChange?: (value: AccordionValue) => void;
+    /**
+     * Los hijos del Accordion. Deben ser `AccordionItem` componentes.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Opcional: Indica si se permite tener múltiples items abiertos simultáneamente.
+     * (Implementación de single-open por ahora, esta prop no afectará hasta implementarla).
+     * @default false (para single-open)
+     */
+    /**
+     * Opcional: Tamaño visual del Accordion.
+     * @type `AccordionSize`
+     * @default `medium`
+     */
+    size?: AccordionVariants["size"];
+    /**
+     * Opcional: Variante visual del Accordion.
+     */
+    variant?: AccordionVariants["variant"];
+    /**
+     * Opcional: Radio visual del Accordion.
+     */
+    radius?: AccordionVariants["radius"];
+}
+
+declare type AccordionValue = string | number | null | undefined;
+
+declare type AccordionVariants = VariantProps<typeof accordionVariants>;
+
+declare const accordionVariants: (props?: ({
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "default" | "flush" | "split" | "soft" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Alert: default_2.ForwardRefExoticComponent<AlertProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    /**
+     * Define la variante visual del alert, afectando típicamente el color de fondo y texto.
+     * Corresponde a los tipos semánticos de alerta.
+     */
+    color?: AlertVariants["color"];
+    /**
+     * Define la variante visual del alert, afectando típicamente el color de fondo y texto.
+     * Corresponde a los tipos semánticos de alerta.
+     */
+    variant?: AlertVariants["variant"];
+    /**
+     * El texto que representa el titulo del contenido.
+     */
+    title?: string;
+    /**
+     * El contenido del mensaje del alert.
+     */
+    message: string;
+    /**
+     * Opcional: Callback que se llama cuando se hace clic en el botón de cerrar (si se muestra).
+     * Si se proporciona este callback, se mostrará un botón de cerrar.
+     */
+    onClose?: () => void;
+    /**
+     * Modifica el tamaño de la Alert
+     * @default small
+     */
+    size?: AlertVariants["size"];
+    /**
+     * Modifica el radio de la Alert
+     * @default small
+     */
+    radius?: AlertVariants["radius"];
+    /**
+     * Si es `true`, se mostrará un icono por defecto basado en la variante (success, danger, warning, info).
+     * @default false
+     */
+    showIcon?: boolean;
+    /**
+     * Opcional: Un elemento React para usar como icono, sobrescribiendo el icono por defecto.
+     * Solo se mostrará si `showIcon` es `true` o si prefieres controlarlo internamente.
+     * (Decidimos: solo si `showIcon` es true O `customIcon` es proporcionado directamente).
+     * Si `customIcon` se proporciona, tiene prioridad sobre el icono por defecto.
+     */
+    customIcon?: default_2.ReactNode;
+}
+
+declare type AlertVariants = VariantProps<typeof alertVariants>;
+
+declare const alertVariants: (props?: ({
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type AlignItems = "flex-start" | "flex-end" | "center" | "end" | "start" | "self-end" | "self-start" | "baseline" | "stretch" | "normal" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-initial";
+
+declare type AllThemes = LightTheme | DarkTheme | "system";
+
+declare type Attribute = DataAttribute | "class";
+
+export declare const Avatar: default_2.FC<AvatarProps> & {
+    Group: default_2.FC<AvatarGroupProps>;
+};
+
+declare interface AvatarGroupProps {
+    /**
+     * Array of user objects to display as avatars.
+     * Each user should have a name and optionally an image src.
+     */
+    users: {
+        name: string;
+        src?: string;
+    }[];
+    /**
+     * Maximum number of avatars to display.
+     * Remaining avatars will be shown as a "+N" indicator.
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size of all avatars in the group.
+     * @default "medium"
+     */
+    size?: AvatarVariants["size"];
+    /**
+     * Additional CSS class name for custom styling.
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the avatar group container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional content to render after the avatars.
+     */
+    children?: ReactNode;
+}
+
+declare interface AvatarProps {
+    /**
+     * Name of the user. Used to generate initials when no image is provided.
+     * The initials are automatically generated from the first letters of the name.
+     */
+    name: string;
+    /**
+     * Image URL for the avatar. If provided, displays the image instead of initials.
+     */
+    src?: string;
+    /**
+     * Size of the avatar.
+     * @default "medium"
+     */
+    size?: AvatarVariants["size"];
+    /**
+     * Additional CSS class name for custom styling.
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the avatar.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Enable hover and tap animations.
+     * @default false
+     */
+    animate?: boolean;
+}
+
+declare type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+declare const avatarVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    overflow?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>;
+
+declare interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "disabled" | "checked" | "color"> {
+    /**
+     * Controla el tamaño visual del badge.
+     */
+    size?: BadgeVariants["size"];
+    /**
+     * Establece el esquema de color para el badge, típicamente afectando el color cuando está activado.
+     */
+    color?: BadgeVariants["color"];
+    /**
+     * Define el texto que se muestra en el badge.
+     */
+    /**
+     * Define el radio del badge.
+     */
+    radius?: BadgeVariants["radius"];
+    /**
+     * Define el texto que se muestra en el badge.
+     */
+    text?: string;
+    /**
+     * Define el número que se muestra en el badge, si no se define no se muestra.
+     */
+    count?: number;
+    /**
+     * Define el número máximo que se muestra en el badge, si count supera este número se muestra el valor de maxCount.
+     */
+    maxCount?: number;
+}
+
+declare const badgeStyles: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    hasCount?: boolean | null | undefined;
+    hasText?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type BadgeVariants = VariantProps<typeof badgeStyles>;
+
+declare interface BaseSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange" | "onInput" | "defaultValue" | "color"> {
+    /**
+     * Allows customizing how the slider value is displayed (tooltip/handle label).
+     * Receives the numeric value and must return a string or number to show.
+     */
+    formatValue?: (value: number) => string | number;
+    /**
+     * The minimum allowed value of the slider range.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value of the slider range.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The amount the value increases or decreases with each movement.
+     * Must be positive. If set to 0, any value between min and max is allowed.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Disables user interaction with the slider.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls the size of the slider (track and thumb).
+     * @default "medium"
+     */
+    size?: SliderSize;
+    /**
+     * Optional label describing the slider.
+     * Rendered as a <label> when provided.
+     */
+    label?: string;
+    /**
+     * The color of the slider fill.
+     * @default "primary"
+     */
+    color?: SliderTrackVariants["color"];
+    /**
+     * Whether the current value should be visible on the slider (e.g., tooltip).
+     * @default true
+     */
+    viewValue?: boolean;
+    /**
+     * Whether the filled progress bar should be visible.
+     * @default true
+     */
+    viewBar?: boolean;
+    /**
+     * Marks displayed along the slider track.
+     * Each mark can optionally show a label.
+     */
+    marks?: SliderMarks[];
+    /**
+     * Orientation of the slider: horizontal or vertical.
+     * @default "horizontal"
+     */
+    orientation?: SliderTrackVariants["orientation"];
+    /**
+     * Controls how rounded the track and thumb should be.
+     */
+    radius?: SliderTrackVariants["radius"];
+}
+
+export declare const Breadcrumb: ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;
+
+declare interface BreadcrumbItem {
+    /**
+     * Label of the breadcrumb item
+     */
+    label: string;
+    /**
+     * URL of the breadcrumb item
+     */
+    href: string;
+    /**
+     * Icon of the breadcrumb item
+     */
+    icon?: React.ReactNode;
+}
+
+declare interface BreadcrumbProps {
+    /**
+     * Array of breadcrumb items
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Size of the breadcrumb
+     */
+    size?: BreadcrumbVariants["size"];
+    /**
+     * Radius of the breadcrumb
+     */
+    radius?: BreadcrumbVariants["radius"];
+    /**
+     * Variant of the breadcrumb separator
+     */
+    variant?: BreadcrumbVariants["variant"];
+    /**
+     * Color of the breadcrumb
+     */
+    color?: BreadcrumbVariants["color"];
+    /**
+     * Maximun number of items to show
+     */
+    maxItems?: number;
+}
+
+declare type BreadcrumbVariants = VariantProps<typeof variantBreadcrumbItem>;
+
+declare interface Breakpoint {
+    /**
+     * Ancho mínimo de la ventana en píxeles para aplicar esta configuración.
+     * Los puntos de ruptura deben estar ordenados de menor a mayor.
+     */
+    breakpoint: number;
+    /**
+     * Número de items visibles a la vez en este punto de ruptura.
+     */
+    items: number;
+}
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+declare const button: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    variant?: "soft" | "text" | "dashed" | "solid" | "outline" | "classic" | "subtle" | "unstyled" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    block?: boolean | null | undefined;
+    isCircle?: boolean | null | undefined;
+    iconPosition?: "left" | "right" | null | undefined;
+    loading?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    joinposition?: "middle" | "first" | "last" | "single" | null | undefined;
+    onlyIcon?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /**
+     * Define el estilo visual principal del botón (por ejemplo, sólido, delineado, transparente).
+     */
+    variant?: ButtonVariants["variant"];
+    /**
+     * Establece el esquema de color del botón (por ejemplo, primario, secundario, peligro).
+     */
+    color?: ButtonVariants["color"];
+    /**
+     * Controla el tamaño visual del botón, afectando el padding y el tamaño del texto/icono.
+     */
+    size?: ButtonVariants["size"];
+    /**
+     * Define el radio del botón.
+     */
+    radius?: ButtonVariants["radius"];
+    /**
+     * Define si el botón ocupa todo el ancho disponible (cuando es true) o normal (cuando es false).
+     */
+    block?: ButtonVariants["block"];
+    /**
+     * Define si el botón es circular (cuando es true) o normal (cuando es false).
+     */
+    isCircle?: ButtonVariants["isCircle"];
+    /**
+     * Controla la posición de un icono (`icon`) en relación con la etiqueta (`label`) del botón.
+     */
+    iconPosition?: ButtonVariants["iconPosition"];
+    /**
+     * Activa un estado visual de carga para el botón, típicamente mostrando un spinner y deshabilitando la interacción.
+     */
+    loading?: ButtonVariants["loading"];
+    /**
+     * Un elemento React (como un icono) para mostrar dentro del botón.
+     */
+    icon?: ReactNode | undefined | null;
+    /**
+     * El texto principal que se muestra dentro del botón.
+     */
+    label?: string;
+    /**
+     * Texto que se muestra en lugar de la etiqueta (`label`) cuando el botón está en estado de carga (`loading`).
+     */
+    loadingText?: string;
+    /**
+     * Una etiqueta para accesibilidad (ARIA). Proporciona una descripción concisa para lectores de pantalla, especialmente útil si el botón solo contiene un icono.
+     */
+    "aria-label"?: string;
+    /**
+     * Indica la posición del hijo dentro del Join(Si el botón está dentro de un Join).
+     */
+    joinposition?: "first" | "last" | "middle";
+}
+
+export declare const ButtonTheme: default_2.FC<ButtonThemeProps>;
+
+declare type ButtonThemeAnimation = "fade" | "rotate" | "scale" | "flip" | "slide" | "none";
+
+declare interface ButtonThemeProps extends ButtonProps {
+    /**
+     * Tipo de animación al cambiar el icono del tema
+     */
+    animation?: ButtonThemeAnimation;
+    /**
+     * Otros props que quieras pasar al botón base
+     */
+    [key: string]: any;
+}
+
+declare type ButtonVariants = VariantProps<typeof button>;
+
+export declare const Calendar: ({ value, onChange, minDate, maxDate, disabled, events, variant, isDateDisabled, }: CalendarProps) => JSX.Element;
+
+declare interface CalendarEvents {
+    date: Date;
+    label: string[];
+    status: CalendarEventStatus[];
+}
+
+declare type CalendarEventStatus = "success" | "warning" | "danger";
+
+declare interface CalendarProps {
+    /**
+     * Fecha actualmente seleccionada
+     */
+    value?: Date;
+    /**
+     * Callback cuando cambia la fecha seleccionada
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * Fecha mínima seleccionable
+     */
+    minDate?: Date;
+    /**
+     * Fecha máxima seleccionable
+     */
+    maxDate?: Date;
+    /**
+     * Deshabilita el calendario
+     */
+    disabled?: boolean;
+    /**
+     * Permite personalizar la variante visual
+     */
+    variant?: CalendarVariants["variant"];
+    /**
+     * Permite deshabilitar días específicos
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Permite personalizar los eventos del calendario
+     */
+    events?: CalendarEvents[];
+}
+
+declare type CalendarVariants = VariantProps<typeof calendarVariants>;
+
+declare const calendarVariants: (props?: ({
+    variant?: "soft" | "solid" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+declare const card: (props?: ({
+    variant?: "outline" | "borderless" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "disabled" | "color"> {
+    /**
+     * Opcional: Configuración para la sección de imagen de la tarjeta.
+     */
+    image?: ICardImage;
+    /**
+     * Opcional: Configuración para la sección de encabezado de la tarjeta.
+     */
+    header?: ICardHeader;
+    /**
+     * Opcional: Un array de objetos que definen las acciones disponibles en la tarjeta en el pie de la card.
+     */
+    actions?: ICardActions[];
+    /**
+     * Define la variante visual principal de la tarjeta.
+     */
+    variant?: VariantProps<typeof card>["variant"];
+    /**
+     * Define el tamaño de la tarjeta, afectando dimensiones, espaciado interno (padding) y quizás el tamaño de otros elementos internos.
+     */
+    size?: CardVariants["size"];
+    /**
+     * Define el radio de la tarjeta, afectando dimensiones, espaciado interno (padding) y quizás el tamaño de otros elementos internos.
+     */
+    radius?: CardVariants["radius"];
+    /**
+     * El contenido principal de la tarjeta. Este es el área donde se coloca el contenido principal
+     * de la tarjeta (texto, otros componentes, etc.). Se pasa como children del componente.
+     */
+    children: React.ReactNode;
+}
+
+declare type CardVariants = VariantProps<typeof card>;
+
+export declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;
+
+declare type CarouselDotType = 'circle' | 'line' | 'square' | 'number';
+
+declare type CarouselOrientation = 'horizontal' | 'vertical';
+
+declare type CarouselPaginationType = 'dots' | 'thumbnail';
+
+declare interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Los elementos o componentes que se mostrarán dentro del carrusel.
+     * Cada hijo directo será tratado como un item del carrusel.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Opcional: Configuración de puntos de ruptura responsivos.
+     * Un array de objetos { breakpoint: number, items: number }, ordenado por breakpoint.
+     * Define cuántos items se muestran en diferentes tamaños de pantalla.
+     * Si no se proporciona, por defecto muestra 1 item.
+     * Ejemplo: [{ breakpoint: 0, items: 1 }, { breakpoint: 768, items: 2 }, { breakpoint: 1200, items: 3 }]
+     */
+    breakpoints?: Breakpoint[];
+    /**
+     * Opcional: Velocidad de la transición de desplazamiento en milisegundos.
+     * Debe coincidir con la duración de la transición CSS `scroll-behavior: smooth`.
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * Opcional: Define la orientación del carrusel (horizontal o vertical).
+     * @default 'horizontal'
+     */
+    orientation?: CarouselOrientation;
+    /**
+     * Determina cómo avanza el carrusel al navegar (botones) o durante la reproducción automática.
+     * - 'auto': Avanza por el número de ítems visibles en el breakpoint actual.
+     * - 'single': Avanza de un ítem en uno, independientemente de cuántos sean visibles.
+     * @default 'auto'
+     */
+    slideMode?: CarouselSliderMode;
+    /**
+     * Habilita o deshabilita la reproducción automática del carrusel.
+     * Cuando está habilitado, el carrusel avanza automáticamente a la siguiente diapositiva
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Especifica el tipo visual o la forma de los puntos de paginación.
+     * * Solo relevante si `paginationType` es 'dots'.
+     * @default 'circle'
+     */
+    dotType?: CarouselDotType;
+    /**
+     * Especifica el tipo de indicadores de paginación a usar.
+     * - 'dots': Utiliza los indicadores de puntos estándar (requiere `showPagination` true).
+     * - 'thumbnail': Utiliza thumbnail extraídas de los ítems hijos como indicadores
+     * @default 'dots'
+     */
+    paginationType?: CarouselPaginationType;
+    /**
+     * Si es `true`, muestra los botones de navegación "Anterior" y "Siguiente".
+     * @default true
+     */
+    showNavigationButtons?: boolean;
+    /**
+     * Si es `true`, el carrusel se desplazará infinitamente (modo looping).
+     * Requiere duplicar items visualmente al inicio y al final.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Si es `true`, muestra los indicadores de paginación (puntos).
+     * @default true
+     */
+    showPagination?: boolean;
+    /**
+     * Opcional: Etiqueta ARIA para el contenedor principal del carrusel, necesaria si role="region".
+     */
+    'aria-label'?: string;
+}
+
+declare type CarouselSliderMode = 'auto' | 'single';
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckBoxProps & RefAttributes<HTMLInputElement>>;
+
+declare const checkboxContainerVariants: (props?: ({
+    positionLabel?: "left" | "right" | "bottom" | "top" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "color" | "type"> {
+    /**
+     * Controla si el checkbox está activado (`true`) o desactivado (`false`).
+     * Usar esta prop hace que el componente sea controlado.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Callback simple que se ejecuta cada vez que el estado del checkbox cambia (de activado a desactivado o viceversa).
+     * Recibe el nuevo valor booleano.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Callback que se ejecuta con el evento nativo de cambio del input.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Controla el tamaño visual del control de la casilla de verificación.
+     */
+    size?: CheckboxVariants["size"];
+    /**
+     * Define el estilo visual de la casilla de verificación, como la apariencia de la caja y la marca de verificación.
+     */
+    variant?: CheckboxVariants["variant"];
+    /**
+     * Ajusta la redondez de las esquinas de la caja de la casilla de verificación.
+     */
+    radius?: CheckboxVariants["radius"];
+    /**
+     * Establece el esquema de color para la casilla de verificación, típicamente afectando el color de la marca de verificación cuando está marcada.
+     */
+    color?: CheckboxVariants["color"];
+    /**
+     * Controla dónde se coloca la etiqueta de texto (`label`) en relación con el control de la casilla (por ejemplo, a la izquierda o a la derecha).
+     */
+    positionLabel?: ContainerVariants["positionLabel"];
+    /**
+     * El texto que se muestra junto al control de la casilla, asociado semánticamente a él.
+     */
+    label?: string;
+    /**
+     * Deshabilita la casilla de verificación, impidiendo que el usuario cambie su estado y cambiando su apariencia para indicar que no está disponible.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marca el checkbox como requerido, lo que implica que debe estar marcado para que el formulario sea válido.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Marca el checkbox como inválido, lo que implica que el formulario no es válido.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Icono personalizado que se muestra en la casilla de verificación cuando está marcada.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Indica la posición de la casilla de verificación dentro de un grupo de casillas de verificación (Join).
+     * @default "middle"
+     */
+    joinposition?: "first" | "middle" | "last";
+}
+
+declare type CheckboxVariants = VariantProps<typeof checkboxWrapperVariants>;
+
+declare const checkboxWrapperVariants: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+    join?: boolean | null | undefined;
+    joinposition?: "middle" | "first" | "last" | "single" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const ClientOnly: {
+    ({ children, fallback }: ClientOnlyProps): JSX.Element;
+    displayName: string;
+};
+
+declare interface ClientOnlyProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+
+export declare const CodeBlock: default_2.FC<CodeBlockProps>;
+
+declare interface CodeBlockProps {
+    /**
+     * Theme for code block: 'light' (default) or 'dark'
+     */
+    theme?: "light" | "dark";
+    /**
+     * The code to be displayed
+     */
+    code?: string;
+    /**
+     * The language of the code
+     */
+    language?: string;
+    /**
+     * Líneas a resaltar, formato: '2,4-6'
+     */
+    highlightLines?: string;
+    /**
+     * Whether to show line numbers
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether to show copy button
+     */
+    buttonCopy?: boolean;
+    /**
+     * The tabs to be displayed
+     */
+    tabs?: CodeTab[];
+    /**
+     * The class name to be applied to the code block
+     */
+    className?: string;
+    /**
+     * The children to be displayed
+     */
+    children?: ReactNode;
+}
+
+declare interface CodeTab {
+    /**
+     * The label of the tab
+     */
+    label: string;
+    /**
+     * The icon of the tab
+     */
+    icon?: ReactNode;
+    /**
+     * The language of the code
+     */
+    language: string;
+    /**
+     * The code to be displayed
+     */
+    code: string;
+}
+
+export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+
+declare interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "disabled" | "checked" | "color" | "onChange"> {
+    /**
+     * Valor actual del color seleccionado.
+     */
+    value?: string;
+    /**
+     * Define el valor actual del color seleccionado.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Define el valor actual del color seleccionado.
+     */
+    disabled?: boolean;
+    /**
+     * Define el formato del color seleccionado.
+     */
+    format?: "hex" | "rgb" | "rgba" | "hsl" | "hsla";
+    /**
+     * Define el tamaño del color picker.
+     */
+    size?: ColorPickerVariants["size"];
+    /**
+     * Define si se muestra el texto del color picker.
+     */
+    showText?: boolean;
+}
+
+declare type ColorPickerVariants = VariantProps<typeof colorpickerVariants>;
+
+declare const colorpickerVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    disabled?: boolean | null | undefined;
+    showText?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface ConfigProviderProps {
+    lang: keyof Dictionary;
+}
+
+declare type ContainerVariants = VariantProps<typeof checkboxContainerVariants>;
+
+declare const countVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type DarkTheme = "dark" | "slate" | "deep-cosmic-night" | "soft-obsidian" | "graphite" | "midnight" | "aurora-night" | "electro-violet";
+
+declare type DataAttribute = `data-${string}`;
+
+export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+
+declare interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
+    /**
+     * The currently selected date value in the calendar.
+     * If not provided, the field will be empty (uncontrolled component).
+     */
+    value?: Date;
+    /**
+     * Callback function that is triggered when the user selects a new date.
+     *
+     * @param date - The newly selected date (Date), or `undefined` if the field is cleared.
+     */
+    onChange?: (date: Date | undefined) => void;
+    /**
+     * The earliest date the user can select.
+     * Dates prior to this will be disabled.
+     */
+    minDate?: Date;
+    /**
+     * The furthest (future) date the user can select.
+     * Dates after this will be disabled.
+     */
+    maxDate?: Date;
+    /**
+     * Completely disables the input field and the calendar, preventing user interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the visual size of the component (e.g., `sm`, `md`, `lg`).
+     *
+     * @default md
+     */
+    size?: DatePickerVariants["size"];
+    /**
+     * Specifies the selection mode for the calendar (e.g., day, month, year).
+     * The 'date' value allows selection of day, month, and year.
+     *
+     * @default date
+     */
+    type?: DatePickerVariants["type"];
+    /**
+     * Defines the corner shape (radius) of the input field and the calendar dropdown.
+     *
+     * @default md
+     */
+    radius?: DatePickerVariants["radius"];
+    /**
+     * The visual style (variant) of the component (e.g., 'filled', 'outline', 'ghost').
+     *
+     * @default filled
+     */
+    variant?: DatePickerVariants["variant"];
+    /**
+     * Custom function to disable specific dates in the calendar.
+     * Useful for restricting holidays, weekends, etc.
+     *
+     * @param date - The date to evaluate.
+     * @returns `true` if the date should be disabled, `false` otherwise.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Label text that appears above the input field (Input Label).
+     *
+     * @default ""
+     */
+    label?: string;
+    /**
+     * The display format of the date shown in the input field.
+     * Defines how the selected date is presented to the user (e.g., 'full' as "Thursday, November 13, 2025").
+     *
+     * @default medium
+     */
+    displayFormat?: "full" | "long" | "medium" | "short";
+    /**
+     * Optional text that provides **additional guidance** or context to the user about the expected input format or purpose. It is displayed below the date input.
+     *
+     * @default ""
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input field when a validation issue occurs.
+     * Setting this value automatically implies an `invalid` state.
+     *
+     * @default ""
+     */
+    errorMessage?: string;
+    /**
+     * Forces the component into an error (invalid) state, applying corresponding error styles.
+     * Useful for showing visual error feedback even without an explicit `errorMessage`.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+}
+
+declare type DatePickerVariants = VariantProps<typeof datepickerVariants>;
+
+declare const datepickerVariants: (props?: ({
+    type?: "inline" | "dropdown" | "modal" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    variant?: "soft" | "solid" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Dialog: default_2.ForwardRefExoticComponent<DialogProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const dialogOverlayVariants: (props?: ({
+    backdropType?: "transparent" | "dark" | "blur" | null | undefined;
+    state?: "entering" | "entered" | "exiting" | "exited" | null | undefined;
+    isModal?: boolean | null | undefined;
+    transitionMode?: "fade" | "fadeFromTop" | "fadeFromBottom" | "fadeFromLeft" | "fadeFromRight" | "scaleUp" | "unfold" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface DialogProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "children" | "title"> {
+    /**
+     * Controla si el diálogo está visible (abierto) o no (cerrado).
+     * Al cambiar este valor (típicamente desde un estado en el componente padre),
+     * se activan las animaciones de entrada o salida.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Callback que se llama cuando se solicita cerrar el diálogo.
+     * Esto puede ocurrir al hacer clic en el overlay, presionar la tecla Escape,
+     * o hacer clic en el botón de cerrar (si `showCloseButton` es true).
+     * Es responsabilidad del componente padre usar este callback para actualizar
+     * la prop `isOpen` y así cerrar el diálogo.
+     */
+    onClose: () => void;
+    /**
+     * El contenido principal que se mostrará dentro del cuerpo del diálogo.
+     * Puede ser cualquier elemento o componente React.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Opcional: Contenido para la sección del encabezado del diálogo.
+     * Típicamente se usa para un título o una descripción corta.
+     */
+    title?: default_2.ReactNode;
+    /**
+     * Opcional: Contenido para la sección del pie del diálogo.
+     * Se usa comúnmente para botones de acción (por ejemplo, "Aceptar", "Cancelar").
+     */
+    footer?: default_2.ReactNode;
+    /**
+     * Opcional: Tipo de animación del diálogo al abrirse y cerrarse.
+     * @default scaleUp
+     */
+    transitionMode?: DialogVariants["transitionMode"];
+    /**
+     * Opcional: Tipo de backdrop
+     * @default dark
+     */
+    backdropType?: DialogVariants["backdropType"];
+    /**
+     * Si es `true`, presionar la tecla 'Escape' cuando el diálogo está abierto
+     * activará la llamada a `onClose`.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Si es `true`, se mostrará automáticamente un botón estándar de cerrar (una 'x')
+     * en la esquina superior derecha del encabezado del diálogo.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Opcional: Una referencia a un elemento HTML dentro del diálogo.
+     * Cuando el diálogo se abre completamente, intentará poner el foco en este elemento.
+     * Esto es importante para la accesibilidad, guiando al usuario al contenido interactivo inicial.
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Clase CSS adicional para el overlay (fondo oscuro).
+     */
+    overlayClassName?: string;
+    /**
+     * Clase CSS adicional para el panel principal del diálogo (la caja).
+     */
+    panelClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del encabezado.
+     */
+    headerClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del cuerpo (donde se muestra `children`).
+     */
+    bodyClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del pie de página (donde se muestra `footer`).
+     */
+    footerClassName?: string;
+    /**
+     * Si es `true`, el diálogo se mostrará como un modal (con un overlay oscuro), y no dejará
+     * interactuar con el contenido por debajo del diálogo.
+     * @default false
+     */
+    isModal?: boolean;
+    /**
+     * Si es `true`, el dialogo se puede arrastrar
+     * @default false
+     */
+    isDraggable?: boolean;
+}
+
+declare type DialogVariants = VariantProps<typeof dialogOverlayVariants>;
+
+declare type Dictionary = typeof translations;
+
+declare type Direction = "row" | "row-reverse" | "column" | "column-reverse" | "initial" | "inherit" | "unset" | "revert" | "revert-layer" | "-moz-initial";
+
+export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
+
+declare interface DividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    variant?: DividerVariants["variant"];
+    orientation?: DividerVariants["orientation"];
+    color?: DividerVariants["color"];
+    size?: DividerVariants["size"];
+    spacing?: number;
+    contentPosition?: DividerVariants["contentPosition"];
+}
+
+declare type DividerVariants = VariantProps<typeof dividerVariants>;
+
+declare const dividerVariants: (props?: ({
+    variant?: "dashed" | "dotted" | "solid" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    color?: "black" | "white" | "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    contentPosition?: "center" | "end" | "start" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    hasContent?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Drawer: default_2.ForwardRefExoticComponent<DrawerProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const drawerPanelVariants: (props?: ({
+    state?: "entering" | "entered" | "exiting" | "exited" | null | undefined;
+    placement?: "left" | "right" | "bottom" | "top" | null | undefined;
+    width?: "small" | "medium" | "full" | "xsmall" | "half" | null | undefined;
+    radius?: "none" | "tiny" | "small" | "medium" | "large" | null | undefined;
+    backdropType?: "transparent" | "dark" | "blur" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /**
+     * Controla si el drawer está abierto o cerrado.
+     * Al cambiar este valor (típicamente desde un estado en el componente padre),
+     * se activan las animaciones de entrada o salida.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Callback que se llama cuando se solicita cerrar el drawer.
+     * Esto puede ocurrir al hacer clic en el overlay, presionar la tecla Escape,
+     * o hacer clic en el botón de cerrar (si `showCloseButton` es true).
+     * Es responsabilidad del componente padre usar este callback para actualizar
+     * la prop `isOpen` y así cerrar el drawer.
+     */
+    onClose: () => void;
+    /**
+     * El contenido principal que se mostrará dentro del cuerpo del drawer.
+     * Puede ser cualquier elemento o componente React.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Opcional: Contenido para la sección del encabezado del drawer.
+     * Típicamente se usa para un título o una descripción corta.
+     */
+    title?: default_2.ReactNode;
+    /**
+     * Define el tipo de backdrop que se mostrará detrás del drawer.
+     * Puede ser 'dark' (fondo oscuro), 'blur' (fondo con desenfoque), o 'transparent' (fondo transparente).
+     * @default 'dark'
+     */
+    backdropType?: DrawerVariants["backdropType"];
+    /**
+     * Opcional: Contenido para la sección del pie del drawer.
+     * Se usa comúnmente para botones de acción (por ejemplo, "Aceptar", "Cancelar").
+     */
+    footer?: default_2.ReactNode;
+    /**
+     * Define desde qué borde de la pantalla se abre el drawer.
+     * Requerido.
+     */
+    placement?: DrawerVariants["placement"];
+    /**
+     * Define el ancho del drawer.
+     * Solo aplica para placement en: 'right' y 'left'
+     */
+    width?: DrawerVariants["width"];
+    /**
+     * Opcional: Define el tamaño del drawer (ancho para 'left'/'right', alto para 'top'/'bottom').
+     * @default '300px' para left/right, '25vh' para top/bottom (ejemplos definidos en CSS)
+     */
+    size?: string;
+    /**
+     * Si es `true`, hacer clic en el área oscura (overlay) fuera del panel del drawer
+     * activará la llamada a `onClose`.
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Si es `true`, presionar la tecla 'Escape' cuando el drawer está abierto
+     * activará la llamada a `onClose`.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Si es `true`, se mostrará automáticamente un botón estándar de cerrar (una 'x')
+     * en la esquina superior derecha del encabezado del drawer.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Opcional: Una referencia a un elemento HTML dentro del drawer.
+     * Cuando el drawer se abre completamente, intentará poner el foco en este elemento.
+     * Esto es importante para la accesibilidad, guiando al usuario al contenido interactivo inicial.
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Clase CSS adicional para el overlay (fondo oscuro).
+     */
+    overlayClassName?: string;
+    /**
+     * Clase CSS adicional para el panel principal del drawer (la caja que desliza).
+     */
+    panelClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del encabezado.
+     */
+    headerClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del cuerpo (donde se muestra `children`).
+     */
+    bodyClassName?: string;
+    /**
+     * Clase CSS adicional para la sección del pie de página (donde se muestra `footer`).
+     */
+    footerClassName?: string;
+}
+
+declare type DrawerVariants = VariantProps<typeof drawerPanelVariants>;
+
+export declare const Dropdown: ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLButtonElement>> & {
+    Item: ({ index, icon, text, shortcutKeys, url, onSelectOption, ...props }: DropdownItemProps & Omit<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "children"> & {
+        index?: number;
+        icon?: ReactNode;
+        text?: string;
+        shortcutKeys?: string[];
+        url?: string;
+        onSelectOption?: () => void;
+    }) => JSX.Element;
+    ItemCustom: ({ children, index, onSelectOption }: DropdownItemCustomProps) => JSX.Element;
+};
+
+declare interface DropdownItemCustomProps {
+    children: ReactNode;
+    "data-navigable"?: boolean;
+    index?: number;
+    onSelectOption?: () => void;
+}
+
+declare interface DropdownItemProps {
+    index?: number;
+    icon?: ReactNode;
+    text?: string;
+    shortcutKeys?: string[];
+    url?: string;
+    onSelectOption?: () => void | undefined;
+}
+
+declare interface DropdownProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /**
+     * Define el estilo visual principal del botón (por ejemplo, sólido, delineado, transparente).
+     */
+    variant?: DropdownVariants["variant"];
+    /**
+     * Controla el tamaño visual del botón, afectando el padding y el tamaño del texto/icono.
+     */
+    size?: DropdownVariants["size"];
+    /**
+     * Define el radio del botón.
+     */
+    radius?: DropdownVariants["radius"];
+    /**
+     * Un elemento React (como un icono) para mostrar dentro del botón.
+     */
+    icon?: ReactNode | undefined | null;
+    /**
+     * El texto principal que se muestra dentro del botón.
+     */
+    text?: string;
+    /**
+     * Una etiqueta para accesibilidad (ARIA). Proporciona una descripción concisa para lectores de pantalla, especialmente útil si el botón solo contiene un icono.
+     */
+    "aria-label"?: string;
+    /**
+     * Indica la posición del hijo dentro del Join(Si el botón está dentro de un Join).
+     */
+    joinposition?: DropdownVariants["joinposition"];
+}
+
+declare type DropdownVariants = VariantProps<typeof dropdownVariants>;
+
+declare const dropdownVariants: (props?: ({
+    variant?: "soft" | "text" | "solid" | "subtle" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    disabled?: boolean | null | undefined;
+    joinposition?: "middle" | "first" | "last" | "single" | null | undefined;
+    menuPosition?: "above" | "below" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const FileUpload: default_2.ForwardRefExoticComponent<FileUploadProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "onChange" | "value" | "multiple" | "accept" | "required" | "aria-invalid" | "aria-describedby" | "aria-labelledby"> {
+    /**
+     * Determines the main appearance and interaction pattern of the component.
+     * - `dropzone`: Renders an area where users can drag and drop files.
+     * - `button`: Renders a button that opens the file selection dialog on click.
+     * @default 'dropzone'
+     */
+    type?: "dropzone" | "button";
+    /**
+     * Controls the visual size of the component, affecting the dropzone area
+     * or the dimensions of the button.
+     */
+    size?: FileUploadVariants["size"];
+    /**
+     * Disables the component, preventing file selection and drag-and-drop interactions.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that the component is in an invalid or error state.
+     * Commonly used to display error styling around the dropzone or button.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Allows selecting multiple files at once.
+     * When set to `false`, only a single file can be selected.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Specifies which file types can be selected (e.g., `"image/*"`, `".pdf"`, `"image/png,image/jpeg"`).
+     * Uses the standard HTML `accept` attribute format.
+     */
+    accept?: string;
+    /**
+     * Marks the file selection as required.
+     * This does not perform validation by itself, but can be used for styling
+     * or integrated with form libraries for validation logic.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Label text associated with the component.
+     * When provided, a `<label>` element will typically be rendered.
+     */
+    label?: string;
+    /**
+     * Error message displayed when `invalid` is true or when file selection fails validation.
+     * Usually shown below the component.
+     */
+    errorMessage?: string;
+    /**
+     * Secondary descriptive text shown below the component.
+     * Useful for instructions or validation hints.
+     */
+    helperText?: string;
+    /**
+     * Maximum allowed file size in bytes.
+     * Files that exceed this limit will be rejected and passed to `onFilesRejected`.
+     */
+    maxSize?: number;
+    /**
+     * Array of currently selected files.
+     * Each file is represented by a native `File` object.
+     */
+    files?: File[];
+    /**
+     * Callback fired when one or more files are selected via the file dialog
+     * or dropped into the dropzone area.
+     * Receives an array of selected `File` objects.
+     */
+    onChangeFiles?: (files: File[]) => void;
+    /**
+     * Callback fired when a draggable item enters the dropzone area.
+     * Receives the native drag event.
+     */
+    onDragOver?: (event: React.DragEvent<HTMLElement>) => void;
+    /**
+     * Callback fired when a draggable item leaves the dropzone area.
+     * Receives the native drag event.
+     */
+    onDragLeave?: (event: React.DragEvent<HTMLElement>) => void;
+    /**
+     * Callback fired when files are dropped into the dropzone area.
+     */
+    onDrop?: (event: React.DragEvent<HTMLElement>) => void;
+    /**
+     * Name attribute for the underlying native input element.
+     */
+    name?: string;
+    /**
+     * Callback fired when one or more selected files fail validation
+     * (e.g., unsupported file type or file size exceeds `maxSize`).
+     * Receives an array of rejected `File` objects.
+     */
+    onFilesRejected?: (files: File[]) => void;
+    /**
+     * Displays the file size next to each selected file.
+     * @default false
+     */
+    viewFileSize?: boolean;
+    /**
+     * Controls how selected files are displayed:
+     * - `list`: Shows files in a vertical list with name and size.
+     * - `thumbnail`: Shows files with preview thumbnails when available.
+     * @default 'list'
+     */
+    displayMode?: "list" | "thumbnail";
+}
+
+declare type FileUploadVariants = VariantProps<typeof fileUploadWrapper>;
+
+declare const fileUploadWrapper: (props?: ({
+    type?: "button" | "dropzone" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Flex: ForwardRefExoticComponent<FlexProps & RefAttributes<HTMLDivElement>>;
+
+declare interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    direction?: Direction;
+    justify?: JustifyContent | undefined;
+    align?: AlignItems | undefined;
+    gap?: Gap;
+    wrap?: Wrap;
+}
+
+declare type Gap = string | number;
+
+declare interface ICardActions {
+    /**
+     * Opcional: Un elemento React (como un icono) para mostrar como parte de la acción.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Opcional: El texto que se muestra como parte de la acción (por ejemplo, el texto de un botón de acción).
+     */
+    text?: string;
+    /**
+     * Opcional: La función que se llama cuando se activa esta acción (por ejemplo, al hacer clic en el área de la acción).
+     */
+    onClick?: () => void;
+}
+
+declare interface ICardHeader {
+    /**
+     * El título principal del encabezado de la tarjeta. Es un string de texto.
+     */
+    title: string;
+    /**
+     * Opcional: Un texto descriptivo o subtítulo para el encabezado.
+     */
+    description?: string;
+    /**
+     * Opcional: Un elemento React (como un icono) para mostrar en el encabezado.
+     */
+    icon?: React.ReactNode;
+}
+
+declare interface ICardImage {
+    /**
+     * La URL de la fuente de la imagen.
+     */
+    src: string;
+    /**
+     * Opcional: El texto alternativo para la imagen (recomendado para accesibilidad).
+     */
+    alt?: string;
+    /**
+     * Opcional: Un número que indica la altura de la imagen como porcentaje del ancho de la tarjeta.
+     * Esto puede usarse para controlar la relación de aspecto de la imagen.
+     */
+    heightPorcent?: number;
+}
+
+declare interface IListCollection {
+    /**
+     * The visible label for this option in the dropdown list.
+     */
+    label: string;
+    /**
+     * The unique value associated with this option.
+     * Used to identify the selected item.
+     */
+    value: string;
+    /**
+     * Optional: URL of an image or an element to display as an avatar next to the option label.
+     */
+    avatar?: string;
+    /**
+     * Optional: Additional descriptive text for this option.
+     */
+    description?: string;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+declare const input: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "underline" | "outline" | null | undefined;
+    type?: "search" | "text" | "email" | "password" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    invalid?: boolean | null | undefined;
+    hasElements?: "none" | "both" | "first" | "last" | null | undefined;
+    disabled?: boolean | null | undefined;
+    joinposition?: "middle" | "first" | "last" | "single" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const InputNumber: ForwardRefExoticComponent<InputNumberProps & RefAttributes<HTMLInputElement>>;
+
+declare const inputNumber: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    variant?: "soft" | "outline" | null | undefined;
+    typeNumber?: "default" | "decimal" | "currency-USD" | "currency-EUR" | "currency-GBP" | "percentage" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    joinposition?: "middle" | "first" | "last" | "single" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface InputNumberProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size" | "type" | "onChange" | "value" | "min" | "max" | "step" | "color"> {
+    /**
+     * Controls the visual style of the numeric input, such as border color or background.
+     */
+    variant?: InputNumberVariants["variant"];
+    /**
+     * Sets the visual size of the input, adjusting padding and text size.
+     */
+    size?: InputNumberVariants["size"];
+    /**
+     * Defines the border radius applied to the input.
+     */
+    radius?: InputNumberVariants["radius"];
+    /**
+     * Enables an error or invalid visual state, typically changing the border color to red.
+     */
+    invalid?: InputNumberVariants["invalid"];
+    /**
+     * Disables the input entirely, preventing interaction and applying a disabled appearance.
+     */
+    disabled?: InputNumberVariants["disabled"];
+    /**
+     * Sets the color of the input, typically changing the border color to red.
+     */
+    color?: InputNumberVariants["color"];
+    /**
+     * (Implementation-specific) Defines an internal subtype or variation of the numeric input component.
+     */
+    typeNumber?: InputNumberVariants["typeNumber"];
+    /**
+     * Specifies the minimum numeric value the user is allowed to enter.
+     */
+    min?: number;
+    /**
+     * Specifies the maximum numeric value the user is allowed to enter.
+     */
+    max?: number;
+    /**
+     * Determines the increment by which the value changes when using step controls
+     * (such as arrow buttons) or validating step multiples.
+     */
+    step?: number;
+    /**
+     * A visible text label that describes the purpose of the numeric input.
+     */
+    label?: string;
+    /**
+     * A message displayed below the input when it is marked as invalid (`invalid={true}`).
+     */
+    errorMessage?: string;
+    /**
+     * Additional text displayed below the input to provide guidance or context for the user.
+     */
+    helperText?: string;
+    /**
+     * Indicates that this field is required in order to submit a form.
+     * Visually, it may display an asterisk.
+     */
+    required?: boolean;
+    /**
+     * Sets the default numeric value for the input when it is initially rendered.
+     */
+    defaultValue?: number;
+    /**
+     * Function called whenever the numeric value is changed by the user.
+     * Receives the updated number.
+     */
+    onChangeValue?: (value: number) => void;
+    /**
+     * The current numeric value to be displayed in the input.
+     * When provided, the component becomes controlled by the parent.
+     */
+    value?: number;
+    /**
+     * Indicates the input's position when used inside a joined input group.
+     */
+    joinposition?: "first" | "last" | "middle";
+}
+
+declare type InputNumberVariants = VariantProps<typeof inputNumber>;
+
+declare interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size" | "type" | "value" | "placeholder" | "prefix" | "suffix" | "color"> {
+    /**
+     * Define el tamaño visual del input, ajustando el padding y el tamaño del texto.
+     */
+    size?: InputVariants["size"];
+    /**
+     * Define el radio de los bordes del input.
+     */
+    radius?: InputVariants["radius"];
+    /**
+     * Controla el estilo visual del input, como el color del borde o el fondo.
+     */
+    variant?: InputVariants["variant"];
+    /**
+     * Activa un estado visual de error o inválido para el input, típicamente cambiando el color del borde a rojo.
+     */
+    invalid?: InputVariants["invalid"];
+    /**
+     * Desactiva completamente el input, haciendo que no se pueda interactuar con él.
+     */
+    disabled?: InputVariants["disabled"];
+    /**
+     * Define el color del input, ajustando el color del borde y el fondo.
+     */
+    color?: InputVariants["color"];
+    /**
+     * Establece el tipo de entrada nativa subyacente (ej. 'text', 'password', 'email').
+     */
+    type?: InputVariants["type"];
+    /**
+     * Una etiqueta de texto asociada al input, que generalmente aparece sobre o junto a él.
+     */
+    label?: string;
+    /**
+     * Un mensaje de texto que se muestra debajo del input cuando está marcado como inválido (`invalid={true}`).
+     */
+    errorMessage?: string;
+    /**
+     * Habilita una animación donde la etiqueta (`label`) se mueve y reduce de tamaño cuando el input está enfocado o tiene valor.
+     */
+    floatingLabel?: boolean;
+    /**
+     * Texto adicional que se muestra debajo del input para proporcionar ayuda o contexto.
+     */
+    helperText?: string;
+    /**
+     * Indica que este campo debe ser llenado para que un formulario sea válido.
+     */
+    required?: boolean;
+    /**
+     * Un elemento React que se muestra antes del valor del input, como un icono o un botón.
+     */
+    prefix?: React.ReactNode | string | undefined;
+    /**
+     * Un elemento React que se muestra después del valor del input, como un icono o un botón.
+     */
+    suffix?: React.ReactNode | string | undefined;
+    /**
+     * Una función que se ejecuta cada vez que el texto en el input es modificado por el usuario. Recibe el valor actual del input como un string.
+     */
+    onChangeValue?: (value: string) => void;
+    /**
+     * El texto actual que debe mostrar el input. Al usar esta prop, controlas el valor desde el componente padre.
+     */
+    value?: string;
+    /**
+     * Texto que aparece dentro del input cuando está vacío y no tiene foco, sirviendo como pista para el usuario.
+     */
+    placeholder?: string;
+    /**
+     * Indica la posición del hijo dentro del Join(Si el input está dentro de un Join).
+     */
+    joinposition?: "first" | "last" | "middle";
+}
+
+declare type InputVariants = VariantProps<typeof input>;
+
+export declare const Join: default_2.ForwardRefExoticComponent<Omit<PropsWithChildren<JoinProps>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+declare const join: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    hasElements?: "none" | "both" | "first" | "last" | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface JoinProps extends VariantProps<typeof join>, RefAttributes<HTMLDivElement> {
+    errorMessage?: string;
+}
+
+declare type JustifyContent = "-moz-initial" | "center" | "end" | "flex-end" | "flex-start" | "inherit" | "initial" | "left" | "right" | "normal" | "revert" | "revert-layer" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | "unset";
+
+export declare const LambdaConfigProvider: FC<PropsWithChildren<ConfigProviderProps>>;
+
+declare type LightTheme = "light" | "retro" | "lavender" | "mint" | "sunset" | "ocean" | "sandstone" | "pop-art";
+
+export declare const Link: default_2.ForwardRefExoticComponent<LinkProps & default_2.RefAttributes<HTMLAnchorElement>>;
+
+declare const linkButtonProps: (props?: ({
+    justify?: "center" | "end" | "start" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type LinkButtonVariants = VariantProps<typeof linkButtonProps>;
+
+declare interface LinkProps extends Omit<default_2.AnchorHTMLAttributes<HTMLAnchorElement>, "disabled" | "label" | "color"> {
+    /**
+     * La URL a la que apunta el enlace. Requerida para la navegación del <a>.
+     */
+    href: string;
+    /**
+     * El tipo de Link determina su **apariencia visual**:
+     * 'default' para un enlace de texto normal, 'button' para apariencia de botón.
+     * @default 'default'
+     */
+    type?: LinkType;
+    /**
+     * Texto de la etiqueta del Link. Se puede usar en lugar de `children`.
+     * Si se proporcionan 'label' y 'children', 'label' tiene prioridad.
+     */
+    label?: string;
+    /**
+     * Opcional: Un elemento React (como un icono SVG) para mostrar dentro del Link.
+     * Su apariencia y posición se controlarán solo cuando `type` sea 'button'.
+     */
+    icon?: default_2.ReactNode | undefined | null;
+    /**
+     * Opcional: Mantiene un estilo caundo su valor esta activado.
+     * Su apariencia y posición se controlarán solo cuando `type` sea 'button'.
+     */
+    justify?: LinkButtonVariants["justify"];
+    /**
+     * Si es true, el Link se muestra en un estado deshabilitado.
+     * Visualmente afectará a ambos tipos. Se aplicará `pointer-events: none` y `aria-disabled="true"`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Atributo ARIA para proporcionar una etiqueta accesible cuando el contenido visual no es suficiente.
+     * Por ejemplo, si el link solo tiene un icono.
+     */
+    "aria-label"?: string;
+    variant?: ButtonVariants["variant"];
+    color?: ButtonVariants["color"];
+    size?: ButtonVariants["size"];
+    iconPosition?: ButtonVariants["iconPosition"];
+    radius?: ButtonVariants["radius"];
+    loading?: ButtonVariants["loading"];
+    onClick?: default_2.MouseEventHandler<HTMLAnchorElement>;
+}
+
+declare type LinkType = "default" | "button";
+
+export declare const NavigationMenu: default_2.ForwardRefExoticComponent<NavigationMenuProps & default_2.RefAttributes<HTMLElement>> & {
+    Item: default_2.ForwardRefExoticComponent<NavigationMenuItemProps & default_2.RefAttributes<HTMLDivElement>>;
+    Label: default_2.ForwardRefExoticComponent<NavigationMenuLabelProps & default_2.RefAttributes<HTMLDivElement>>;
+};
+
+export declare interface NavigationMenuData {
+    /**
+     * Unique identifier for the menu item.
+     */
+    id: string;
+    /**
+     * Text label to display for the item.
+     */
+    label: string;
+    /**
+     * Optional icon to display next to the label.
+     */
+    icon?: ReactNode;
+    /**
+     * Nested menu items (sub-menus).
+     */
+    children?: NavigationMenuData[];
+    /**
+     * If true, the item is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * URL path for navigation.
+     */
+    path?: string;
+    /**
+     * HTML target attribute for the link (e.g., "_blank").
+     */
+    target?: HTMLAttributeAnchorTarget;
+}
+
+declare interface NavigationMenuItemProps {
+    /**
+     * The data object representing this menu item.
+     */
+    node: NavigationMenuData;
+    /**
+     * The depth level of the item in the hierarchy (0-based).
+     */
+    level?: number;
+    /**
+     * If true, this is the first item in its group.
+     */
+    isFirst?: boolean;
+    /**
+     * If true, this is the last item in its group.
+     */
+    isLast?: boolean;
+    /**
+     * The current active path used for highlighting selected items.
+     */
+    currentPath?: string;
+    /**
+     * Callback function to handle navigation.
+     */
+    onNavigate?: (path: string) => void;
+}
+
+declare interface NavigationMenuLabelProps {
+    /**
+     * The data object for the menu item label.
+     */
+    node: NavigationMenuData;
+    /**
+     * If true, the item is currently selected.
+     */
+    selected?: boolean;
+    /**
+     * Click handler for the label.
+     */
+    onClick?: () => void;
+}
+
+declare interface NavigationMenuProps {
+    /**
+     * Array of menu items to render.
+     */
+    data: NavigationMenuData[];
+    /**
+     * Array of item IDs that should be expanded by default.
+     */
+    defaultExpanded?: string[];
+    /**
+     * Controls the size of the menu items.
+     * @default "medium"
+     */
+    size?: NavigationMenuVariants["size"];
+    /**
+     * Callback fired when a node is selected.
+     */
+    onNodeSelect?: (id: string) => void;
+    /**
+     * Custom renderer for the menu item label.
+     */
+    renderLabel?: (node: NavigationMenuData) => ReactNode;
+    /**
+     * Controls how selected menu items scroll into view within their container.
+     * - `"center"`: Centers the item (may affect parent scroll containers like body)
+     * - `"nearest"`: Minimal scroll, only if item is out of view (recommended for nested menus)
+     * - `"start"`: Aligns item to the top of the container
+     * - `"end"`: Aligns item to the bottom of the container
+     *
+     * @default "center"
+     */
+    scrollBehavior?: ScrollLogicalPosition;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * If true, displays connecting lines between parent and child items.
+     * @default false
+     */
+    showLines?: boolean;
+    /**
+     * Style of the connecting lines (if shown).
+     * @default "solid"
+     */
+    styleLines?: NavigationMenuVariants["styleLines"];
+    /**
+     * If true, keeps all menu items expanded by default.
+     * @default false
+     */
+    alwaysOpen?: boolean;
+    /**
+     * Visual style for the selected item.
+     * @default "highlight"
+     */
+    selectedStyle?: NavigationMenuVariants["selectedStyle"];
+    /**
+     * The current active path for highlighting.
+     */
+    currentPath: string;
+}
+
+declare type NavigationMenuVariants = VariantProps<typeof navigationMenuVariants>;
+
+declare const navigationMenuVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    showLines?: boolean | null | undefined;
+    styleLines?: "dashed" | "dotted" | "solid" | null | undefined;
+    selectedStyle?: "border" | "highlight" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare const Notification_2: ForwardRefExoticComponent<NotificationProps & RefAttributes<HTMLDivElement>>;
+export { Notification_2 as Notification }
+
+declare type NotificationContextType = {
+    showNotification: (props: Omit<NotificationProps, "id">) => void;
+};
+
+declare interface NotificationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size"> {
+    /**
+     * Define el tipo semántico de la notificación (por ejemplo, 'info', 'success', 'warning', 'error').
+     * Esto suele afectar el color del icono y del borde/fondo de la notificación. .
+     */
+    notificationType?: NotificationVariants["notificationType"];
+    /**
+     * Define la posición en la pantalla donde aparecerá la notificación .
+     */
+    placement?: NotificationVariants["placement"];
+    /**
+     * Define la variante visual general de la notificación .
+     */
+    variant?: NotificationVariants["variant"];
+    /**
+     * Define el radio de los bordes del input.
+     */
+    radius?: NotificationVariants["radius"];
+    /**
+     * El título principal de la notificación.
+     */
+    title?: string;
+    /**
+     * El mensaje o contenido principal de la notificación.
+     */
+    message?: string;
+    /**
+     * Opcional: Un elemento React para usar como icono principal de la notificación.
+     * Si no se proporciona, se puede usar un icono por defecto basado en `notificationType`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Indica si el usuario puede cerrar la notificación manualmente (por ejemplo, haciendo clic en un botón de cerrar).
+     * @default true (o el valor que se defina en el componente)
+     */
+    closable?: boolean;
+    /**
+     * La duración en milisegundos que la notificación permanecerá visible antes de cerrarse automáticamente.
+     * Si es 0 o indefinido, la notificación no se cerrará automáticamente.
+     */
+    duration?: number;
+    /**
+     * Callback que se dispara cuando la notificación se cierra, ya sea manualmente por el usuario o automáticamente después de `duration`.
+     */
+    onClose?: () => void;
+    /**
+     * Callback que se dispara cuando el usuario activa la acción de confirmación.
+     * La presencia de este handler suele indicar que la notificación tiene botones de acción.
+     */
+    onConfirm?: () => void;
+    /**
+     * Callback que se dispara cuando el usuario activa la acción de cancelación.
+     * La presencia de este handler suele indicar que la notificación tiene botones de acción.
+     */
+    onCancel?: () => void;
+    /**
+     * El texto que se muestra en el botón o enlace de cancelación.
+     * Relevante cuando se usa `onCancel`.
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * El texto que se muestra en el botón o enlace de confirmación.
+     * Relevante cuando se usa `onConfirm`.
+     * @default 'Confirm'
+     */
+    confirmText?: string;
+    /**
+     * Una etiqueta para accesibilidad (ARIA). Proporciona una descripción concisa para lectores de pantalla.
+     */
+    "aria-label"?: string;
+}
+
+export declare const NotificationProvider: ({ children, maxNotifications, placement: defaultPlacement, duration: defaultDuration }: {
+    children?: ReactNode;
+    maxNotifications?: number;
+    placement?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    duration?: number;
+}) => JSX.Element;
+
+declare type NotificationVariants = VariantProps<typeof notificationVariants>;
+
+declare const notificationVariants: (props?: ({
+    notificationType?: "neutral" | "danger" | "success" | "warning" | "info" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "solid" | "themed" | "darkened" | "lightened" | null | undefined;
+    placement?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Pagination: default_2.ForwardRefExoticComponent<PaginationProps & default_2.RefAttributes<HTMLElement>>;
+
+declare const paginationButton: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | "bordered" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    isActive?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    isNavigation?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * La página actual activa.
+     */
+    currentPage: number;
+    /**
+     * El número total de páginas.
+     */
+    totalPages: number;
+    /**
+     * Callback que se llama cuando el usuario cambia de página.
+     * @param pageNumber El número de la nueva página seleccionada.
+     */
+    onPageChange: (pageNumber: number) => void;
+    /**
+     * Número máximo de botones de página visibles (excluyendo los botones de primera/última página y '...').
+     * Si el total de páginas es menor o igual a este número, se muestran todas las páginas.
+     * Por defecto es 5.
+     */
+    maxVisiblePages?: number;
+    /**
+     * Mostrar botones para ir a la primera y última página.
+     * Por defecto es true.
+     */
+    showFirstLastButtons?: boolean;
+    /**
+     * Mostrar botones para ir a la página anterior y siguiente.
+     * Por defecto es true.
+     */
+    showPrevNextButtons?: boolean;
+    /**
+     * Deshabilitar toda la paginación.
+     * Por defecto es false.
+     */
+    disabled?: boolean;
+    /**
+     * Tamaño de los botones de paginación.
+     * @default "medium"
+     */
+    size?: PaginationVariants["size"];
+    /**
+     * Radio de los botones de paginación.
+     * @default "small"
+     */
+    radius?: PaginationVariants["radius"];
+    /**
+     * Variante visual de los botones de paginación.
+     * @default "outline"
+     */
+    variant?: PaginationVariants["variant"];
+    /**
+     * Etiqueta ARIA para la navegación de paginación.
+     * Por defecto es "Navegación de página".
+     */
+    ariaLabel?: string;
+}
+
+declare type PaginationVariants = VariantProps<typeof paginationButton>;
+
+declare const pos_label: (props?: ({
+    position_label?: "left" | "right" | "bottom" | "top" | null | undefined;
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Progress: default_2.ForwardRefExoticComponent<ProgressProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "color"> {
+    /**
+     * Valor del progreso (0-100).
+     */
+    value: number;
+    /**
+     * Si es true, muestra el progreso como indeterminado (animación infinita).
+     */
+    indeterminate?: boolean;
+    /**
+     * Tamaño del progreso
+     */
+    size?: ProgressVariants["size"];
+    /**
+     * Color del progreso
+     */
+    color?: ProgressVariants["color"];
+    /**
+     * Variant del progreso
+     */
+    variant?: ProgressVariants["variant"];
+    /**
+     * Clases adicionales
+     */
+    className?: string;
+    /**
+     * Etiqueta del progreso
+     */
+    label?: string;
+    /**
+     * Mostrar valor del progreso
+     */
+    showValue?: boolean;
+}
+
+declare type ProgressVariants = VariantProps<typeof progressVariants>;
+
+declare const progressVariants: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "bar" | "circle" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Radio: default_2.ForwardRefExoticComponent<RadioProps & default_2.RefAttributes<HTMLInputElement>> & {
+    Button: default_2.ForwardRefExoticComponent<RadioProps & {
+        icon?: ReactNode;
+    } & default_2.RefAttributes<HTMLInputElement>>;
+    Card: default_2.ForwardRefExoticComponent<RadioProps & {
+        title?: string;
+        subtitle?: string;
+        body?: default_2.ReactElement;
+        showRadio?: boolean;
+        color?: RadioGroupVariants["color"];
+    } & default_2.RefAttributes<HTMLInputElement>>;
+};
+
+export declare const RadioGroup: FC<PropsWithChildren<RadioGroupProps>>;
+
+export declare interface RadioGroupProps {
+    /**
+     * 	Defines the layout direction of the radio buttons within the group (e.g., 'horizontal' or 'vertical').
+     */
+    orientation?: RadioGroupVariants["orientation"];
+    /**
+     * Controls the overall size of the radio group and its influence on individual radio buttons.
+     */
+    size?: RadioGroupVariants["size"];
+    /**
+     * Sets the border radius for the group, typically affecting the visual container or the radios themselves.
+     */
+    radius?: RadioGroupVariants["radius"];
+    /**
+     * Establishes the color scheme for all contained radio buttons.
+     */
+    color?: RadioGroupVariants["color"];
+    /**
+     * Controls the general visual style or aesthetic of the radio group (e.g., 'solid', 'outline').
+     */
+    variant?: RadioGroupVariants["variant"];
+    /**
+     * Controls the visibility of the radio input circle/dot itself.
+     * @default false
+     */
+    hideRadio?: boolean;
+    /**
+     * If set to true, disables all individual radio buttons within this group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The HTML `name` attribute applied to all radio buttons. Essential for grouping and ensuring only one option can be selected at a time.
+     */
+    name?: string;
+    /**
+     * The currently selected radio button's `value` (for use as a controlled component).
+     */
+    selectedOption?: string;
+    /**
+     * Callback function executed when the user selects a different radio button. Receives the `value` of the newly selected radio.
+     */
+    onChangeOption?: (value: string) => void;
+    /**
+     * The initial selected `value` when the component is first mounted (for use as an uncontrolled component).
+     */
+    defaultValue?: string;
+    /**
+     * Defines the spacing (margin) between individual radio buttons inside the group, using a valid CSS value (e.g., '8px', '1rem').
+     */
+    gap?: string;
+    /**
+     * The individual radio buttons (`<Radio />`) passed as children to the group.
+     */
+    children: React.ReactNode;
+}
+
+declare const RadioGroups: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    type?: "button" | "radio" | "card" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type RadioGroupVariants = VariantProps<typeof RadioGroups>;
+
+declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "checked" | "color" | "type" | "value"> {
+    /**
+     * Controls the placement of the text label (`label`) relative to the radio control (e.g., 'left' or 'right').
+     */
+    positionLabel?: RadioVariants["positionLabel"];
+    /**
+     * Disables this specific radio button, preventing user interaction.
+     */
+    disabled?: RadioVariants["disabled"];
+    /**
+     * The descriptive text displayed next to the radio control, semantically associated with it.
+     */
+    label?: string;
+    /**
+     * The unique value associated with this specific radio option. This value is used by the parent RadioGroup to determine selection.
+     * Note: The `checked` state is managed externally by the `RadioGroup` based on this value.
+     */
+    value: string | number | ReadonlyArray<string>;
+}
+
+declare type RadioVariants = VariantProps<typeof wrapper>;
+
+export declare const Rating: ForwardRefExoticComponent<RatingProps & RefAttributes<HTMLDivElement>>;
+
+declare interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, "size" | "disabled" | "checked" | "color" | "onChange"> {
+    /**
+     * Controla el tamaño visual del control de calificación.
+     * @default "medium"
+     */
+    size?: RatingVariants["size"];
+    /**
+     * Define el estilo visual del control de calificación.
+     * @default "solid"
+     */
+    variant?: RatingVariants["variant"];
+    /**
+     * Define el color del control de calificación.
+     * @default "default"
+     */
+    color?: RatingVariants["color"];
+    /**
+     * Define el valor actual del control de calificación.
+     * @default 0
+     */
+    value?: number;
+    /**
+     *Función que se ejecuta cuando el valor del control de calificación cambia.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Define el icono personalizado.
+     */
+    customIcon?: React.ReactNode[];
+    /**
+     * Define el texto personalizado, para cada nivel de calificación.
+     */
+    text?: string[];
+    /**
+     * Define la posición del texto personalizado.
+     * @default "right"
+     */
+    textPosition?: "top" | "bottom" | "right";
+}
+
+declare type RatingVariants = VariantProps<typeof ratingVariants>;
+
+declare const ratingVariants: (props?: ({
+    variant?: "solid" | "outline" | "bordered" | null | undefined;
+    color?: "default" | "primary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    type?: "string" | "icon" | "custom" | null | undefined;
+    textPosition?: "right" | "bottom" | "top" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface ScriptProps extends React_2.DetailedHTMLProps<React_2.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
+    [dataAttribute: DataAttribute]: any;
+}
+
+export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const selectContainerVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "underline" | "outline" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "size" | "disabled" | "value" | "onChange" | "placeholder" | "required" | "multiple" | "name" | "color"> {
+    /**
+     * Controls the size of the select component, affecting its padding and font size.
+     */
+    size?: SelectVariants["size"];
+    /**
+     * Controls the border radius applied to the select trigger.
+     */
+    radius?: SelectVariants["radius"];
+    /**
+     * Visual styling variant of the select component.
+     */
+    variant?: SelectVariants["variant"];
+    /**
+     * Controls the color theme of the select component.
+     */
+    color?: SelectVariants["color"];
+    /**
+     * Disables the select component, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the select is in an invalid validation state.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Optional text label associated with the select control.
+     */
+    label?: string;
+    /**
+     * Array of option objects available for selection.
+     * Must follow the `IListCollection` structure.
+     */
+    options: IListCollection[];
+    /**
+     * Placeholder text displayed when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Error message shown when `invalid` is true.
+     * Typically displayed below the select.
+     */
+    errorMessage?: string;
+    /**
+     * Optional helper text displayed below the select.
+     */
+    helperText?: string;
+    /**
+     * Indicates whether selecting a value is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The currently selected value (for controlled usage).
+     */
+    value?: string;
+    /**
+     * Initial value for uncontrolled usage.
+     * Ignored when `value` is provided.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the user selects a new option.
+     * Receives the `value` of the selected option, or `undefined`
+     * when the selection is cleared (native behavior).
+     */
+    onChange?: (value: string | undefined) => void;
+    /**
+     * The `name` attribute for the underlying native `<select>` element.
+     * Useful for form serialization.
+     */
+    name?: string;
+    /**
+     * Indicates the select’s position inside a Join group (if used within one).
+     */
+    joinposition?: "first" | "last" | "middle";
+}
+
+declare type SelectVariants = VariantProps<typeof selectContainerVariants>;
+
+export declare const Skeleton: default_2.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
+declare type SkeletonAnimationType = "fade" | "wave";
+
+declare interface SkeletonProps extends HTMLMotionProps<"div"> {
+    /**
+     * Forma del skeleton: rectángulo o círculo
+     */
+    shape?: SkeletonShape;
+    /**
+     * Si es true y shape es rect, el skeleton tendrá bordes redondeados
+     */
+    rounded?: boolean;
+    /**
+     * Ancho del skeleton (puede ser string o número)
+     */
+    width?: string | number;
+    /**
+     * Alto del skeleton (puede ser string o número)
+     */
+    height?: string | number;
+    /**
+     * Tipo de animación: 'fade' (por defecto) o 'wave' (CSS)
+     */
+    animationType?: SkeletonAnimationType;
+}
+
+declare type SkeletonShape = "rect" | "circle";
+
+export declare const Slider: default_2.ForwardRefExoticComponent<SliderSingleProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Range: default_2.ForwardRefExoticComponent<SliderRangeProps & default_2.RefAttributes<HTMLDivElement>>;
+};
+
+declare type SliderMarks = {
+    value: number;
+    label?: string | number;
+};
+
+declare interface SliderRangeProps extends BaseSliderProps {
+    /**
+     * The default value of the slider.
+     */
+    defaultValue?: [number, number];
+    /**
+     * The current value range represented as [start, end].
+     */
+    value?: [number, number];
+    /**
+     * Callback fired when the selected range changes.
+     */
+    onChangeValue?: (value: [number, number]) => void;
+}
+
+declare interface SliderSingleProps extends BaseSliderProps {
+    /**
+     * The default value of the slider.
+     */
+    defaultValue?: number;
+    /**
+     * The current value of the slider.
+     */
+    value?: number;
+    /**
+     * Callback fired when the slider value changes.
+     */
+    onChangeValue?: (value: number) => void;
+}
+
+declare type SliderSize = SliderTrackVariants["size"];
+
+declare const sliderTrack: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    viewBar?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type SliderTrackVariants = VariantProps<typeof sliderTrack>;
+
+declare interface SortConfig {
+    key: string | null;
+    direction: "asc" | "desc";
+    type?: "string" | "number" | "date" | "boolean";
+}
+
+export declare const Splitter: default_2.ForwardRefExoticComponent<SplitterProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare type SplitterDirection = "horizontal" | "vertical";
+
+declare interface SplitterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Dirección del splitter (horizontal=columnas, vertical=filas)
+     */
+    direction?: SplitterDirection;
+    /**
+     * Mínimo tamaño del primer panel (px)
+     */
+    /**
+     * Mínimo tamaño del primer panel (px o porcentaje, ej: 100 o "30%")
+     */
+    min?: number | string;
+    /**
+     * Máximo tamaño del primer panel (px o porcentaje, ej: 600 o "70%")
+     */
+    max?: number | string;
+    /**
+     * Tamaño inicial del primer panel (px o porcentaje, ej: 200 o "50%")
+     */
+    initial?: number | string;
+    /**
+     * Clases adicionales
+     */
+    className?: string;
+    /**
+     * Los hijos deben ser dos elementos (los paneles)
+     */
+    children: React.ReactNode[] | React.ReactNode;
+}
+
+declare interface StepContentProps {
+    /** The index of the step this content belongs to */
+    index?: number;
+    /** The content to be rendered */
+    children: ReactNode;
+    /** Whether validation should be performed for this step */
+    validate?: boolean;
+    /** Whether the step content is currently valid */
+    isValid?: boolean;
+    /** Error message to display if validation fails */
+    errorMessage?: string;
+}
+
+export declare const Stepper: default_2.FC<StepperProps> & {
+    Step: default_2.FC<StepProps>;
+    Content: default_2.FC<StepContentProps>;
+    CompletedContent: default_2.FC<StepContentProps>;
+};
+
+declare interface StepperProps {
+    /** Array of step objects defining the stepper structure */
+    steps: StepperStep[];
+    /** The index of the step that is active by default (0-indexed) */
+    defaultActiveStep?: number;
+    /** The orientation of the stepper */
+    orientation?: StepperVariants["orientation"];
+    /** Callback function triggered when a step is completed */
+    onStepCompleted?: (stepIndex: number) => void;
+    /** Additional CSS class names for the container */
+    className?: string;
+    /** Inline CSS styles for the container */
+    style?: CSSProperties;
+    /** Visual variant of the stepper */
+    variant?: StepperVariants["variant"];
+    /** Optional children elements */
+    children?: ReactNode;
+}
+
+declare interface StepperStep {
+    /** Unique identifier for the step */
+    id?: string | number;
+    /** The title of the step */
+    title: ReactNode;
+    /** Optional description or subtitle for the step */
+    description?: ReactNode;
+    /** Optional icon to display in the step indicator */
+    icon?: ReactNode;
+    /** The current status of the step */
+    status?: StepperVariants["status"];
+    /** The content to be rendered when this step is active */
+    content?: ReactNode;
+}
+
+declare type StepperVariants = VariantProps<typeof stepperVariants>;
+
+declare const stepperVariants: (props?: ({
+    status?: "active" | "error" | "pending" | "completed" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "soft" | "bordered" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface StepProps extends StepperStep {
+    /** The index of the step within the stepper */
+    index: number;
+}
+
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
+
+declare type SwitchLabelVariants = VariantProps<typeof pos_label>;
+
+declare const switchprop: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    shape?: "default" | "square" | "subtle" | "rounded" | null | undefined;
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "checked" | "color"> {
+    /**
+     * Callback simple que se ejecuta cada vez que el estado del switch cambia (de activado a desactivado o viceversa).
+     * Recibe el nuevo valor booleano.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Controla el tamaño visual del control de interruptor.
+     */
+    size?: SwitchVariants["size"];
+    /**
+     * Define el estilo visual del interruptor, como la apariencia del carril y el pulgar.
+     */
+    variant?: SwitchVariants["variant"];
+    /**
+     * Establece el esquema de color para el interruptor, típicamente afectando el color cuando está activado.
+     */
+    color?: SwitchVariants["color"];
+    /**
+     * Define la forma del interruptor (por ejemplo, con extremos redondeados o cuadrados).
+     */
+    shape?: SwitchVariants["shape"];
+    /**
+     * Controla dónde se coloca la etiqueta de texto (`label`) en relación con el control del interruptor (por ejemplo, a la izquierda o a la derecha).
+     */
+    positionLabel?: SwitchLabelVariants["position_label"];
+    /**
+     * Deshabilita el interruptor, impidiendo que el usuario cambie su estado y cambiando su apariencia para indicar que no está disponible.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * El texto que se muestra junto al control del interruptor, asociado semánticamente a él.
+     */
+    label?: string;
+    /**
+     * Controla si el interruptor está activado (`true`) o desactivado (`false`).
+     * Usar esta prop hace que el componente sea controlado.
+     * @default false (o el valor por defecto del input nativo)
+     */
+    checked?: boolean;
+}
+
+export declare const SwitchTheme: default_2.FC<SwitchThemeProps>;
+
+declare interface SwitchThemeProps {
+    variant?: "solid" | "soft" | "subtle" | "text";
+    size?: "tiny" | "small" | "medium" | "large";
+    radius?: "default" | "tiny" | "small" | "medium" | "large";
+    showLabel?: boolean;
+}
+
+declare type SwitchVariants = VariantProps<typeof switchprop>;
+
+declare interface TabItemProps {
+    title: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+
+export declare const Table: (<T>({ size, variant, highlightOnHover, children, data, pagination, onSortColumn, ...props }: {
+    children: ReactNode;
+    data: T[];
+    onSortColumn?: (column: string, direction: "asc" | "desc", type: SortConfig["type"]) => void;
+    highlightOnHover?: boolean;
+    pagination?: {
+        page?: number;
+        totalPages?: number;
+        rowsPerPage?: number;
+        totalRows?: number;
+        onPageChange?: (page: number) => void;
+    };
+} & HTMLAttributes<HTMLTableElement> & {
+    size?: "tiny" | "small" | "medium" | "large";
+    variant?: "soft" | "underlined" | "bordered" | "striped" | null | undefined;
+}) => JSX.Element) & {
+    Header: ({ children, ...props }: HTMLAttributes<HTMLTableSectionElement> & {
+        children: ReactNode;
+    }) => JSX.Element;
+    ColumnHeader: ({ children, sortKey, type, width, isSortable, ...props }: HTMLAttributes<HTMLTableCellElement> & {
+        children: ReactNode;
+        sortKey: string;
+        type?: "string" | "number" | "date" | "boolean";
+        width?: string;
+        isSortable?: boolean;
+    }) => JSX.Element;
+    Body: ({ children, ...props }: HTMLAttributes<HTMLTableSectionElement> & {
+        children: ReactNode;
+    }) => JSX.Element;
+    Row: ({ children, ...props }: HTMLAttributes<HTMLTableRowElement> & {
+        children: ReactNode;
+    }) => JSX.Element;
+    Cell: ({ children, align, ...props }: HTMLAttributes<HTMLTableCellElement> & {
+        children: ReactNode;
+        align?: "left" | "center" | "right";
+    }) => JSX.Element;
+};
+
+declare interface TabProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "color" | "value" | "FormEvent"> {
+    variant?: TabVariants["variant"];
+    size?: TabVariants["size"];
+    color?: TabVariants["color"];
+    radius?: TabVariants["radius"];
+    disabled?: boolean;
+    value?: number;
+    onChange?: (value: number) => void;
+    children?: React.ReactNode;
+}
+
+export declare const Tabs: default_2.ForwardRefExoticComponent<TabProps & default_2.RefAttributes<HTMLDivElement>> & {
+    List: {
+        ({ children }: {
+            children: ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Tab: ({ title, icon, disabled, index, labelRef, }: TabItemProps & {
+        index?: number;
+        labelRef?: (el: HTMLLabelElement | null) => void;
+    }) => JSX.Element;
+    Panels: ({ children }: {
+        children: ReactNode;
+    }) => JSX.Element;
+    Panel: ({ children }: {
+        children?: ReactNode;
+    }) => JSX.Element;
+};
+
+declare type TabVariants = VariantProps<typeof tabWrapper>;
+
+declare const tabWrapper: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "underline" | "border" | "box" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Tag: ForwardRefExoticComponent<TagProps & RefAttributes<HTMLDivElement>>;
+
+declare interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "disabled" | "checked" | "color"> {
+    /**
+     * Define el estilo visual del tag, como la apariencia del carril y el pulgar.
+     */
+    variant?: TagVariants["variant"];
+    /**
+     * Controla el tamaño visual del tag.
+     */
+    size?: TagVariants["size"];
+    /**
+     * Controla el radio visual del tag.
+     */
+    radius?: TagVariants["radius"];
+    /**
+     * Establece el esquema de color para el tag, típicamente afectando el color cuando está activado.
+     */
+    color?: TagVariants["color"];
+    /**
+     * Define el texto que se muestra en el tag.
+     */
+    text?: string;
+    /**
+     * Define el icono que se muestra en el tag.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Define la funcionalidad de cierre del tag, si no se define no se muestra (no se muestra el icono de cierre).
+     */
+    onClose?: () => void;
+}
+
+declare type TagVariants = VariantProps<typeof tagVariants> & VariantProps<typeof countVariants>;
+
+declare const tagVariants: (props?: ({
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "dashed" | "solid" | "outline" | "subtle" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
+
+declare interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled" | "aria-invalid" | "aria-describedby" | "aria-labelledby" | "onFocus" | "onBlur"> {
+    /**
+     * Define la variante visual del área de texto.
+     */
+    variant?: TextAreaVariants["variant"];
+    /**
+     * Define el tamaño del área de texto, afectando el padding y el tamaño de fuente.
+     */
+    size?: TextAreaVariants["size"];
+    /**
+     * Define el radio del área de texto, afectando el radio de los bordes.
+     */
+    radius?: TextAreaVariants["radius"];
+    /**
+     * Indica si el área de texto está en un estado de validación inválido.
+     * Esto suele usarse para mostrar estilos de error.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Deshabilita el área de texto, impidiendo la interacción del usuario.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indica si el área de texto es obligatoria para completar un formulario.
+     * No añade validación por sí solo, pero puede usarse para estilos o lógica.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Etiqueta de texto asociada al área de texto.
+     * Si se proporciona, se renderizará típicamente un elemento `<label>` vinculado al área de texto.
+     */
+    label?: string;
+    /**
+     * Mensaje de error que se muestra cuando `invalid` es true.
+     * Este texto suele aparecer debajo del área de texto.
+     */
+    errorMessage?: string;
+    /**
+     * Texto de ayuda o descripción adicional que se muestra debajo del área de texto.
+     */
+    helperText?: string;
+    /**
+     * Callback que se dispara cuando el área de texto recibe el foco.
+     * Recibe el evento de foco nativo.
+     */
+    onFocus?: (e: FocusEvent_2<HTMLTextAreaElement>) => void;
+    /**
+     * Callback que se dispara cuando el área de texto pierde el foco.
+     * Recibe el evento de foco nativo.
+     */
+    onBlur?: (e: FocusEvent_2<HTMLTextAreaElement>) => void;
+}
+
+declare type TextAreaVariants = VariantProps<typeof textareaVariants>;
+
+declare const textareaVariants: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    variant?: "soft" | "outline" | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const ThemeProvider: (props: ThemeProviderProps) => JSX.Element;
+
+declare interface ThemeProviderProps extends React_2.PropsWithChildren<unknown> {
+    /** Light theme name */
+    lightTheme?: LightTheme;
+    /** Dark theme name */
+    darkTheme?: DarkTheme;
+    /** List of all available theme names */
+    themes?: AllThemes[] | undefined;
+    /** Forced theme name for the current page */
+    forcedTheme?: AllThemes | undefined;
+    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    enableSystem?: boolean | undefined;
+    /** Disable all CSS transitions when switching themes */
+    disableTransitionOnChange?: boolean | undefined;
+    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    enableColorScheme?: boolean | undefined;
+    /** Key used to store theme setting in localStorage */
+    storageKey?: string | undefined;
+    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+    defaultTheme?: AllThemes | undefined;
+    /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+    attribute?: Attribute | Attribute[] | undefined;
+    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    value?: ValueObject | undefined;
+    /** Nonce string to pass to the inline script and style elements for CSP headers */
+    nonce?: string;
+    /** Props to pass the inline script */
+    scriptProps?: ScriptProps;
+}
+
+export declare const ThemeScript: React_2.MemoExoticComponent<({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce, scriptProps, lightThemes, darkThemes, }: Omit<ThemeProviderProps, "children"> & {
+    defaultTheme: string;
+    lightThemes?: string[];
+    darkThemes?: string[];
+}) => JSX.Element>;
+
+export declare const Tooltip: default_2.ForwardRefExoticComponent<TooltipProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const tooltipContainer: (props?: ({
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-center" | "right-center" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type TooltipContainerVariants = VariantProps<typeof tooltipContainer>;
+
+declare type TooltipPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-center" | "right-center";
+
+declare interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "disabled" | "content" | "color"> {
+    /**
+     * El contenido a mostrar dentro del tooltip.
+     */
+    content: default_2.ReactNode;
+    /**
+     * El elemento sobre el cual se activará el tooltip.
+     * Debe ser un elemento React válido (ej: <button>, <span>, <div>).
+     */
+    children: default_2.ReactElement;
+    /**
+     * La posición del tooltip relativa al componente hijo.
+     * @default 'top-center'
+     */
+    position?: TooltipPosition;
+    /**
+     * Retraso en milisegundos antes de mostrar el tooltip al hacer hover o focus.
+     * @default 0
+     */
+    delayShow?: number;
+    /**
+     * Retraso en milisegundos antes de ocultar el tooltip al quitar hover o blur.
+     * @default 0
+     */
+    delayHide?: number;
+    /**
+     * Distancia en píxeles entre el tooltip y el componente hijo.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Variante visual del tooltip.
+     * @default 'default'
+     */
+    color?: TooltipContainerVariants["color"];
+    /**
+     * Variante visual del tooltip.
+     * @default 'default'
+     */
+    radius?: TooltipContainerVariants["radius"];
+    /**
+     * Deshabilitar el tooltip.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Etiqueta ARIA adicional para el tooltip si el contenido no es suficiente.
+     * Usado para aria-label en el elemento del tooltip si content es solo iconografía,
+     * o para aria-describedby si el ID no se genera o proporciona.
+     */
+    ariaLabel?: string;
+    /**
+     * ID para el elemento del tooltip (para vincularlo con aria-describedby).
+     * Si no se proporciona, se genera un ID único.
+     */
+    id?: string;
+}
+
+declare const translations: {
+    en: {
+        "file-upload": {
+            "drop-zone-placeholder": string;
+            "max-size": string;
+            "button-text-single": string;
+            "button-text-multiple": string;
+            "file-empty-single": string;
+            "files-empty-multiple": string;
+            "file-selected-single": string;
+            "files-selected-multiple": string;
+            "max-size-error-single": string;
+            "max-size-error-multiple": string;
+            "type-error-single": string;
+            "type-error-multiple": string;
+        };
+        table: {
+            rows: string;
+            page: string;
+        };
+        "color-picker": {
+            copy: string;
+            "copy-success": string;
+            "eye-dropper": string;
+            format: string;
+        };
+        rating: {
+            text: string;
+        };
+        "date-picker": {
+            code: string;
+            header: string;
+            placeholder: string;
+            "prev-month": string;
+            "next-month": string;
+            "prev-year": string;
+            "next-year": string;
+            today: string;
+            days: string;
+            months: string;
+            cancel: string;
+            confirm: string;
+            reset: string;
+        };
+        stepper: {
+            next: string;
+            previous: string;
+            finish: string;
+        };
+    };
+    es: {
+        "file-upload": {
+            "drop-zone-placeholder": string;
+            "max-size": string;
+            "button-text-single": string;
+            "button-text-multiple": string;
+            "file-empty-single": string;
+            "files-empty-multiple": string;
+            "file-selected-single": string;
+            "files-selected-multiple": string;
+            "max-size-error-single": string;
+            "max-size-error-multiple": string;
+            "type-error-single": string;
+            "type-error-multiple": string;
+        };
+        table: {
+            rows: string;
+            page: string;
+        };
+        "color-picker": {
+            copy: string;
+            "copy-success": string;
+            "eye-dropper": string;
+            format: string;
+        };
+        rating: {
+            text: string;
+        };
+        "date-picker": {
+            code: string;
+            header: string;
+            placeholder: string;
+            "prev-month": string;
+            "next-month": string;
+            "prev-year": string;
+            "next-year": string;
+            today: string;
+            days: string;
+            months: string;
+            cancel: string;
+            confirm: string;
+            reset: string;
+        };
+        stepper: {
+            next: string;
+            previous: string;
+            finish: string;
+        };
+    };
+    fr: {
+        "file-upload": {
+            "drop-zone-placeholder": string;
+            "max-size": string;
+            "button-text-single": string;
+            "button-text-multiple": string;
+            "file-empty-single": string;
+            "files-empty-multiple": string;
+            "file-selected-single": string;
+            "files-selected-multiple": string;
+            "max-size-error-single": string;
+            "max-size-error-multiple": string;
+            "type-error-single": string;
+            "type-error-multiple": string;
+        };
+        table: {
+            rows: string;
+            page: string;
+        };
+        "color-picker": {
+            copy: string;
+            "copy-success": string;
+            "eye-dropper": string;
+            format: string;
+        };
+        rating: {
+            text: string;
+        };
+        "date-picker": {
+            code: string;
+            header: string;
+            placeholder: string;
+            "prev-month": string;
+            "next-month": string;
+            "prev-year": string;
+            "next-year": string;
+            today: string;
+            days: string;
+            months: string;
+            cancel: string;
+            confirm: string;
+            reset: string;
+        };
+        stepper: {
+            next: string;
+            previous: string;
+            finish: string;
+        };
+    };
+};
+
+declare interface TreeNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Label to display for the node */
+    label: string;
+    /** Optional icon to display next to the label */
+    icon?: ReactNode;
+    /** Array of child nodes */
+    children?: TreeNode[];
+    /** Whether the node is disabled */
+    disabled?: boolean;
+}
+
+export declare const TreeView: default_2.ForwardRefExoticComponent<TreeViewProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Item: default_2.ForwardRefExoticComponent<TreeViewItemProps & default_2.RefAttributes<HTMLDivElement>>;
+    Label: default_2.ForwardRefExoticComponent<TreeViewLabelProps & default_2.RefAttributes<HTMLDivElement>>;
+};
+
+declare interface TreeViewItemProps {
+    /**
+     * The node to render
+     */
+    node: TreeNode;
+    /**
+     * The level of the node in the tree
+     */
+    level?: number;
+    /**
+     * Whether the node is the first child of its parent
+     */
+    isFirst?: boolean;
+    /**
+     * Whether the node is the last child of its parent
+     */
+    isLast?: boolean;
+}
+
+declare interface TreeViewLabelProps {
+    /**
+     * The node to render
+     */
+    node: TreeNode;
+    /**
+     * Whether the node is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback fired when the node is clicked
+     */
+    onClick?: () => void;
+}
+
+declare interface TreeViewProps {
+    /** Array of tree nodes to render */
+    data: TreeNode[];
+    /** Array of node IDs to expand by default */
+    defaultExpanded?: string[];
+    /** ID of the currently selected node */
+    selectedId?: string;
+    /** Size of the tree items */
+    size?: TreeViewVariants["size"];
+    /** Callback fired when a node is selected */
+    onNodeSelect?: (id: string) => void;
+    /** Custom render function for node labels */
+    renderLabel?: (node: TreeNode) => ReactNode;
+    /** Additional CSS class for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+    /** If true, renders folder icons for parent nodes */
+    isDirectory?: boolean;
+    /** If true, shows connection lines between nodes */
+    showLines?: boolean;
+    /** Style of the connection lines */
+    styleLines?: TreeViewVariants["styleLines"];
+}
+
+declare type TreeViewVariants = VariantProps<typeof treeViewVariants>;
+
+declare const treeViewVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    showLines?: boolean | null | undefined;
+    styleLines?: "dashed" | "dotted" | "solid" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * Custom hook that returns the ID of the currently active section.
+ *
+ * @param selectors - The CSS selector for the sections to observe. (default: "h2"), (optional: "h2, h3, h4, h5, h6")
+ * @param rootMargin - The margin around the root element. (default: "-20% 0px -70% 0px") this is the margin around the root element in the viewport - top, right, bottom, left
+ * @returns The ID of the currently active section.
+ */
+export declare function useActiveSectionObserver({ selectors, rootMargin, }: {
+    selectors?: string;
+    rootMargin?: string;
+}): string | null;
+
+export declare const useNotification: () => NotificationContextType;
+
+export declare function usePathObserver(): string;
+
+export declare const usePopover: <T extends HTMLElement, U extends HTMLElement>(offset?: {
+    x?: number;
+    y?: number;
+}, itemCallbacks?: Array<(() => void) | undefined>) => {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    menuPosition: {
+        top: number;
+        left: number;
+        position: "below" | "above";
+        width: number;
+    };
+    triggerRef: RefObject<T | null>;
+    contentRef: RefObject<U | null>;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement | HTMLUListElement | HTMLButtonElement>) => void;
+    selectedOptionIndex: number | null;
+    highlightedIndex: number;
+    onSelectOption: () => void;
+};
+
+declare interface ValueObject {
+    [themeName: string]: string;
+}
+
+declare const variantBreadcrumbItem: (props?: ({
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    variant?: "dot" | "chevron" | "slash" | "arrow" | "stepped" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type Wrap = "nowrap" | "wrap" | "wrap-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-initial";
+
+declare const wrapper: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    positionLabel?: "left" | "right" | "bottom" | "top" | null | undefined;
+    color?: "neutral" | "primary" | "secondary" | "danger" | "success" | "warning" | "info" | null | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    type?: "button" | "radio" | "card" | null | undefined;
+    radius?: "default" | "none" | "tiny" | "small" | "medium" | "large" | "full" | null | undefined;
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }