@redi.run/redi-components 0.0.63 → 0.0.64

package/dist/index.d.ts

@@ -0,0 +1,626 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * AdvancedTable Component
+ *
+ * Supports both Client-Side and Server-Side data handling.
+ *
+ * Server-Side Mode:
+ * Provide the `fetchData` prop to enable server-side mode.
+ * The function will be called with pagination, sorting and filter params.
+ *
+ * Optional props for Server-Side:
+ * - `onRefresh`: Callback for external refresh triggers
+ */
+export declare const AdvancedTable: <T>({ data, columns, defaultSort, defaultFilters, defaultPageSize, pageSizeOptions, enableSorting, enableFiltering, enablePagination, enableExport, initialConfig, onConfigChange, className, labels, enableColumnReordering, enableColumnPinning, enableColumnResizing, enableRowSelection, stickyActionsColumn, rowKey, onRowSelectionChange, renderActions, actionsColumnLabel, loading, fetchData, onRefresh, onPaginationChange, onFiltersChange, syncFiltersWithUrl, enableColumnConfig, enableInlineEditing, onRowSave, onRowEditCancel, }: AdvancedTableProps<T>) => JSX.Element;
+
+export declare interface AdvancedTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    defaultSort?: SortConfig;
+    defaultFilters?: FilterConfig;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    enableSorting?: boolean;
+    enableFiltering?: boolean;
+    enablePagination?: boolean;
+    enableColumnReordering?: boolean;
+    enableColumnPinning?: boolean;
+    enableColumnResizing?: boolean;
+    enableRowSelection?: boolean;
+    stickyActionsColumn?: boolean;
+    enableExport?: boolean;
+    initialConfig?: Partial<TableConfig<T>>;
+    onRowClick?: (row: T, index: number) => void;
+    onConfigChange?: (config: TableConfig<T>) => void;
+    className?: string;
+    enableColumnConfig?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    exportFileName?: string;
+    labels?: LabelsProps;
+    renderActions?: ({ row, index, column }: {
+        row: T;
+        index: number;
+        column: Column<T>;
+    }) => default_2.ReactNode;
+    actionsColumnLabel?: string;
+    onRefresh?: () => void;
+    onPaginationChange?: (pagination: PaginationConfig) => void;
+    onFiltersChange?: (filters: FilterConfig) => void;
+    rowKey?: keyof T | ((row: T) => string | number);
+    onRowSelectionChange?: (selectedIds: (string | number)[]) => void;
+    enableInlineEditing?: boolean;
+    onRowSave?: (row: T, newValues: Partial<T>) => Promise<void> | void;
+    onRowEditCancel?: () => void;
+    /**
+     * Función para cargar datos del servidor.
+     * Si se proporciona, la tabla entrará en modo "Server-Side".
+     * Recibe los parámetros de paginación, ordenamiento y filtros.
+     * Debe retornar una promesa con los datos y el total de elementos.
+     */
+    /**
+     * If true, keeps filters in sync with URL query parameters.
+     * - In client-side mode: Syncs all filters.
+     * - In server-side mode (`fetchData` provided): Syncs ONLY filters for columns with `shouldBeRefetch: true`.
+     */
+    syncFiltersWithUrl?: boolean;
+    fetchData?: (params: FetchParams) => Promise<FetchResponse<T>>;
+}
+
+export declare const Alert: ({ id, title, description, tone, autoDismiss, onClose, className, actions, closeOnAction, showIcon, icon, }: AlertProps) => JSX.Element;
+
+export declare type AlertAction = {
+    label: string;
+    onClick: (id: string) => void | Promise<void>;
+    variant?: AlertActionVariant;
+    disabled?: boolean;
+    ariaLabel?: string;
+};
+
+export declare type AlertActionVariant = 'primary' | 'secondary' | 'ghost';
+
+export declare type AlertPlacement = 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+
+export declare interface AlertProps {
+    id: string;
+    title?: string;
+    description?: string;
+    tone?: AlertTone;
+    autoDismiss?: number;
+    onClose?: (id: string) => void;
+    className?: string;
+    actions?: AlertAction[];
+    closeOnAction?: boolean;
+    showIcon?: boolean;
+    icon?: React.ReactNode;
+}
+
+export declare type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+
+export declare const AlertViewport: ({ placement, className, children, }: AlertViewportProps) => JSX.Element;
+
+declare interface AlertViewportProps extends PropsWithChildren {
+    placement?: AlertPlacement;
+    className?: string;
+}
+
+export declare type Align = 'start' | 'center' | 'end';
+
+export declare const Badge: ({ label, count, max, tone, dot, showIcon, icon, iconPosition, show, animation, animationDuration, shape, className, ariaLabel, role, ariaLive, onExited, }: BadgeProps) => JSX.Element | null;
+
+export declare type BadgeAnchorProps = {
+    children: default_2.ReactNode;
+    /** Un badge o varios badges (para stacking simple). */
+    badge: default_2.ReactNode;
+    /** Corner donde se “ancla” el/los badges. */
+    placement?: BadgePlacement;
+    /** Offset en px. */
+    offset?: BadgeOffset;
+    /** Clase para el contenedor. */
+    className?: string;
+};
+
+export declare type BadgeAnimation = 'none' | 'fade' | 'scale';
+
+export declare type BadgeOffset = {
+    x?: number;
+    y?: number;
+};
+
+export declare type BadgePlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export declare type BadgeProps = {
+    shape?: BadgeShape;
+    /** Texto o contenido libre (si no usas count). */
+    label?: default_2.ReactNode;
+    /** Número para mostrar con max (p.ej. 120 => 99+). */
+    count?: number;
+    /** Máximo para count; default 99. */
+    max?: number;
+    tone?: BadgeTone;
+    /** Modo punto (sin contenido). */
+    dot?: boolean;
+    /** Icono built-in por tone. */
+    showIcon?: boolean;
+    /** Icono custom (ReactNode). Si existe, reemplaza al built-in. */
+    icon?: default_2.ReactNode;
+    iconPosition?: 'left' | 'right';
+    /** Control de presencia para animación entry/exit. */
+    show?: boolean;
+    animation?: BadgeAnimation;
+    /** Duración animación (ms). Default 160. */
+    animationDuration?: number;
+    /** Clase adicional. */
+    className?: string;
+    /** Para accesibilidad (si no, se deriva de label/count). */
+    ariaLabel?: string;
+    /** Override a11y si lo deseas. */
+    role?: 'status' | 'alert';
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /** Callback al terminar exit (útil si el padre quiere desmontar). */
+    onExited?: () => void;
+};
+
+export declare type BadgeShape = 'auto' | 'round' | 'pill';
+
+export declare type BadgeStackProps = {
+    items: Array<Omit<BadgeProps, 'show'>>;
+    placement?: BadgePlacement;
+    offset?: BadgeOffset;
+    /** Separación vertical entre badges (px). */
+    step?: number;
+    /** Clase del wrapper. */
+    className?: string;
+};
+
+export declare type BadgeTone = 'success' | 'warning' | 'danger' | 'info';
+
+export declare interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+
+export declare const Breadcrumbs: ({ items, onNavigate }: BreadcrumbsProps) => JSX.Element;
+
+export declare interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    onNavigate?: (item: BreadcrumbItem, index: number) => void;
+}
+
+export declare const Button: ({ level, size, type, posIcon, disabled, loading, label, icon, children, theme, color, backgroundColor, className, ...props }: ButtonProps) => JSX.Element;
+
+export declare type ButtonLevel = 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon';
+
+export declare interface ButtonProps {
+    level?: ButtonLevel;
+    theme?: ColorFamily;
+    color?: string;
+    backgroundColor?: string;
+    size?: 'small' | 'medium' | 'large';
+    type?: 'button' | 'submit' | 'reset';
+    label?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: React.ReactNode;
+    posIcon?: 'left' | 'right';
+    disabled?: boolean;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export declare const Card: ({ header, footer, children }: CardProps) => JSX.Element;
+
+export declare interface CardProps {
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}
+
+export declare const Checkbox: ({ checked, onChange, label, disabled, color, theme, indeterminate, error, helperText, id, name }: CheckboxProps) => JSX.Element;
+
+export declare interface CheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    color?: string;
+    theme?: ColorFamily;
+    indeterminate?: boolean;
+    error?: boolean;
+    helperText?: string;
+    id?: string;
+    name?: string;
+}
+
+declare type ColorFamily = keyof typeof colorPalette;
+
+/**
+ * Paleta de colores centralizada - Importada desde src/config/colorConfig.ts
+ * Esta es la única fuente de verdad para los colores del proyecto
+ */
+declare const colorPalette: Record<string, Record<number | string, string>>;
+
+export declare interface Column<T> {
+    id: string;
+    label: string;
+    accessor: keyof T | ((row: T) => unknown);
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: number;
+    minWidth?: number;
+    align?: 'left' | 'center' | 'right';
+    render?: ({ value, row, column, index }: {
+        value: unknown;
+        row: T;
+        column: Column<T>;
+        index: number;
+    }) => default_2.ReactNode;
+    hidden?: boolean;
+    pinned?: boolean;
+    draggable?: boolean;
+    isAction?: boolean;
+    shouldBeRefetch?: boolean;
+    fetchColumn?: () => Promise<FilterOption[]>;
+    editable?: boolean;
+    inputType?: 'text' | 'number' | 'select' | 'date';
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+    validation?: (value: unknown) => string | null;
+}
+
+export declare const Container: ({ children, size, padding }: ContainerProps) => JSX.Element;
+
+export declare interface ContainerProps {
+    children: ReactNode;
+    size?: ContainerSize;
+    padding?: string;
+}
+
+export declare type ContainerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const DateInput: ({ value, onChange, min, max, disabled }: DateInputProps) => JSX.Element;
+
+export declare interface DateInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+}
+
+export declare type Direction = 'vertical' | 'horizontal';
+
+export declare const Divider: ({ orientation }: DividerProps) => JSX.Element;
+
+export declare type DividerOrientation = 'horizontal' | 'vertical';
+
+export declare interface DividerProps {
+    orientation?: DividerOrientation;
+}
+
+export declare interface FetchParams {
+    page_number: number;
+    page_size: number;
+    order_by?: string;
+    [key: string]: string | number | boolean | Array<string | number> | undefined;
+}
+
+export declare interface FetchResponse<T> {
+    items: T[];
+    /**
+     * Total de elementos DESPUÉS de aplicar filtros.
+     * Este valor se usa para calcular las páginas disponibles.
+     * Ejemplo: Si hay 100 elementos en BD pero se filtran solo 5, este valor debe ser 5.
+     */
+    total_items: number;
+    page?: number;
+    page_size?: number;
+    total_pages?: number;
+    /**
+     * Total de elementos SIN filtros (total en base de datos).
+     * Campo opcional. Si no se proporciona, se asume igual a total_items.
+     * Ejemplo: Si hay 100 elementos en BD, este valor debe ser 100.
+     */
+    total_unfiltered_items?: number;
+}
+
+export declare const FileInput: ({ multiple, accept, onChange, disabled, uploadUrl, onUploadComplete, onUploadError, maxSize, label, helperText, color, id, name }: FileInputProps) => JSX.Element;
+
+export declare interface FileInputProps {
+    multiple?: boolean;
+    accept?: string;
+    onChange: (files: File[]) => void;
+    disabled?: boolean;
+    uploadUrl?: string;
+    onUploadComplete?: (response: any) => void;
+    onUploadError?: (error: any) => void;
+    maxSize?: number;
+    label?: string;
+    helperText?: string;
+    color?: string;
+    id?: string;
+    name?: string;
+}
+
+export declare interface FilterConfig {
+    [columnId: string]: {
+        type: 'text' | 'select' | 'multiselect';
+        value: string | string[];
+        textValue?: string;
+        options?: string[];
+    };
+}
+
+export declare interface FilterOption {
+    value: string;
+    count: number;
+    label: string;
+    group?: string;
+}
+
+export declare interface FilterTagProps {
+    columnLabel: string;
+    value: string;
+    onRemove: () => void;
+}
+
+export declare const Grid: ({ children, cols, gap }: GridProps) => JSX.Element;
+
+export declare interface GridProps {
+    children: ReactNode;
+    cols?: 1 | 2 | 3 | 4;
+    gap?: string;
+}
+
+export declare interface IconProps extends React.SVGProps<SVGSVGElement> {
+    color?: string;
+    size?: number;
+}
+
+export declare type Justify = 'start' | 'center' | 'end';
+
+export declare const KPI: ({ variant, title, value, progress, trendValue, trendDirection, icon, chartData, color, footer, subtitle, className, }: KPIProps) => JSX.Element | null;
+
+export declare interface KPIProps {
+    /**
+     * The variant of the KPI card to render
+     * @default 'simple'
+     */
+    variant?: KPIVariant;
+    /**
+     * The title of the KPI
+     */
+    title: string;
+    /**
+     * The main value to display
+     */
+    value: string | number;
+    /**
+     * Percentage value for progress or circular variants (0-100)
+     */
+    progress?: number;
+    /**
+     * Trend percentage or value to display
+     */
+    trendValue?: string | number;
+    /**
+     * Direction of the trend
+     */
+    trendDirection?: KPITrendDirection;
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Array of numbers for sparkline charts
+     */
+    chartData?: number[];
+    /**
+     * Custom color for accents (charts, icons, progress bars)
+     * If not provided, defaults will be used based on theme or trend
+     */
+    color?: string;
+    /**
+     * Footer text for card-footer variant
+     */
+    footer?: string;
+    /**
+     * Optional subtitle for stacked variant
+     */
+    subtitle?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+
+export declare type KPITrendDirection = 'up' | 'down' | 'neutral';
+
+export declare type KPIVariant = 'simple' | 'chart' | 'trend' | 'progress' | 'icon-bg' | 'side-icon' | 'card-footer' | 'circular' | 'sparkline-row' | 'solid' | 'bordered' | 'stacked';
+
+export declare interface LabelsProps {
+    configuration?: string;
+    columnVisibility?: string;
+    clearAllFilters?: string;
+    noData?: string;
+    pagination?: {
+        showingItems: string;
+        to: string;
+        of: string;
+        items: string;
+        showPerPage?: string;
+        perPageItems?: string;
+    };
+}
+
+export declare const Link: ({ href, children, onClick }: LinkProps) => JSX.Element;
+
+export declare interface LinkProps {
+    href?: string;
+    children: ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export declare const Modal: ({ open, onClose, title, children }: ModalProps) => JSX.Element | null;
+
+export declare interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children: ReactNode;
+}
+
+export declare const Pagination: ({ page, totalPages, onChange }: PaginationProps) => JSX.Element;
+
+export declare interface PaginationConfig {
+    page: number;
+    pageSize: number;
+    total: number;
+}
+
+export declare interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+}
+
+export declare const RadioGroup: ({ name, options, value, onChange, disabled }: RadioGroupProps) => JSX.Element;
+
+export declare interface RadioGroupProps {
+    name: string;
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+
+export declare interface RadioOption {
+    label: string;
+    value: string;
+}
+
+export declare const Select: ({ options, value, onChange, disabled, placeholder, label, error, helperText, color, fullWidth, id, name }: SelectProps) => JSX.Element;
+
+export declare interface SelectOption {
+    label: string;
+    value: string;
+}
+
+export declare interface SelectProps {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    color?: string;
+    fullWidth?: boolean;
+    id?: string;
+    name?: string;
+}
+
+export declare const Slider: ({ min, max, step, value, onChange, disabled }: SliderProps) => JSX.Element;
+
+export declare interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+}
+
+export declare interface SortConfig {
+    column: string;
+    direction: 'asc' | 'desc';
+}
+
+export declare const Stack: ({ children, direction, gap, align, justify }: StackProps) => JSX.Element;
+
+export declare interface StackProps {
+    children: ReactNode;
+    direction?: Direction;
+    gap?: string;
+    align?: Align;
+    justify?: Justify;
+}
+
+export declare const Switch: ({ checked, onChange, disabled, label, color, size, id, name }: SwitchProps) => JSX.Element;
+
+export declare interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    color?: string;
+    size?: 'small' | 'medium';
+    id?: string;
+    name?: string;
+}
+
+export declare interface TabItem {
+    id: string;
+    label: string;
+    content: ReactNode;
+}
+
+export declare interface TableConfig<T> {
+    columns: Column<T>[];
+    sort?: SortConfig;
+    filters: FilterConfig;
+    pagination: PaginationConfig;
+    columnOrder: string[];
+    hiddenColumns: string[];
+    pinnedColumns: string[];
+}
+
+export declare interface TableState<T> {
+    data: T[];
+    filteredData: T[];
+    paginatedData: T[];
+    sortConfig?: SortConfig;
+    filters: FilterConfig;
+    pagination: PaginationConfig;
+    columnOrder: string[];
+    hiddenColumns: string[];
+    pinnedColumns: string[];
+    selectedRows: (string | number)[];
+    columnWidths: Record<string, number>;
+    loading: boolean;
+    totalUnfiltered: number;
+}
+
+export declare const Tabs: ({ items, activeId, onChange }: TabsProps) => JSX.Element;
+
+export declare interface TabsProps {
+    items: TabItem[];
+    activeId?: string;
+    onChange?: (id: string) => void;
+}
+
+export declare const TextArea: ({ value, onChange, placeholder, rows, disabled, label, error, helperText, color, fullWidth, id, name }: TextAreaProps) => JSX.Element;
+
+export declare interface TextAreaProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    label?: string;
+    color?: string;
+    fullWidth?: boolean;
+    id?: string;
+    name?: string;
+}
+
+export { }