@frontify/fondue
Version:
Design system of Frontify
35 lines (34 loc) • 1.14 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { FOCUS_VISIBLE_STYLE as d } from "../../../utilities/focusStyle.es.js";
import { merge as e } from "../../../utilities/merge.es.js";
const m = ({ active: n, onClick: o, expanded: w, disabled: t, className: a, ...i }) => /* @__PURE__ */ r(
"button",
{
onClick: o,
disabled: t,
"aria-label": "expand item",
tabIndex: t ? -1 : 0,
"data-test-id": "tree-item-toggle",
className: e([
"tw-p-1.5 first:tw-ml-2 tw-min-h-[20px] tw-min-w-[20px] tw-h-5 tw-w-5 tw-flex tw-justify-center tw-rounded-sm disabled:tw-invisible",
n ? "tw-text-white tw-text-opacity-50" : "tw-text-line-x-strong",
d,
a
]),
...i,
children: /* @__PURE__ */ r(
"div",
{
className: e([
"tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
w && "tw-rotate-90"
])
}
)
}
);
m.displayName = "FondueExpandButton";
export {
m as ExpandButton
};
//# sourceMappingURL=ExpandButton.es.js.map