@carton-org/react-neumorphism
Version:
A React component library implementing the neumorphism design style
86 lines (85 loc) • 9.33 kB
JavaScript
import b from "@emotion/styled/base";
import { spacings as i } from "../../constants/units.js";
const c = {
xs: {
width: "30px",
height: "30px",
padding: i.sm,
iconSize: "10px"
},
sm: {
width: "40px",
height: "40px",
padding: i.md,
iconSize: "15px"
},
md: {
width: "50px",
height: "50px",
padding: i.lg,
iconSize: "20px"
},
lg: {
width: "60px",
height: "60px",
padding: i.xl,
iconSize: "25px"
},
xl: {
width: "70px",
height: "70px",
padding: i.xl,
iconSize: "30px"
}
}, C = /* @__PURE__ */ b("div", process.env.NODE_ENV === "production" ? {
target: "ecowr3k1"
} : {
target: "ecowr3k1",
label: "StyledBlankIconBox"
})("display:flex;align-items:center;justify-content:center;&:hover{opacity:0.8;}&>svg{width:", ({
$size: I
}) => c[I].iconSize, ";height:", ({
$size: I
}) => c[I].iconSize, ";}", ({
$iconBoxStyle: I
}) => ({
...I
}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvSWNvbkJveC9pY29uQm94LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ0UiLCJmaWxlIjoiL1VzZXJzL2Jlbi9Eb2N1bWVudHMvUHJvamVjdHMvcmVhY3QtbmV1bW9ycGhpc21lL3NyYy9saWIvY29tcG9uZW50cy9JY29uQm94L2ljb25Cb3guc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTaXplcywgc3BhY2luZ3MgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzXCI7XG5cbmNvbnN0IElDT05fQk9YX1NUWUxFUzogUmVjb3JkPFxuICBTaXplcyxcbiAgUmVhY3QuQ1NTUHJvcGVydGllcyAmIHsgaWNvblNpemU6IHN0cmluZyB9XG4+ID0ge1xuICB4czoge1xuICAgIHdpZHRoOiBcIjMwcHhcIixcbiAgICBoZWlnaHQ6IFwiMzBweFwiLFxuICAgIHBhZGRpbmc6IHNwYWNpbmdzLnNtLFxuICAgIGljb25TaXplOiBcIjEwcHhcIixcbiAgfSxcbiAgc206IHtcbiAgICB3aWR0aDogXCI0MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjQwcHhcIixcbiAgICBwYWRkaW5nOiBzcGFjaW5ncy5tZCxcbiAgICBpY29uU2l6ZTogXCIxNXB4XCIsXG4gIH0sXG4gIG1kOiB7XG4gICAgd2lkdGg6IFwiNTBweFwiLFxuICAgIGhlaWdodDogXCI1MHB4XCIsXG4gICAgcGFkZGluZzogc3BhY2luZ3MubGcsXG4gICAgaWNvblNpemU6IFwiMjBweFwiLFxuICB9LFxuICBsZzoge1xuICAgIHdpZHRoOiBcIjYwcHhcIixcbiAgICBoZWlnaHQ6IFwiNjBweFwiLFxuICAgIHBhZGRpbmc6IHNwYWNpbmdzLnhsLFxuICAgIGljb25TaXplOiBcIjI1cHhcIixcbiAgfSxcbiAgeGw6IHtcbiAgICB3aWR0aDogXCI3MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjcwcHhcIixcbiAgICBwYWRkaW5nOiBzcGFjaW5ncy54bCxcbiAgICBpY29uU2l6ZTogXCIzMHB4XCIsXG4gIH0sXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmxhbmtJY29uQm94ID0gc3R5bGVkLmRpdjx7XG4gICRzaXplOiBTaXplcztcbiAgJGljb25Cb3hTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG59PmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgJjpob3ZlciB7XG4gICAgb3BhY2l0eTogMC44O1xuICB9XG5cbiAgJiA+IHN2ZyB7XG4gICAgd2lkdGg6ICR7KHsgJHNpemUgfSkgPT4gSUNPTl9CT1hfU1RZTEVTWyRzaXplXS5pY29uU2l6ZX07XG4gICAgaGVpZ2h0OiAkeyh7ICRzaXplIH0pID0+IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaWNvblNpemV9O1xuICB9XG4gICR7KHsgJGljb25Cb3hTdHlsZSB9KSA9PiAoeyAuLi4kaWNvbkJveFN0eWxlIH0pfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZERlZmF1bHRJY29uQm94ID0gc3R5bGVkLmRpdjx7XG4gICRzaXplOiBTaXplcztcbiAgJHdpZHRoPzogc3RyaW5nO1xuICAkaGVpZ2h0Pzogc3RyaW5nO1xuICAkaW5zZXQ/OiBib29sZWFuO1xuICAkcm91bmRlZD86IGJvb2xlYW47XG4gICRib3JkZXI/OiBib29sZWFuO1xuICAkaWNvbkJveFN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbn0+YFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuZm9udENvbG9yfTtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyAkcm91bmRlZCwgdGhlbWUgfSkgPT5cbiAgICAkcm91bmRlZCA9PT0gdHJ1ZSA/IFwiNTAlXCIgOiB0aGVtZS5ib3JkZXJSYWRpdXN9O1xuICB3aWR0aDogJHsoeyAkc2l6ZSA9IFwibWRcIiwgJHdpZHRoIH0pID0+XG4gICAgJHdpZHRoID8/IElDT05fQk9YX1NUWUxFU1skc2l6ZV0ud2lkdGh9O1xuICBoZWlnaHQ6ICR7KHsgJHNpemUgPSBcIm1kXCIsICRoZWlnaHQgfSkgPT5cbiAgICAkaGVpZ2h0ID8/IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaGVpZ2h0fTtcbiAgcGFkZGluZzogJHsoeyAkc2l6ZSA9IFwibWRcIiB9KSA9PiBJQ09OX0JPWF9TVFlMRVNbJHNpemVdLnBhZGRpbmd9O1xuICBib3JkZXI6ICR7KHsgJGJvcmRlciwgdGhlbWUgfSkgPT4gKCRib3JkZXIgPT09IHRydWUgPyB0aGVtZS5ib3JkZXIgOiBcIm5vbmVcIil9O1xuICBib3gtc2hhZG93OiAkeyh7ICRpbnNldCwgdGhlbWUgfSkgPT5cbiAgICAkaW5zZXQgPT09IHRydWUgPyB0aGVtZS5zaGFkb3dJbnNldCA6IHRoZW1lLnNoYWRvd307XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xuXG4gICY6aG92ZXIge1xuICAgIG9wYWNpdHk6IDAuODtcbiAgfVxuXG4gICYgPiBzdmcge1xuICAgIHdpZHRoOiAkeyh7ICRzaXplIH0pID0+IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaWNvblNpemV9O1xuICAgIGhlaWdodDogJHsoeyAkc2l6ZSB9KSA9PiBJQ09OX0JPWF9TVFlMRVNbJHNpemVdLmljb25TaXplfTtcbiAgfVxuICAkeyh7ICRpY29uQm94U3R5bGUgfSkgPT4gKHsgLi4uJGljb25Cb3hTdHlsZSB9KX1cbmA7XG4iXX0= */")), X = /* @__PURE__ */ b("div", process.env.NODE_ENV === "production" ? {
target: "ecowr3k0"
} : {
target: "ecowr3k0",
label: "StyledDefaultIconBox"
})("display:flex;align-items:center;justify-content:center;color:", ({
theme: I
}) => I.fontColor, ";background:", ({
theme: I
}) => I.background, ";border-radius:", ({
$rounded: I,
theme: g
}) => I === !0 ? "50%" : g.borderRadius, ";width:", ({
$size: I = "md",
$width: g
}) => g ?? c[I].width, ";height:", ({
$size: I = "md",
$height: g
}) => g ?? c[I].height, ";padding:", ({
$size: I = "md"
}) => c[I].padding, ";border:", ({
$border: I,
theme: g
}) => I === !0 ? g.border : "none", ";box-shadow:", ({
$inset: I,
theme: g
}) => I === !0 ? g.shadowInset : g.shadow, ";transition:all 0.2s ease-in-out;&:hover{opacity:0.8;}&>svg{width:", ({
$size: I
}) => c[I].iconSize, ";height:", ({
$size: I
}) => c[I].iconSize, ";}", ({
$iconBoxStyle: I
}) => ({
...I
}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9iZW4vRG9jdW1lbnRzL1Byb2plY3RzL3JlYWN0LW5ldW1vcnBoaXNtZS9zcmMvbGliL2NvbXBvbmVudHMvSWNvbkJveC9pY29uQm94LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRUUiLCJmaWxlIjoiL1VzZXJzL2Jlbi9Eb2N1bWVudHMvUHJvamVjdHMvcmVhY3QtbmV1bW9ycGhpc21lL3NyYy9saWIvY29tcG9uZW50cy9JY29uQm94L2ljb25Cb3guc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTaXplcywgc3BhY2luZ3MgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzXCI7XG5cbmNvbnN0IElDT05fQk9YX1NUWUxFUzogUmVjb3JkPFxuICBTaXplcyxcbiAgUmVhY3QuQ1NTUHJvcGVydGllcyAmIHsgaWNvblNpemU6IHN0cmluZyB9XG4+ID0ge1xuICB4czoge1xuICAgIHdpZHRoOiBcIjMwcHhcIixcbiAgICBoZWlnaHQ6IFwiMzBweFwiLFxuICAgIHBhZGRpbmc6IHNwYWNpbmdzLnNtLFxuICAgIGljb25TaXplOiBcIjEwcHhcIixcbiAgfSxcbiAgc206IHtcbiAgICB3aWR0aDogXCI0MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjQwcHhcIixcbiAgICBwYWRkaW5nOiBzcGFjaW5ncy5tZCxcbiAgICBpY29uU2l6ZTogXCIxNXB4XCIsXG4gIH0sXG4gIG1kOiB7XG4gICAgd2lkdGg6IFwiNTBweFwiLFxuICAgIGhlaWdodDogXCI1MHB4XCIsXG4gICAgcGFkZGluZzogc3BhY2luZ3MubGcsXG4gICAgaWNvblNpemU6IFwiMjBweFwiLFxuICB9LFxuICBsZzoge1xuICAgIHdpZHRoOiBcIjYwcHhcIixcbiAgICBoZWlnaHQ6IFwiNjBweFwiLFxuICAgIHBhZGRpbmc6IHNwYWNpbmdzLnhsLFxuICAgIGljb25TaXplOiBcIjI1cHhcIixcbiAgfSxcbiAgeGw6IHtcbiAgICB3aWR0aDogXCI3MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjcwcHhcIixcbiAgICBwYWRkaW5nOiBzcGFjaW5ncy54bCxcbiAgICBpY29uU2l6ZTogXCIzMHB4XCIsXG4gIH0sXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmxhbmtJY29uQm94ID0gc3R5bGVkLmRpdjx7XG4gICRzaXplOiBTaXplcztcbiAgJGljb25Cb3hTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG59PmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgJjpob3ZlciB7XG4gICAgb3BhY2l0eTogMC44O1xuICB9XG5cbiAgJiA+IHN2ZyB7XG4gICAgd2lkdGg6ICR7KHsgJHNpemUgfSkgPT4gSUNPTl9CT1hfU1RZTEVTWyRzaXplXS5pY29uU2l6ZX07XG4gICAgaGVpZ2h0OiAkeyh7ICRzaXplIH0pID0+IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaWNvblNpemV9O1xuICB9XG4gICR7KHsgJGljb25Cb3hTdHlsZSB9KSA9PiAoeyAuLi4kaWNvbkJveFN0eWxlIH0pfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZERlZmF1bHRJY29uQm94ID0gc3R5bGVkLmRpdjx7XG4gICRzaXplOiBTaXplcztcbiAgJHdpZHRoPzogc3RyaW5nO1xuICAkaGVpZ2h0Pzogc3RyaW5nO1xuICAkaW5zZXQ/OiBib29sZWFuO1xuICAkcm91bmRlZD86IGJvb2xlYW47XG4gICRib3JkZXI/OiBib29sZWFuO1xuICAkaWNvbkJveFN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbn0+YFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuZm9udENvbG9yfTtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyAkcm91bmRlZCwgdGhlbWUgfSkgPT5cbiAgICAkcm91bmRlZCA9PT0gdHJ1ZSA/IFwiNTAlXCIgOiB0aGVtZS5ib3JkZXJSYWRpdXN9O1xuICB3aWR0aDogJHsoeyAkc2l6ZSA9IFwibWRcIiwgJHdpZHRoIH0pID0+XG4gICAgJHdpZHRoID8/IElDT05fQk9YX1NUWUxFU1skc2l6ZV0ud2lkdGh9O1xuICBoZWlnaHQ6ICR7KHsgJHNpemUgPSBcIm1kXCIsICRoZWlnaHQgfSkgPT5cbiAgICAkaGVpZ2h0ID8/IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaGVpZ2h0fTtcbiAgcGFkZGluZzogJHsoeyAkc2l6ZSA9IFwibWRcIiB9KSA9PiBJQ09OX0JPWF9TVFlMRVNbJHNpemVdLnBhZGRpbmd9O1xuICBib3JkZXI6ICR7KHsgJGJvcmRlciwgdGhlbWUgfSkgPT4gKCRib3JkZXIgPT09IHRydWUgPyB0aGVtZS5ib3JkZXIgOiBcIm5vbmVcIil9O1xuICBib3gtc2hhZG93OiAkeyh7ICRpbnNldCwgdGhlbWUgfSkgPT5cbiAgICAkaW5zZXQgPT09IHRydWUgPyB0aGVtZS5zaGFkb3dJbnNldCA6IHRoZW1lLnNoYWRvd307XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xuXG4gICY6aG92ZXIge1xuICAgIG9wYWNpdHk6IDAuODtcbiAgfVxuXG4gICYgPiBzdmcge1xuICAgIHdpZHRoOiAkeyh7ICRzaXplIH0pID0+IElDT05fQk9YX1NUWUxFU1skc2l6ZV0uaWNvblNpemV9O1xuICAgIGhlaWdodDogJHsoeyAkc2l6ZSB9KSA9PiBJQ09OX0JPWF9TVFlMRVNbJHNpemVdLmljb25TaXplfTtcbiAgfVxuICAkeyh7ICRpY29uQm94U3R5bGUgfSkgPT4gKHsgLi4uJGljb25Cb3hTdHlsZSB9KX1cbmA7XG4iXX0= */"));
export {
C as StyledBlankIconBox,
X as StyledDefaultIconBox
};