styles-update

dist/Card/Card.d.ts

@@ -2,7 +2,18 @@ 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 default Card;
+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;
+}>;

dist/Card/Card.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Card = ({ children, className = '', padding = 'md' }) => {
+export const Card = ({ children, className = '', hover = false }) => (_jsx("div", { className: `
-    const paddingClasses = {
+      bg-white rounded-xl border border-gray-200 shadow-sm 
-        none: '',
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
-        sm: 'p-3',
+      ${className}
-        md: 'p-6',
+    `, children: children }));
-        lg: 'p-8'
+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 });
-    return (_jsx("div", { className: `bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${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/Card/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Card';
+export { Card, CardHeader, CardContent, CardFooter } from './Card';
 export type { CardProps } from './Card';

dist/Card/index.js

@@ -1 +1 @@
-export { default } from './Card';
+export { Card, CardHeader, CardContent, CardFooter } from './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 { Card, CardHeader, CardContent, CardFooter } 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 { Card, CardHeader, CardContent, CardFooter } from './Card';
+export { default as Input } from './Input';
+export { default as Message } from './Message';
+export { default as ChatInterface } from './ChatInterface';

src/components/Card/Card.tsx

@@ -3,26 +3,33 @@ import React from 'react';
 export interface CardProps {
   children: React.ReactNode;
   className?: string;
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  hover?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({
+export const Card: React.FC<CardProps> = ({ 
-  children,
+  children, 
   className = '',
-  padding = 'md'
+  hover = false 
-}) => {
+}) => (
-  const paddingClasses = {
+  <div
-    none: '',
+    className={`
-    sm: 'p-3',
+      bg-white rounded-xl border border-gray-200 shadow-sm 
-    md: 'p-6',
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
-    lg: 'p-8'
+      ${className}
-  };
+    `}
+  >
+    {children}
+  </div>
+);
 
-  return (
+export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({
-    <div className={`bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${className}`}>
+  children, className = '',
-      {children}
+}) => <div className={`p-6 pb-4 ${className}`}>{children}</div>;
-    </div>
-  );
-};
 
-export default Card;
+export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children, className = '',
+}) => <div className={`p-6 pt-0 ${className}`}>{children}</div>;
+
+export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children, className = '',
+}) => <div className={`p-6 pt-4 border-t border-gray-100 ${className}`}>{children}</div>;

src/components/Card/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Card';
+export { Card,CardHeader,CardContent,CardFooter} from './Card';
 export type { CardProps } from './Card';

src/components/ChatInterface/ChatInterface.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Message from '../Message';
+import  Input  from '../Input';
+import Button  from '../Button';
+
+export const ChatInterface: React.FC = () => {
+  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 (
+    <div className="flex flex-col h-full bg-maya-background rounded-lg border border-gray-200">
+      {/* Chat Header */}
+      <div className="bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg">
+        <div className="flex items-center space-x-3">
+          <div className="w-3 h-3 bg-maya-primary rounded-full"></div>
+          <h3 className="font-semibold text-gray-800">Soporte Banorte</h3>
+          <div className="w-2 h-2 bg-maya-success rounded-full"></div>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        {messages.map((msg) => (
+          <Message
+            key={msg.id}
+            text={msg.text}
+            isOwn={msg.isOwn}
+            timestamp={msg.timestamp}
+          />
+        ))}
+      </div>
+
+      {/* Input Area */}
+      <div className="bg-white p-4 border-t border-gray-200 rounded-b-lg">
+        <div className="flex space-x-2">
+          <Input
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Escribe tu mensaje..."
+            className="flex-1"
+            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+          />
+          <Button onClick={sendMessage} variant="primary">
+            Enviar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface

src/components/ChatInterface/index.ts

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

src/components/Input/Input.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className = '', ...props }, ref) => {
+    return (
+      <div className="space-y-1">
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {label}
+          </label>
+        )}
+        <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 && (
+          <p className="text-sm text-maya-danger">{error}</p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Input

src/components/Input/index.ts

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

src/components/Message/Message.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export interface MessageProps {
+  text: string;
+  isOwn?: boolean;
+  timestamp?: string;
+  status?: 'sent' | 'delivered' | 'read';
+}
+
+export const Message: React.FC<MessageProps> = ({
+  text,
+  isOwn = false,
+  timestamp,
+  status = 'sent'
+}) => {
+  return (
+    <div className={`flex ${isOwn ? 'justify-end' : 'justify-start'} mb-4`}>
+      <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'
+      }`}>
+        <p className="text-sm">{text}</p>
+        <div className={`flex items-center justify-end space-x-1 mt-1 ${
+          isOwn ? 'text-red-100' : 'text-gray-500'
+        }`}>
+          <span className="text-xs">{timestamp}</span>
+          {isOwn && (
+            <span className="text-xs">
+              {status === 'read' ? '✓✓' : status === 'delivered' ? '✓✓' : '✓'}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Message

src/components/Message/index.ts

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

src/components/index.ts

@@ -1,5 +1,11 @@
 // src/index.ts
 export { default as Button } from './Button';
-export { default as Card } from './Card';
+export { Card, CardHeader, CardContent, CardFooter } 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 { CardProps } from './Card';
+export type { InputProps } from './Input';
+export type { MessageProps } from './Message';

tailwind.config.js

@@ -6,15 +6,13 @@ module.exports = {
     extend: {
       colors: {
         'maya': {
-           primary: '#EF2945',        // Rojo primario del logo Banorte
+          primary: '#EA002A',
-        secondary: '#684D3D',      // Café secundario del logo  
+          secondary: '#684D3D',
-        neutral: {
+          accent: '#C7C9C9',
-          light: '#F5F5F5',        // Fondo claro
+          background: '#F5F5F5',
-          medium: '#C7C9C9',       // Gris medio
+          dark: '#6A6867',
-          dark: '#6A6867',         // Gris oscuro
+          success: '#10B981',
-        },
+          danger: '#EF4444',
-        success: '#10B981',
-        danger: '#EF4444',
         }
       }
     },