{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signature-certificate-form",
  "type": "registry:component",
  "title": "Signature Certificate Form",
  "description": "Password confirmation form for browser A1 signing, with callback-owned persistence.",
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label"
  ],
  "dependencies": [
    "@tanstack/react-form@1.33.2",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/signature-certificate-form/signature-certificate-form.tsx",
      "type": "registry:component",
      "target": "@components/signature-kit/signature-certificate-form.tsx",
      "content": "\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useForm, useSelector } from \"@tanstack/react-form\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SignatureCertificateConfirmPayload = {\n  readonly password: string;\n  readonly rememberPassword: boolean;\n};\n\nexport type SignatureCertificateFormProps = {\n  readonly onConfirm: (payload: SignatureCertificateConfirmPayload) => void | Promise<void>;\n  readonly getSavedPassword?: () => string | null;\n  readonly onSavePassword?: (password: string | null) => void;\n  readonly defaultRemember?: boolean;\n  readonly submitLabel?: string;\n  readonly passwordLabel?: string;\n  readonly rememberLabel?: string;\n  readonly isSubmitting?: boolean;\n  readonly className?: string;\n};\n\nexport function SignatureCertificateForm({\n  onConfirm,\n  getSavedPassword,\n  onSavePassword,\n  defaultRemember = false,\n  submitLabel = \"Confirm certificate\",\n  passwordLabel = \"Certificate password\",\n  rememberLabel = \"Remember password in this app\",\n  isSubmitting = false,\n  className,\n}: SignatureCertificateFormProps) {\n  const savedPassword = getSavedPassword?.() ?? \"\";\n  const form = useForm({\n    defaultValues: {\n      password: savedPassword,\n      rememberPassword: defaultRemember || savedPassword.length > 0,\n    },\n  });\n  const password = useSelector(form.store, (state) => state.values.password);\n  const rememberPassword = useSelector(form.store, (state) => state.values.rememberPassword);\n\n  const submit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    if (rememberPassword) onSavePassword?.(password);\n    if (!rememberPassword) onSavePassword?.(null);\n    void onConfirm({ password, rememberPassword });\n  };\n\n  return (\n    <form\n      data-slot=\"signature-certificate-form\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      onSubmit={submit}\n    >\n      <input\n        type=\"text\"\n        autoComplete=\"username\"\n        value=\"\"\n        readOnly\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        className=\"sr-only\"\n      />\n      <form.Field name=\"password\">\n        {(field) => (\n          <div className=\"grid gap-2\" data-slot=\"certificate-password-field\">\n            <Label htmlFor=\"signature-certificate-password\">{passwordLabel}</Label>\n            <Input\n              id=\"signature-certificate-password\"\n              type=\"password\"\n              data-ph-no-autocapture\n              data-analytics-sensitive\n              autoComplete=\"current-password\"\n              value={field.state.value}\n              onBlur={field.handleBlur}\n              onChange={(event) => field.handleChange(event.currentTarget.value)}\n              disabled={isSubmitting}\n            />\n          </div>\n        )}\n      </form.Field>\n      <form.Field name=\"rememberPassword\">\n        {(field) => (\n          <Label\n            htmlFor=\"signature-certificate-remember\"\n            className=\"flex items-center gap-2 text-sm font-normal text-muted-foreground\"\n          >\n            <Checkbox\n              id=\"signature-certificate-remember\"\n              checked={field.state.value}\n              onCheckedChange={(checked) => field.handleChange(checked === true)}\n              disabled={isSubmitting}\n            />\n            {rememberLabel}\n          </Label>\n        )}\n      </form.Field>\n      <Button type=\"submit\" disabled={isSubmitting || password.length === 0} className=\"w-full\">\n        {isSubmitting ? <Loader2 aria-hidden className=\"size-4 animate-spin\" /> : null}\n        {submitLabel}\n      </Button>\n    </form>\n  );\n}\n"
    }
  ]
}