{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "alert-dialog",
  "dependencies": [
    "@radix-ui/react-alert-dialog@^1",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/button",
    "@dwellir/modal-surface"
  ],
  "files": [
    {
      "path": "components/ui/alert-dialog.tsx",
      "content": "'use client';\n\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { useModalSurface } from '@/lib/modal-surface';\nimport { useScrollFocus } from '@/lib/scroll-focus';\nimport { cn } from '@/lib/utils';\n\nfunction AlertDialog(props: ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger(props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal(props: ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\n/* As the dialog's: over the navbar and the cookie notice. */\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'fixed inset-0 z-modal bg-scrim data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/*\n * The dialog's centred panel, with no close button: the reader answers with an\n * action or Cancel. sm is a short confirmation, its text centred and its two\n * buttons side by side. The surface matches DialogContent's, and so does the\n * scrolling: the panel, or an AlertDialogBody between the header and the footer.\n */\nconst alertDialogContentVariants = cva(\n  'group/alert-dialog ui-popup-motion modal-host fixed top-modal-cy left-modal-cx z-modal grid max-h-modal w-modal -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain scrollbar-quiet border border-border text-popover-foreground shadow-popover animation-duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n  {\n    variants: {\n      size: {\n        md: 'max-w-lg gap-5 rounded-3xl p-7',\n        sm: 'max-w-sm gap-4 rounded-2xl p-6',\n      },\n      surface: {\n        grain: 'bg-popover grain',\n        plain: 'bg-popover',\n      },\n    },\n    defaultVariants: { size: 'md', surface: 'grain' },\n  },\n);\n\ntype AlertDialogSize = NonNullable<VariantProps<typeof alertDialogContentVariants>['size']>;\n\nfunction AlertDialogContent({\n  className,\n  size,\n  surface,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Content> &\n  Pick<VariantProps<typeof alertDialogContentVariants>, 'surface'> & {\n    /* default is upstream's name for md. */\n    size?: AlertDialogSize | 'default' | null;\n  }) {\n  const shown = size === 'default' || size == null ? 'md' : size;\n  const shownSurface = useModalSurface(surface);\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={shown}\n        data-surface={shownSurface}\n        className={cn(\n          alertDialogContentVariants({ size: shown, surface: shownSurface }),\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'flex flex-col gap-2 group-data-[size=sm]/alert-dialog:items-center group-data-[size=sm]/alert-dialog:text-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* As DialogBody: long text scrolls here, and the answer stays in view. */\nfunction AlertDialogBody({ className, ref, ...props }: ComponentProps<'div'>) {\n  const scrollFocus = useScrollFocus(ref);\n  return (\n    <div\n      ref={scrollFocus}\n      data-slot=\"alert-dialog-body\"\n      className={cn(\n        'modal-body -mx-7 -my-1 px-7 py-1 group-data-[size=sm]/alert-dialog:-mx-6 group-data-[size=sm]/alert-dialog:px-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-3 sm:flex-row sm:justify-end group-data-[size=sm]/alert-dialog:grid group-data-[size=sm]/alert-dialog:grid-cols-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'font-display text-2xl leading-tight font-bold tracking-tight text-balance text-title group-data-[size=sm]/alert-dialog:text-lg group-data-[size=sm]/alert-dialog:tracking-normal',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm text-pretty text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/* An icon over the title. destructive tints it red, for a delete or a revoke. */\nconst alertDialogMediaVariants = cva(\n  'mb-1 grid size-12 shrink-0 place-items-center rounded-xl [&>svg]:size-6',\n  {\n    variants: {\n      variant: {\n        default: 'bg-muted text-foreground',\n        destructive: 'bg-destructive-10 text-destructive',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction AlertDialogMedia({\n  className,\n  variant,\n  ...props\n}: ComponentProps<'div'> & VariantProps<typeof alertDialogMediaVariants>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      data-variant={variant ?? 'default'}\n      aria-hidden=\"true\"\n      className={cn(alertDialogMediaVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\ntype ButtonProps = ComponentProps<typeof Button>;\ntype AlertDialogButtonProps = Pick<ButtonProps, 'size' | 'shape'> & {\n  /* default is upstream's name for primary. */\n  variant?: ButtonProps['variant'] | 'default';\n};\n\nconst buttonVariant = (variant: AlertDialogButtonProps['variant']) =>\n  variant === 'default' ? 'primary' : variant;\n\n/* The answer. Set variant=\"destructive\" when it deletes or cannot be undone. */\nfunction AlertDialogAction({\n  className,\n  variant = 'primary',\n  size,\n  shape,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Action> & AlertDialogButtonProps) {\n  return (\n    <Button\n      variant={buttonVariant(variant)}\n      size={size}\n      shape={shape}\n      className={className}\n      asChild\n    >\n      <AlertDialogPrimitive.Action data-slot=\"alert-dialog-action\" {...props} />\n    </Button>\n  );\n}\n\n/* The safe way out. Radix focuses it when the dialog opens. */\nfunction AlertDialogCancel({\n  className,\n  variant = 'outline',\n  size,\n  shape,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Cancel> & AlertDialogButtonProps) {\n  return (\n    <Button\n      variant={buttonVariant(variant)}\n      size={size}\n      shape={shape}\n      className={className}\n      asChild\n    >\n      <AlertDialogPrimitive.Cancel data-slot=\"alert-dialog-cancel\" {...props} />\n    </Button>\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogBody,\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"
    }
  ],
  "type": "registry:ui"
}