{"_id":"@bolttech/molecules-input-combo","_rev":"5-162cfc34dce02aed2802008f96ad1522","name":"@bolttech/molecules-input-combo","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@bolttech/molecules-input-combo","version":"0.1.0","_id":"@bolttech/molecules-input-combo@0.1.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"3e145f81271414a609e21355f605b721f36a9e73","tarball":"https://registry.npmjs.org/@bolttech/molecules-input-combo/-/molecules-input-combo-0.1.0.tgz","fileCount":8,"integrity":"sha512-aTWQTX4hltYMDPduvBrEl3EqNp07uKyjKbH1tdUZNprJZFLaYefFFWFlmrEelcysHoKXIxrHPgATsHN/3voNoQ==","signatures":[{"sig":"MEYCIQDAmJNyxFDu1mjmrwnguNbm3vm/1B2YX5XP42Goedkg/QIhAP3XzIobMMIxKgeRf6QbDfVgqq9FIrE30xrRRKTX8b6y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82502},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"84950eb5816199cc64c0d9730af1baa7e0204950","_npmUser":{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},"_npmVersion":"10.8.2","description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"react":"19.1.2","react-dom":"19.1.2","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.5","@bolttech/atoms-icon":"0.24.8","@bolttech/atoms-select":"0.27.2","@bolttech/atoms-tooltip":"0.24.8","@bolttech/default-theme":"0.18.0","@bolttech/molecules-dropdown":"0.37.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-input-combo_0.1.0_1776868080500_0.665191137711012","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bolttech/molecules-input-combo","version":"0.1.1","_id":"@bolttech/molecules-input-combo@0.1.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"d2999cdf02fc3fe541295ea15e973aa236daa06f","tarball":"https://registry.npmjs.org/@bolttech/molecules-input-combo/-/molecules-input-combo-0.1.1.tgz","fileCount":8,"integrity":"sha512-khyIE1xFwCTDh9KQplw2ujKS/pAWemKe9DlOKUEAwa6Ph6QqvH59HMgFN2ckY3HNzHUx6kNv3RUR+OvLW5wtfg==","signatures":[{"sig":"MEQCIB/dWouLC2zVqbGbYrV7D1dLGmkW5FN9OF12SdmZZ5kWAiA/v2YwzBdZYkceppl93TL+y0SGjQCOlYmi6wY1PgWUxg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82514},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"72ac250120637f3670d7a94255e91b84b841c524","_npmUser":{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},"_npmVersion":"10.9.2","description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","directories":{},"_nodeVersion":"22.13.1","dependencies":{"react":"19.1.2","react-dom":"19.1.2","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.5","@bolttech/atoms-icon":"0.24.8","@bolttech/atoms-select":"0.27.2","@bolttech/atoms-tooltip":"0.24.8","@bolttech/default-theme":"0.18.2","@bolttech/molecules-dropdown":"0.37.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-input-combo_0.1.1_1776869371998_0.535192956934978","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bolttech/molecules-input-combo","version":"0.1.2","_id":"@bolttech/molecules-input-combo@0.1.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"09378a9a83dc1ac81eda39479614a03fbfd8f3b0","tarball":"https://registry.npmjs.org/@bolttech/molecules-input-combo/-/molecules-input-combo-0.1.2.tgz","fileCount":8,"integrity":"sha512-Iinw9eJV/s+oKmHC4vcOuno37NDuQW0HqvS7INI4h3VYvSkQA12JXqMMOdEiDcxzY3pcUeV1oEDAGON7PHiH0g==","signatures":[{"sig":"MEUCIAZTN5LXGD1kA9JaZXx829vq3fKcQS0xxNx1fd7555lTAiEAn2E7jBXqDXfc8gjGQtsO+7HBbqJTs4prC3TTKbdCRz0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82634},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"e432527f8ef6ece0c22cea51dae24c2266d264d7","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","@bolttech/divider":"0.22.3","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-input":"0.30.4","@bolttech/atoms-select":"0.27.3","@bolttech/molecules-dropdown":"0.37.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-input-combo_0.1.2_1780931488520_0.060285292172649774","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@bolttech/molecules-input-combo","version":"0.1.3","_id":"@bolttech/molecules-input-combo@0.1.3","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"87212aba0615624847f3ed90286f591edd318bfa","tarball":"https://registry.npmjs.org/@bolttech/molecules-input-combo/-/molecules-input-combo-0.1.3.tgz","fileCount":8,"integrity":"sha512-1zWREqkHq67C+tNps9hn3xY7Vxbw27vXKb66V29rR/u2wFc0R2Llo8J7I7xP0+8E6O/zW/nXL3m6BMpAXxTwyw==","signatures":[{"sig":"MEQCIDTbNGLSY8XIMBLhD4YaHGqlfti7hwHZF6lWl3aYco/nAiBg0ykajq19eG+46tIYB2jTzubqlCnEeA5OZaRIssXjdQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82707},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"4b46e76df4ac6ddee4d97303282bc5ae34d5ce10","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","@bolttech/divider":"0.22.3","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-input":"0.30.4","@bolttech/atoms-select":"0.27.4","@bolttech/molecules-dropdown":"0.37.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-input-combo_0.1.3_1781610315916_0.3409521864486451","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@bolttech/molecules-input-combo","version":"0.1.4","dependencies":{"styled-components":"6.1.1","react":"19.1.2","@bolttech/atoms-select":"0.27.4","@bolttech/molecules-dropdown":"0.37.5","@bolttech/atoms-input":"0.30.5","@bolttech/divider":"0.22.3","@bolttech/ui-utils":"0.6.7"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/molecules-input-combo@0.1.4","gitHead":"1984ca3ed7f7e12e5c0d7632d84145b4fd41d915","description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-A35pzhxOJIy7w4S2a1xS6DFbAV+0HjDYgZlI2uM1yTk5Sf/gOqS7eEjjfNvze3qp/Cu9tWpdJGdgtNV+udOqFw==","shasum":"e27ba55b4009f78f7698d413b4d8c054e61b2b3f","tarball":"https://registry.npmjs.org/@bolttech/molecules-input-combo/-/molecules-input-combo-0.1.4.tgz","fileCount":8,"unpackedSize":82707,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGzbjsKPldq7w0txjGLW/E4LAM35w7ThaWBwcN7RYGYcAiAh2x1cDa56q5pcAnFeT3fefcj+Zifc9d38lSJs/ZeeIQ=="}]},"_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/molecules-input-combo_0.1.4_1782741690882_0.5721389806962942"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T14:28:00.396Z","modified":"2026-06-29T14:01:31.373Z","0.1.0":"2026-04-22T14:28:00.627Z","0.1.1":"2026-04-22T14:49:32.145Z","0.1.2":"2026-06-08T15:11:28.667Z","0.1.3":"2026-06-16T11:45:16.065Z","0.1.4":"2026-06-29T14:01:31.019Z"},"description":"A composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# InputCombo Component\n\nA composite form field that combines a dropdown selector with a text input in a single container. Ideal for phone numbers with country codes, names with title prefixes, addresses with country selectors, or monetary values with currency pickers.\n\n## Installation\n\n```bash\nnpm install @bolttech/frontend-foundations @bolttech/molecules-input-combo\n```\n\nor\n\n```bash\nyarn add @bolttech/frontend-foundations @bolttech/molecules-input-combo\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| ---------------------- | --------------------------------------------- | -------------------- | -------------------------------------------------------------- |\n| id | `string` | `'input-combo-id'` | Unique identifier for the component. |\n| dataTestId | `string` | `'input-combo-test-id'` | The `data-testid` attribute for testing. |\n| variant | `'grey' \\| 'border'` | `'grey'` | Visual variant of the component. |\n| label | `string` | — | Label text for the text input. |\n| placeholder | `string` | — | Placeholder for the text input. |\n| required | `boolean` | — | Whether the field is required (shows asterisk). |\n| disabled | `boolean` | — | Disables the entire component. |\n| errorMessage | `string` | — | Error message — triggers error state when set. |\n| helperMessage | `string` | — | Helper text displayed below the field. |\n| value | `string` | — | Current value of the text input. |\n| dropdownValue | `string` | — | Currently selected dropdown option id. |\n| dropdownOptions | `DropdownOption[]` | **(required)** | Options for the dropdown prefix selector. |\n| dropdownLabel | `string` | `''` | Accessible label for the dropdown (visually hidden). |\n| dropdownPlaceholder | `string` | — | Placeholder for the dropdown search input. |\n| dropdownDisableSearch | `boolean` | `true` | Disables search/typing in the dropdown. |\n| fullWidth | `boolean` | — | Whether the component takes the full width of its container. |\n| icon | `string` | — | Icon name (Material Symbols Sharp). Defaults to `'info'` when tooltip is provided. |\n| usePortal | `boolean` | — | Render dropdown options in a portal (useful inside overflow containers). |\n| tooltip | `{ text: ReactNode; variant: string; size: string }` | — | Tooltip configuration for the info icon. |\n| onChange | `(combo: ComboValue) => void` | — | Unified callback — returns `{ id, label, value }` with dropdown and input data. |\n| onDropdownChange | `(option: DropdownOption) => void` | — | Callback when dropdown selection changes. |\n| onBlur | `(evt: FocusEvent) => void` | — | Callback when input loses focus. |\n| onFocus | `(evt: FocusEvent) => void` | — | Callback when input gains focus. |\n\n### DropdownOption\n\n```ts\ntype DropdownOption = {\n label: string;\n value: string;\n id: string;\n};\n```\n\n### ComboValue\n\n```ts\ntype ComboValue = {\n /** Value provided by the dropdown selected option id */\n id: string;\n /** Unified value from dropdown and input — e.g. \"+55 999888777\" */\n label: string;\n /** Value from typed input */\n value: string;\n};\n```\n\n## Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { InputCombo } from '@bolttech/molecules-input-combo';\nimport { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';\n\nconst phoneOptions = [\n { label: '+1', value: '+1', id: 'phone-1' },\n { label: '+44', value: '+44', id: 'phone-44' },\n { label: '+55', value: '+55', id: 'phone-55' },\n];\n\nconst PhoneInput = () => {\n const [inputValue, setInputValue] = useState('');\n const [dropdownId, setDropdownId] = useState('phone-1');\n\n return (\n \n setInputValue(combo.value)}\n onDropdownChange={(opt) => setDropdownId(opt.id)}\n tooltip={{ text: 'International format', variant: 'light', size: 'short' }}\n />\n \n );\n};\n\nexport default PhoneInput;\n```\n\n## Form Engine Integration\n\nThe component integrates with `@bolttech/form-engine` using schema-based configuration. Define the component in a form schema with `component: 'inputcombo'` and the engine handles value binding, validation, and error display automatically.\n\n### Schema example\n\n```tsx\nimport { Form, useForm } from '@bolttech/form-engine';\n\nconst phoneOptions = [\n { label: '+1', value: '+1', id: 'phone-1' },\n { label: '+55', value: '+55', id: 'phone-55' },\n];\n\nconst MyForm = () => {\n useForm({\n index: 'DEFAULT_ID',\n onData: ({ data }) => {\n console.log('Form data:', data);\n },\n });\n\n return (\n \n );\n};\n```\n\n### Key points\n\n- The `valueChangeEvent` returns both the raw value (`_value`) and the full event metadata (`_metadata`), giving the form engine access to the dropdown selection alongside the input text.\n- Use `useForm` with `onData` to observe form state changes in real time.\n- Schema-level `filters` (e.g. `onlyNumbers: true`) can be applied to restrict input.\n- Validations are triggered on configurable events (`ON_FIELD_BLUR`, `ON_FIELD_CHANGE`, `ON_FIELD_MOUNT`).\n\n## Variants\n\n### Grey (default)\nFilled background with no visible border in the default state. Border appears on focus and error states.\n\n### Border\nWhite background with a subtle border in all states.\n\n## States\n\n| State | Behavior |\n| ------------- | ------------------------------------------------------------------------ |\n| Default | Label and placeholder visible, dropdown shows selected option. |\n| Filled | Label color changes to subtle, input shows the entered value. |\n| Focus | Container border changes to focus color. |\n| Error | Red border, label turns red (danger), error message shown below. |\n| Error + Filled| Red border, label returns to subtle color, error message shown below. |\n| Disabled | All interactions disabled, muted colors for label, input, icon, dropdown.|\n\n## Accessibility\n\n- `aria-invalid` is set when `errorMessage` is provided.\n- `aria-errormessage` links the input to the error message element.\n- `aria-describedby` links the input to the helper text element.\n- `aria-required` is set when `required` is true.\n- `aria-labelledby` links the input to its label.\n- The dropdown has `aria-haspopup` and `aria-expanded` attributes.\n- The divider has `role=\"separator\"` with `aria-orientation=\"vertical\"`.\n\n## Theme Tokens\n\nThe component uses `theme.components.inputCombo` tokens for all styling, including:\n- Container: `borderRadius`, `borderWidth`, `paddingHorizontal`, `paddingVertical`\n- Colors per variant: `container.color`, `container.border`, `text.color.fieldLabel`, `text.color.inputPlaceholder`, `text.color.countryCode`, `icon.color`\n- Typography: `fieldLabel`, `inputPlaceholder`, `error`, `helper`\n\n## Internal Components\n\n- **atoms-input** (`@bolttech/atoms-input`) — renders the text input with label and icon.\n- **molecules-dropdown** (`@bolttech/molecules-dropdown`) — renders the dropdown prefix selector.\n- **atoms-divider** (`@bolttech/divider`) — renders the vertical divider between dropdown and input.\n\n## Contributing\n\nContributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.\n\nPlease make sure to follow the code standards and test your changes before submitting.\n","readmeFilename":"README.md"}