@thinkbuff/figma-react
Version:
A Figma React UI components for creating plugins and widgets
70 lines (67 loc) • 2.33 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { cn } from '../../utils/cn.mjs';
const PopoverRoot = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverAnchor = PopoverPrimitive.Anchor;
const PopoverClose = PopoverPrimitive.Close;
const PopoverArrow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
PopoverPrimitive.Arrow,
{
ref,
width: 14,
height: 7,
className: cn("text-figma-border fill-figma-bg", className),
...props,
asChild: true,
children: /* @__PURE__ */ jsxs(
"svg",
{
viewBox: "0 0 24 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx("rect", { width: "24", height: "2" }),
/* @__PURE__ */ jsx(
"path",
{
d: "M24 1C18 1 18 11 12 11C6 11 6 0.999999 8.74228e-07 0.999999",
stroke: "currentColor",
strokeWidth: "2"
}
)
]
}
)
}
));
PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
const PopoverContent = forwardRef(({ className, container, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
PopoverPrimitive.Content,
{
ref,
align,
sideOffset,
className: cn(
"w-auto",
"bg-figma",
"rounded-0.5",
"outline-solid",
"outline-1",
"outline-figma-border",
"shadow-md",
"will-change-transform,opacity",
"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95",
"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95",
"data-[side=top]:slide-in-from-bottom-1",
"data-[side=right]:slide-in-from-left-1",
"data-[side=bottom]:slide-in-from-top-1",
"data-[side=left]:slide-in-from-right-1",
className
),
...props
}
) }));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { PopoverAnchor as Anchor, PopoverArrow as Arrow, PopoverClose as Close, PopoverContent as Content, PopoverRoot as Root, PopoverTrigger as Trigger };