{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-headless-dialog",
  "title": "Dialog",
  "description": "A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@animate-ui/primitives-headless-dialog"
  ],
  "files": [
    {
      "path": "registry/components/headless/dialog/index.tsx",
      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogPanel as DialogPanelPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogBackdrop as DialogBackdropPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogPanelProps as DialogPanelPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogBackdropProps as DialogBackdropPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/dialog';\nimport { cn } from '@/lib/utils';\nimport { XIcon } from 'lucide-react';\n\ntype DialogProps<TTag extends React.ElementType = 'div'> =\n  DialogPrimitiveProps<TTag>;\n\nfunction Dialog<TTag extends React.ElementType = 'div'>(\n  props: DialogProps<TTag>,\n) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogCloseProps<TTag extends React.ElementType = 'button'> =\n  DialogClosePrimitiveProps<TTag>;\n\nfunction DialogClose<TTag extends React.ElementType = 'button'>(\n  props: DialogCloseProps<TTag>,\n) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogBackdropProps<TTag extends React.ElementType = typeof motion.div> =\n  DialogBackdropPrimitiveProps<TTag>;\n\nfunction DialogBackdrop<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: DialogBackdropProps<TTag>) {\n  return (\n    <DialogBackdropPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  DialogPanelPrimitiveProps<TTag> & {\n    showCloseButton?: boolean;\n  };\n\nfunction DialogPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPanelProps<TTag>) {\n  return (\n    <>\n      <DialogBackdrop />\n      <DialogPanelPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {(bag) => (\n          <>\n            {typeof children === 'function' ? children(bag) : children}\n            {showCloseButton && (\n              <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n                <XIcon />\n                <span className=\"sr-only\">Close</span>\n              </DialogClosePrimitive>\n            )}\n          </>\n        )}\n      </DialogPanelPrimitive>\n    </>\n  );\n}\n\ntype DialogHeaderProps<TTag extends React.ElementType = 'div'> =\n  DialogHeaderPrimitiveProps<TTag>;\n\nfunction DialogHeader<TTag extends React.ElementType = 'div'>(\n  props: DialogHeaderProps<TTag>,\n) {\n  const { as = 'div', className, ...rest } = props;\n\n  return (\n    <DialogHeaderPrimitive\n      as={as}\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...rest}\n    />\n  );\n}\n\ntype DialogFooterProps<TTag extends React.ElementType = 'div'> =\n  DialogFooterPrimitiveProps<TTag>;\n\nfunction DialogFooter<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: DialogFooterProps<TTag>) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps<TTag extends React.ElementType = 'h2'> =\n  DialogTitlePrimitiveProps<TTag>;\n\nfunction DialogTitle<TTag extends React.ElementType = 'h2'>({\n  className,\n  ...props\n}: DialogTitleProps<TTag>) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps<TTag extends React.ElementType = 'div'> =\n  DialogDescriptionPrimitiveProps<TTag>;\n\nfunction DialogDescription<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: DialogDescriptionProps<TTag>) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogPanel,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogCloseProps,\n  type DialogPanelProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/headless/dialog.tsx"
    }
  ],
  "type": "registry:ui"
}