@stanfordspezi/spezi-web-design-system/dist/Collapsible-e01o3cFu.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as s } from "react/jsx-runtime";
import { c as _ } from "./index-2NvaPZWc.mjs";
import * as r from "react";
import { c as D, u as M } from "./index-hURUNS5V.mjs";
import { c as $ } from "./index-DFZozV_h.mjs";
import { u as L } from "./index-DOCb3WPZ.mjs";
import { c as k, u as F, S as E } from "./index-D2LZVjSn.mjs";
import "react-dom";
import { P as B } from "./index-DlW0DMEl.mjs";
import { u as G } from "./index-C3vaq8Fy.mjs";
var j = [
  "a",
  "button",
  "div",
  "form",
  "h2",
  "h3",
  "img",
  "input",
  "label",
  "li",
  "nav",
  "ol",
  "p",
  "select",
  "span",
  "svg",
  "ul"
], v = j.reduce((e, t) => {
  const a = k(`Primitive.${t}`), o = r.forwardRef((n, c) => {
    const { asChild: l, ...p } = n, d = l ? a : t;
    return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ s(d, { ...p, ref: c });
  });
  return o.displayName = `Primitive.${t}`, { ...e, [t]: o };
}, {}), m = "Collapsible", [q, re] = $(m), [H, g] = q(m), T = r.forwardRef(
  (e, t) => {
    const {
      __scopeCollapsible: a,
      open: o,
      defaultOpen: n,
      disabled: c,
      onOpenChange: l,
      ...p
    } = e, [d, u] = L({
      prop: o,
      defaultProp: n ?? !1,
      onChange: l,
      caller: m
    });
    return /* @__PURE__ */ s(
      H,
      {
        scope: a,
        disabled: c,
        contentId: G(),
        open: d,
        onOpenToggle: r.useCallback(() => u((C) => !C), [u]),
        children: /* @__PURE__ */ s(
          v.div,
          {
            "data-state": R(d),
            "data-disabled": c ? "" : void 0,
            ...p,
            ref: t
          }
        )
      }
    );
  }
);
T.displayName = m;
var I = "CollapsibleTrigger", O = r.forwardRef(
  (e, t) => {
    const { __scopeCollapsible: a, ...o } = e, n = g(I, a);
    return /* @__PURE__ */ s(
      v.button,
      {
        type: "button",
        "aria-controls": n.contentId,
        "aria-expanded": n.open || !1,
        "data-state": R(n.open),
        "data-disabled": n.disabled ? "" : void 0,
        disabled: n.disabled,
        ...o,
        ref: t,
        onClick: D(e.onClick, n.onOpenToggle)
      }
    );
  }
);
O.displayName = I;
var h = "CollapsibleContent", A = r.forwardRef(
  (e, t) => {
    const { forceMount: a, ...o } = e, n = g(h, e.__scopeCollapsible);
    return /* @__PURE__ */ s(B, { present: a || n.open, children: ({ present: c }) => /* @__PURE__ */ s(z, { ...o, ref: t, present: c }) });
  }
);
A.displayName = h;
var z = r.forwardRef((e, t) => {
  const { __scopeCollapsible: a, present: o, children: n, ...c } = e, l = g(h, a), [p, d] = r.useState(o), u = r.useRef(null), C = F(t, u), N = r.useRef(0), y = N.current, P = r.useRef(0), w = P.current, b = l.open || p, x = r.useRef(b), f = r.useRef(void 0);
  return r.useEffect(() => {
    const i = requestAnimationFrame(() => x.current = !1);
    return () => cancelAnimationFrame(i);
  }, []), M(() => {
    const i = u.current;
    if (i) {
      f.current = f.current || {
        transitionDuration: i.style.transitionDuration,
        animationName: i.style.animationName
      }, i.style.transitionDuration = "0s", i.style.animationName = "none";
      const S = i.getBoundingClientRect();
      N.current = S.height, P.current = S.width, x.current || (i.style.transitionDuration = f.current.transitionDuration, i.style.animationName = f.current.animationName), d(o);
    }
  }, [l.open, o]), /* @__PURE__ */ s(
    v.div,
    {
      "data-state": R(l.open),
      "data-disabled": l.disabled ? "" : void 0,
      id: l.contentId,
      hidden: !b,
      ...c,
      ref: C,
      style: {
        "--radix-collapsible-content-height": y ? `${y}px` : void 0,
        "--radix-collapsible-content-width": w ? `${w}px` : void 0,
        ...e.style
      },
      children: b && n
    }
  );
});
function R(e) {
  return e ? "open" : "closed";
}
var J = T, K = O, Q = A;
const se = (e) => /* @__PURE__ */ s(J, { "data-slot": "collapsible-root", ...e }), ie = K, U = ({
  className: e,
  asChild: t = !1,
  ...a
}) => /* @__PURE__ */ s(
  t ? E : "div",
  {
    "data-slot": "collapsible-content-root",
    className: _(
      "grid !transition-all data-[state=closed]:grid-rows-[0fr] data-[state=open]:grid-rows-[1fr]",
      e
    ),
    ...a
  }
), V = ({
  className: e,
  asChild: t = !1,
  ...a
}) => /* @__PURE__ */ s(
  t ? E : "div",
  {
    "data-slot": "collapsible-content-inner",
    className: _("overflow-hidden", e),
    ...a
  }
), le = ({
  children: e,
  ...t
}) => /* @__PURE__ */ s(Q, { asChild: !0, forceMount: !0, ...t, children: /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(V, { children: e }) }) });
export {
  le as C,
  J as R,
  K as T,
  V as a,
  U as b,
  se as c,
  ie as d,
  Q as e,
  re as f
};