aime-component-lib
Version:
A component library for AIME
336 lines (322 loc) • 10.7 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
const lightmodecolors = {
White: 'rgba(255, 255, 255, 1)',
Black: '#000000',
Grey: '#666666',
Primary1: 'rgba(69, 110, 255, 1)',
Primary2: 'rgba(39, 83, 239, 1)',
Primary3: 'rgba(26, 68, 220, 1)',
Primary4: '#000D3D',
Primary5: 'rgba(0, 13, 61, 1)',
Secondary1: 'rgba(211, 218, 249, 1)',
Secondary2: '#000182',
Secondary3: '#000182',
Secondary4: '#000182',
Secondary5: '',
Secondary6: '',
Secondary7: '',
Secondary8: '',
Text1: 'rgba(0, 13, 61, 1)',
Text2: 'rgba(0, 1, 130, 1)',
Text3: 'rgba(69, 110, 255, 1)',
Text4: 'rgba(47, 51, 63, 1))',
Text5: '#4F5463',
Text6: 'rgba(149, 153, 169, 1)',
Text7: '#BAC1DD',
Text8: '#FFFFFF',
Text9: 'rgba(255, 131, 131, 1)',
Grey1: '#F8F9FF',
Grey2: '#EEF1FE',
Grey3: '#E0E4F4',
Grey4: '#D3DAF9',
Grey5: '#9599A9',
Grey6: '#4F5463',
Grey7: '#2F333F',
Grey8: '',
Grey9: '',
Positive: 'rgba(0, 184, 132, 1)',
Positive20: 'rgba(0, 184, 132, 0.2)',
Positive20Flat: '#CDFEE6',
Negative: 'rgba(255, 131, 131, 1)',
Negative20: 'rgba(255, 131, 131, 0.2)',
Negative20Flat: '#FFD8D8',
NegativeTint: 'rgba(255, 131, 131, 0.2)',
Neautral: 'rgba(255, 168, 0, 1)',
Neautral20: 'rgba(255, 168, 0, 0.2)',
Neautral20Flat: '#FFF5D6',
Tint1: 'rgba(64, 65, 161, 1)',
Tint2: 'rgba(69, 110, 255, 0.2)',
Tint3: 'rgba(0, 1, 79, 1)',
Tint4: 'rgba(0, 1, 79, 0.1)',
Tint5: 'rgba(255, 255, 255, 0.2)',
PositiveTint8: 'rgba(0, 184, 132, 0.08)',
Quarternary: 'rgba(39, 83, 239, 0.2)',
ModalOverlay: 'rgba(0, 13, 61, 0.7)',
Gradient: {
linear: 'linear(to-l, #A327EF , #2753EF)'
}
};
const DpValues = {
DP01: '0px',
DP02: '2px',
DP03: '4px',
DP04: '8px',
DP05: '12px',
DP06: '16px',
DP07: '20px',
DP08: '24px',
DP09: '28px',
DP10: '32px',
DP11: '36px',
DP12: '40px',
DP13: '44px',
DP14: '48px',
DP15: '52px',
DP16: '56px',
DP17: '60px',
DP18: '64px',
DP19: '68px',
DP20: '72px'
};
const AppStyles = {
LargeTitle1: {
fontSize: '32px',
fontWeight: '700',
lineHeight: '40px',
fontStyle: 'normal'
},
LargeTitle2: {
fontSize: '30px',
fontWeight: '700',
lineHeight: '40px',
fontStyle: 'normal'
},
LargeTitle3: {
fontSize: '28px',
fontWeight: '700',
lineHeight: '36px',
fontStyle: 'normal'
},
Title1: {
fontSize: '20px',
fontWeight: '700',
lineHeight: '32px',
fontStyle: 'normal'
},
Title2: {
fontSize: '18px',
fontWeight: '700',
lineHeight: '24px',
fontStyle: 'normal'
},
Title3: {
fontSize: '16px',
fontWeight: '500',
lineHeight: '24px',
fontStyle: 'normal'
},
Title4: {
fontSize: '14px',
fontWeight: '700',
lineHeight: '24px',
fontStyle: 'normal'
},
// BODY
Subheading1: {
fontSize: '14px',
fontWeight: '500',
lineHeight: '24px',
fontStyle: 'normal'
},
Subheading2: {
fontSize: '12px',
fontWeight: '500',
lineHeight: '20px',
fontStyle: 'normal'
},
Body: {
fontSize: '12px',
fontWeight: '400',
lineHeight: '20px',
fontStyle: 'normal'
},
BodyBold: {
fontSize: '12px',
fontWeight: '700',
lineHeight: '20px',
fontStyle: 'normal'
},
BodyLink: {
fontSize: '12px',
fontWeight: '400',
lineHeight: '20px',
fontStyle: 'normal',
textDecoration: 'underline'
},
BodyLinkBold: {
fontSize: '12px',
fontWeight: '700',
lineHeight: '20px',
fontStyle: 'normal',
textDecoration: 'underline'
},
Caption1: {
fontSize: '10px',
fontWeight: '700',
lineHeight: '16px',
fontStyle: 'normal',
letterSpacing: '2px',
textTransform: 'uppercase'
},
Caption2: {
fontSize: '8px',
fontWeight: '900',
lineHeight: '16px',
fontStyle: 'normal',
letterSpacing: '2px'
},
Caption3: {
fontSize: '12px',
fontWeight: '700',
lineHeight: '16px',
fontStyle: 'normal'
},
Caption4: {
fontSize: '12px',
fontWeight: '400',
lineHeight: '16px',
fontStyle: 'normal'
},
ButtonLarge: {
fontSize: '14px',
fontWeight: '500',
lineHeight: '24px',
fontStyle: 'normal'
},
ButtonMedium: {
fontSize: '12px',
fontWeight: '700',
lineHeight: '24px',
fontStyle: 'normal'
},
ButtonSmall: {
fontSize: '10px',
fontWeight: '500',
lineHeight: '16px',
fontStyle: 'normal'
},
TabbarActive: {
fontSize: '10px',
fontWeight: '500',
lineHeight: '16px',
fontStyle: 'normal'
},
TabbarInActive: {
fontSize: '10px',
fontWeight: '400',
lineHeight: '16px',
fontStyle: 'normal'
},
SegmentedActive: {
fontSize: '12px',
fontWeight: '500',
lineHeight: '16px',
fontStyle: 'normal'
},
SegmentedInActive: {
fontSize: '12px',
fontWeight: '500',
lineHeight: '16px',
fontStyle: 'normal'
}
};
const variantStyles = {
primary: {
backgroundColor: lightmodecolors.Primary2,
textColor: lightmodecolors.White,
hoverBackgroundColor: lightmodecolors.Primary3,
disabledBackgroundColor: lightmodecolors.Grey3,
disabledTextColor: lightmodecolors.Text7
},
secondary: {
backgroundColor: lightmodecolors.Grey2,
textColor: lightmodecolors.Text3,
hoverBackgroundColor: lightmodecolors.Secondary1,
disabledBackgroundColor: lightmodecolors.Grey3,
disabledTextColor: lightmodecolors.White
},
tertiary: {
backgroundColor: lightmodecolors.White,
textColor: lightmodecolors.Text3,
hoverBackgroundColor: lightmodecolors.Secondary1,
disabledBackgroundColor: lightmodecolors.White,
disabledTextColor: lightmodecolors.Text7
},
destructive: {
backgroundColor: 'transparent',
textColor: lightmodecolors.Negative,
hoverBackgroundColor: lightmodecolors.Negative20,
disabledBackgroundColor: lightmodecolors.Grey3,
disabledTextColor: lightmodecolors.White
}
};
const Button = ({ text, textColor, size, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, cornerRadius, enabled, loading, clickable, onClick, variant }) => {
const handleClick = () => {
if (clickable && enabled && !loading && onClick) {
onClick();
}
};
const styles = variantStyles[variant];
return (jsxRuntime.jsxs("button", { style: Object.assign(Object.assign({}, (size === 'small'
? Object.assign({}, AppStyles.ButtonSmall) : size === 'medium'
? Object.assign({}, AppStyles.ButtonMedium) : Object.assign({}, AppStyles.ButtonLarge))), { backgroundColor: enabled ? styles.backgroundColor : styles.disabledBackgroundColor || 'gray', color: textColor || styles.textColor, borderRadius: cornerRadius, border: variant === 'destructive'
? `1px solid ${lightmodecolors.Negative}`
: variant === 'tertiary'
? `1px solid ${lightmodecolors.Grey2}`
: 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: size === 'small' ? DpValues.DP10 : size === 'medium' ? DpValues.DP12 : DpValues.DP20, padding: `${DpValues.DP04} ${DpValues.DP05}` }), className: `w-full ${enabled && clickable ? 'cursor-pointer' : 'cursor-not-allowed'} ${enabled && clickable ? `hover:bg-${styles.backgroundColor}-dark` : ''}`, onClick: handleClick, disabled: !enabled || loading || !clickable, children: [typeof LeadingIcon === 'string' ? (jsxRuntime.jsx("img", { src: LeadingIcon, alt: "Leading Icon", style: { marginRight: '12px', height: '16px', width: '16px' } })) : (LeadingIcon && jsxRuntime.jsx(LeadingIcon, { size: 20, color: "white" })), text, typeof TrailingIcon === 'string' ? (jsxRuntime.jsx("img", { src: TrailingIcon, alt: "Leading Icon", style: { marginLeft: '8px', height: '16px', width: '16px' } })) : (TrailingIcon && jsxRuntime.jsx(TrailingIcon, { size: 20, color: "white" }))] }));
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".avatar-container{align-items:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:flex;justify-content:center}.avatar-text{color:#fff;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:700;letter-spacing:1.44px;line-height:32px;text-align:center}";
styleInject(css_248z);
const SVGRenderer = ({ svgString }) => {
return jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: svgString } });
};
const Avatar = ({ image = '', backgroundColor = '#456EFF', size = 64, borderRadius = 56, borderWidth = 3, borderColor = 'rgba(255, 255, 255, 0.20)', text = '', svg = '' }) => {
return (jsxRuntime.jsx("div", { style: {
width: size,
height: size,
borderRadius,
backgroundColor,
backgroundImage: `url(${image})`,
borderWidth,
borderColor,
borderStyle: 'solid',
backgroundSize: 'cover',
backgroundPosition: 'center'
}, className: "avatar-container", children: text.length > 0 && image.length == 0 ? (jsxRuntime.jsx("p", { className: "avatar-text", children: text })) : (svg && image.length == 0 && jsxRuntime.jsx(SVGRenderer, { svgString: svg })) }));
};
exports.Avatar = Avatar;
exports.Button = Button;
//# sourceMappingURL=index.js.map