{"_id":"@campino/phone-input","name":"@campino/phone-input","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@campino/phone-input","version":"1.0.0","description":"An HTML, CSS and TypeScript phone input component with an Alpine.js plugin.","keywords":["alpinejs","phone-input","telephone","typescript"],"homepage":"https://github.com/hynek-systems/campino-phone-input#readme","bugs":{"url":"https://github.com/hynek-systems/campino-phone-input/issues"},"license":"MIT","author":{"name":"Henric Söderlind","email":"henric.soderlind@outlook.com"},"repository":{"type":"git","url":"git+https://github.com/hynek-systems/campino-phone-input.git"},"type":"module","sideEffects":["**/*.css"],"exports":{".":"./dist/index.mjs","./package.json":"./package.json","./style.css":"./dist/style.css"},"publishConfig":{"access":"public"},"scripts":{"build":"vp pack","dev":"vp pack --watch","playground":"vp dev playground","test":"vp test","check":"vp check","generate:flags":"tsx scripts/generate-flags.ts","prepublishOnly":"vp run build","prepare":"vp config"},"dependencies":{"i18n-iso-countries":"^7.14.0","libphonenumber-js":"^1.13.10"},"devDependencies":{"@types/alpinejs":"^3.13.11","@types/node":"^26.1.1","alpinejs":"^3.15.12","bumpp":"^11.1.0","country-flag-icons":"^1.6.20","jsdom":"^30.0.1","tsx":"^4.23.4","typescript":"^6.0.3","vite":"npm:@voidzero-dev/vite-plus-core@0.2.4","vite-plus":"^0.2.4"},"peerDependencies":{"alpinejs":"^3.15.0"},"overrides":{"vite":"npm:@voidzero-dev/vite-plus-core@0.2.4"},"devEngines":{"packageManager":{"name":"npm","version":"12.0.2","onFail":"download"}},"gitHead":"8eafcb8ce073218aa6cfb366661aff616c1f8a11","_id":"@campino/phone-input@1.0.0","_nodeVersion":"24.19.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-p6b8Sbj8SDKEGpgo43P42C8GX5H+mFyLbYj30vuBMLDgRljd9jKjt5eO8Cobyd0cdXql0/42SE97jpMLud8k+g==","shasum":"e9863a72127782a103e3460d1b8755a59c12d6dd","tarball":"https://registry.npmjs.org/@campino/phone-input/-/phone-input-1.0.0.tgz","fileCount":6,"unpackedSize":274683,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCfu5rUDQ9eV8mRPf/xlY1vlauqjs0MlfbQkcTvWUpukgIgTGA2zo2QWXUOqvI/AvK/lIi9VSFFV6RdqQ71SbH9aCI="}]},"_npmUser":{"name":"campino","email":"henric.soderlind@outlook.com"},"directories":{},"maintainers":[{"name":"campino","email":"henric.soderlind@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/phone-input_1.0.0_1785855225844_0.33990177015120504"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-04T14:53:45.668Z","1.0.0":"2026-08-04T14:53:45.988Z","modified":"2026-08-04T14:53:46.272Z"},"maintainers":[{"name":"campino","email":"henric.soderlind@outlook.com"}],"description":"An HTML, CSS and TypeScript phone input component with an Alpine.js plugin.","homepage":"https://github.com/hynek-systems/campino-phone-input#readme","keywords":["alpinejs","phone-input","telephone","typescript"],"repository":{"type":"git","url":"git+https://github.com/hynek-systems/campino-phone-input.git"},"author":{"name":"Henric Söderlind","email":"henric.soderlind@outlook.com"},"bugs":{"url":"https://github.com/hynek-systems/campino-phone-input/issues"},"license":"MIT","readme":"# @campino/phone-input\n\nAccessible phone input for vanilla JavaScript and Alpine.js. It formats numbers nationally while\ntyping and stores valid numbers in E.164 format in the original form field.\n\n## Install\n\n```bash\nnpm install @campino/phone-input\n```\n\nImport the component styles once in your application:\n\n```ts\nimport \"@campino/phone-input/style.css\";\n```\n\n## Vanilla JavaScript\n\n```ts\nimport { PhoneInput } from \"@campino/phone-input\";\n\nconst input = document.querySelector<HTMLInputElement>(\"#phone\");\n\nif (input) {\n  const phone = new PhoneInput(input, {\n    defaultCountry: \"SE\",\n    preferredCountries: [\"SE\", \"NO\", \"DK\", \"FI\"],\n    locale: \"sv\",\n  });\n\n  // phone.value is E.164 when valid, otherwise the entered value.\n}\n```\n\nThe original input keeps its `name` and receives the submitted value. Native attributes including\n`required`, `disabled`, `readonly`, `placeholder`, autocomplete and relevant ARIA attributes are\napplied to the visible telephone input. Call `destroy()` to restore the original element.\n\n## Alpine.js\n\n```ts\nimport Alpine from \"alpinejs\";\nimport { phonePlugin } from \"@campino/phone-input\";\n\nAlpine.plugin(phonePlugin);\nAlpine.start();\n```\n\n```html\n<div x-data=\"{ phone: '' }\">\n  <label for=\"phone\">Phone number</label>\n  <input\n    id=\"phone\"\n    name=\"phone\"\n    x-model=\"phone\"\n    x-phone=\"{ defaultCountry: 'SE', preferredCountries: ['SE', 'NO'] }\"\n  />\n</div>\n```\n\nWithout options, the component defaults to Sweden and Swedish labels. Use `getPhoneInput(input)`\nto retrieve the `PhoneInput` instance created by the Alpine directive.\n\n## Options\n\n| Option               | Type                     | Default | Description                                        |\n| -------------------- | ------------------------ | ------- | -------------------------------------------------- |\n| `defaultCountry`     | `CountryCode`            | `\"SE\"`  | Country used for national parsing and formatting.  |\n| `preferredCountries` | `readonly CountryCode[]` | `[]`    | Countries shown first in the picker.               |\n| `locale`             | `\"sv\" \\| \"en\"`           | `\"sv\"`  | Language used for country names and picker labels. |\n\n## Styling\n\nOverride the component's CSS custom properties in your application:\n\n```css\n:root {\n  --cp-font-family: inherit;\n  --cp-focus-color: #176b4d;\n  --cp-picker-max-height: 20rem;\n  --cp-picker-min-width: 20rem;\n}\n```\n\nAll component class names use the `cp-` prefix.\n\n## Development\n\n```bash\nvp install\nvp check\nvp test\nvp run playground\nvp pack\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-e0ac8870abb92e18b13a5ef5f66bcc43"}