{"_id":"@atom-design-mog/input","_rev":"2-0b4ba0e04a9370c53d70323c0eec4473","name":"@atom-design-mog/input","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/input","version":"1.0.0","keywords":["react-native","input","select","multiselect","chips","component","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/input@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"fa4030ef656311e71561888f208acf3aec8a1d30","tarball":"https://registry.npmjs.org/@atom-design-mog/input/-/input-1.0.0.tgz","fileCount":3,"integrity":"sha512-0gSNcFSIby9oG1z08sqaNp/MNr5Z/cnVseeYiL6XkyekGwn4vdIPJXY1QN4fz1s+9CbIbSi75VP0Nw1VirfK3A==","signatures":[{"sig":"MEQCIESfArT3foppUOetVddgYrozRazoPlhOcjLYMxq0D6jLAiBVvkb/7dMoFVQ9AZ+Cuhq4NNR1HEDAjSCM+bHhBZfQDg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11630},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native Input component supporting text, select, multiselect, chips, and search.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/input_1.0.0_1763727583694_0.7971737786666238","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/input","version":"1.0.1","description":"A React Native Input component supporting text, select, multiselect, chips, and search.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","input","select","multiselect","chips","component","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/input@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-llMWrVKChRVdX6KRa4SAOh9VWiYfBZmf/2LfcTb0EaL7VTSumTqrKXk7SBSK9qAu1btDcMZV03g0UoQuJXgiKA==","shasum":"16f80acaad0db3d3d11ab30edf1c5803174f0dd3","tarball":"https://registry.npmjs.org/@atom-design-mog/input/-/input-1.0.1.tgz","fileCount":4,"unpackedSize":17733,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGtJR9dAk80qDtktF1EEc4fKTMvumvHPPwyEb6KrFjiaAiEAjdFXvA2j68U59FduLfCZtVk7BHBPZFBzexASp3Dxs1w="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/input_1.0.1_1763969494710_0.9926691884871388"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:19:43.588Z","modified":"2025-11-24T07:31:35.101Z","1.0.0":"2025-11-21T12:19:43.896Z","1.0.1":"2025-11-24T07:31:34.912Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","input","select","multiselect","chips","component","ui-component"],"description":"A React Native Input component supporting text, select, multiselect, chips, and search.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/input\n\nA fully customizable, multi-type Input component for React Native. Supports `text`, `select`, `multiselect`, `selectWithSearch`, `chips`, `withButton`, and more with a clean UI and flexible props.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/input\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/input\n```\n\n---\n\n## 🚀 Usage\n\n```javascript\nimport Input from '@atom-design-mog/input';\n\n// Simple text input\n<Input\n  type=\"text\"\n  label=\"Your Name\"\n  placeholder=\"Enter name\"\n  value={textValue}\n  onChangeText={setTextValue}\n/>\n```\n\n---\n\n## ✨ Supported Input Types\n\n- `text` — Normal text input\n- `select` — Dropdown select (single)\n- `multiselect` — Multi-select dropdown\n- `selectWithSearch` — Select with searchable options\n- `chips` — Add/remove dynamic chips\n- `withButton` — Input with inline button\n\n---\n\n## 🧩 Features Preview\n\n- Left / right icon support (emoji-based by default)\n- Placeholder, label, and error display\n- Modal-based dropdowns with search and multi-select footer\n- Chips UI with add/remove callbacks\n- Fully controlled via `value` and `onChangeText`\n\n---\n\n## 📘 Basic Examples\n\nText input\n\n```jsx\n<Input\n  type=\"text\"\n  label=\"Search\"\n  leftIcon=\"search\"\n  placeholder=\"Search...\"\n  value={searchValue}\n  onChangeText={setSearchValue}\n/>\n```\n\nSelect dropdown\n\n```jsx\n<Input\n  type=\"select\"\n  label=\"Select a fruit\"\n  placeholder=\"Choose\"\n  options={[{ label: 'Apple', value: 'Apple' }, { label: 'Banana', value: 'Banana' }]}\n  value={selectValue}\n  onChangeText={setSelectValue}\n/>\n```\n\nChips input\n\n```jsx\n<Input\n  type=\"chips\"\n  label=\"Tags\"\n  chips={chips}\n  onAddChip={handleAddChip}\n  onRemoveChip={handleRemoveChip}\n/>\n```\n\nWith button\n\n```jsx\n<Input\n  type=\"withButton\"\n  label=\"Enter OTP\"\n  placeholder=\"OTP\"\n  value={otp}\n  onChangeText={setOtp}\n  buttonProps={{ title: 'Verify', onPress: () => verifyOtp(otp) }}\n/>\n```\n\n---\n\n## 📋 Props Reference\n\n| Prop           | Type         | Description                                              |\n| -------------- | ------------ | -------------------------------------------------------- |\n| `type`         | string       | Defines component type (`text`, `select`, `chips`, etc.) |\n| `placeholder`  | string       | Placeholder text                                         |\n| `value`        | string/array | Input value                                              |\n| `onChangeText` | function     | Callback on change                                       |\n| `disabled`     | boolean      | Disables input                                           |\n| `leftIcon`     | string       | Built-in emoji icon                                      |\n| `rightIcon`    | string       | Built-in emoji icon                                      |\n| `options`      | array        | For select/multiselect                                   |\n| `buttonProps`  | object       | Props for inline button (type = `withButton`)            |\n| `label`        | string       | Top label                                                |\n| `error`        | string       | Error message                                            |\n| `chips`        | array        | Initial chip values                                      |\n| `onAddChip`    | function     | Add new chip                                             |\n| `onRemoveChip` | function     | Remove chip                                              |\n\n\n---\n\n## 🧪 Full Test Screen (Copy/Paste to Test)\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, ScrollView } from 'react-native';\nimport Input from '@atom-design-mog/input';\n\nexport default function TestInputsScreen() {\n  const [textValue, setTextValue] = useState('');\n  const [searchValue, setSearchValue] = useState('');\n  const [selectValue, setSelectValue] = useState('');\n  const [multiselectValue, setMultiselectValue] = useState([]);\n  const [withButtonValue, setWithButtonValue] = useState('');\n  const [chips, setChips] = useState(['Chip 1', 'Chip 2']);\n  const [selectWithSearchValue, setSelectWithSearchValue] = useState([]);\n\n  const options = [\n    { label: 'Option 1 - Apple', value: 'Apple' },\n    { label: 'Option 2 - Banana', value: 'Banana' },\n    { label: 'Option 3 - Cherry', value: 'Cherry' },\n    { label: 'Option 4 - Strawberry', value: 'Strawberry' },\n    { label: 'Option 5 - Peach', value: 'Peach' },\n  ];\n\n  const handleAddChip = (chip) => {\n    const trimmed = chip.trim();\n    if (trimmed && !chips.includes(trimmed)) setChips(prev => [...prev, trimmed]);\n  };\n\n  const handleRemoveChip = (chip) => setChips(prev => prev.filter(c => c !== chip));\n\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={{ padding: 20, gap: 20 }}>\n        <Input type=\"text\" label=\"Normal Input\" placeholder=\"Enter text\" value={textValue} onChangeText={setTextValue} />\n        <Input type=\"text\" label=\"Disabled Input\" placeholder=\"Disabled\" disabled />\n        <Input type=\"text\" label=\"Search Input\" leftIcon=\"search\" placeholder=\"Search...\" value={searchValue} onChangeText={setSearchValue} />\n        <Input type=\"select\" label=\"Select Dropdown\" placeholder=\"Select an option\" options={options} value={selectValue} onChangeText={setSelectValue} />\n        <Input type=\"multiselect\" label=\"Multiselect\" placeholder=\"Multi select\" options={options} value={multiselectValue} onChangeText={setMultiselectValue} />\n        <Input type=\"select\" label=\"Select with Error\" placeholder=\"Select value\" options={options} error=\"You must select a value\" />\n        <Input type=\"chips\" label=\"Chips\" chips={chips} onAddChip={handleAddChip} onRemoveChip={handleRemoveChip} />\n        <Input type=\"withButton\" label=\"Input + Button\" value={withButtonValue} onChangeText={setWithButtonValue} buttonProps={{ title: 'Submit', onPress: () => console.log(withButtonValue) }} />\n        <Input type=\"selectWithSearch\" label=\"Select with Search\" options={options} value={selectWithSearchValue} onChangeText={setSelectWithSearchValue} />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}