@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
104 lines • 3.63 kB
JavaScript
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: 'var(--maya-primary)',
color: 'var(--maya-text-inverse)',
boxShadow: shadows.component.button.default,
},
secondary: {
backgroundColor: 'var(--maya-surface)',
color: 'var(--maya-text)',
border: '1px solid var(--maya-border)',
},
outline: {
backgroundColor: 'transparent',
color: 'var(--maya-primary)',
border: '1px solid var(--maya-primary)',
},
ghost: {
backgroundColor: 'transparent',
color: 'var(--maya-text)',
},
danger: {
backgroundColor: 'var(--maya-danger)',
color: 'var(--maya-text-inverse)',
},
}[variant];
const disabledStyles = disabled
? {
opacity: 0.5,
cursor: 'not-allowed',
}
: {};
const hoverStyles = !disabled
? {
primary: {
backgroundColor: 'var(--maya-primary-dark)',
boxShadow: shadows.component.button.hover,
},
secondary: {
backgroundColor: 'var(--maya-surface-secondary)',
},
outline: {
backgroundColor: 'var(--maya-primary-subtle)',
},
ghost: {
backgroundColor: 'var(--maya-surface)',
},
danger: {
backgroundColor: 'var(--maya-danger-dark)',
},
}[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