flysoft-react-ui 1.2.4 → 1.2.6

package/dist/docs/AutocompleteInputDocs.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, AutocompleteInput, Button, Input } from "../index";
-const sampleOptions = [
-    {
-        label: "España",
-        value: "es",
-        icon: "fa-flag",
-        description: "Madrid",
-    },
-    {
-        label: "Estados Unidos",
-        value: "us",
-        icon: "fa-flag",
-        description: "Washington D.C.",
-    },
-    {
-        label: "México",
-        value: "mx",
-        icon: "fa-flag",
-        description: "Ciudad de México",
-    },
-    {
-        label: "Argentina",
-        value: "ar",
-        icon: "fa-flag",
-        description: "Buenos Aires",
-    },
-];
-const users = [
-    {
-        id: 1,
-        firstName: "Juan",
-        lastName: "Pérez",
-        email: "juan.perez@empresa.com",
-        role: "Desarrollador",
-        department: "Tecnología",
-    },
-    {
-        id: 2,
-        firstName: "María",
-        lastName: "García",
-        email: "maria.garcia@empresa.com",
-        role: "Diseñadora",
-        department: "Diseño",
-    },
-    {
-        id: 3,
-        firstName: "Carlos",
-        lastName: "Rodríguez",
-        email: "carlos.rodriguez@empresa.com",
-        role: "Gerente",
-        department: "Ventas",
-    },
-    {
-        id: 4,
-        firstName: "Ana",
-        lastName: "Martínez",
-        email: "ana.martinez@empresa.com",
-        role: "Analista",
-        department: "Marketing",
-    },
-];
-const AutocompleteInputDocs = () => {
-    const [selectedCountry, setSelectedCountry] = React.useState();
-    const [value, setValue] = React.useState("");
-    const [selectedUser, setSelectedUser] = React.useState();
-    const [selectedCountries, setSelectedCountries] = React.useState([]);
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "AutocompleteInput - B\u00FAsqueda y selecci\u00F3n de opciones", 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("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs", placeholder: "Escribe para buscar...", icon: "fa-globe", options: sampleOptions, onSelectOption: (option) => setSelectedCountry(option) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "escribe para filtrar la lista de opciones y selecciona con el mouse o con Enter" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Selecci\u00F3n actual" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: selectedCountry
-                                                        ? `${selectedCountry.label} (${selectedCountry.value.toUpperCase()})`
-                                                        : "Ningún país seleccionado" }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Controlado vs no controlado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Autocomplete no controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "sin prop value: el componente maneja internamente el valor del input" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Autocomplete controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions, value: value, onChange: (val) => {
-                                                    if (typeof val === "string")
-                                                        setValue(val);
-                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "con value y onChange: el valor del input se controla desde el estado externo" }), _jsx(Input, { label: "Valor actual", value: value, readOnly: true, icon: "fa-code" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n y estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Sin resultados", placeholder: "Escribe algo que no exista", icon: "fa-question-circle", options: sampleOptions, noResultsText: "No encontramos coincidencias" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el mensaje se muestra cuando no hay coincidencias al filtrar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Deshabilitado", placeholder: "No editable", icon: "fa-ban", options: sampleOptions, disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled heredado del componente Input" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Selecci\u00F3n m\u00FAltiple" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "M\u00FAltiples Pa\u00EDses", placeholder: "Selecciona uno o m\u00E1s pa\u00EDses...", icon: "fa-globe", options: sampleOptions, multiple: true, value: selectedCountries, onChange: (val) => {
-                                                    const stringArray = Array.isArray(val) ? val : [val];
-                                                    setSelectedCountries(stringArray);
-                                                } }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["usando la prop ", _jsxs("code", { children: ["multiple=", true] }), " permite seleccionar varias opciones con checkboxes."] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Valores seleccionados" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: selectedCountries.length > 0
-                                                        ? selectedCountries.join(", ")
-                                                        : "Ningún país seleccionado" }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso gen\u00E9rico con renderOption personalizado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Buscar usuario", placeholder: "Escribe nombre o email...", icon: "fa-users", options: users, getOptionLabel: (user) => `${user.firstName} ${user.lastName}`, getOptionValue: (user) => user.id, getOptionDescription: (user) => user.email, onSelectOption: (user, userId) => {
-                                                    setSelectedUser(user);
-                                                    console.log("Usuario seleccionado:", user, "ID:", userId);
-                                                }, renderOption: (user) => (_jsxs("div", { className: "flex items-start gap-3 w-full", children: [_jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--color-primary-soft)] flex items-center justify-center", children: _jsx("i", { className: "fal fa-user text-[var(--color-primary)]" }) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsxs("span", { className: "font-medium text-[var(--color-text-primary)]", children: [user.firstName, " ", user.lastName] }), _jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: user.email }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]", children: user.role }), _jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: ["\u2022 ", user.department] })] })] })] })) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "usando getOptionLabel, getOptionValue y renderOption para personalizar completamente el renderizado de opciones sin propiedades label/value/description" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Usuario seleccionado" }), _jsx(Card, { variant: "outlined", children: selectedUser ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: [selectedUser.firstName, " ", selectedUser.lastName] }), _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.email }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)]", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.role }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-muted)" }, children: selectedUser.department })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-muted)" }, children: ["ID: ", selectedUser.id] })] })) : (_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ning\u00FAn usuario seleccionado" })) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de b\u00FAsqueda con AutocompleteInput", subtitle: "Combinaci\u00F3n de AutocompleteInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Limpiar" }), _jsx(Button, { variant: "primary", icon: "fa-search", children: "Buscar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs de residencia", placeholder: "Selecciona un pa\u00EDs", icon: "fa-flag", options: sampleOptions }), _jsx(Input, { label: "Ciudad", placeholder: "Introduce tu ciudad", icon: "fa-city" })] }) })] })] }) }) }));
-};
-export default AutocompleteInputDocs;

package/dist/docs/AvatarDocs.d.ts

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

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

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

package/dist/docs/AvatarDocs.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Avatar, Card } from "../index";
-const AvatarDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Avatar - Iniciales e Im\u00E1genes", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso B\u00E1sico con Iniciales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "John Doe" }), _jsx(Avatar, { text: "Jane Smith" }), _jsx(Avatar, { text: "Mar\u00EDa Garc\u00EDa" }), _jsx(Avatar, { text: "Pedro" }), _jsx(Avatar, { text: "Ana Mar\u00EDa L\u00F3pez" })] }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente muestra las iniciales del texto. Si hay una sola palabra, muestra la primera letra. Si hay m\u00FAltiples palabras, muestra la primera letra de la primera palabra y la primera letra de la \u00FAltima palabra." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Small", size: "sm" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "sm" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Medium", size: "md" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "md (default)" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Large", size: "lg" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "lg" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "size" }), " para cambiar el tama\u00F1o del avatar. Los tama\u00F1os disponibles son: ", _jsx("code", { children: "sm" }), ", ", _jsx("code", { children: "md" }), " (por defecto), y ", _jsx("code", { children: "lg" }), "."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Im\u00E1genes" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=1" }), _jsx(Avatar, { text: "Otra Imagen", image: "https://i.pravatar.cc/150?img=12" }), _jsx(Avatar, { text: "Tercera Imagen", image: "https://i.pravatar.cc/150?img=33" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona una imagen mediante la propiedad ", _jsx("code", { children: "image" }), ", el avatar muestra la imagen en lugar de las iniciales. Si la imagen falla al cargar, autom\u00E1ticamente se mostrar\u00E1n las iniciales como fallback."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Personalizados" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Hexadecimales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Azul", bgColor: "#3b82f6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Verde", bgColor: "#10b981", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rojo", bgColor: "#ef4444", textColor: "#ffffff" }), _jsx(Avatar, { text: "Amarillo", bgColor: "#f59e0b", textColor: "#000000" }), _jsx(Avatar, { text: "P\u00FArpura", bgColor: "#8b5cf6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rosa", bgColor: "#ec4899", textColor: "#ffffff" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores RGB" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "RGB", bgColor: "rgb(59, 130, 246)", textColor: "rgb(255, 255, 255)" }), _jsx(Avatar, { text: "RGBA", bgColor: "rgba(16, 185, 129, 0.9)", textColor: "rgb(255, 255, 255)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Nombres de Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Gray-800", bgColor: "gray-800", textColor: "white" }), _jsx(Avatar, { text: "Gray-700", bgColor: "gray-700", textColor: "white" }), _jsx(Avatar, { text: "Gray-500", bgColor: "gray-500", textColor: "white" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa las propiedades ", _jsx("code", { children: "bgColor" }), " y ", _jsx("code", { children: "textColor" }), " para personalizar los colores. Puedes usar valores hexadecimales (ej:", " ", _jsx("code", { children: "#3b82f6" }), "), RGB (ej: ", _jsx("code", { children: "rgb(59, 130, 246)" }), "), o nombres de colores comunes (ej: ", _jsx("code", { children: "white" }), ", ", _jsx("code", { children: "black" }), ",", _jsx("code", { children: "gray-600" }), "). Por defecto, el fondo es ", _jsx("code", { children: "gray-600" }), " y el texto es ", _jsx("code", { children: "white" }), "."] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplos Pr\u00E1cticos" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Lista de Usuarios" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Juan P\u00E9rez", bgColor: "#3b82f6" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Juan P\u00E9rez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Mar\u00EDa Gonz\u00E1lez", bgColor: "#10b981" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Mar\u00EDa Gonz\u00E1lez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Carlos Rodr\u00EDguez", image: "https://i.pravatar.cc/150?img=5" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Carlos Rodr\u00EDguez" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Diferentes Tama\u00F1os con Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "SM", size: "sm", bgColor: "#8b5cf6" }), _jsx(Avatar, { text: "MD", size: "md", bgColor: "#ec4899" }), _jsx(Avatar, { text: "LG", size: "lg", bgColor: "#f59e0b" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Atributo Title" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Pasa el mouse aqu\u00ED" }), _jsx(Avatar, { text: "John Doe", bgColor: "#3b82f6" }), _jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=8" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente siempre incluye un atributo ", _jsx("code", { children: "title" }), " con el texto completo. Pasa el mouse sobre cualquier avatar para ver el tooltip."] })] })] }) }) }));
-};
-export default AvatarDocs;

package/dist/docs/BadgeDocs.d.ts

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

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

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

package/dist/docs/BadgeDocs.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Badge, Card } from "../index";
-const BadgeDocs = () => {
-    const [clickCount, setClickCount] = useState(0);
-    const [iconClickCount, setIconClickCount] = useState(0);
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la izquierda (por defecto)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { variant: "primary", icon: "fa-star", children: "Primario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la derecha (iconPosition=\"right\")" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", icon: "fa-circle", iconPosition: "right", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation", iconPosition: "right", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times", iconPosition: "right", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info", iconPosition: "right", children: "Informaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", rounded: true, children: "Acci\u00F3n" })] })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), "). El prop ", _jsx("code", { children: "iconPosition" }), " puede ser ", _jsx("code", { children: "\"left\"" }), " (por defecto) o ", _jsx("code", { children: "\"right\"" }), " para posicionar el icono. Combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interactividad con onClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge sin iconos (todo el badge es clickeable)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "primary", onClick: () => setClickCount((prev) => prev + 1), children: ["Click aqu\u00ED (", clickCount, ")"] }), _jsx(Badge, { variant: "success", onClick: () => alert("Badge clickeado!"), children: "Alerta" }), _jsx(Badge, { variant: "info", rounded: true, onClick: () => console.log("Badge info clickeado"), children: "Ver en consola" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando no hay iconos, el ", _jsx("code", { children: "onClick" }), " afecta a todo el badge y muestra cursor pointer."] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge con iconos (solo los iconos son clickeables)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "warning", icon: "fa-times-circle", onClick: () => setIconClickCount((prev) => prev + 1), children: ["Cerrar (", iconClickCount, ")"] }), _jsx(Badge, { variant: "danger", icon: "fa-trash", iconPosition: "right", onClick: () => alert("Eliminar item"), children: "Eliminar" }), _jsx(Badge, { variant: "info", icon: "fa-edit", rounded: true, onClick: () => console.log("Editar clickeado"), children: "Editar" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", onClick: () => alert("Aceptar"), children: "Aceptar" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando hay iconos, el ", _jsx("code", { children: "onClick" }), " solo afecta a los iconos (tienen cursor pointer). El texto del badge no es clickeable."] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background personalizado" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores personalizados (hex, rgb, nombres)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#ff6b6b", textColor: "white", children: "Rojo personalizado" }), _jsx(Badge, { bg: "#4ecdc4", textColor: "white", children: "Turquesa" }), _jsx(Badge, { bg: "#ffe66d", textColor: "#1f2937", children: "Amarillo claro" }), _jsx(Badge, { bg: "rgb(138, 43, 226)", textColor: "white", children: "Violeta RGB" }), _jsx(Badge, { bg: "#95e1d3", textColor: "#1f2937", children: "Verde menta" }), _jsx(Badge, { bg: "#f38181", textColor: "white", children: "Coral" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con iconos y rounded" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#6c5ce7", textColor: "white", icon: "fa-star", rounded: true, children: "Premium" }), _jsx(Badge, { bg: "#00b894", textColor: "white", icon: "fa-check-circle", iconPosition: "right", children: "Verificado" }), _jsx(Badge, { bg: "#e17055", textColor: "white", icon: "fa-fire", rounded: true, children: "Popular" }), _jsx(Badge, { bg: "#0984e3", textColor: "white", icon: "fa-bolt", iconPosition: "right", rounded: true, children: "R\u00E1pido" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con onClick y background personalizado" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#a29bfe", textColor: "white", onClick: () => alert("Badge personalizado clickeado!"), children: "Click aqu\u00ED" }), _jsx(Badge, { bg: "#fd79a8", textColor: "white", icon: "fa-heart", onClick: () => alert("Me gusta!"), rounded: true, children: "Me gusta" }), _jsx(Badge, { bg: "#55efc4", textColor: "#1f2937", icon: "fa-share", iconPosition: "right", onClick: () => console.log("Compartir"), children: "Compartir" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "bg" }), " para definir un color de fondo personalizado (hex, rgb, nombres de colores CSS como \"white\", \"black\", o valores Tailwind como \"gray-800\") y ", _jsx("code", { children: "textColor" }), " para personalizar el color del texto. Si no especificas", " ", _jsx("code", { children: "textColor" }), ", se usa gris oscuro por defecto."] })] })] })] }) }) }));
-};
-export default BadgeDocs;

package/dist/docs/ButtonDocs.d.ts

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

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

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

package/dist/docs/ButtonDocs.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, Button } from "../index";
-const ButtonDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Button - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-check", children: "Primario" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n primario" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-pen", children: "Outline" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n outline" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n ghost" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "sm", variant: "primary", children: "Peque\u00F1o" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n peque\u00F1o" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "md", variant: "primary", children: "Mediano" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n mediano" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "lg", variant: "primary", children: "Grande" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes especificar diferentes colores usando la propiedad", " ", _jsx("code", { children: "color" }), ". Los colores disponibles son: primary, secondary, success, warning, danger e info."] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Primary" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", color: "primary", children: "Primary" }), _jsx(Button, { variant: "primary", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "primary", color: "success", children: "Success" }), _jsx(Button, { variant: "primary", color: "warning", children: "Warning" }), _jsx(Button, { variant: "primary", color: "danger", children: "Danger" }), _jsx(Button, { variant: "primary", color: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Outline" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Button, { variant: "outline", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "outline", color: "success", children: "Success" }), _jsx(Button, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Button, { variant: "outline", color: "danger", children: "Danger" }), _jsx(Button, { variant: "outline", color: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Ghost" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "ghost", color: "primary", children: "Primary" }), _jsx(Button, { variant: "ghost", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "ghost", color: "success", children: "Success" }), _jsx(Button, { variant: "ghost", color: "warning", children: "Warning" }), _jsx(Button, { variant: "ghost", color: "danger", children: "Danger" }), _jsx(Button, { variant: "ghost", color: "info", children: "Info" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDcono" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-download", children: "Con \u00EDcono (izquierda)" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n con \u00EDcono" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-arrow-right", iconPosition: "right", children: "\u00CDcono a la derecha" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono a la derecha" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", loading: true, icon: "fa-spinner", children: "Cargando" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado de carga" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores personalizados" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes especificar colores personalizados usando las propiedades", " ", _jsx("code", { children: "bg" }), " y ", _jsx("code", { children: "textColor" }), ". Acepta c\u00F3digos hex, rgb, rgba, hsl, o nombres de colores comunes (white, black, gray-50, gray-100, etc.)."] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Primary con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", bg: "#8b5cf6", textColor: "white", children: "P\u00FArpura" }), _jsx(Button, { variant: "primary", bg: "#ec4899", textColor: "white", children: "Rosa" }), _jsx(Button, { variant: "primary", bg: "#14b8a6", textColor: "white", children: "Turquesa" }), _jsx(Button, { variant: "primary", bg: "rgb(239, 68, 68)", textColor: "white", children: "Rojo RGB" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Outline con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "outline", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(Button, { variant: "outline", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(Button, { variant: "outline", bg: "#14b8a6", textColor: "#14b8a6", children: "Turquesa" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Ghost con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "ghost", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(Button, { variant: "ghost", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(Button, { variant: "ghost", bg: "#14b8a6", textColor: "#14b8a6", children: "Turquesa" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombres de colores" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", bg: "gray-800", textColor: "white", children: "Gray-800" }), _jsx(Button, { variant: "primary", bg: "gray-700", textColor: "white", children: "Gray-700" }), _jsx(Button, { variant: "outline", bg: "gray-600", textColor: "gray-600", children: "Gray-600" })] })] })] })] })] }) }) }));
-};
-export default ButtonDocs;

package/dist/docs/CardDocs.d.ts

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

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

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

package/dist/docs/CardDocs.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, Button, DropdownMenu } from "../index";
-const CardDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Card - 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: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(Card, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card por defecto" }) }), _jsx(Card, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con sombra elevada" }) }), _jsx(Card, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con borde destacado" }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Card soporta acciones en el header usando la propiedad ", _jsx("code", { children: "headerActions" }), ". Puedes pasar cualquier ReactNode que se mostrar\u00E1 directamente en el header, alineado a la derecha."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Card, { title: "Card con m\u00FAltiples acciones", subtitle: "Ejemplo con botones en el header", headerActions: _jsx("div", { children: _jsx(DropdownMenu, { options: [
-                                                    {
-                                                        label: "Editar",
-                                                        icon: "fa-edit",
-                                                    },
-                                                    {
-                                                        label: "Eliminar",
-                                                        icon: "fa-trash",
-                                                    },
-                                                    {
-                                                        label: "Compartir",
-                                                        icon: "fa-share",
-                                                    },
-                                                ], onOptionSelected: (item) => {
-                                                    console.log(item.label);
-                                                }, renderOption: (item) => (_jsx(Button, { size: "sm", variant: "ghost", icon: item.icon, children: item.label })), renderNode: _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-ellipsis-h", "aria-label": "Acciones" }) }) }), footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-check", children: "Aceptar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con m\u00FAltiples acciones en el header. Puedes pasar cualquier ReactNode, como botones, iconos, o componentes personalizados." }) }), _jsx(Card, { title: "Card con una sola acci\u00F3n", subtitle: "Se muestra directamente", headerActions: _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles") }), children: _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes pasar un solo bot\u00F3n o cualquier otro componente directamente en ", _jsx("code", { children: "headerActions" }), "."] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title y Subtitle como ReactNode" }), _jsx(Card, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-user-circle" }), _jsx("span", { children: "Usuario Personalizado" })] }), subtitle: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-envelope" }), _jsx("span", { children: "usuario@ejemplo.com" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo y subt\u00EDtulo pueden ser ReactNode, permitiendo incluir iconos, badges, o cualquier componente personalizado." }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background de la card. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { title: "Card con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con background personalizado usando clases de Tailwind" }) }), _jsx(Card, { title: "Card con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con gradiente personalizado" }) }), _jsx(Card, { title: "Card con bg y otras clases", className: "bg-green-50 p-8", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind" }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Modo Compacto y Clases Personalizadas" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la prop ", _jsx("code", { children: "compact" }), " para reducir los paddings de la tarjeta. Adem\u00E1s, puedes usar las props", " ", _jsx("code", { children: "headerClassName" }), ", ", _jsx("code", { children: "contentClassName" }), " y", " ", _jsx("code", { children: "footerClassName" }), " para personalizar cada secci\u00F3n."] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { title: "Card Compacta", subtitle: "Dise\u00F1o denso", compact: true, footer: _jsx(Button, { size: "sm", variant: "primary", children: "Acci\u00F3n" }), children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Esta tarjeta tiene paddings reducidos (px-4 pt-2 en header, px-4 pb-2 en footer y px-4 py-4 en contenido)." }) }), _jsx(Card, { title: "Estilos Personalizados", headerClassName: "bg-gray-100 border-b", contentClassName: "bg-blue-50/30", footerClassName: "bg-gray-50 border-t", footer: _jsx("span", { className: "text-xs text-gray-500", children: "Footer personalizado" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo usando clases personalizadas para cada secci\u00F3n de la tarjeta." }) })] })] }), _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: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)"] }), _jsxs("li", { children: [_jsx("strong", { children: "HeaderActions:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar cualquier ReactNode en el header, alineado a la derecha. Puedes pasar botones, iconos, o cualquier componente personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title y Subtitle flexibles:" }), " Pueden ser strings o ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] }), _jsxs("li", { children: [_jsx("strong", { children: "Footer opcional:" }), " Puedes agregar contenido en el footer de la card."] })] }) }) })] }), _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: "children" }), _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: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido principal de la card." })] }), _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: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "T\u00EDtulo de la card. Puede ser un string o un ReactNode." })] }), _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: "subtitle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "Subt\u00EDtulo de la card. Se muestra debajo del t\u00EDtulo." })] }), _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: "headerActions" }), _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: "Contenido que se mostrar\u00E1 en el header de la card, alineado a la derecha. Puede ser cualquier ReactNode, como botones, iconos, o componentes personalizados." })] }), _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: "footer" }), _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: "Contenido del footer de la card." })] }), _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: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _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: "Variante visual de la card. Por defecto es \"default\"." })] }), _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: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background de la card." })] }), _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: "headerClassName" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales para la secci\u00F3n del header." })] }), _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: "contentClassName" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales para la secci\u00F3n del contenido." })] }), _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: "footerClassName" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales para la secci\u00F3n del footer." })] }), _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: "compact" }), _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" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, reduce los paddings internos de la tarjeta. Por defecto es false." })] })] })] }) })] })] }) }) }));
-};
-export default CardDocs;

package/dist/docs/CheckboxDocs.d.ts

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

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

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

package/dist/docs/CheckboxDocs.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, Checkbox, Button } from "../index";
-const CheckboxDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Checkbox - 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("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox est\u00E1ndar con label a la derecha (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox con label a la izquierda" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o peque\u00F1o", size: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o mediano", size: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o grande", size: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones de label" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Label a la derecha", labelPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "posici\u00F3n por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Label a la izquierda", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "label antes del checkbox" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Con error", error: "Debes aceptar los t\u00E9rminos y condiciones" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Deshabilitado", disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados checked" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "No seleccionado", checked: false }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado inicial sin seleccionar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Seleccionado", checked: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox marcado" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de uso" }), _jsx(Card, { title: "Formulario con Checkbox", subtitle: "Ejemplo pr\u00E1ctico de uso de Checkbox en un formulario", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones" }), _jsx(Checkbox, { label: "Deseo recibir notificaciones por email", labelPosition: "left" }), _jsx(Checkbox, { label: "Acepto la pol\u00EDtica de privacidad", error: "Debes aceptar la pol\u00EDtica de privacidad" })] }) })] })] }) }) }));
-};
-export default CheckboxDocs;

package/dist/docs/CurrencyInputDocs.d.ts

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

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

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

package/dist/docs/CurrencyInputDocs.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { useForm, FormProvider } from "react-hook-form";
-import { Card, CurrencyInput, Button } from "../index";
-const HookFormExample = () => {
-    const methods = useForm({
-        defaultValues: { precio: 25000.75 },
-    });
-    const { register, watch, handleSubmit, formState: { errors }, } = methods;
-    const onSubmit = (data) => {
-        alert("Datos enviados: " + JSON.stringify(data));
-    };
-    return (_jsx(FormProvider, { ...methods, children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4 p-4 border rounded-lg bg-gray-50", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(CurrencyInput, { label: "Precio con register", ...register("precio", {
-                                required: "El precio es obligatorio",
-                                min: { value: 10, message: "El mínimo es 10" },
-                            }), error: errors.precio?.message, icon: "fa-shopping-cart" }), _jsxs("div", { className: "flex flex-col justify-center", children: [_jsx("p", { className: "text-sm font-semibold text-gray-700", children: "Estado del formulario:" }), _jsx("pre", { className: "text-xs bg-white p-2 border rounded mt-1", children: JSON.stringify(watch(), null, 2) })] })] }), _jsx(Button, { type: "submit", size: "sm", children: "Probar Submit" })] }) }));
-};
-const CurrencyInputDocs = () => {
-    const [value, setValue] = useState(1234.56);
-    return (_jsxs("div", { className: "max-w-5xl mx-auto space-y-8", children: [_jsx(Card, { title: "CurrencyInput - 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("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(CurrencyInput, { label: "Precio del producto", placeholder: "0,00", icon: "fa-tag", value: value, onChange: (val) => setValue(val) }), _jsxs("div", { className: "p-3 bg-gray-50 rounded-md border border-gray-200", children: [_jsx("p", { className: "text-sm font-semibold text-gray-700 mb-1", children: "Valor num\u00E9rico en el estado profesional (React):" }), _jsx("code", { className: "text-primary font-mono bg-white px-2 py-1 rounded border", children: value !== null ? value.toString() : "null" })] }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este componente formatea autom\u00E1ticamente el valor con separadores de miles y decimales. Al recibir el foco, se eliminan los puntos para facilitar la edici\u00F3n." })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(CurrencyInput, { label: "Entrada vac\u00EDa con placeholder", placeholder: "Ingrese monto...", icon: "fa-dollar-sign" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si no se proporciona un valor, se muestra el placeholder configurado." })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comportamiento del Foco" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(CurrencyInput, { label: "Haz clic para ver el cambio", value: 10500.25, icon: "fa-mouse-pointer" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Observa c\u00F3mo los puntos desaparecen al enfocar el campo y reaparecen al perder el foco." })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(CurrencyInput, { label: "Conversi\u00F3n de punto a coma", placeholder: "Escribe 123.45", icon: "fa-keyboard" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente ayuda al usuario convirtiendo autom\u00E1ticamente el punto del teclado num\u00E9rico en una coma decimal." })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(CurrencyInput, { size: "sm", label: "Peque\u00F1o con error", placeholder: "0,00", error: "Monto requerido" }), _jsx(CurrencyInput, { size: "md", label: "Mediano deshabilitado", value: 1234.56, disabled: true }), _jsx(CurrencyInput, { size: "lg", label: "Grande ReadOnly", value: 9999.99, readOnly: true })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con react-hook-form" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente es compatible con ", _jsx("code", { children: "register" }), " de react-hook-form. Para que funcione correctamente devolviendo valores num\u00E9ricos, aseg\u00FArate de envolver el formulario en un", " ", _jsx("code", { children: "FormProvider" }), "."] }), _jsx(HookFormExample, {})] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props espec\u00EDficas" }), _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", children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", 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", children: "value" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "number | null" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "El valor num\u00E9rico de la entrada." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", children: "onChange" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "(value: number | null) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "Callback que se dispara al perder el foco, entregando el n\u00FAmero parseado." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", children: "...InputProps" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "Omit<InputProps, 'value' | 'onChange'>" }), _jsx("td", { className: "px-4 py-2 text-sm", children: "Soporta todas las props del componente Input est\u00E1ndar." })] })] })] }) })] })] }) }), _jsx("div", { className: "flex justify-start", children: _jsx(Button, { variant: "outline", icon: "fa-arrow-left", onClick: () => window.history.back(), children: "Volver" }) })] }));
-};
-export default CurrencyInputDocs;

package/dist/docs/DataFieldDocs.d.ts

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

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

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

package/dist/docs/DataFieldDocs.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, DataField, Collection } from "../index";
-const DataFieldDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataField - Campo de Datos", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Modo Vertical (por defecto)" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Campo b\u00E1sico con label y value" }), _jsx(DataField, { label: "Nombre", value: "Juan P\u00E9rez" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Campo con n\u00FAmero" }), _jsx(DataField, { label: "Edad", value: 28 })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Campo con ReactNode como value" }), _jsx(DataField, { label: "Estado", value: _jsx("span", { style: { color: "var(--color-success)" }, children: "Activo" }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Modo Inline" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Label y value en la misma l\u00EDnea" }), _jsx(DataField, { label: "Email", value: "juan@example.com", inline: true })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "M\u00FAltiples campos inline" }), _jsxs(Collection, { direction: "column", gap: "0.5rem", children: [_jsx(DataField, { label: "Tel\u00E9fono", value: "+1 234 567 890", inline: true }), _jsx(DataField, { label: "Direcci\u00F3n", value: "123 Main St", inline: true }), _jsx(DataField, { label: "Ciudad", value: "New York", inline: true })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Link" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Campo con link (modo vertical)" }), _jsx(DataField, { label: "Perfil", value: "Ver perfil completo", link: "https://example.com/profile" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Campo con link (modo inline)" }), _jsx(DataField, { label: "Documento", value: "Ver documento", inline: true, link: "https://example.com/document.pdf" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Alineaci\u00F3n" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Alineaci\u00F3n izquierda (por defecto)" }), _jsx(DataField, { label: "Total", value: "$1,234.56", align: "left" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Alineaci\u00F3n centrada" }), _jsx(DataField, { label: "Total", value: "$1,234.56", align: "center" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Alineaci\u00F3n derecha" }), _jsx(DataField, { label: "Total", value: "$1,234.56", align: "right" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Title (Tooltip)" }), _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Pasa el mouse sobre el campo para ver el tooltip" }), _jsx(DataField, { label: "ID de Usuario", value: "USR-12345", title: "Este es el identificador \u00FAnico del usuario en el sistema" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplos Pr\u00E1cticos" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Perfil de usuario" }), _jsx(Card, { children: _jsxs(Collection, { direction: "column", gap: "1rem", children: [_jsx(DataField, { label: "Nombre completo", value: "Juan P\u00E9rez" }), _jsx(DataField, { label: "Email", value: "juan@example.com" }), _jsx(DataField, { label: "Tel\u00E9fono", value: "+1 234 567 890", inline: true }), _jsx(DataField, { label: "Perfil p\u00FAblico", value: "Ver perfil", link: "https://example.com/profile/juan" })] }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Informaci\u00F3n de facturaci\u00F3n" }), _jsx(Card, { children: _jsxs(Collection, { direction: "column", gap: "0.75rem", children: [_jsx(DataField, { label: "N\u00FAmero de factura", value: "INV-2024-001", align: "left" }), _jsx(DataField, { label: "Fecha", value: "15 de Enero, 2024", align: "left" }), _jsx(DataField, { label: "Total", value: "$1,234.56", align: "right", className: "text-lg", labelClassName: "font-bold" }), _jsx(DataField, { label: "Estado", value: _jsx("span", { style: { color: "var(--color-success)" }, children: "Pagado" }), inline: true })] }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Propiedades" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "label (string) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Etiqueta del campo que se muestra arriba (modo vertical) o a la izquierda (modo inline)" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "value (string | number | ReactNode) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Valor a mostrar. Puede ser texto, n\u00FAmero o cualquier elemento React" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "inline (boolean) - Opcional, default: false" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, muestra el label y value en la misma l\u00EDnea. Si es false, muestra el label arriba y el value abajo" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "align (\"left\" | \"right\" | \"center\") - Opcional, default: \"left\"" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Alineaci\u00F3n del contenido del campo (tanto label como value)" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "title (string) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo que se muestra como tooltip al pasar el mouse sobre el campo" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "link (string) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "URL que se abre en una nueva ventana al hacer clic en el bot\u00F3n de flecha" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "className (string) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clases CSS adicionales para el contenedor del campo" })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-1", style: { color: "var(--flysoft-text-primary)" }, children: "labelClassName (string) - Opcional" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clases CSS adicionales para el label del campo" })] })] })] })] }) }) }));
-};
-export default DataFieldDocs;

package/dist/docs/DataTableDocs.d.ts

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

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

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