{"_id":"@atom-design-mog/tabs","_rev":"2-81790293ff0eb8f036becfc7c46c1475","name":"@atom-design-mog/tabs","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/tabs","version":"1.0.0","keywords":["react-native","tabs","ui-component","navigation","atom-design"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/tabs@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"213c8a5f89615c3dfdd94af6e99fece6c87386bf","tarball":"https://registry.npmjs.org/@atom-design-mog/tabs/-/tabs-1.0.0.tgz","fileCount":3,"integrity":"sha512-/M5W1rNjmU+wkE6lOvD4jrmH7AM3SbIAzvD6Okb6XAt1LBQLBbgD24TLNSB2V168qJq1BQI00qo3NF5L6XjB4A==","signatures":[{"sig":"MEUCIQDvL53C2hO0fQXIZ/5Q4HrUFk/I040IKGE+2DhRXa8TgwIgUiFmz0cLYncE8ADaQ/9/EwsJYescgugV32Nu4ifrI5I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4044},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A flexible React Native Tabs component with multiple style variants.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/tabs_1.0.0_1763728203431_0.1521126627572078","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/tabs","version":"1.0.1","description":"A flexible React Native Tabs component with multiple style variants.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","tabs","ui-component","navigation","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/tabs@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-fCP1vwwnLNWZbR5QNNIxdsbImLgppYdcAf4mAxAfoaIrHI/cPkgjLJZdh8B3/M8aeSeD57p9c3McqMelXzVebg==","shasum":"a28579599e7237257858a1db7a55270b3c2b186b","tarball":"https://registry.npmjs.org/@atom-design-mog/tabs/-/tabs-1.0.1.tgz","fileCount":4,"unpackedSize":8824,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEMi12q1eO6xG3AVu2ZmZ6tZRW6wunFZ30Koz2WgfROOAiB/875JVJSqkjUWBB7gfIVBX9kgJ7auhQo44QYY45nBMQ=="}]},"_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/tabs_1.0.1_1763974094677_0.9508806940146397"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:30:03.330Z","modified":"2025-11-24T08:48:15.050Z","1.0.0":"2025-11-21T12:30:03.620Z","1.0.1":"2025-11-24T08:48:14.845Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","tabs","ui-component","navigation","atom-design"],"description":"A flexible React Native Tabs component with multiple style variants.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/tabs\n\nA customizable and flexible Tabs Component for React Native with multiple variants like radius tabs, underline tabs, and rounded styles.\n\nThis package helps you easily implement switchable tab UIs with clean design and multiple appearance options.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/tabs\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/tabs\n```\n\n---\n\n## 📲 Import\n\n```js\nimport Tabs from '@atom-design-mog/tabs';\n```\n\n---\n\n## 🚀 Usage Example\n\n```javascript\nimport React, { useState } from 'react';\nimport { View, Text } from 'react-native';\nimport Tabs from '@atom-design-mog/tabs';\n\nexport default function App() {\n  const [activeTab, setActiveTab] = useState('0');\n\n  const TabNames = [\n    { id: '0', name: 'Tab 1' },\n    { id: '1', name: 'Tab 2' },\n    { id: '2', name: 'Tab 3' },\n  ];\n\n  return (\n    <View style={{ padding: 20 }}>\n      <Tabs\n        tabs={TabNames}\n        activeTab={activeTab}\n        onTabChange={setActiveTab}\n        variant=\"allRadius\"\n      />\n\n      <Text style={{ marginTop: 20 }}>Selected Tab: {activeTab}</Text>\n    </View>\n  );\n}\n```\n\n---\n\n## 🎨 Available Variants\n\n| Variant                    | Description                                     |\n| -------------------------- | ----------------------------------------------- |\n| **allRadius**              | All tabs have border-radius applied (default).  |\n| **leftRightRadius**        | Only first and last tab have rounded corners.   |\n| **noRadius**               | No border-radius on tabs.                       |\n| **roundedRadius**          | Fully rounded pill-shaped tabs.                 |\n| **dualLineTopRadius**      | Top radius for all tabs, good for card headers. |\n| **underLineTabBackground** | Underline-style tabs with bottom indicator.     |\n\n\n---\n\n## 🧪 Full Demo (as used in testing)\n\n```javascript\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView, StyleSheet } from 'react-native';\nimport Tabs from '@atom-design-mog/tabs';\n\nexport default function TestTabsScreen() {\n  const [activeTab1, setActiveTab1] = useState('0');\n  const [activeTab2, setActiveTab2] = useState('0');\n  const [activeTab3, setActiveTab3] = useState('0');\n  const [activeTab4, setActiveTab4] = useState('0');\n  const [activeTab5, setActiveTab5] = useState('0');\n  const [activeTab6, setActiveTab6] = useState('0');\n\n  const TabNames = [\n    { id: '0', name: 'Tab 1' },\n    { id: '1', name: 'Tab 2' },\n    { id: '2', name: 'Tab 3' },\n  ];\n\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={styles.wrapper}>\n        <Text style={styles.title}>All Radius Tabs</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab1} onTabChange={setActiveTab1} variant=\"allRadius\" />\n\n        <Text style={styles.title}>Left Right Radius Tabs</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab2} onTabChange={setActiveTab2} variant=\"leftRightRadius\" />\n\n        <Text style={styles.title}>No Radius Tabs</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab3} onTabChange={setActiveTab3} variant=\"noRadius\" />\n\n        <Text style={styles.title}>Rounded Radius Tabs</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab4} onTabChange={setActiveTab4} variant=\"roundedRadius\" />\n\n        <Text style={styles.title}>Dual Line Top Radius Tabs</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab5} onTabChange={setActiveTab5} variant=\"dualLineTopRadius\" />\n\n        <Text style={styles.title}>Underline Tab Background</Text>\n        <Tabs tabs={TabNames} activeTab={activeTab6} onTabChange={setActiveTab6} variant=\"underLineTabBackground\" />\n      </View>\n    </ScrollView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: { padding: 20, gap: 20 },\n  title: { fontSize: 16, fontWeight: '600', marginBottom: 6 },\n});\n```\n\n---\n\n## 📘 Props\n\n| Prop            | Type                | Required | Description                                                   |\n| --------------- | ------------------- | -------- | ------------------------------------------------------------- |\n| **tabs**        | `Array<{id, name}>` | ✔️ Yes   | Array of tabs with ID and display name.                       |\n| **activeTab**   | `string`            | ✔️ Yes   | Currently selected tab ID.                                    |\n| **onTabChange** | `(id) → void`       | ✔️ Yes   | Callback when tab changes.                                    |\n| **variant**     | `string`            | ✖️ No    | Apply any of the variants listed above. Default: `allRadius`. |\n\n\n---\n\n## 🎯 Features\n\n- Multiple customizable styles\n- Clean, responsive design\n- Easy integration and fully controlled behavior\n- Works with any React Native project\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}