{"_id":"@codersandip/svelte-otp","_rev":"6-7b39a2afdaf389a5cc1d9a2d6bcc82bc","name":"@codersandip/svelte-otp","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.1":{"name":"@codersandip/svelte-otp","version":"0.0.1","keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.1","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"homepage":"https://github.com/codersandip/svelte-otp","bugs":{"url":"https://github.com/codersandip/svelte-otp/issues"},"dist":{"shasum":"7a40ee9321df7d07ec08b0653ad13c8a84287d54","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.1.tgz","fileCount":7,"integrity":"sha512-s6kHTdCMUoaV6vdsfTTFrhD4dIkAz+A/9OTsuLLXVjKWv1ias/7mVf8C+dywWLaIlM/EpP7VcXWfkqYrc7pK1Q==","signatures":[{"sig":"MEQCIH3g5/fYkKnjy6WZn5DHNofQA5qNb5EtnwH1l3Y4gaKJAiBBFdBVXk92/siwxTu6FuCXRErxct/d6e4CIeSJsjWFtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10043},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"47cebf700c7c999ec2dbfc8b490774a199ab7a8a","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"repository":{"url":"git+https://github.com/codersandip/svelte-otp.git","type":"git"},"_npmVersion":"10.2.4","description":"Simple component to assign scores based on stars.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","svelte":"^4.2.7","publint":"^0.1.9","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"*"},"_npmOperationalInternal":{"tmp":"tmp/svelte-otp_0.0.1_1724499247501_0.17827494401604027","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@codersandip/svelte-otp","version":"0.0.2","keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.2","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"homepage":"https://github.com/codersandip/svelte-otp","bugs":{"url":"https://github.com/codersandip/svelte-otp/issues"},"dist":{"shasum":"26fa5023a9fba64904e93b6aa8ea21b813ed2beb","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.2.tgz","fileCount":7,"integrity":"sha512-McF3XAoe3id5iVgZnhheM34N/wvUFfwP8Eu+U/iLIK1ktwY10DEbtVrhnVEG1F4Y8ywWcUuB1kbibrIyGG5WLg==","signatures":[{"sig":"MEUCIQC8SdEJQZ2rS0lWg9V3PTzBGL5g30UA785TXC8EIaoTIgIgXzFxgDA35wz8XRjrCrpyMPQAKysy1kDZJSqcoqeytaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10045},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"38ee9f4e9dd8f4712b55281a862770b7ba92a809","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"repository":{"url":"git+https://github.com/codersandip/svelte-otp.git","type":"git"},"_npmVersion":"10.2.4","description":"Simple component to assign scores based on stars.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","svelte":"^4.2.7","publint":"^0.1.9","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"*"},"_npmOperationalInternal":{"tmp":"tmp/svelte-otp_0.0.2_1724500325169_0.6767983893751528","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@codersandip/svelte-otp","version":"0.0.3","keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.3","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"homepage":"https://github.com/codersandip/svelte-otp","bugs":{"url":"https://github.com/codersandip/svelte-otp/issues"},"dist":{"shasum":"c9c088aab7a195ee0c4b0ffb18bdad664a4220be","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.3.tgz","fileCount":7,"integrity":"sha512-b5eV1b9a3fmMkF5w586i05eDjVJc4UdYRcLDGJgOzgU43hsE/RWNkF/tZBXETCC7SmT/zXYL+4b0jGT/LIM1sQ==","signatures":[{"sig":"MEUCIQC/mjTWNuoK9YTC+fLF07uqjJDcraTqTLIfsA/jTA7wZAIgbI7eA0/2IWrXXNZGxI10UGEH25audTOcaZ7YbAji4Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10059},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"38ee9f4e9dd8f4712b55281a862770b7ba92a809","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"repository":{"url":"git+https://github.com/codersandip/svelte-otp.git","type":"git"},"_npmVersion":"10.2.4","description":"Simple component to assign scores based on stars.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","svelte":"^4.2.7","publint":"^0.1.9","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"*"},"_npmOperationalInternal":{"tmp":"tmp/svelte-otp_0.0.3_1724511312401_0.6191983443114246","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@codersandip/svelte-otp","version":"0.0.4","keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.4","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"homepage":"https://github.com/codersandipdas/svelte-otp","bugs":{"url":"https://github.com/codersandipdas/svelte-otp/issues"},"dist":{"shasum":"5c1c6dcdd7fc8aa32c661473ad67a769e00e1b6b","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.4.tgz","fileCount":7,"integrity":"sha512-IPAmy6MF8SixeqUqyoej2ZQEQHp03knnhIbBF/xFDnetpGIWOUXMGTbBdnrl6eQb6A8qvjU8adl1M/mw0ib+lg==","signatures":[{"sig":"MEYCIQDak3/JIPz8hORZFNtfPLmGnvKjGrqO0aMMqFs/lCnEygIhANH4g9g6+bVMwiTBPIHKDK8EytyJUvc2xFUKhMRMKKJg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10231},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"4b9c4220ace2d17daa2f4b67b6d63fb531e39469","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"repository":{"url":"git+hhttps://github.com/codersandipdas/svelte-otp.git","type":"git"},"_npmVersion":"10.2.4","description":"Simple component to assign scores based on stars.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","svelte":"^4.2.7","publint":"^0.1.9","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"*"},"_npmOperationalInternal":{"tmp":"tmp/svelte-otp_0.0.4_1724511694579_0.3225368448454322","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@codersandip/svelte-otp","version":"0.0.5","keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.5","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"homepage":"https://github.com/codersandipdas/svelte-otp","bugs":{"url":"https://github.com/codersandipdas/svelte-otp/issues"},"dist":{"shasum":"fef125080d9449706d29e8b84664be60cf85b40f","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.5.tgz","fileCount":7,"integrity":"sha512-4P/WaoTKy9M2ceCAMXGuUQXjzt4TBfvUYyp9odBASzK5p/Qs1xoo1pA28YmocXWVRU9yYaWn9GnGFmhMQGm5eQ==","signatures":[{"sig":"MEYCIQCeEt10yy2djKCAlsSndrr3si7kaBv1tsErRC2MZiDW3QIhANLNkeQHLiSJbB2C56A4DmIIegVxwfP3Ej/W8vIJRJJd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12024},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"66284728121f2dfefe7316e228ec0fec8360d2b4","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package"},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"repository":{"url":"git+hhttps://github.com/codersandipdas/svelte-otp.git","type":"git"},"_npmVersion":"10.2.4","description":"Simple component to assign scores based on stars.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","svelte":"^4.2.7","publint":"^0.1.9","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0"},"peerDependencies":{"svelte":"*"},"_npmOperationalInternal":{"tmp":"tmp/svelte-otp_0.0.5_1724565811838_0.8183275761883217","host":"s3://npm-registry-packages"}},"0.0.6":{"name":"@codersandip/svelte-otp","version":"0.0.6","description":"Simple component to assign scores based on stars.","scripts":{"dev":"vite dev","build":"svelte-kit sync && svelte-package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"*"},"devDependencies":{"@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.3.4","@sveltejs/vite-plugin-svelte":"^3.0.0","publint":"^0.1.9","svelte":"^4.2.7","svelte-check":"^3.6.0","typescript":"^5.0.0","vite":"^5.0.11"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","homepage":"https://github.com/codersandipdas/svelte-otp","bugs":{"url":"https://github.com/codersandipdas/svelte-otp/issues"},"repository":{"type":"git","url":"git+hhttps://github.com/codersandipdas/svelte-otp.git"},"keywords":["svelte","otp","input"],"author":{"name":"Sandip Das"},"license":"MIT","_id":"@codersandip/svelte-otp@0.0.6","gitHead":"66284728121f2dfefe7316e228ec0fec8360d2b4","_nodeVersion":"18.19.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-9CzJferNeLvwchOtHb5iMhzAlLlNVaAh7+/wqUbJwRnZMBD4PWwVRCDMemGFIKmchlikFjsZYLt/AP90BIgAaA==","shasum":"c9aead66bff0895772959e67ecee31ba36f99211","tarball":"https://registry.npmjs.org/@codersandip/svelte-otp/-/svelte-otp-0.0.6.tgz","fileCount":7,"unpackedSize":11964,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGhm5xsgNlZvtmKiUpd0M89o/QMg35qvAUr2LlGrxDzFAiEA1GrGrCW0G4DnUGOz9NXYRHYMOTpUBU0exxWCabS+RG4="}]},"_npmUser":{"name":"codersandip","email":"sandy2020.dev@gmail.com"},"directories":{},"maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-otp_0.0.6_1745053942092_0.44345111955245775"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-24T11:34:07.411Z","modified":"2025-04-19T09:12:22.445Z","0.0.1":"2024-08-24T11:34:07.702Z","0.0.2":"2024-08-24T11:52:05.343Z","0.0.3":"2024-08-24T14:55:12.571Z","0.0.4":"2024-08-24T15:01:34.764Z","0.0.5":"2024-08-25T06:03:31.966Z","0.0.6":"2025-04-19T09:12:22.272Z"},"bugs":{"url":"https://github.com/codersandipdas/svelte-otp/issues"},"author":{"name":"Sandip Das"},"license":"MIT","homepage":"https://github.com/codersandipdas/svelte-otp","keywords":["svelte","otp","input"],"repository":{"type":"git","url":"git+hhttps://github.com/codersandipdas/svelte-otp.git"},"description":"Simple component to assign scores based on stars.","maintainers":[{"name":"codersandip","email":"sandy2020.dev@gmail.com"}],"readme":"# `@codersandip/svelte-otp`\n\nA Svelte component for creating OTP (One-Time Password) inputs. This component allows for customizable OTP input length, supports different input types, and handles various user interactions such as input, paste, and backspace events.\n\n[Demo Link](https://stackblitz.com/edit/svelte-otp?file=src%2FApp.svelte)\n\n## Features\n\n- **Customizable OTP Input Length**: Set the number of OTP input fields.\n- **Supports Different Input Types**: Choose between `text` and `number` input types.\n- **Configurable Placeholder**: Set a custom placeholder for the input fields.\n- **CSS Class Customization**: Apply custom CSS classes for styling.\n- **Automatic Focus Management**: Automatically focuses the next input field as the user types.\n\n## Installation\n\nTo install the package, use npm or yarn:\n\n```bash\nnpm install @codersandip/svelte-otp\n```\n\nor\n\n```bash\nyarn add @codersandip/svelte-otp\n```\n\n## Usage\n\nImport the OTP component into your Svelte application and use it as follows:\n\n```svelte\n<script>\n  import {OtpInput} from '@codersandip/svelte-otp';\n\n  let otpValue = '';\n\n  function handleOtpChange(newOtpValue) {\n    otpValue = newOtpValue;\n  }\n</script>\n\n<OtpInput\n  length={6}\n  inputType=\"number\"\n  placeholder=\"•\"\n  value={otpValue}\n  onChange={handleOtpChange}\n  inputWrapClass=\"custom-inputwrapper-class\"\n  inputClass=\"custom-input-class\"\n  containerClass=\"custom-container-class\"\n/>\n```\n\n## Props\n\n| Prop Name        | Type                                              | Default    | Required | Description                                                              |\n| ---------------- | ------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------------------ |\n| `length`         | number                                            | `6`        | No       | The number of OTP input fields.                                          |\n| `inputType`      | `\"text\"` \\| `\"number\"` \\| `\"password\"` \\| `\"tel\"` | `\"number\"` | No       | The type of input field.                                                 |\n| `placeholder`    | string                                            | `\"•\"`      | No       | The placeholder text for the input fields.                               |\n| `value`          | string                                            | `\"\"`       | No       | The initial value of the OTP input fields.                               |\n| `inputWrapClass` | string                                            | `\"\"`       | No       | Custom CSS class for the input wrapper div.                              |\n| `inputClass`     | string                                            | `\"\"`       | No       | Custom CSS class for the input fields.                                   |\n| `containerClass` | string                                            | `\"\"`       | No       | Custom CSS class for the container.                                      |\n| `onChange`       | function                                          | N/A        | Yes      | Callback function called with the current OTP value whenever it changes. |\n\n## Styling\n\nCustomize the appearance of the OTP inputs using the provided CSS classes or by adding your own styles. For example:\n\n```css\n.custom-inputwrapper-class {\n  /* Custom styles for the input wrap div */\n}\n.custom-input-class {\n  /* Custom styles for the input fields */\n}\n\n.custom-container-class {\n  /* Custom styles for the container */\n}\n```\n\n## Development\n\nTo build and test the package locally:\n\n### Clone the Repository:\n\n```bash\ngit clone https://github.com/codersandipdas/svelte-otp.git\ncd svelte-otp\n```\n\n### Install Dependencies:\n\n```bash\nnpm install\n```\n\n### Build the Package:\n\n```bash\nnpm run build\n```\n\n### Link the Package Locally (for Testing):\n\n```bash\nnpm link\n```\n\n### Use the Linked Package in Your Svelte Project:\n\n```bash\nnpm link @codersandip/svelte-otp\n```\n\n## Contributing\n\nContributions are welcome! If you have suggestions or improvements, please open an issue or submit a pull request on [GitHub](https://github.com/codersandipdas/svelte-otp).\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}