{
  "name": "dialog",
  "type": "registry:ui",
  "title": "Dialog",
  "description": "Dialog focuses attention on a decision, short form, or other modal task.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/button",
    "@siteplane/scroll-area"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0",
    "lucide-react@1.18.0"
  ],
  "files": [
    {
      "path": "src/components/ui/dialog.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { SiteplaneUIPortalScope } from \"@/components/ui/siteplane-provider\";\nimport {\n  overlayBackdropClassName,\n  overlayDialogPopupClassName,\n  overlayDialogPopupMobileStickClassName,\n  overlayViewportClassName,\n  overlayViewportMobileStickClassName,\n} from \"@/components/ui/overlay-shared\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(overlayBackdropClassName, className)}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(overlayViewportClassName, className)}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  portalProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n  portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal {...portalProps}>\n      <SiteplaneUIPortalScope>\n        <DialogBackdrop />\n        <DialogViewport\n          className={cn(\n            bottomStickOnMobile && overlayViewportMobileStickClassName,\n          )}\n        >\n          <DialogPrimitive.Popup\n            className={cn(\n              overlayDialogPopupClassName,\n              \"outline-none\",\n              bottomStickOnMobile && overlayDialogPopupMobileStickClassName,\n              className,\n            )}\n            data-slot=\"dialog-popup\"\n            {...props}\n          >\n            {children}\n            {showCloseButton && (\n              <DialogPrimitive.Close\n                aria-label=\"Close\"\n                className=\"absolute end-2 top-2\"\n                render={<Button size=\"icon\" variant=\"ghost\" />}\n                {...closeProps}\n              >\n                <XIcon />\n              </DialogPrimitive.Close>\n            )}\n          </DialogPrimitive.Popup>\n        </DialogViewport>\n      </SiteplaneUIPortalScope>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n"
    },
    {
      "path": "src/components/ui/overlay-shared.ts",
      "type": "registry:ui",
      "content": "// Geteilte Shell-Klassen der zentrierten Overlays. Dialog, AlertDialog und\n// Command (CommandDialog) re-implementierten zuvor identische Backdrop-/Viewport-/\n// Popup-Strings. Jetzt liegt jede Klasse genau einmal hier, sodass eine Aenderung\n// alle Overlays gleichzeitig erreicht. Literale Strings -> Tailwind-Scan-sicher.\n\nimport { cn } from \"@/lib/utils\";\nimport { surfaceClassNames } from \"@/components/ui/surface\";\n\nexport const overlayBackdropClassName =\n  \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-(--motion-duration-overlay) ease-(--motion-ease-apple-out) data-ending-style:opacity-0 data-starting-style:opacity-0\";\n\nexport const overlayViewportClassName =\n  \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\";\n\nexport const overlayViewportMobileStickClassName =\n  \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\";\n\n// Gemeinsame Popup-Chrome von Dialog + AlertDialog. Dialog ergaenzt `outline-none`\n// (es traegt den schliessbaren Close-Button), AlertDialog nicht.\nexport const overlayDialogPopupClassName = cn(\n  surfaceClassNames.overlay,\n  \"row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl opacity-[calc(1-var(--nested-dialogs))] siteplane-dialog-motion will-change-transform before:rounded-[inherit] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98\",\n);\n\nexport const overlayDialogPopupMobileStickClassName =\n  \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\";\n"
    }
  ],
  "categories": [
    "overlays"
  ],
  "docs": "# Dialog\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nDialog focuses attention on a decision, short form, or other modal task. Use\nAlert Dialog for destructive confirmation.\n\n## Import\n\n`import { Dialog, DialogClose, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPopup, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";`\n\n## Public API\n\n- Compose Trigger, Popup, Title, Description, optional Panel and Footer, and\n  explicit actions.\n- `DialogCreateHandle` supports one dialog with detached triggers or\n  imperative opening.\n- `DialogPopup closeProps` customizes the built-in close Button while\n  preserving it. Use `showCloseButton={false}` only when another clear close\n  action exists.\n- `DialogContent` is a compatibility alias for `DialogPopup`; use\n  `DialogPopup` in new code.\n\n## Public Motion\n\n- Backdrop uses the overlay duration and opacity transition.\n- Popup uses native dialog motion and the modal duration.\n- Do not add a second Dialog animation around the popup.\n- Global reduced-motion behavior removes unnecessary transforms.\n\n## Public Accessibility\n\n- Every Dialog requires a concise `DialogTitle` and should include a\n  `DialogDescription` when the task needs explanation.\n- Preserve modal focus trapping, initial focus, Escape, outside-click behavior,\n  and focus restoration.\n- All close and submit controls must be real Button components with accessible\n  names.\n- If the built-in close Button is hidden, provide an equally discoverable close\n  action.\n\n## Public Agent Guidance\n\n- Use Dialog for focused modal tasks and Alert Dialog for destructive\n  confirmation.\n- Use canonical `DialogPopup` in new code.\n- Preserve native focus, dismissal, close Button, and motion behavior.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/overlays/dialog)\n\n- [Registry source](https://ui.siteplane.io/r/dialog.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/overlays/dialog",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}