@juanitte/inoui 1.0.2 → 1.1.0

package/dist/index.d.ts

@@ -239,7 +239,7 @@ export declare type AvatarBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export declare type AvatarClassNames = SemanticClassNames<AvatarSemanticSlot>;
 
-declare function AvatarComponent({ src, srcSet, alt, icon, shape: shapeProp, size: sizeProp, gap, draggable, crossOrigin, onError, children, className, style, classNames, styles, }: AvatarProps): JSX.Element;
+declare function AvatarComponent({ src, srcSet, alt, icon, shape: shapeProp, size: sizeProp, gap, draggable, crossOrigin, onError, children, className, style, classNames: classNamesProp, styles, }: AvatarProps): JSX.Element;
 
 declare function AvatarGroup({ max, size, shape, children, className, style, }: AvatarGroupProps): JSX.Element;
 
@@ -293,7 +293,7 @@ export declare const Badge: typeof BadgeComponent & {
 
 export declare type BadgeClassNames = SemanticClassNames<BadgeSemanticSlot>;
 
-declare function BadgeComponent({ children, count, overflowCount, dot, showZero, size, status, text, color, offset, title, className, style, classNames, styles, }: BadgeProps): JSX.Element | null;
+declare function BadgeComponent({ children, count, overflowCount, dot, showZero, size, status, text, color, offset, title, className, style, classNames: classNamesProp, styles, }: BadgeProps): JSX.Element | null;
 
 export declare type BadgePresetColor = 'pink' | 'red' | 'yellow' | 'orange' | 'cyan' | 'green' | 'blue' | 'purple' | 'geekblue' | 'magenta' | 'volcano' | 'gold' | 'lime';
 
@@ -315,7 +315,7 @@ export declare interface BadgeProps {
     styles?: BadgeStyles;
 }
 
-declare function BadgeRibbon({ children, text, color, placement, className, style, classNames, styles, }: BadgeRibbonProps): JSX.Element;
+declare function BadgeRibbon({ children, text, color, placement, className, style, classNames: classNamesProp, styles, }: BadgeRibbonProps): JSX.Element;
 
 export declare interface BadgeRibbonProps {
     children?: ReactNode;
@@ -556,7 +556,7 @@ declare interface BubbleType extends React.FC<BubbleProps> {
     Menu: typeof BubbleMenu;
 }
 
-export declare function Button({ variant, size: sizeProp, color, loading, shadow, bordered, icon, iconPlacement, clickAnimation, hoverAnimation, gradient, gradientAngle, gradientCss, block, disabled: disabledProp, children, className, style, classNames, styles, onMouseEnter, onMouseLeave, onClick, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ variant, size: sizeProp, color, loading, shadow, bordered, icon, iconPlacement, clickAnimation, hoverAnimation, gradient, gradientAngle, gradientCss, block, disabled: disabledProp, children, className, style, classNames: classNamesProp, styles, onMouseEnter, onMouseLeave, onClick, ...props }: ButtonProps): JSX.Element;
 
 export declare type ButtonAnimation = 'pulse' | 'ripple' | 'shake' | 'firecracker' | 'confetti';
 
@@ -797,7 +797,7 @@ export declare function ChatIcon({ size }: {
 
 export declare type CheckableTagClassNames = SemanticClassNames<CheckableTagSemanticSlot>;
 
-declare function CheckableTagComponent({ children, checked, onChange, color, disabled, className, style, classNames, styles, }: CheckableTagProps): JSX.Element;
+declare function CheckableTagComponent({ children, checked, onChange, color, disabled, className, style, classNames: classNamesProp, styles, }: CheckableTagProps): JSX.Element;
 
 export declare interface CheckableTagProps {
     children?: ReactNode;
@@ -829,11 +829,11 @@ export declare interface CheckboxChangeEvent {
 
 export declare type CheckboxClassNames = SemanticClassNames<CheckboxSemanticSlot>;
 
-declare function CheckboxComponent({ checked: controlledChecked, defaultChecked, disabled, indeterminate, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames, styles, }: CheckboxProps): JSX.Element;
+declare function CheckboxComponent({ checked: controlledChecked, defaultChecked, disabled, indeterminate, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames: classNamesProp, styles, }: CheckboxProps): JSX.Element;
 
 export declare type CheckboxGroupClassNames = SemanticClassNames<CheckboxGroupSemanticSlot>;
 
-declare function CheckboxGroupComponent({ options, value: controlledValue, defaultValue, disabled, name, onChange, children, className, style, classNames, styles, }: CheckboxGroupProps): JSX.Element;
+declare function CheckboxGroupComponent({ options, value: controlledValue, defaultValue, disabled, name, onChange, children, className, style, classNames: classNamesProp, styles, }: CheckboxGroupProps): JSX.Element;
 
 export declare interface CheckboxGroupProps {
     /** Options array for generating checkboxes */
@@ -919,7 +919,7 @@ export declare type CheckboxStyles = SemanticStyles<CheckboxSemanticSlot>;
  */
 export declare function classNames(...args: ClassValue[]): string;
 
-export declare type ClassValue = string | number | boolean | null | undefined | Record<string, boolean> | ClassValue[];
+export declare type ClassValue = string | number | boolean | null | undefined | Record<string, boolean | undefined> | ClassValue[];
 
 export declare function CloseIcon({ size }: {
     size?: number;
@@ -1490,7 +1490,7 @@ export declare interface DisabledTimes {
     disabledSeconds?: (hour: number, minute: number) => number[];
 }
 
-export declare function Divider({ type, dashed, orientation, orientationMargin, plain, color, thickness, children, className, style, classNames, styles, }: DividerProps): JSX.Element;
+export declare function Divider({ type, dashed, orientation, orientationMargin, plain, color, thickness, children, className, style, classNames: classNamesProp, styles, }: DividerProps): JSX.Element;
 
 export declare type DividerClassNames = SemanticClassNames<DividerSemanticSlot>;
 
@@ -1501,17 +1501,17 @@ export declare type DividerOrientation = 'left' | 'center' | 'right';
 export declare interface DividerProps {
     /** Tipo de divider */
     type?: DividerType;
-    /** Línea discontinua (dashed) */
+    /** Linea discontinua (dashed) */
     dashed?: boolean;
-    /** Posición del texto (solo para horizontal) */
+    /** Posicion del texto (solo para horizontal) */
     orientation?: DividerOrientation;
-    /** Margen entre el texto y la línea más cercana (en px o porcentaje) */
+    /** Margen entre el texto y la linea mas cercana (en px o porcentaje) */
     orientationMargin?: number | string;
-    /** Texto sin estilo especial (más pequeño y sin negrita) */
+    /** Texto sin estilo especial (mas pequeno y sin negrita) */
     plain?: boolean;
     /** Color del divider */
     color?: DividerColor;
-    /** Grosor de la línea ('thin' | 'normal' | 'medium' | 'thick' o número en px) */
+    /** Grosor de la linea ('thin' | 'normal' | 'medium' | 'thick' o numero en px) */
     thickness?: DividerThickness;
     /** Texto dentro del divider */
     children?: ReactNode;
@@ -1686,9 +1686,9 @@ export declare type DropdownStyles = SemanticStyles<DropdownSemanticSlot>;
 export declare type DropdownTrigger = 'hover' | 'click' | 'contextMenu';
 
 export declare interface EllipsisConfig {
-    /** Número de filas antes de truncar (default: 1) */
+    /** Numero de filas antes de truncar (default: 1) */
     rows?: number;
-    /** Mostrar botón para expandir/colapsar */
+    /** Mostrar boton para expandir/colapsar */
     expandable?: boolean;
     /** Callback cuando cambia el estado expandido */
     onExpand?: (expanded: boolean) => void;
@@ -1700,7 +1700,7 @@ export declare const Empty: typeof EmptyComponent & {
 
 export declare type EmptyClassNames = SemanticClassNames<EmptySemanticSlot>;
 
-declare function EmptyComponent({ image, imageStyle, description, tumbleweed, iconColor, tumbleweedColor, windColor, shadowColor, children, className, style, classNames, styles, }: EmptyProps): JSX.Element;
+declare function EmptyComponent({ image, imageStyle, description, tumbleweed, iconColor, tumbleweedColor, windColor, shadowColor, children, className, style, classNames: classNamesProp, styles, }: EmptyProps): JSX.Element;
 
 export declare interface EmptyProps {
     /** Custom image. String is treated as image URL. Defaults to built-in simple illustration */
@@ -1788,13 +1788,13 @@ export declare type FlexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-
 export declare interface FlexProps {
     /** Contenido del flex container */
     children?: ReactNode;
-    /** Dirección vertical (column) en lugar de horizontal (row) */
+    /** Direccion vertical (column) en lugar de horizontal (row) */
     vertical?: boolean;
     /** Comportamiento de wrap */
     wrap?: FlexWrap | boolean;
-    /** Alineación horizontal (justify-content) */
+    /** Alineacion horizontal (justify-content) */
     justify?: FlexJustify;
-    /** Alineación vertical (align-items) */
+    /** Alineacion vertical (align-items) */
     align?: FlexAlign;
     /** Espacio entre elementos ('small' | 'middle' | 'large' | number | [horizontal, vertical]) */
     gap?: FlexGap;
@@ -2056,6 +2056,15 @@ export declare type FormValidateStatus = 'success' | 'warning' | 'error' | 'vali
 
 export declare type FormVariant = 'outlined' | 'filled' | 'borderless' | 'underlined';
 
+/**
+ * Maps a semantic color name to scoped CSS custom properties.
+ * Components set these as inline style, and CSS classes reference
+ * var(--_base), var(--_hover), etc. for their variant styles.
+ *
+ * This avoids generating variant × color combinatorial CSS classes.
+ */
+export declare function getColorVars(color: string): Record<string, string>;
+
 /**
  * Resolves a responsive value for the given window width.
  * If `value` is a plain (non-object) scalar, it is returned as-is.
@@ -3205,49 +3214,32 @@ export declare interface ProgressSuccessConfig {
 
 export declare type ProgressType = 'line' | 'circle' | 'dashboard';
 
-export declare function QRCode({ value, type, icon, size, iconSize, color, bgColor, marginSize, bordered, errorLevel, status, statusRender, onRefresh, className, style, classNames, styles, }: QRCodeProps): JSX.Element;
+export declare function QRCode({ value, type, icon, size, iconSize, color, bgColor, marginSize, bordered, errorLevel, status, statusRender, onRefresh, className, style, classNames: classNamesProp, styles, }: QRCodeProps): JSX.Element;
 
 export declare type QRCodeClassNames = SemanticClassNames<QRCodeSemanticSlot>;
 
 export declare type QRCodeErrorLevel = ErrorCorrectionLevel;
 
 export declare interface QRCodeProps {
-    /** Text/URL to encode */
     value: string;
-    /** Render method */
     type?: QRCodeType;
-    /** Image URL for embedded logo */
     icon?: string;
-    /** QR code size in pixels */
     size?: number;
-    /** Icon size */
     iconSize?: number | {
         width: number;
         height: number;
     };
-    /** QR code module color */
     color?: string;
-    /** Background color */
     bgColor?: string;
-    /** Quiet zone in modules */
     marginSize?: number;
-    /** Show border */
     bordered?: boolean;
-    /** Error correction level */
     errorLevel?: QRCodeErrorLevel;
-    /** Current status */
     status?: QRCodeStatus;
-    /** Custom status display */
     statusRender?: (info: StatusRenderInfo) => ReactNode;
-    /** Callback when refresh is clicked */
     onRefresh?: () => void;
-    /** Root CSS class */
     className?: string;
-    /** Root inline style */
     style?: CSSProperties;
-    /** Semantic class names */
     classNames?: QRCodeClassNames;
-    /** Semantic styles */
     styles?: QRCodeStyles;
 }
 
@@ -3264,7 +3256,7 @@ export declare const Radio: typeof RadioComponent & {
     Button: typeof RadioButtonComponent;
 };
 
-declare function RadioButtonComponent({ checked: controlledChecked, defaultChecked, disabled, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames, styles, _position, }: RadioButtonProps & {
+declare function RadioButtonComponent({ checked: controlledChecked, defaultChecked, disabled, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames: classNamesProp, styles, _position, }: RadioButtonProps & {
     _position?: 'first' | 'middle' | 'last' | 'only';
 }): JSX.Element;
 
@@ -3280,11 +3272,11 @@ export declare interface RadioChangeEvent {
 
 export declare type RadioClassNames = SemanticClassNames<RadioSemanticSlot>;
 
-declare function RadioComponent({ checked: controlledChecked, defaultChecked, disabled, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames, styles, }: RadioProps): JSX.Element;
+declare function RadioComponent({ checked: controlledChecked, defaultChecked, disabled, autoFocus, onChange, value, children, id, name, tabIndex, className, style, classNames: classNamesProp, styles, }: RadioProps): JSX.Element;
 
 export declare type RadioGroupClassNames = SemanticClassNames<RadioGroupSemanticSlot>;
 
-declare function RadioGroupComponent({ value: controlledValue, defaultValue, onChange, disabled, name, options, optionType, buttonStyle, size, children, className, style, classNames, styles, }: RadioGroupProps): JSX.Element;
+declare function RadioGroupComponent({ value: controlledValue, defaultValue, onChange, disabled, name, options, optionType, buttonStyle, size, children, className, style, classNames: classNamesProp, styles, }: RadioGroupProps): JSX.Element;
 
 export declare interface RadioGroupProps {
     value?: string | number;
@@ -3793,7 +3785,7 @@ export declare type SpaceClassNames = SemanticClassNames<SpaceSemanticSlot>;
 export declare interface SpaceCompactProps {
     /** Contenido */
     children?: ReactNode;
-    /** Dirección del grupo compacto */
+    /** Direccion del grupo compacto */
     direction?: 'horizontal' | 'vertical';
     /** Ocupa el 100% del ancho disponible */
     block?: boolean;
@@ -3806,11 +3798,11 @@ export declare interface SpaceCompactProps {
 export declare interface SpaceProps {
     /** Contenido */
     children?: ReactNode;
-    /** Tamaño del espacio entre elementos. Puede ser un valor o [horizontal, vertical] */
+    /** Tamano del espacio entre elementos. Puede ser un valor o [horizontal, vertical] */
     size?: SpaceSize | [SpaceSize, SpaceSize];
-    /** Orientación: horizontal o vertical */
+    /** Orientacion: horizontal o vertical */
     direction?: 'horizontal' | 'vertical';
-    /** Alineación de los elementos en el eje cruzado */
+    /** Alineacion de los elementos en el eje cruzado */
     align?: SpaceAlign;
     /** Permitir wrap cuando se desborden */
     wrap?: boolean;
@@ -3826,7 +3818,7 @@ export declare interface SpaceProps {
     styles?: SpaceStyles;
 }
 
-declare function SpaceRoot({ children, size, direction, align, wrap, split, className, style, classNames, styles, }: SpaceProps): JSX.Element | null;
+declare function SpaceRoot({ children, size, direction, align, wrap, split, className, style, classNames: classNamesProp, styles, }: SpaceProps): JSX.Element | null;
 
 export declare type SpaceSemanticSlot = 'root' | 'item' | 'separator';
 
@@ -3938,63 +3930,38 @@ export declare const Statistic: typeof StatisticComponent & {
 
 export declare type StatisticClassNames = SemanticClassNames<StatisticSemanticSlot>;
 
-declare function StatisticComponent({ title, value, precision, decimalSeparator, groupSeparator, prefix, suffix, formatter, loading, loadingWidth, className, style, classNames, styles, }: StatisticProps): JSX.Element;
+declare function StatisticComponent({ title, value, precision, decimalSeparator, groupSeparator, prefix, suffix, formatter, loading, loadingWidth, className, style, classNames: classNamesProp, styles, }: StatisticProps): JSX.Element;
 
-declare function StatisticCountdown({ title, value, format, prefix, suffix, onFinish, onChange, className, style, classNames, styles, }: StatisticCountdownProps): JSX.Element;
+declare function StatisticCountdown({ title, value, format, prefix, suffix, onFinish, onChange, className, style, classNames: classNamesProp, styles, }: StatisticCountdownProps): JSX.Element;
 
 export declare interface StatisticCountdownProps {
-    /** Title displayed above the countdown */
     title?: ReactNode;
-    /** Target timestamp in milliseconds */
     value: number;
-    /** Format string — tokens: D, DD, H, HH, m, mm, s, ss, SSS. Use [text] for literals, [singular|plural] for inflection */
     format?: string;
-    /** Content rendered before the value */
     prefix?: ReactNode;
-    /** Content rendered after the value */
     suffix?: ReactNode;
-    /** Callback when countdown reaches zero */
     onFinish?: () => void;
-    /** Callback on each tick, receives remaining ms */
     onChange?: (value: number) => void;
-    /** Root CSS class */
     className?: string;
-    /** Root inline style */
     style?: CSSProperties;
-    /** Semantic class names */
     classNames?: CountdownClassNames;
-    /** Semantic styles */
     styles?: CountdownStyles;
 }
 
 export declare interface StatisticProps {
-    /** Title displayed above the value */
     title?: ReactNode;
-    /** Numeric or string value to display */
     value?: string | number;
-    /** Number of decimal places */
     precision?: number;
-    /** Separator for decimal part */
     decimalSeparator?: string;
-    /** Separator for thousands grouping */
     groupSeparator?: string;
-    /** Content rendered before the value */
     prefix?: ReactNode;
-    /** Content rendered after the value */
     suffix?: ReactNode;
-    /** Custom formatter for the value — overrides default number formatting */
     formatter?: (value: string | number) => ReactNode;
-    /** Show loading placeholder instead of value */
     loading?: boolean;
-    /** Width of the loading placeholder (default '7rem') */
     loadingWidth?: string;
-    /** Root CSS class */
     className?: string;
-    /** Root inline style */
     style?: CSSProperties;
-    /** Semantic class names */
     classNames?: StatisticClassNames;
-    /** Semantic styles */
     styles?: StatisticStyles;
 }
 
@@ -4302,7 +4269,7 @@ export declare const Tag: typeof TagComponent & {
 
 export declare type TagClassNames = SemanticClassNames<TagSemanticSlot>;
 
-declare function TagComponent({ children, color, variant, closable, closeIcon, onClose, icon, bordered, href, target, disabled, onClick, className, style, classNames, styles, }: TagProps): JSX.Element | null;
+declare function TagComponent({ children, color, variant, closable, closeIcon, onClose, icon, bordered, href, target, disabled, onClick, className, style, classNames: classNamesProp, styles, }: TagProps): JSX.Element | null;
 
 export declare type TagPresetColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'pink' | 'red' | 'yellow' | 'orange' | 'cyan' | 'green' | 'blue' | 'purple' | 'geekblue' | 'magenta' | 'volcano' | 'gold' | 'lime';
 
@@ -4331,7 +4298,7 @@ export declare type TagStyles = SemanticStyles<TagSemanticSlot>;
 
 export declare type TagVariant = 'outlined' | 'filled' | 'solid';
 
-declare function Text_2({ children, type, size, disabled, mark, code, keyboard, underline, delete: del, weight, lineHeight, italic, copyable, ellipsis, className, style, classNames, styles, }: TextProps): JSX.Element;
+declare function Text_2({ children, type, size, disabled, mark, code, keyboard, underline, delete: del, weight, lineHeight, italic, copyable, ellipsis, className, style, classNames: classNamesProp, styles, }: TextProps): JSX.Element;
 export { Text_2 as Text }
 
 export declare type TextAreaClassNames = SemanticClassNames<TextAreaSemanticSlot>;
@@ -4393,13 +4360,13 @@ export declare interface TextProps {
     children: ReactNode;
     /** Tipo/color del texto */
     type?: TextType;
-    /** Tamaño del texto */
+    /** Tamano del texto */
     size?: TextSize;
-    /** Texto deshabilitado (gris y sin interacción) */
+    /** Texto deshabilitado (gris y sin interaccion) */
     disabled?: boolean;
     /** Resaltar texto con fondo amarillo */
     mark?: boolean;
-    /** Estilo de código inline */
+    /** Estilo de codigo inline */
     code?: boolean;
     /** Estilo de tecla de teclado */
     keyboard?: boolean;
@@ -4413,7 +4380,7 @@ export declare interface TextProps {
     lineHeight?: TextLineHeight;
     /** Texto en cursiva */
     italic?: boolean;
-    /** Mostrar botón para copiar el texto */
+    /** Mostrar boton para copiar el texto */
     copyable?: boolean | {
         text?: string;
         onCopy?: () => void;
@@ -4469,7 +4436,7 @@ declare interface ThemeProviderProps {
     config?: ThemeConfig;
 }
 
-export declare function Timeline({ items, mode, variant, horizontal, titleSpan, pending, pendingDot, reverse, className, style, classNames, styles, }: TimelineProps): JSX.Element;
+export declare function Timeline({ items, mode, variant, horizontal, titleSpan, pending, pendingDot, reverse, className, style, classNames: classNamesProp, styles, }: TimelineProps): JSX.Element;
 
 export declare type TimelineClassNames = SemanticClassNames<TimelineSemanticSlot>;
 
@@ -4614,7 +4581,7 @@ export declare interface TimeRangePickerProps {
     id?: string;
 }
 
-export declare function Toggle({ options, value, defaultValue, onChange, disabled, block, vertical, size, name, className, style, classNames, styles, }: ToggleProps): JSX.Element;
+export declare function Toggle({ options, value, defaultValue, onChange, disabled, block, vertical, size, name, className, style, classNames: classNamesProp, styles, }: ToggleProps): JSX.Element;
 
 export declare type ToggleClassNames = SemanticClassNames<ToggleSemanticSlot>;