@scmlatam/web-ui 0.2.6 → 0.2.8

package/dist/images/clock.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_585_3487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_585_3487)">
+<path d="M17.3333 15.4667V10.6667C17.3333 10.289 17.2055 9.9723 16.95 9.71675C16.6944 9.46119 16.3777 9.33341 16 9.33341C15.6222 9.33341 15.3055 9.46119 15.05 9.71675C14.7944 9.9723 14.6666 10.289 14.6666 10.6667V15.9667C14.6666 16.1445 14.7 16.3167 14.7666 16.4834C14.8333 16.6501 14.9333 16.8001 15.0666 16.9334L19.4666 21.3334C19.7111 21.5779 20.0222 21.7001 20.4 21.7001C20.7777 21.7001 21.0888 21.5779 21.3333 21.3334C21.5777 21.089 21.7 20.7779 21.7 20.4001C21.7 20.0223 21.5777 19.7112 21.3333 19.4667L17.3333 15.4667ZM16 29.3334C14.1555 29.3334 12.4222 28.9834 10.8 28.2834C9.17774 27.5834 7.76663 26.6334 6.56663 25.4334C5.36663 24.2334 4.41663 22.8223 3.71663 21.2001C3.01663 19.5779 2.66663 17.8445 2.66663 16.0001C2.66663 14.1556 3.01663 12.4223 3.71663 10.8001C4.41663 9.17786 5.36663 7.76675 6.56663 6.56675C7.76663 5.36675 9.17774 4.41675 10.8 3.71675C12.4222 3.01675 14.1555 2.66675 16 2.66675C17.8444 2.66675 19.5777 3.01675 21.2 3.71675C22.8222 4.41675 24.2333 5.36675 25.4333 6.56675C26.6333 7.76675 27.5833 9.17786 28.2833 10.8001C28.9833 12.4223 29.3333 14.1556 29.3333 16.0001C29.3333 17.8445 28.9833 19.5779 28.2833 21.2001C27.5833 22.8223 26.6333 24.2334 25.4333 25.4334C24.2333 26.6334 22.8222 27.5834 21.2 28.2834C19.5777 28.9834 17.8444 29.3334 16 29.3334ZM16 26.6667C18.9555 26.6667 21.4722 25.6279 23.55 23.5501C25.6277 21.4723 26.6666 18.9556 26.6666 16.0001C26.6666 13.0445 25.6277 10.5279 23.55 8.45008C21.4722 6.3723 18.9555 5.33341 16 5.33341C13.0444 5.33341 10.5277 6.3723 8.44996 8.45008C6.37218 10.5279 5.33329 13.0445 5.33329 16.0001C5.33329 18.9556 6.37218 21.4723 8.44996 23.5501C10.5277 25.6279 13.0444 26.6667 16 26.6667Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/dist/src/rb-components/feedback/system-alert/SystemAlert.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface SystemAlertProps {
+}
+declare const SystemAlert: ({}: SystemAlertProps) => React.ReactPortal | null;
+export { SystemAlert };
+export type { SystemAlertProps };

package/dist/src/rb-components/feedback/system-alert/index.d.ts

@@ -0,0 +1,3 @@
+export { SystemAlert } from './SystemAlert';
+export { useSystemAlert } from './useSystemAlert';
+export type { SystemAlertKey, SystemAlertSeverity, } from './systemAlertStore';

package/dist/src/rb-components/feedback/system-alert/systemAlertStore.d.ts

@@ -0,0 +1,13 @@
+export type SystemAlertSeverity = "error" | "info" | "success" | "warning" | "default";
+export type SystemAlertKey = string;
+export interface SystemAlertItem {
+    id: SystemAlertKey;
+    severity: SystemAlertSeverity;
+    message: string;
+    duration?: number;
+}
+type Listener = (items: SystemAlertItem[]) => void;
+export declare function subscribeSystemAlerts(listener: Listener): () => void;
+export declare function addSystemAlert(alert: SystemAlertItem): void;
+export declare function removeSystemAlert(id: SystemAlertKey): void;
+export {};

package/dist/src/rb-components/feedback/system-alert/useSystemAlert.d.ts

@@ -0,0 +1,7 @@
+import { SystemAlertKey, SystemAlertSeverity } from './systemAlertStore';
+declare const useSystemAlert: () => {
+    showAlert: (severity: SystemAlertSeverity, message: string) => SystemAlertKey;
+    closeAlert: (key: SystemAlertKey) => void;
+};
+export { useSystemAlert };
+export type { SystemAlertSeverity, SystemAlertKey };

package/dist/src/rb-components/form/FormShell.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type FormShellSize = "s" | "m" | "l";
+export interface FormShellProps {
+    open: boolean;
+    title?: ReactNode;
+    alert?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: () => void;
+    loading?: boolean;
+    closeLabel?: string;
+    size?: FormShellSize;
+}
+export declare function FormShell({ open, title, alert, children, footer, onClose, loading, closeLabel, size, }: FormShellProps): import("react/jsx-runtime").JSX.Element | null;
+export default FormShell;

package/dist/src/rb-components/form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormShell } from './FormShell';
+export type { FormShellProps } from './FormShell';

package/dist/src/rb-components/index.d.ts

@@ -1,3 +1,7 @@
 export * from './shell';
 export * from './sidebar';
 export * from './topbar';
+export * from './form';
+export * from './ui';
+export * from './table';
+export * from './navigation';

package/dist/src/rb-components/navigation/PillsTabs.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * PILLS TABS / SEGMENTED SWITCH
+ * ----------------------------------------------------------------------------
+ *
+ * Componente simple para separar contenido por pestañas usando un switch visual.
+ *
+ * Objetivo:
+ * - No depende de MUI.
+ * - No maneja permisos.
+ * - No decide qué contenido renderizar.
+ * - Solo renderiza opciones y notifica el tab activo con onChange.
+ *
+ * Estilo:
+ * - Contenedor blanco tipo segmented control.
+ * - Activo: cápsula base-dark + texto blanco.
+ * - Inactivo: transparente + texto base-dark.
+ * - Pensado para 2 o más tabs.
+ *
+ * Uso:
+ *
+ * const [tab, setTab] = useState("legacy");
+ *
+ * <PillsTabs
+ *   value={tab}
+ *   onChange={setTab}
+ *   items={[
+ *     { value: "legacy", label: "Legacy" },
+ *     { value: "rb", label: "RB Components" },
+ *   ]}
+ * />
+ */
+export type PillsTabItem<Value extends string = string> = {
+    value: Value;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+export type PillsTabsProps<Value extends string = string> = {
+    value: Value;
+    items: PillsTabItem<Value>[];
+    onChange: (value: Value) => void;
+    className?: string;
+    ariaLabel?: string;
+};
+export declare function PillsTabs<Value extends string = string>({ value, items, onChange, className, ariaLabel, }: PillsTabsProps<Value>): import("react/jsx-runtime").JSX.Element;
+export default PillsTabs;

package/dist/src/rb-components/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { PillsTabs } from './PillsTabs';
+export { PillsTabs as RbPillsTabs } from './PillsTabs';
+export type { PillsTabItem, PillsTabsProps } from './PillsTabs';

package/dist/src/rb-components/table/RbTable.d.ts

@@ -0,0 +1,8 @@
+import { RbTableProps } from './types';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TABLE
+ * ----------------------------------------------------------------------------
+ */
+export declare function RbTable<Row = any>({ columns, rows, loading, getRowKey, title, description, toolbarLeft, toolbarRight, showToolbar, toolbarClassName, emptyText, emptyState, className, rootClassName, bodyClassName, size, fill, density, onRowClick, rowClassName, getCellClassName, getRowClassName, checkboxSelection, rowSelectionModel, setRowSelectionModel, onRowSelectionModelChange, isRowSelectable, disableRowSelectionOnClick, pinnedColumns, initialState, paginate, defaultRowsPerPage, rowsPerPageOptions, resultsLabel, viewAllLabel, prevAriaLabel, nextAriaLabel, footer, footerActions, hideFooter, }: RbTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export default RbTable;

package/dist/src/rb-components/table/RbTableToolbar.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TABLE TOOLBAR
+ * ----------------------------------------------------------------------------
+ *
+ * Toolbar base para RbTable.
+ *
+ * Reglas:
+ * - El consumo debe ser simple.
+ * - toolbarLeft puede ser cualquier nodo.
+ * - toolbarRight puede tener filtros, botones o acciones.
+ * - Se mantiene en una fila lo más posible.
+ * - Los campos se achican antes de saltar.
+ * - Cuando ya no caben, recién pasan a más filas.
+ * - La responsividad depende del ancho real de la toolbar, no del viewport.
+ */
+export type RbTableToolbarProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+};
+export declare function RbTableToolbar({ title, description, left, right, className, }: RbTableToolbarProps): import("react/jsx-runtime").JSX.Element | null;
+export default RbTableToolbar;

package/dist/src/rb-components/table/index.d.ts

@@ -0,0 +1,8 @@
+export { RbTable } from './RbTable';
+export { RbTable as Table } from './RbTable';
+export { default } from './RbTable';
+export { RbTableToolbar } from './RbTableToolbar';
+export type { RbTableToolbarProps } from './RbTableToolbar';
+export * from './toolbar';
+export type { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbRowsPerPageOption, RbTableAlign, RbTableCellParams, RbTableColumn, RbTableDensity, RbTableInitialState, RbTablePinnedColumns, RbTableProps, RbTableRowId, RbTableRowParams, RbTableSize, } from './types';
+export { cx, getAlignClass, getCellValue, getCssGridWidth, getDefaultRowId, getSelectionArray, getStickyWidth, isLegacyGridColumn, isSelected, normalizeTableColumns, resolvePinnedColumns, toggleSelection, } from './table.helpers';

package/dist/src/rb-components/table/table.helpers.d.ts

@@ -0,0 +1,36 @@
+import { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbTableColumn, RbTablePinnedColumns, RbTableRowId } from './types';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TABLE - HELPERS
+ * ----------------------------------------------------------------------------
+ *
+ * Estos helpers existen para que la tabla pueda recibir columnas nuevas RB o
+ * columnas antiguas tipo DataGrid/GridColDef.
+ *
+ * La idea es que la migración sea progresiva:
+ *
+ * - Proyectos nuevos: usar estructura RB.
+ * - Proyectos antiguos: pueden partir reutilizando sus columnas legacy.
+ */
+export declare function cx(...classes: Array<string | false | null | undefined>): string;
+export declare function isLegacyGridColumn<Row = any>(column: RbAnyTableColumn<Row>): column is RbLegacyGridColumn<Row>;
+export declare function normalizeTableColumns<Row = any>(columns?: RbAnyTableColumn<Row>[]): RbTableColumn<Row>[];
+export declare function getLegacyColumnWidth<Row = any>(column: RbLegacyGridColumn<Row>): string | number;
+export declare function getDefaultRowId<Row = any>(row: Row, index: number): RbTableRowId;
+export declare function getCellValue<Row = any>(row: Row, key: string): any;
+export declare function getSelectionArray(model?: RbRowSelectionModel): RbTableRowId[];
+export declare function isSelected(id: RbTableRowId, model?: RbRowSelectionModel): boolean;
+export declare function toggleSelection(id: RbTableRowId, model?: RbRowSelectionModel): RbTableRowId[];
+export declare function resolvePinnedColumns(pinnedColumns?: RbTablePinnedColumns, initialStatePinnedColumns?: RbTablePinnedColumns): RbTablePinnedColumns;
+export declare function getCssGridWidth(width?: number | string): string;
+/**
+ * Para sticky columns necesitamos offsets en px.
+ *
+ * Si una columna sticky usa "1fr", no existe un ancho real calculable desde JS
+ * sin medir el DOM. Para esta primera versión usamos un fallback razonable.
+ *
+ * Recomendación:
+ * - pinned columns importantes deberían tener width numérico o px.
+ */
+export declare function getStickyWidth(width?: number | string): number;
+export declare function getAlignClass(align?: string): "text-center justify-center" | "text-right justify-end" | "text-left justify-start";

package/dist/src/rb-components/table/toolbar/RbToolbarActionButton.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TOOLBAR ACTION BUTTON
+ * ----------------------------------------------------------------------------
+ *
+ * - variant="secondaryPrimary": botón con texto.
+ * - variant="icon": acción solo ícono.
+ */
+export type RbToolbarActionButtonVariant = "secondaryPrimary" | "icon";
+export type RbToolbarActionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: RbToolbarActionButtonVariant;
+    icon?: React.ReactNode;
+    loading?: boolean;
+};
+export declare function RbToolbarActionButton({ children, icon, loading, disabled, variant, className, type, ...props }: RbToolbarActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export default RbToolbarActionButton;

package/dist/src/rb-components/table/toolbar/RbToolbarDateRangeField.d.ts

@@ -0,0 +1,23 @@
+import { Dayjs } from 'dayjs';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TOOLBAR DATE RANGE FIELD
+ * ----------------------------------------------------------------------------
+ *
+ * Wrapper para date range dentro de toolbar.
+ *
+ * El ancho lo controla RbTableToolbar, para que el consumo sea simple
+ * y no haya que ajustar cada pantalla a mano.
+ */
+export type RbToolbarDateRangeValue = [Dayjs | null, Dayjs | null];
+export type RbToolbarDateRangeFieldProps = {
+    label?: string;
+    value: RbToolbarDateRangeValue;
+    onChange: (value: RbToolbarDateRangeValue) => void;
+    initialValue?: RbToolbarDateRangeValue;
+    calendars?: 1 | 2 | 3;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function RbToolbarDateRangeField({ label, value, onChange, initialValue, calendars, disabled, className, }: RbToolbarDateRangeFieldProps): import("react/jsx-runtime").JSX.Element;
+export default RbToolbarDateRangeField;

package/dist/src/rb-components/table/toolbar/RbToolbarMultiSelectField.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { RbToolbarSelectOption } from './RbToolbarSelectField';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TOOLBAR MULTI SELECT FIELD
+ * ----------------------------------------------------------------------------
+ *
+ * Multi select dark para toolbars de tabla.
+ *
+ * Responsive:
+ * - Se achica hasta un mínimo razonable.
+ * - Si ya no cabe, permite que la toolbar lo mande a otra fila.
+ * - Mantiene overflow visible para labels y dropdown.
+ */
+export type RbToolbarMultiSelectFieldProps = {
+    label?: React.ReactNode;
+    value: string[];
+    onChange: (value: string[]) => void;
+    options?: RbToolbarSelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    search?: {
+        value: string;
+        onChange: (value: string) => void;
+        placeholder?: string;
+    };
+};
+export declare function RbToolbarMultiSelectField({ label, value, onChange, options, placeholder, className, disabled, search, }: RbToolbarMultiSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default RbToolbarMultiSelectField;

package/dist/src/rb-components/table/toolbar/RbToolbarSearchField.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TOOLBAR SEARCH FIELD
+ * ----------------------------------------------------------------------------
+ *
+ * Input dark para toolbars de tabla.
+ */
+export type RbToolbarSearchFieldProps = {
+    label?: React.ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+};
+export declare function RbToolbarSearchField({ label, value, onChange, placeholder, className, disabled, }: RbToolbarSearchFieldProps): import("react/jsx-runtime").JSX.Element;
+export default RbToolbarSearchField;

package/dist/src/rb-components/table/toolbar/RbToolbarSelectField.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TOOLBAR SELECT FIELD
+ * ----------------------------------------------------------------------------
+ *
+ * Select dark para toolbars de tabla.
+ *
+ * Responsive:
+ * - Se achica hasta un mínimo razonable.
+ * - Si ya no cabe, permite que la toolbar lo mande a otra fila.
+ * - Mantiene overflow visible para labels y dropdown.
+ */
+export type RbToolbarSelectOption = {
+    value: string;
+    label: React.ReactNode;
+    sublabel?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+};
+export type RbToolbarSelectFieldProps = {
+    label?: React.ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    options?: RbToolbarSelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    search?: {
+        value: string;
+        onChange: (value: string) => void;
+        placeholder?: string;
+    };
+};
+export declare function RbToolbarSelectField({ label, value, onChange, options, placeholder, className, disabled, search, }: RbToolbarSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default RbToolbarSelectField;

package/dist/src/rb-components/table/toolbar/index.d.ts

@@ -0,0 +1,10 @@
+export { RbToolbarActionButton } from './RbToolbarActionButton';
+export { RbToolbarDateRangeField } from './RbToolbarDateRangeField';
+export { RbToolbarMultiSelectField } from './RbToolbarMultiSelectField';
+export { RbToolbarSearchField } from './RbToolbarSearchField';
+export { RbToolbarSelectField } from './RbToolbarSelectField';
+export type { RbToolbarActionButtonProps, RbToolbarActionButtonVariant, } from './RbToolbarActionButton';
+export type { RbToolbarDateRangeFieldProps, RbToolbarDateRangeValue, } from './RbToolbarDateRangeField';
+export type { RbToolbarMultiSelectFieldProps } from './RbToolbarMultiSelectField';
+export type { RbToolbarSearchFieldProps } from './RbToolbarSearchField';
+export type { RbToolbarSelectFieldProps, RbToolbarSelectOption, } from './RbToolbarSelectField';

package/dist/src/rb-components/table/types.d.ts

@@ -0,0 +1,282 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * RB TABLE - TYPES
+ * ----------------------------------------------------------------------------
+ *
+ * Esta tabla nace para reemplazar progresivamente la tabla antigua basada en
+ * MUI/DataGridPro, pero sin romper de golpe la forma en que los proyectos ya
+ * construyen sus columnas.
+ *
+ * Por eso soportamos dos formas de columnas:
+ *
+ * 1. Columna RB nueva:
+ *
+ * {
+ *   key: "fullname",
+ *   header: "Nombre",
+ *   width: "1fr",
+ *   render: (row) => row.fullname
+ * }
+ *
+ * 2. Columna tipo DataGrid/GridColDef:
+ *
+ * {
+ *   field: "fullname",
+ *   headerName: "Nombre",
+ *   flex: 1,
+ *   renderCell: ({ row }) => row.fullname
+ * }
+ *
+ * La tabla normaliza internamente ambas estructuras.
+ */
+export type RbTableRowId = string | number;
+export type RbTableDensity = "compact" | "comfortable";
+export type RbTableSize = "s" | "m" | "l";
+export type RbTableAlign = "left" | "center" | "right";
+export type RbTablePinnedColumns = {
+    left?: string[];
+    right?: string[];
+};
+export type RbTableInitialState = {
+    pinnedColumns?: RbTablePinnedColumns;
+};
+/**
+ * Estructura recomendada para columnas nuevas.
+ */
+export type RbTableColumn<Row = any> = {
+    /**
+     * Identificador de la columna.
+     * En columnas nuevas usamos `key`.
+     */
+    key: string;
+    /**
+     * Contenido del header.
+     */
+    header?: React.ReactNode;
+    /**
+     * Ancho de columna.
+     *
+     * Soporta:
+     * - number => px
+     * - "120px"
+     * - "1fr"
+     * - "minmax(120px, 1fr)"
+     *
+     * Nota sobre pinned columns:
+     * Para columnas fijas/sticky se recomienda usar ancho numérico o px.
+     */
+    width?: number | string;
+    /**
+     * Alineación horizontal.
+     *
+     * Nota:
+     * En la primera versión visual de RbTable se fuerza izquierda para textos.
+     * El checkbox se mantiene centrado.
+     */
+    align?: RbTableAlign;
+    /**
+     * Render custom de celda.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+    /**
+     * Render custom de header.
+     */
+    renderHeader?: () => React.ReactNode;
+    /**
+     * Si es false, permite salto de línea.
+     * Por defecto se trunca en una línea.
+     */
+    truncate?: boolean;
+    /**
+     * Clases extra para header.
+     */
+    headerClassName?: string;
+    /**
+     * Clases extra para celda.
+     */
+    cellClassName?: string | ((row: Row, index: number) => string | undefined);
+    /**
+     * Props aceptadas para compatibilidad/documentación.
+     * No todas tienen comportamiento avanzado todavía.
+     */
+    sortable?: boolean;
+    filterable?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Estructura parecida a GridColDef para facilitar migración.
+ * No importamos tipos de MUI para no arrastrar dependencia.
+ */
+export type RbLegacyGridColumn<Row = any> = {
+    field: string;
+    headerName?: React.ReactNode;
+    header?: React.ReactNode;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    flex?: number;
+    align?: RbTableAlign;
+    headerAlign?: RbTableAlign;
+    sortable?: boolean;
+    filterable?: boolean;
+    headerClassName?: string;
+    cellClassName?: string | ((params: RbTableCellParams<Row>) => string | undefined);
+    renderCell?: (params: RbTableCellParams<Row>) => React.ReactNode;
+    valueGetter?: (params: RbTableCellParams<Row>) => React.ReactNode;
+};
+export type RbAnyTableColumn<Row = any> = RbTableColumn<Row> | RbLegacyGridColumn<Row>;
+export type RbTableCellParams<Row = any> = {
+    row: Row;
+    id: RbTableRowId;
+    field: string;
+    value: any;
+    index: number;
+};
+export type RbTableRowParams<Row = any> = {
+    row: Row;
+    id: RbTableRowId;
+    index: number;
+};
+export type RbRowSelectionModel = RbTableRowId[] | Set<RbTableRowId>
+/**
+ * Compatibilidad con versiones nuevas de MUI donde el selection model puede
+ * venir como objeto con ids.
+ */
+ | {
+    ids?: Set<RbTableRowId> | RbTableRowId[];
+    type?: "include" | "exclude";
+};
+export type RbRowsPerPageOption = number | {
+    value: number;
+    label: string;
+};
+export type RbTableProps<Row = any> = {
+    /**
+     * Columnas. Puede recibir columnas RB nuevas o columnas legacy tipo GridColDef.
+     */
+    columns?: RbAnyTableColumn<Row>[];
+    /**
+     * Data de la tabla.
+     */
+    rows?: Row[];
+    /**
+     * Estado loading.
+     */
+    loading?: boolean;
+    /**
+     * Permite definir la key de cada fila.
+     * Si no se pasa, intenta usar row.id y si no existe usa el índice.
+     */
+    getRowKey?: (row: Row, index: number) => RbTableRowId;
+    /**
+     * Header/toolbar nuevo.
+     *
+     * Por defecto, si existe title/description/toolbarLeft/toolbarRight,
+     * se muestra una toolbar oscura arriba de la tabla.
+     *
+     * Si no quieres mostrar esa franja, usa:
+     *
+     * showToolbar={false}
+     */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    toolbarLeft?: React.ReactNode;
+    toolbarRight?: React.ReactNode;
+    showToolbar?: boolean;
+    toolbarClassName?: string;
+    /**
+     * Empty state.
+     */
+    emptyText?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    /**
+     * Estilos generales.
+     */
+    className?: string;
+    rootClassName?: string;
+    bodyClassName?: string;
+    /**
+     * Tamaño visual.
+     */
+    size?: RbTableSize;
+    /**
+     * Si true, ocupa todo el alto disponible del padre.
+     */
+    fill?: boolean;
+    /**
+     * Densidad visual.
+     */
+    density?: RbTableDensity;
+    /**
+     * Click en fila.
+     */
+    onRowClick?: (row: Row, index: number) => void;
+    /**
+     * Clase custom para fila.
+     */
+    rowClassName?: string | ((params: RbTableRowParams<Row>) => string | undefined);
+    /**
+     * Clase custom para celda, compatible con la prop actual usada en DataGrid.
+     */
+    getCellClassName?: (params: RbTableCellParams<Row>) => string | undefined;
+    /**
+     * Clase custom para fila, equivalente a getRowClassName de DataGrid.
+     */
+    getRowClassName?: (params: RbTableRowParams<Row>) => string | undefined;
+    /**
+     * Selección.
+     */
+    checkboxSelection?: boolean;
+    rowSelectionModel?: RbRowSelectionModel;
+    setRowSelectionModel?: (value: RbTableRowId[]) => void;
+    onRowSelectionModelChange?: (value: RbTableRowId[]) => void;
+    /**
+     * Controla si una fila puede seleccionarse.
+     */
+    isRowSelectable?: (params: RbTableRowParams<Row>) => boolean;
+    /**
+     * Evita que el click en fila seleccione.
+     * Se deja por compatibilidad con DataGrid.
+     */
+    disableRowSelectionOnClick?: boolean;
+    /**
+     * Pinned columns.
+     *
+     * Se soporta:
+     * - pinnedColumns={{ left: ["__check__", "fullname"], right: ["actions"] }}
+     * - initialState={{ pinnedColumns: { left: ["__check__"] } }}
+     */
+    pinnedColumns?: RbTablePinnedColumns;
+    initialState?: RbTableInitialState;
+    /**
+     * Paginación interna simple.
+     */
+    paginate?: boolean;
+    defaultRowsPerPage?: number;
+    rowsPerPageOptions?: RbRowsPerPageOption[];
+    resultsLabel?: string;
+    viewAllLabel?: string;
+    prevAriaLabel?: string;
+    nextAriaLabel?: string;
+    /**
+     * Footer custom.
+     */
+    footer?: React.ReactNode;
+    footerActions?: React.ReactNode;
+    /**
+     * Props legacy aceptadas para que la migración no explote.
+     * En esta tabla nueva no todas tienen efecto todavía.
+     */
+    apiRef?: unknown;
+    headerFilters?: boolean;
+    hideFooter?: boolean;
+    disableColumnMenu?: boolean;
+    slotProps?: Record<string, any>;
+    contextMenu?: any;
+    setContextMenu?: (value: any) => void;
+    options?: any[];
+    optionGroup?: any;
+    paginationModel?: any;
+    setPaginationModel?: (value: any) => void;
+};

package/dist/src/rb-components/ui/index.d.ts

@@ -17,6 +17,12 @@
 export { cn } from './utils/cn';
 export { Button } from './primitives/Button';
 export type { ButtonProps } from './primitives/Button';
+export { AutoCustomCompleteField } from './primitives/AutoCustomCompleteField';
+export type { AutoValueItem, CustomAutoCompleteFieldProps, } from './primitives/AutoCustomCompleteField';
+export { CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, } from './primitives/date-fields';
+export type { CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, } from './primitives/date-fields';
+export { RbInlineChipField, CalendarChipIcon, ClockChipIcon, } from './primitives/RbInlineChipField';
+export type { RbInlineChipFieldProps, RbInlineChipFieldAction, } from './primitives/RbInlineChipField';
 export { Card, CardHeader, CardTitle, CardContent, CardFooter, } from './primitives/Card';
 export type { CardProps } from './primitives/Card';
 export { IconButton } from './primitives/IconButton';