welcome-ui/dist/Accordion.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Accordion.css';
import { jsx as e, jsxs as g } from "react/jsx-runtime";
import { D } from "./NDVACHQI-WTOpOfgG.js";
import { D as S } from "./WLZ6H5FH-CuTcX7sR.js";
import { u as co } from "./WLZ6H5FH-CuTcX7sR.js";
import { createContext as j, forwardRef as t, useContext as B, useCallback as I } from "react";
import { Icon as _ } from "./Icon.js";
import { Text as u } from "./Text.js";
import { c as M } from "./index-B6iGEm-i.js";
import { Badge as O } from "./Badge.js";
import { Button as h } from "./Button.js";
import { Tag as P } from "./Tag.js";
const R = "_root_4govd_2", V = {
  root: R,
  "accordion-disclosure": "_accordion-disclosure_4govd_6",
  "accordion-disclosure-arrow-icon": "_accordion-disclosure-arrow-icon_4govd_15",
  "accordion-header-wrapper": "_accordion-header-wrapper_4govd_18",
  "accordion-header": "_accordion-header_4govd_18",
  "accordion-header-title-wrapper": "_accordion-header-title-wrapper_4govd_30",
  "accordion-header-with-tags-wrapper": "_accordion-header-with-tags-wrapper_4govd_35",
  "accordion-header-with-tags": "_accordion-header-with-tags_4govd_35",
  "accordion-tags": "_accordion-tags_4govd_48",
  "accordion-disclosure-actions": "_accordion-disclosure-actions_4govd_54",
  "accordion-title": "_accordion-title_4govd_62",
  "accordion-subtitle": "_accordion-subtitle_4govd_65",
  "accordion-content": "_accordion-content_4govd_68",
  "accordion-content-wrapper": "_accordion-content-wrapper_4govd_76"
}, n = M(V), v = j({}), d = () => B(v), A = t(
  ({ children: r, className: a, size: o = "sm", store: c, ...i }, s) => /* @__PURE__ */ e(v.Provider, { value: { size: o, store: c }, children: /* @__PURE__ */ e("div", { className: n("root", a), ref: s, ...i, children: r }) })
);
A.displayName = "Accordion";
const N = {
  lg: "md",
  md: "sm",
  sm: "sm"
}, w = t(
  ({ children: r, className: a, "data-testid": o = "accordion-disclosure", ...c }, i) => {
    const { size: s, store: l } = d(), m = s === "lg" ? "secondary" : "tertiary", p = N[s];
    return /* @__PURE__ */ g(
      D,
      {
        ref: i,
        ...c,
        "data-testid": o,
        render: (C) => /* @__PURE__ */ e("div", { ...C, className: n("accordion-disclosure", a) }),
        role: "button",
        store: l,
        tabIndex: 0,
        children: [
          r,
          /* @__PURE__ */ e(
            h,
            {
              className: n("accordion-disclosure-actions"),
              "data-testid": `${o}-button`,
              size: p,
              variant: m,
              children: /* @__PURE__ */ e(_, { className: n("accordion-disclosure-arrow-icon"), name: "angle-down", size: "lg" })
            }
          )
        ]
      }
    );
  }
);
w.displayName = "Accordion.Disclosure";
const z = t(
  ({ children: r, className: a, ...o }, c) => /* @__PURE__ */ e("div", { className: n("accordion-header-wrapper", a), ref: c, ...o, children: r })
);
z.displayName = "Accordion.HeaderWrapper";
const $ = {
  lg: "heading-md-strong",
  md: "heading-sm",
  sm: "heading-xs"
}, y = t(({ badgeValue: r, badgeVariant: a, className: o, subtitle: c, title: i, ...s }, l) => {
  const { size: m } = d();
  return /* @__PURE__ */ g("div", { className: n("accordion-header", o), ...s, ref: l, children: [
    /* @__PURE__ */ g("div", { className: n("accordion-header-title-wrapper"), children: [
      /* @__PURE__ */ e(u, { className: n("accordion-title"), variant: $[m], children: i }),
      r ? /* @__PURE__ */ e(O, { variant: a, children: r }) : null
    ] }),
    c ? /* @__PURE__ */ e(u, { className: n("accordion-subtitle"), variant: "body-md", children: c }) : null
  ] });
});
y.displayName = "Accordion.Header";
const f = t(
  ({ children: r, className: a, ...o }, c) => /* @__PURE__ */ e("div", { className: n("accordion-header-with-tags", a), ref: c, ...o, children: r })
);
f.displayName = "Accordion.HeaderWithTags";
const x = t(
  ({ children: r, className: a, ...o }, c) => /* @__PURE__ */ e("div", { className: n("accordion-header-with-tags-wrapper", a), ref: c, ...o, children: r })
);
x.displayName = "Accordion.HeaderWithTagsWrapper";
const T = t(
  ({ children: r, className: a, ...o }, c) => /* @__PURE__ */ e("div", { className: n("accordion-tags", a), ref: c, ...o, children: r })
);
T.displayName = "Accordion.Tags";
const q = {
  lg: "xl",
  md: "lg",
  sm: "md"
}, E = ({ className: r, name: a, ...o }) => {
  const { size: c } = d(), i = q[c];
  return /* @__PURE__ */ e(_, { className: r, name: a, size: i, ...o });
}, H = t(
  ({ children: r, className: a, ...o }, c) => {
    const { store: i } = d();
    return /* @__PURE__ */ e(
      S,
      {
        className: n("accordion-content", a),
        ref: c,
        store: i,
        ...o,
        children: /* @__PURE__ */ e("div", { className: n("accordion-content-wrapper"), children: r })
      }
    );
  }
);
H.displayName = "Accordion.Content";
const W = t(
  ({ children: r, className: a, ...o }, c) => {
    const { size: i } = d();
    return /* @__PURE__ */ e(P, { className: a, ref: c, size: i === "lg" ? "lg" : "md", ...o, children: r });
  }
);
W.displayName = "Accordion.Tag";
const b = t(
  ({ children: r, className: a, onClick: o, ...c }, i) => {
    const { size: s } = d(), l = N[s], m = I(
      (p) => {
        p.preventDefault(), o == null || o(p);
      },
      [o]
    );
    return /* @__PURE__ */ e(
      h,
      {
        className: a,
        onClick: m,
        ref: i,
        size: l,
        variant: "secondary",
        ...c,
        children: r
      }
    );
  }
);
b.displayName = "Accordion.Action";
const k = Object.assign(A, {
  Action: b,
  Content: H,
  Disclosure: w,
  Header: y,
  HeaderWithTags: f,
  HeaderWithTagsWrapper: x,
  HeaderWrapper: z,
  Icon: E,
  Tag: W,
  Tags: T
});
export {
  k as Accordion,
  V as accordionClasses,
  co as useAccordion,
  d as useAccordionContext
};