{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"alert-dialog","title":"Alert Dialog","description":"Modal confirmation dialog for consequential actions.","dependencies":["@base-ui/react@1.7.0"],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/alert-dialog/alert-dialog.tsx","content":"\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { SiteplaneUIPortalScope } from \"../../system/provider/siteplane-ui-provider\";\nimport { surfaceClassNames } from \"../../system/styles/surface\";\nimport { cn, type WithStringClassName } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n  AlertDialogPrimitive.createHandle;\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n  AlertDialogPrimitive.Root;\n// Base UI's own Portal type, with className narrowed to a string.\nexport const AlertDialogPortal: React.ForwardRefExoticComponent<\n  WithStringClassName<Omit<AlertDialogPrimitive.Portal.Props, \"ref\">> &\n    React.RefAttributes<HTMLDivElement>\n> = AlertDialogPrimitive.Portal;\n\nexport function AlertDialogTrigger(\n  props: WithStringClassName<AlertDialogPrimitive.Trigger.Props>,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Trigger\n      data-slot=\"alert-dialog-trigger\"\n      {...props}\n      className={cn(slotClass(\"alert-dialog-trigger\", props), props.className)}\n    />\n  );\n}\nexport function AlertDialogBackdrop({\n  className,\n  ...props\n}: WithStringClassName<AlertDialogPrimitive.Backdrop.Props>): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      className={cn(\n        slotClass(\"alert-dialog-backdrop\", props),\n        surfaceClassNames.overlayBackdrop,\n        className,\n      )}\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\nexport function AlertDialogViewport({\n  className,\n  ...props\n}: WithStringClassName<AlertDialogPrimitive.Viewport.Props>): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Viewport\n      className={cn(\n        slotClass(\"alert-dialog-viewport\", props),\n        surfaceClassNames.dialogOverlayViewport,\n        className,\n      )}\n      data-slot=\"alert-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n/**\n * The width of an AlertDialog popup on the modal scale, as Dialog's: `xs`\n * 400 px, `sm` 440 px (the default), `md` 600 px and `lg` 880 px.\n */\nexport type AlertDialogSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport function AlertDialogPopup({\n  className,\n  size = \"sm\",\n  portalProps,\n  ...props\n}: WithStringClassName<AlertDialogPrimitive.Popup.Props> & {\n  /**\n   * The popup width, as Dialog's: `xs` 400 px, `sm` 440 px (the default),\n   * `md` 600 px or `lg` 880 px, from the `sm` breakpoint up. A `max-w-*`\n   * class in `className` still wins.\n   */\n  size?: AlertDialogSize;\n  portalProps?: WithStringClassName<AlertDialogPrimitive.Portal.Props>;\n}): React.ReactElement {\n  return (\n    <AlertDialogPortal {...portalProps}>\n      <SiteplaneUIPortalScope>\n        <AlertDialogBackdrop />\n        <AlertDialogViewport>\n          {/* Small screens show the alert dialog at the bottom edge, where it\n              slides in. */}\n          <AlertDialogPrimitive.Popup\n            className={cn(\n              slotClass(\"alert-dialog-popup\", props),\n              surfaceClassNames.dialogOverlayPopup,\n              surfaceClassNames.dialogOverlayPopupMobileStick,\n              className,\n            )}\n            data-slot=\"alert-dialog-popup\"\n            data-width={size}\n            {...props}\n          />\n        </AlertDialogViewport>\n      </SiteplaneUIPortalScope>\n    </AlertDialogPortal>\n  );\n}\nexport function AlertDialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      slotClass(\"alert-dialog-header\", props, render),\n      \"flex-col\",\n      className,\n    ),\n    \"data-slot\": \"alert-dialog-header\",\n  };\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\nexport function AlertDialogFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      // Actions that do not fit wrap onto another row with the same gap\n      // instead of overflowing a narrow popup.\n      slotClass(\"alert-dialog-footer\", props, render),\n      \"flex flex-wrap\",\n      // Actions right after the text sit 24 px below it, as in every dialog\n      // without content (S12): 8 px here plus the popup's 16 px gap.\n      \"[[data-slot=alert-dialog-header]+&]:mt-2\",\n      className,\n    ),\n    \"data-slot\": \"alert-dialog-footer\",\n  };\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\nexport function AlertDialogTitle({\n  className,\n  ...props\n}: WithStringClassName<AlertDialogPrimitive.Title.Props>): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\n        slotClass(\"alert-dialog-title\", props),\n        \"font-heading wrap-anywhere\",\n        className,\n      )}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\nexport function AlertDialogDescription({\n  className,\n  ...props\n}: WithStringClassName<AlertDialogPrimitive.Description.Props>): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\n        slotClass(\"alert-dialog-description\", props),\n        \"wrap-anywhere\",\n        className,\n      )}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\nexport function AlertDialogClose(\n  props: WithStringClassName<AlertDialogPrimitive.Close.Props>,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-close\"\n      {...props}\n      className={cn(slotClass(\"alert-dialog-close\", props), props.className)}\n    />\n  );\n}\n\n// AlertDialogOverlay and AlertDialogContent are the shadcn names of\n// AlertDialogBackdrop and AlertDialogPopup.\nexport {\n  AlertDialogPrimitive,\n  AlertDialogBackdrop as AlertDialogOverlay,\n  AlertDialogPopup as AlertDialogContent,\n};\n","type":"registry:ui","target":"~/src/siteplane/components/alert-dialog/alert-dialog.tsx"},{"path":"packages/ui/src/components/alert-dialog/index.ts","content":"export * from \"./alert-dialog\";\n","type":"registry:ui","target":"~/src/siteplane/components/alert-dialog/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/alert-dialog.md","categories":["Overlays & disclosure"],"meta":{"avoidWhen":["Avoid for a task with fields or several steps; use Dialog.","Avoid for a message that asks for no decision; use Alert or Toast."],"description":"Modal confirmation dialog for consequential actions.","knownLimitations":["The dialog does not run or await the confirmed action. For an asynchronous confirmation, keep the root controlled and close it after the request succeeds."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["alert-dialog","alert dialog","alert","dialog"],"useWhen":["Use for a decision people must make before they continue, such as deleting a project or discarding changes."]}}