@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
270 lines (267 loc) • 11.7 kB
JavaScript
import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as clsx } from '../clsx.m-6243b874.js';
import { styled } from '@mui/material/styles';
import MuiButton from '@mui/material/Button';
import colors from '../theme/colors.js';
/**
* Types
*/
var ButtonColorVariants = [
"primary",
"primaryAlt",
"secondary",
"inverse",
"info",
"positive",
"negative",
"disabled"
];
/**
* Constants
*/
var colorMap = {
background: {
primary: colors.primary.main,
primaryAlt: colors.blue.main,
secondary: colors.secondary.main,
inverse: colors.gray.white,
info: colors.gray[100],
positive: colors.positive.main,
negative: colors.negative.main,
disabled: colors.gray[100]
},
color: {
primary: colors.text.primary,
primaryAlt: colors.text.inversePrimary,
secondary: colors.text.inversePrimary,
inverse: colors.text.primary,
info: colors.text.primary,
positive: colors.text.inversePrimary,
negative: colors.text.inversePrimary,
disabled: colors.text.inverseSecondary
},
text: {
primary: colors.text.primary,
primaryAlt: colors.primary.main,
secondary: colors.gray[500],
inverse: colors.gray.white,
info: colors.gray[500],
positive: colors.positive.main,
negative: colors.negative.main,
disabled: colors.gray[300]
}
};
// TODO: refactor mobile styles
var getTypographyValue = function (_a) {
var size = _a.size, theme = _a.theme;
switch (size) {
case "xs":
return {
main: theme.typography.button4,
mobile: theme.typography.button4Mobile
};
case "sm":
return {
main: theme.typography.button3,
mobile: theme.typography.button3Mobile
};
case "md":
return {
main: theme.typography.button2,
mobile: theme.typography.button2Mobile
};
case "lg":
return {
main: theme.typography.button1,
mobile: theme.typography.button1Mobile
};
}
};
var getPadding = function (_a) {
var size = _a.size, theme = _a.theme, onlyIcon = _a.onlyIcon;
switch (size) {
case "xs":
return {
main: theme.spacing(1, onlyIcon ? 1 : 2.5),
mobile: theme.spacing(0.65, onlyIcon ? 0.65 : 1.75)
};
case "sm":
return {
main: theme.spacing(1.5, onlyIcon ? 1.5 : 3),
mobile: theme.spacing(1, onlyIcon ? 1 : 1.75)
};
case "md":
return {
main: theme.spacing(onlyIcon ? 2 : 1.75, onlyIcon ? 2 : 4),
mobile: theme.spacing(onlyIcon ? 1 : 1.5, onlyIcon ? 1 : 3)
};
case "lg":
return {
main: theme.spacing(3, onlyIcon ? 3 : 6),
mobile: theme.spacing(onlyIcon ? 1 : 1.5, onlyIcon ? 1 : 3)
};
}
};
var getRadius = function (_a) {
var size = _a.size, theme = _a.theme;
switch (size) {
case "xs":
return {
main: theme.borders.radius.xs1,
mobile: theme.borders.radius.xs1
};
case "sm":
return {
main: theme.borders.radius.sm,
mobile: theme.borders.radius.xs1
};
case "md":
return {
main: theme.borders.radius.sm,
mobile: theme.spacing(1.5)
};
case "lg":
return {
main: theme.borders.radius.lg,
mobile: theme.spacing(1.5)
};
}
};
var PREFIX = "Button";
var classes = {
root: "".concat(PREFIX, "-root"),
underline: "".concat(PREFIX, "-underline")
};
var StyledButton = styled(MuiButton)(function (_a) {
var _b, _c, _d, _e, _f, _g;
var _h, _j, _k, _l, _m, _o;
var theme = _a.theme, props = __rest(_a, ["theme"]);
var size = props.size, align = props.$align, $color = props.$color, onlyIcon = props.$onlyIcon;
var color = $color !== null && $color !== void 0 ? $color : "primary";
return __assign(__assign({ padding: (_h = getPadding({ size: size, theme: theme, onlyIcon: onlyIcon })) === null || _h === void 0 ? void 0 : _h.main, borderRadius: (_j = getRadius({ size: size, theme: theme })) === null || _j === void 0 ? void 0 : _j.main, textAlign: align, justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center", transition: theme.transitions.create(["box-shadow", "transform", "background", "color", "border"]), position: "relative", textTransform: "none" }, (_k = getTypographyValue({ size: size, theme: theme })) === null || _k === void 0 ? void 0 : _k.main), (_b = {}, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, (_l = getTypographyValue({ size: size, theme: theme })) === null || _l === void 0 ? void 0 : _l.mobile), { padding: (_m = getPadding({ size: size, theme: theme, onlyIcon: onlyIcon })) === null || _m === void 0 ? void 0 : _m.mobile, borderRadius: (_o = getRadius({ size: size, theme: theme })) === null || _o === void 0 ? void 0 : _o.mobile }), _b["&:active, &:hover, &:focus"] = {
outline: "none"
}, _b["&.MuiButton-contained"] = (_c = {
color: colorMap.color[color],
backgroundColor: colorMap.background[color],
boxShadow: size === "lg" ? theme.boxShadow.lg : theme.boxShadow.md
},
_c[theme.breakpoints.down("sm")] = {
boxShadow: theme.boxShadow.md
},
_c["&:hover"] = {
boxShadow: theme.boxShadow.md,
transform: size === "lg" || size === "md" ? "scale(1.05)" : "scale(1.015)"
},
_c["&:active"] = {
boxShadow: size === "lg" ? theme.boxShadow.lg : theme.boxShadow.md,
transform: size === "lg" || size === "md" ? "scale(1.03)" : "scale(1.01)"
},
_c["&.Mui-disabled"] = {
color: colorMap.color.disabled,
backgroundColor: colorMap.background.disabled,
boxShadow: "none"
},
_c), _b["&.MuiButton-outlined"] = (_d = {
border: 0,
color: theme.palette.text.primary,
backgroundColor: "transparent",
boxShadow: "inset 0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.gray[300]),
"&:hover, &:active": {
backgroundColor: theme.palette.gray[100]
}
},
_d["&.".concat(PREFIX, "-secondary")] = {
color: theme.palette.text.secondary
},
_d["&.Mui-disabled"] = {
color: theme.palette.text.inverseSecondary,
boxShadow: "inset 0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.text.inverseSecondary)
},
_d[theme.breakpoints.down("sm")] = {
boxShadow: "inset 0 0 0 ".concat(theme.borders.size.secondary, "px ").concat(theme.palette.text.inverseSecondary)
},
_d), _b["&.MuiButton-text"] = {
color: colorMap.text[color],
backgroundColor: "transparent !important",
boxShadow: "none !important",
fontWeight: theme.typography.fontWeightMedium,
"&.Mui-disabled": {
color: colorMap.text.disabled
}
}, _b["&.Mui-disabled"] = {
transform: "none !important"
}, _b["&.MuiButton-fullWidth"] = {
"& .MuiButton-endIcon": {
position: onlyIcon ? "static" : "absolute",
right: theme.spacing(3),
top: "50%",
transform: onlyIcon ? "none" : "translate(0, -50%)"
}
}, _b["& .MuiButton-startIcon"] = (_e = {
marginTop: onlyIcon ? 0 : theme.spacing(-1),
marginBottom: onlyIcon ? 0 : theme.spacing(-1),
marginLeft: onlyIcon ? 0 : theme.spacing(-1),
marginRight: onlyIcon ? 0 : size === "sm" ? theme.spacing(1) : theme.spacing(1.5)
},
_e[theme.breakpoints.down("sm")] = {
marginTop: 0,
marginBottom: 0
},
_e), _b["& .MuiButton-endIcon"] = (_f = {
marginTop: onlyIcon ? 0 : theme.spacing(-1),
marginBottom: onlyIcon ? 0 : theme.spacing(-1),
marginLeft: onlyIcon ? 0 : size === "sm" ? theme.spacing(1) : theme.spacing(1.5),
marginRight: onlyIcon ? 0 : theme.spacing(-1)
},
_f[theme.breakpoints.down("sm")] = {
marginTop: 0,
marginBottom: 0
},
_f), _b["& .icon svg path"] = {
fill: "currentColor !important"
}, _b["&.".concat(classes.underline)] = (_g = {
padding: "0 !important",
color: "".concat(theme.palette.text.primary, " !important"),
fontWeight: theme.typography.fontWeightMedium,
"&:after": {
content: "''",
position: "absolute",
left: 0,
right: 0,
bottom: -1,
width: "100%",
margin: "auto",
borderBottom: "".concat(theme.borders.size.primary, "px solid ").concat(theme.palette.primary.main),
transition: theme.transitions.create(["width"])
},
"&:active, &:hover, &:focus": {
"&:after": {
width: 0
}
},
"&.Mui-disabled": {
color: "".concat(colorMap.text.disabled, " !important"),
"&:after": {
borderColor: colorMap.text.disabled
}
}
},
_g[theme.breakpoints.down("sm")] = {
"&:after": {
borderBottomWidth: theme.borders.size.secondary
}
},
_g), _b["&.".concat(PREFIX, "-info")] = {
boxShadow: "none !important"
}, _b));
});
var Button = forwardRef(function (_a, ref) {
var _b;
var value = _a.value, _c = _a.align, align = _c === void 0 ? "center" : _c; _a.placeholder; var _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.variant, variant = _e === void 0 ? "contained" : _e, _f = _a.size, size = _f === void 0 ? "sm" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, href = _a.href, linkProps = _a.linkProps, props = __rest(_a, ["value", "align", "placeholder", "color", "variant", "size", "disabled", "startIcon", "endIcon", "onClick", "href", "linkProps"]);
var onlyIcon = Boolean(!props.children) && ((_b = Boolean(startIcon)) !== null && _b !== void 0 ? _b : Boolean(endIcon));
var className = clsx([classes.root, variant === "underline" && classes.underline, "".concat(PREFIX, "-").concat(color)]);
return (jsx(StyledButton, __assign({ ref: ref, value: value, className: className, variant: variant !== "underline" ? variant : undefined, disabled: disabled, onClick: onClick, startIcon: startIcon, endIcon: endIcon, "$align": align, size: size, "$color": color, "$onlyIcon": onlyIcon }, (href && __assign({ href: href }, linkProps)), props), void 0));
});
export { ButtonColorVariants, Button as default };