"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type SignaturePadHandle = { clear: () => void; toDataURL: () => string; isEmpty: () => boolean }; export type SignaturePadProps = { /** Called after each stroke with a PNG data URL, or null when cleared. */ onChange?: (dataUrl: string | null) => void; height?: number; /** Stroke colour. Defaults to the foreground token. */ color?: string; lineWidth?: number; className?: string; "aria-label"?: string; }; /** Draw a signature with mouse, pen or finger. Smooth strokes, retina-sharp. */ export const SignaturePad = React.forwardRef( ({ onChange, height = 180, color, lineWidth = 2.5, className, ...rest }, ref) => { const canvas = React.useRef(null); const last = React.useRef<{ x: number; y: number } | null>(null); const [empty, setEmpty] = React.useState(true); const ctx = () => canvas.current?.getContext("2d") ?? null; React.useEffect(() => { const c = canvas.current; if (!c) return; const resize = () => { const ratio = window.devicePixelRatio || 1; const { width } = c.getBoundingClientRect(); c.width = width * ratio; c.height = height * ratio; const g = c.getContext("2d")!; g.scale(ratio, ratio); g.lineCap = "round"; g.lineJoin = "round"; setEmpty(true); }; resize(); const ro = new ResizeObserver(resize); ro.observe(c); return () => ro.disconnect(); }, [height]); const clear = React.useCallback(() => { const c = canvas.current; const g = ctx(); if (!c || !g) return; g.save(); g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, c.width, c.height); g.restore(); setEmpty(true); onChange?.(null); }, [onChange]); React.useImperativeHandle(ref, () => ({ clear, toDataURL: () => canvas.current?.toDataURL("image/png") ?? "", isEmpty: () => empty, })); const point = (e: React.PointerEvent) => { const r = canvas.current!.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }; return (

); }, ); SignaturePad.displayName = "SignaturePad";

Signature Pad

Installation

Exports