{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "signature-pad", "type": "registry:component", "title": "Signature Pad", "description": "A place to sign with a finger, mouse or pen: strokes come out smooth and swell with pressure or slow down, with undo, a typed fallback and a stamped, timestamped signed state.", "categories": [ "component", "Forms" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json" ], "files": [ { "path": "registry/devl/signature-pad.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { BadgeCheckIcon, EraserIcon, PenLineIcon, Undo2Icon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type KeyboardEvent,\n type PointerEvent,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Point = { x: number; y: number; w: number };\ntype Stroke = Point[];\n\nconst MIN_W = 1.1;\nconst MAX_W = 3.4;\n\nfunction drawStroke(ctx: CanvasRenderingContext2D, stroke: Stroke, from = 0) {\n if (stroke.length === 1) {\n const p = stroke[0];\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.w / 2, 0, Math.PI * 2);\n ctx.fill();\n return;\n }\n for (let i = Math.max(1, from); i < stroke.length; i++) {\n const a = stroke[i - 1];\n const b = stroke[i];\n const before = stroke[i - 2] ?? a;\n const start = { x: (before.x + a.x) / 2, y: (before.y + a.y) / 2 };\n const end = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };\n ctx.beginPath();\n ctx.moveTo(i === 1 ? a.x : start.x, i === 1 ? a.y : start.y);\n ctx.quadraticCurveTo(a.x, a.y, end.x, end.y);\n ctx.lineWidth = (a.w + b.w) / 2;\n ctx.stroke();\n }\n}\n\nexport interface SignaturePadProps {\n signer: string;\n label?: string;\n onSign?: (png: string, signedAt: Date) => void;\n onClear?: () => void;\n className?: string;\n}\n\nexport function SignaturePad({ signer, label = \"Signature\", onSign, onClear, className }: SignaturePadProps) {\n const canvasRef = useRef(null);\n const boxRef = useRef(null);\n const strokes = useRef([]);\n const typedInk = useRef<{ text: string; font: string; x: number; y: number } | null>(null);\n const typedRef = useRef(null);\n const live = useRef<{ stroke: Stroke; t: number; id: number } | null>(null);\n const [count, setCount] = useState(0);\n const [signedAt, setSignedAt] = useState(null);\n const [mode, setMode] = useState<\"draw\" | \"type\">(\"draw\");\n const [typed, setTyped] = useState(signer);\n const reduce = useReducedMotion();\n const id = useId();\n\n const ctx = useCallback(() => {\n const canvas = canvasRef.current;\n const c = canvas?.getContext(\"2d\");\n if (!canvas || !c) return null;\n const color = getComputedStyle(canvas).color;\n c.strokeStyle = color;\n c.fillStyle = color;\n c.lineCap = \"round\";\n c.lineJoin = \"round\";\n return c;\n }, []);\n\n const redraw = useCallback(() => {\n const canvas = canvasRef.current;\n const c = ctx();\n if (!canvas || !c) return;\n c.clearRect(0, 0, canvas.width, canvas.height);\n for (const s of strokes.current) drawStroke(c, s);\n if (typedInk.current) {\n c.font = typedInk.current.font;\n c.textBaseline = \"middle\";\n c.fillText(typedInk.current.text, typedInk.current.x, typedInk.current.y);\n }\n }, [ctx]);\n\n useLayoutEffect(() => {\n const canvas = canvasRef.current;\n const box = boxRef.current;\n if (!canvas || !box) return;\n const resize = () => {\n const dpr = Math.min(window.devicePixelRatio || 1, 3);\n canvas.width = Math.round(box.clientWidth * dpr);\n canvas.height = Math.round(box.clientHeight * dpr);\n canvas.getContext(\"2d\")?.setTransform(dpr, 0, 0, dpr, 0, 0);\n redraw();\n };\n resize();\n const sizes = new ResizeObserver(resize);\n sizes.observe(box);\n const theme = new MutationObserver(redraw);\n theme.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\", \"style\"] });\n return () => {\n sizes.disconnect();\n theme.disconnect();\n };\n }, [redraw]);\n\n const onSignRef = useRef(onSign);\n onSignRef.current = onSign;\n useEffect(() => {\n redraw();\n if (!signedAt) return;\n const png = canvasRef.current?.toDataURL(\"image/png\");\n if (png) onSignRef.current?.(png, signedAt);\n }, [signedAt, redraw]);\n\n const point = (\n canvas: HTMLCanvasElement,\n e: { clientX: number; clientY: number; pointerType: string; pressure: number },\n prev?: Point,\n dt = 16,\n ): Point => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n let target: number;\n if (e.pointerType === \"pen\" && e.pressure > 0) {\n target = MIN_W + (MAX_W - MIN_W) * Math.min(e.pressure * 1.4, 1);\n } else {\n const speed = prev ? Math.hypot(x - prev.x, y - prev.y) / Math.max(dt, 1) : 0;\n target = Math.max(MIN_W, MAX_W - speed * 1.5);\n }\n return { x, y, w: prev ? prev.w * 0.65 + target * 0.35 : target * 0.8 };\n };\n\n const onPointerDown = (event: PointerEvent) => {\n if (signedAt || event.button !== 0) return;\n event.currentTarget.setPointerCapture(event.pointerId);\n const stroke: Stroke = [point(event.currentTarget, event)];\n live.current = { stroke, t: performance.now(), id: event.pointerId };\n strokes.current.push(stroke);\n const c = ctx();\n if (c) drawStroke(c, stroke);\n };\n\n const onPointerMove = (event: PointerEvent) => {\n const l = live.current;\n if (!l || l.id !== event.pointerId) return;\n const events = event.nativeEvent.getCoalescedEvents?.() ?? [event.nativeEvent];\n const c = ctx();\n for (const e of events) {\n const now = performance.now();\n const prev = l.stroke[l.stroke.length - 1];\n const p = point(event.currentTarget, e, prev, now - l.t);\n if (Math.hypot(p.x - prev.x, p.y - prev.y) < 1.2) continue;\n l.t = now;\n l.stroke.push(p);\n if (c) drawStroke(c, l.stroke, l.stroke.length - 1);\n }\n };\n\n const onPointerUp = () => {\n if (!live.current) return;\n live.current = null;\n setCount(strokes.current.length);\n };\n\n const undo = () => {\n strokes.current.pop();\n setCount(strokes.current.length);\n redraw();\n };\n\n const clear = () => {\n strokes.current = [];\n typedInk.current = null;\n setMode(\"draw\");\n setCount(0);\n setSignedAt(null);\n redraw();\n onClear?.();\n };\n\n const sign = () => {\n if (mode === \"type\") {\n strokes.current = [];\n const input = typedRef.current;\n const box = boxRef.current?.getBoundingClientRect();\n if (input && box) {\n const style = getComputedStyle(input);\n const r = input.getBoundingClientRect();\n typedInk.current = {\n text: typed.trim(),\n font: `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`,\n x: r.left - box.left + Number.parseFloat(style.paddingLeft) - 1,\n y: r.top - box.top + r.height / 2 + 2,\n };\n }\n }\n setSignedAt(new Date());\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"z\" && count && !signedAt) {\n event.preventDefault();\n undo();\n }\n };\n\n const empty = mode === \"draw\" ? count === 0 : !typed.trim();\n const when = signedAt\n ? new Intl.DateTimeFormat(\"en-GB\", { day: \"numeric\", month: \"short\", year: \"numeric\", hour: \"2-digit\", minute: \"2-digit\" }).format(signedAt)\n : \"\";\n\n return (\n
\n
\n \n {label}\n \n {!signedAt && (\n {\n setMode((m) => (m === \"draw\" ? \"type\" : \"draw\"));\n }}\n type=\"button\"\n >\n {mode === \"draw\" ? \"Type it instead\" : \"Draw it instead\"}\n \n )}\n
\n \n
\n ×\n \n
\n \n {empty && mode === \"draw\" && (\n \n \n Sign with a finger, mouse or pen\n \n )}\n \n \n {mode === \"type\" && !signedAt && (\n setTyped(event.target.value)}\n placeholder=\"Your full name\"\n ref={typedRef}\n value={typed}\n />\n )}\n \n {signedAt && (\n \n \n Signed\n \n )}\n \n
\n
\n {signedAt ? (\n

\n Signed by {signer} · {when}\n

\n ) : (\n
\n \n \n
\n )}\n {signedAt ? (\n \n ) : (\n \n )}\n
\n \n );\n}\n" } ] }