{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "certificate-upload-form",
  "type": "registry:component",
  "title": "Certificate Upload Form",
  "description": "PFX/P12 upload form that parses an A1 certificate in the browser and returns profile metadata.",
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "input",
    "label"
  ],
  "dependencies": [
    "@signature-kit/react",
    "@signature-kit/a1",
    "@tanstack/react-form@1.33.2",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/certificate-upload-form/certificate-upload-form.tsx",
      "type": "registry:component",
      "target": "@components/signature-kit/certificate-upload-form.tsx",
      "content": "\"use client\";\n\nimport type { A1CertificateProfile } from \"@signature-kit/a1/config\";\nimport { useA1Certificate } from \"@signature-kit/react/a1\";\nimport { Loader2, UploadCloud } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useForm, useSelector } from \"@tanstack/react-form\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CertificateUploadFormProps = {\n  readonly onUpload: (profile: A1CertificateProfile, file: File) => void | Promise<void>;\n  readonly submitLabel?: string;\n  readonly fileLabel?: string;\n  readonly passwordLabel?: string;\n  readonly className?: string;\n};\n\ntype CertificateUploadFormValues = {\n  readonly file: File | null;\n  readonly password: string;\n};\n\nconst certificateUploadFormDefaults: CertificateUploadFormValues = {\n  file: null,\n  password: \"\",\n};\n\nconst formatDate = (date: Date): string =>\n  new Intl.DateTimeFormat(undefined, { dateStyle: \"medium\" }).format(date);\n\nexport function CertificateUploadForm({\n  onUpload,\n  submitLabel = \"Validate certificate\",\n  fileLabel = \"A1 certificate (.pfx or .p12)\",\n  passwordLabel = \"Certificate password\",\n  className,\n}: CertificateUploadFormProps) {\n  const certificate = useA1Certificate();\n  const form = useForm({ defaultValues: certificateUploadFormDefaults });\n  const file = useSelector(form.store, (state) => state.values.file);\n  const password = useSelector(form.store, (state) => state.values.password);\n\n  const submit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    if (file === null || password.length === 0) return;\n    const bytes = new Uint8Array(await file.arrayBuffer());\n    const result = await certificate.load(bytes, password);\n    if (result.ok) void onUpload(result.profile, file);\n  };\n\n  return (\n    <form\n      data-slot=\"certificate-upload-form\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      onSubmit={submit}\n    >\n      <form.Field name=\"file\">\n        {(field) => (\n          <div className=\"grid gap-2\" data-slot=\"certificate-file-field\">\n            <Label htmlFor=\"certificate-upload-file\">{fileLabel}</Label>\n            <Button\n              asChild\n              variant=\"outline\"\n              className=\"h-auto justify-start gap-3 border-dashed px-3 py-3 font-normal\"\n            >\n              <Label htmlFor=\"certificate-upload-file\" className=\"min-w-0 cursor-pointer\">\n                <UploadCloud aria-hidden className=\"size-5 shrink-0 text-muted-foreground\" />\n                <span className=\"min-w-0 flex-1 truncate text-muted-foreground\">\n                  {field.state.value?.name ?? \"Choose a .pfx or .p12 file\"}\n                </span>\n              </Label>\n            </Button>\n            <Input\n              id=\"certificate-upload-file\"\n              type=\"file\"\n              accept=\".pfx,.p12,application/x-pkcs12\"\n              className=\"sr-only\"\n              onChange={(event) => field.handleChange(event.currentTarget.files?.item(0) ?? null)}\n            />\n          </div>\n        )}\n      </form.Field>\n      <form.Field name=\"password\">\n        {(field) => (\n          <div className=\"grid gap-2\" data-slot=\"certificate-upload-password-field\">\n            <Label htmlFor=\"certificate-upload-password\">{passwordLabel}</Label>\n            <Input\n              id=\"certificate-upload-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            />\n          </div>\n        )}\n      </form.Field>\n      {certificate.error !== null ? (\n        <p className=\"rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          {certificate.error.message}\n        </p>\n      ) : null}\n      {certificate.profile !== null ? (\n        <Card data-slot=\"certificate-profile-preview\" className=\"grid gap-3 p-4 text-sm\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <p className=\"truncate font-medium text-card-foreground\">\n                {certificate.profile.subject}\n              </p>\n              <p className=\"truncate text-muted-foreground\">{certificate.profile.issuer}</p>\n            </div>\n            <Badge variant=\"secondary\" className=\"shrink-0\">\n              Ready\n            </Badge>\n          </div>\n          <dl className=\"grid gap-2 sm:grid-cols-2\">\n            <div>\n              <dt className=\"text-xs text-muted-foreground\">CPF/CNPJ</dt>\n              <dd className=\"font-mono text-xs text-foreground\">{certificate.profile.document}</dd>\n            </div>\n            <div>\n              <dt className=\"text-xs text-muted-foreground\">Valid until</dt>\n              <dd className=\"text-foreground\">{formatDate(certificate.profile.validTo)}</dd>\n            </div>\n          </dl>\n        </Card>\n      ) : null}\n      <Button\n        type=\"submit\"\n        disabled={certificate.status === \"loading\" || file === null || password.length === 0}\n      >\n        {certificate.status === \"loading\" ? (\n          <Loader2 aria-hidden className=\"size-4 animate-spin\" />\n        ) : null}\n        {submitLabel}\n      </Button>\n    </form>\n  );\n}\n"
    }
  ]
}