flysoft-react-ui 0.4.0 → 0.5.0

package/dist/docs/DataTableDocs.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, DataTable, Button, Badge } from "../index";
+const DataTableDocs = () => {
+    const allProducts = [
+        {
+            id: 1,
+            name: "Laptop Dell XPS 15",
+            price: 1299.1,
+            stock: 45,
+            category: "Electrónica",
+            createdAt: "2024-01-15",
+        },
+        {
+            id: 2,
+            name: "Mouse Logitech MX Master",
+            price: 89.99,
+            stock: 1200,
+            category: "Accesorios",
+            createdAt: "2024-02-20",
+        },
+        {
+            id: 3,
+            name: "Teclado Mecánico RGB",
+            price: 149,
+            stock: 0,
+            category: "Accesorios",
+            createdAt: "2024-03-10",
+        },
+        {
+            id: 4,
+            name: "Monitor 4K 27 pulgadas",
+            price: 599,
+            stock: 15,
+            category: "Electrónica",
+            createdAt: "2024-01-05",
+        },
+        {
+            id: 5,
+            name: "Auriculares Sony WH-1000XM5",
+            price: 399.1,
+            stock: 30,
+            category: "Audio",
+            createdAt: "2024-02-12",
+        },
+        {
+            id: 6,
+            name: "Webcam Logitech C920",
+            price: 79.99,
+            stock: 85,
+            category: "Accesorios",
+            createdAt: "2024-03-22",
+        },
+        {
+            id: 7,
+            name: "SSD Samsung 1TB",
+            price: 129.99,
+            stock: 200,
+            category: "Almacenamiento",
+            createdAt: "2024-01-28",
+        },
+        {
+            id: 8,
+            name: "Tablet iPad Pro 12.9",
+            price: 1099.99,
+            stock: 12,
+            category: "Electrónica",
+            createdAt: "2024-02-05",
+        },
+        {
+            id: 9,
+            name: "Cable USB-C Premium",
+            price: 24.99,
+            stock: 500,
+            category: "Accesorios",
+            createdAt: "2024-03-15",
+        },
+        {
+            id: 10,
+            name: "Router WiFi 6 ASUS",
+            price: 199.99,
+            stock: 25,
+            category: "Redes",
+            createdAt: "2024-01-20",
+        },
+        {
+            id: 11,
+            name: "Micrófono Blue Yeti",
+            price: 129.99,
+            stock: 40,
+            category: "Audio",
+            createdAt: "2024-02-18",
+        },
+        {
+            id: 12,
+            name: "Disco Duro Externo 2TB",
+            price: 89.99,
+            stock: 60,
+            category: "Almacenamiento",
+            createdAt: "2024-03-08",
+        },
+    ];
+    // Solo 4 productos para los ejemplos normales
+    const products = allProducts.slice(0, 4);
+    const basicColumns = [
+        {
+            header: "ID",
+            value: "id",
+            align: "center",
+            width: "80px",
+            type: "numeric",
+        },
+        {
+            header: "Nombre",
+            value: "name",
+            align: "left",
+        },
+        {
+            header: "Categoría",
+            value: "category",
+            align: "left",
+        },
+    ];
+    const fullColumns = [
+        {
+            header: "ID",
+            value: "id",
+            align: "center",
+            width: "80px",
+            type: "numeric",
+            footer: `Total`,
+        },
+        {
+            header: "Nombre del Producto",
+            value: "name",
+            align: "left",
+        },
+        {
+            header: "Precio",
+            value: "price",
+            align: "right",
+            type: "currency",
+            footer: `${allProducts
+                .reduce((sum, p) => sum + p.price, 0)
+                .toLocaleString("es-AR", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+            })}`,
+        },
+        {
+            header: "Stock",
+            value: "stock",
+            align: "center",
+            type: "numeric",
+            footer: `${allProducts
+                .reduce((sum, p) => sum + p.stock, 0)
+                .toLocaleString("es-AR")}`,
+        },
+        {
+            header: "Categoría",
+            value: "category",
+            align: "left",
+        },
+        {
+            header: "Fecha de Creación",
+            value: "createdAt",
+            align: "center",
+            type: "date",
+        },
+    ];
+    const customColumns = [
+        {
+            header: "ID",
+            value: "id",
+            align: "center",
+            width: "80px",
+            type: "numeric",
+        },
+        {
+            header: "Nombre",
+            value: "name",
+            align: "left",
+        },
+        {
+            header: "Precio",
+            value: "price",
+            align: "right",
+            type: "currency",
+            tooltip: (row) => `Precio original: ${row.price}€`,
+        },
+        {
+            header: "Stock",
+            value: (row) => (_jsx(Badge, { variant: row.stock > 0 ? "success" : "danger", icon: row.stock > 0 ? "fa-check-circle" : "fa-times-circle", children: row.stock > 0 ? `${row.stock} unidades` : "Sin stock" })),
+            align: "center",
+        },
+        {
+            header: "Acciones",
+            value: "",
+            align: "center",
+            actions: (row) => [
+                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => console.log("Editar", row), children: "Editar" }, "edit"),
+                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => console.log("Eliminar", row), children: "Eliminar" }, "delete"),
+            ],
+        },
+        {
+            header: "Ver",
+            value: "",
+            align: "center",
+            actions: (row) => [
+                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles", row) }, "view"),
+            ],
+        },
+    ];
+    const headerCustomColumns = [
+        {
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-hashtag" }), _jsx("span", { children: "ID" })] })),
+            value: "id",
+            align: "center",
+            width: "80px",
+            type: "numeric",
+        },
+        {
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-box" }), _jsx("span", { children: "Producto" })] })),
+            value: "name",
+            align: "left",
+        },
+        {
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-euro-sign" }), _jsx("span", { children: "Precio" })] })),
+            value: "price",
+            align: "right",
+            type: "currency",
+            headerActions: () => [
+                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-download", onClick: () => console.log("Exportar precios"), children: "Exportar" }, "export"),
+                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-filter", onClick: () => console.log("Filtrar precios"), children: "Filtrar" }, "filter"),
+            ],
+        },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
+};
+export default DataTableDocs;

package/dist/docs/DocsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAiDpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAuDpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/tabsgroup", children: "TabsGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dialog", children: "Dialog" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/pagination", children: "Pagination" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/loader", children: "Loader" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/tabsgroup", children: "TabsGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dialog", children: "Dialog" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/pagination", children: "Pagination" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/loader", children: "Loader" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datatable", children: "DataTable" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dropdownmenu", children: "DropdownMenu" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
 };

package/dist/docs/DocsRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAoB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAsB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -14,8 +14,10 @@ import TabsGroupDocs from "./TabsGroupDocs";
 import DialogDocs from "./DialogDocs";
 import PaginationDocs from "./PaginationDocs";
 import LoaderDocs from "./LoaderDocs";
+import DataTableDocs from "./DataTableDocs";
+import DropdownMenuDocs from "./DropdownMenuDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/DropdownMenuDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const DropdownMenuDocs: React.FC;
+export default DropdownMenuDocs;
+//# sourceMappingURL=DropdownMenuDocs.d.ts.map

package/dist/docs/DropdownMenuDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DropdownMenuDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAirB7B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/docs/DropdownMenuDocs.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, DropdownMenu, Button, Badge } from "../index";
+const DropdownMenuDocs = () => {
+    const [selectedItem, setSelectedItem] = useState(null);
+    // Opciones básicas con propiedad label
+    const basicOptions = [
+        { label: "Editar", id: "edit" },
+        { label: "Eliminar", id: "delete" },
+        { label: "Compartir", id: "share" },
+        { label: "Duplicar", id: "duplicate" },
+    ];
+    // Opciones con iconos usando renderOption
+    const optionsWithIcons = [
+        { label: "Editar", icon: "fa-edit", action: "edit" },
+        { label: "Eliminar", icon: "fa-trash", action: "delete" },
+        { label: "Compartir", icon: "fa-share", action: "share" },
+        { label: "Duplicar", icon: "fa-copy", action: "duplicate" },
+    ];
+    // Opciones complejas usando renderOption
+    const complexOptions = [
+        { label: "Ver Perfil", icon: "fa-user", action: "profile" },
+        { label: "Configuración", icon: "fa-cog", action: "settings" },
+        { label: "Cerrar Sesión", icon: "fa-sign-out-alt", action: "logout" },
+    ];
+    // Opciones con estructura diferente usando getOptionLabel
+    const userOptions = [
+        { id: 1, name: "Juan Pérez", email: "juan@ejemplo.com", role: "Admin" },
+        { id: 2, name: "María García", email: "maria@ejemplo.com", role: "User" },
+        { id: 3, name: "Carlos López", email: "carlos@ejemplo.com", role: "User" },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownMenu - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente DropdownMenu muestra un men\u00FA desplegable con opciones. Por defecto, muestra un bot\u00F3n con tres puntos horizontales. Al hacer clic, se abre un men\u00FA flotante con las opciones. Las opciones deben ser objetos con una propiedad", " ", _jsx("code", { children: "label" }), " o usar ", _jsx("code", { children: "getOptionLabel" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                setSelectedItem(item);
+                                            } }), selectedItem && (_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Opci\u00F3n seleccionada: ", _jsx("strong", { children: selectedItem.label }), " ", "(id: ", selectedItem.id, ")"] }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones con iconos usando renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "renderOption" }), " puedes personalizar completamente c\u00F3mo se renderiza cada opci\u00F3n, incluyendo iconos, badges u otros componentes."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
+                                        console.log("Opción seleccionada:", item);
+                                    }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones complejas con renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo de men\u00FA con opciones que incluyen m\u00FAltiples elementos como badges y diferentes estilos usando ", _jsx("code", { children: "renderOption" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: complexOptions, onOptionSelected: (item) => {
+                                        console.log("Opción compleja seleccionada:", item);
+                                    }, renderOption: (item) => {
+                                        if (item.action === "profile") {
+                                            return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("span", { className: "mr-2", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }));
+                                        }
+                                        if (item.action === "logout") {
+                                            return (_jsxs("div", { className: "flex items-center text-[var(--color-danger)]", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
+                                        }
+                                        return (_jsxs("div", { className: "flex items-center", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
+                                    } }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Usando getOptionLabel" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando los objetos no tienen una propiedad ", _jsx("code", { children: "label" }), ", puedes usar ", _jsx("code", { children: "getOptionLabel" }), " para especificar c\u00F3mo obtener el texto a mostrar."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: userOptions, onOptionSelected: (item) => {
+                                        console.log("Usuario seleccionado:", item);
+                                    }, getOptionLabel: (item) => item.name }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Reemplazar con opci\u00F3n \u00FAnica (replaceOnSingleOption)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando ", _jsx("code", { children: "replaceOnSingleOption" }), " es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, el componente muestra directamente la opci\u00F3n en lugar del bot\u00F3n trigger. \u00DAtil cuando solo hay una acci\u00F3n disponible y no necesitas un men\u00FA desplegable."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=false (por defecto):" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
+                                                        console.log("Opción seleccionada:", item);
+                                                    } })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=true:" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
+                                                        console.log("Opción seleccionada:", item);
+                                                    }, replaceOnSingleOption: true })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "renderNode" }), " puedes personalizar el elemento que activa el men\u00FA. En lugar del bot\u00F3n con tres puntos, puedes usar cualquier componente React."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsx(Button, { variant: "primary", icon: "fa-cog", children: "Men\u00FA de Acciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsx(Button, { variant: "outline", icon: "fa-ellipsis-h", children: "M\u00E1s opciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] rounded cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors", children: [_jsx("i", { className: "fa fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fa fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posicionamiento inteligente" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla. Prueba hacer scroll hacia abajo y abrir el men\u00FA cerca del borde inferior de la pantalla." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                    console.log("Opción seleccionada:", item);
+                                                } }) }), _jsx("div", { className: "h-96 flex items-end justify-center", style: { minHeight: "400px" }, children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                    console.log("Opción seleccionada:", item);
+                                                } }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo en tabla" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso com\u00FAn: men\u00FA de acciones en una fila de tabla." }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "border border-[var(--color-border-default)] rounded", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Nombre" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Email" }), _jsx("th", { className: "px-4 py-2 text-right text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Acciones" })] }) }), _jsx("tbody", { children: userOptions.map((user) => (_jsxs("tr", { className: "border-b border-[var(--color-border-default)] hover:bg-[var(--color-bg-hover)]", children: [_jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-primary)" }, children: user.name }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: user.email }), _jsx("td", { className: "px-4 py-2 text-right", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
+                                                                    console.log(`Acción ${item.action} para usuario:`, user.name);
+                                                                }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }, user.id))) })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Gen\u00E9rico y tipado:" }), " El componente es gen\u00E9rico y acepta cualquier tipo de objeto, manteniendo la seguridad de tipos"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posicionamiento inteligente:" }), " El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre autom\u00E1tico:" }), " El men\u00FA se cierra al hacer clic fuera de \u00E9l o al presionar la tecla Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Renderizado flexible:" }), " Usa", " ", _jsx("code", { children: "renderOption" }), " para renderizado personalizado,", " ", _jsx("code", { children: "getOptionLabel" }), " para obtener el label, o la propiedad ", _jsx("code", { children: "label" }), " por defecto"] }), _jsxs("li", { children: [_jsx("strong", { children: "Trigger personalizable:" }), " Puedes usar", " ", _jsx("code", { children: "renderNode" }), " para personalizar el elemento que activa el men\u00FA"] }), _jsxs("li", { children: [_jsx("strong", { children: "Callback de selecci\u00F3n:" }), " El callback", " ", _jsx("code", { children: "onOptionSelected" }), " recibe el objeto completo seleccionado, no solo el \u00EDndice"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos tem\u00E1ticos:" }), " Respeta las variables CSS del tema actual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Soporte para navegaci\u00F3n por teclado (Escape para cerrar)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Opci\u00F3n \u00FAnica:" }), " Con", " ", _jsx("code", { children: "replaceOnSingleOption" }), " puedes mostrar directamente la opci\u00F3n cuando solo hay una disponible, sin necesidad de un men\u00FA desplegable"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "options" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T[]" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Array de opciones gen\u00E9ricas. Por defecto se asume que tienen una propiedad ", _jsx("code", { children: "label" }), ", o se puede usar", " ", _jsx("code", { children: "getOptionLabel" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onOptionSelected" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando se selecciona una opci\u00F3n. Recibe el objeto completo seleccionado." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Elemento personalizado que activa el men\u00FA. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos horizontales." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "getOptionLabel" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para obtener el label de cada opci\u00F3n. Si no se proporciona, se usa la propiedad ", _jsx("code", { children: "label" }), " del objeto."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para renderizar completamente cada opci\u00F3n. Si se define, se ignora ", _jsx("code", { children: "getOptionLabel" }), " y la propiedad ", _jsx("code", { children: "label" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "replaceOnSingleOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Si es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, muestra directamente la opci\u00F3n en lugar del trigger (bot\u00F3n con tres puntos o renderNode). Por defecto es", " ", _jsx("code", { children: "false" }), "."] })] })] })] }) })] })] }) }) }));
+};
+export default DropdownMenuDocs;