@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
101 lines • 3.35 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { typography, spacing, shadows } from '../../tokens';
export const Button = ({ children, variant = 'primary', size = 'md', disabled = false, loading = false, onClick, style, }) => {
const baseStyles = {
fontFamily: typography.fontFamily.sans,
fontWeight: typography.fontWeight.medium,
border: 'none',
borderRadius: '4px',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'all 0.2s ease',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.button.gap,
...style,
};
const sizeStyles = {
sm: {
fontSize: typography.fontSize.sm,
padding: spacing.button.padding.sm,
},
md: {
fontSize: typography.fontSize.base,
padding: spacing.button.padding.md,
},
lg: {
fontSize: typography.fontSize.lg,
padding: spacing.button.padding.lg,
},
}[size];
const variantStyles = {
primary: {
backgroundColor: '#7408C2', // Using the primary color directly
color: '#ffffff',
boxShadow: shadows.component.button.default,
},
secondary: {
backgroundColor: '#f9fafb',
color: '#111827',
border: '1px solid #e5e7eb',
},
outline: {
backgroundColor: 'transparent',
color: '#7408C2',
border: '1px solid #7408C2',
},
ghost: {
backgroundColor: 'transparent',
color: '#111827',
},
danger: {
backgroundColor: '#ef4444',
color: '#ffffff',
},
}[variant];
const disabledStyles = disabled ? {
opacity: 0.5,
cursor: 'not-allowed',
} : {};
const hoverStyles = !disabled ? {
primary: {
backgroundColor: '#5A0A9A',
boxShadow: shadows.component.button.hover,
},
secondary: {
backgroundColor: '#f3f4f6',
},
outline: {
backgroundColor: '#F0E6FF',
},
ghost: {
backgroundColor: '#f9fafb',
},
danger: {
backgroundColor: '#dc2626',
},
}[variant] : {};
return (_jsxs("button", { style: {
...baseStyles,
...sizeStyles,
...variantStyles,
...disabledStyles,
}, onClick: disabled ? undefined : onClick, disabled: disabled, onMouseEnter: (e) => {
if (!disabled) {
Object.assign(e.currentTarget.style, hoverStyles);
}
}, onMouseLeave: (e) => {
if (!disabled) {
Object.assign(e.currentTarget.style, variantStyles);
}
}, children: [loading && (_jsx("div", { style: {
width: '16px',
height: '16px',
border: '2px solid transparent',
borderTop: `2px solid ${variant === 'outline' || variant === 'ghost' ? '#7408C2' : '#ffffff'}`,
borderRadius: '50%',
animation: 'spin 1s linear infinite',
} })), children] }));
};
//# sourceMappingURL=Button.js.map