{"_id":"@darelmasis/signpad","_rev":"6-707426d8153512e3d5050864da58c554","name":"@darelmasis/signpad","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@darelmasis/signpad","version":"1.0.0","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","_id":"@darelmasis/signpad@1.0.0","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"dist":{"shasum":"e808b508789b64f4a4fd5584f6d8757af816274c","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.0.0.tgz","fileCount":8,"integrity":"sha512-MkefIONayFswr1xJOBA50903wQOmmck1rfETEupdM19ND1pG3Q1p/92P7TA57fppnms4M8n+fN4V78eAIR+IIw==","signatures":[{"sig":"MEUCIHscRDZmhDOAWnqVNEdmLA+uQAm9mG1l3qzdU2p6EqjAAiEA1EE3MzFfGJoCwZoMq4DIGplwERRTY0MVLEwk1onSAdY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":354968},"main":"./dist/signpad.umd.js","type":"module","module":"./dist/signpad.es.js","exports":{".":{"import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"gitHead":"7770af64f34b60295bdc12d17b8cecc35b389041","scripts":{"dev":"vite --host","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"repository":{"url":"git+https://github.com/darelmasis/signpad.git","type":"git"},"_npmVersion":"11.6.4","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"perfect-freehand":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","react":"^19.2.0","eslint":"^9.39.1","globals":"^16.5.0","react-dom":"^19.2.0","@eslint/js":"^9.39.1","prop-types":"^15.8.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@darelmasis/devlogger":"^0.5.1","@vitejs/plugin-react-swc":"^4.2.2","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/signpad_1.0.0_1765560191399_0.9151503382735158","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@darelmasis/signpad","version":"1.0.1","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","_id":"@darelmasis/signpad@1.0.1","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"dist":{"shasum":"2b067f800da9b624126759d5bcd971a7665aba06","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.0.1.tgz","fileCount":8,"integrity":"sha512-Ubz3OBhQUCBzQaA/ZDO0mOr5s1uLoiHGNuC+mURVWh67gfqmlavjzzD3dtMoOQkDPw46wMX24hZxoF0H2kE9tA==","signatures":[{"sig":"MEUCIQDTENQoe/0weeIBdibFJJisLahcwhZYx0FP2hlUyr9LYwIgcoWjNY5JBWFu5GBqP61Tv+yEcAAn1XIWm3nvn+8mPng=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":355064},"main":"./dist/signpad.umd.js","type":"module","module":"./dist/signpad.es.js","exports":{".":{"import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"gitHead":"66728e28f8e0fb472f3496bfd0116f68cfe6edd9","scripts":{"dev":"vite --host","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"repository":{"url":"git+https://github.com/darelmasis/signpad.git","type":"git"},"_npmVersion":"11.6.4","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"perfect-freehand":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","react":"^19.2.0","eslint":"^9.39.1","globals":"^16.5.0","react-dom":"^19.2.0","@eslint/js":"^9.39.1","prop-types":"^15.8.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@darelmasis/devlogger":"^0.5.1","@vitejs/plugin-react-swc":"^4.2.2","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/signpad_1.0.1_1765561668362_0.6011779099037233","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@darelmasis/signpad","version":"1.0.3","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","_id":"@darelmasis/signpad@1.0.3","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"dist":{"shasum":"53c750f4aa1c1a8c37877bb8c0d7a6b8516a7751","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.0.3.tgz","fileCount":8,"integrity":"sha512-gOkgwg8fLx5zbDxB+DQUQH3J4QCMw3ixUyZYw2QlCn/Z/Z+96QPVqQlvVN3Qv2DRC6Z2pe06nR1HZuliptO0Ig==","signatures":[{"sig":"MEYCIQDap9sc6ZU53tAkgKe5vQXxEmIJQC63RyMUFwMKhCb/lgIhAIvBYKWaVs8FH6Np7T+1F7eEAoz+0+vQoqA7YdJzNP/u","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":357422},"main":"./dist/signpad.umd.js","type":"module","module":"./dist/signpad.es.js","exports":{".":{"import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"gitHead":"3637886f2b3c52a842a6c927df36a12ce228d4ff","scripts":{"dev":"vite --host","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"repository":{"url":"git+https://github.com/darelmasis/signpad.git","type":"git"},"_npmVersion":"11.6.4","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"perfect-freehand":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","react":"^19.2.0","eslint":"^9.39.1","globals":"^16.5.0","react-dom":"^19.2.0","@eslint/js":"^9.39.1","prop-types":"^15.8.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@darelmasis/devlogger":"^0.5.1","@vitejs/plugin-react-swc":"^4.2.2","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/signpad_1.0.3_1765738454838_0.10935269164077432","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@darelmasis/signpad","version":"1.0.4","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","_id":"@darelmasis/signpad@1.0.4","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"dist":{"shasum":"adc57c497f16fed0cabae91a9c011c8277ace819","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.0.4.tgz","fileCount":8,"integrity":"sha512-Rgfu2dHdixd/YlAlH1yq4fA+wMcyRhdqoxqBJUZHttLc7mP0QP+x10cevsKaz5ebfaZw6/p+PydJDKEPkPfw2w==","signatures":[{"sig":"MEQCIHy1PIdVMCyJwvz6meWDlfYx9b/DIErNjQTajAhwJt9rAiBm5ev7R2xg7sVsz0bDVGoih3cSZlDlKh1YPG7/ykkimQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132370},"main":"./dist/signpad.umd.js","type":"module","types":"./src/index.d.ts","module":"./dist/signpad.es.js","exports":{".":{"types":"./src/index.d.ts","import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"gitHead":"bd3e69f6c118628cca269844970c28581ae5cbfa","scripts":{"dev":"vite --host","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"repository":{"url":"git+https://github.com/darelmasis/signpad.git","type":"git"},"_npmVersion":"11.6.4","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"perfect-freehand":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","react":"^19.2.0","eslint":"^9.39.1","globals":"^16.5.0","react-dom":"^19.2.0","@eslint/js":"^9.39.1","prop-types":"^15.8.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@darelmasis/devlogger":"^0.5.1","@vitejs/plugin-react-swc":"^4.2.2","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/signpad_1.0.4_1767274841483_0.6739602686616417","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@darelmasis/signpad","version":"1.1.0","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","_id":"@darelmasis/signpad@1.1.0","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"dist":{"shasum":"0630e51d3ce2546f898c538f1693c2d3d1ab4136","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.1.0.tgz","fileCount":9,"integrity":"sha512-5V//KH63XGfOjYnawLyBXIYftXxtwJ6hjAe+ykq6VgKfP1C89145gSnIW+gj74k72rAfp/JS+ioqq8HGJEdJcQ==","signatures":[{"sig":"MEYCIQCizCG4QSM18sbjSwM1eGbyIhgHUKBN0sublPfFKjNoTAIhAMV6Ja148SUqQ9YyIK8TTYEfhRfnz2la7PJFe8mV/qFQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":156366},"main":"./dist/signpad.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/signpad.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"gitHead":"c608fbb3d2e35b246f850b1d91af2f358bad2280","scripts":{"dev":"vite --host","lint":"eslint .","build":"vite build && node scripts/copy-types.mjs","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"repository":{"url":"git+https://github.com/darelmasis/signpad.git","type":"git"},"_npmVersion":"11.6.4","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"perfect-freehand":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","react":"^19.2.0","eslint":"^9.39.1","globals":"^16.5.0","react-dom":"^19.2.0","@eslint/js":"^9.39.1","prop-types":"^15.8.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@darelmasis/devlogger":"^0.5.1","@vitejs/plugin-react-swc":"^4.2.2","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/signpad_1.1.0_1784584714080_0.9124549820742913","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@darelmasis/signpad","version":"1.1.1","description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","type":"module","main":"./dist/signpad.umd.js","module":"./dist/signpad.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/signpad.es.js","require":"./dist/signpad.umd.js"},"./signpad.css":"./dist/signpad.css"},"publishConfig":{"access":"public"},"scripts":{"dev":"vite --host","build":"vite build && node scripts/copy-types.mjs","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"author":{"name":"Darel Masis"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darelmasis/signpad.git"},"homepage":"https://github.com/darelmasis/signpad#readme","bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"perfect-freehand":"^1.2.2"},"devDependencies":{"@darelmasis/devlogger":"^0.5.1","@eslint/js":"^9.39.1","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@vitejs/plugin-react-swc":"^4.2.2","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","prop-types":"^15.8.1","react":"^19.2.0","react-dom":"^19.2.0","vite":"^7.2.4"},"gitHead":"1eb3fdea9d2657170d8cc8b61a9c590452a5d1d0","_id":"@darelmasis/signpad@1.1.1","_nodeVersion":"22.17.1","_npmVersion":"11.6.4","dist":{"integrity":"sha512-G0kja055k8cjWJy+FCY7gqy/BxWSlTTPAGjFhfOxuC+BtlttdJT1pZxvVjE8YmgP1lkTUlDgfGlsg6xKmr4QCQ==","shasum":"b484f699a8255b4821700d790f908764debb6477","tarball":"https://registry.npmjs.org/@darelmasis/signpad/-/signpad-1.1.1.tgz","fileCount":9,"unpackedSize":157736,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIELygWaEbxE7OAgHV7218i6wyPuCDi1T7y0IIei3iQ/qAiBetox1mscjqgqLBRKmeLPKNdXzEa+qZPb6AtIyOMTuGg=="}]},"_npmUser":{"name":"darelmasis","email":"darrelmasis@gmail.com"},"directories":{},"maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/signpad_1.1.1_1784584969340_0.06370050314401299"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-12T17:23:11.328Z","modified":"2026-07-20T22:02:49.646Z","1.0.0":"2025-12-12T17:23:11.540Z","1.0.1":"2025-12-12T17:47:48.601Z","1.0.3":"2025-12-14T18:54:14.978Z","1.0.4":"2026-01-01T13:40:41.629Z","1.1.0":"2026-07-20T21:58:34.217Z","1.1.1":"2026-07-20T22:02:49.513Z"},"bugs":{"url":"https://github.com/darelmasis/signpad/issues"},"author":{"name":"Darel Masis"},"license":"MIT","homepage":"https://github.com/darelmasis/signpad#readme","keywords":["react","signature","sign","pad","canvas","svg","perfect-freehand","drawing","digital-signature","responsive","component","hook"],"repository":{"type":"git","url":"git+https://github.com/darelmasis/signpad.git"},"description":"Librería React headless para firmas digitales con trazos realistas usando perfect-freehand. Sin UI predefinida - 100% personalizable.","maintainers":[{"name":"darelmasis","email":"darrelmasis@gmail.com"}],"readme":"# SignPad\r\n\r\n> Librería React headless para captura de firmas digitales con trazos realistas usando perfect-freehand.\r\n\r\n[![npm version](https://img.shields.io/npm/v/@darelmasis/signpad.svg)](https://www.npmjs.com/package/@darelmasis/signpad)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\r\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@darelmasis/signpad)](https://bundlephobia.com/package/@darelmasis/signpad)\r\n\r\n## Características\r\n\r\n- **Trazos Realistas** - Powered by `perfect-freehand`\r\n- **Headless** - Sin UI predefinida, 100% personalizable\r\n- **Responsive** - Width 100% por defecto, adaptable\r\n- **Exportación Inteligente** - Solo guarda trazos, sin márgenes innecesarios\r\n- **Alta Calidad** - Exportación 3x con anti-aliasing\r\n- **Touch Optimizado** - Soporte completo táctil con presión\r\n- **Cursor Proporcional** - El cursor refleja el grosor del trazo\r\n- **Pantalla Completa** - Modo fullscreen con bloqueo landscape en móviles\r\n- **Ultra Ligero** - ~6.4 kB gzipped\r\n- **Accesible** - ARIA labels incluidos\r\n- **API Simple** - Métodos vía ref o hook `useSignPad`\r\n\r\n## Instalación\r\n\r\n```bash\r\nnpm install @darelmasis/signpad\r\n```\r\n\r\n## Uso Básico\r\n\r\n```jsx\r\nimport React, { useRef } from 'react';\r\nimport { SignPad } from '@darelmasis/signpad';\r\nimport '@darelmasis/signpad/signpad.css'; // opcional, ver abajo\r\n\r\nfunction App() {\r\n  const signPadRef = useRef(null);\r\n\r\n  const handleSave = async () => {\r\n    const dataUrl = await signPadRef.current?.save('png');\r\n    console.log('Firma guardada:', dataUrl);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <SignPad ref={signPadRef} height={300} />\r\n      \r\n      {/* Tus botones personalizados */}\r\n      <button onClick={() => signPadRef.current?.clear()}>\r\n        Limpiar\r\n      </button>\r\n      <button onClick={handleSave}>\r\n        Guardar\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Default | Descripción |\r\n|------|------|---------|-------------|\r\n| `width` | `string\\|number` | `'100%'` | Ancho del canvas |\r\n| `height` | `number` | `300` | Alto en píxeles |\r\n| `penColor` | `string` | `'#0004a6'` | Color del trazo |\r\n| `penSize` | `number` | `4` | Tamaño base del trazo (1-20) |\r\n| `thinning` | `number` | `0.5` | Adelgazamiento por velocidad (0-1) |\r\n| `smoothing` | `number` | `0.5` | Suavizado de curvas (0-1) |\r\n| `streamline` | `number` | `0.5` | Estabilización del trazo (0-1) |\r\n| `backgroundColor` | `string` | `'#ffffff'` | Color de fondo (solo para JPG) |\r\n| `onSave` | `function` | - | Callback: `(dataUrl, format) => void` |\r\n| `onClear` | `function` | - | Callback: `() => void` |\r\n| `onChange` | `function` | - | Callback al dibujar/borrar |\r\n| `disabled` | `boolean` | `false` | Deshabilita interacción |\r\n| `className` | `string` | `''` | Clases CSS adicionales |\r\n\r\n## Métodos (via ref)\r\n\r\n### `clear()`\r\nLimpia completamente el canvas.\r\n```jsx\r\nsignPadRef.current?.clear();\r\n```\r\n\r\n### `undo()`\r\nDeshace el último trazo dibujado.\r\n```jsx\r\nsignPadRef.current?.undo();\r\n```\r\n\r\n### `save(format, quality)`\r\nGuarda la firma y retorna un DataURL.\r\n- **Parámetros:**\r\n  - `format`: `'png'` | `'jpg'` | `'svg'` (default: `'png'`)\r\n  - `quality`: `0-1` (default: `1.0`)\r\n- **Retorna:** `Promise<string | null>`\r\n\r\n```jsx\r\nconst dataUrl = await signPadRef.current?.save('png', 1.0);\r\n```\r\n\r\n### `download(filename, format)`\r\nDescarga la firma automáticamente.\r\n```jsx\r\nsignPadRef.current?.download('mi-firma', 'png');\r\n```\r\n\r\n### `toBlob(format, quality)`\r\nConvierte la firma a Blob (útil para uploads).\r\n```jsx\r\nconst blob = await signPadRef.current?.toBlob('png');\r\n```\r\n\r\n### `isEmpty()`\r\nVerifica si el canvas está vacío.\r\n```jsx\r\nif (signPadRef.current?.isEmpty()) {\r\n  alert('Por favor dibuja una firma');\r\n}\r\n```\r\n\r\n### `getSvg()`\r\nObtiene el elemento SVG del DOM.\r\n```jsx\r\nconst svgElement = signPadRef.current?.getSvg();\r\n```\r\n\r\n## Ejemplos\r\n\r\n### Con Hook `useSignPad` (Opcional)\r\n\r\n```jsx\r\nimport { SignPad, useSignPad } from '@darelmasis/signpad';\r\n\r\nfunction App() {\r\n  const { signPadProps, clear, save, isEmpty } = useSignPad({\r\n    onSave: (dataUrl) => console.log('Guardado:', dataUrl),\r\n    onClear: () => console.log('Limpiado')\r\n  });\r\n\r\n  return (\r\n    <div>\r\n      <SignPad {...signPadProps} height={300} />\r\n      <button onClick={clear} disabled={isEmpty}>Limpiar</button>\r\n      <button onClick={() => save('png')} disabled={isEmpty}>Guardar</button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### En un Formulario\r\n\r\n```jsx\r\nfunction SignatureForm() {\r\n  const signPadRef = useRef(null);\r\n  const [signature, setSignature] = useState(null);\r\n\r\n  const handleSubmit = async (e) => {\r\n    e.preventDefault();\r\n    \r\n    if (signPadRef.current?.isEmpty()) {\r\n      alert('Por favor firma el documento');\r\n      return;\r\n    }\r\n\r\n    const dataUrl = await signPadRef.current?.save('png');\r\n    setSignature(dataUrl);\r\n    // Enviar formulario...\r\n  };\r\n\r\n  return (\r\n    <form onSubmit={handleSubmit}>\r\n      <label>Firma:</label>\r\n      <SignPad ref={signPadRef} height={200} />\r\n      \r\n      <button type=\"button\" onClick={() => signPadRef.current?.clear()}>\r\n        Limpiar\r\n      </button>\r\n      <button type=\"submit\">Enviar</button>\r\n    </form>\r\n  );\r\n}\r\n```\r\n\r\n### En un Modal Personalizado\r\n\r\n```jsx\r\nimport Modal from 'tu-libreria-modal'; // Usa tu modal favorito\r\n\r\nfunction SignatureModal({ isOpen, onClose }) {\r\n  const signPadRef = useRef(null);\r\n\r\n  const handleSave = async () => {\r\n    const dataUrl = await signPadRef.current?.save('png');\r\n    // Hacer algo con la firma\r\n    onClose();\r\n  };\r\n\r\n  return (\r\n    <Modal isOpen={isOpen} onClose={onClose}>\r\n      <h2>Firma Digital</h2>\r\n      <SignPad ref={signPadRef} height={300} />\r\n      \r\n      <button onClick={handleSave}>Guardar</button>\r\n      <button onClick={onClose}>Cancelar</button>\r\n    </Modal>\r\n  );\r\n}\r\n```\r\n\r\n### Upload a Servidor\r\n\r\n```jsx\r\nconst handleUpload = async () => {\r\n  const blob = await signPadRef.current?.toBlob('png');\r\n  \r\n  const formData = new FormData();\r\n  formData.append('signature', blob, 'signature.png');\r\n  \r\n  await fetch('/api/upload', {\r\n    method: 'POST',\r\n    body: formData\r\n  });\r\n};\r\n```\r\n\r\n## Personalización\r\n\r\n### Colores y Grosor\r\n\r\n```jsx\r\n<SignPad \r\n  penColor=\"#2196f3\"\r\n  penSize={3}\r\n  backgroundColor=\"#f5f5f5\"\r\n  thinning={0.7}\r\n  smoothing={0.8}\r\n  streamline={0.6}\r\n/>\r\n```\r\n\r\n### Estilos CSS Personalizados\r\n\r\n```jsx\r\n<SignPad className=\"mi-firma-custom\" height={250} />\r\n```\r\n\r\n```css\r\n.mi-firma-custom .signpad-canvas {\r\n  border: 2px solid #2196f3;\r\n  border-radius: 12px;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n}\r\n```\r\n\r\n### ¿Hace falta importar el CSS? (opcional)\r\n\r\n**No es obligatorio.** La librería aplica los estilos críticos **inline** en el\r\n`<svg>`, así que funciona sin importar nada:\r\n\r\n- `touch-action: none` → el dibujo táctil no hace scroll de la página.\r\n- `backgroundColor` → el fondo se pinta aunque no importe el CSS.\r\n- `cursor` proporcional → va inline según `penSize`.\r\n- `width=\"100%\"` por defecto → el SVG ocupa el contenedor.\r\n\r\nEl archivo `signpad.css` solo añade lo **cosmético** y el modo fullscreen:\r\n\r\n| Clase / selector | Afecta a | Para qué sirve |\r\n|------------------|------------|-------------|\r\n| `.signpad-container` | `<div>` raíz | `display:flex`, `user-select:none`, `touch-action:none`. |\r\n| `.signpad-canvas` | `<svg>` | `border-radius:4px`, `background:#fff`, `display:block`. |\r\n| `.signpad-disabled` | `<svg>` | `opacity:0.6` y `pointer-events:none` cuando `disabled`. |\r\n| `.signpad-container:fullscreen` | contenedor en FS | Hace que el pad llene el viewport (100vw×100vh). |\r\n\r\nSi **no** importas el CSS y usas pantalla completa, añade tú lo mínimo:\r\n\r\n```css\r\n.signpad-container:fullscreen {\r\n  width: 100vw; height: 100vh;\r\n  background: #fff; display: flex;\r\n  align-items: center; justify-content: center;\r\n}\r\n.signpad-container:fullscreen .signpad-canvas { width: 100%; height: 100%; }\r\n```\r\n\r\n### Exportación en Diferentes Formatos\r\n\r\n```jsx\r\n// PNG transparente (recomendado)\r\nconst pngUrl = await save('png', 1.0);\r\n\r\n// JPG con fondo blanco\r\nconst jpgUrl = await save('jpg', 0.95);\r\n\r\n// SVG vectorial (escalable infinitamente)\r\nconst svgUrl = await save('svg');\r\n```\r\n\r\n## Filosofía Headless\r\n\r\nSignPad es una librería **headless** - proporciona la funcionalidad sin imponer diseños.\r\n\r\n**Tú controlas:**\r\n- 🎨 Diseño de botones\r\n- 📦 Contenedores y modales\r\n- ✅ Validaciones\r\n- 🎯 Flujo de usuario\r\n- 🌈 Branding completo\r\n\r\n**La librería proporciona:**\r\n- Canvas SVG con trazos realistas\r\n- Métodos para control programático\r\n- Exportación en alta calidad\r\n- Estilos CSS mínimos\r\n\r\n## Bundle Size\r\n\r\n- **ES Module:** 15.32 kB\r\n- **Gzipped:** 5.60 kB\r\n- **CSS:** 0.32 kB\r\n\r\nUltra ligero y optimizado para producción.\r\n\r\n## Contribuir\r\n\r\nLas contribuciones son bienvenidas:\r\n\r\n1. Fork el repositorio\r\n2. Crea una rama (`git checkout -b feature/amazing`)\r\n3. Commit tus cambios (`git commit -m 'Add amazing feature'`)\r\n4. Push a la rama (`git push origin feature/amazing`)\r\n5. Abre un Pull Request\r\n\r\n## Licencia\r\n\r\nMIT © [Darel Masis](https://github.com/darelmasis)\r\n\r\n## Créditos\r\n\r\n- [perfect-freehand](https://github.com/steveruizok/perfect-freehand) - Trazos realistas\r\n- [React](https://react.dev) - Framework base\r\n\r\n---\r\n\r\n**¿Problemas o sugerencias?** [Abre un issue](https://github.com/darelmasis/signpad/issues)\r\n","readmeFilename":"README.md"}