@playbooks/ui/dist/accordions.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const html = require("./toast-context-kVz4KXNu.cjs");
const Accordion = ({
  name = "Accordion",
  open,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.accordion();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const AccordionToggle = ({
  id,
  name = "AccordionToggle",
  variant = "accent",
  nextIcon = "chevron-down",
  open,
  onClick,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.accordionToggle({ open });
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(html.Btn, { id, variant, nextIcon, onClick: () => onClick(id), ...computed });
};
const AccordionTitle = ({
  name = "AccordionTitle",
  size = "h6",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.accordionTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Font, { size, ...computed, children });
};
const AccordionBody = ({
  name = "AccordionBody",
  open,
  animate,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const wrapperBase = theme.accordionBodyWrapper();
  const base = theme.accordionBody({ open });
  const computed = { ...base, ...props, tailwind, className, name };
  const [height, setHeight] = React.useState(0);
  const ref = React.useRef(null);
  const style = React.useMemo(() => {
    var _a;
    if (animate) return { maxHeight: open ? ((_a = ref.current) == null ? void 0 : _a.offsetHeight) + "px" : "0px" };
    return { maxHeight: open ? null : "0px" };
  }, [height, open, ref == null ? void 0 : ref.current]);
  React.useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const element = entries[0];
      setHeight(element.contentRect.height);
    });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [children]);
  return /* @__PURE__ */ require$$0.jsx(html.Div, { style, ...wrapperBase, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref, ...computed, children }) });
};
const AccordionText = ({
  name = "AccordionText",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.accordionText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.P, { ...computed, children });
};
exports.Accordion = Accordion;
exports.AccordionBody = AccordionBody;
exports.AccordionText = AccordionText;
exports.AccordionTitle = AccordionTitle;
exports.AccordionToggle = AccordionToggle;