@mankindui/core/dist/components/Accordion/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as i } from "../../_virtual/jsx-runtime.js";
import "../../context/index.js";
import { useEffect as y, useRef as b } from "react";
import { AccordionContextProvider as j, useAccordion as r } from "../../context/AccordionContext.js";
const a = ({ children: o, ...e }) => /* @__PURE__ */ i.jsx(j, { children: /* @__PURE__ */ i.jsx(v, { ...e, children: o }) }), v = ({ multiOpen: o = !0, children: e }) => {
  const { setMultiOpen: n } = r();
  return y(() => {
    n(o);
  }, [o]), /* @__PURE__ */ i.jsx(
    "div",
    {
      "data-component": a.name,
      role: "tablist",
      className: `
  flex 
  flex-col 
  self-stretch 
  min-w-max-content
`,
      children: e
    }
  );
}, s = ({ children: o }) => /* @__PURE__ */ i.jsx("div", { "data-component": s.name, children: o }), l = ({ render: o }) => {
  const { indexes: e } = r();
  return /* @__PURE__ */ i.jsx(
    "div",
    {
      "data-component": l.name,
      className: [
        `
      box-border 
      cursor-pointer 
      text-base 
      font-semibold 
      text-[var(--clr-foreground)] 
      my-0
      flex
      justify-between
      `
      ].join(" "),
      role: "heading",
      children: o(e)
    }
  );
}, d = ({ children: o, index: e }) => {
  const { indexes: n, setIndexes: c, multiOpen: x } = r(), S = (t) => {
    const f = n.includes(t);
    c(x ? f ? n.filter((A) => A !== t) : [.../* @__PURE__ */ new Set([...n, t])] : f ? [] : [t]);
  }, p = (t) => {
    S(t);
  };
  return /* @__PURE__ */ i.jsx(
    "div",
    {
      "data-component": d.name,
      className: [
        `
      flex 
      flex-grow 
      justify-between 
      items-center 
      mb-2 
      mt-2
      `
      ].join(" "),
      role: "button",
      "aria-expanded": !!n.includes(e),
      "aria-controls": `AccordionSectionPanel_${e}`,
      "aria-disabled": !1,
      id: `AccordionSectionHeaderTitle_${e}`,
      tabIndex: 0,
      onClick: () => p(e),
      onKeyDown: (t) => {
        switch (console.log(t.key), t.key) {
          case "Enter":
          case " ":
            p(e);
            break;
        }
      },
      children: o
    }
  );
}, m = ({ children: o, index: e }) => {
  const { indexes: n } = r(), c = b(null);
  return /* @__PURE__ */ i.jsx(
    "div",
    {
      "data-component": m.name,
      role: "region",
      "aria-labelledby": `AccordionSectionTitle_${e}`,
      id: `AccordionSectionPanel_${e}`,
      ref: c,
      "data-expanded": n.includes(e) ? "true" : "false",
      style: { maxHeight: n.includes(e) ? `${c.current && c.current.scrollHeight}px` : "0" },
      className: `overflow-hidden 
        text-[var(--clr-foreground)]
        transition-all
        duration-300
        ease-out
        ${n.includes(e) ? "opacity-100" : "opacity-0"}
      `,
      children: o
    }
  );
}, u = ({ children: o }) => /* @__PURE__ */ i.jsx("div", { "data-component": u.name, className: ["pb-5 px-0 "].join(" "), children: o });
a.displayName = "Accordion";
a.Section = s;
s.displayName = "Accordion.Section";
a.SectionHeader = l;
l.displayName = "Accordion.SectionHeader";
a.SectionHeaderTitle = d;
d.displayName = "Accordion.SectionHeaderTitle";
a.SectionPanel = m;
m.displayName = "Accordion.SectionPanel";
a.SectionPanelContent = u;
u.displayName = "Accordion.SectionPanelContent";
export {
  a as Accordion
};
//# sourceMappingURL=index.js.map