flysoft-react-ui 0.3.3 → 0.5.0

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAUA,OAAO,aAAa,CAAC;AAoCrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAUA,OAAO,aAAa,CAAC;AAwCrB,iBAAS,GAAG,4CAoBX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -7,9 +7,12 @@ import { DocsMenu } from "./docs/DocsMenu";
 import DocsRouter from "./docs/DocsRouter";
 import { AuthDocs } from "./docs/AuthDocs.tsx/AuthDocs";
 function HomeContent() {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "secondary", children: "OSOCNA" }), _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" })] }), children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }), _jsx("div", { children: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: () => [
+                        _jsx(Badge, { variant: "secondary", children: "OSOCNA" }),
+                        _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" }),
+                    ], children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }), _jsx("div", { children: _jsx(AuthDocs, {}) })] }));
 }
 function App() {
-    return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));
+    return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("div", { children: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));
 }
 export default App;

package/dist/components/form-controls/Pagination.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface PaginationInterface<T> {
+    list: Array<T>;
+    limit: number;
+    page: number;
+    pages: number;
+    total: number;
+}
+export interface PaginationProps {
+    fieldName?: string;
+    page?: number;
+    pages?: number;
+    total?: number;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/form-controls/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsHhD,CAAC"}

package/dist/components/form-controls/Pagination.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useSearchParams } from "react-router-dom";
+import { Button } from "./Button";
+export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total = 0, }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const navigateToPage = (newPage) => {
+        if (newPage < 1 || newPage > pages || newPage === page) {
+            return;
+        }
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set(fieldName, newPage.toString());
+        setSearchParams(newSearchParams, { replace: true });
+    };
+    const goToFirstPage = () => navigateToPage(1);
+    const goToPreviousPage = () => navigateToPage(page - 1);
+    const goToNextPage = () => navigateToPage(page + 1);
+    const goToLastPage = () => navigateToPage(pages);
+    const isFirstPage = page <= 1;
+    const isLastPage = page >= pages;
+    const hasPages = pages > 1;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-left", onClick: goToFirstPage, disabled: isFirstPage || !hasPages, "aria-label": "Primera p\u00E1gina" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-left", onClick: goToPreviousPage, disabled: isFirstPage || !hasPages, "aria-label": "P\u00E1gina anterior" }) }), _jsxs("div", { className: "text-xs", children: [_jsxs("span", { className: "block", children: ["P\u00E1gina ", page, " de ", pages] }), _jsxs("span", { className: "block", children: [total, " elemento", total !== 1 ? "s" : ""] })] }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-right", onClick: goToNextPage, disabled: isLastPage || !hasPages, "aria-label": "P\u00E1gina siguiente" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-right", onClick: goToLastPage, disabled: isLastPage || !hasPages, "aria-label": "\u00DAltima p\u00E1gina" }) })] })
+    // <div className="flex flex-col items-center gap-0 font-[var(--font-default)]">
+    //   {/* Botones de navegación */}
+    //   <div className="flex items-center gap-2">
+    //
+    //     {/* Texto de página */}
+    //     <span
+    //       className="text-xs px-3 leading-none"
+    //       style={{ color: "var(--color-text-primary)" }}
+    //     >
+    //       Página {page} de {pages}
+    //     </span>
+    //     <Button
+    //       variant="ghost"
+    //       size="sm"
+    //       icon="fa-angle-right"
+    //       onClick={goToNextPage}
+    //       disabled={isLastPage || !hasPages}
+    //       aria-label="Página siguiente"
+    //     />
+    //     <Button
+    //       variant="ghost"
+    //       size="sm"
+    //       icon="fa-angle-double-right"
+    //       onClick={goToLastPage}
+    //       disabled={isLastPage || !hasPages}
+    //       aria-label="Última página"
+    //     />
+    //   </div>
+    //   {/* Texto de elementos */}
+    //   <span
+    //     className="text-xs leading-none"
+    //     style={{ color: "var(--color-text-secondary)" }}
+    //   >
+    //     {total} elemento{total !== 1 ? "s" : ""}
+    //   </span>
+    // </div>
+    );
+};

package/dist/components/form-controls/index.d.ts

@@ -3,9 +3,11 @@ export { Input } from "./Input";
 export { AutocompleteInput } from "./AutocompleteInput";
 export { DatePicker } from "./DatePicker";
 export { DateInput } from "./DateInput";
+export { Pagination } from "./Pagination";
 export type { ButtonProps } from "./Button";
 export type { InputProps } from "./Input";
 export type { AutocompleteInputProps, AutocompleteOption, } from "./AutocompleteInput";
 export type { DatePickerProps } from "./DatePicker";
 export type { DateInputProps, DateInputFormat } from "./DateInput";
+export type { PaginationProps, PaginationInterface, } from "./Pagination";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form-controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,cAAc,CAAC"}

package/dist/components/form-controls/index.js

@@ -3,3 +3,4 @@ export { Input } from "./Input";
 export { AutocompleteInput } from "./AutocompleteInput";
 export { DatePicker } from "./DatePicker";
 export { DateInput } from "./DateInput";
+export { Pagination } from "./Pagination";

package/dist/components/layout/Card.d.ts

@@ -4,7 +4,10 @@ export interface CardProps {
     subtitle?: string | React.ReactNode;
     children: React.ReactNode;
     className?: string;
-    headerActions?: React.ReactNode;
+    /**
+     * Acciones para el header de la tarjeta. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    headerActions?: () => Array<React.ReactNode>;
     footer?: React.ReactNode;
     variant?: "default" | "elevated" | "outlined";
 }

package/dist/components/layout/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsEpC,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6HpC,CAAC"}

package/dist/components/layout/Card.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { DropdownMenu } from "../utils/DropdownMenu";
 export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", }) => {
     // Separar clases de background del className
     const classArray = className.trim().split(/\s+/).filter(Boolean);
@@ -25,5 +26,33 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
         outlined: `border-[var(--color-gray-300)]`,
     };
     const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
-    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 pt-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && _jsx("div", { className: "px-6 pb-4", children: footer })] }));
+    // Convertir array de ReactNode a array de ActionItem para DropdownMenu
+    const convertActionsToOptions = (actions) => {
+        return actions.map((action, index) => ({
+            id: index,
+            content: (_jsx("div", { onClick: (e) => {
+                    // Detener la propagación para que el onClick del DropdownMenu no interfiera
+                    e.stopPropagation();
+                }, children: action })),
+        }));
+    };
+    const headerActionsArray = headerActions?.();
+    const hasHeaderActions = headerActionsArray && headerActionsArray.length > 0;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isLargeScreen, setIsLargeScreen] = React.useState(false);
+    React.useEffect(() => {
+        const checkScreenSize = () => {
+            setIsLargeScreen(window.innerWidth >= 1024);
+        };
+        checkScreenSize();
+        window.addEventListener("resize", checkScreenSize);
+        return () => {
+            window.removeEventListener("resize", checkScreenSize);
+        };
+    }, []);
+    return (_jsxs("div", { className: `${classes} relative`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(title || subtitle || hasHeaderActions) && (_jsx("div", { className: "px-6 pt-4", children: _jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }) }) })), hasHeaderActions && (_jsx("div", { className: "absolute top-2 right-2 transition-opacity", style: {
+                    opacity: isLargeScreen ? (isHovered ? 1 : 0) : 1,
+                }, children: _jsx(DropdownMenu, { options: convertActionsToOptions(headerActionsArray), onOptionSelected: () => {
+                        // Las acciones ya manejan sus propios eventos
+                    }, renderOption: (item) => item.content, replaceOnSingleOption: true }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && _jsx("div", { className: "px-6 pb-4", children: footer })] }));
 };

package/dist/components/layout/DataTable.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface DataTableColumn<T> {
+    align?: "left" | "right" | "center";
+    width?: string;
+    header?: string | React.ReactNode;
+    footer?: string | React.ReactNode;
+    value?: string | number | ((row: T) => string | React.ReactNode);
+    tooltip?: (row: T) => string | React.ReactNode;
+    type?: "text" | "numeric" | "currency" | "date";
+    /**
+     * Acciones para cada fila. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    actions?: (row: T) => Array<React.ReactNode>;
+    /**
+     * Acciones para el header de la columna. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    headerActions?: () => Array<React.ReactNode>;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    className?: string;
+    maxRows?: number;
+    locale?: string;
+}
+export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/layout/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,gDAM3B,cAAc,CAAC,CAAC,CAAC,4CAwRnB,CAAC"}

package/dist/components/layout/DataTable.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { DropdownMenu } from "../utils/DropdownMenu";
+export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", }) => {
+    // Calcular si necesitamos scroll
+    const needsScroll = maxRows !== undefined && rows.length > maxRows;
+    // Altura aproximada de una fila (px-4 py-3 = ~48px por fila)
+    const rowHeight = 48;
+    const maxHeight = maxRows ? `${maxRows * rowHeight}px` : undefined;
+    // Verificar si alguna columna tiene footer
+    const hasFooter = columns.some((column) => column.footer !== undefined);
+    const getCellValue = (column, row) => {
+        if (!column.value)
+            return null;
+        if (typeof column.value === "function") {
+            return column.value(row);
+        }
+        // Si es string o number, puede ser un nombre de propiedad o un valor directo
+        if (typeof column.value === "string" || typeof column.value === "number") {
+            // Intentar obtener la propiedad del objeto si existe
+            if (typeof column.value === "string" &&
+                typeof row === "object" &&
+                row !== null) {
+                const value = row[column.value];
+                if (value !== undefined) {
+                    return value;
+                }
+            }
+            // Si no es una propiedad, retornar el valor directo
+            return column.value;
+        }
+        return column.value;
+    };
+    const formatValue = (value, type) => {
+        if (React.isValidElement(value)) {
+            return value;
+        }
+        // Convertir string a número si es necesario para currency o numeric
+        let numericValue = null;
+        if (typeof value === "number") {
+            numericValue = value;
+        }
+        else if (typeof value === "string" &&
+            (type === "currency" || type === "numeric")) {
+            const parsed = parseFloat(value);
+            if (!isNaN(parsed)) {
+                numericValue = parsed;
+            }
+        }
+        if (numericValue !== null) {
+            if (type === "currency") {
+                // Formatear usando el locale proporcionado sin símbolo de moneda
+                const parts = new Intl.NumberFormat(locale, {
+                    style: "currency",
+                    currency: "EUR",
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                }).formatToParts(numericValue);
+                // Construir el string sin el símbolo de moneda
+                return parts
+                    .filter((part) => part.type !== "currency")
+                    .map((part) => part.value)
+                    .join("");
+            }
+            if (type === "numeric") {
+                // Formatear usando el locale proporcionado
+                const hasDecimals = numericValue % 1 !== 0;
+                return new Intl.NumberFormat(locale, {
+                    minimumFractionDigits: hasDecimals ? 2 : 0,
+                    maximumFractionDigits: hasDecimals ? 2 : 0,
+                }).format(numericValue);
+            }
+        }
+        if (typeof value === "string" && type === "date") {
+            try {
+                const date = new Date(value);
+                return date.toLocaleDateString(locale);
+            }
+            catch {
+                return value;
+            }
+        }
+        return value;
+    };
+    const getAlignmentClass = (align, type) => {
+        // Las columnas de tipo 'date' siempre se alinean a la izquierda
+        // Las columnas de tipo 'currency' y 'numeric' siempre se alinean a la derecha
+        let effectiveAlign = align;
+        if (type === "date") {
+            effectiveAlign = "left";
+        }
+        else if (type === "currency" || type === "numeric") {
+            effectiveAlign = "right";
+        }
+        switch (effectiveAlign) {
+            case "right":
+                return "text-right";
+            case "center":
+                return "text-center";
+            case "left":
+            default:
+                return "text-left";
+        }
+    };
+    // Convertir array de ReactNode a array de ActionItem para DropdownMenu
+    const convertActionsToOptions = (actions) => {
+        return actions.map((action, index) => ({
+            id: index,
+            content: (_jsx("div", { onClick: (e) => {
+                    // Detener la propagación para que el onClick del DropdownMenu no interfiera
+                    e.stopPropagation();
+                }, children: action })),
+        }));
+    };
+    return (_jsx("div", { className: `overflow-x-auto ${className}`, children: _jsx("div", { className: needsScroll ? "relative overflow-y-auto" : "", style: needsScroll && maxHeight ? { maxHeight: maxHeight } : undefined, children: _jsxs("table", { className: "w-full border-collapse font-[var(--font-default)]", children: [_jsx("thead", { className: needsScroll ? "sticky top-0 z-10" : "", children: _jsx("tr", { className: "border-b border-[var(--color-border-default)]", children: columns.map((column, index) => {
+                                const headerActions = column.headerActions?.();
+                                const hasHeaderActions = headerActions && headerActions.length > 0;
+                                return (_jsx("th", { className: `
+                      px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)]
+                      bg-[var(--color-bg-secondary)]
+                      ${getAlignmentClass(column.align, column.type)}
+                      ${hasHeaderActions ? "relative" : ""}
+                    `, style: {
+                                        ...(column.width ? { width: column.width } : {}),
+                                        fontStretch: "75%",
+                                    }, children: hasHeaderActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: column.header || "" }), _jsx(DropdownMenu, { options: convertActionsToOptions(headerActions), onOptionSelected: () => {
+                                                    // Las acciones ya manejan sus propios eventos
+                                                }, renderOption: (item) => item.content, replaceOnSingleOption: true })] })) : (column.header || "") }, index));
+                            }) }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx("tr", { className: "group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)]", style: {
+                                fontStretch: "75%",
+                            }, children: columns.map((column, colIndex) => {
+                                const cellValue = getCellValue(column, row);
+                                const formattedValue = formatValue(cellValue, column.type);
+                                const tooltip = column.tooltip
+                                    ? column.tooltip(row)
+                                    : undefined;
+                                const rowActions = column.actions?.(row);
+                                const hasRowActions = rowActions && rowActions.length > 0;
+                                return (_jsx("td", { className: `
+                        px-4 py-3 text-sm text-[var(--color-text-primary)]
+                        ${getAlignmentClass(column.align, column.type)}
+                      `, style: {
+                                        ...(column.width ? { width: column.width } : {}),
+                                        fontVariationSettings: '"wdth" 75',
+                                    }, title: tooltip
+                                        ? typeof tooltip === "string"
+                                            ? tooltip
+                                            : undefined
+                                        : undefined, children: hasRowActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: formattedValue }), _jsx("div", { className: "lg:opacity-0 lg:group-hover/row:opacity-100 transition-opacity", children: _jsx(DropdownMenu, { options: convertActionsToOptions(rowActions), onOptionSelected: () => {
+                                                        // Las acciones ya manejan sus propios eventos
+                                                    }, renderOption: (item) => item.content, replaceOnSingleOption: true }) })] })) : (formattedValue) }, colIndex));
+                            }) }, rowIndex))) }), hasFooter && (_jsx("tfoot", { className: needsScroll ? "sticky bottom-0 z-10" : "", children: _jsx("tr", { className: "border-t border-[var(--color-border-default)]", children: columns.map((column, index) => (_jsx("td", { className: `
+                      px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)]
+                      bg-[var(--color-bg-secondary)]
+                      ${getAlignmentClass(column.align, column.type)}
+                    `, style: {
+                                    ...(column.width ? { width: column.width } : {}),
+                                    fontStretch: "75%",
+                                }, children: column.footer || "" }, index))) }) }))] }) }) }));
+};

package/dist/components/layout/TabPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface TabPanelProps {
+    children?: React.ReactNode;
+    tabId: string | number;
+}
+export declare const TabPanel: React.FC<TabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/layout/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgB5C,CAAC"}

package/dist/components/layout/TabPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useTabsContext } from "./TabsGroup";
+export const TabPanel = ({ children, tabId }) => {
+    const { activeTab } = useTabsContext();
+    const isActive = activeTab.toString() === tabId.toString();
+    if (!isActive) {
+        return null;
+    }
+    return (_jsx("div", { role: "tabpanel", className: "w-full font-[var(--font-default)]", children: children }));
+};

package/dist/components/layout/TabsGroup.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface Tab {
+    id: string | number;
+    label: string;
+}
+export interface TabsGroupProps {
+    children?: React.ReactNode;
+    tabs: Tab[];
+    paramName?: string;
+    headerNode?: React.ReactNode;
+    onChangeTab?: (selectedTab: string) => void;
+}
+interface TabsContextType {
+    activeTab: string | number;
+    setActiveTab: (tab: string | number) => void;
+}
+export declare const useTabsContext: () => TabsContextType;
+export declare const TabsGroup: React.FC<TabsGroupProps>;
+export {};
+//# sourceMappingURL=TabsGroup.d.ts.map

package/dist/components/layout/TabsGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAGvF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC9C;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8F9C,CAAC"}

package/dist/components/layout/TabsGroup.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, createContext, useContext } from "react";
+import { useSearchParams } from "react-router-dom";
+const TabsContext = createContext(undefined);
+export const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("TabPanel must be used within TabsGroup");
+    }
+    return context;
+};
+export const TabsGroup = ({ children, tabs, paramName, headerNode, onChangeTab, }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const defaultTab = tabs[0]?.id?.toString() || "";
+    // Obtener el tab activo desde URL params si paramName está definido, sino desde estado local
+    const urlTab = paramName ? searchParams.get(paramName) : null;
+    const initialTab = urlTab || defaultTab;
+    const [activeTab, setActiveTabState] = useState(initialTab);
+    // Sincronizar con URL params cuando cambian
+    useEffect(() => {
+        if (paramName && urlTab) {
+            setActiveTabState(urlTab);
+        }
+    }, [paramName, urlTab]);
+    const setActiveTab = (tab) => {
+        setActiveTabState(tab);
+        // Actualizar URL params si paramName está definido
+        if (paramName) {
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set(paramName, tab.toString());
+            setSearchParams(newSearchParams, { replace: true });
+        }
+        // Llamar al callback si está definido
+        if (onChangeTab) {
+            onChangeTab(tab.toString());
+        }
+    };
+    const contextValue = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
+    const handleTabClick = (tabId) => {
+        setActiveTab(tabId);
+    };
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs("div", { className: "w-full font-[var(--font-default)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-1", children: tabs.map((tab) => {
+                                const isActive = activeTab.toString() === tab.id.toString();
+                                return (_jsx("button", { onClick: () => handleTabClick(tab.id), className: `
+                    px-4 py-2 text-sm font-medium transition-colors cursor-pointer
+                    border-b-2 -mb-[1px]
+                    ${isActive
+                                        ? "text-[var(--color-primary)] border-[var(--color-primary)]"
+                                        : "text-[var(--color-text-secondary)] border-transparent hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-default)]"}
+                  `, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
+                            }) }), headerNode && (_jsx("div", { className: "flex items-center", children: headerNode }))] }), _jsx("div", { className: "mt-4", children: children })] }) }));
+};

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

@@ -6,4 +6,10 @@ export { Collection } from "./Collection";
 export type { CollectionProps } from "./Collection";
 export { DataField } from "./DataField";
 export type { DataFieldProps } from "./DataField";
+export { TabsGroup } from "./TabsGroup";
+export type { TabsGroupProps, Tab } from "./TabsGroup";
+export { TabPanel } from "./TabPanel";
+export type { TabPanelProps } from "./TabPanel";
+export { DataTable } from "./DataTable";
+export type { DataTableProps, DataTableColumn } from "./DataTable";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layout/index.js

@@ -2,3 +2,6 @@ export { Card } from "./Card";
 export { AppLayout } from "./AppLayout";
 export { Collection } from "./Collection";
 export { DataField } from "./DataField";
+export { TabsGroup } from "./TabsGroup";
+export { TabPanel } from "./TabPanel";
+export { DataTable } from "./DataTable";

package/dist/components/utils/Dialog.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface DialogProps {
+    isOpen: boolean;
+    title: React.ReactNode;
+    dialogBody: React.ReactNode;
+    dialogActions: React.ReactNode;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+}
+export declare const Dialog: React.FC<DialogProps>;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/utils/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiGxC,CAAC"}

package/dist/components/utils/Dialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, closeOnOverlayClick = false, }) => {
+    // Prevenir scroll del body cuando el dialog está abierto
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Manejar tecla Escape para cerrar
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape" && isOpen && onClose) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen) {
+        return null;
+    }
+    const handleOverlayClick = () => {
+        if (closeOnOverlayClick && onClose) {
+            onClose();
+        }
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), _jsxs("div", { className: "relative w-auto max-w-lg min-w-[400px] bg-[var(--color-bg-default)] rounded-lg shadow-[var(--shadow-xl)] border border-[var(--color-border-default)] font-[var(--font-default)] max-h-[90vh] flex flex-col", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [_jsx("h2", { id: "dialog-title", className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }), onClose && (_jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer", "aria-label": "Cerrar dialog", children: _jsx("i", { className: "fa fa-times" }) }))] }), _jsx("div", { className: "px-6 py-4 overflow-y-auto flex-1 text-[var(--color-text-primary)] min-w-0", children: dialogBody }), _jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] flex items-center justify-end gap-2 flex-shrink-0 flex-wrap", children: dialogActions })] })] }));
+};

package/dist/components/utils/DropdownMenu.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface DropdownMenuProps<T = {
+    label: string;
+}> {
+    options: T[];
+    onOptionSelected: (item: T) => void;
+    renderNode?: React.ReactNode;
+    /**
+     * Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label".
+     */
+    getOptionLabel?: (item: T) => string;
+    /**
+     * Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto.
+     */
+    renderOption?: (item: T) => React.ReactNode;
+    /**
+     * Si es true y hay una sola opción, muestra directamente la opción en lugar del trigger.
+     * Por defecto es false.
+     */
+    replaceOnSingleOption?: boolean;
+}
+export declare const DropdownMenu: <T = {
+    label: string;
+}>({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption, }: DropdownMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/utils/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/utils/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAAG,iGAOlD,iBAAiB,CAAC,CAAC,CAAC,4CAiNtB,CAAC"}