{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-dialog-type-to-confirm",
  "title": "Dynamic type to confirm Dialog",
  "description": "A dynamic type to confirm dialog component.",
  "dependencies": [
    "zod",
    "@hookform/resolvers",
    "react-hook-form"
  ],
  "registryDependencies": [
    "dialog",
    "button",
    "input",
    "form",
    "Quackzoer/shadcn-registry/dynamic-dialog"
  ],
  "files": [
    {
      "path": "components/dynamic-dialog/dialogs/type-to-confirm-dialog.tsx",
      "content": "\"use client\"\r\n\r\nimport React, { useId } from \"react\";\r\nimport {\r\n  AlertDialog,\r\n  AlertDialogContent,\r\n  AlertDialogDescription,\r\n  AlertDialogHeader,\r\n  AlertDialogTitle,\r\n} from \"@/registry/ui/alert-dialog\";\r\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@/registry/ui/form\";\r\nimport { Input } from \"@/registry/ui/input\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { Trash2 } from \"lucide-react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { z } from \"zod\";\r\nimport { dialog, type DialogComponentProps } from \"@/registry/lib/dynamic-dialog-state\";\r\nimport {\r\n  type DialogActionButton,\r\n  type DialogActionsContainer,\r\n  renderStandardDialogActions,\r\n} from \"@/lib/dynamic-dialog-actions\";\r\n\r\nexport interface TypeToConfirmDialogProps {\r\n  itemName: string;\r\n  actions?: TypeToConfirmActionsConfig;\r\n}\r\n\r\ntype ResolveValue = { itemName: string };\r\ntype TCtx = { isValid: boolean };\r\n\r\n// The confirm slot's disabled state comes from form validity — passed as context.\r\n// Users who override confirmButton with a callback receive (actions, ctx) where\r\n// ctx.isValid reflects the current input state.\r\nexport interface TypeToConfirmActionsConfig {\r\n  cancelButton?: DialogActionButton<ResolveValue, TCtx>;\r\n  confirmButton?: DialogActionButton<ResolveValue, TCtx>;\r\n  container?: DialogActionsContainer<ResolveValue, TCtx>;\r\n}\r\n\r\nexport function TypeToConfirmDialog(\r\n  props: DialogComponentProps<TypeToConfirmDialogProps, ResolveValue>,\r\n) {\r\n  const formId = useId();\r\n  const schema = z.object({ itemName: z.literal(props.itemName) });\r\n  const form = useForm({ resolver: zodResolver(schema), defaultValues: { itemName: \"\" } });\r\n\r\n  const handleSubmit = (data: z.infer<typeof schema>) => {\r\n    props.confirm(data);\r\n  };\r\n\r\n  const ctx: TCtx = { isValid: form.formState.isValid };\r\n\r\n  return (\r\n    <AlertDialog open={props.open} onOpenChange={props.onOpenChange}>\r\n      <AlertDialogContent>\r\n        <AlertDialogHeader>\r\n          <div className=\"flex items-center gap-3 mb-4\">\r\n            <div className=\"flex-shrink-0 w-10 h-10 bg-destructive/10 rounded-full flex items-center justify-center\">\r\n              <Trash2 className=\"w-5 h-5 text-destructive\" />\r\n            </div>\r\n            <div>\r\n              <AlertDialogTitle className=\"text-lg font-semibold text-foreground\">\r\n                Delete Confirmation\r\n              </AlertDialogTitle>\r\n              <AlertDialogDescription className=\"text-sm text-muted-foreground\">\r\n                This action cannot be undone\r\n              </AlertDialogDescription>\r\n            </div>\r\n          </div>\r\n        </AlertDialogHeader>\r\n\r\n        <Form {...form}>\r\n          <form id={formId} onSubmit={form.handleSubmit(handleSubmit)} className=\"space-y-4\">\r\n            <div className=\"mb-4\">\r\n              <p className=\"text-foreground mb-3\">\r\n                To confirm deletion of{\" \"}\r\n                <code className=\"bg-muted px-2 py-1 rounded text-sm font-mono\">\r\n                  {props.itemName}\r\n                </code>\r\n                , please type the exact name below:\r\n              </p>\r\n              <FormField\r\n                control={form.control}\r\n                name=\"itemName\"\r\n                render={({ field }) => (\r\n                  <FormItem>\r\n                    <FormLabel className=\"text-sm font-medium\">Type to confirm</FormLabel>\r\n                    <FormControl>\r\n                      <Input\r\n                        placeholder={`Type: ${props.itemName}`}\r\n                        {...field}\r\n                        className=\"font-mono\"\r\n                        autoComplete=\"off\"\r\n                        autoFocus\r\n                      />\r\n                    </FormControl>\r\n                    <FormMessage />\r\n                  </FormItem>\r\n                )}\r\n              />\r\n              {form.watch(\"itemName\") && form.watch(\"itemName\") !== props.itemName && (\r\n                <p className=\"text-sm text-muted-foreground mt-2\">\r\n                  Text must match exactly:{\" \"}\r\n                  <span className=\"font-mono\">{props.itemName}</span>\r\n                </p>\r\n              )}\r\n            </div>\r\n          </form>\r\n        </Form>\r\n\r\n        {renderStandardDialogActions(\r\n          props.actions ?? {},\r\n          props,\r\n          ctx,\r\n          {\r\n            cancel: {\r\n              label: \"Cancel\",\r\n              variant: \"outline\",\r\n              type: \"button\",\r\n              onClick: (a) => a.dismiss(\"cancel\"),\r\n            },\r\n            confirm: {\r\n              label: \"Delete Forever\",\r\n              variant: \"destructive\",\r\n              type: \"submit\",\r\n              form: formId,\r\n              // Disabled state comes from context so users who override this slot\r\n              // via the callback form also receive ctx.isValid.\r\n              disabled: !ctx.isValid,\r\n            },\r\n          },\r\n        )}\r\n      </AlertDialogContent>\r\n    </AlertDialog>\r\n  );\r\n}\r\n\r\nexport const typeToConfirmDialog = dialog(TypeToConfirmDialog);\r\n",
      "type": "registry:component",
      "target": "@components/dynamic-dialog/dialogs/type-to-confirm-dialog.tsx"
    }
  ],
  "type": "registry:component"
}