@playbooks/ui/dist/accordions.es.js

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { useState, useRef, useMemo } from "react";
import { u as useElementHeight } from "./index.es-ThnjXBwV.js";
import { Btn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { Font, P } from "./fonts.es.js";
import { Div } from "./html.es.js";
const Accordion = ({
  name = "Accordion",
  open,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accordion();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const AccordionToggle = ({
  id,
  name = "AccordionToggle",
  variant = "accent",
  nextIcon = "chevron-down",
  open,
  onClick,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accordionToggle({ open });
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(Btn, { id, variant, nextIcon, onClick: () => onClick(id), ...computed });
};
const AccordionTitle = ({
  name = "AccordionTitle",
  size = "h6",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accordionTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const AccordionBody = ({
  name = "AccordionBody",
  open,
  animate,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accordionBody();
  const wrapper = context?.theme?.accordionBodyWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  const [height, setHeight] = useState(0);
  const ref = useRef(null);
  const style = useMemo(() => {
    if (animate) return { maxHeight: open ? ref.current?.offsetHeight + "px" : "0px" };
    return { maxHeight: open ? null : "0px" };
  }, [height, open, ref?.current]);
  useElementHeight(ref?.current, onHeight, [children]);
  function onHeight(height2) {
    setHeight(height2);
  }
  return /* @__PURE__ */ jsx(Div, { style, ...wrapper, children: /* @__PURE__ */ jsx(Div, { ref, ...computed, children }) });
};
const AccordionText = ({
  name = "AccordionText",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accordionText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
export {
  Accordion,
  AccordionBody,
  AccordionText,
  AccordionTitle,
  AccordionToggle
};