nanocode/RetroUI/public/r/dialog.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:component",
  "title": "Dialog",
  "description": "An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨",
  "dependencies": [
    "@radix-ui/react-dialog",
    "@radix-ui/react-visually-hidden",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/retroui/Dialog.tsx",
      "content": "\"use client\";\n\nimport * as ReactDialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes, ReactNode } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { X } from \"lucide-react\";\n\nconst Dialog = ReactDialog.Root;\nconst DialogTrigger = ReactDialog.Trigger;\n\nconst overlayVariants = cva(\n  ` fixed bg-black/80 font-head\n    data-[state=open]:fade-in-0\n    data-[state=open]:animate-in \n    data-[state=closed]:animate-out \n    data-[state=closed]:fade-out-0 \n  `,\n  {\n    variants: {\n      variant: {\n        default: \"inset-0 z-50 bg-black/85\",\n        none: \"fixed bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ninterface IDialogBackgroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof overlayVariants> {}\n\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(\n  function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {\n    const { variant = \"default\", className, ...props } = inputProps;\n\n    return (\n      <ReactDialog.Overlay\n        className={cn(overlayVariants({ variant }), className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nDialogBackdrop.displayName = \"DialogBackdrop\";\n\nconst dialogVariants = cva(\n  `fixed left-[50%] top-[50%] z-50 grid rounded overflow-hidden w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-background shadow-lg duration-200 \n  data-[state=open]:animate-in \n  data-[state=open]:fade-in-0 \n  data-[state=open]:zoom-in-95 \n  data-[state=closed]:animate-out \n  data-[state=closed]:fade-out-0 \n  data-[state=closed]:zoom-out-95`,\n  {\n    variants: {\n      size: {\n        auto: \"max-w-fit\",\n        sm: \"lg:max-w-[30%]\",\n        md: \"lg:max-w-[40%]\",\n        lg: \"lg:max-w-[50%]\",\n        xl: \"lg:max-w-[60%]\",\n        \"2xl\": \"lg:max-w-[70%]\",\n        \"3xl\": \"lg:max-w-[80%]\",\n        \"4xl\": \"lg:max-w-[90%]\",\n        screen: \"max-w-[100%]\",\n      },\n    },\n    defaultVariants: {\n      size: \"auto\",\n    },\n  },\n);\n\ninterface IDialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogVariants> {\n  overlay?: IDialogBackgroupProps;\n}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(\n  function DialogContent(inputProps: IDialogContentProps, forwardedRef) {\n    const {\n      children,\n      size = \"auto\",\n      className,\n      overlay,\n      ...props\n    } = inputProps;\n\n    return (\n      <ReactDialog.Portal>\n        <DialogBackdrop {...overlay} />\n        <ReactDialog.Content\n          className={cn(dialogVariants({ size }), className)}\n          ref={forwardedRef}\n          {...props}\n        >\n          <VisuallyHidden>\n            <ReactDialog.Title />\n          </VisuallyHidden>\n          <div className=\"flex flex-col relative\">{children}</div>\n        </ReactDialog.Content>\n      </ReactDialog.Portal>\n    );\n  },\n);\nDialogContent.displayName = \"DialogContent\";\n\ninterface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}\nconst DialogDescription = ({\n  children,\n  className,\n  ...props\n}: IDialogDescriptionProps) => {\n  return (\n    <ReactDialog.Description className={cn(className)} {...props}>\n      {children}\n    </ReactDialog.Description>\n  );\n};\n\nconst dialogFooterVariants = cva(\n  \"flex items-center justify-end border-t-2 min-h-12 gap-4 px-4 py-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n      },\n      position: {\n        fixed: \"sticky bottom-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n    },\n  },\n);\n\nexport interface IDialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogFooterVariants> {}\n\nconst DialogFooter = ({\n  children,\n  className,\n  position,\n  variant,\n  ...props\n}: IDialogFooterProps) => {\n  return (\n    <div\n      className={cn(dialogFooterVariants({ position, variant }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst dialogHeaderVariants = cva(\n  \"flex items-center justify-between border-b-2 px-4 min-h-12\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n      },\n      position: {\n        fixed: \"sticky top-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      position: \"static\",\n    },\n  },\n);\n\nconst DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {\n  return (\n    <>\n      {children}\n      <DialogTrigger title=\"Close pop-up\" className=\"cursor-pointer\" asChild>\n        <X />\n      </DialogTrigger>\n    </>\n  );\n};\n\ninterface IDialogHeaderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogHeaderVariants>,\n    ReactDialog.DialogTitleProps {}\n\nconst DialogHeader = ({\n  children,\n  className,\n  position,\n  variant,\n  asChild,\n  ...props\n}: IDialogHeaderProps) => {\n  return (\n    <div\n      className={cn(dialogHeaderVariants({ position, variant }), className)}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>\n      )}\n    </div>\n  );\n};\n\nconst DialogComponent = Object.assign(Dialog, {\n  Trigger: DialogTrigger,\n  Header: DialogHeader,\n  Content: DialogContent,\n  Description: DialogDescription,\n  Footer: DialogFooter,\n});\n\nexport { DialogComponent as Dialog };\n",
      "type": "registry:component",
      "target": "components/retroui/Dialog.tsx"
    }
  ]
}