"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface SignaturePadProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  onSave?: (dataUrl: string) => void;
  height?: number;
}

const SaveIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M4 7.5V5a2 2 0 0 1 2-2h8l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2.5"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8 21v-6h8v6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M6 12h12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ClearIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 6l12 12M18 6l-12 12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export const SignaturePad = React.forwardRef<HTMLDivElement, SignaturePadProps>(
  ({ className, onSave, height = 220, ...props }, ref) => {
    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    const containerRef = React.useRef<HTMLDivElement>(null);
    const [isDrawing, setIsDrawing] = React.useState(false);
    const [hasSignature, setHasSignature] = React.useState(false);

    const resizeCanvas = React.useCallback(() => {
      const canvas = canvasRef.current;
      const container = containerRef.current;
      if (!canvas || !container) return;

      const ratio = window.devicePixelRatio || 1;
      const width = container.clientWidth;
      const heightValue = height;

      canvas.width = width * ratio;
      canvas.height = heightValue * ratio;
      canvas.style.width = `${width}px`;
      canvas.style.height = `${heightValue}px`;

      const context = canvas.getContext("2d");
      if (context) {
        context.scale(ratio, ratio);
        context.lineWidth = 2;
        context.lineCap = "round";
        const strokeColor = getComputedStyle(canvas).color;
        context.strokeStyle = strokeColor;
      }
    }, [height]);

    React.useEffect(() => {
      resizeCanvas();
      const observer = new ResizeObserver(() => resizeCanvas());
      if (containerRef.current) {
        observer.observe(containerRef.current);
      }
      return () => observer.disconnect();
    }, [resizeCanvas]);

    const getPoint = (event: React.PointerEvent<HTMLCanvasElement>) => {
      const canvas = canvasRef.current;
      if (!canvas) return { x: 0, y: 0 };
      const rect = canvas.getBoundingClientRect();
      return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top,
      };
    };

    const startDrawing = (event: React.PointerEvent<HTMLCanvasElement>) => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const context = canvas.getContext("2d");
      if (!context) return;

      const point = getPoint(event);
      context.beginPath();
      context.moveTo(point.x, point.y);
      setIsDrawing(true);
    };

    const draw = (event: React.PointerEvent<HTMLCanvasElement>) => {
      if (!isDrawing) return;
      const canvas = canvasRef.current;
      if (!canvas) return;
      const context = canvas.getContext("2d");
      if (!context) return;

      const point = getPoint(event);
      context.lineTo(point.x, point.y);
      context.stroke();
      setHasSignature(true);
    };

    const stopDrawing = () => {
      if (!isDrawing) return;
      setIsDrawing(false);
    };

    const clearCanvas = () => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const context = canvas.getContext("2d");
      if (!context) return;
      context.clearRect(0, 0, canvas.width, canvas.height);
      setHasSignature(false);
    };

    const saveSignature = () => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const dataUrl = canvas.toDataURL("image/png");
      onSave?.(dataUrl);
    };

    return (
      <div
        ref={(node) => {
          containerRef.current = node;
          if (typeof ref === "function") {
            ref(node);
          } else if (ref) {
            ref.current = node;
          }
        }}
        className={cn("w-full max-w-2xl", className)}
        {...props}
      >
        <div className="mb-2 flex items-center justify-between text-sm text-muted-foreground">
          <span>Sign inside the area below</span>
          <span>{hasSignature ? "Signature captured" : "Awaiting signature"}</span>
        </div>
        <div className="rounded-xl border border-border bg-card p-3">
          <canvas
            ref={canvasRef}
            onPointerDown={startDrawing}
            onPointerMove={draw}
            onPointerUp={stopDrawing}
            onPointerLeave={stopDrawing}
            className="w-full touch-none rounded-lg border border-dashed border-border bg-background text-foreground"
            role="img"
            aria-label="Signature pad"
          />
        </div>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={clearCanvas}
            className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <ClearIcon className="h-4 w-4" />
            Clear
          </button>
          <button
            type="button"
            onClick={saveSignature}
            disabled={!hasSignature}
            className={cn(
              "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm transition",
              hasSignature
                ? "bg-primary text-primary-foreground hover:bg-primary"
                : "bg-muted text-muted-foreground"
            )}
          >
            <SaveIcon className="h-4 w-4" />
            Save
          </button>
        </div>
      </div>
    );
  }
);

SignaturePad.displayName = "SignaturePad";
Signature Pad

Dependencies

Files

Installation
