@thinkbuff/figma-react/dist/components/dialog/dialog.mjs

A Figma React UI components for creating plugins and widgets

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

const DialogRoot = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Overlay,
  {
    ref,
    className: cn(
      "fixed",
      "inset-0",
      "z-50",
      "bg-black/50",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
      className
    ),
    ...props
  }
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = forwardRef(({ className, container, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { container, children: [
  /* @__PURE__ */ jsx(DialogOverlay, {}),
  /* @__PURE__ */ jsx(
    DialogPrimitive.Content,
    {
      ref,
      className: cn(
        "fixed",
        "grid",
        "w-full",
        "max-w-80",
        "left-1/2",
        "top-1/2",
        "-translate-x-1/2",
        "-translate-y-1/2",
        "z-50",
        "rounded-0.5",
        "bg-figma",
        "p-6",
        "shadow-lg",
        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-12/25",
        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-12/25",
        "animate-duration-200",
        className
      ),
      ...props
    }
  )
] }));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
  "div",
  {
    ref,
    className: cn("flex", "items-center", "pb-6", className),
    ...props,
    children
  }
));
DialogHeader.displayName = "DialogHeader";
const DialogFooter = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
  "div",
  {
    ref,
    className: cn("flex", "items-center", "pt-6", className),
    ...props,
    children
  }
));
DialogFooter.displayName = "DialogFooter";
const DialogTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Title,
  {
    ref,
    className: cn("text-figma", "font-size-14", "font-medium", className),
    ...props
  }
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Description,
  {
    ref,
    className: cn("text-figma", "font-size-11", className),
    ...props
  }
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

export { DialogClose as Close, DialogContent as Content, DialogDescription as Description, DialogFooter as Footer, DialogHeader as Header, DialogOverlay as Overlay, DialogPortal as Portal, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger };