@octavius2929-personal/design-system 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef, Ref, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
 
 declare const tintaSchema: {
     light: {
@@ -805,7 +805,10 @@ type ContainerOwnProps<E extends ElementType> = Sprinkles & {
 };
 type ContainerProps<E extends ElementType = "div"> = ContainerOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof ContainerOwnProps<E>>;
 
-declare function Container<E extends ElementType = "div">({ as, ...props }: ContainerProps<E>): react.JSX.Element;
+declare function ContainerImpl<E extends ElementType = "div">({ as, ...props }: ContainerProps<E>, ref: Ref<Element>): react.JSX.Element;
+declare const Container: <E extends ElementType = "div">(props: ContainerProps<E> & {
+    ref?: Ref<Element>;
+}) => ReturnType<typeof ContainerImpl>;
 
 type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "eyebrow" | "code" | "blackletter";
 type TypographyColor = "fg1" | "fg2" | "fg3" | "accent" | "danger" | "ok" | "warn" | "info";
@@ -818,7 +821,10 @@ type TypographyOwnProps<E extends ElementType> = {
 };
 type TypographyProps<E extends ElementType = "span"> = TypographyOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof TypographyOwnProps<E>>;
 
-declare function Typography<E extends ElementType = "span">({ variant, as, color, align, ...rest }: TypographyProps<E>): react.JSX.Element;
+declare function TypographyInner<E extends ElementType = "span">({ variant, as, color, align, ...rest }: TypographyProps<E>, ref: Ref<HTMLElement>): react.JSX.Element;
+declare const Typography: <E extends ElementType = "span">(props: TypographyProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReturnType<typeof TypographyInner>;
 
 interface IconProps extends SVGProps<SVGSVGElement> {
     /** Lado del cuadro en px. Por defecto 20. */
@@ -840,14 +846,14 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     full?: boolean;
 }
 
-declare function Button({ variant, tone, size, startIcon: StartIcon, endIcon: EndIcon, full, className, children, ...rest }: ButtonProps): react.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
     vertical?: boolean;
     label?: ReactNode;
 }
 
-declare function Divider({ vertical, label, ...rest }: DividerProps): react.JSX.Element;
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
 type AvatarSize = "sm" | "md" | "lg";
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
@@ -855,7 +861,7 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     filled?: boolean;
 }
 
-declare function Avatar({ size, filled, className, children, ...rest }: AvatarProps): react.JSX.Element;
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
 
 type BadgeTone = "ink" | "accent";
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -863,7 +869,7 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: BadgeTone;
 }
 
-declare function Badge({ count, tone, className, children, ...rest }: BadgeProps): react.JSX.Element;
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
 type ProgressVariant = "linear" | "circular";
 interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
@@ -872,7 +878,7 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     size?: number;
 }
 
-declare function Progress({ variant, value, size, className, ...rest }: ProgressProps): react.JSX.Element;
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLElement>>;
 
 type ChipTone = "ink" | "accent";
 interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
@@ -881,9 +887,9 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     onDelete?: () => void;
 }
 
-declare function Chip({ selected, tone, onDelete, onClick, children, ...rest }: ChipProps): react.JSX.Element;
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface CheckboxProps {
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "className"> {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     label?: ReactNode;
@@ -891,9 +897,9 @@ interface CheckboxProps {
     id?: string;
 }
 
-declare function Checkbox({ checked, onChange, label, disabled, id, }: CheckboxProps): react.JSX.Element;
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
-interface RadioProps {
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "className"> {
     checked?: boolean;
     onChange?: () => void;
     label?: ReactNode;
@@ -902,38 +908,40 @@ interface RadioProps {
     disabled?: boolean;
 }
 
-declare function Radio({ checked, onChange, label, name, value, disabled }: RadioProps): react.JSX.Element;
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
-interface SwitchProps {
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "className"> {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     label?: ReactNode;
     disabled?: boolean;
 }
 
-declare function Switch({ checked, onChange, label, disabled }: SwitchProps): react.JSX.Element;
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: ReactNode;
     help?: ReactNode;
-    error?: boolean;
+    /** `true` → solo estilo inválido. Un nodo → mensaje renderizado + anunciado (aria-live). */
+    error?: boolean | ReactNode;
     startIcon?: Icon;
     multiline?: boolean;
     rows?: number;
     onChange?: (value: string) => void;
 }
 
-declare function TextField({ label, help, error, startIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     label?: ReactNode;
     help?: ReactNode;
-    error?: boolean;
+    /** `true` → solo estilo inválido. Un nodo → mensaje renderizado + anunciado (aria-live). */
+    error?: boolean | ReactNode;
     startIcon?: Icon;
     onChange?: (value: string) => void;
 }
 
-declare function PasswordField({ label, help, error, startIcon, onChange, id, className, ...rest }: PasswordFieldProps): react.JSX.Element;
+declare const PasswordField: react.ForwardRefExoticComponent<PasswordFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 interface MoneyFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "type"> {
     /** Valor numérico controlado. `null`/omitido representa "sin valor". */
@@ -946,11 +954,12 @@ interface MoneyFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "o
     locale?: string;
     label?: ReactNode;
     help?: ReactNode;
-    error?: boolean;
+    /** `true` → solo estilo inválido. Un nodo → mensaje renderizado + anunciado (aria-live). */
+    error?: boolean | ReactNode;
     startIcon?: Icon;
 }
 
-declare function MoneyField({ value, onChange, currency, locale, label, help, error, startIcon, id, className, onFocus, onBlur, ...rest }: MoneyFieldProps): react.JSX.Element;
+declare const MoneyField: react.ForwardRefExoticComponent<MoneyFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 type IconButtonTone = "ink" | "accent";
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
@@ -960,16 +969,12 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     title: string;
 }
 
-declare function IconButton({ icon: Icon, active, tone, title, ...rest }: IconButtonProps): react.JSX.Element;
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "className">;
 type CardProps = DivProps;
 type CardSectionProps = DivProps;
 
-declare function CardRoot({ children, ...rest }: CardProps): react.JSX.Element;
-declare namespace CardRoot {
-    var displayName: string;
-}
 declare function CardHeader({ children, ...rest }: CardSectionProps): react.JSX.Element;
 declare namespace CardHeader {
     var displayName: string;
@@ -982,7 +987,273 @@ declare function CardFooter({ children, ...rest }: CardSectionProps): react.JSX.
 declare namespace CardFooter {
     var displayName: string;
 }
-declare const Card: typeof CardRoot & {
+declare const Card: react.ForwardRefExoticComponent<{
+    color?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    style?: react.CSSProperties | undefined;
+    slot?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    children?: react.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+} & react.RefAttributes<HTMLDivElement>> & {
     Header: typeof CardHeader;
     Body: typeof CardBody;
     Footer: typeof CardFooter;
@@ -995,7 +1266,7 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     icon?: Icon;
 }
 
-declare function Alert({ severity, title, icon, className, children, ...rest }: AlertProps): react.JSX.Element;
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
 type TooltipPlacement = "top" | "bottom";
 interface TooltipProps {
@@ -1004,13 +1275,13 @@ interface TooltipProps {
     placement?: TooltipPlacement;
 }
 
-declare function Tooltip({ label, children, placement }: TooltipProps): react.JSX.Element;
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
 
 interface SelectOption {
     value: string;
     label: ReactNode;
 }
-interface SelectProps {
+interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className"> {
     options: SelectOption[];
     value?: string | undefined;
     onChange?: (value: string) => void;
@@ -1019,9 +1290,9 @@ interface SelectProps {
     disabled?: boolean;
 }
 
-declare function Select({ options, value, onChange, placeholder, label, disabled }: SelectProps): react.JSX.Element;
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SliderProps {
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "className" | "value" | "min" | "max" | "step"> {
     value?: number;
     onChange?: (value: number) => void;
     min?: number;
@@ -1031,7 +1302,7 @@ interface SliderProps {
     label?: string;
 }
 
-declare function Slider({ value, onChange, min, max, step, disabled, label, }: SliderProps): react.JSX.Element;
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
 
 interface AccordionItem {
     id: string;
@@ -1045,7 +1316,7 @@ interface AccordionProps {
     className?: string;
 }
 
-declare function Accordion({ items, multiple, defaultOpen, className, }: AccordionProps): react.JSX.Element;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 interface Crumb {
     label: ReactNode;
@@ -1055,16 +1326,16 @@ interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     items: Crumb[];
 }
 
-declare function Breadcrumbs({ items, className, ...rest }: BreadcrumbsProps): react.JSX.Element;
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
 
-interface PaginationProps {
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "className" | "onChange"> {
     count: number;
     page?: number;
     onChange?: (page: number) => void;
     siblingCount?: number;
 }
 
-declare function Pagination({ count, page, onChange, siblingCount }: PaginationProps): react.JSX.Element;
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
 
 interface Step {
     label: ReactNode;
@@ -1074,19 +1345,21 @@ interface StepperProps extends HTMLAttributes<HTMLDivElement> {
     active?: number;
 }
 
-declare function Stepper({ steps, active, className, ...rest }: StepperProps): react.JSX.Element;
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TabItem {
     value: string;
     label: ReactNode;
+    /** Contenido del panel asociado. Si algún item lo define, Tabs renderiza los tabpanel cableados. */
+    content?: ReactNode;
 }
-interface TabsProps {
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "onChange"> {
     items: TabItem[];
     value?: string;
     onChange?: (value: string) => void;
 }
 
-declare function Tabs({ items, value, onChange }: TabsProps): react.JSX.Element;
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
 
 interface MenuItemDef {
     label: ReactNode;
@@ -1098,7 +1371,7 @@ interface MenuProps {
     items: MenuItemDef[];
 }
 
-declare function Menu({ trigger, items }: MenuProps): react.JSX.Element;
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLDivElement>>;
 
 interface DialogProps {
     open: boolean;
@@ -1108,7 +1381,7 @@ interface DialogProps {
     children?: ReactNode;
 }
 
-declare function Dialog({ open, onClose, title, actions, children }: DialogProps): react.ReactPortal | null;
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
 
 interface SnackbarProps {
     open: boolean;
@@ -1117,7 +1390,7 @@ interface SnackbarProps {
     onClose?: () => void;
 }
 
-declare function Snackbar({ open, message, action, onClose }: SnackbarProps): react.ReactPortal | null;
+declare const Snackbar: react.ForwardRefExoticComponent<SnackbarProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TableColumn<Row> {
     key: string;
@@ -1129,16 +1402,21 @@ interface TableProps<Row extends Record<string, unknown>> extends TableHTMLAttri
     columns: TableColumn<Row>[];
     rows: Row[];
     getRowKey?: (row: Row, index: number) => string | number;
+    /** Título accesible de la tabla (`<caption>`). Recomendado para lectores de pantalla. */
+    caption?: ReactNode;
 }
 
-declare function Table<Row extends Record<string, unknown>>({ columns, rows, getRowKey, className, ...rest }: TableProps<Row>): react.JSX.Element;
+declare function TableInner<Row extends Record<string, unknown>>({ columns, rows, getRowKey, className, caption, ...rest }: TableProps<Row>, ref: Ref<HTMLTableElement>): react.JSX.Element;
+declare const Table: <Row extends Record<string, unknown>>(props: TableProps<Row> & {
+    ref?: Ref<HTMLTableElement>;
+}) => ReturnType<typeof TableInner>;
 
 interface AppBarProps extends HTMLAttributes<HTMLElement> {
     brand?: ReactNode;
     actions?: ReactNode;
 }
 
-declare function AppBar({ brand, actions, className, children, ...rest }: AppBarProps): react.JSX.Element;
+declare const AppBar: react.ForwardRefExoticComponent<AppBarProps & react.RefAttributes<HTMLElement>>;
 
 interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
     leading?: ReactNode;
@@ -1146,7 +1424,7 @@ interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
 }
 
-declare function ListItem({ leading, trailing, selected, className, children, ...rest }: ListItemProps): react.JSX.Element;
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLDivElement>>;
 
 declare function ChevronDownIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;