@carton-org/react-neumorphism
Version:
A React component library implementing the neumorphism design style
59 lines (58 loc) • 1.82 kB
JavaScript
import { jsxs as n, jsx as t } from "@emotion/react/jsx-runtime";
import { useState as I, useEffect as S } from "react";
import { withTheme as u } from "@emotion/react";
import { AnimatePresence as g } from "motion/react";
import { getIconDisplay as A } from "../../utils/icon.js";
import C from "../IconBox/IconBox.js";
import x from "../Typography/Typography.js";
import { StyledAccordionItemContainer as $, StyledAccordionHeader as T, StyledAccordionTitle as b, StyledRotatingIcon as j, StyledAccordionContent as k, StyledAccordionContentInner as D } from "./accordionItem.styles.js";
const w = ({
icon: a,
title: d,
content: l,
initiallyOpen: e,
size: i,
onOpen: r,
accordionItemTitleStyle: m,
accordionItemContentStyle: s,
iconStyle: h = "default",
accordionItemContainerStyle: p
}) => {
const [o, c] = I(e ?? !1);
S(() => {
c(e ?? !1);
}, [e]);
const y = () => {
c(!o), r == null || r();
}, f = A(a, h, i);
return /* @__PURE__ */ n($, { $accordionItemContainerStyle: p, children: [
/* @__PURE__ */ n(T, { onClick: y, children: [
/* @__PURE__ */ n(b, { children: [
f,
/* @__PURE__ */ t(x, { size: i, labelStyle: m, children: d })
] }),
/* @__PURE__ */ t(C, { blank: !0, icon: /* @__PURE__ */ t(j, { $isOpen: o }), size: i })
] }),
/* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(k, { initial: {
height: 0,
opacity: 0
}, animate: {
height: o ? "auto" : 0,
opacity: o ? 1 : 0
}, exit: {
height: 0,
opacity: 0
}, transition: {
opacity: {
duration: 0.2
},
height: {
duration: 0.1,
ease: "linear"
}
}, children: /* @__PURE__ */ t(D, { $accordionItemContentStyle: s, children: l }) }) })
] });
}, G = u(w);
export {
G as default
};