UNPKG

@carton-org/react-neumorphism

Version:

A React component library implementing the neumorphism design style

105 lines (104 loc) 6.42 kB
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 };