{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "author": "Matthew Blode",
  "description": "A modal dialog that interrupts the user with important content and expects a response.",
  "dependencies": ["@base-ui/react"],
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "ui/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nconst AlertDialog = ({ ...props }: AlertDialogPrimitive.Root.Props) => (\n  <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n);\n\nconst AlertDialogTrigger = ({\n  asChild,\n  children,\n  ...props\n}: AlertDialogPrimitive.Trigger.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" render={children} {...props} />\n    );\n  }\n\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props}>\n      {children}\n    </AlertDialogPrimitive.Trigger>\n  );\n};\n\nconst AlertDialogPortal = ({ ...props }: AlertDialogPrimitive.Portal.Props) => (\n  <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n);\n\nconst AlertDialogOverlay = ({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) => (\n  <AlertDialogPrimitive.Backdrop\n    className={cn(\n      \"data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-110 bg-overlay backdrop-blur-[10px] data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500 motion-reduce:transition-none\",\n      className,\n    )}\n    data-slot=\"alert-dialog-overlay\"\n    {...props}\n  />\n);\n\nconst AlertDialogContent = ({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\";\n}) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Popup\n      className={cn(\n        \"group/alert-dialog-content data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-[50%] left-[50%] z-110 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-closed:animate-out data-open:animate-in data-[size=default]:sm:max-w-lg md:w-full\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"alert-dialog-content\"\n      {...props}\n    />\n  </AlertDialogPortal>\n);\n\nconst AlertDialogHeader = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n      className,\n    )}\n    data-slot=\"alert-dialog-header\"\n    {...props}\n  />\n);\n\nconst AlertDialogFooter = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n      className,\n    )}\n    data-slot=\"alert-dialog-footer\"\n    {...props}\n  />\n);\n\nconst AlertDialogTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) => (\n  <AlertDialogPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n      className,\n    )}\n    data-slot=\"alert-dialog-title\"\n    {...props}\n  />\n);\n\nconst AlertDialogDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) => (\n  <AlertDialogPrimitive.Description\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    data-slot=\"alert-dialog-description\"\n    {...props}\n  />\n);\n\nconst AlertDialogMedia = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n      className,\n    )}\n    data-slot=\"alert-dialog-media\"\n    {...props}\n  />\n);\n\nconst AlertDialogAction = ({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) => (\n  <AlertDialogPrimitive.Close\n    className={cn(className)}\n    data-slot=\"alert-dialog-action\"\n    render={<Button size={size} variant={variant} />}\n    {...props}\n  />\n);\n\nconst AlertDialogCancel = ({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) => (\n  <AlertDialogPrimitive.Close\n    className={cn(className)}\n    data-slot=\"alert-dialog-cancel\"\n    render={<Button size={size} variant={variant} />}\n    {...props}\n  />\n);\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}