styles-update

dist/Card/Card.d.ts

@@ -2,7 +2,19 @@ import React from 'react';
 export interface CardProps {
     children: React.ReactNode;
     className?: string;
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hover?: boolean;
 }
 export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const CardContent: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const CardFooter: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
 export default Card;

dist/Card/Card.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Card = ({ children, className = '', padding = 'md' }) => {
-    const paddingClasses = {
-        none: '',
-        sm: 'p-3',
-        md: 'p-6',
-        lg: 'p-8'
-    };
-    return (_jsx("div", { className: `bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${className}`, children: children }));
+export const Card = ({ children, className = '', hover = false }) => {
+    return (_jsx("div", { className: `
+      bg-white rounded-xl border border-gray-200 shadow-sm 
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
+      ${className}
+    `, children: children }));
 };
+export const CardHeader = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pb-4 ${className}`, children: children }));
+export const CardContent = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pt-0 ${className}`, children: children }));
+export const CardFooter = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pt-4 border-t border-gray-100 ${className}`, children: children }));
 export default Card;

dist/ChatInterface/ChatInterface.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ChatInterface: React.FC;
+export default ChatInterface;

dist/ChatInterface/ChatInterface.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Message from '../Message';
+import Input from '../Input';
+import Button from '../Button';
+export const ChatInterface = () => {
+    const [message, setMessage] = useState('');
+    const [messages, setMessages] = useState([
+        { id: 1, text: '¡Hola! ¿En qué puedo ayudarte?', isOwn: false, timestamp: '10:00' },
+        { id: 2, text: 'Me gustaría información sobre mis inversiones', isOwn: true, timestamp: '10:01' },
+    ]);
+    const sendMessage = () => {
+        if (message.trim()) {
+            setMessages([
+                ...messages,
+                {
+                    id: messages.length + 1,
+                    text: message,
+                    isOwn: true,
+                    timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                }
+            ]);
+            setMessage('');
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full bg-maya-background rounded-lg border border-gray-200", children: [_jsx("div", { className: "bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg", children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: "w-3 h-3 bg-maya-primary rounded-full" }), _jsx("h3", { className: "font-semibold text-gray-800", children: "Soporte Banorte" }), _jsx("div", { className: "w-2 h-2 bg-maya-success rounded-full" })] }) }), _jsx("div", { className: "flex-1 p-4 overflow-y-auto", children: messages.map((msg) => (_jsx(Message, { text: msg.text, isOwn: msg.isOwn, timestamp: msg.timestamp }, msg.id))) }), _jsx("div", { className: "bg-white p-4 border-t border-gray-200 rounded-b-lg", children: _jsxs("div", { className: "flex space-x-2", children: [_jsx(Input, { value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Escribe tu mensaje...", className: "flex-1", onKeyPress: (e) => e.key === 'Enter' && sendMessage() }), _jsx(Button, { onClick: sendMessage, variant: "primary", children: "Enviar" })] }) })] }));
+};
+export default ChatInterface;

dist/ChatInterface/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ChatInterface';
+export type { ChatInterface } from './ChatInterface';

dist/ChatInterface/index.js

@@ -0,0 +1 @@
+export { default } from './ChatInterface';

dist/Input/Input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

dist/Input/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export const Input = React.forwardRef(({ label, error, helperText, className = '', ...props }, ref) => {
+    return (_jsxs("div", { className: "space-y-1", children: [label && (_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label })), _jsx("input", { ref: ref, className: `w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-maya-primary focus:border-transparent transition-all ${error
+                    ? 'border-red-300 bg-red-50'
+                    : 'border-gray-300 hover:border-gray-400'} ${className}`, ...props }), error && (_jsx("p", { className: "text-sm text-maya-danger", children: error })), helperText && !error && (_jsx("p", { className: "text-sm text-gray-500", children: helperText }))] }));
+});
+export default Input;

dist/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Input';
+export type { InputProps } from './Input';

dist/Input/index.js

@@ -0,0 +1 @@
+export { default } from './Input';

dist/Message/Message.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MessageProps {
+    text: string;
+    isOwn?: boolean;
+    timestamp?: string;
+    status?: 'sent' | 'delivered' | 'read';
+}
+export declare const Message: React.FC<MessageProps>;
+export default Message;

dist/Message/Message.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Message = ({ text, isOwn = false, timestamp, status = 'sent' }) => {
+    return (_jsx("div", { className: `flex ${isOwn ? 'justify-end' : 'justify-start'} mb-4`, children: _jsxs("div", { className: `max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${isOwn
+                ? 'bg-maya-primary text-white rounded-br-none'
+                : 'bg-maya-accent text-gray-800 rounded-bl-none'}`, children: [_jsx("p", { className: "text-sm", children: text }), _jsxs("div", { className: `flex items-center justify-end space-x-1 mt-1 ${isOwn ? 'text-red-100' : 'text-gray-500'}`, children: [_jsx("span", { className: "text-xs", children: timestamp }), isOwn && (_jsx("span", { className: "text-xs", children: status === 'read' ? '✓✓' : status === 'delivered' ? '✓✓' : '✓' }))] })] }) }));
+};
+export default Message;

dist/Message/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Message';
+export type { MessageProps } from './Message';

dist/Message/index.js

@@ -0,0 +1 @@
+export { default } from './Message';

dist/index.d.ts

@@ -1,4 +1,9 @@
 export { default as Button } from './Button';
 export { default as Card } from './Card';
+export { default as Input } from './Input';
+export { default as Message } from './Message';
+export { default as ChatInterface } from './ChatInterface';
 export type { ButtonProps } from './Button';
 export type { CardProps } from './Card';
+export type { InputProps } from './Input';
+export type { MessageProps } from './Message';

dist/index.js

@@ -1,3 +1,6 @@
 // src/index.ts
 export { default as Button } from './Button';
 export { default as Card } from './Card';
+export { default as Input } from './Input';
+export { default as Message } from './Message';
+export { default as ChatInterface } from './ChatInterface';