@thinkbuff/figma-react/dist/components/sheet/sheet.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 { cva } from 'class-variance-authority';
import { cn } from '../../utils/cn.mjs';

const SheetRoot = DialogPrimitive.Root;
const SheetTrigger = DialogPrimitive.Trigger;
const SheetClose = DialogPrimitive.Close;
const SheetPortal = DialogPrimitive.Portal;
const SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Overlay,
  {
    ref,
    className: cn(
      "fixed",
      "inset-0",
      "z-50",
      "bg-black/50",
      "backdrop-blur-2",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
      className
    ),
    ...props
  }
));
SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
const sheetVariants = cva(
  [
    "fixed",
    "z-50",
    "bg-figma",
    "border-solid",
    "border-figma",
    "focus:outline-none",
    "focus-visible:outline-none",
    "transition-all",
    "ease-in-out",
    "data-[state=open]:animate-in data-[state=open]:animate-duration-240",
    "data-[state=closed]:animate-out data-[state=closed]:animate-duration-120"
  ],
  {
    variants: {
      side: {
        top: [
          "inset-x-0",
          "top-0",
          "border-b",
          "data-[state=open]:slide-in-from-top",
          "data-[state=closed]:slide-out-to-top"
        ],
        bottom: [
          "inset-x-0",
          "bottom-0",
          "border-t",
          "data-[state=open]:slide-in-from-bottom",
          "data-[state=closed]:slide-out-to-bottom"
        ],
        left: [
          "inset-y-0",
          "left-0",
          "h-full",
          "border-r",
          "data-[state=open]:slide-in-from-left",
          "data-[state=closed]:slide-out-to-left"
        ],
        right: [
          "inset-y-0",
          "right-0",
          "h-full",
          "border-l",
          "data-[state=open]:slide-in-from-right",
          "data-[state=closed]:slide-out-to-right"
        ]
      }
    },
    defaultVariants: {
      side: "bottom"
    }
  }
);
const SheetContent = forwardRef(({ className, children, container, side, ...props }, ref) => {
  return /* @__PURE__ */ jsxs(SheetPortal, { container, children: [
    /* @__PURE__ */ jsx(SheetOverlay, {}),
    /* @__PURE__ */ jsx(
      DialogPrimitive.Content,
      {
        ref,
        className: cn(sheetVariants({ side }), className),
        ...props,
        children
      }
    )
  ] });
});
SheetContent.displayName = DialogPrimitive.Content.displayName;
const SheetHeader = ({
  className,
  ...props
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: cn(
      "flex",
      "items-center",
      "px-4",
      "text-left",
      "min-h-10",
      "border-b",
      "border-solid",
      "border-figma",
      className
    ),
    ...props
  }
);
SheetHeader.displayName = "SheetHeader";
const SheetFooter = ({
  className,
  ...props
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: cn(
      "flex",
      "items-center",
      "px-4",
      "text-left",
      "min-h-10",
      "border-t",
      "border-solid",
      "border-figma",
      className
    ),
    ...props
  }
);
SheetFooter.displayName = "SheetFooter";
const SheetTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Title,
  {
    ref,
    className: cn("font-size-12", "text-figma", "font-semibold", className),
    ...props
  }
));
SheetTitle.displayName = DialogPrimitive.Title.displayName;
const SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DialogPrimitive.Description,
  {
    ref,
    className: cn("text-figma-secondary", className),
    ...props
  }
));
SheetDescription.displayName = DialogPrimitive.Description.displayName;

export { SheetClose as Close, SheetContent as Content, SheetDescription as Description, SheetFooter as Footer, SheetHeader as Header, SheetOverlay as Overlay, SheetPortal as Portal, SheetRoot as Root, SheetTitle as Title, SheetTrigger as Trigger };