{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delete-button",
  "title": "Delete Button",
  "description": "S3 object delete button with confirmation dialog and toast support.",
  "dependencies": [
    "@better-s3/core",
    "@better-s3/react",
    "lucide-react",
    "sonner"
  ],
  "registryDependencies": [
    "button",
    "alert-dialog",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/better-s3-ui/components/delete/delete-button.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport {\n  Trash2Icon,\n  LoaderIcon,\n  AlertCircleIcon,\n  CheckCircle2Icon,\n} from \"lucide-react\";\nimport { cn } from \"@/registry/better-s3-ui/lib/utils\";\nimport { formatFileSize, truncateFileName } from \"@better-s3/core\";\nimport type { DeleteHooks } from \"@better-s3/react\";\nimport type { S3Api } from \"@better-s3/core\";\nimport { useDelete, useS3Translations } from \"@better-s3/react\";\nimport { Button } from \"@/registry/better-s3-ui/components/ui/button\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/better-s3-ui/components/ui/alert-dialog\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/better-s3-ui/components/ui/tooltip\";\nimport { useDeleteToast } from \"@/registry/better-s3-ui/hooks/use-delete-toast\";\n\n/** Keep LTR file names and sizes readable inside RTL confirmation copy. */\nfunction isolateLtr(value: string): string {\n  return `\\u2066${value}\\u2069`;\n}\n\n/** Props for {@link DeleteButton}. */\nexport type DeleteButtonProps = DeleteHooks & {\n  /** S3Api. Optional when an `<S3Provider>` is present in the tree. */\n  api?: S3Api;\n  /** S3 object key to delete. */\n  objectKey: string;\n  /** Display file name in the confirmation dialog. */\n  fileName?: string;\n  /** Display file size in the confirmation dialog. */\n  fileSize?: number;\n  /** Target bucket (overrides server default). */\n  bucket?: string;\n  /** Button label. */\n  label?: string;\n  /** Custom button content. Replaces default icon + label. */\n  children?: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  tooltipText?: string;\n  /** Show a sonner toast during delete. @default true */\n  toast?: boolean;\n  /** Show inline error below the button. @default true */\n  showStatus?: boolean;\n  confirmTitle?: string;\n  confirmDescription?: string;\n  /** Button variant. @default \"destructive\" */\n  variant?: ComponentProps<typeof Button>[\"variant\"];\n  /** Button size. @default \"default\" */\n  size?: ComponentProps<typeof Button>[\"size\"];\n  /** Extra classes on the trigger button element. */\n  buttonClassName?: string;\n};\n\nexport function DeleteButton({\n  api,\n  objectKey,\n  fileName,\n  fileSize,\n  bucket,\n  label,\n  children,\n  className,\n  disabled,\n  tooltipText,\n  toast: enableToast = true,\n  showStatus = true,\n  confirmTitle,\n  confirmDescription,\n  variant = \"destructive\",\n  size = \"default\",\n  buttonClassName,\n  beforeDelete,\n  onDeleteStart,\n  onSuccess,\n  onError,\n}: DeleteButtonProps) {\n  const t = useS3Translations();\n  const displayName = fileName ?? objectKey.split(\"/\").pop() ?? objectKey;\n  const toastHandlers = useDeleteToast({\n    enabled: enableToast,\n    displayName,\n  });\n\n  const del = useDelete({\n    api,\n    bucket,\n    beforeDelete,\n    onDeleteStart,\n    onSuccess: (key) => {\n      toastHandlers.onSuccess(key);\n      onSuccess?.(key);\n    },\n    onError: (key, error, phase) => {\n      toastHandlers.onError(key, error);\n      onError?.(key, error, phase);\n    },\n  });\n\n  const isDeleting = del.phase === \"deleting\";\n  const isDisabled = disabled || isDeleting;\n\n  const buttonContent = children ?? (\n    <>\n      {isDeleting ? (\n        <LoaderIcon className=\"animate-spin\" data-icon=\"inline-start\" />\n      ) : (\n        <Trash2Icon data-icon=\"inline-start\" />\n      )}\n      {label ?? t(\"delete.label\")}\n    </>\n  );\n\n  const fileLabel =\n    fileSize != null\n      ? `${truncateFileName(displayName)} (${formatFileSize(fileSize)})`\n      : truncateFileName(displayName);\n\n  const description =\n    confirmDescription ??\n    t(\"delete.confirmDescription\", {\n      name: isolateLtr(fileLabel),\n    });\n\n  return (\n    <div className={cn(\"inline-flex flex-col gap-1.5\", className)}>\n      <div className=\"inline-flex items-center gap-2\">\n        <AlertDialog\n          open={del.phase === \"confirming\"}\n          onOpenChange={(open) => {\n            if (!open) del.cancelDelete();\n          }}\n        >\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <AlertDialogTrigger\n                  disabled={isDisabled}\n                  onClick={() => del.requestDelete(objectKey)}\n                  render={\n                    <Button\n                      variant={variant}\n                      size={size}\n                      className={buttonClassName}\n                      disabled={isDisabled}\n                    />\n                  }\n                />\n              }\n            >\n              {buttonContent}\n            </TooltipTrigger>\n            <TooltipContent>{tooltipText ?? t(\"delete.file\")}</TooltipContent>\n          </Tooltip>\n\n          <AlertDialogContent>\n            <AlertDialogHeader>\n              <AlertDialogMedia>\n                <Trash2Icon />\n              </AlertDialogMedia>\n              <AlertDialogTitle>\n                {confirmTitle ?? t(\"delete.confirmTitle\")}\n              </AlertDialogTitle>\n              <AlertDialogDescription\n                dir=\"auto\"\n                className=\"[overflow-wrap:anywhere]\"\n              >\n                {description}\n              </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n              <AlertDialogCancel>{t(\"common.cancel\")}</AlertDialogCancel>\n              <AlertDialogAction\n                variant=\"destructive\"\n                onClick={() => del.confirmDelete()}\n              >\n                {t(\"delete.label\")}\n              </AlertDialogAction>\n            </AlertDialogFooter>\n          </AlertDialogContent>\n        </AlertDialog>\n      </div>\n\n      {showStatus && del.phase === \"success\" && (\n        <div className=\"flex min-w-0 items-center gap-1.5 text-xs\">\n          <CheckCircle2Icon className=\"size-3.5 shrink-0 text-green-600\" />\n          <p className=\"min-w-0 [overflow-wrap:anywhere] text-green-600\">\n            {t(\"delete.inlineDeleted\", { name: truncateFileName(displayName) })}\n          </p>\n        </div>\n      )}\n\n      {showStatus && del.phase === \"error\" && (\n        <div className=\"flex min-w-0 items-start gap-1.5 text-xs\">\n          <AlertCircleIcon className=\"mt-0.5 size-3.5 shrink-0 text-destructive\" />\n          <p className=\"min-w-0 [overflow-wrap:anywhere] text-destructive\">\n            {del.error ?? t(\"delete.failed\")}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/delete/delete-button.tsx"
    },
    {
      "path": "registry/better-s3-ui/hooks/use-delete-toast.tsx",
      "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { truncateFileName } from \"@better-s3/core\";\nimport { useS3Translations } from \"@better-s3/react\";\n\nexport type DeleteToastOptions = {\n  enabled?: boolean;\n  displayName: string;\n};\n\nexport function useDeleteToast({\n  enabled = true,\n  displayName,\n}: DeleteToastOptions) {\n  const t = useS3Translations();\n\n  const onSuccess = (_key: string) => {\n    if (!enabled) return;\n    toast.success(t(\"delete.successToast\"), {\n      description: <span dir=\"auto\">{truncateFileName(displayName)}</span>,\n    });\n  };\n\n  const onError = (_key: string, error: unknown) => {\n    if (!enabled) return;\n    toast.error(t(\"delete.failed\"), {\n      description: (\n        <span dir=\"auto\" className=\"block [overflow-wrap:anywhere]\">\n          {error instanceof Error ? error.message : t(\"common.unknownError\")}\n        </span>\n      ),\n    });\n  };\n\n  return { onSuccess, onError };\n}\n",
      "type": "registry:hook",
      "target": "@hooks/use-delete-toast.tsx"
    }
  ],
  "type": "registry:component"
}