{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-modal-dependencies",
  "title": "Responsive Modal Dependencies",
  "description": "component for the Responsive Modal Dependencies",
  "dependencies": [
    "@radix-ui/react-dialog",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "app/registry/spectrumui/responsive-modal-dependencies.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst ResponsiveModal = DialogPrimitive.Root;\n\nconst ResponsiveModalTrigger = DialogPrimitive.Trigger;\n\nconst ResponsiveModalClose = DialogPrimitive.Close;\n\nconst ResponsiveModalPortal = DialogPrimitive.Portal;\n\nconst ResponsiveModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n));\nResponsiveModalOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst ResponsiveModalVariants = cva(\n  cn(\n    \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto\",\n    \"lg:left-[50%] lg:top-[50%] lg:grid lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%] lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0 lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:data-[state=closed]:slide-out-to-left-1/2 lg:data-[state=closed]:slide-out-to-top-[48%] lg:data-[state=open]:slide-in-from-left-1/2 lg:data-[state=open]:slide-in-from-top-[48%] lg:rounded-xl\",\n  ),\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b rounded-b-xl max-h-[90%] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t lg:h-fit max-h-[90%] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n    },\n  },\n);\n\ninterface ResponsiveModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof ResponsiveModalVariants> {}\n\nconst ResponsiveModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ResponsiveModalContentProps\n>(({ side = \"bottom\", className, children, ...props }, ref) => (\n  <ResponsiveModalPortal>\n    <ResponsiveModalOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(ResponsiveModalVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <ResponsiveModalClose className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </ResponsiveModalClose>\n    </DialogPrimitive.Content>\n  </ResponsiveModalPortal>\n));\nResponsiveModalContent.displayName = DialogPrimitive.Content.displayName;\n\nconst ResponsiveModalHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nResponsiveModalHeader.displayName = \"ResponsiveModalHeader\";\n\nconst ResponsiveModalFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nResponsiveModalFooter.displayName = \"ResponsiveModalFooter\";\n\nconst ResponsiveModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n));\nResponsiveModalTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst ResponsiveModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nResponsiveModalDescription.displayName =\n  DialogPrimitive.Description.displayName;\n\nexport {\n  ResponsiveModal,\n  ResponsiveModalPortal,\n  ResponsiveModalOverlay,\n  ResponsiveModalTrigger,\n  ResponsiveModalClose,\n  ResponsiveModalContent,\n  ResponsiveModalHeader,\n  ResponsiveModalFooter,\n  ResponsiveModalTitle,\n  ResponsiveModalDescription,\n};\n",
      "type": "registry:component",
      "target": "components/spectrumui/responsive-modal-dependencies.tsx"
    }
  ],
  "type": "registry:component"
}