{"_id":"@atom-design-mog/search","_rev":"3-c499a9d190d7cf8a0d2e4c5f1ba50b02","name":"@atom-design-mog/search","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@atom-design-mog/search","version":"1.0.0","keywords":["react-native","search","filter","component","ui"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/search@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"3e5c631fed188d413c567a772b883cb0c207a1d7","tarball":"https://registry.npmjs.org/@atom-design-mog/search/-/search-1.0.0.tgz","fileCount":3,"integrity":"sha512-n1fdmSe8fW2bhSmXrEBq1nXRj1eaT/WO3JiINJ88MXFjBYzYyIaono7SiZrixPByS4Kdo4qM2sRxUBuwBCZIGw==","signatures":[{"sig":"MEQCIAtdWFbO7CMZslIh5nG8ondAt44VY8aH8E/zPsd2jUAwAiAZfyMXW6gs1rleg1osJkNlZe4WrvVGrpFu+fz+g7Soow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4090},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"Search component for Atom Design System in React Native","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/search_1.0.0_1763723668132_0.9544472743461707","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/search","version":"1.0.1","keywords":["react-native","search","filter","component","ui"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/search@1.0.1","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"57e368dcb148e71ae79a341661aaf07b26db8b34","tarball":"https://registry.npmjs.org/@atom-design-mog/search/-/search-1.0.1.tgz","fileCount":4,"integrity":"sha512-wFpPXQ6sbQE19fNphXB7Jn2VfgO/FiURywowYtHimJfHDclujfGgwoe3AihC2WLenMm1JSEKOqKKR8mF3RCkZg==","signatures":[{"sig":"MEUCIGQijiGjpM4SKyd3Z/WfO+ypNkZXl7GFeIH+g2ieU0pwAiEApo7QYEHaBhJUkc1yzp9wfjh7szzQGvUizbR3kPFvVmA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6821},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"Search component for Atom Design System in React Native","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/search_1.0.1_1763965451121_0.6779903329864938","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atom-design-mog/search","version":"1.0.2","description":"Search component for Atom Design System in React Native","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","search","filter","component","ui"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/search@1.0.2","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-8UWMQZs05lYGFsEQiuTMNE04ZcRvCQoS8pzzGL4e4Oc6eQsjbpTO5hFWIvp4XfEcZO+PojGm3ChDe6jbYsvLGA==","shasum":"3b9601978bc65f7d9000b99428e4b293433a8716","tarball":"https://registry.npmjs.org/@atom-design-mog/search/-/search-1.0.2.tgz","fileCount":4,"unpackedSize":7289,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIANf2FjvzVBRrp+rTbAXLLXLJwRyhEppQ3CL9L8fgzpUAiEAwAjPy6WQfLaDw8cQGEfx8oOy9k01gBH3KVDfRbmGboQ="}]},"_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/search_1.0.2_1763966229594_0.37380995420188556"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:14:28.033Z","modified":"2025-11-24T06:37:09.962Z","1.0.0":"2025-11-21T11:14:28.330Z","1.0.1":"2025-11-24T06:24:11.313Z","1.0.2":"2025-11-24T06:37:09.780Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","search","filter","component","ui"],"description":"Search component for Atom Design System in React Native","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"\n# @atom-design-mog/search\n\nA flexible and lightweight Search Component for React Native, built as part of the Atom Design System. Includes a built-in search bar, live filtering, selectable filter chips, and a customizable results list.\n\n🚀 Installation\n\nInstall using npm:\n\n```bash\nnpm install @atom-design-mog/search\n```\n\n📸 Preview\n\nThe component includes:\n\n- Search bar (TextInput + icon)\n- Filter chips (multi-select)\n- Results list (FlatList)\n- Custom callbacks for search, filter, and result selection\n\nUsage Example\n\n```javascript\nimport React, { useState } from 'react';\nimport { SafeAreaView } from 'react-native';\nimport Search from '@atom-design-mog/search';\n\nexport default function TestSearchScreen() {\n  const masterData = [\n    { id: '1', label: 'Result 1 - Moglix' },\n    { id: '2', label: 'Result 2 - Credlix' },\n    { id: '3', label: 'Result 3 - Zoglix' },\n  ];\n\n  const [results, setResults] = useState(masterData);\n\n  const filters = ['All', 'Category 1', 'Category 2'];\n\n  const handleSearch = (query) => {\n    const filtered = masterData.filter(item =>\n      item.label.toLowerCase().includes(query.toLowerCase())\n    );\n    setResults(filtered);\n  };\n\n  const handleFilterSelect = (selectedFilters) => {\n    console.log('Selected filters:', selectedFilters);\n  };\n\n  return (\n    <SafeAreaView style={{ flex: 1, padding: 16 }}>\n      <Search\n        placeholder=\"Search for items...\"\n        onSearch={handleSearch}\n        results={results}\n        filters={filters}\n        onFilterSelect={handleFilterSelect}\n      />\n    </SafeAreaView>\n  );\n}\n```\n\n\n🔧 Props API\n\n| Prop               | Type                                        | Default       | Description                                   |\n| ------------------ | ------------------------------------------- | ------------- | --------------------------------------------- |\n| **placeholder**    | `string`                                    | `\"Search...\"` | Placeholder text for the search input         |\n| **onSearch**       | `(query: string) => void`                   | `undefined`   | Callback triggered whenever text changes      |\n| **results**        | `{ id: string \\| number; label: string }[]` | `[]`          | Array of items to render as search results    |\n| **filters**        | `string[]`                                  | `[]`          | Array of filter labels shown as chips         |\n| **onFilterSelect** | `(selectedFilters: string[]) => void`       | `undefined`   | Returns updated list of selected filters      |\n| **onResultPress**  | `(item) => void`                            | `undefined`   | Triggered when a result item is tapped        |\n| **...props**       | `ViewProps`                                 | —             | Additional props passed to the container View |\n\n\n\n🎛 Features\n\n- 🔍 Live search updates\n- 🏷 Multi-select filter chips\n- 📋 FlatList result rendering\n- ⚡ Fast and lightweight\n- 🎨 Clean default styling\n- 🧩 Fully controlled by parent component\n\n\n📝 Notes\n\n- You control the filtering logic in `onSearch`.\n- You can apply custom outer layout using a wrapper view.\n- Works with both JavaScript and TypeScript.\n\n\n👤 Author\nAvi Gupta\n\n","readmeFilename":"README.md"}