@carton-org/react-neumorphism
Version:
A React component library implementing the neumorphism design style
105 lines (104 loc) • 6.42 kB
JavaScript
import C from "@emotion/styled/base";
import { spacings as I } from "../../constants/units.js";
const i = {
xs: {
container: {
padding: `${I.xs} ${I.sm}`,
fontSize: "10px",
gap: I.xs
},
custom: {
iconSize: "12px",
padding: `${I.xs} ${I.xs}`
}
},
sm: {
container: {
padding: `${I.sm} ${I.md}`,
fontSize: "12px",
gap: I.sm
},
custom: {
iconSize: "14px",
padding: `${I.sm} ${I.sm}`
}
},
md: {
container: {
padding: `${I.md} ${I.lg}`,
fontSize: "14px",
gap: I.sm
},
custom: {
iconSize: "16px",
padding: `${I.md} ${I.md}`
}
},
lg: {
container: {
padding: `${I.lg} ${I.xl}`,
fontSize: "16px",
gap: I.md
},
custom: {
iconSize: "18px",
padding: `${I.lg} ${I.lg}`
}
},
xl: {
container: {
padding: `${I.xl} ${I.xl}`,
fontSize: "18px",
gap: I.lg
},
custom: {
iconSize: "20px",
padding: `${I.xl} ${I.xl}`
}
}
}, G = /* @__PURE__ */ C("button", process.env.NODE_ENV === "production" ? {
target: "eihvvfc0"
} : {
target: "eihvvfc0",
label: "StyledButton"
})(({
theme: g,
$size: c
}) => ({
...i[c].container,
outline: "unset",
background: g.background,
boxShadow: g.shadow,
width: "fit-content",
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
justifyContent: "flex-start"
}), " border:", ({
theme: g,
$border: c
}) => c ? g.border : "unset", ";border-radius:", ({
theme: g,
$rounded: c
}) => c ? "50px" : g.borderRadius, ";gap:", ({
$size: g,
$hasIcon: c,
$isLoading: b
}) => c || b ? i[g].container.gap : "0", ";padding:", ({
$size: g,
$hasOnlyIcon: c
}) => c ? i[g].custom.padding : i[g].container.padding, ";&:disabled{opacity:0.5;cursor:not-allowed;}&:hover{box-shadow:", ({
theme: g
}) => g.shadowInset, ";}&>svg{width:", ({
$size: g
}) => i[g].custom.iconSize, ";height:", ({
$size: g
}) => i[g].custom.iconSize, ";}", ({
$buttonStyle: g
}) => ({
...g
}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvQnV0dG9uL2J1dHRvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStFRSIsImZpbGUiOiIvVXNlcnMvYmVuL0RvY3VtZW50cy9Qcm9qZWN0cy9yZWFjdC1uZXVtb3JwaGlzbWUvc3JjL2xpYi9jb21wb25lbnRzL0J1dHRvbi9idXR0b24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU2l6ZXMsIHNwYWNpbmdzIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50c1wiO1xuXG5leHBvcnQgY29uc3QgQlVUVE9OX1NUWUxFUzogUmVjb3JkPFxuICBTaXplcyxcbiAge1xuICAgIGNvbnRhaW5lcjogQ1NTUHJvcGVydGllcztcbiAgICBjdXN0b206IHtcbiAgICAgIHBhZGRpbmc6IHN0cmluZztcbiAgICAgIGljb25TaXplOiBzdHJpbmc7XG4gICAgfTtcbiAgfVxuPiA9IHtcbiAgeHM6IHtcbiAgICBjb250YWluZXI6IHtcbiAgICAgIHBhZGRpbmc6IGAke3NwYWNpbmdzLnhzfSAke3NwYWNpbmdzLnNtfWAsXG4gICAgICBmb250U2l6ZTogXCIxMHB4XCIsXG4gICAgICBnYXA6IHNwYWNpbmdzLnhzLFxuICAgIH0sXG4gICAgY3VzdG9tOiB7XG4gICAgICBpY29uU2l6ZTogXCIxMnB4XCIsXG4gICAgICBwYWRkaW5nOiBgJHtzcGFjaW5ncy54c30gJHtzcGFjaW5ncy54c31gLFxuICAgIH0sXG4gIH0sXG4gIHNtOiB7XG4gICAgY29udGFpbmVyOiB7XG4gICAgICBwYWRkaW5nOiBgJHtzcGFjaW5ncy5zbX0gJHtzcGFjaW5ncy5tZH1gLFxuICAgICAgZm9udFNpemU6IFwiMTJweFwiLFxuICAgICAgZ2FwOiBzcGFjaW5ncy5zbSxcbiAgICB9LFxuICAgIGN1c3RvbToge1xuICAgICAgaWNvblNpemU6IFwiMTRweFwiLFxuICAgICAgcGFkZGluZzogYCR7c3BhY2luZ3Muc219ICR7c3BhY2luZ3Muc219YCxcbiAgICB9LFxuICB9LFxuICBtZDoge1xuICAgIGNvbnRhaW5lcjoge1xuICAgICAgcGFkZGluZzogYCR7c3BhY2luZ3MubWR9ICR7c3BhY2luZ3MubGd9YCxcbiAgICAgIGZvbnRTaXplOiBcIjE0cHhcIixcbiAgICAgIGdhcDogc3BhY2luZ3Muc20sXG4gICAgfSxcbiAgICBjdXN0b206IHtcbiAgICAgIGljb25TaXplOiBcIjE2cHhcIixcbiAgICAgIHBhZGRpbmc6IGAke3NwYWNpbmdzLm1kfSAke3NwYWNpbmdzLm1kfWAsXG4gICAgfSxcbiAgfSxcbiAgbGc6IHtcbiAgICBjb250YWluZXI6IHtcbiAgICAgIHBhZGRpbmc6IGAke3NwYWNpbmdzLmxnfSAke3NwYWNpbmdzLnhsfWAsXG4gICAgICBmb250U2l6ZTogXCIxNnB4XCIsXG4gICAgICBnYXA6IHNwYWNpbmdzLm1kLFxuICAgIH0sXG4gICAgY3VzdG9tOiB7XG4gICAgICBpY29uU2l6ZTogXCIxOHB4XCIsXG4gICAgICBwYWRkaW5nOiBgJHtzcGFjaW5ncy5sZ30gJHtzcGFjaW5ncy5sZ31gLFxuICAgIH0sXG4gIH0sXG4gIHhsOiB7XG4gICAgY29udGFpbmVyOiB7XG4gICAgICBwYWRkaW5nOiBgJHtzcGFjaW5ncy54bH0gJHtzcGFjaW5ncy54bH1gLFxuICAgICAgZm9udFNpemU6IFwiMThweFwiLFxuICAgICAgZ2FwOiBzcGFjaW5ncy5sZyxcbiAgICB9LFxuICAgIGN1c3RvbToge1xuICAgICAgaWNvblNpemU6IFwiMjBweFwiLFxuICAgICAgcGFkZGluZzogYCR7c3BhY2luZ3MueGx9ICR7c3BhY2luZ3MueGx9YCxcbiAgICB9LFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248e1xuICAkc2l6ZTogU2l6ZXM7XG4gICRyb3VuZGVkOiBib29sZWFuO1xuICAkYm9yZGVyOiBib29sZWFuO1xuICAkaGFzSWNvbjogYm9vbGVhbjtcbiAgJGhhc09ubHlJY29uOiBib29sZWFuO1xuICAkaXNMb2FkaW5nOiBib29sZWFuO1xuICAkYnV0dG9uU3R5bGU/OiBDU1NQcm9wZXJ0aWVzO1xufT5gXG4gICR7KHsgdGhlbWUsICRzaXplIH0pID0+ICh7XG4gICAgLi4uQlVUVE9OX1NUWUxFU1skc2l6ZV0uY29udGFpbmVyLFxuICAgIG91dGxpbmU6IFwidW5zZXRcIixcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5iYWNrZ3JvdW5kLFxuICAgIGJveFNoYWRvdzogdGhlbWUuc2hhZG93LFxuICAgIHdpZHRoOiBcImZpdC1jb250ZW50XCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJmbGV4LXN0YXJ0XCIsXG4gIH0pfVxuXG4gIGJvcmRlcjogJHsoeyB0aGVtZSwgJGJvcmRlciB9KSA9PiAoJGJvcmRlciA/IHRoZW1lLmJvcmRlciA6IFwidW5zZXRcIil9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lLCAkcm91bmRlZCB9KSA9PlxuICAgICRyb3VuZGVkID8gXCI1MHB4XCIgOiB0aGVtZS5ib3JkZXJSYWRpdXN9O1xuICBnYXA6ICR7KHsgJHNpemUsICRoYXNJY29uLCAkaXNMb2FkaW5nIH0pID0+XG4gICAgJGhhc0ljb24gfHwgJGlzTG9hZGluZyA/IEJVVFRPTl9TVFlMRVNbJHNpemVdLmNvbnRhaW5lci5nYXAgOiBcIjBcIn07XG4gIHBhZGRpbmc6ICR7KHsgJHNpemUsICRoYXNPbmx5SWNvbiB9KSA9PlxuICAgICRoYXNPbmx5SWNvblxuICAgICAgPyBCVVRUT05fU1RZTEVTWyRzaXplXS5jdXN0b20ucGFkZGluZ1xuICAgICAgOiBCVVRUT05fU1RZTEVTWyRzaXplXS5jb250YWluZXIucGFkZGluZ307XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgb3BhY2l0eTogMC41O1xuICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gIH1cblxuICAmOmhvdmVyIHtcbiAgICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNoYWRvd0luc2V0fTtcbiAgfVxuXG4gICYgPiBzdmcge1xuICAgIHdpZHRoOiAkeyh7ICRzaXplIH0pID0+IEJVVFRPTl9TVFlMRVNbJHNpemVdLmN1c3RvbS5pY29uU2l6ZX07XG4gICAgaGVpZ2h0OiAkeyh7ICRzaXplIH0pID0+IEJVVFRPTl9TVFlMRVNbJHNpemVdLmN1c3RvbS5pY29uU2l6ZX07XG4gIH1cblxuICAkeyh7ICRidXR0b25TdHlsZSB9KSA9PiAoeyAuLi4kYnV0dG9uU3R5bGUgfSl9XG5gO1xuIl19 */"));
export {
i as BUTTON_STYLES,
G as StyledButton
};