dgz-ui/dist/collapsible-DvKy678y.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

import { j as s } from "./jsx-runtime-C5mzlN2N.js";
import * as o from "react";
import { c as O, P as T } from "./index-D_OzDH1f.js";
import { c as S, u as D } from "./index-Dmh__Tgi.js";
import { u as M, a as $ } from "./index-rSIGk0ww.js";
import { u as L } from "./index-l1ZGtt0d.js";
import { P as g } from "./index-Do92jweN.js";
var f = "Collapsible", [k, U] = S(f), [F, x] = k(f), E = o.forwardRef(
  (e, r) => {
    const {
      __scopeCollapsible: i,
      open: a,
      defaultOpen: t,
      disabled: c,
      onOpenChange: l,
      ...m
    } = e, [d, p] = M({
      prop: a,
      defaultProp: t ?? !1,
      onChange: l,
      caller: f
    });
    return /* @__PURE__ */ s.jsx(
      F,
      {
        scope: i,
        disabled: c,
        contentId: $(),
        open: d,
        onOpenToggle: o.useCallback(() => p((b) => !b), [p]),
        children: /* @__PURE__ */ s.jsx(
          g.div,
          {
            "data-state": R(d),
            "data-disabled": c ? "" : void 0,
            ...m,
            ref: r
          }
        )
      }
    );
  }
);
E.displayName = f;
var w = "CollapsibleTrigger", A = o.forwardRef(
  (e, r) => {
    const { __scopeCollapsible: i, ...a } = e, t = x(w, i);
    return /* @__PURE__ */ s.jsx(
      g.button,
      {
        type: "button",
        "aria-controls": t.contentId,
        "aria-expanded": t.open || !1,
        "data-state": R(t.open),
        "data-disabled": t.disabled ? "" : void 0,
        disabled: t.disabled,
        ...a,
        ref: r,
        onClick: O(e.onClick, t.onOpenToggle)
      }
    );
  }
);
A.displayName = w;
var v = "CollapsibleContent", I = o.forwardRef(
  (e, r) => {
    const { forceMount: i, ...a } = e, t = x(v, e.__scopeCollapsible);
    return /* @__PURE__ */ s.jsx(T, { present: i || t.open, children: ({ present: c }) => /* @__PURE__ */ s.jsx(B, { ...a, ref: r, present: c }) });
  }
);
I.displayName = v;
var B = o.forwardRef((e, r) => {
  const { __scopeCollapsible: i, present: a, children: t, ...c } = e, l = x(v, i), [m, d] = o.useState(a), p = o.useRef(null), b = L(r, p), h = o.useRef(0), P = h.current, y = o.useRef(0), N = y.current, C = l.open || m, j = o.useRef(C), u = o.useRef(void 0);
  return o.useEffect(() => {
    const n = requestAnimationFrame(() => j.current = !1);
    return () => cancelAnimationFrame(n);
  }, []), D(() => {
    const n = p.current;
    if (n) {
      u.current = u.current || {
        transitionDuration: n.style.transitionDuration,
        animationName: n.style.animationName
      }, n.style.transitionDuration = "0s", n.style.animationName = "none";
      const _ = n.getBoundingClientRect();
      h.current = _.height, y.current = _.width, j.current || (n.style.transitionDuration = u.current.transitionDuration, n.style.animationName = u.current.animationName), d(a);
    }
  }, [l.open, a]), /* @__PURE__ */ s.jsx(
    g.div,
    {
      "data-state": R(l.open),
      "data-disabled": l.disabled ? "" : void 0,
      id: l.contentId,
      hidden: !C,
      ...c,
      ref: b,
      style: {
        "--radix-collapsible-content-height": P ? `${P}px` : void 0,
        "--radix-collapsible-content-width": N ? `${N}px` : void 0,
        ...e.style
      },
      children: C && t
    }
  );
});
function R(e) {
  return e ? "open" : "closed";
}
var G = E;
function V({
  ...e
}) {
  return /* @__PURE__ */ s.jsx(G, { "data-slot": "collapsible", ...e });
}
function W({
  ...e
}) {
  return /* @__PURE__ */ s.jsx(
    A,
    {
      "data-slot": "collapsible-trigger",
      ...e
    }
  );
}
function X({
  ...e
}) {
  return /* @__PURE__ */ s.jsx(
    I,
    {
      "data-slot": "collapsible-content",
      ...e
    }
  );
}
export {
  V as C,
  W as a,
  X as b
};