{"_id":"@aniruddha1806/password","_rev":"2-29330190fd60abd27ff9ca1a243eed1c","name":"@aniruddha1806/password","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aniruddha1806/password","version":"1.0.0","keywords":["react","password","input","strength","validation","security","form"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/password@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"c1562c6728c4e70ef414e194fb6a2bb86b8f183a","tarball":"https://registry.npmjs.org/@aniruddha1806/password/-/password-1.0.0.tgz","fileCount":7,"integrity":"sha512-MgL9YCs6HXbFtlPzKRRBpXemXBrRfuGzGPkwPUHJZmGun5wptC0rD+9yP3FIZPVxDFg1K4I84/4GjSn7GrI+Zw==","signatures":[{"sig":"MEYCIQDp3wpUpSLitFw5X3y1jXYyJuxRLB3aIp/B2uI6C9clMAIhANOD3eImc9goES32R49ILKWfHv0szQQJvteItPsrsNW9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33747},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable React password input component with strength validation","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.6","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.48","@types/react-dom":"^18.2.18","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/password_1.0.0_1743956861036_0.4072510457492562","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/password","version":"1.0.1","type":"module","description":"A customizable React password input component with strength validation","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"keywords":["react","password","input","strength","validation","security","form"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"tslib":"^2.6.2"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.48","@types/react-dom":"^18.2.18","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.9.6","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^5.3.3"},"_id":"@aniruddha1806/password@1.0.1","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-MuwrFaDCIVIm9YB2K0lnPCw/PZhA7h00rQlBj3s+DeZEL94tvtaHHovC0WyZZhSolAaMZoHxrzGS3m7h4sHPbw==","shasum":"f6ecb2fc47af03735089d3695e75f540717e8c53","tarball":"https://registry.npmjs.org/@aniruddha1806/password/-/password-1.0.1.tgz","fileCount":8,"unpackedSize":40168,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCh8G0KdoXea6jzcy6Tpc85hcSCWVQfkgwvJetY4/+86QIgTVdBuvAziYCE4ZAIK3VHumLz+9ZAAyjO89dj7n/8lyQ="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/password_1.0.1_1749127414196_0.5120672638886319"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-06T16:27:40.971Z","modified":"2025-06-05T12:43:34.529Z","1.0.0":"2025-04-06T16:27:41.245Z","1.0.1":"2025-06-05T12:43:34.376Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","password","input","strength","validation","security","form"],"description":"A customizable React password input component with strength validation","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Password Input\r\n\r\nA comprehensive, customizable password input component for React applications with real-time validation, strength meter, and security features. Built with TypeScript and zero dependencies.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/password\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 🔒 Real-time password strength validation\r\n- 👁️ Toggle password visibility\r\n- 📋 Copy to clipboard functionality\r\n- 📊 Visual strength meter with progress bar\r\n- ✅ Customizable validation requirements\r\n- 🎨 Fully customizable styling\r\n- ♿ Accessibility features with ARIA labels\r\n- 🔧 TypeScript support with full type definitions\r\n- 📱 Responsive design\r\n- 🪶 Zero dependencies and lightweight\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { PasswordInput } from '@aniruddha1806/password';\r\n\r\nfunction App() {\r\n  const handlePasswordChange = (password) => {\r\n    console.log('Password:', password);\r\n  };\r\n\r\n  return (\r\n    <div style={{ padding: '20px', maxWidth: '400px' }}>\r\n      <PasswordInput\r\n        label=\"Create Password\"\r\n        placeholder=\"Enter a strong password\"\r\n        onChange={handlePasswordChange}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `id` | `string` | `\"password\"` | HTML id attribute for the input |\r\n| `name` | `string` | `\"password\"` | HTML name attribute for the input |\r\n| `label` | `string` | `\"Password\"` | Label text displayed above the input |\r\n| `placeholder` | `string` | `\"Enter your password\"` | Placeholder text for the input |\r\n| `defaultValue` | `string` | `\"\"` | Initial value of the password input |\r\n| `required` | `boolean` | `true` | Whether the field is required |\r\n| `minLength` | `number` | `8` | Minimum required password length |\r\n| `requiredChars` | `object` | See below | Character requirements configuration |\r\n| `onChange` | `(value: string) => void` | `undefined` | Callback when password changes |\r\n| `className` | `string` | `\"\"` | Additional CSS class for container |\r\n| `labelClassName` | `string` | `\"\"` | Additional CSS class for label |\r\n| `inputClassName` | `string` | `\"\"` | Additional CSS class for input |\r\n| `errorClassName` | `string` | `\"\"` | Additional CSS class for error states |\r\n| `helpTextClassName` | `string` | `\"\"` | Additional CSS class for help text |\r\n| `disableCopy` | `boolean` | `false` | Disable the copy to clipboard button |\r\n\r\n### requiredChars Object\r\n\r\n| Property | Type | Default | Description |\r\n|----------|------|---------|-------------|\r\n| `uppercase` | `boolean` | `true` | Require at least one uppercase letter |\r\n| `lowercase` | `boolean` | `true` | Require at least one lowercase letter |\r\n| `number` | `boolean` | `true` | Require at least one number |\r\n| `special` | `boolean` | `true` | Require at least one special character |\r\n\r\n## Examples\r\n\r\n### Basic Usage\r\n\r\nSimple password input with default settings:\r\n\r\n```jsx\r\nimport { PasswordInput } from '@aniruddha1806/password';\r\n\r\nfunction BasicExample() {\r\n  return (\r\n    <div style={{ padding: '20px', maxWidth: '400px' }}>\r\n      <PasswordInput\r\n        label=\"Password\"\r\n        placeholder=\"Enter your password\"\r\n        onChange={(password) => console.log(password)}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Custom Validation Requirements\r\n\r\nCustomize which character types are required:\r\n\r\n```jsx\r\nimport { PasswordInput } from '@aniruddha1806/password';\r\n\r\nfunction CustomValidationExample() {\r\n  return (\r\n    <div style={{ padding: '20px', maxWidth: '400px' }}>\r\n      <PasswordInput\r\n        label=\"Simple Password\"\r\n        minLength={6}\r\n        requiredChars={{\r\n          uppercase: false,\r\n          lowercase: true,\r\n          number: true,\r\n          special: false\r\n        }}\r\n        placeholder=\"At least 6 characters with numbers\"\r\n        onChange={(password) => console.log(password)}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n### Custom Styled Password Input\r\n\r\nApply custom styling to match your design system:\r\n\r\n```jsx\r\nimport { PasswordInput } from '@aniruddha1806/password';\r\n\r\nfunction CustomStyledExample() {\r\n  return (\r\n    <div style={{ padding: '20px', maxWidth: '500px' }}>\r\n      <PasswordInput\r\n        label=\"Create Your Password\"\r\n        placeholder=\"Make it strong and unique\"\r\n        className=\"custom-password-container\"\r\n        labelClassName=\"custom-label\"\r\n        inputClassName=\"custom-input\"\r\n        helpTextClassName=\"custom-help\"\r\n        onChange={(password) => console.log(password)}\r\n      />\r\n\r\n      <style jsx>{`\r\n        .custom-password-container {\r\n          margin-bottom: 24px;\r\n        }\r\n        \r\n        .custom-label {\r\n          color: #1f2937 !important;\r\n          font-size: 16px !important;\r\n          font-weight: 600 !important;\r\n          margin-bottom: 8px !important;\r\n        }\r\n        \r\n        .custom-input {\r\n          padding: 16px 60px 16px 16px !important;\r\n          border: 2px solid #e5e7eb !important;\r\n          border-radius: 12px !important;\r\n          font-size: 16px !important;\r\n          background-color: #f9fafb !important;\r\n        }\r\n        \r\n        .custom-input:focus {\r\n          border-color: #8b5cf6 !important;\r\n          box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;\r\n          background-color: #ffffff !important;\r\n        }\r\n        \r\n        .custom-help {\r\n          background-color: #f3f4f6;\r\n          padding: 12px;\r\n          border-radius: 8px;\r\n          margin-top: 8px !important;\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { PasswordInput, PasswordInputProps } from '@aniruddha1806/password';\r\n\r\ninterface FormData {\r\n  email: string;\r\n  password: string;\r\n}\r\n\r\nconst SignupForm: React.FC = () => {\r\n  const [formData, setFormData] = useState<FormData>({\r\n    email: '',\r\n    password: ''\r\n  });\r\n\r\n  const handlePasswordChange = (password: string): void => {\r\n    setFormData(prev => ({ ...prev, password }));\r\n  };\r\n\r\n  const passwordProps: PasswordInputProps = {\r\n    label: \"Create Password\",\r\n    minLength: 10,\r\n    requiredChars: {\r\n      uppercase: true,\r\n      lowercase: true,\r\n      number: true,\r\n      special: true\r\n    },\r\n    onChange: handlePasswordChange\r\n  };\r\n\r\n  return (\r\n    <form>\r\n      <PasswordInput {...passwordProps} />\r\n    </form>\r\n  );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}