@payfit/unity-components
Version:
70 lines (69 loc) • 2.66 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Text as t } from "../../text/Text.js";
import { useContext as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { FormattedMessage as o } from "react-intl";
import { Button as s } from "react-aria-components/Button";
import { Disclosure as c, DisclosurePanel as l, DisclosureStateContext as u, Heading as d } from "react-aria-components/Disclosure";
//#region src/components/error-state/parts/Collapsible.tsx
var f = r({
slots: {
base: [
"uy:w-full uy:rounded-50",
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
],
heading: "uy:w-full",
button: ["uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer", "uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"],
title: "uy:flex uy:grow uy:text-left uy:items-center uy:justify-center",
icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center",
content: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0"
},
variants: { isExpanded: {
true: { icon: "uy:rotate-180" },
false: { icon: "uy:rotate-0" }
} }
}), p = () => {
let { button: r, title: c, icon: l, heading: p } = f({ isExpanded: n(u)?.isExpanded });
return /* @__PURE__ */ i(d, {
"data-dd-privacy": "allow",
className: p(),
children: /* @__PURE__ */ i(s, {
className: r(),
slot: "trigger",
children: /* @__PURE__ */ a(t, {
variant: "bodyStrong",
className: c(),
children: [/* @__PURE__ */ i(e, {
src: "CaretDownOutlined",
className: l(),
role: "presentation"
}), /* @__PURE__ */ i(o, {
id: "unity:component:error-state:collapsible:title",
defaultMessage: "Show details"
})]
})
})
});
}, m = ({ children: e, ...t }) => {
let { base: n, content: r } = f();
return /* @__PURE__ */ a(c, {
"data-dd-privacy": "allow",
...t,
className: n(),
children: [/* @__PURE__ */ i(p, {}), /* @__PURE__ */ i(l, {
"data-dd-privacy": "allow",
className: r(),
children: /* @__PURE__ */ i("div", {
className: "uy:ml-400 uy:typography-body",
children: e
})
})]
});
};
m.displayName = "Collapsible";
//#endregion
export { m as Collapsible };