@vela-ui/react
Version:
Vela UI React components
85 lines (82 loc) • 2.67 kB
JavaScript
import {
cn
} from "./chunk-OCN72JL6.mjs";
// src/components/popover.tsx
import {
Dialog as AriaDialog,
DialogTrigger as AriaDialogTrigger,
Popover as AriaPopover,
composeRenderProps,
OverlayArrow,
PopoverContext,
useSlottedContext
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var popoverVariants = tv({
base: "bg-popover text-popover-foreground z-50 rounded-md border shadow-md outline-hidden transition duration-200",
variants: {
isEntering: {
true: [
"animate-in fade-in-0 zoom-in-95",
"data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[placement=bottom]:slide-in-from-top-2"
]
},
isExiting: {
true: [
"animate-out fade-out-0 zoom-out-95",
"data-[placement=left]:slide-out-to-right-2 data-[placement=right]:slide-out-to-left-2 data-[placement=top]:slide-out-to-bottom-2 data-[placement=bottom]:slide-out-to-top-2"
]
}
}
});
var PopoverTrigger = AriaDialogTrigger;
var Popover = ({ className, showArrow, ...props }) => {
const popoverContext = useSlottedContext(PopoverContext);
const isSubmenu = (popoverContext == null ? void 0 : popoverContext.trigger) === "SubmenuTrigger";
let offset = showArrow ? 12 : 8;
offset = isSubmenu ? offset - 6 : offset;
return /* @__PURE__ */ jsx(
AriaPopover,
{
"data-slot": "popover",
offset,
className: composeRenderProps(
className,
(className2, renderProps) => popoverVariants({
...renderProps,
className: className2
})
),
...props,
children: composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxs(Fragment, { children: [
showArrow && /* @__PURE__ */ jsx(OverlayArrow, { className: "group", children: /* @__PURE__ */ jsx(
"svg",
{
width: 12,
height: 12,
viewBox: "0 0 12 12",
className: "fill-popover stroke-border block stroke-1 group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",
children: /* @__PURE__ */ jsx("path", { d: "M0 0 L6 6 L12 0" })
}
) }),
children
] }))
}
);
};
function PopoverContent({ className, ...props }) {
return /* @__PURE__ */ jsx(
AriaDialog,
{
"data-slot": "popover-content",
className: cn("p-4 outline-hidden", className),
...props
}
);
}
export {
PopoverTrigger,
Popover,
PopoverContent
};