@thinkbuff/figma-react/dist/components/dropdown-menu/dropdown-menu.mjs

A Figma React UI components for creating plugins and widgets

import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { cn } from '../../utils/cn.mjs';

const DropdownMenuRoot = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuArrow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Arrow,
  {
    ref,
    className: cn("fill-figma-bg-menu", className),
    ...props
  }
));
DropdownMenuArrow.displayName = DropdownMenuPrimitive.Arrow.displayName;
const DropdownMenuSubTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  DropdownMenuPrimitive.SubTrigger,
  {
    ref,
    className: cn(
      "relative",
      "flex",
      "items-center",
      "justify-between",
      "h-6",
      "pl-8",
      "pr-4",
      "font-size-11",
      "text-figma-menu",
      "cursor-default",
      "select-none",
      "outline-none",
      "hover:bg-figma-menu-selected",
      "focus:bg-figma-menu-selected",
      "data-[disabled]:pointer-events-none data-[disabled]:text-figma-menu-disabled",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ jsx("span", { className: "i-mdi-triangle size-2 rotate-90" })
    ]
  }
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = forwardRef(({ className, container, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.SubContent,
  {
    ref,
    className: cn(
      "text-figma-menu",
      "bg-figma-menu",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
      "data-[side=top]:slide-in-from-bottom-2",
      "data-[side=right]:slide-in-from-left-2",
      "data-[side=bottom]:slide-in-from-top-2",
      "data-[side=left]:slide-in-from-right-2",
      "min-w-20",
      "rounded-0.5",
      "border-none",
      "py-2",
      "shadow-md",
      "z-50",
      className
    ),
    ...props
  }
) }));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent = forwardRef(({ className, container, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn(
      "group",
      "text-figma-menu",
      "bg-figma-menu",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
      "data-[side=top]:slide-in-from-bottom-2",
      "data-[side=right]:slide-in-from-left-2",
      "data-[side=bottom]:slide-in-from-top-2",
      "data-[side=left]:slide-in-from-right-2",
      "min-w-20",
      "rounded-0.5",
      "border-none",
      "py-2",
      "shadow-md",
      "z-50",
      className
    ),
    ...props
  }
) }));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Item,
  {
    ref,
    className: cn(
      "relative",
      "flex",
      "items-center",
      "h-6",
      "pl-8",
      "pr-4",
      "font-size-11",
      "text-figma-menu",
      "cursor-default",
      "select-none",
      "outline-none",
      "hover:bg-figma-menu-selected",
      "focus:bg-figma-menu-selected",
      "data-[disabled]:pointer-events-none data-[disabled]:text-figma-menu-disabled",
      className
    ),
    ...props
  }
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  DropdownMenuPrimitive.CheckboxItem,
  {
    ref,
    className: cn(
      "relative",
      "flex",
      "items-center",
      "h-6",
      "pl-8",
      "pr-4",
      "font-size-11",
      "text-figma-menu",
      "cursor-default",
      "select-none",
      "outline-none",
      "hover:bg-figma-menu-selected",
      "focus:bg-figma-menu-selected",
      "data-[disabled]:pointer-events-none data-[disabled]:text-figma-disabled",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "i-mdi-check-bold absolute left-2 h-3 w-4" }),
      children
    ]
  }
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  DropdownMenuPrimitive.RadioItem,
  {
    ref,
    className: cn(
      "relative",
      "flex",
      "items-center",
      "h-6",
      "pl-8",
      "pr-4",
      "font-size-11",
      "text-figma-menu",
      "cursor-default",
      "select-none",
      "outline-none",
      "hover:bg-figma-menu-selected",
      "focus:bg-figma-menu-selected",
      "data-[disabled]:pointer-events-none data-[disabled]:text-figma-disabled",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "absolute left-2 w-4 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "i-mdi-circle-medium size-3" }) }),
      children
    ]
  }
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Label,
  {
    ref,
    className: cn(
      "px-8",
      "py-1",
      "font-size-11",
      "text-figma-menu-secondary",
      "font-medium",
      className
    ),
    ...props
  }
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Separator,
  {
    ref,
    className: cn("border-figma-menu my-2 h-[1px] w-full border-t", className),
    ...props
  }
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

export { DropdownMenuArrow as Arrow, DropdownMenuCheckboxItem as CheckboxItem, DropdownMenuContent as Content, DropdownMenuGroup as Group, DropdownMenuItem as Item, DropdownMenuLabel as Label, DropdownMenuRadioGroup as RadioGroup, DropdownMenuRadioItem as RadioItem, DropdownMenuRoot as Root, DropdownMenuSeparator as Separator, DropdownMenuSub as Sub, DropdownMenuSubContent as SubContent, DropdownMenuSubTrigger as SubTrigger, DropdownMenuTrigger as Trigger };