flysoft-react-ui 0.2.5 → 0.2.7

package/dist/App.d.ts.map

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

package/dist/App.js

@@ -1,26 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppLayout } from "./components";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AppLayout, Badge, Button, Card, Collection, DataField, } from "./components";
 import { Routes, Route, Link } from "react-router-dom";
-import { Button, Input, Card, Badge, ThemeProvider, ThemeSwitcher, useTheme, useGlobalThemeStyles, } from "./index";
+import { ThemeProvider } from "./index";
 import "./index.css";
 import { DocsMenu } from "./docs/DocsMenu";
 import DocsRouter from "./docs/DocsRouter";
-// Componente para probar la funcionalidad de resetToDefault
-const ResetToDefaultButton = () => {
-    const { resetToDefault, theme } = useTheme();
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Tema actual: ", _jsx("strong", { children: theme.name })] }), _jsx(Button, { onClick: resetToDefault, variant: "outline", icon: "fa-undo", children: "Resetear al Tema Inicial" })] }));
-};
-// Componente que demuestra el uso de useGlobalThemeStyles
-const GlobalThemeDemo = () => {
-    // Este hook aplica automáticamente los estilos del tema al body/html
-    useGlobalThemeStyles();
-    return (_jsxs("div", { className: "p-4 rounded-lg border", style: {
-            borderColor: "var(--flysoft-border-default)",
-            backgroundColor: "var(--flysoft-bg-secondary)",
-        }, children: [_jsx("h3", { className: "text-lg font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Hook useGlobalThemeStyles" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este componente usa el hook useGlobalThemeStyles que aplica autom\u00E1ticamente los estilos del tema actual al body y html." })] }));
-};
 function HomeContent() {
-    return (_jsxs("div", { children: [_jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("div", { className: "text-center mb-12", children: _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" }) }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(ResetToDefaultButton, {}) }), _jsx("div", { className: "mb-8", children: _jsx(GlobalThemeDemo, {}) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Form Controls", className: "mb-6", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Botones" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-save", children: "Primary" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx(Button, { size: "sm", variant: "primary", children: "Small" }), _jsx(Button, { size: "lg", variant: "outline", children: "Large" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Campos de Entrada" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Mensaje", placeholder: "Escribe tu mensaje aqu\u00ED...", icon: "fa-comment" })] })] })] }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Utility Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Badges" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }) }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Layout Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Cards con Diferentes Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { variant: "default", title: "Card Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con variante por defecto." }) }), _jsx(Card, { variant: "elevated", title: "Card Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con sombra elevada." }) }), _jsx(Card, { variant: "outlined", title: "Card Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con borde destacado." }) }), _jsx(Card, { title: "Card con Footer", 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-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] })] }) }) }) }), _jsxs("div", { className: "mt-8 space-y-8", children: [_jsxs("div", { className: "h-96 bg-blue-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 1" }), _jsx("p", { children: "Contenido adicional para hacer scroll..." })] }), _jsxs("div", { className: "h-96 bg-green-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 2" }), _jsx("p", { children: "M\u00E1s contenido para probar el comportamiento del navbar..." })] }), _jsxs("div", { className: "h-96 bg-yellow-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 3" }), _jsx("p", { children: "Contenido final para asegurar que hay suficiente altura..." })] }), _jsxs("div", { className: "h-96 bg-red-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 4" }), _jsx("p", { children: "\u00DAltima secci\u00F3n para completar la prueba de scroll..." })] })] })] }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/button", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Button" }) }) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/card", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Card" }) }) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/theme", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-adjust", children: "Ver Documentaci\u00F3n de ThemeSwitcher" }) }) })] }));
+    return (_jsx(_Fragment, { children: _jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "secondary", children: "OSOCNA" }), _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" })] }), children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }) }));
 }
 function App() {
     return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));

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

@@ -23,5 +23,5 @@ export const Input = ({ label, error, icon, iconPosition = "left", size = "md",
             return null;
         return (_jsx("i", { className: `fa ${icon} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"}` }));
     };
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--color-text-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface CardProps {
-    title?: string;
-    subtitle?: string;
+    title?: string | React.ReactNode;
+    subtitle?: string | React.ReactNode;
     children: React.ReactNode;
     className?: string;
     headerActions?: React.ReactNode;

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

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

package/dist/components/layout/Card.js

@@ -1,8 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", }) => {
+    // Separar clases de background del className
+    const classArray = className.trim().split(/\s+/).filter(Boolean);
+    const bgClasses = [];
+    const otherClasses = [];
+    classArray.forEach((cls) => {
+        // Detectar clases de background (bg-*, bg-gradient-*, bg-[...])
+        if (cls.startsWith("bg-") || cls.startsWith("bg-gradient-")) {
+            bgClasses.push(cls);
+        }
+        else {
+            otherClasses.push(cls);
+        }
+    });
+    const backgroundClass = bgClasses.length > 0 ? bgClasses.join(" ") : "bg-[var(--color-bg-default)]";
     const baseClasses = `
-    bg-[var(--color-bg-default)] rounded-lg border
+    ${backgroundClass} rounded-lg border
     font-[var(--font-default)]
   `;
     const variantClasses = {
@@ -10,6 +24,6 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
         elevated: `border-[var(--color-border-default)] shadow-[var(--shadow-lg)]`,
         outlined: `border-[var(--color-gray-300)]`,
     };
-    const classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
-    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 py-4 border-b border-[var(--color-border-default)]", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && (_jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] bg-[var(--color-bg-secondary)] rounded-b-lg", children: footer }))] }));
+    const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
+    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 pt-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && _jsx("div", { className: "px-6 pb-4", children: footer })] }));
 };

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CollectionProps {
+    children: React.ReactNode;
+    gap?: string;
+    direction?: "column" | "row";
+    wrap?: boolean;
+    className?: string;
+}
+export declare const Collection: React.FC<CollectionProps>;
+//# sourceMappingURL=Collection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BhD,CAAC"}

package/dist/components/layout/Collection.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export const Collection = ({ children, gap = "0", direction = "column", wrap = false, className = "", }) => {
+    const baseClasses = `
+    flex
+    font-[var(--font-default)]
+  `;
+    const directionClasses = {
+        column: "flex-col",
+        row: "flex-row",
+    };
+    const wrapClass = wrap ? "flex-wrap" : "flex-nowrap";
+    const classes = `${baseClasses} ${directionClasses[direction]} ${wrapClass} ${className}`.trim();
+    const style = {
+        gap: gap,
+    };
+    return (_jsx("div", { className: classes, style: style, children: children }));
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface DataFieldProps {
+    label?: string;
+    value?: string | number | React.ReactNode;
+    inline?: boolean;
+    align?: "left" | "right" | "center";
+    title?: string;
+    link?: string;
+    className?: string;
+    labelClassName?: string;
+}
+export declare const DataField: React.FC<DataFieldProps>;
+//# sourceMappingURL=DataField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkF9C,CAAC"}

package/dist/components/layout/DataField.js

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "../form-controls";
+export const DataField = ({ label, value, inline = false, align = "left", title, link, className = "", labelClassName = "", }) => {
+    const handleLinkClick = () => {
+        if (link) {
+            window.open(link, "_blank", "noopener,noreferrer");
+        }
+    };
+    const alignClasses = {
+        left: "text-left",
+        right: "text-right",
+        center: "text-center",
+    };
+    const justifyClasses = {
+        left: "justify-start",
+        right: "justify-end",
+        center: "justify-center",
+    };
+    const baseContainerClasses = `
+    font-[var(--font-default)]
+    ${alignClasses[align]}
+    ${className}
+  `.trim();
+    const baseLabelClasses = `
+    text-sm text-[var(--color-text-primary)]
+    ${labelClassName}
+  `.trim();
+    const baseValueClasses = `
+    text-base text-[var(--color-text-primary)]
+  `;
+    if (inline) {
+        // Modo inline: label y value en la misma línea
+        return (_jsx("div", { className: baseContainerClasses, title: title, children: _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [label && _jsxs("span", { className: baseLabelClasses, children: [label, ":"] }), _jsx("span", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] }) }));
+    }
+    // Modo vertical: label arriba, value abajo
+    return (_jsxs("div", { className: baseContainerClasses, title: title, children: [label && _jsx("div", { className: baseLabelClasses, children: label }), _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [_jsx("div", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] })] }));
+};

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

@@ -2,4 +2,8 @@ export { Card } from "./Card";
 export type { CardProps } from "./Card";
 export { AppLayout } from "./AppLayout";
 export type { AppLayoutProps } from "./AppLayout";
+export { Collection } from "./Collection";
+export type { CollectionProps } from "./Collection";
+export { DataField } from "./DataField";
+export type { DataFieldProps } from "./DataField";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/layout/index.js

@@ -1,2 +1,4 @@
 export { Card } from "./Card";
 export { AppLayout } from "./AppLayout";
+export { Collection } from "./Collection";
+export { DataField } from "./DataField";

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

@@ -1 +1 @@
-{"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,EAuErB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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,EA+IrB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/docs/CardDocs.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Card, Button } 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" }), _jsx(Card, { title: "Card con Acciones", subtitle: "Ejemplo de header y footer", headerActions: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", icon: "fa-edit", children: "Editar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), 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 acciones en header y contenido descriptivo" }) })] })] }) }) }));
+    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" }), _jsx(Card, { title: "Card con Acciones", subtitle: "Ejemplo de header y footer", headerActions: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", icon: "fa-edit", children: "Editar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), 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 acciones en header y contenido descriptivo" }) })] }), _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: "fa fa-user-circle" }), _jsx("span", { children: "Usuario Personalizado" })] }), subtitle: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa 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" }) })] })] })] }) }) }));
 };
 export default CardDocs;

package/dist/docs/DataFieldDocs.d.ts

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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/DocsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAsBpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAyBpB,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/theme", children: "ThemeSwitcher" }) })] }) }));
+    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/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) })] }) }));
 };

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;AAQ1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAW9B,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;AAS1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAY9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -6,7 +6,8 @@ import CardDocs from "./CardDocs";
 import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
 import BadgeDocs from "./BadgeDocs";
+import DataFieldDocs from "./DataFieldDocs";
 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: "theme", element: _jsx(ThemeSwitcherDocs, {}) })] }));
+    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: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) })] }));
 };
 export default DocsRouter;