@lunalytics/ui
Version:
React based component library created to be used in Lunalytics
61 lines (60 loc) • 2.15 kB
JavaScript
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { c as m } from "../../index-2w0W-O47.js";
import { useContext as g, useRef as k } from "react";
import { G as w } from "../../iconBase-DSKTHwal.js";
import { AccordionContext as y } from "./context.js";
function A(i) {
return w({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" }, child: [] }] })(i);
}
const H = ({
children: i,
id: t,
title: h,
subtitle: n,
tag: a,
tagColor: u,
...f
}) => {
var d;
const { selected: o, setSelected: c, showMultiple: p, dark: v } = g(y), s = o.includes(t), r = k(null), x = m("luna-accordion-list-item", {
"luna-accordion-list-item-dark": v
}), C = m("luna-accordion-list-item-tag", u);
return /* @__PURE__ */ l("div", { ...f, id: t, className: x, children: [
/* @__PURE__ */ l("header", { role: "button", onClick: () => {
c(
p ? s ? o.filter((N) => N !== t) : [...o, t] : s ? [] : [t]
);
}, children: [
/* @__PURE__ */ l("div", { style: { flex: 1 }, children: [
/* @__PURE__ */ e("div", { className: "luna-accordion-list-item-title", children: h }),
n && /* @__PURE__ */ e("div", { className: "luna-accordion-list-item-subtitle", children: n })
] }),
a && /* @__PURE__ */ e("div", { className: C, children: a }),
/* @__PURE__ */ e(
A,
{
size: 16,
style: {
transition: "transform 0.3s ease-in-out",
transform: s ? "rotate(0deg)" : "rotate(90deg)"
}
}
)
] }),
/* @__PURE__ */ e(
"div",
{
style: {
height: s ? (d = r.current) == null ? void 0 : d.offsetHeight : 0,
overflowY: "hidden",
transition: "all 0.3s ease-in-out"
},
children: /* @__PURE__ */ e("div", { className: "luna-accordion-list-item-text", ref: r, children: i })
}
)
] });
};
H.displayName = "AccordionItem";
export {
H as default
};