4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1f68,"use client" import * as React from "react" import { Eraser, PenLine } from "lucide-react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Button } from "@/components/ui/ds-button" import { Label } from "@/components/ui/label" // ── Types ────────────────────────────────────────────────────────────────── export interface SignaturePadProps extends Omit< React.HTMLAttributes, "onChange" > { /** Base64 PNG value of the signature */ value?: string | null onChange?: (value: string | null) => void width?: number height?: number strokeColor?: string strokeWidth?: number label?: string clearLabel?: string placeholder?: string disabled?: boolean loading?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const signaturePadContainerVariants = cva("flex flex-col gap-2", { variants: {}, }) export const signaturePadCanvasVariants = cva( [ "cursor-crosshair touch-none rounded-lg border border-input bg-card", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", ].join(" "), { variants: { disabled: { true: "cursor-not-allowed opacity-50", false: "", }, isEmpty: { true: "", false: "", }, }, defaultVariants: { disabled: false, isEmpty: true }, } ) // ── SignaturePad ─────────────────────────────────────────────────────────── export function SignaturePad({ value, onChange, width = 480, height = 180, strokeColor, strokeWidth = 2, label = "Signature", clearLabel = "Clear", placeholder = "Sign here", disabled = false, loading = false, className, ...props }: SignaturePadProps) { const canvasRef = React.useRef(null) const [isDrawing, setIsDrawing] = React.useState(false) const [isEmpty, setIsEmpty] = React.useState(!value) const lastPoint = React.useRef<{ x: number; y: number } | null>(null) // Effective stroke color: use CSS var from foreground token const effectiveStrokeColor = strokeColor ?? "hsl(var(--foreground))" // ── Initialize canvas ───────────────────────────────────────────────── React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set DPR for crisp rendering const dpr = window.devicePixelRatio || 1 canvas.width = width * dpr canvas.height = height * dpr canvas.style.width = `${width}px` canvas.style.height = `${height}px` ctx.scale(dpr, dpr) ctx.strokeStyle = effectiveStrokeColor ctx.lineWidth = strokeWidth ctx.lineCap = "round" ctx.lineJoin = "round" }, [width, height, effectiveStrokeColor, strokeWidth]) // Load initial value React.useEffect(() => { if (!value) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const img = new Image() img.onload = () => { ctx.drawImage(img, 0, 0, width, height) setIsEmpty(false) } img.src = value }, [value, width, height]) // ── Pointer helpers ─────────────────────────────────────────────────── function getPos(e: React.MouseEvent | React.TouchEvent) { const canvas = canvasRef.current! const rect = canvas.getBoundingClientRect() if ("touches" in e) { const touch = e.touches[0]! return { x: touch.clientX - rect.left, y: touch.clientY - rect.top } } return { x: (e as React.MouseEvent).clientX - rect.left, y: (e as React.MouseEvent).clientY - rect.top, } } function startDrawing(e: React.MouseEvent | React.TouchEvent) { if (disabled) return e.preventDefault() setIsDrawing(true) const pos = getPos(e) lastPoint.current = pos const ctx = canvasRef.current?.getContext("2d") if (ctx) { ctx.beginPath() ctx.arc(pos.x, pos.y, strokeWidth / 2, 0, Math.PI * 2) ctx.fillStyle = effectiveStrokeColor ctx.fill() } setIsEmpty(false) } function draw(e: React.MouseEvent | React.TouchEvent) { if (!isDrawing || disabled) return e.preventDefault() const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const pos = getPos(e) if (lastPoint.current) { ctx.beginPath() ctx.moveTo(lastPoint.current.x, lastPoint.current.y) ctx.lineTo(pos.x, pos.y) ctx.stroke() } lastPoint.current = pos } function stopDrawing() { if (!isDrawing) return setIsDrawing(false) lastPoint.current = null const canvas = canvasRef.current if (!canvas) return const dataUrl = canvas.toDataURL("image/png") onChange?.(dataUrl) } function clearPad() { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) setIsEmpty(true) onChange?.(null) } // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return (

) } return (

{/* Label */}

{label}

{/* Canvas */}

) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button","label"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/signature-pad.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-signature-pad.tsx"}],"className":"h-[70svh] min-h-80"}]]}]