welcome-ui/dist/Accordion.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { cloneElement as m } from "react";
import "./Icon.mjs";
import { R as p } from "./index-DtWZjMb5.mjs";
import { forwardRef as u } from "./System.mjs";
import t, { th as i } from "@xstyled/styled-components";
import { D as f } from "./P4IRICAX-Dg8AjwYu.mjs";
import { d as g, e as h } from "./VGCJ63VH-C4H4_vtu.mjs";
const x = t.divBox`
  ${i("accordions.wrapper")};
  transition: medium;

  &:hover {
    border-color: neutral-50;
  }
`, n = t.divBox`
  flex-shrink: 0;
  ${i("accordions.icon")};
  transform: rotate3d(0);
  transition: medium;
  width: 32;
  height: 32;
  color: inherit;
  display: flex;
  border-radius: 16;

  & *:first-child {
    margin: auto;
  }
`, $ = t(f)`
  ${i("accordions.title")};
  width: 100%;
  padding: ${i("accordions.padding")};
  background-color: transparent;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: lg;

  &[aria-expanded='true'] {
    ${n} {
      transform: rotate3d(0, 0, 1, 90deg);
    }
  }

  &:focus,
  &:hover {
    cursor: pointer;
    ${n} {
      background-color: neutral-30;
    }
  }

  &:focus {
    outline: 0;
    ${n} {
      color: inherit;
    }
  }
`, j = t(g)`
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-timing-function: linear;
  transition-duration: 200ms;
  animation-duration: 200ms;

  > * {
    overflow: hidden;
    padding: 0;
  }

  &[data-enter] {
    grid-template-rows: 1fr;
  }
`, v = t.div`
  ${i("accordions.content")};
  padding: ${i("accordions.padding")};
  padding-top: 0;
  color: neutral-70;
`, B = u(
  ({ children: e, dataTestId: r, icon: d = /* @__PURE__ */ o.jsx(p, {}), store: s, title: c, ...a }, l) => /* @__PURE__ */ o.jsxs(x, { "data-testid": r, ref: l, ...a, children: [
    /* @__PURE__ */ o.jsxs($, { "data-testid": r ? `${r}-title` : void 0, store: s, children: [
      c,
      /* @__PURE__ */ o.jsx(n, { children: m(d, { size: "sm" }) })
    ] }),
    /* @__PURE__ */ o.jsx(j, { "data-testid": r ? `${r}-content` : void 0, store: s, children: /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(v, { children: e }) }) })
  ] })
);
function E(e) {
  return h({ animated: !0, ...e });
}
export {
  B as Accordion,
  E as useAccordion
};