neogestify-ui-components 2.2.1 → 2.3.0

package/dist/components/html/index.d.mts

@@ -1,30 +1,52 @@
-import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes } from 'react';
+import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type ButtonVariant = 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonShape = 'rounded' | 'pill' | 'square';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+    variant?: ButtonVariant;
     children: ReactNode;
     isLoading?: boolean;
     loadingText?: string;
     isActive?: boolean;
+    size?: ButtonSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    fullWidth?: boolean;
+    shape?: ButtonShape;
 }
 declare const Button: FC<ButtonProps>;
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+type InputVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     label?: string | ReactNode;
     error?: string;
     helperText?: string;
     icon?: ReactNode;
     iconSide?: 'left' | 'right';
+    variant?: InputVariant;
+    size?: InputSize;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare const Input: FC<InputProps>;
 
+type TextAreaVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type TextAreaSize = 'small' | 'medium' | 'large';
+type ResizeOption = 'vertical' | 'horizontal' | 'both' | 'none';
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string | ReactNode;
     error?: string;
     helperText?: string;
-    variant?: 'default' | 'outline' | 'filled' | 'minimal';
-    size?: 'small' | 'medium' | 'large';
+    variant?: TextAreaVariant;
+    size?: TextAreaSize;
+    autoResize?: boolean;
+    showCount?: boolean;
+    resize?: ResizeOption;
 }
 declare const TextArea: FC<TextAreaProps>;
 
@@ -32,9 +54,13 @@ interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+    /** Number of columns for a CSS grid layout. 1 = single column, >1 = multi-column grid. */
+    columns?: number;
 }
 declare const Form: FC<FormProps>;
 
+type SelectVariant = 'default' | 'outline' | 'filled' | 'minimal' | 'custom' | 'small';
+type SelectSize = 'sm' | 'md' | 'lg';
 interface Option {
     value: string | number;
     label: string;
@@ -44,31 +70,113 @@ interface Option {
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     options: Option[];
     placeholder?: string;
-    variant?: 'default' | 'small';
-    error?: boolean;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    error?: string | boolean;
     helperText?: string;
     label?: string | ReactNode;
+    icon?: ReactNode;
 }
 declare const Select: FC<SelectProps>;
 
+type TableVariant = 'default' | 'striped' | 'bordered' | 'minimal' | 'ghost' | 'card' | 'accent' | 'dark' | 'custom';
+type TableSize = 'sm' | 'md' | 'lg';
+interface SortState {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+interface ColumnDef {
+    /** Contenido del encabezado */
+    header: ReactNode;
+    /** Clase CSS adicional para toda la columna (th + td) */
+    className?: string;
+    /** Alinear el contenido de esta columna */
+    align?: 'left' | 'center' | 'right';
+    /** Ancho fijo (px, %, rem…) */
+    width?: string | number;
+    /** Ancho mínimo */
+    minWidth?: string | number;
+    /** Fija esta columna a la izquierda durante scroll horizontal */
+    sticky?: boolean;
+    /** Estilos inline exclusivos para <th> */
+    thStyle?: CSSProperties;
+    /** Estilos inline exclusivos para <td> */
+    tdStyle?: CSSProperties;
+    /** Muestra indicador de ordenación. Requiere `key` */
+    sortable?: boolean;
+    /** Clave usada en sortState y onSort */
+    key?: string;
+}
 interface TableProps {
-    headers: ReactNode[];
+    /**
+     * Definición de columnas. Acepta strings simples o ColumnDef para
+     * configuración avanzada (ancho, sticky, sort, etc.).
+     */
+    columns: (ColumnDef | ReactNode)[];
+    /** Filas del cuerpo. Cada fila es un arreglo de celdas. */
     rows: ReactNode[][];
-    variant?: 'default' | 'custom';
+    /** Estilo visual. Default: 'default' */
+    variant?: TableVariant;
+    /** Tamaño de padding. Default: 'md' */
+    size?: TableSize;
+    /** Clase CSS adicional para el wrapper <div> */
     className?: string;
+    /** Clase CSS adicional para el <table> */
+    tableClassName?: string;
+    /** Clase CSS adicional para cada <th> */
     thClassName?: string;
+    /** Clase CSS adicional para cada <td> */
     tdClassName?: string;
+    /** Clase CSS adicional por fila del body */
+    trClassName?: string | ((rowIndex: number) => string);
+    /** Nodo a mostrar cuando rows está vacío */
+    emptyState?: ReactNode;
+    /** Callback al hacer click en una fila */
+    onRowClick?: (rowIndex: number) => void;
+    /** Oculta el thead */
+    hideHeader?: boolean;
+    /** Estilos inline para el <table> */
+    style?: CSSProperties;
+    /** Fija el thead al hacer scroll vertical */
+    stickyHeader?: boolean;
+    /** Caption accesible de la tabla */
+    caption?: ReactNode;
+    /** Filas del <tfoot> */
+    footerRows?: ReactNode[][];
+    /** Muestra esqueleto animado en lugar de rows */
+    loading?: boolean;
+    /** Número de filas esqueleto cuando loading=true. Default: 4 */
+    loadingRows?: number;
+    /** Estilo inline por fila del body */
+    getRowStyle?: (rowIndex: number) => CSSProperties;
+    /** Agrega rounded-lg al wrapper */
+    rounded?: boolean;
+    /** Agrega sombra al wrapper */
+    shadow?: boolean;
+    /** Desactiva el efecto hover en filas. Default: true */
+    hoverable?: boolean;
+    /** Estado actual de ordenación */
+    sortState?: SortState | null;
+    /** Callback al hacer click en un th sortable */
+    onSort?: (key: string) => void;
 }
-declare function Table({ headers, rows, variant, className, thClassName, tdClassName }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, rows, variant, size, className, tableClassName, thClassName, tdClassName, trClassName, emptyState, onRowClick, hideHeader, style, stickyHeader, caption, footerRows, loading, loadingRows, getRowStyle, rounded, shadow, hoverable, sortState, onSort, }: TableProps): react_jsx_runtime.JSX.Element;
 
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalVariant = 'default' | 'danger' | 'success' | 'warning';
 interface ModalProps {
     onClose: () => void;
-    title: string;
+    title: React__default.ReactNode;
     children: React__default.ReactNode;
     footer?: React__default.ReactNode;
+    /** @deprecated Use size instead */
     maxWidth?: string;
+    size?: ModalSize;
     showCloseButton?: boolean;
     zIndex?: number;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    variant?: ModalVariant;
 }
 interface ModalRef {
     handleClose: () => void;
@@ -81,6 +189,10 @@ interface LoadingProps {
     color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
     label?: string;
     className?: string;
+    /** Renders over the nearest positioned ancestor (parent needs position: relative) */
+    overlay?: boolean;
+    /** Renders as a fixed full-page overlay */
+    fullPage?: boolean;
 }
 declare const Loading: FC<LoadingProps>;
 

package/dist/components/html/index.d.ts

@@ -1,30 +1,52 @@
-import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes } from 'react';
+import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type ButtonVariant = 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonShape = 'rounded' | 'pill' | 'square';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+    variant?: ButtonVariant;
     children: ReactNode;
     isLoading?: boolean;
     loadingText?: string;
     isActive?: boolean;
+    size?: ButtonSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    fullWidth?: boolean;
+    shape?: ButtonShape;
 }
 declare const Button: FC<ButtonProps>;
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+type InputVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     label?: string | ReactNode;
     error?: string;
     helperText?: string;
     icon?: ReactNode;
     iconSide?: 'left' | 'right';
+    variant?: InputVariant;
+    size?: InputSize;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare const Input: FC<InputProps>;
 
+type TextAreaVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type TextAreaSize = 'small' | 'medium' | 'large';
+type ResizeOption = 'vertical' | 'horizontal' | 'both' | 'none';
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string | ReactNode;
     error?: string;
     helperText?: string;
-    variant?: 'default' | 'outline' | 'filled' | 'minimal';
-    size?: 'small' | 'medium' | 'large';
+    variant?: TextAreaVariant;
+    size?: TextAreaSize;
+    autoResize?: boolean;
+    showCount?: boolean;
+    resize?: ResizeOption;
 }
 declare const TextArea: FC<TextAreaProps>;
 
@@ -32,9 +54,13 @@ interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+    /** Number of columns for a CSS grid layout. 1 = single column, >1 = multi-column grid. */
+    columns?: number;
 }
 declare const Form: FC<FormProps>;
 
+type SelectVariant = 'default' | 'outline' | 'filled' | 'minimal' | 'custom' | 'small';
+type SelectSize = 'sm' | 'md' | 'lg';
 interface Option {
     value: string | number;
     label: string;
@@ -44,31 +70,113 @@ interface Option {
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     options: Option[];
     placeholder?: string;
-    variant?: 'default' | 'small';
-    error?: boolean;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    error?: string | boolean;
     helperText?: string;
     label?: string | ReactNode;
+    icon?: ReactNode;
 }
 declare const Select: FC<SelectProps>;
 
+type TableVariant = 'default' | 'striped' | 'bordered' | 'minimal' | 'ghost' | 'card' | 'accent' | 'dark' | 'custom';
+type TableSize = 'sm' | 'md' | 'lg';
+interface SortState {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+interface ColumnDef {
+    /** Contenido del encabezado */
+    header: ReactNode;
+    /** Clase CSS adicional para toda la columna (th + td) */
+    className?: string;
+    /** Alinear el contenido de esta columna */
+    align?: 'left' | 'center' | 'right';
+    /** Ancho fijo (px, %, rem…) */
+    width?: string | number;
+    /** Ancho mínimo */
+    minWidth?: string | number;
+    /** Fija esta columna a la izquierda durante scroll horizontal */
+    sticky?: boolean;
+    /** Estilos inline exclusivos para <th> */
+    thStyle?: CSSProperties;
+    /** Estilos inline exclusivos para <td> */
+    tdStyle?: CSSProperties;
+    /** Muestra indicador de ordenación. Requiere `key` */
+    sortable?: boolean;
+    /** Clave usada en sortState y onSort */
+    key?: string;
+}
 interface TableProps {
-    headers: ReactNode[];
+    /**
+     * Definición de columnas. Acepta strings simples o ColumnDef para
+     * configuración avanzada (ancho, sticky, sort, etc.).
+     */
+    columns: (ColumnDef | ReactNode)[];
+    /** Filas del cuerpo. Cada fila es un arreglo de celdas. */
     rows: ReactNode[][];
-    variant?: 'default' | 'custom';
+    /** Estilo visual. Default: 'default' */
+    variant?: TableVariant;
+    /** Tamaño de padding. Default: 'md' */
+    size?: TableSize;
+    /** Clase CSS adicional para el wrapper <div> */
     className?: string;
+    /** Clase CSS adicional para el <table> */
+    tableClassName?: string;
+    /** Clase CSS adicional para cada <th> */
     thClassName?: string;
+    /** Clase CSS adicional para cada <td> */
     tdClassName?: string;
+    /** Clase CSS adicional por fila del body */
+    trClassName?: string | ((rowIndex: number) => string);
+    /** Nodo a mostrar cuando rows está vacío */
+    emptyState?: ReactNode;
+    /** Callback al hacer click en una fila */
+    onRowClick?: (rowIndex: number) => void;
+    /** Oculta el thead */
+    hideHeader?: boolean;
+    /** Estilos inline para el <table> */
+    style?: CSSProperties;
+    /** Fija el thead al hacer scroll vertical */
+    stickyHeader?: boolean;
+    /** Caption accesible de la tabla */
+    caption?: ReactNode;
+    /** Filas del <tfoot> */
+    footerRows?: ReactNode[][];
+    /** Muestra esqueleto animado en lugar de rows */
+    loading?: boolean;
+    /** Número de filas esqueleto cuando loading=true. Default: 4 */
+    loadingRows?: number;
+    /** Estilo inline por fila del body */
+    getRowStyle?: (rowIndex: number) => CSSProperties;
+    /** Agrega rounded-lg al wrapper */
+    rounded?: boolean;
+    /** Agrega sombra al wrapper */
+    shadow?: boolean;
+    /** Desactiva el efecto hover en filas. Default: true */
+    hoverable?: boolean;
+    /** Estado actual de ordenación */
+    sortState?: SortState | null;
+    /** Callback al hacer click en un th sortable */
+    onSort?: (key: string) => void;
 }
-declare function Table({ headers, rows, variant, className, thClassName, tdClassName }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, rows, variant, size, className, tableClassName, thClassName, tdClassName, trClassName, emptyState, onRowClick, hideHeader, style, stickyHeader, caption, footerRows, loading, loadingRows, getRowStyle, rounded, shadow, hoverable, sortState, onSort, }: TableProps): react_jsx_runtime.JSX.Element;
 
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalVariant = 'default' | 'danger' | 'success' | 'warning';
 interface ModalProps {
     onClose: () => void;
-    title: string;
+    title: React__default.ReactNode;
     children: React__default.ReactNode;
     footer?: React__default.ReactNode;
+    /** @deprecated Use size instead */
     maxWidth?: string;
+    size?: ModalSize;
     showCloseButton?: boolean;
     zIndex?: number;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    variant?: ModalVariant;
 }
 interface ModalRef {
     handleClose: () => void;
@@ -81,6 +189,10 @@ interface LoadingProps {
     color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
     label?: string;
     className?: string;
+    /** Renders over the nearest positioned ancestor (parent needs position: relative) */
+    overlay?: boolean;
+    /** Renders as a fixed full-page overlay */
+    fullPage?: boolean;
 }
 declare const Loading: FC<LoadingProps>;