A8071509/maya-contigo-ui
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles-update

Browse Source
This commit is contained in:
Rogelio
2025-10-23 06:19:38 +00:00
parent 45d375622b
commit b0f75f390f
5 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/Button/Button.d.ts vendored
View File

@@ -1,11 +1,12 @@
import React from 'react';
export interface ButtonProps {
children: React.ReactNode;
variant?: 'primary' | 'secondary' | 'success' | 'danger';
variant?: 'primary' | 'secondary' | 'accent' | 'success' | 'danger' | 'outline';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
onClick?: () => void;
className?: string;
fullWidth?: boolean;
}
export declare const Button: React.FC<ButtonProps>;
export default Button;

12
dist/Button/Button.js vendored
View File

@@ -1,17 +1,19 @@
import { jsx as _jsx } from "react/jsx-runtime";
export const Button = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, className = '' }) => {
export const Button = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, className = '', fullWidth = false }) => {
const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
const variants = {
primary: 'bg-maya-primary text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-maya-secondary text-white hover:bg-slate-600 focus:ring-slate-500',
primary: 'bg-maya-primary text-white hover:bg-red-700 focus:ring-red-500 shadow-sm',
secondary: 'bg-maya-secondary text-white hover:bg-brown-700 focus:ring-brown-500 shadow-sm',
accent: 'bg-maya-accent text-gray-800 hover:bg-gray-300 focus:ring-gray-400 shadow-sm',
success: 'bg-maya-success text-white hover:bg-emerald-700 focus:ring-emerald-500',
danger: 'bg-maya-danger text-white hover:bg-red-700 focus:ring-red-500'
danger: 'bg-maya-danger text-white hover:bg-red-700 focus:ring-red-500',
outline: 'border border-maya-primary text-maya-primary bg-transparent hover:bg-red-50 focus:ring-red-200'
};
const sizes = {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg'
};
return (_jsx("button", { className: `${baseClasses} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`, onClick: onClick, disabled: disabled, children: children }));
return (_jsx("button", { className: `${baseClasses} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${fullWidth ? 'w-full' : ''} ${className}`, onClick: onClick, disabled: disabled, children: children }));
};
export default Button;

2
dist/styles.css vendored
View File

File diff suppressed because one or more lines are too long

18
src/components/Button/Button.tsx
View File

@@ -2,11 +2,12 @@ import React from 'react';
export interface ButtonProps {
children: React.ReactNode;
variant?: 'primary' | 'secondary' | 'success' | 'danger';
variant?: 'primary' | 'secondary' | 'accent' | 'success' | 'danger' | 'outline';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
onClick?: () => void;
className?: string;
fullWidth?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
@@ -15,15 +16,18 @@ export const Button: React.FC<ButtonProps> = ({
size = 'md',
disabled = false,
onClick,
className = ''
className = '',
fullWidth = false
}) => {
const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
const variants = {
primary: 'bg-maya-primary text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-maya-secondary text-white hover:bg-slate-600 focus:ring-slate-500',
primary: 'bg-maya-primary text-white hover:bg-red-700 focus:ring-red-500 shadow-sm',
secondary: 'bg-maya-secondary text-white hover:bg-brown-700 focus:ring-brown-500 shadow-sm',
accent: 'bg-maya-accent text-gray-800 hover:bg-gray-300 focus:ring-gray-400 shadow-sm',
success: 'bg-maya-success text-white hover:bg-emerald-700 focus:ring-emerald-500',
danger: 'bg-maya-danger text-white hover:bg-red-700 focus:ring-red-500'
danger: 'bg-maya-danger text-white hover:bg-red-700 focus:ring-red-500',
outline: 'border border-maya-primary text-maya-primary bg-transparent hover:bg-red-50 focus:ring-red-200'
};
const sizes = {
@@ -34,7 +38,9 @@ export const Button: React.FC<ButtonProps> = ({
return (
<button
className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${
disabled ? 'opacity-50 cursor-not-allowed' : ''
} ${fullWidth ? 'w-full' : ''} ${className}`}
onClick={onClick}
disabled={disabled}
>

9
tailwind.config.js
View File

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