@uva-glass/component-library/dist/components/Accordion/Accordion.js

React components UvA

import { jsx as c, jsxs as d } from "react/jsx-runtime";
import { c as _ } from "../../clsx-OuTLNxxd.js";
import { forwardRef as u, useState as I, useId as v, useImperativeHandle as C } from "react";
import { Icon as l } from "../Icon/Icon.js";
import '../../assets/Accordion.css';const N = "_accordion_19w0n_1", b = "_accordion__title_19w0n_6", y = "_accordion__content_19w0n_66", n = {
  accordion: N,
  accordion__title: b,
  "accordion__title-icon": "_accordion__title-icon_19w0n_21",
  "accordion__title-icon-right": "_accordion__title-icon-right_19w0n_22",
  "accordion__title-icon--margin-0": "_accordion__title-icon--margin-0_19w0n_28",
  "accordion__title-icon--margin-025": "_accordion__title-icon--margin-025_19w0n_32",
  "accordion__title-icon--margin-050": "_accordion__title-icon--margin-050_19w0n_36",
  "accordion__title-icon--margin-075": "_accordion__title-icon--margin-075_19w0n_40",
  "accordion__title-icon--margin-100": "_accordion__title-icon--margin-100_19w0n_44",
  "accordion__title-icon--margin-150": "_accordion__title-icon--margin-150_19w0n_48",
  "accordion__title-icon--margin-200": "_accordion__title-icon--margin-200_19w0n_52",
  "accordion__title-icon--expanded": "_accordion__title-icon--expanded_19w0n_60",
  "accordion__title-icon-right--expanded": "_accordion__title-icon-right--expanded_19w0n_61",
  accordion__content: y,
  "accordion__content--expanded": "_accordion__content--expanded_19w0n_70"
}, S = u(
  ({ title: s, content: m, expanded: g = !1, cheveronPlacement: t = "right", cheveronMargin: e = "050" }, p) => {
    const [o, i] = I(g), a = v();
    function x(h) {
      const { code: r } = h;
      (r === "Enter" || r === "Space") && i(!o);
    }
    const w = () => {
      i(!1);
    }, f = () => {
      i(!0);
    };
    return C(p, () => ({
      closeContent: w,
      openContent: f
    })), /* @__PURE__ */ c("div", { children: /* @__PURE__ */ d("div", { className: n.accordion, children: [
      /* @__PURE__ */ d(
        "div",
        {
          className: n.accordion__title,
          id: a,
          role: "button",
          tabIndex: 0,
          onClick: () => i(!o),
          onKeyUp: x,
          "aria-expanded": o,
          children: [
            t === "left" && /* @__PURE__ */ c(
              l,
              {
                className: _(
                  n["accordion__title-icon"],
                  n[`accordion__title-icon--margin-${e}`],
                  {
                    [n["accordion__title-icon--expanded"]]: o
                  }
                ),
                name: "CheveronLeft",
                size: 16
              }
            ),
            s,
            t === "right" && /* @__PURE__ */ c(
              l,
              {
                className: _(
                  n["accordion__title-icon-right"],
                  n[`accordion__title-icon--margin-${e}`],
                  {
                    [n["accordion__title-icon-right--expanded"]]: o
                  }
                ),
                name: "CheveronLeft",
                size: 16
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ c(
        "div",
        {
          "aria-labelledby": a,
          className: _(n.accordion__content, { [n["accordion__content--expanded"]]: o }),
          children: m
        }
      )
    ] }) });
  }
);
export {
  S as Accordion
};
//# sourceMappingURL=Accordion.js.map