@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
424 lines (413 loc) • 17.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var MuiButton = require('@mui/material/Button');
var theme_colors = require('../theme/colors.js');
var theme_typography = require('../theme/typography.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var MuiButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiButton);
function toVal(mix) {
var k, y, str='';
if (typeof mix === 'string' || typeof mix === 'number') {
str += mix;
} else if (typeof mix === 'object') {
if (Array.isArray(mix)) {
for (k=0; k < mix.length; k++) {
if (mix[k]) {
if (y = toVal(mix[k])) {
str && (str += ' ');
str += y;
}
}
}
} else {
for (k in mix) {
if (mix[k]) {
str && (str += ' ');
str += k;
}
}
}
}
return str;
}
function clsx () {
var i=0, tmp, x, str='';
while (i < arguments.length) {
if (tmp = arguments[i++]) {
if (x = toVal(tmp)) {
str && (str += ' ');
str += x;
}
}
}
return str;
}
/**
* Types
*/
var ButtonColorVariants = [
"primary",
"primaryAlt",
"secondary",
"secondaryAlt",
"inverse",
"positive",
"negative",
"disabled",
"muted"
];
/**
* Constants
*/
var colorMap = {
background: {
primary: theme_colors["default"].primary.main,
primaryAlt: theme_colors["default"].primary.main,
secondary: theme_colors["default"].text.primary,
secondaryAlt: theme_colors["default"].gray[300],
inverse: theme_colors["default"].gray.white,
positive: theme_colors["default"].positive.main,
negative: theme_colors["default"].negative.main,
disabled: theme_colors["default"].gray[400],
muted: theme_colors["default"].gray[400]
},
color: {
primary: theme_colors["default"].text.inversePrimary,
primaryAlt: theme_colors["default"].text.inversePrimary,
secondary: theme_colors["default"].text.inversePrimary,
secondaryAlt: theme_colors["default"].gray[800],
inverse: theme_colors["default"].text.primary,
positive: theme_colors["default"].text.inversePrimary,
negative: theme_colors["default"].text.inversePrimary,
disabled: theme_colors["default"].gray[600],
muted: theme_colors["default"].gray[700]
},
outlined: {
primary: theme_colors["default"].text.primary,
primaryAlt: theme_colors["default"].text.primary,
secondary: theme_colors["default"].gray[500],
secondaryAlt: theme_colors["default"].gray[700],
inverse: theme_colors["default"].gray.white,
positive: theme_colors["default"].positive.main,
negative: theme_colors["default"].negative.main,
disabled: theme_colors["default"].alpha[500],
muted: theme_colors["default"].gray[400]
},
text: {
primary: theme_colors["default"].text.primary,
primaryAlt: theme_colors["default"].text.primary,
secondary: theme_colors["default"].text.brand,
secondaryAlt: theme_colors["default"].gray[700],
inverse: theme_colors["default"].gray.white,
positive: theme_colors["default"].positive.main,
negative: theme_colors["default"].negative.main,
disabled: theme_colors["default"].alpha[500],
muted: theme_colors["default"].gray[700]
}
};
var getFontSize = function (_a) {
var size = _a.size;
if (size === "xs")
return theme_typography.fontSize.xs4;
if (size === "sm")
return theme_typography.fontSize.xs2;
if (size === "lg")
return theme_typography.fontSize.xs1;
return theme_typography.fontSize.xs2;
};
var getFontSizeMobile = function (_a) {
var size = _a.size;
if (size === "xs")
return theme_typography.fontSize.xs4;
if (size === "sm")
return theme_typography.fontSize.xs4;
if (size === "lg")
return theme_typography.fontSize.xs2;
return theme_typography.fontSize.xs2;
};
var getLineHeight = function (_a) {
var size = _a.size;
if (size === "xs")
return theme_typography.lineHeight.xs3;
if (size === "sm")
return theme_typography.lineHeight.xs2;
if (size === "lg")
return theme_typography.lineHeight.s;
return theme_typography.lineHeightMobile.s;
};
var getLineHeightMobile = function (_a) {
var size = _a.size;
if (size === "xs")
return theme_typography.lineHeight.xs3;
if (size === "sm")
return theme_typography.lineHeight.xs3;
if (size === "lg")
return theme_typography.lineHeightMobile.s;
return theme_typography.lineHeightMobile.m;
};
var getPadding = function (_a) {
var size = _a.size, onlyIcon = _a.onlyIcon;
if (size === "xs")
return onlyIcon ? "3px" : "3px 16px 5px 16px";
if (size === "sm")
return onlyIcon ? "5px" : "3px 16px 5px 16px";
if (size === "lg")
return onlyIcon ? "8px" : "6px 36px 8px 36px";
return onlyIcon ? "7px" : "7px 20px 8px 20px";
};
var getOutlinePadding = function (_a) {
var size = _a.size, onlyIcon = _a.onlyIcon;
if (size === "xs")
return onlyIcon ? "3px" : "3px 16px 5px 16px";
if (size === "sm")
return onlyIcon ? "5px" : "3px 16px 5px 16px";
if (size === "lg")
return onlyIcon ? "8px" : "6px 24px 8px 24px";
return onlyIcon ? "7px" : "7px 20px 8px 20px";
};
var getPaddingMobile = function (_a) {
var size = _a.size, onlyIcon = _a.onlyIcon;
if (size === "xs")
return onlyIcon ? "3px" : "3px 16px 5px 16px";
if (size === "sm")
return onlyIcon ? "3px" : "3px 16px 5px 16px";
if (size === "lg")
return onlyIcon ? "8px" : "7px 20px 8px 20px";
return onlyIcon ? "6px" : "3px 16px 5px 16px";
};
var PREFIX = "Button";
var classes = {
root: PREFIX + "-root",
withIcon: PREFIX + "-withIcon",
underline: PREFIX + "-underline"
};
var ButtonText = styles.styled("span")(function (_a) {
var theme = _a.theme;
return {
transitionProperty: "transform",
display: "block",
position: "relative",
transition: theme.transitions.create(["transform"])
};
});
var StyledButton = styles.styled(MuiButton__default["default"])(function (_a) {
var _b, _c, _d, _e, _f, _g, _h;
var theme = _a.theme, props = tslib_es6.__rest(_a, ["theme"]);
var size = props.size, align = props.align, $color = props.$color, icon = props.icon;
var color = $color !== null && $color !== void 0 ? $color : "primary";
var onlyIcon = icon === 1;
return _b = {
fontSize: getFontSize({ size: size }),
lineHeight: getLineHeight({ size: size }),
fontWeight: theme_typography.fontWeight.normal,
padding: getPadding({ size: size, onlyIcon: onlyIcon }),
borderRadius: theme === null || theme === void 0 ? void 0 : theme.borders.radius.rounded,
justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
transition: theme === null || theme === void 0 ? void 0 : theme.transitions.create(["box-shadow", "transform", "background", "color", "border"]),
position: "relative",
textTransform: "none",
whiteSpace: "nowrap",
willChange: "transform",
fontFeatureSettings: "'pnum' on, 'lnum' on, 'liga' off"
},
_b[theme.breakpoints.down("sm")] = {
fontSize: getFontSizeMobile({ size: size }),
lineHeight: getLineHeightMobile({ size: size }),
padding: getPaddingMobile({ size: size, onlyIcon: onlyIcon })
},
_b["&:active, &:hover, &:focus"] = {
outline: "none"
},
_b["&.MuiButton-contained"] = {
color: colorMap.color[color],
backgroundColor: colorMap.background[color],
boxShadow: "none",
willChange: "transform",
"& .icon svg path": {
fill: "currentColor !important"
},
"&:hover": {
boxShadow: "none"
},
"&:active": {
boxShadow: "none",
transform: "scale(0.98)"
},
"&.Mui-disabled": {
backgroundColor: theme.palette.gray[200] + " !important",
color: theme.palette.alpha[500] + " !important",
boxShadow: "none !important"
}
},
_b["&." + classes.withIcon] = {
"&.MuiButton-text": (_c = {
"& .MuiButton-endIcon": {
width: 0,
opacity: 0,
transform: "translate(-8px, 0)",
transition: theme.transitions.create(["all"])
}
},
_c[theme.breakpoints.up("md")] = {
"&:hover": {
"& .MuiButton-endIcon": {
opacity: 1,
transform: "translate(0px, 0)"
}
}
},
_c),
"&.MuiButton-contained": (_d = {
"& .MuiButton-endIcon": {
width: 0,
opacity: 0,
transform: "translate(-12px, 0)",
transition: theme.transitions.create(["all"])
}
},
_d[theme.breakpoints.up("md")] = {
"&:hover": {
"& .Button-innerText, & .MuiButton-endIcon": {
opacity: 1,
transform: "translate(-8px, 0)"
}
}
},
_d)
},
_b["&.MuiButton-outlined"] = (_e = {
border: 0,
color: colorMap.outlined[color],
backgroundColor: "transparent",
boxShadow: "inset 0 0 0 1px " + colorMap.outlined[color]
},
_e[theme.breakpoints.up("sm")] = {
padding: getOutlinePadding({ size: size, onlyIcon: onlyIcon })
},
_e["&." + PREFIX + "-primary"] = {
boxShadow: "inset 0 0 0 1px " + theme.palette.alpha[500],
color: theme.palette.gray[800],
"&:hover": {
boxShadow: "inset 0 0 0 1.5px " + theme.palette.alpha[600],
color: theme.palette.gray[800]
},
"&:active": {
boxShadow: "inset 0 0 0 1.5px " + theme.palette.gray[800],
color: theme.palette.gray[800]
}
},
_e["&." + PREFIX + "-primaryAlt"] = {
boxShadow: "inset 0 0 0 1px " + theme.palette.alpha[500],
color: theme.palette.gray[800],
"&:hover": {
color: theme.palette.alpha[700]
}
},
_e["&." + PREFIX + "-secondary"] = {
boxShadow: "inset 0 0 0 1px " + theme.palette.gray[500],
color: theme.palette.alpha[700],
"&:hover": {
color: theme.palette.alpha[600]
}
},
_e["&." + PREFIX + "-secondaryAlt"] = {
boxShadow: "inset 0 0 0 1px " + theme.palette.gray[800],
color: theme.palette.gray[800]
},
_e["&." + PREFIX + "-muted"] = {
boxShadow: "inset 0 0 0 1px " + theme.palette.alpha[600],
backgroundColor: theme.palette.gray[400],
color: theme.palette.gray[700],
"&:hover, &:focus": {
boxShadow: "inset 0 0 0 1px " + theme.palette.alpha[600],
color: theme.palette.gray[700]
}
},
_e["&.Mui-disabled"] = {
backgroundColor: theme.palette.gray[200] + " !important",
color: theme.palette.alpha[500] + " !important",
boxShadow: "none !important"
},
_e),
_b["&.MuiButton-text"] = (_f = {
color: colorMap.text[color],
backgroundColor: "transparent !important",
boxShadow: "none !important",
padding: theme.spacing(0, 2),
"&.Mui-disabled": {
color: theme.palette.alpha[500] + " !important"
}
},
_f[theme.breakpoints.down("sm")] = {
padding: 0
},
_f),
_b["&.Mui-disabled"] = {
transform: "none !important"
},
_b["& .MuiButton-startIcon"] = (_g = {
marginLeft: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(-1),
marginRight: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(1),
marginTop: icon ? 0 : 1
},
_g[theme.breakpoints.down("sm")] = {
marginRight: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(1),
marginLeft: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(-1)
},
_g),
_b["& .MuiButton-endIcon"] = (_h = {
marginLeft: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(1),
marginRight: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(-1),
marginTop: icon ? 0 : 1
},
_h[theme.breakpoints.down("sm")] = {
marginLeft: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(1),
marginRight: icon ? 0 : theme === null || theme === void 0 ? void 0 : theme.spacing(-1)
},
_h),
_b["&." + classes.underline] = {
padding: "0 !important",
color: theme_colors["default"].text.primary + " !important",
"&:after": {
content: "''",
position: "absolute",
left: 0,
right: 0,
bottom: -1,
width: "100%",
margin: "auto",
borderBottom: (theme === null || theme === void 0 ? void 0 : theme.borders.size.secondary) + "px solid " + theme_colors["default"].primary.main,
transition: theme === null || theme === void 0 ? void 0 : theme.transitions.create(["width"])
},
"&:active, &:hover, &:focus": {
"&:after": {
width: 0
}
},
"&.Mui-disabled": {
color: theme.palette.alpha[500] + " !important",
"&:after": {
borderBottom: (theme === null || theme === void 0 ? void 0 : theme.borders.size.secondary) + "px solid " + theme.palette.alpha[500]
}
}
},
_b;
});
var Button = function (props) {
var _a;
var value = props.value, _b = props.align, align = _b === void 0 ? "center" : _b; props.placeholder; var _c = props.color, color = _c === void 0 ? "primary" : _c, _d = props.variant, variant = _d === void 0 ? "contained" : _d, _e = props.size, size = _e === void 0 ? "md" : _e, _f = props.disabled, disabled = _f === void 0 ? false : _f, startIcon = props.startIcon, endIcon = props.endIcon, onClick = props.onClick, href = props.href, linkProps = props.linkProps, children = props.children, rest = tslib_es6.__rest(props, ["value", "align", "placeholder", "color", "variant", "size", "disabled", "startIcon", "endIcon", "onClick", "href", "linkProps", "children"]);
var onlyIcon = Boolean(!children) && ((_a = Boolean(startIcon)) !== null && _a !== void 0 ? _a : Boolean(endIcon));
var extendedProps = { $color: color, size: size, align: align };
var className = clsx([
classes.root,
variant === "underline" && classes.underline,
PREFIX + "-" + color,
(endIcon !== null && endIcon !== void 0 ? endIcon : startIcon) && classes.withIcon
]);
return (jsxRuntime.jsx(StyledButton, tslib_es6.__assign({ value: value, className: className, variant: variant !== "underline" ? variant : undefined, disabled: disabled, onClick: onClick, startIcon: startIcon, endIcon: endIcon, icon: onlyIcon ? 1 : undefined }, (href && tslib_es6.__assign({ href: href }, linkProps)), extendedProps, rest, { children: jsxRuntime.jsx(ButtonText, tslib_es6.__assign({ className: PREFIX + "-innerText" }, { children: children }), void 0) }), void 0));
};
exports.ButtonColorVariants = ButtonColorVariants;
exports["default"] = Button;