{"_id":"@alsocoder/apna-input","_rev":"5-a1153feedc03b310e55bac32bbea5f64","name":"@alsocoder/apna-input","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@alsocoder/apna-input","version":"0.1.0","keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-input@0.1.0","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-input#readme","bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"dist":{"shasum":"691f533eb7609f9cdde86434ccf67acdcd79ce51","tarball":"https://registry.npmjs.org/@alsocoder/apna-input/-/apna-input-0.1.0.tgz","fileCount":10,"integrity":"sha512-AneA7pTmuHFyoTsRaXjp4E1Q2bJ3hlW7NGfkGYDM/SzohoFSYGrbjxbyqYyic36a0L6AFEQZxMQ0uOP6MAUrNA==","signatures":[{"sig":"MEUCIQDb+t4a5oNCo/tQqLZjl/HgaY4g565yz6e5P+6F+DAclQIgDSZLpkPAX3rl0hzqBYZwVBzocG1mmdwBZ4I+VGi75Gs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":137161},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"6cefb2e5fe0ff261519476a352877ffd9e396697","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-input.git","type":"git"},"_npmVersion":"12.0.1","description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","input-otp":"^1.4.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-input_0.1.0_1785581935227_0.3042116035411473","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alsocoder/apna-input","version":"0.1.1","keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-input@0.1.1","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-input#readme","bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"dist":{"shasum":"0e87b5cc32eb3a7c8aa1b4168e2fef8ffa5ad8c3","tarball":"https://registry.npmjs.org/@alsocoder/apna-input/-/apna-input-0.1.1.tgz","fileCount":11,"integrity":"sha512-SHoNznel/ctMHSBgzVU/YZUl4yetseSy3/00D96xSL6S+yY9VZxsiTLfideE2hz3YMYGfmDyk6Izp4hHla5fJQ==","signatures":[{"sig":"MEYCIQD+TAg7V1gNArOFFegOFuOjEiwvnnK9n9Zl1vcIGA2A5gIhAMBItBg652KxMg1G8ttzhV+p1vGbmGZRy4TnMQ98CMD3","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":150239},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"6cefb2e5fe0ff261519476a352877ffd9e396697","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-input.git","type":"git"},"_npmVersion":"12.0.1","description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","input-otp":"^1.4.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-input_0.1.1_1785770535277_0.15199538879282426","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alsocoder/apna-input","version":"0.1.2","keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-input@0.1.2","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-input#readme","bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"dist":{"shasum":"1b434ef13ab37c636acb79416e8b698dc5071806","tarball":"https://registry.npmjs.org/@alsocoder/apna-input/-/apna-input-0.1.2.tgz","fileCount":11,"integrity":"sha512-QEfmERx/TsSeNHlPLQ3FnRZ3NxtxeR5kr0myxuXysApQ4GdhR9MeiXu9ERDsEQWFRYfvA2ex29dLzV08zywAXw==","signatures":[{"sig":"MEYCIQCZY9Y38FHtjXpcABT/D63y/7wFs12mbofpQEqZxQrXxgIhAIcvMGKZAm/XrSg2nynHsKx6dIyiQGoc54xTGa+52HVN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":150639},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"25b449038c62438d4c9fa19a0e4d62c7c139cf9d","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-input.git","type":"git"},"_npmVersion":"12.0.1","description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","input-otp":"^1.4.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-input_0.1.2_1785802193064_0.8551111968981475","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@alsocoder/apna-input","version":"0.1.3","keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-input@0.1.3","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-input#readme","bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"dist":{"shasum":"dd80653b48c08eff4a5b13f89fb2f0ebd0fb6c5d","tarball":"https://registry.npmjs.org/@alsocoder/apna-input/-/apna-input-0.1.3.tgz","fileCount":11,"integrity":"sha512-kUEZ+ydQ7d8KRFJgQCKazw6cjOBkHwhlLm37HDj3dFnZdJ6LSHa7bYMNpvA7koRrVQkQdT4lfZttShmCXgfM6w==","signatures":[{"sig":"MEQCIBEzJ2Xyr5eO5/ceZtDmrEeYV31InUOAR+9kVe9XeqvMAiArHegc3J3nJfSFRErNPsrZiQwR6fzV1S4UuE7Ey0nEPQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":150961},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"25b449038c62438d4c9fa19a0e4d62c7c139cf9d","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-input.git","type":"git"},"_npmVersion":"12.0.1","description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","input-otp":"^1.4.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-input_0.1.3_1785804157795_0.5057772389306938","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@alsocoder/apna-input","version":"0.1.4","description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","license":"MIT","author":{"name":"Also Coder","url":"https://alsocoder.com"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-input.git"},"bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"homepage":"https://github.com/alsocoders/apna-input#readme","peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"clsx":"^2.1.1","input-otp":"^1.4.2"},"devDependencies":{"@types/react":"^19.1.8","@types/react-dom":"^19.1.6","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.9.2"},"gitHead":"25b449038c62438d4c9fa19a0e4d62c7c139cf9d","_id":"@alsocoder/apna-input@0.1.4","_nodeVersion":"24.16.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-u/oPiyM+60SORC2P3pgiiuHXb6DZmMKBFXj+NpCeCo9Sx4CALpCmAqvhmN3fITOaXuYJRjdamOkSp6LH/SxpNA==","shasum":"9609198782ea79e85b5526d2699a410996ed09cf","tarball":"https://registry.npmjs.org/@alsocoder/apna-input/-/apna-input-0.1.4.tgz","fileCount":11,"unpackedSize":151107,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB5ObpAJHtPyGXd80He93Y4bLasZZIZoxs+7dE7Z3SJKAiAqkbknVYX47VhnClwqK0voEKdxH3mXhmQ7mhvNzNI80A=="}]},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"directories":{},"maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apna-input_0.1.4_1786261494717_0.6825327842944333"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-01T10:58:55.039Z","modified":"2026-08-09T07:44:55.065Z","0.1.0":"2026-08-01T10:58:55.398Z","0.1.1":"2026-08-03T15:22:15.447Z","0.1.2":"2026-08-04T00:09:53.296Z","0.1.3":"2026-08-04T00:42:37.932Z","0.1.4":"2026-08-09T07:44:54.871Z"},"bugs":{"url":"https://github.com/alsocoders/apna-input/issues"},"author":{"name":"Also Coder","url":"https://alsocoder.com"},"license":"MIT","homepage":"https://github.com/alsocoders/apna-input#readme","keywords":["react","react-component","input","textarea","otp","one-time-password","form","form-control","ui-component","css-variables","accessible","a11y","typescript","apna-input","alsocoder"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-input.git"},"description":"React input, textarea, and OTP components with format presets, adornments, and CSS customization.","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"readme":"# @alsocoder/apna-input\r\n\r\nReact input, textarea, and OTP components with format presets, adornments, and full CSS customization. Works with or without Tailwind.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @alsocoder/apna-input\r\n```\r\n\r\nPeer dependencies: `react` and `react-dom` (>= 18).\r\n\r\n## Quick start\r\n\r\n```tsx\r\nimport \"@alsocoder/apna-input/styles.css\"\r\nimport { ApnaInput } from \"@alsocoder/apna-input\"\r\n\r\nexport function Example() {\r\n  return <ApnaInput placeholder=\"Enter your name\" />\r\n}\r\n```\r\n\r\n## Components\r\n\r\n### ApnaInput\r\n\r\nText input with optional label, left/right adornments, format presets, and sanitization.\r\n\r\n```tsx\r\n<ApnaInput\r\n  label=\"Mobile\"\r\n  format=\"phone-india\"\r\n  left=\"+91\"\r\n  required\r\n  value={phone}\r\n  onValueChange={setPhone}\r\n  onInvalid={(message) => console.error(message)}\r\n/>\r\n```\r\n\r\n**Format presets:** `phone-india`, `digits`, `alpha`, `alphanumeric`, `email`\r\n\r\n**Right action (password toggle):**\r\n\r\n```tsx\r\n<ApnaInput\r\n  type={show ? \"text\" : \"password\"}\r\n  right={{\r\n    icon: <EyeIcon />,\r\n    onClick: () => setShow((v) => !v),\r\n    ariaLabel: \"Toggle password\",\r\n  }}\r\n/>\r\n```\r\n\r\n### ApnaTextarea\r\n\r\n```tsx\r\n<ApnaTextarea label=\"Description\" rows={3} placeholder=\"Write notes...\" />\r\n```\r\n\r\n### ApnaOtpInput\r\n\r\nSegmented OTP input with configurable length, grouping, paste support, and iOS SMS autofill.\r\n\r\n```tsx\r\n<ApnaOtpInput\r\n  length={6}\r\n  groups={[3, 3]}\r\n  value={otp}\r\n  onValueChange={setOtp}\r\n  onComplete={(code) => verify(code)}\r\n  autoFocus\r\n  name=\"otp\"\r\n/>\r\n```\r\n\r\n**Props:**\r\n\r\n| Prop | Default | Description |\r\n|------|---------|-------------|\r\n| `length` | `6` | Number of digits/slots |\r\n| `groups` | `[length]` | Visual groups, e.g. `[3, 3]` |\r\n| `mask` | `false` | Show bullets instead of characters |\r\n| `separator` | auto | `true`, `false`, or custom ReactNode |\r\n| `onComplete` | — | Called when all slots are filled |\r\n| `invalid` | — | Error styling |\r\n| `invalidMessage` | — | Error text below input |\r\n\r\n**Composable API:**\r\n\r\n```tsx\r\nimport {\r\n  ApnaOtpInput,\r\n  ApnaOtpGroup,\r\n  ApnaOtpSlot,\r\n  ApnaOtpSeparator,\r\n} from \"@alsocoder/apna-input\"\r\n\r\n<ApnaOtpInput length={6} value={otp} onValueChange={setOtp}\r\n  render={() => (\r\n    <ApnaOtpGroup>\r\n      <ApnaOtpSlot index={0} />\r\n      {/* ... */}\r\n      <ApnaOtpSeparator />\r\n      <ApnaOtpSlot index={3} />\r\n    </ApnaOtpGroup>\r\n  )}\r\n/>\r\n```\r\n\r\n## Theming\r\n\r\n### Level 1 — CSS variables (no Tailwind)\r\n\r\n```css\r\n.my-form {\r\n  --apna-input-field-border: #3b82f6;\r\n  --apna-input-radius: 1rem;\r\n  --apna-otp-slot-size: 3rem;\r\n}\r\n```\r\n\r\n### Level 2 — shadcn tokens\r\n\r\nDefine `--primary`, `--border`, `--input`, `--foreground`, etc. on `:root`. Package CSS picks them up automatically via fallbacks.\r\n\r\n### Level 3 — classNames overrides\r\n\r\n```tsx\r\n<ApnaInput\r\n  classNames={{\r\n    field: \"rounded-xl shadow-sm\",\r\n    input: \"font-medium\",\r\n    left: \"text-muted-foreground\",\r\n  }}\r\n/>\r\n```\r\n\r\n### Level 4 — raw CSS\r\n\r\nTarget `.apna-input-field`, `.apna-otp-slot`, etc.\r\n\r\n### Level 5 — dark theme\r\n\r\n```html\r\n<div data-apna-input-theme=\"dark\">\r\n  <ApnaInput />\r\n  <ApnaOtpInput length={6} />\r\n</div>\r\n```\r\n\r\n## Exported utilities\r\n\r\n```ts\r\nimport {\r\n  apnaInputFormatPresets,\r\n  sanitizeApnaInputValue,\r\n  getApnaInputValidationMessage,\r\n  sanitizeIndianPhone,\r\n  defaultClassNames,\r\n  mergeClassNames,\r\n} from \"@alsocoder/apna-input\"\r\n```\r\n\r\n## Playground\r\n\r\n```bash\r\ncd playground\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}