{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "A dialog that requires user response to proceed.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/button",
    "@lumi-ui/dialog"
  ],
  "files": [
    {
      "path": "registry/ui/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { popupVariants, viewportVariants } from \"@/registry/ui/dialog\";\n\nfunction AlertDialog<Payload>(props: BaseAlertDialog.Root.Props<Payload>) {\n  return <BaseAlertDialog.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger<Payload>({\n  className,\n  ...props\n}: BaseAlertDialog.Trigger.Props<Payload>) {\n  return (\n    <BaseAlertDialog.Trigger<Payload>\n      className={className}\n      data-slot=\"alert-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogPortal({\n  className,\n  ...props\n}: BaseAlertDialog.Portal.Props) {\n  return (\n    <BaseAlertDialog.Portal\n      className={className}\n      data-slot=\"alert-dialog-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: BaseAlertDialog.Backdrop.Props) {\n  return (\n    <BaseAlertDialog.Backdrop\n      className={cn(\n        \"fixed inset-0 min-h-dvh bg-black/20 backdrop-blur-xs animate-fade\",\n        \"supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogViewport({\n  className,\n  ...props\n}: BaseAlertDialog.Viewport.Props) {\n  return (\n    <BaseAlertDialog.Viewport\n      className={cn(\"fixed inset-0 outline-none\", className)}\n      data-slot=\"alert-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogPopup({\n  className,\n  ...props\n}: BaseAlertDialog.Popup.Props) {\n  return (\n    <BaseAlertDialog.Popup\n      className={cn(\"bg-background w-full p-4 sm:p-6\", className)}\n      data-slot=\"alert-dialog-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: BaseAlertDialog.Title.Props) {\n  return (\n    <BaseAlertDialog.Title\n      className={cn(\"text-lg font-semibold\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: BaseAlertDialog.Description.Props) {\n  return (\n    <BaseAlertDialog.Description\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogClose({\n  className,\n  ...props\n}: BaseAlertDialog.Close.Props) {\n  return (\n    <BaseAlertDialog.Close\n      className={className}\n      data-slot=\"alert-dialog-close\"\n      {...props}\n    />\n  );\n}\n\ninterface AlertDialogContentProps\n  extends BaseAlertDialog.Popup.Props,\n    VariantProps<typeof popupVariants> {}\n\nfunction AlertDialogContent({\n  className,\n  layout = \"center\",\n  children,\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogViewport className={viewportVariants({ layout })}>\n        <AlertDialogPopup\n          className={cn(popupVariants({ layout }), className)}\n          data-slot=\"alert-dialog-content\"\n          {...props}\n        >\n          {children}\n        </AlertDialogPopup>\n      </AlertDialogViewport>\n    </AlertDialogPortal>\n  );\n}\n\nconst createAlertDialogHandle = BaseAlertDialog.createHandle;\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogViewport,\n  AlertDialogBackdrop,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogClose,\n  createAlertDialogHandle,\n  // Composite component\n  AlertDialogContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}