{"_id":"@atom_design/input","name":"@atom_design/input","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/input","version":"1.0.0","description":"A versatile React Native input component supporting text, select, multiselect, chips, and search. Part of the Atom Design System.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","input","select","multiselect","chips","dropdown","form","ui-component","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0","react-native-vector-icons":">=9.0.0"},"_id":"@atom_design/input@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Rz/bLSU7UIJ2zexu5BYUaD8DPlEDv1Lvu5FfakA++sEhNCDfNEAmvLWusWTpL65zKtJH6EwSJHi49uWcDttR7g==","shasum":"f38583be5ce749302841f559d2ea53cfaad5f0f5","tarball":"https://registry.npmjs.org/@atom_design/input/-/input-1.0.0.tgz","fileCount":5,"unpackedSize":34672,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEzbbm3Y6vnONTLtT6pAATdGV6U23Y8uNcB1Wj4el8w2AiEAhmeNuiUyFPjR9uxpWnGI3KkWWn1306GCxjeM2eiCg1s="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/input_1.0.0_1764750050214_0.4132242677233209"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T08:20:50.078Z","1.0.0":"2025-12-03T08:20:50.437Z","modified":"2025-12-03T08:20:50.732Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A versatile React Native input component supporting text, select, multiselect, chips, and search. Part of the Atom Design System.","keywords":["react-native","input","select","multiselect","chips","dropdown","form","ui-component","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/input\n\nA versatile React Native input component supporting multiple input types including text, select, multiselect, chips, and search. Part of the Atom Design System.\n\n[![npm version](https://img.shields.io/npm/v/@atom_design/input.svg)](https://www.npmjs.com/package/@atom_design/input)\n[![license](https://img.shields.io/npm/l/@atom_design/input.svg)](https://github.com/atom-design/input/blob/main/LICENSE)\n\n## Features\n\n- 📝 **Multiple Types** - Text, select, multiselect, chips, search, withButton\n- 🔍 **Searchable Dropdown** - Filter options with search\n- 🏷️ **Chips Input** - Add/remove tags dynamically\n- 🎨 **Customizable** - Style all elements with custom props\n- ♿ **Accessible** - Full screen reader support\n- ⚡ **Optimized** - Memoized callbacks for performance\n- 💪 **TypeScript** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/input\n# or\nyarn add @atom_design/input\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types react-native-vector-icons\n```\n\n> **Note:** Make sure to follow the [react-native-vector-icons installation guide](https://github.com/oblador/react-native-vector-icons#installation) for your platform.\n\n---\n\n## 🚀 Basic Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\nimport Input from '@atom_design/input';\n\nconst App = () => {\n  const [name, setName] = useState('');\n\n  return (\n    <View style={{ flex: 1, padding: 20 }}>\n      <Input\n        type=\"text\"\n        label=\"Your Name\"\n        placeholder=\"Enter your name\"\n        value={name}\n        onChangeText={setName}\n      />\n    </View>\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🧩 Input Types\n\n### Text Input\n```jsx\n<Input\n  type=\"text\"\n  label=\"Email\"\n  placeholder=\"Enter email\"\n  leftIcon=\"email\"\n  value={email}\n  onChangeText={setEmail}\n/>\n```\n\n### Select Dropdown\n```jsx\n<Input\n  type=\"select\"\n  label=\"Country\"\n  placeholder=\"Select country\"\n  options={[\n    { label: 'United States', value: 'us' },\n    { label: 'Canada', value: 'ca' },\n    { label: 'United Kingdom', value: 'uk' },\n  ]}\n  value={country}\n  onChangeText={setCountry}\n/>\n```\n\n### Multi-Select\n```jsx\n<Input\n  type=\"multiselect\"\n  label=\"Skills\"\n  placeholder=\"Select skills\"\n  options={[\n    { label: 'JavaScript', value: 'js' },\n    { label: 'TypeScript', value: 'ts' },\n    { label: 'React', value: 'react' },\n  ]}\n  value={skills}\n  onChangeText={setSkills}\n/>\n```\n\n### Searchable Select\n```jsx\n<Input\n  type=\"selectWithSearch\"\n  label=\"City\"\n  placeholder=\"Search city\"\n  options={cities}\n  value={selectedCities}\n  onChangeText={setSelectedCities}\n/>\n```\n\n### Chips Input\n```jsx\n<Input\n  type=\"chips\"\n  label=\"Tags\"\n  chips={tags}\n  onAddChip={(chip) => setTags([...tags, chip])}\n  onRemoveChip={(chip) => setTags(tags.filter(t => t !== chip))}\n/>\n```\n\n### Input with Button\n```jsx\n<Input\n  type=\"withButton\"\n  label=\"OTP Verification\"\n  placeholder=\"Enter OTP\"\n  value={otp}\n  onChangeText={setOtp}\n  buttonProps={{\n    title: 'Verify',\n    onPress: handleVerify,\n  }}\n/>\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `string` | `'text'` | Input type: `text`, `select`, `multiselect`, `selectWithSearch`, `chips`, `withButton` |\n| `placeholder` | `string` | - | Placeholder text |\n| `value` | `string \\| array` | - | Current value |\n| `onChangeText` | `function` | - | Change handler |\n| `disabled` | `boolean` | `false` | Disable input |\n| `leftIcon` | `string` | - | Left icon name |\n| `rightIcon` | `string` | - | Right icon name |\n| `options` | `Option[]` | `[]` | Options for select types |\n| `buttonProps` | `ButtonProps` | `{}` | Button config for withButton |\n| `label` | `string` | - | Label above input |\n| `error` | `string` | - | Error message |\n| `chips` | `string[]` | `[]` | Chips for chips type |\n| `onAddChip` | `function` | - | Add chip callback |\n| `onRemoveChip` | `function` | - | Remove chip callback |\n| `containerStyle` | `ViewStyle` | - | Outer container style |\n| `inputStyle` | `ViewStyle` | - | Input container style |\n| `labelStyle` | `TextStyle` | - | Label style |\n| `errorStyle` | `TextStyle` | - | Error text style |\n| `testID` | `string` | - | Test ID |\n\n---\n\n## 🎨 Available Icons\n\nUses [MaterialIcons](https://fonts.google.com/icons) from `react-native-vector-icons`. Common shortcuts:\n\n| Shortcut | MaterialIcons Name |\n|----------|-------------------|\n| `search` | search |\n| `email` | email |\n| `send` | send |\n| `close` | close |\n| `check` | check |\n| `eye` | visibility |\n| `eye-off` | visibility-off |\n| `lock` | lock |\n| `user` | person |\n| `phone` | phone |\n| `calendar` | calendar-today |\n\nYou can also use any valid [MaterialIcons name](https://fonts.google.com/icons?icon.set=Material+Icons) directly.\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { SafeAreaView, ScrollView, Text, StyleSheet } from 'react-native';\nimport Input from '@atom_design/input';\n\nconst options = [\n  { label: 'Apple', value: 'apple' },\n  { label: 'Banana', value: 'banana' },\n  { label: 'Cherry', value: 'cherry' },\n  { label: 'Orange', value: 'orange' },\n  { label: 'Mango', value: 'mango' },\n];\n\nconst InputTestScreen = () => {\n  const [text, setText] = useState('');\n  const [email, setEmail] = useState('');\n  const [selected, setSelected] = useState('');\n  const [multiSelected, setMultiSelected] = useState([]);\n  const [searchSelected, setSearchSelected] = useState([]);\n  const [chips, setChips] = useState(['React', 'Native']);\n  const [otp, setOtp] = useState('');\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView contentContainerStyle={styles.content}>\n        <Text style={styles.header}>@atom_design/input</Text>\n\n        {/* Text Input */}\n        <Input\n          type=\"text\"\n          label=\"Name\"\n          placeholder=\"Enter your name\"\n          value={text}\n          onChangeText={setText}\n        />\n\n        {/* With Icon */}\n        <Input\n          type=\"text\"\n          label=\"Email\"\n          placeholder=\"Enter email\"\n          leftIcon=\"email\"\n          value={email}\n          onChangeText={setEmail}\n        />\n\n        {/* Disabled */}\n        <Input\n          type=\"text\"\n          label=\"Disabled Input\"\n          placeholder=\"Cannot edit\"\n          disabled\n        />\n\n        {/* With Error */}\n        <Input\n          type=\"text\"\n          label=\"Password\"\n          placeholder=\"Enter password\"\n          leftIcon=\"lock\"\n          error=\"Password is required\"\n        />\n\n        {/* Select */}\n        <Input\n          type=\"select\"\n          label=\"Select Fruit\"\n          placeholder=\"Choose one\"\n          options={options}\n          value={selected}\n          onChangeText={setSelected}\n        />\n\n        {/* Multiselect */}\n        <Input\n          type=\"multiselect\"\n          label=\"Select Multiple\"\n          placeholder=\"Choose fruits\"\n          options={options}\n          value={multiSelected}\n          onChangeText={setMultiSelected}\n        />\n\n        {/* Searchable Select */}\n        <Input\n          type=\"selectWithSearch\"\n          label=\"Search & Select\"\n          placeholder=\"Search fruits\"\n          options={options}\n          value={searchSelected}\n          onChangeText={setSearchSelected}\n        />\n\n        {/* Chips */}\n        <Input\n          type=\"chips\"\n          label=\"Tags\"\n          chips={chips}\n          onAddChip={(chip) => {\n            if (!chips.includes(chip)) {\n              setChips([...chips, chip]);\n            }\n          }}\n          onRemoveChip={(chip) => setChips(chips.filter(c => c !== chip))}\n        />\n\n        {/* With Button */}\n        <Input\n          type=\"withButton\"\n          label=\"OTP\"\n          placeholder=\"Enter OTP\"\n          value={otp}\n          onChangeText={setOtp}\n          buttonProps={{\n            title: 'Verify',\n            onPress: () => console.log('OTP:', otp),\n          }}\n        />\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  content: {\n    padding: 20,\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 24,\n    color: '#333',\n  },\n});\n\nexport default InputTestScreen;\n```\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript support included:\n\n```tsx\nimport Input, { Option, InputProps } from '@atom_design/input';\n\nconst options: Option[] = [\n  { label: 'Option 1', value: 'opt1' },\n  { label: 'Option 2', value: 'opt2' },\n];\n\nconst MyInput: React.FC = () => {\n  const [value, setValue] = useState<string>('');\n\n  return (\n    <Input\n      type=\"select\"\n      label=\"Choose\"\n      options={options}\n      value={value}\n      onChangeText={(val) => setValue(val as string)}\n    />\n  );\n};\n```\n\n---\n\n## ♿ Accessibility\n\nThe Input component includes full accessibility support:\n\n- All interactive elements have proper `accessibilityRole`\n- Labels and hints for screen readers\n- Focus management in dropdowns\n- Live region announcements for errors\n\n---\n\n## 👤 Author\n\nAtom Design Team\n\n---\n\n## 📄 License\n\nMIT © [Atom Design](https://github.com/atom-design)\n","readmeFilename":"README.md","_rev":"1-a0a409268fbe7442859dde5cce62269c"}