dgz-ui/dist/accordion/index.es.js

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

import { j as n } from "../jsx-runtime-DS1N_tNq.js";
import l from "react";
import { c as Z } from "../index-ljY4mZHt.js";
import { c as H } from "../index-D3yPpw0n.js";
import { u as ee } from "../index-DLcqcWxM.js";
import { a as oe, u as E } from "../index-C-L1jRHK.js";
import { P as V } from "../index-l3y0hILL.js";
import { c as K, R as re, T as te, b as ne } from "../index-sJY0UPTh.js";
import { u as ce } from "../index-DTDT63Qf.js";
import { C as ae } from "../chevron-down-vqQwpxPF.js";
import { c as y } from "../utils-B6fNqzRf.js";
function ie(e, r, { checkForDefaultPrevented: o = !0 } = {}) {
  return function(a) {
    if (e == null || e(a), o === !1 || !a.defaultPrevented)
      return r == null ? void 0 : r(a);
  };
}
var d = "Accordion", se = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [S, le, de] = H(d), [b, Te] = Z(d, [
  de,
  K
]), k = K(), $ = l.forwardRef(
  (e, r) => {
    const { type: o, ...c } = e, a = c, t = c;
    return /* @__PURE__ */ n.jsx(S.Provider, { scope: e.__scopeAccordion, children: o === "multiple" ? /* @__PURE__ */ n.jsx(me, { ...t, ref: r }) : /* @__PURE__ */ n.jsx(fe, { ...a, ref: r }) });
  }
);
$.displayName = d;
var [z, pe] = b(d), [L, ue] = b(
  d,
  { collapsible: !1 }
), fe = l.forwardRef(
  (e, r) => {
    const {
      value: o,
      defaultValue: c,
      onValueChange: a = () => {
      },
      collapsible: t = !1,
      ...s
    } = e, [i, p] = E({
      prop: o,
      defaultProp: c ?? "",
      onChange: a,
      caller: d
    });
    return /* @__PURE__ */ n.jsx(
      z,
      {
        scope: e.__scopeAccordion,
        value: l.useMemo(() => i ? [i] : [], [i]),
        onItemOpen: p,
        onItemClose: l.useCallback(() => t && p(""), [t, p]),
        children: /* @__PURE__ */ n.jsx(L, { scope: e.__scopeAccordion, collapsible: t, children: /* @__PURE__ */ n.jsx(G, { ...s, ref: r }) })
      }
    );
  }
), me = l.forwardRef((e, r) => {
  const {
    value: o,
    defaultValue: c,
    onValueChange: a = () => {
    },
    ...t
  } = e, [s, i] = E({
    prop: o,
    defaultProp: c ?? [],
    onChange: a,
    caller: d
  }), p = l.useCallback(
    (x) => i((f = []) => [...f, x]),
    [i]
  ), m = l.useCallback(
    (x) => i((f = []) => f.filter((h) => h !== x)),
    [i]
  );
  return /* @__PURE__ */ n.jsx(
    z,
    {
      scope: e.__scopeAccordion,
      value: s,
      onItemOpen: p,
      onItemClose: m,
      children: /* @__PURE__ */ n.jsx(L, { scope: e.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ n.jsx(G, { ...t, ref: r }) })
    }
  );
}), [xe, g] = b(d), G = l.forwardRef(
  (e, r) => {
    const { __scopeAccordion: o, disabled: c, dir: a, orientation: t = "vertical", ...s } = e, i = l.useRef(null), p = ee(i, r), m = le(o), f = ce(a) === "ltr", h = ie(e.onKeyDown, (v) => {
      var O;
      if (!se.includes(v.key)) return;
      const W = v.target, I = m().filter((R) => {
        var M;
        return !((M = R.ref.current) != null && M.disabled);
      }), A = I.findIndex((R) => R.ref.current === W), T = I.length;
      if (A === -1) return;
      v.preventDefault();
      let u = A;
      const j = 0, _ = T - 1, w = () => {
        u = A + 1, u > _ && (u = j);
      }, P = () => {
        u = A - 1, u < j && (u = _);
      };
      switch (v.key) {
        case "Home":
          u = j;
          break;
        case "End":
          u = _;
          break;
        case "ArrowRight":
          t === "horizontal" && (f ? w() : P());
          break;
        case "ArrowDown":
          t === "vertical" && w();
          break;
        case "ArrowLeft":
          t === "horizontal" && (f ? P() : w());
          break;
        case "ArrowUp":
          t === "vertical" && P();
          break;
      }
      const X = u % T;
      (O = I[X].ref.current) == null || O.focus();
    });
    return /* @__PURE__ */ n.jsx(
      xe,
      {
        scope: o,
        disabled: c,
        direction: a,
        orientation: t,
        children: /* @__PURE__ */ n.jsx(S.Slot, { scope: o, children: /* @__PURE__ */ n.jsx(
          V.div,
          {
            ...s,
            "data-orientation": t,
            ref: p,
            onKeyDown: c ? void 0 : h
          }
        ) })
      }
    );
  }
), C = "AccordionItem", [ve, D] = b(C), U = l.forwardRef(
  (e, r) => {
    const { __scopeAccordion: o, value: c, ...a } = e, t = g(C, o), s = pe(C, o), i = k(o), p = oe(), m = c && s.value.includes(c) || !1, x = t.disabled || e.disabled;
    return /* @__PURE__ */ n.jsx(
      ve,
      {
        scope: o,
        open: m,
        disabled: x,
        triggerId: p,
        children: /* @__PURE__ */ n.jsx(
          re,
          {
            "data-orientation": t.orientation,
            "data-state": Q(m),
            ...i,
            ...a,
            ref: r,
            disabled: x,
            open: m,
            onOpenChange: (f) => {
              f ? s.onItemOpen(c) : s.onItemClose(c);
            }
          }
        )
      }
    );
  }
);
U.displayName = C;
var Y = "AccordionHeader", q = l.forwardRef(
  (e, r) => {
    const { __scopeAccordion: o, ...c } = e, a = g(d, o), t = D(Y, o);
    return /* @__PURE__ */ n.jsx(
      V.h3,
      {
        "data-orientation": a.orientation,
        "data-state": Q(t.open),
        "data-disabled": t.disabled ? "" : void 0,
        ...c,
        ref: r
      }
    );
  }
);
q.displayName = Y;
var N = "AccordionTrigger", B = l.forwardRef(
  (e, r) => {
    const { __scopeAccordion: o, ...c } = e, a = g(d, o), t = D(N, o), s = ue(N, o), i = k(o);
    return /* @__PURE__ */ n.jsx(S.ItemSlot, { scope: o, children: /* @__PURE__ */ n.jsx(
      te,
      {
        "aria-disabled": t.open && !s.collapsible || void 0,
        "data-orientation": a.orientation,
        id: t.triggerId,
        ...i,
        ...c,
        ref: r
      }
    ) });
  }
);
B.displayName = N;
var F = "AccordionContent", J = l.forwardRef(
  (e, r) => {
    const { __scopeAccordion: o, ...c } = e, a = g(d, o), t = D(F, o), s = k(o);
    return /* @__PURE__ */ n.jsx(
      ne,
      {
        role: "region",
        "aria-labelledby": t.triggerId,
        "data-orientation": a.orientation,
        ...s,
        ...c,
        ref: r,
        style: {
          "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
          "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
          ...e.style
        }
      }
    );
  }
);
J.displayName = F;
function Q(e) {
  return e ? "open" : "closed";
}
var Ae = $, Ce = U, be = q, ge = B, he = J;
function Oe({
  ...e
}) {
  return /* @__PURE__ */ n.jsx(Ae, { "data-slot": "accordion", ...e });
}
function Me({
  className: e,
  ...r
}) {
  return /* @__PURE__ */ n.jsx(
    Ce,
    {
      "data-slot": "accordion-item",
      className: y("border-b last:border-b-0", e),
      ...r
    }
  );
}
function Ee({
  className: e,
  children: r,
  ...o
}) {
  return /* @__PURE__ */ n.jsx(be, { className: "flex", children: /* @__PURE__ */ n.jsxs(
    ge,
    {
      "data-slot": "accordion-trigger",
      className: y(
        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
        e
      ),
      ...o,
      children: [
        r,
        /* @__PURE__ */ n.jsx(ae, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
      ]
    }
  ) });
}
function Ve({
  className: e,
  children: r,
  ...o
}) {
  return /* @__PURE__ */ n.jsx(
    he,
    {
      "data-slot": "accordion-content",
      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
      ...o,
      children: /* @__PURE__ */ n.jsx("div", { className: y("pt-0 pb-4", e), children: r })
    }
  );
}
export {
  Oe as Accordion,
  Ve as AccordionContent,
  Me as AccordionItem,
  Ee as AccordionTrigger
};