flysoft-react-ui 0.1.8 → 0.1.10

package/dist/templates/forms/LoginForm.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Button, Input, Card } from "../../index";
+export const LoginForm = ({ onSubmit, loading = false, error, className = "", }) => {
+    const [formData, setFormData] = useState({
+        email: "",
+        password: "",
+    });
+    const [errors, setErrors] = useState({});
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validación básica
+        const newErrors = {};
+        if (!formData.email) {
+            newErrors.email = "El email es requerido";
+        }
+        else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+            newErrors.email = "El email no es válido";
+        }
+        if (!formData.password) {
+            newErrors.password = "La contraseña es requerida";
+        }
+        setErrors(newErrors);
+        if (Object.keys(newErrors).length === 0) {
+            onSubmit?.(formData);
+        }
+    };
+    const handleChange = (field) => (e) => {
+        setFormData((prev) => ({ ...prev, [field]: e.target.value }));
+        // Limpiar error cuando el usuario empiece a escribir
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: undefined }));
+        }
+    };
+    return (_jsxs(Card, { title: "Iniciar Sesi\u00F3n", subtitle: "Ingresa tus credenciales para acceder", className: className, children: [_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && (_jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg", children: _jsxs("p", { className: "text-sm text-red-600", children: [_jsx("i", { className: "fa fa-exclamation-triangle mr-2" }), error] }) })), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope", value: formData.email, onChange: handleChange("email"), error: errors.email, disabled: loading }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "Tu contrase\u00F1a", icon: "fa-lock", value: formData.password, onChange: handleChange("password"), error: errors.password, disabled: loading }), _jsx(Button, { type: "submit", variant: "primary", size: "lg", icon: "fa-sign-in-alt", loading: loading, className: "w-full", children: "Iniciar Sesi\u00F3n" })] }), _jsx("div", { className: "mt-4 text-center", children: _jsxs("p", { className: "text-sm text-gray-600", children: ["\u00BFNo tienes cuenta?", " ", _jsx("a", { href: "#", className: "text-blue-600 hover:text-blue-800 font-medium", children: "Reg\u00EDstrate aqu\u00ED" })] }) })] }));
+};

package/dist/templates/forms/RegistrationForm.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+/**
+ * Template de Formulario de Registro
+ *
+ * Ejemplo de uso:
+ * ```tsx
+ * import { RegistrationForm } from "flysoft-react-ui/templates/forms/RegistrationForm";
+ *
+ * function App() {
+ *   return <RegistrationForm onSubmit={handleRegistration} />;
+ * }
+ * ```
+ */
+export interface RegistrationFormProps {
+    onSubmit?: (data: {
+        firstName: string;
+        lastName: string;
+        email: string;
+        password: string;
+        confirmPassword: string;
+    }) => void;
+    loading?: boolean;
+    error?: string;
+    className?: string;
+}
+export declare const RegistrationForm: React.FC<RegistrationFormProps>;
+//# sourceMappingURL=RegistrationForm.d.ts.map

package/dist/templates/forms/RegistrationForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistrationForm.d.ts","sourceRoot":"","sources":["../../../src/templates/forms/RegistrationForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,eAAe,EAAE,MAAM,CAAC;KACzB,KAAK,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmK5D,CAAC"}

package/dist/templates/forms/RegistrationForm.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Button, Input, Card } from "../../index";
+export const RegistrationForm = ({ onSubmit, loading = false, error, className = "", }) => {
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+    });
+    const [errors, setErrors] = useState({});
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validación
+        const newErrors = {};
+        if (!formData.firstName.trim()) {
+            newErrors.firstName = "El nombre es requerido";
+        }
+        if (!formData.lastName.trim()) {
+            newErrors.lastName = "El apellido es requerido";
+        }
+        if (!formData.email) {
+            newErrors.email = "El email es requerido";
+        }
+        else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+            newErrors.email = "El email no es válido";
+        }
+        if (!formData.password) {
+            newErrors.password = "La contraseña es requerida";
+        }
+        else if (formData.password.length < 6) {
+            newErrors.password = "La contraseña debe tener al menos 6 caracteres";
+        }
+        if (!formData.confirmPassword) {
+            newErrors.confirmPassword = "Confirma tu contraseña";
+        }
+        else if (formData.password !== formData.confirmPassword) {
+            newErrors.confirmPassword = "Las contraseñas no coinciden";
+        }
+        setErrors(newErrors);
+        if (Object.keys(newErrors).length === 0) {
+            onSubmit?.(formData);
+        }
+    };
+    const handleChange = (field) => (e) => {
+        setFormData((prev) => ({ ...prev, [field]: e.target.value }));
+        // Limpiar error cuando el usuario empiece a escribir
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: undefined }));
+        }
+    };
+    return (_jsxs(Card, { title: "Crear Cuenta", subtitle: "Completa los datos para registrarte", className: className, children: [_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && (_jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg", children: _jsxs("p", { className: "text-sm text-red-600", children: [_jsx("i", { className: "fa fa-exclamation-triangle mr-2" }), error] }) })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Tu nombre", icon: "fa-user", value: formData.firstName, onChange: handleChange("firstName"), error: errors.firstName, disabled: loading }), _jsx(Input, { label: "Apellido", placeholder: "Tu apellido", icon: "fa-user", value: formData.lastName, onChange: handleChange("lastName"), error: errors.lastName, disabled: loading })] }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope", value: formData.email, onChange: handleChange("email"), error: errors.email, disabled: loading }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "M\u00EDnimo 6 caracteres", icon: "fa-lock", value: formData.password, onChange: handleChange("password"), error: errors.password, disabled: loading }), _jsx(Input, { label: "Confirmar Contrase\u00F1a", type: "password", placeholder: "Repite tu contrase\u00F1a", icon: "fa-lock", value: formData.confirmPassword, onChange: handleChange("confirmPassword"), error: errors.confirmPassword, disabled: loading }), _jsx(Button, { type: "submit", variant: "primary", size: "lg", icon: "fa-user-plus", loading: loading, className: "w-full", children: "Crear Cuenta" })] }), _jsx("div", { className: "mt-4 text-center", children: _jsxs("p", { className: "text-sm text-gray-600", children: ["\u00BFYa tienes cuenta?", " ", _jsx("a", { href: "#", className: "text-blue-600 hover:text-blue-800 font-medium", children: "Inicia sesi\u00F3n aqu\u00ED" })] }) })] }));
+};

package/dist/templates/layouts/DashboardLayout.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+/**
+ * Template de Layout de Dashboard
+ *
+ * Ejemplo de uso:
+ * ```tsx
+ * import { DashboardLayout } from "flysoft-react-ui/templates/layouts/DashboardLayout";
+ *
+ * function App() {
+ *   return (
+ *     <DashboardLayout
+ *       title="Mi Dashboard"
+ *       stats={stats}
+ *       actions={<Button>Nueva Acción</Button>}
+ *     >
+ *       <div>Contenido del dashboard</div>
+ *     </DashboardLayout>
+ *   );
+ * }
+ * ```
+ */
+export interface DashboardStat {
+    title: string;
+    value: string | number;
+    change?: string;
+    changeType?: "positive" | "negative" | "neutral";
+    icon?: string;
+}
+export interface DashboardLayoutProps {
+    title: string;
+    subtitle?: string;
+    stats?: DashboardStat[];
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const DashboardLayout: React.FC<DashboardLayoutProps>;
+//# sourceMappingURL=DashboardLayout.d.ts.map

package/dist/templates/layouts/DashboardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.d.ts","sourceRoot":"","sources":["../../../src/templates/layouts/DashboardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoG1D,CAAC"}

package/dist/templates/layouts/DashboardLayout.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card } from "../../index";
+export const DashboardLayout = ({ title, subtitle, stats = [], actions, children, className = "", }) => {
+    const getChangeColor = (changeType) => {
+        switch (changeType) {
+            case "positive":
+                return "text-green-600";
+            case "negative":
+                return "text-red-600";
+            default:
+                return "text-gray-600";
+        }
+    };
+    const getChangeIcon = (changeType) => {
+        switch (changeType) {
+            case "positive":
+                return "fa-arrow-up";
+            case "negative":
+                return "fa-arrow-down";
+            default:
+                return "fa-minus";
+        }
+    };
+    return (_jsxs("div", { className: `min-h-screen bg-gray-50 ${className}`, children: [_jsx("div", { className: "bg-white shadow-sm border-b", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex justify-between items-center py-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900", children: title }), subtitle && (_jsx("p", { className: "mt-1 text-sm text-gray-600", children: subtitle }))] }), actions && (_jsx("div", { className: "flex items-center space-x-3", children: actions }))] }) }) }), stats.length > 0 && (_jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: stats.map((stat, index) => (_jsx(Card, { variant: "elevated", className: "p-6", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex-shrink-0", children: stat.icon && (_jsx("div", { className: "w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center", children: _jsx("i", { className: `fa ${stat.icon} text-blue-600` }) })) }), _jsxs("div", { className: "ml-4 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-gray-600", children: stat.title }), _jsx("p", { className: "text-2xl font-semibold text-gray-900", children: stat.value }), stat.change && (_jsxs("div", { className: "flex items-center mt-1", children: [_jsx("i", { className: `fa ${getChangeIcon(stat.changeType)} text-xs mr-1 ${getChangeColor(stat.changeType)}` }), _jsx("span", { className: `text-sm ${getChangeColor(stat.changeType)}`, children: stat.change })] }))] })] }) }, index))) }) })), _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: children })] }));
+};

package/dist/templates/layouts/SidebarLayout.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+/**
+ * Template de Layout con Sidebar
+ *
+ * Ejemplo de uso:
+ * ```tsx
+ * import { SidebarLayout } from "flysoft-react-ui/templates/layouts/SidebarLayout";
+ *
+ * function App() {
+ *   const menuItems = [
+ *     { label: "Dashboard", icon: "fa-home", href: "/" },
+ *     { label: "Usuarios", icon: "fa-users", href: "/users" },
+ *   ];
+ *
+ *   return (
+ *     <SidebarLayout
+ *       title="Mi App"
+ *       menuItems={menuItems}
+ *       user={{ name: "Juan Pérez", avatar: "fa-user" }}
+ *     >
+ *       <div>Contenido principal</div>
+ *     </SidebarLayout>
+ *   );
+ * }
+ * ```
+ */
+export interface MenuItem {
+    label: string;
+    icon: string;
+    href: string;
+    badge?: string | number;
+    children?: MenuItem[];
+}
+export interface User {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+export interface SidebarLayoutProps {
+    title: string;
+    menuItems: MenuItem[];
+    user: User;
+    children: React.ReactNode;
+    className?: string;
+    onLogout?: () => void;
+}
+export declare const SidebarLayout: React.FC<SidebarLayoutProps>;
+//# sourceMappingURL=SidebarLayout.d.ts.map

package/dist/templates/layouts/SidebarLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/templates/layouts/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwItD,CAAC"}

package/dist/templates/layouts/SidebarLayout.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Button, Badge } from "../../index";
+export const SidebarLayout = ({ title, menuItems, user, children, className = "", onLogout, }) => {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [activeItem, setActiveItem] = useState(menuItems[0]?.href || "");
+    const toggleSidebar = () => {
+        setSidebarOpen(!sidebarOpen);
+    };
+    const handleMenuClick = (href) => {
+        setActiveItem(href);
+        setSidebarOpen(false); // Cerrar sidebar en móvil
+    };
+    return (_jsxs("div", { className: `min-h-screen bg-gray-50 ${className}`, children: [sidebarOpen && (_jsx("div", { className: "fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden", onClick: () => setSidebarOpen(false) })), _jsxs("div", { className: `
+        fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
+        lg:translate-x-0 lg:static lg:inset-0
+      `, children: [_jsxs("div", { className: "flex items-center justify-between h-16 px-6 border-b", children: [_jsx("h1", { className: "text-xl font-bold text-gray-900", children: title }), _jsx("button", { onClick: toggleSidebar, className: "lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-600", children: _jsx("i", { className: "fa fa-times" }) })] }), _jsx("nav", { className: "mt-6 px-3", children: _jsx("div", { className: "space-y-1", children: menuItems.map((item) => (_jsxs("a", { href: item.href, onClick: (e) => {
+                                    e.preventDefault();
+                                    handleMenuClick(item.href);
+                                }, className: `
+                  group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors
+                  ${activeItem === item.href
+                                    ? "bg-blue-100 text-blue-700"
+                                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
+                `, children: [_jsx("i", { className: `fa ${item.icon} mr-3 flex-shrink-0` }), _jsx("span", { className: "flex-1", children: item.label }), item.badge && (_jsx(Badge, { variant: "primary", size: "sm", className: "ml-2", children: item.badge }))] }, item.href))) }) }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 border-t", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center", children: _jsx("i", { className: `fa ${user.avatar || "fa-user"} text-gray-600` }) }) }), _jsxs("div", { className: "ml-3 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-gray-900", children: user.name }), user.email && (_jsx("p", { className: "text-xs text-gray-500", children: user.email }))] }), onLogout && (_jsx("button", { onClick: onLogout, className: "ml-2 p-1 text-gray-400 hover:text-gray-600", title: "Cerrar sesi\u00F3n", children: _jsx("i", { className: "fa fa-sign-out-alt" }) }))] }) })] }), _jsxs("div", { className: "lg:pl-64", children: [_jsx("div", { className: "sticky top-0 z-10 bg-white shadow-sm border-b", children: _jsxs("div", { className: "flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8", children: [_jsx("button", { onClick: toggleSidebar, className: "lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-600", children: _jsx("i", { className: "fa fa-bars" }) }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx(Button, { variant: "ghost", size: "sm", icon: "fa-bell", children: "Notificaciones" }), _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-cog", children: "Configuraci\u00F3n" })] })] }) }), _jsx("main", { className: "p-4 sm:p-6 lg:p-8", children: children })] })] }));
+};

package/dist/templates/patterns/FormPattern.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+/**
+ * Template de Patrón de Formulario Reutilizable
+ *
+ * Este patrón proporciona una estructura base para cualquier formulario
+ * con validación, estados de carga y manejo de errores.
+ *
+ * Ejemplo de uso:
+ * ```tsx
+ * import { FormPattern } from "flysoft-react-ui/templates/patterns/FormPattern";
+ *
+ * function MyForm() {
+ *   const fields = [
+ *     { name: "name", label: "Nombre", type: "text", icon: "fa-user", required: true },
+ *     { name: "email", label: "Email", type: "email", icon: "fa-envelope", required: true },
+ *   ];
+ *
+ *   return (
+ *     <FormPattern
+ *       title="Mi Formulario"
+ *       fields={fields}
+ *       onSubmit={handleSubmit}
+ *       submitText="Guardar"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export interface FormField {
+    name: string;
+    label: string;
+    type?: string;
+    placeholder?: string;
+    icon?: string;
+    required?: boolean;
+    validation?: (value: string) => string | undefined;
+    multiline?: boolean;
+    rows?: number;
+}
+export interface FormPatternProps {
+    title: string;
+    subtitle?: string;
+    fields: FormField[];
+    onSubmit: (data: Record<string, string>) => void;
+    submitText?: string;
+    submitIcon?: string;
+    loading?: boolean;
+    error?: string;
+    success?: boolean;
+    className?: string;
+    gridCols?: 1 | 2;
+}
+export declare const FormPattern: React.FC<FormPatternProps>;
+//# sourceMappingURL=FormPattern.d.ts.map

package/dist/templates/patterns/FormPattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormPattern.d.ts","sourceRoot":"","sources":["../../../src/templates/patterns/FormPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkLlD,CAAC"}

package/dist/templates/patterns/FormPattern.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Button, Input, Card } from "../../index";
+export const FormPattern = ({ title, subtitle, fields, onSubmit, submitText = "Enviar", submitIcon = "fa-paper-plane", loading = false, error, success = false, className = "", gridCols = 1, }) => {
+    const [formData, setFormData] = useState(fields.reduce((acc, field) => ({ ...acc, [field.name]: "" }), {}));
+    const [errors, setErrors] = useState({});
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validación
+        const newErrors = {};
+        fields.forEach((field) => {
+            const value = formData[field.name] || "";
+            if (field.required && !value.trim()) {
+                newErrors[field.name] = `${field.label} es requerido`;
+            }
+            else if (field.validation) {
+                const validationError = field.validation(value);
+                if (validationError) {
+                    newErrors[field.name] = validationError;
+                }
+            }
+        });
+        setErrors(newErrors);
+        if (Object.keys(newErrors).length === 0) {
+            onSubmit(formData);
+        }
+    };
+    const handleChange = (fieldName) => (e) => {
+        setFormData((prev) => ({ ...prev, [fieldName]: e.target.value }));
+        // Limpiar error cuando el usuario empiece a escribir
+        if (errors[fieldName]) {
+            setErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            });
+        }
+    };
+    const renderField = (field) => {
+        const commonProps = {
+            label: field.label,
+            placeholder: field.placeholder,
+            icon: field.icon,
+            value: formData[field.name] || "",
+            onChange: handleChange(field.name),
+            error: errors[field.name],
+            disabled: loading,
+        };
+        if (field.multiline) {
+            return (_jsxs("div", { className: "w-full", children: [_jsxs("label", { className: "block text-sm font-medium text-[var(--color-text-primary)] mb-1 font-[var(--font-default)]", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsxs("div", { className: "relative", children: [field.icon && (_jsx("i", { className: `fa ${field.icon} text-[var(--color-text-muted)] absolute top-3 left-3 w-5 h-5` })), _jsx("textarea", { placeholder: field.placeholder, className: `
+                w-full border rounded-lg transition-colors focus:outline-none focus:ring-2 
+                disabled:opacity-50 disabled:cursor-not-allowed
+                font-[var(--font-default)] text-[var(--color-text-primary)]
+                bg-[var(--color-bg-default)] px-4 py-3 text-base
+                ${field.icon ? "pl-10" : "pl-4"}
+                ${errors[field.name]
+                                    ? "border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]"
+                                    : "border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]"}
+              `, rows: field.rows || 4, value: formData[field.name] || "", onChange: handleChange(field.name), disabled: loading })] }), errors[field.name] && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: errors[field.name] }))] }, field.name));
+        }
+        return (_jsx(Input, { type: field.type || "text", ...commonProps }, field.name));
+    };
+    if (success) {
+        return (_jsx(Card, { title: "\u00A1\u00C9xito!", subtitle: "La operaci\u00F3n se complet\u00F3 correctamente", className: className, children: _jsxs("div", { className: "text-center py-8", children: [_jsx("div", { className: "w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx("i", { className: "fa fa-check text-green-600 text-2xl" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: "\u00A1Operaci\u00F3n exitosa!" }), _jsx("p", { className: "text-gray-600 mb-4", children: "Los datos se han procesado correctamente." }), _jsx(Button, { variant: "outline", onClick: () => window.location.reload(), icon: "fa-refresh", children: "Continuar" })] }) }));
+    }
+    return (_jsx(Card, { title: title, subtitle: subtitle, className: className, children: _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && (_jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg", children: _jsxs("p", { className: "text-sm text-red-600", children: [_jsx("i", { className: "fa fa-exclamation-triangle mr-2" }), error] }) })), _jsx("div", { className: `grid grid-cols-1 ${gridCols === 2 ? "md:grid-cols-2" : ""} gap-4`, children: fields.map(renderField) }), _jsx(Button, { type: "submit", variant: "primary", size: "lg", icon: submitIcon, loading: loading, className: "w-full", children: submitText })] }) }));
+};

package/package.json

@@ -1,15 +1,27 @@
 {
   "name": "flysoft-react-ui",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
-  "description": "A modern React UI component library with Tailwind CSS",
+  "description": "A modern React UI component library with Tailwind CSS, TypeScript, and FontAwesome 5. Includes forms, layouts, themes, and templates for rapid development.",
   "keywords": [
     "react",
     "ui",
     "components",
     "tailwind",
-    "typescript"
+    "typescript",
+    "forms",
+    "login",
+    "registration",
+    "contact-forms",
+    "dashboard",
+    "layout",
+    "themes",
+    "fontawesome",
+    "accessibility",
+    "responsive",
+    "modern",
+    "design-system"
   ],
   "author": "Flysoft",
   "license": "MIT",
@@ -40,7 +52,11 @@
     "prepublishOnly": "npm run build",
     "publish:patch": "npm version patch && npm publish",
     "publish:minor": "npm version minor && npm publish",
-    "publish:major": "npm version major && npm publish"
+    "publish:major": "npm version major && npm publish",
+    "update-docs": "node scripts/update-docs.js",
+    "validate-docs": "node scripts/validate-docs.js",
+    "docs:update": "npm run update-docs",
+    "docs:validate": "npm run validate-docs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",