Update TS

index.d.ts

@@ -1,498 +1,535 @@
-// sigpro-ui.d.ts
-
 declare module 'sigpro-ui' {
-  // Tipos básicos
   type Signal<T> = {
     (): T;
     (value: T | ((prev: T) => T)): void;
   };
 
-  type ComponentFunction<P = {}> = (props?: P, children?: any) => HTMLElement | string | null;
+  type ComponentChild = Node | string | number | boolean | null | undefined;
-  type ComponentChild = HTMLElement | string | number | boolean | null | undefined;
+  type ComponentChildren = ComponentChild | ComponentChild[] | (() => ComponentChild | ComponentChildren);
-  type ComponentChildren = ComponentChild | ComponentChild[];
 
-  // Utils
-  function val<T>(value: T | (() => T)): T;
-  function ui(baseClass: string, ...additional: (string | (() => string) | undefined)[]): string | (() => string);
-  function getIcon(icon: string | (() => string) | HTMLElement | null | undefined): HTMLElement | null;
-  function tt(key: 'close' | 'confirm' | 'cancel' | 'search' | 'loading' | 'nodata'): () => string;
-
-  // Props comunes
   interface BaseProps {
     class?: string | (() => string);
-    style?: string | Record<string, string> | (() => string | Record<string, string>);
+    style?: string | (() => string);
     id?: string | (() => string);
+    [key: string]: any;
   }
 
-  interface EventProps {
+  interface AccordionItem {
-    onclick?: (event: MouseEvent) => void;
+    title?: string | (() => string);
-    oninput?: (event: Event) => void;
+    content?: string | (() => string);
-    onchange?: (event: Event) => void;
+    open?: boolean;
-    onblur?: (event: FocusEvent) => void;
+    classTitle?: string;
-    onfocus?: (event: FocusEvent) => void;
+    classContent?: string;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onmouseenter?: (event: MouseEvent) => void;
-    onmouseleave?: (event: MouseEvent) => void;
-    onsubmit?: (event: Event) => void;
-    ondragover?: (event: DragEvent) => void;
-    ondragleave?: (event: DragEvent) => void;
-    ondrop?: (event: DragEvent) => void;
-    [key: `on${string}`]: ((event: any) => void) | undefined;
   }
-
+  interface AccordionProps extends BaseProps {
-  // Accordion
+    items: AccordionItem[] | (() => AccordionItem[]);
-  interface AccordionProps extends BaseProps, EventProps {
-    title: string | (() => string);
     name?: string;
-    open?: boolean | (() => boolean);
   }
-  function Accordion(props: AccordionProps, children: ComponentChildren): HTMLElement;
+  function Accordion(props: AccordionProps): Node;
 
-  // Alert
+  interface AlertProps extends BaseProps {}
-  type AlertType = 'info' | 'success' | 'warning' | 'error';
+  function Alert(props: AlertProps, children?: ComponentChildren): Node;
-  interface AlertProps extends BaseProps, EventProps {
-    type?: AlertType;
-    soft?: boolean;
-    actions?: ComponentFunction | ComponentChildren;
-    message?: string | (() => string);
-  }
-  function Alert(props: AlertProps, children?: ComponentChildren): HTMLElement;
 
-  // Autocomplete
+  interface AutocompleteProps extends BaseProps {
-  interface AutocompleteOption {
+    items: (string | { label: string; value?: string })[] | (() => (string | { label: string; value?: string })[]);
-    label: string;
-    value: string;
-  }
-  interface AutocompleteProps extends BaseProps, EventProps {
-    items?: string[] | AutocompleteOption[] | (() => (string[] | AutocompleteOption[]));
     value?: Signal<string> | string;
-    onselect?: (option: string | AutocompleteOption) => void;
+    onselect?: (item: string | { label: string; value?: string }) => void;
-    label?: string | (() => string);
+    placeholder?: string;
-    placeholder?: string | (() => string);
   }
-  function autocomplete(props: AutocompleteProps): HTMLElement;
+  function Autocomplete(props: AutocompleteProps): Node;
 
-  // Badge
+  interface BadgeProps extends BaseProps {}
-  interface BadgeProps extends BaseProps, EventProps {}
+  function Badge(props: BadgeProps, children?: ComponentChildren): Node;
-  function Badge(props: BadgeProps, children: ComponentChildren): HTMLElement;
 
-  // Button
+  interface ButtonProps extends BaseProps {}
-  interface ButtonProps extends BaseProps, EventProps {
+  function Button(props: ButtonProps, children?: ComponentChildren): Node;
-    disabled?: boolean | (() => boolean);
-    loading?: boolean | (() => boolean);
-    icon?: string | (() => string) | HTMLElement;
-  }
-  function button(props: ButtonProps, children: ComponentChildren): HTMLElement;
 
-  // Checkbox
-  interface CheckboxProps extends BaseProps, EventProps {
-    value?: Signal<boolean> | boolean;
-    label?: string | (() => string);
-    tooltip?: string | (() => string);
-    toggle?: boolean | (() => boolean);
-  }
-  function Checkbox(props: CheckboxProps): HTMLElement;
-
-  // Colorpicker
-  interface ColorpickerProps extends BaseProps, EventProps {
-    value?: Signal<string> | string;
-    label?: string | (() => string);
-  }
-  function Colorpicker(props: ColorpickerProps): HTMLElement;
-
-  // Datepicker
   interface DateRange {
     start: string;
     end: string | null;
     startHour?: number;
     endHour?: number;
   }
-  interface DatepickerProps extends BaseProps, EventProps {
+  interface CalendarProps extends BaseProps {
     value?: Signal<string | DateRange> | string | DateRange;
     range?: boolean | (() => boolean);
-    label?: string | (() => string);
-    placeholder?: string | (() => string);
     hour?: boolean;
+    onChange?: (value: string | DateRange | null) => void;
+    onAccept?: () => void;
+    onCancel?: () => void;
   }
-  function Datepicker(props: DatepickerProps): HTMLElement;
+  function Calendar(props: CalendarProps): Node;
 
-  // Drawer
+  interface CardProps extends BaseProps {}
-  interface DrawerProps extends BaseProps, EventProps {
+  function Card(props: CardProps, children?: ComponentChildren): Node;
-    id?: string;
-    open?: Signal<boolean> | boolean;
-    side: ComponentFunction | ComponentChildren;
-    content: ComponentFunction | ComponentChildren;
-  }
-  function Drawer(props: DrawerProps, children?: ComponentChildren): HTMLElement;
 
-  // Dropdown
+  interface CardTitleProps extends BaseProps {}
-  interface DropdownItem {
+  function CardTitle(props: CardTitleProps, children?: ComponentChildren): Node;
-    label: string | (() => string);
+
-    icon?: string | HTMLElement | (() => string | HTMLElement);
+  interface CardBodyProps extends BaseProps {}
-    onclick?: (event: MouseEvent) => void;
+  function CardBody(props: CardBodyProps, children?: ComponentChildren): Node;
-    class?: string;
+
-  }
+  interface CardActionsProps extends BaseProps {}
-  interface DropdownProps extends BaseProps, EventProps {
+  function CardActions(props: CardActionsProps, children?: ComponentChildren): Node;
+
+  interface CarouselProps extends BaseProps {}
+  function Carousel(props: CarouselProps, children?: ComponentChildren): Node;
+
+  interface CarouselItemProps extends BaseProps {}
+  function CarouselItem(props: CarouselItemProps, children?: ComponentChildren): Node;
+
+  interface ChatProps extends BaseProps {}
+  function Chat(props: ChatProps, children?: ComponentChildren): Node;
+
+  interface ChatBubbleProps extends BaseProps {}
+  function ChatBubble(props: ChatBubbleProps, children?: ComponentChildren): Node;
+
+  interface ChatFooterProps extends BaseProps {}
+  function ChatFooter(props: ChatFooterProps, children?: ComponentChildren): Node;
+
+  interface ChatHeaderProps extends BaseProps {}
+  function ChatHeader(props: ChatHeaderProps, children?: ComponentChildren): Node;
+
+  interface ChatImageProps extends BaseProps {}
+  function ChatImage(props: ChatImageProps, children?: ComponentChildren): Node;
+
+  interface CheckboxProps extends BaseProps {}
+  function Checkbox(props: CheckboxProps): Node;
+
+  interface ColorpickerProps extends BaseProps {
+    value?: Signal<string> | string;
     label?: string | (() => string);
-    icon?: string | HTMLElement | (() => string | HTMLElement);
+    onchange?: (color: string) => void;
-    items?: DropdownItem[] | (() => DropdownItem[]);
   }
-  function Dropdown(props: DropdownProps): HTMLElement;
+  function Colorpicker(props: ColorpickerProps): Node;
 
-  // Fab
+  interface ColorPaletteProps extends BaseProps {
-  interface FabAction {
+    value?: Signal<string> | string;
-    label?: string;
+    onchange?: (color: string) => void;
-    icon?: string | HTMLElement;
-    text?: string;
-    onclick?: (event: MouseEvent) => void;
-    class?: string;
   }
-  interface FabProps extends BaseProps, EventProps {
+  function ColorPalette(props: ColorPaletteProps): Node;
-    icon?: string | HTMLElement;
-    label?: string;
-    actions?: FabAction[] | (() => FabAction[]);
-    position?: string;
-  }
-  function Fab(props: FabProps): HTMLElement;
 
-  // Fieldset
+  interface DatepickerProps extends BaseProps {
-  interface FieldsetProps extends BaseProps, EventProps {
+    value?: Signal<string | DateRange> | string | DateRange;
-    legend?: string | (() => string);
+    range?: boolean | (() => boolean);
+    hour?: boolean;
+    placeholder?: string;
+    onChange?: (value: string | DateRange | null) => void;
+    onAccept?: () => void;
+    onCancel?: () => void;
   }
-  function fieldset(props: FieldsetProps, children: ComponentChildren): HTMLElement;
+  function Datepicker(props: DatepickerProps): Node;
 
-  // Fileinput
+  interface DividerProps extends BaseProps {}
-  interface FileinputProps extends BaseProps, EventProps {
+  function Divider(props: DividerProps): Node;
-    tooltip?: string;
+
+  interface DrawerProps extends BaseProps {}
+  function Drawer(props: DrawerProps, children?: ComponentChildren): Node;
+
+  interface DrawerToggleProps extends BaseProps {
+    checked?: Signal<boolean> | boolean;
+  }
+  function DrawerToggle(props: DrawerToggleProps): Node;
+
+  interface DrawerContentProps extends BaseProps {}
+  function DrawerContent(props: DrawerContentProps, children?: ComponentChildren): Node;
+
+  interface DrawerSideProps extends BaseProps {}
+  function DrawerSide(props: DrawerSideProps, children?: ComponentChildren): Node;
+
+  interface DrawerOverlayProps extends BaseProps {
+    for?: string;
+  }
+  function DrawerOverlay(props: DrawerOverlayProps): Node;
+
+  interface DropdownProps extends BaseProps {
+    open?: Signal<boolean>;
+  }
+  function Dropdown(props: DropdownProps, children?: ComponentChildren): Node;
+
+  interface DropdownButtonProps extends BaseProps {}
+  function DropdownButton(props: DropdownButtonProps, children?: ComponentChildren): Node;
+
+  interface DropdownContentProps extends BaseProps {}
+  function DropdownContent(props: DropdownContentProps, children?: ComponentChildren): Node;
+
+  interface FabProps extends BaseProps {
+    icon?: string;
+  }
+  function Fab(props: FabProps, children?: ComponentChildren): Node;
+
+  interface FieldsetProps extends BaseProps {
+    label?: string | (() => string);
+  }
+  function Fieldset(props: FieldsetProps, children?: ComponentChildren): Node;
+
+  interface FileinputProps extends BaseProps {
     max?: number;
     accept?: string;
     onselect?: (files: File[]) => void;
+    value?: Signal<File[]>;
   }
-  function Fileinput(props: FileinputProps): HTMLElement;
+  function Fileinput(props: FileinputProps): Node;
 
-  // Indicator
+  interface IconProps {
-  interface IndicatorProps extends BaseProps, EventProps {
+    class?: string;
-    value?: number | string | (() => number | string);
   }
-  function Indicator(props: IndicatorProps, children: ComponentChildren): HTMLElement;
+  function Icon(props: string | IconProps): Node;
 
-  // Input
+  interface IndicatorProps extends BaseProps {
-  interface InputProps extends BaseProps, EventProps {
+    value?: string | number | (() => string | number);
+  }
+  function Indicator(props: IndicatorProps, children?: ComponentChildren): Node;
+
+  interface InputProps extends BaseProps {
     value?: Signal<string> | string;
     type?: string;
-    icon?: string | HTMLElement | (() => string | HTMLElement);
+    placeholder?: string;
-    placeholder?: string | (() => string);
-    disabled?: boolean | (() => boolean);
-    size?: string;
-    validate?: (value: string) => string | null | undefined;
     label?: string | (() => string);
+    float?: boolean;
+    left?: ComponentChild;
+    right?: ComponentChild;
+    rule?: string;
+    hint?: string | (() => string);
   }
-  function input(props: InputProps): HTMLElement;
+  function Input(props: InputProps): Node;
 
-  // Label
+  interface KbdProps extends BaseProps {}
-  interface LabelProps extends BaseProps, EventProps {
+  function Kbd(props: KbdProps, children?: ComponentChildren): Node;
-    value?: string | (() => string);
+
-    floating?: boolean;
+  interface ListProps extends BaseProps {}
-    error?: string | (() => string);
+  function List(props: ListProps, children?: ComponentChildren): Node;
-    required?: boolean;
+
+  interface ListRowsProps extends BaseProps {
+    items?: any[] | (() => any[]);
+    render?: (item: any, index: number) => ComponentChild;
   }
-  function label(props: LabelProps, children: ComponentChildren): HTMLElement;
+  function ListRows(props: ListRowsProps): Node;
 
-  // List
+  interface LoadingProps extends BaseProps {}
-  interface ListProps<T = any> extends BaseProps, EventProps {
+  function Loading(props: LoadingProps, children?: ComponentChildren): Node;
-    items: T[] | (() => T[]);
-    header?: string | HTMLElement | (() => string | HTMLElement);
-    render: (item: T, index: number) => ComponentChild;
-    keyFn?: (item: T, index: number) => string | number;
-  }
-  function List<T>(props: ListProps<T>): HTMLElement;
 
-  // Menu
   interface MenuItem {
-    label: string | (() => string);
+    label?: string | (() => string);
-    icon?: string | HTMLElement;
+    href?: string;
-    onclick?: (event: MouseEvent) => void;
+    onclick?: (e: MouseEvent) => void;
-    active?: boolean | (() => boolean);
+    children?: MenuItem[] | (() => MenuItem[]);
-    children?: MenuItem[];
     open?: boolean;
   }
-  interface MenuProps extends BaseProps, EventProps {
+  interface MenuProps extends BaseProps {
-    items: MenuItem[] | (() => MenuItem[]);
+    items?: MenuItem[] | (() => MenuItem[]);
+    children?: ComponentChildren;
   }
-  function Menu(props: MenuProps): HTMLElement;
+  function Menu(props: MenuProps): Node;
 
-  // Modal
+  interface ModalProps extends BaseProps {
-  interface ModalProps extends BaseProps, EventProps {
     open?: Signal<boolean> | boolean;
-    title?: string | HTMLElement | (() => string | HTMLElement);
+    title?: string | (() => string);
-    buttons?: ComponentFunction | ComponentFunction[];
+    actions?: ComponentChild;
   }
-  function Modal(props: ModalProps, children: ComponentChildren): HTMLElement;
+  function Modal(props: ModalProps, children?: ComponentChildren): Node;
 
-  // Navbar
+  interface NavbarProps extends BaseProps {}
-  interface NavbarProps extends BaseProps, EventProps {}
+  function Navbar(props: NavbarProps, children?: ComponentChildren): Node;
-  function Navbar(props: NavbarProps, children: ComponentChildren): HTMLElement;
 
-  // Radio
+  interface ProgressProps extends BaseProps {
-  interface RadioProps extends BaseProps, EventProps {
+    value?: number | (() => number);
-    value?: Signal<any> | any;
+    max?: number;
-    inputValue?: any;
+  }
+  function Progress(props: ProgressProps): Node;
+
+  interface RadialProps extends BaseProps {
+    value?: number;
+  }
+  function Radial(props: RadialProps, children?: ComponentChildren): Node;
+
+  interface RadioProps extends BaseProps {
     name?: string;
-    label?: string | (() => string);
+    checked?: boolean | (() => boolean);
-    tooltip?: string | (() => string);
   }
-  function Radio(props: RadioProps): HTMLElement;
+  function Radio(props: RadioProps): Node;
 
-  // Range
+  interface RangeProps extends BaseProps {
-  interface RangeProps extends BaseProps, EventProps {
     value?: Signal<number> | number;
-    label?: string | (() => string);
-    tooltip?: string | (() => string);
     min?: number;
     max?: number;
-    step?: number;
-    disabled?: boolean | (() => boolean);
   }
-  function Range(props: RangeProps): HTMLElement;
+  function Range(props: RangeProps): Node;
 
-  // Rating
+  interface RatingProps extends BaseProps {}
-  interface RatingProps extends BaseProps, EventProps {
+  function Rating(props: RatingProps, children?: ComponentChildren): Node;
+
+  interface RatingItemsProps extends BaseProps {
+    count: number;
+    name?: string;
     value?: Signal<number> | number;
-    count?: number | (() => number);
-    mask?: string;
-    readonly?: boolean | (() => boolean);
     onchange?: (value: number) => void;
   }
-  function Rating(props: RatingProps): HTMLElement;
+  function RatingItems(props: RatingItemsProps): Node;
 
-  // Select
   interface SelectOption {
-    label: string;
+    label?: string;
-    value: string | number;
+    value?: string;
+    disabled?: boolean;
   }
-  interface SelectProps extends BaseProps, EventProps {
+  interface SelectProps extends BaseProps {
-    label?: string | (() => string);
     items?: SelectOption[] | (() => SelectOption[]);
-    value?: Signal<string | number> | string | number;
+    value?: Signal<string> | string;
-  }
+    placeholder?: string;
-  function select(props: SelectProps): HTMLElement;
+    placeholderDisabled?: boolean;
-
-  // Stack
-  interface StackProps extends BaseProps, EventProps {}
-  function Stack(props: StackProps, children: ComponentChildren): HTMLElement;
-
-  // Stat
-  interface StatProps extends BaseProps, EventProps {
-    icon?: string | HTMLElement;
     label?: string | (() => string);
+    float?: boolean;
+    left?: ComponentChild;
+    right?: ComponentChild;
+    hint?: string | (() => string);
+    onchange?: (e: Event) => void;
+  }
+  function Select(props: SelectProps, children?: ComponentChildren): Node;
+
+  interface SkeletonProps extends BaseProps {}
+  function Skeleton(props: SkeletonProps): Node;
+
+  interface SkeletonTextProps extends BaseProps {}
+  function SkeletonText(props: SkeletonTextProps): Node;
+
+  interface StackProps extends BaseProps {}
+  function Stack(props: StackProps, children?: ComponentChildren): Node;
+
+  interface StatProps extends BaseProps {
+    title?: string | (() => string);
     value?: string | number | (() => string | number);
     desc?: string | (() => string);
   }
-  function Stat(props: StatProps): HTMLElement;
+  function Stat(props: StatProps): Node;
 
-  // Swap
+  interface StatsProps extends BaseProps {}
-  interface SwapProps extends BaseProps, EventProps {
+  function Stats(props: StatsProps, children?: ComponentChildren): Node;
-    value?: Signal<boolean> | boolean;
+
-    on: ComponentChildren;
+  interface StepsProps extends BaseProps {}
-    off: ComponentChildren;
+  function Steps(props: StepsProps, children?: ComponentChildren): Node;
+
+  interface StepProps extends BaseProps {
+    dataContent?: string;
   }
-  function Swap(props: SwapProps): HTMLElement;
+  function Step(props: StepProps, children?: ComponentChildren): Node;
 
-  // Table
+  interface SwapProps extends BaseProps {}
-  interface TableColumn<T = any> {
+  function Swap(props: SwapProps, children?: ComponentChildren): Node;
-    label: string | (() => string);
+
-    key?: keyof T;
+  interface SwapToggleProps extends BaseProps {
-    render?: (item: T, index: number) => ComponentChild;
+    value?: Signal<boolean> | boolean;
+  }
+  function SwapToggle(props: SwapToggleProps): Node;
+
+  interface SwapOnProps extends BaseProps {}
+  function SwapOn(props: SwapOnProps, children?: ComponentChildren): Node;
+
+  interface SwapOffProps extends BaseProps {}
+  function SwapOff(props: SwapOffProps, children?: ComponentChildren): Node;
+
+  interface TableProps extends BaseProps {}
+  function Table(props: TableProps, children?: ComponentChildren): Node;
+
+  interface TableColumn {
+    label?: string;
+    key?: string;
+    render?: (item: any, index: number) => ComponentChild;
     class?: string;
   }
-  interface TableProps<T = any> extends BaseProps, EventProps {
+  interface TableItemsProps extends BaseProps {
-    items: T[] | (() => T[]);
+    items?: any[] | (() => any[]);
-    columns: TableColumn<T>[];
+    columns?: TableColumn[];
-    keyFn?: (item: T, index: number) => string | number;
+    header?: boolean;
-    zebra?: boolean | (() => boolean);
-    pinRows?: boolean | (() => boolean);
-    empty?: string | HTMLElement | (() => string | HTMLElement);
   }
-  function Table<T>(props: TableProps<T>): HTMLElement;
+  function TableItems(props: TableItemsProps): Node;
 
-  // Tabs
   interface TabItem {
-    label: string | HTMLElement | (() => string | HTMLElement);
+    label?: string | (() => string);
-    content: ComponentFunction | ComponentChildren;
+    content?: ComponentChild | (() => ComponentChild);
-    active?: boolean | (() => boolean);
+    class?: string;
-    disabled?: boolean | (() => boolean);
+    closable?: boolean;
-    onclick?: () => void;
+    onclick?: (e: MouseEvent) => void;
   }
-  interface TabsProps extends BaseProps, EventProps {
+  interface TabsProps extends BaseProps {
-    items: TabItem[] | (() => TabItem[]);
+    items?: TabItem[] | (() => TabItem[]);
+    activeIndex?: Signal<number>;
+    onClose?: (index: number, item: TabItem) => void;
+    children?: ComponentChildren;
   }
-  function Tabs(props: TabsProps): HTMLElement;
+  function Tabs(props: TabsProps): Node;
 
-  // Timeline
+  interface TextareaProps extends BaseProps {
-  interface TimelineItem {
+    value?: Signal<string> | string;
-    title: string | HTMLElement | (() => string | HTMLElement);
+    placeholder?: string;
-    detail: string | HTMLElement | (() => string | HTMLElement);
-    type?: 'info' | 'success' | 'warning' | 'error';
-    icon?: string | HTMLElement;
-    completed?: boolean | (() => boolean);
   }
-  interface TimelineProps extends BaseProps, EventProps {
+  function Textarea(props: TextareaProps): Node;
-    items: TimelineItem[] | (() => TimelineItem[]);
+
-    vertical?: boolean | (() => boolean);
+  interface TextrotateProps extends BaseProps {}
-    compact?: boolean | (() => boolean);
+  function Textrotate(props: TextrotateProps, children?: ComponentChildren): Node;
-  }
+
-  function Timeline(props: TimelineProps): HTMLElement;
+  interface TimelineProps extends BaseProps {}
+  function Timeline(props: TimelineProps, children?: ComponentChildren): Node;
 
-  // Toast
   type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
-  function Toast(
+  function Toast(message: string | (() => string), type?: ToastType, duration?: number): () => void;
-    message: string | (() => string),
-    type?: ToastType,
-    duration?: number
-  ): () => void;
 
-  // Tooltip
+  interface ToggleProps extends BaseProps {
-  interface TooltipProps extends BaseProps, EventProps {
+    checked?: Signal<boolean> | boolean;
-    tip: string | (() => string);
-    ui?: string;
   }
-  function Tooltip(props: TooltipProps, children: ComponentChildren): HTMLElement;
+  function Toggle(props: ToggleProps): Node;
 
-  // Objeto principal
+  interface TooltipProps extends BaseProps {
-  const SigProUI: {
+    tip: string | (() => string);
+  }
+  function Tooltip(props: TooltipProps, children?: ComponentChildren): Node;
+
+  const Components: {
     Accordion: typeof Accordion;
     Alert: typeof Alert;
     Autocomplete: typeof Autocomplete;
     Badge: typeof Badge;
     Button: typeof Button;
+    Calendar: typeof Calendar;
+    Card: typeof Card;
+    CardTitle: typeof CardTitle;
+    CardBody: typeof CardBody;
+    CardActions: typeof CardActions;
+    Carousel: typeof Carousel;
+    CarouselItem: typeof CarouselItem;
+    Chat: typeof Chat;
+    ChatBubble: typeof ChatBubble;
+    ChatFooter: typeof ChatFooter;
+    ChatHeader: typeof ChatHeader;
+    ChatImage: typeof ChatImage;
     Checkbox: typeof Checkbox;
     Colorpicker: typeof Colorpicker;
+    ColorPalette: typeof ColorPalette;
     Datepicker: typeof Datepicker;
+    Divider: typeof Divider;
     Drawer: typeof Drawer;
+    DrawerToggle: typeof DrawerToggle;
+    DrawerContent: typeof DrawerContent;
+    DrawerSide: typeof DrawerSide;
+    DrawerOverlay: typeof DrawerOverlay;
     Dropdown: typeof Dropdown;
+    DropdownButton: typeof DropdownButton;
+    DropdownContent: typeof DropdownContent;
     Fab: typeof Fab;
     Fieldset: typeof Fieldset;
     Fileinput: typeof Fileinput;
+    Icon: typeof Icon;
     Indicator: typeof Indicator;
     Input: typeof Input;
-    Label: typeof Label;
+    Kbd: typeof Kbd;
     List: typeof List;
+    ListRows: typeof ListRows;
+    Loading: typeof Loading;
     Menu: typeof Menu;
     Modal: typeof Modal;
     Navbar: typeof Navbar;
+    Progress: typeof Progress;
+    Radial: typeof Radial;
     Radio: typeof Radio;
     Range: typeof Range;
     Rating: typeof Rating;
+    RatingItems: typeof RatingItems;
     Select: typeof Select;
+    Skeleton: typeof Skeleton;
+    SkeletonText: typeof SkeletonText;
     Stack: typeof Stack;
     Stat: typeof Stat;
+    Stats: typeof Stats;
+    Steps: typeof Steps;
+    Step: typeof Step;
     Swap: typeof Swap;
+    SwapToggle: typeof SwapToggle;
+    SwapOn: typeof SwapOn;
+    SwapOff: typeof SwapOff;
     Table: typeof Table;
+    TableItems: typeof TableItems;
     Tabs: typeof Tabs;
+    Textarea: typeof Textarea;
+    Textrotate: typeof Textrotate;
     Timeline: typeof Timeline;
     Toast: typeof Toast;
+    Toggle: typeof Toggle;
     Tooltip: typeof Tooltip;
-    Utils: {
-      val: typeof val;
-      ui: typeof ui;
-      getIcon: typeof getIcon;
-    };
-    tt: typeof tt;
-    install: (target?: Window) => void;
   };
 
-  export default SigProUI;
+  export { Components };
-  export {
+  export default Components;
-    Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker,
-    Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator,
-    Input, Label, List, Menu, Modal, Navbar, Radio, Range, Rating,
-    Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip,
-    val, ui, getIcon, tt,
-    // Tipos
-    AccordionProps, AlertProps, AutocompleteProps, BadgeProps, ButtonProps,
-    CheckboxProps, ColorpickerProps, DatepickerProps, DrawerProps, DropdownProps,
-    FabProps, FieldsetProps, FileinputProps, IndicatorProps, InputProps,
-    LabelProps, ListProps, MenuProps, ModalProps, NavbarProps, RadioProps,
-    RangeProps, RatingProps, SelectProps, StackProps, StatProps, SwapProps,
-    TableProps, TabsProps, TimelineProps, TooltipProps,
-    DateRange, AutocompleteOption, DropdownItem, FabAction, MenuItem,
-    SelectOption, TabItem, TableColumn, TimelineItem, ToastType, AlertType
-  };
 }
 
-// Declaraciones globales
 declare global {
   const Accordion: typeof import('sigpro-ui').Accordion;
   const Alert: typeof import('sigpro-ui').Alert;
   const Autocomplete: typeof import('sigpro-ui').Autocomplete;
   const Badge: typeof import('sigpro-ui').Badge;
   const Button: typeof import('sigpro-ui').Button;
+  const Calendar: typeof import('sigpro-ui').Calendar;
+  const Card: typeof import('sigpro-ui').Card;
+  const CardTitle: typeof import('sigpro-ui').CardTitle;
+  const CardBody: typeof import('sigpro-ui').CardBody;
+  const CardActions: typeof import('sigpro-ui').CardActions;
+  const Carousel: typeof import('sigpro-ui').Carousel;
+  const CarouselItem: typeof import('sigpro-ui').CarouselItem;
+  const Chat: typeof import('sigpro-ui').Chat;
+  const ChatBubble: typeof import('sigpro-ui').ChatBubble;
+  const ChatFooter: typeof import('sigpro-ui').ChatFooter;
+  const ChatHeader: typeof import('sigpro-ui').ChatHeader;
+  const ChatImage: typeof import('sigpro-ui').ChatImage;
   const Checkbox: typeof import('sigpro-ui').Checkbox;
   const Colorpicker: typeof import('sigpro-ui').Colorpicker;
+  const ColorPalette: typeof import('sigpro-ui').ColorPalette;
   const Datepicker: typeof import('sigpro-ui').Datepicker;
+  const Divider: typeof import('sigpro-ui').Divider;
   const Drawer: typeof import('sigpro-ui').Drawer;
+  const DrawerToggle: typeof import('sigpro-ui').DrawerToggle;
+  const DrawerContent: typeof import('sigpro-ui').DrawerContent;
+  const DrawerSide: typeof import('sigpro-ui').DrawerSide;
+  const DrawerOverlay: typeof import('sigpro-ui').DrawerOverlay;
   const Dropdown: typeof import('sigpro-ui').Dropdown;
+  const DropdownButton: typeof import('sigpro-ui').DropdownButton;
+  const DropdownContent: typeof import('sigpro-ui').DropdownContent;
   const Fab: typeof import('sigpro-ui').Fab;
   const Fieldset: typeof import('sigpro-ui').Fieldset;
   const Fileinput: typeof import('sigpro-ui').Fileinput;
+  const Icon: typeof import('sigpro-ui').Icon;
   const Indicator: typeof import('sigpro-ui').Indicator;
   const Input: typeof import('sigpro-ui').Input;
-  const Label: typeof import('sigpro-ui').Label;
+  const Kbd: typeof import('sigpro-ui').Kbd;
   const List: typeof import('sigpro-ui').List;
+  const ListRows: typeof import('sigpro-ui').ListRows;
+  const Loading: typeof import('sigpro-ui').Loading;
   const Menu: typeof import('sigpro-ui').Menu;
   const Modal: typeof import('sigpro-ui').Modal;
   const Navbar: typeof import('sigpro-ui').Navbar;
+  const Progress: typeof import('sigpro-ui').Progress;
+  const Radial: typeof import('sigpro-ui').Radial;
   const Radio: typeof import('sigpro-ui').Radio;
   const Range: typeof import('sigpro-ui').Range;
   const Rating: typeof import('sigpro-ui').Rating;
+  const RatingItems: typeof import('sigpro-ui').RatingItems;
   const Select: typeof import('sigpro-ui').Select;
+  const Skeleton: typeof import('sigpro-ui').Skeleton;
+  const SkeletonText: typeof import('sigpro-ui').SkeletonText;
   const Stack: typeof import('sigpro-ui').Stack;
   const Stat: typeof import('sigpro-ui').Stat;
+  const Stats: typeof import('sigpro-ui').Stats;
+  const Steps: typeof import('sigpro-ui').Steps;
+  const Step: typeof import('sigpro-ui').Step;
   const Swap: typeof import('sigpro-ui').Swap;
+  const SwapToggle: typeof import('sigpro-ui').SwapToggle;
+  const SwapOn: typeof import('sigpro-ui').SwapOn;
+  const SwapOff: typeof import('sigpro-ui').SwapOff;
   const Table: typeof import('sigpro-ui').Table;
+  const TableItems: typeof import('sigpro-ui').TableItems;
   const Tabs: typeof import('sigpro-ui').Tabs;
+  const Textarea: typeof import('sigpro-ui').Textarea;
+  const Textrotate: typeof import('sigpro-ui').Textrotate;
   const Timeline: typeof import('sigpro-ui').Timeline;
   const Toast: typeof import('sigpro-ui').Toast;
+  const Toggle: typeof import('sigpro-ui').Toggle;
   const Tooltip: typeof import('sigpro-ui').Tooltip;
-  const Utils: typeof import('sigpro-ui').Utils;
+  const Components: typeof import('sigpro-ui').Components;
-  const tt: typeof import('sigpro-ui').tt;
-
-  interface Window {
-    Accordion: typeof Accordion;
-    Alert: typeof Alert;
-    Autocomplete: typeof Autocomplete;
-    Badge: typeof Badge;
-    Button: typeof Button;
-    Checkbox: typeof Checkbox;
-    Colorpicker: typeof Colorpicker;
-    Datepicker: typeof Datepicker;
-    Drawer: typeof Drawer;
-    Dropdown: typeof Dropdown;
-    Fab: typeof Fab;
-    Fieldset: typeof Fieldset;
-    Fileinput: typeof Fileinput;
-    Indicator: typeof Indicator;
-    Input: typeof Input;
-    Label: typeof Label;
-    List: typeof List;
-    Menu: typeof Menu;
-    Modal: typeof Modal;
-    Navbar: typeof Navbar;
-    Radio: typeof Radio;
-    Range: typeof Range;
-    Rating: typeof Rating;
-    Select: typeof Select;
-    Stack: typeof Stack;
-    Stat: typeof Stat;
-    Swap: typeof Swap;
-    Table: typeof Table;
-    Tabs: typeof Tabs;
-    Timeline: typeof Timeline;
-    Toast: typeof Toast;
-    Tooltip: typeof Tooltip;
-    Utils: typeof Utils;
-    tt: typeof tt;
-    SigProUI: typeof import('sigpro-ui').default;
-  }
 }