{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json",
    "https://usva.build/r/overlay-core.json"
  ],
  "files": [
    {
      "path": "dialog.tsx",
      "target": "components/ui/dialog.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Dialog as Base } from \"@base-ui/react/dialog\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  type CardHighlight,\n  type CardSurface,\n  SURFACE_ELEVATED,\n  SURFACE_SKIN,\n} from \"./card\";\nimport { useScopedTheme } from \"./use-scoped-theme\";\n\nexport type DialogProps = Base.Root.Props;\n\nconst DialogModalContext = React.createContext<boolean | \"trap-focus\">(true);\n\nfunction DialogRoot({ modal = true, ...props }: DialogProps) {\n  return (\n    <DialogModalContext.Provider value={modal}>\n      <Base.Root modal={modal} {...props} />\n    </DialogModalContext.Provider>\n  );\n}\nDialogRoot.displayName = \"Dialog\";\n\nexport const DialogTrigger = Base.Trigger;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<\n  typeof Base.Popup\n> & {\n  backdropClassName?: string;\n  /** How the modal sits above the scrim. Defaults to elevated. */\n  surface?: CardSurface;\n  /** Accent treatment, shared with Card: a wash, a top edge, or a glow ring. */\n  highlight?: CardHighlight;\n};\n\nexport const DialogContent = React.forwardRef<\n  HTMLDivElement,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      backdropClassName,\n      surface = \"elevated\",\n      highlight = \"none\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const modal = React.useContext(DialogModalContext);\n    const [probe, scopedTheme] = useScopedTheme();\n    return (\n      <>\n        <span ref={probe} hidden />\n        <Base.Portal>\n          {modal === true ? (\n            <Base.Backdrop\n              data-theme={scopedTheme}\n              className={cn(\n                \"fixed inset-0 z-overlay transition-opacity duration-base motion-reduce:transition-none\",\n                \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n                surface === \"glass\"\n                  ? \"bg-scrim/40 backdrop-blur-[3px]\"\n                  : \"bg-scrim backdrop-blur-sm\",\n                backdropClassName,\n              )}\n            />\n          ) : null}\n          <Base.Popup\n            ref={ref}\n            data-theme={scopedTheme}\n            data-surface={surface}\n            data-highlight={highlight !== \"none\" ? highlight : undefined}\n            className={cn(\n              \"fixed left-1/2 top-1/2 z-overlay w-full max-w-md -translate-x-1/2 -translate-y-1/2\",\n              \"isolate rounded-2xl border border-border p-6 text-ink\",\n              SURFACE_SKIN[surface],\n              highlight === \"ring\"\n                ? \"glow-ring\"\n                : SURFACE_ELEVATED[surface] && \"shadow-overlay\",\n              highlight === \"wash\" && \"wash-accent\",\n              highlight === \"edge\" &&\n                \"after:absolute after:inset-x-6 after:top-0 after:h-px after:hairline-accent\",\n              \"transition-enter duration-[350ms] ease-spring motion-reduce:transition-none motion-reduce:transform-none\",\n              \"data-[starting-style]:opacity-0 data-[starting-style]:blur-[4px] data-[starting-style]:scale-[0.96] data-[starting-style]:-translate-x-1/2 data-[starting-style]:-translate-y-[calc(50%-0.75rem)]\",\n              \"data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:-translate-x-1/2 data-[ending-style]:-translate-y-[calc(50%-0.25rem)] data-[ending-style]:duration-base data-[ending-style]:ease-soft\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </Base.Popup>\n        </Base.Portal>\n      </>\n    );\n  },\n);\nDialogContent.displayName = \"DialogContent\";\n\nexport const DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentPropsWithoutRef<typeof Base.Title>\n>(({ className, ...props }, ref) => (\n  <Base.Title\n    ref={ref}\n    className={cn(\n      \"text-balance text-lg font-semibold tracking-[-0.01em] text-ink\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\nexport const DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<typeof Base.Description>\n>(({ className, ...props }, ref) => (\n  <Base.Description\n    ref={ref}\n    className={cn(\"text-pretty text-sm text-muted\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport const DialogClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof Base.Close>\n>(({ className, ...props }, ref) => (\n  <Base.Close\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center rounded-md text-muted outline-none\",\n      \"transition-control duration-fast ease-soft\",\n      \"hover:bg-surface-2 hover:text-ink active:scale-[0.96] focus-visible:ring-focus\",\n      \"motion-reduce:transition-none motion-reduce:transform-none\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogClose.displayName = \"DialogClose\";\n\nexport const Dialog = Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n"
    }
  ]
}