{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "A dialog that confirms an action, on the dialog's surface.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json",
    "https://constella.aayush.cv/r/button.json",
    "https://constella.aayush.cv/r/dialog.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/primitives/button\";\nimport type { ButtonProps } from \"@/components/primitives/button\";\nimport { dialogStyles } from \"@/components/primitives/dialog\";\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { colors, radii, sizes, space } from \"@/lib/constella/tokens.stylex\";\n\nconst alertDialogSizes = [\"sm\", \"default\"] as const;\n\ntype AlertDialogSize = (typeof alertDialogSizes)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype AlertDialogContentProps = Styled<AlertDialogPrimitive.Popup.Props> & {\n  size?: AlertDialogSize;\n};\n\nconst inSmall = \":is([data-slot='alert-dialog-content'][data-size='sm'] *)\";\n\nconst styles = stylex.create({\n  // A small confirm centers its text over two equal buttons.\n  header: {\n    alignItems: { default: \"flex-start\", [inSmall]: \"center\" },\n    textAlign: { default: \"start\", [inSmall]: \"center\" },\n  },\n  footer: {\n    display: { default: \"flex\", [inSmall]: \"grid\" },\n    gridTemplateColumns: { default: null, [inSmall]: \"1fr 1fr\" },\n  },\n  media: {\n    alignItems: \"center\",\n    backgroundColor: colors.fill,\n    borderStartStartRadius: radii.sm,\n    borderStartEndRadius: radii.sm,\n    borderEndStartRadius: radii.sm,\n    borderEndEndRadius: radii.sm,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizes.media,\n    justifyContent: \"center\",\n    marginBlockEnd: space.xs,\n    width: sizes.media,\n  },\n});\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  sx,\n  ...props\n}: Styled<AlertDialogPrimitive.Trigger.Props>) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      data-slot=\"alert-dialog-trigger\"\n      {...props}\n      {...stylex.props(sx)}\n    />\n  );\n}\n\nfunction AlertDialogPortal({\n  sx,\n  ...props\n}: Styled<AlertDialogPrimitive.Portal.Props>) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...props}\n      {...stylex.props(sx)}\n    />\n  );\n}\n\nfunction AlertDialogBackdrop({\n  sx,\n  ...props\n}: Styled<AlertDialogPrimitive.Backdrop.Props>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n      {...stylex.props(dialogStyles.backdrop, sx)}\n    />\n  );\n}\n\n/** Renders the portal, backdrop, viewport and popup: a dialog's surface. */\nfunction AlertDialogContent({\n  size = \"default\",\n  sx,\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogPrimitive.Viewport\n        data-slot=\"alert-dialog-viewport\"\n        {...stylex.props(dialogStyles.viewport)}\n      >\n        <AlertDialogPrimitive.Popup\n          data-size={size}\n          data-slot=\"alert-dialog-content\"\n          {...props}\n          {...stylex.props(\n            dialogStyles.popup,\n            size === \"sm\" && dialogStyles.sm,\n            sx\n          )}\n        />\n      </AlertDialogPrimitive.Viewport>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      {...props}\n      {...stylex.props(dialogStyles.header, styles.header, sx)}\n    />\n  );\n}\n\nfunction AlertDialogMedia({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      {...props}\n      {...stylex.props(styles.media, sx)}\n    />\n  );\n}\n\nfunction AlertDialogFooter({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n      {...stylex.props(dialogStyles.footer, styles.footer, sx)}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  sx,\n  ...props\n}: Styled<AlertDialogPrimitive.Title.Props>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      {...props}\n      {...stylex.props(dialogStyles.title, sx)}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  sx,\n  ...props\n}: Styled<AlertDialogPrimitive.Description.Props>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      {...props}\n      {...stylex.props(dialogStyles.description, sx)}\n    />\n  );\n}\n\n/** The confirming button. It doesn't close the dialog: close it once the action is done. */\nfunction AlertDialogAction({ variant = \"primary\", ...props }: ButtonProps) {\n  return (\n    <Button data-slot=\"alert-dialog-action\" variant={variant} {...props} />\n  );\n}\n\nfunction AlertDialogCancel({\n  size = \"default\",\n  sx,\n  variant = \"outline\",\n  ...props\n}: Omit<AlertDialogPrimitive.Close.Props, \"className\" | \"render\" | \"style\"> &\n  Pick<ButtonProps, \"size\" | \"sx\" | \"variant\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      render={<Button size={size} sx={sx} variant={variant} />}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogBackdrop,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogPortal,\n  alertDialogSizes,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\nexport type { AlertDialogContentProps, AlertDialogSize };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/alert-dialog/index.md",
  "type": "registry:ui"
}