{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-signature-pad-11","type":"registry:block","title":"Proof of delivery","description":"Mobile delivery card with recipient name, a touch signature and confirmation.","dependencies":[],"registryDependencies":["@reui/badge","button","card","field","input","@reui/signature-pad"],"files":[{"path":"c-signature-pad-11.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport {\n  SignaturePad,\n  SignaturePadArea,\n  SignaturePadClear,\n  SignaturePadControls,\n  SignaturePadGuide,\n  SignaturePadPlaceholder,\n  SignaturePadUndo,\n  type SignaturePadStroke,\n} from \"@/components/reui/signature-pad\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\n\nexport function Pattern() {\n  const id = useId()\n  const [recipient, setRecipient] = useState(\"\")\n  const [strokes, setStrokes] = useState<SignaturePadStroke[]>([])\n  const [confirmed, setConfirmed] = useState(false)\n\n  return (\n    <Card className=\"mx-auto w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Proof of delivery</CardTitle>\n        <CardDescription>\n          <span className=\"flex items-center gap-2\">\n            Order #48213\n            <span\n              aria-hidden=\"true\"\n              className=\"bg-muted-foreground/40 size-1 shrink-0 rounded-full\"\n            />\n            3 parcels\n          </span>\n        </CardDescription>\n        {confirmed && (\n          <CardAction>\n            <Badge variant=\"success-light\">Delivered</Badge>\n          </CardAction>\n        )}\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-4\">\n          <Field>\n            <FieldLabel htmlFor={`${id}-recipient`}>Received by</FieldLabel>\n            <Input\n              id={`${id}-recipient`}\n              value={recipient}\n              disabled={confirmed}\n              onChange={(event) => setRecipient(event.target.value)}\n              placeholder=\"Recipient name\"\n              autoComplete=\"off\"\n            />\n          </Field>\n          <Field>\n            <FieldLabel id={`${id}-signature`}>Recipient signature</FieldLabel>\n            {/* The area blocks page scroll under a finger, so the recipient can sign on a phone. */}\n            <SignaturePad\n              value={strokes}\n              onValueChange={setStrokes}\n              readOnly={confirmed}\n            >\n              <SignaturePadArea\n                aria-labelledby={`${id}-signature`}\n                className=\"h-44\"\n              >\n                <SignaturePadGuide />\n                <SignaturePadPlaceholder>\n                  Hand the device to the recipient\n                </SignaturePadPlaceholder>\n                {!confirmed && (\n                  <SignaturePadControls position=\"top-end\">\n                    <SignaturePadUndo variant=\"ghost\" />\n                    <SignaturePadClear variant=\"ghost\" />\n                  </SignaturePadControls>\n                )}\n              </SignaturePadArea>\n            </SignaturePad>\n          </Field>\n        </div>\n      </CardContent>\n      <CardFooter>\n        {confirmed ? (\n          <p\n            ref={(node) => node?.focus()}\n            tabIndex={-1}\n            role=\"status\"\n            className=\"w-full text-center text-sm font-medium outline-none\"\n          >\n            Delivered to {recipient.trim()}\n          </p>\n        ) : (\n          <Button\n            size=\"lg\"\n            className=\"w-full\"\n            disabled={!recipient.trim() || strokes.length === 0}\n            onClick={() => setConfirmed(true)}\n          >\n            Confirm delivery\n          </Button>\n        )}\n      </CardFooter>\n    </Card>\n  )\n}","target":"components/examples/c-signature-pad-11.tsx"}],"meta":{"order":11,"label":"Proof of Delivery"}}