@payfit/unity-components
Version:
39 lines (38 loc) • 2.17 kB
JavaScript
import { PopoverHeader as e } from "./parts/PopoverHeader.js";
import { forwardRef as t } from "react";
import { uyTv as n } from "@payfit/unity-themes";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { Popover as a } from "react-aria-components/Popover";
import { Dialog as o, DialogTrigger as s } from "react-aria-components/Dialog";
//#region src/components/popover/Popover.tsx
var c = n({ slots: {
base: [
"uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
"uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
"uy:data-[entering]:data-[placement=\"bottom\"]:-translate-y-100 uy:data-[entering]:data-[placement=\"bottom\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-y-0",
"uy:data-[entering]:data-[placement=\"top\"]:translate-y-100 uy:data-[entering]:data-[placement=\"top\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"top\"]:translate-y-0",
"uy:data-[entering]:data-[placement=\"left\"]:translate-x-100 uy:data-[entering]:data-[placement=\"left\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-x-0",
"uy:data-[entering]:data-[placement=\"right\"]:-translate-x-100 uy:data-[entering]:data-[placement=\"right\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"right\"]:translate-y-0"
],
dialog: ["uy:flex uy:flex-col uy:rounded-100", "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring"]
} }), l = t((t, n) => {
let { children: s, title: l, isTitleSrOnly: u, displayCloseButton: d, ...f } = t, { base: p, dialog: m } = c();
return /* @__PURE__ */ r(a, {
ref: n,
className: p(),
offset: 8,
...f,
children: /* @__PURE__ */ i(o, {
className: m(),
role: "dialog",
children: [/* @__PURE__ */ r(e, {
title: l,
isTitleSrOnly: u,
displayCloseButton: d
}), s]
})
});
});
l.displayName = "Popover", s.displayName = "PopoverTrigger";
//#endregion
export { s as DialogTrigger, l as Popover };