UNPKG

@vela-ui/react

Version:

Vela UI React components

85 lines (82 loc) 2.67 kB
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 };