{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-base-dialog",
  "title": "Base Dialog",
  "description": "A popup that opens on top of the entire page.",
  "dependencies": [
    "motion",
    "@base-ui-components/react"
  ],
  "registryDependencies": [
    "@animate-ui/hooks-use-controlled-state",
    "@animate-ui/lib-get-strict-context"
  ],
  "files": [
    {
      "path": "registry/primitives/base/dialog/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui-components/react/dialog';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype DialogContextType = {\n  isOpen: boolean;\n  setIsOpen: DialogProps['onOpenChange'];\n};\n\nconst [DialogProvider, useDialog] =\n  getStrictContext<DialogContextType>('DialogContext');\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;\n\nfunction Dialog(props: DialogProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DialogProvider value={{ isOpen, setIsOpen }}>\n      <DialogPrimitive.Root\n        data-slot=\"dialog\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DialogProvider>\n  );\n}\n\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\ntype DialogPortalProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n  const { isOpen } = useDialog();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DialogPrimitive.Portal\n          data-slot=\"dialog-portal\"\n          keepMounted\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogBackdropProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Backdrop>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogBackdrop({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogBackdropProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-backdrop\"\n      render={\n        <motion.div\n          key=\"dialog-backdrop\"\n          initial={{ opacity: 0, filter: 'blur(4px)' }}\n          animate={{ opacity: 1, filter: 'blur(0px)' }}\n          exit={{ opacity: 0, filter: 'blur(4px)' }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogPopupProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogPopup({\n  from = 'top',\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogPopupProps) {\n  const initialRotation =\n    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';\n  const isVertical = from === 'top' || from === 'bottom';\n  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';\n\n  return (\n    <DialogPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"dialog-popup\"\n          data-slot=\"dialog-popup\"\n          initial={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          animate={{\n            opacity: 1,\n            filter: 'blur(0px)',\n            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,\n          }}\n          exit={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n  return <div data-slot=\"dialog-header\" {...props} />;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n  return <div data-slot=\"dialog-footer\" {...props} />;\n}\n\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction DialogTitle(props: DialogTitleProps) {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" {...props} />;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n  typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description data-slot=\"dialog-description\" {...props} />\n  );\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogBackdrop,\n  DialogClose,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogBackdropProps,\n  type DialogPopupProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/primitives/base/dialog.tsx"
    }
  ],
  "type": "registry:ui"
}