{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "A shadcn-style dialog component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react", "class-variance-authority"],
  "files": [
    {
      "path": "src/components/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@ark-ui/react/dialog\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport { type ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const Dialog = (props: DialogPrimitive.RootProps) => (\n  <DialogPrimitive.Root {...props} />\n);\n\nexport const DialogBackdrop = ({\n  className,\n  ...props\n}: DialogPrimitive.BackdropProps) => (\n  <DialogPrimitive.Backdrop\n    className={cn(\n      \"fixed inset-0 z-[calc(50+var(--layer-index,0))] bg-black/40 backdrop-blur-md transition-[opacity,backdrop-filter] duration-200 dark:bg-black/50 dark:backdrop-blur-lg data-[state=closed]:opacity-0 data-[state=open]:opacity-100 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:dark:bg-black/35\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nconst positionerVariants = cva(\n  \"fixed inset-0 z-[calc(50+var(--layer-index,0))] flex overscroll-y-none\",\n  {\n    defaultVariants: {\n      bottomStick: true,\n    },\n    variants: {\n      bottomStick: {\n        false: \"items-center justify-center p-4\",\n        true: \"items-end justify-center sm:items-center\",\n      },\n    },\n  },\n);\n\nconst contentVariants = cva(\n  \"relative z-[calc(50+var(--layer-index,0))] grid min-h-0 max-h-[min(calc(100dvh-2rem),var(--dialog-max-h,32rem))] w-full shrink-0 gap-4 overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-popover px-6 pt-6 pb-0 text-card-foreground shadow-lg outline-none transition-[opacity,transform] duration-150 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=open]:opacity-100 data-has-nested:data-[state=open]:scale-[calc(1-var(--nested-layer-count,0)*0.05)] max-sm:max-h-[min(calc(100dvh-1rem),var(--dialog-max-h,90dvh))] max-sm:rounded-b-none max-sm:rounded-t-xl sm:rounded-xl\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"max-w-lg\",\n        sm: \"max-w-sm gap-3 px-5 pt-5 pb-0 text-sm **:data-[slot=dialog-title]:text-base\",\n      },\n    },\n  },\n);\n\nexport type DialogPopupProps = DialogPrimitive.ContentProps & {\n  backdropClassName?: string;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.CloseTriggerProps;\n  positionerClassName?: string;\n  showCloseButton?: boolean;\n  size?: VariantProps<typeof contentVariants>[\"size\"];\n};\n\nexport const DialogTrigger = ({\n  className,\n  ...props\n}: DialogPrimitive.TriggerProps) => {\n  return <DialogPrimitive.Trigger className={cn(className)} {...props} />;\n};\n\nexport const DialogPopup = ({\n  backdropClassName,\n  bottomStickOnMobile = true,\n  children,\n  className,\n  closeProps,\n  positionerClassName,\n  showCloseButton = true,\n  size = \"default\",\n  ...contentProps\n}: DialogPopupProps) => {\n  const {\n    className: closeClassName,\n    children: closeChildren,\n    ...closeRest\n  } = closeProps ?? {};\n\n  return (\n    <Portal>\n      <DialogBackdrop className={backdropClassName} />\n      <DialogPrimitive.Positioner\n        className={cn(\n          positionerVariants({ bottomStick: bottomStickOnMobile }),\n          positionerClassName,\n        )}\n      >\n        <DialogPrimitive.Content\n          className={cn(contentVariants({ size }), className)}\n          {...contentProps}\n        >\n          {showCloseButton ? (\n            <DialogPrimitive.CloseTrigger\n              aria-label=\"Close\"\n              className={cn(\n                \"absolute top-4 inset-e-4 z-10 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n                closeClassName,\n              )}\n              {...closeRest}\n            >\n              {closeChildren ?? <XIcon className=\"size-4\" />}\n            </DialogPrimitive.CloseTrigger>\n          ) : null}\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Positioner>\n    </Portal>\n  );\n};\n\nexport const DialogHeader = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.div>) => (\n  <ark.div\n    className={cn(\"flex flex-col gap-2 text-center sm:text-start\", className)}\n    data-slot=\"dialog-header\"\n    {...props}\n  />\n);\n\nconst footerVariants = cva(\n  \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        bare: \"pb-4\",\n        default:\n          \"-mx-6 mt-2 border-border border-t bg-muted/40 px-6 py-4 sm:rounded-b-xl max-sm:rounded-b-none\",\n      },\n    },\n  },\n);\n\nexport const DialogFooter = ({\n  className,\n  variant,\n  ...props\n}: ComponentProps<\"div\"> & VariantProps<typeof footerVariants>) => (\n  <ark.div\n    className={cn(footerVariants({ variant }), className)}\n    data-slot=\"dialog-footer\"\n    {...props}\n  />\n);\n\nexport const DialogTitle = ({\n  className,\n  ...props\n}: DialogPrimitive.TitleProps) => (\n  <DialogPrimitive.Title\n    className={cn(\"font-semibold text-lg leading-none\", className)}\n    data-slot=\"dialog-title\"\n    {...props}\n  />\n);\n\nexport const DialogDescription = ({\n  className,\n  ...props\n}: DialogPrimitive.DescriptionProps) => (\n  <DialogPrimitive.Description\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    {...props}\n  />\n);\n\nconst panelMask =\n  \"supports-[mask-image:linear-gradient(white,transparent)]:[mask-image:linear-gradient(to_bottom,transparent,black_0.75rem,black_calc(100%-0.75rem),transparent)]\";\n\nexport const DialogPanel = ({\n  className,\n  scrollFade = false,\n  scrollable = false,\n  ...props\n}: ComponentProps<typeof ark.div> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n}) => (\n  <ark.div\n    className={cn(\n      \"flex min-h-0 w-full flex-1 flex-col gap-4\",\n      scrollable &&\n        \"overflow-y-auto overscroll-contain [scrollbar-gutter:stable]\",\n      scrollFade && panelMask,\n      className,\n    )}\n    data-slot=\"dialog-panel\"\n    {...props}\n  />\n);\n\nexport const DialogClose = ({\n  ...props\n}: DialogPrimitive.CloseTriggerProps) => {\n  return <DialogPrimitive.CloseTrigger {...props} />;\n};\n\nexport const DialogRootProvider = ({\n  ...props\n}: DialogPrimitive.RootProviderProps) => (\n  <DialogPrimitive.RootProvider {...props} />\n);\n\nexport const DialogContext = DialogPrimitive.Context;\n\nexport { useDialog, useDialogContext } from \"@ark-ui/react/dialog\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/dialog.tsx"
    }
  ],
  "type": "registry:ui"
}