{"_id":"@atom_design/tabs","name":"@atom_design/tabs","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/tabs","version":"1.0.0","description":"A flexible React Native Tabs component with multiple style variants, sizes, badges, and scrollable support.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","tabs","tab-bar","navigation","ui-component","atom-design","accessible"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0"},"_id":"@atom_design/tabs@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-VFx2PARG8R/q0NeU/3e55jjz/vtbXrxNKlmcwe1U95Dr275G665F7V8RX56c0stQHGCFEaxcLrsmvP2gial6Xg==","shasum":"67dc5a38cc93e2955a3f9daf3831867935df53ff","tarball":"https://registry.npmjs.org/@atom_design/tabs/-/tabs-1.0.0.tgz","fileCount":5,"unpackedSize":30178,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDrVmoyi/+uj/Ta0l7AYSn6+t55vI05ODegUvgLlE0lowIgDj7pdsXaof0FVG/B1EceJ6s1VsVLceVRf7xpfTU1THE="}]},"_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/tabs_1.0.0_1764742395413_0.9727995138647685"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T06:13:15.306Z","1.0.0":"2025-12-03T06:13:15.590Z","modified":"2025-12-03T06:13:16.253Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A flexible React Native Tabs component with multiple style variants, sizes, badges, and scrollable support.","keywords":["react-native","tabs","tab-bar","navigation","ui-component","atom-design","accessible"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/tabs\n\nA highly customizable, accessible React Native Tabs component with multiple style variants, sizes, badges, icons, and scrollable support.\n\n## Features\n\n- 🎨 **6 Variants**: allRadius, leftRightRadius, noRadius, roundedRadius, dualLineTopRadius, underline\n- 📏 **3 Sizes**: small, medium, large\n- 🔢 **Badges**: Built-in badge support with custom rendering\n- 🎯 **Icons**: Custom icon support for each tab\n- 📜 **Scrollable**: Horizontal scroll for many tabs\n- ♿ **Accessible**: Full accessibility support\n- 🎯 **TypeScript**: Full TypeScript definitions included\n- 🎨 **Customizable**: Style every part of the tabs\n\n## Installation\n\n```bash\nnpm install @atom_design/tabs\n# or\nyarn add @atom_design/tabs\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types\n```\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport Tabs from '@atom_design/tabs';\n\nconst App = () => {\n  const [activeTab, setActiveTab] = useState('1');\n\n  const tabs = [\n    { id: '1', name: 'Home' },\n    { id: '2', name: 'Profile' },\n    { id: '3', name: 'Settings' },\n  ];\n\n  return (\n    <Tabs\n      tabs={tabs}\n      activeTab={activeTab}\n      onTabChange={setActiveTab}\n    />\n  );\n};\n```\n\n### Variants\n\n```jsx\n// All corners rounded (default)\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"allRadius\" />\n\n// Only first and last tabs rounded\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"leftRightRadius\" />\n\n// No border radius\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"noRadius\" />\n\n// Fully rounded pill shape\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"roundedRadius\" />\n\n// Top corners rounded\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"dualLineTopRadius\" />\n\n// Underline style\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} variant=\"underLineTabBackground\" />\n```\n\n### Sizes\n\n```jsx\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} size=\"small\" />\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} size=\"medium\" />\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} size=\"large\" />\n```\n\n### With Badges\n\n```jsx\nconst tabsWithBadges = [\n  { id: '1', name: 'Inbox', badge: 5 },\n  { id: '2', name: 'Updates', badge: 12 },\n  { id: '3', name: 'Archive', badge: 0 },\n];\n\n<Tabs\n  tabs={tabsWithBadges}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  showBadge={true}\n/>\n```\n\n### With Icons\n\n```jsx\nimport Icon from 'react-native-vector-icons/MaterialIcons';\n\n<Tabs\n  tabs={tabs}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  renderIcon={(tab, isActive) => (\n    <Icon\n      name={tab.icon}\n      size={18}\n      color={isActive ? '#fff' : '#666'}\n    />\n  )}\n/>\n```\n\n### Scrollable Tabs\n\n```jsx\nconst manyTabs = [\n  { id: '1', name: 'Tab 1' },\n  { id: '2', name: 'Tab 2' },\n  { id: '3', name: 'Tab 3' },\n  { id: '4', name: 'Tab 4' },\n  { id: '5', name: 'Tab 5' },\n  { id: '6', name: 'Tab 6' },\n];\n\n<Tabs\n  tabs={manyTabs}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  scrollable={true}\n/>\n```\n\n### Custom Colors\n\n```jsx\n<Tabs\n  tabs={tabs}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  activeColor=\"#007AFF\"\n  activeBackgroundColor=\"#007AFF\"\n  inactiveColor=\"#888\"\n  inactiveBackgroundColor=\"#e0e0e0\"\n/>\n```\n\n### Custom Styling\n\n```jsx\n<Tabs\n  tabs={tabs}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  containerStyle={{ borderRadius: 12, padding: 6 }}\n  tabStyle={{ paddingVertical: 14 }}\n  activeTabStyle={{ shadowOpacity: 0.2 }}\n  textStyle={{ fontWeight: '500' }}\n  activeTextStyle={{ fontWeight: 'bold' }}\n/>\n```\n\n### Disabled State\n\n```jsx\n// Disable all tabs\n<Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} disabled={true} />\n\n// Disable individual tabs\nconst tabsWithDisabled = [\n  { id: '1', name: 'Active' },\n  { id: '2', name: 'Disabled', disabled: true },\n  { id: '3', name: 'Active' },\n];\n<Tabs tabs={tabsWithDisabled} activeTab={activeTab} onTabChange={setActiveTab} />\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `tabs` | `TabItem[]` | `[]` | Array of tab items (required) |\n| `activeTab` | `string \\| number` | - | Currently active tab ID |\n| `onTabChange` | `(tabId) => void` | - | Callback when tab changes |\n| `variant` | `TabVariant` | `'allRadius'` | Visual style variant |\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` | Tab size |\n| `disabled` | `boolean` | `false` | Disable all tabs |\n| `scrollable` | `boolean` | `false` | Enable horizontal scrolling |\n| `showBadge` | `boolean` | `false` | Show badges on tabs |\n| `activeColor` | `string` | `'#d9232d'` | Active text/border color |\n| `inactiveColor` | `string` | `'#666'` | Inactive text color |\n| `activeBackgroundColor` | `string` | `'#d9232d'` | Active background color |\n| `inactiveBackgroundColor` | `string` | `'#f0f0f0'` | Container background color |\n| `containerStyle` | `StyleProp<ViewStyle>` | - | Container style |\n| `tabStyle` | `StyleProp<ViewStyle>` | - | Each tab style |\n| `activeTabStyle` | `StyleProp<ViewStyle>` | - | Active tab style |\n| `textStyle` | `StyleProp<TextStyle>` | - | Text style |\n| `activeTextStyle` | `StyleProp<TextStyle>` | - | Active text style |\n| `badgeStyle` | `StyleProp<ViewStyle>` | - | Badge style |\n| `renderIcon` | `(tab, isActive) => ReactNode` | - | Custom icon renderer |\n| `renderBadge` | `(tab, isActive) => ReactNode` | - | Custom badge renderer |\n| `testID` | `string` | - | Test ID for testing |\n\n### TabItem Interface\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `id` | `string \\| number` | Yes | Unique identifier |\n| `name` | `string` | Yes | Display name |\n| `badge` | `string \\| number` | No | Badge value |\n| `disabled` | `boolean` | No | Disable this tab |\n| `accessibilityLabel` | `string` | No | Custom a11y label |\n\n### Available Variants\n\n| Variant | Description |\n|---------|-------------|\n| `allRadius` | All tabs have rounded corners (default) |\n| `leftRightRadius` | Only first and last tabs have rounded corners |\n| `noRadius` | No border radius on tabs |\n| `roundedRadius` | Fully rounded pill-shaped tabs |\n| `dualLineTopRadius` | Top corners rounded, good for card headers |\n| `underLineTabBackground` | Underline-style tabs with bottom indicator |\n\n## Accessibility\n\nThe Tabs component is fully accessible:\n\n- Uses `accessibilityRole=\"tab\"` for each tab\n- Uses `accessibilityRole=\"tablist\"` for container\n- Announces selected state via `accessibilityState`\n- Reports disabled state\n- Provides position hint (\"Tab 1 of 3\")\n\n## Full Test Screen Example\n\nCopy this complete screen to test all tabs variations in your app:\n\n```jsx\nimport React, { useState } from 'react';\nimport { ScrollView, View, Text, StyleSheet } from 'react-native';\nimport Tabs from '@atom_design/tabs';\n// Optional: for custom icons\n// import Icon from 'react-native-vector-icons/MaterialIcons';\n\nconst TabsTestScreen = () => {\n  const [activeTab1, setActiveTab1] = useState('1');\n  const [activeTab2, setActiveTab2] = useState('1');\n  const [activeTab3, setActiveTab3] = useState('1');\n  const [activeTab4, setActiveTab4] = useState('1');\n  const [activeTab5, setActiveTab5] = useState('1');\n  const [activeTab6, setActiveTab6] = useState('1');\n  const [activeTab7, setActiveTab7] = useState('1');\n  const [activeTab8, setActiveTab8] = useState('1');\n  const [activeTab9, setActiveTab9] = useState('1');\n  const [activeTab10, setActiveTab10] = useState('1');\n  const [activeTab11, setActiveTab11] = useState('1');\n  const [activeTab12, setActiveTab12] = useState('1');\n\n  // Basic tabs\n  const basicTabs = [\n    { id: '1', name: 'Home' },\n    { id: '2', name: 'Profile' },\n    { id: '3', name: 'Settings' },\n  ];\n\n  // Tabs with badges\n  const badgeTabs = [\n    { id: '1', name: 'Inbox', badge: 5 },\n    { id: '2', name: 'Updates', badge: 23 },\n    { id: '3', name: 'Spam', badge: 100 },\n  ];\n\n  // Many tabs for scrollable\n  const manyTabs = [\n    { id: '1', name: 'Overview' },\n    { id: '2', name: 'Analytics' },\n    { id: '3', name: 'Reports' },\n    { id: '4', name: 'Users' },\n    { id: '5', name: 'Settings' },\n    { id: '6', name: 'Help' },\n  ];\n\n  // Tabs with disabled\n  const mixedTabs = [\n    { id: '1', name: 'Active' },\n    { id: '2', name: 'Disabled', disabled: true },\n    { id: '3', name: 'Active' },\n  ];\n\n  // Two tabs\n  const twoTabs = [\n    { id: '1', name: 'Option A' },\n    { id: '2', name: 'Option B' },\n  ];\n\n  return (\n    <ScrollView style={styles.container} contentContainerStyle={styles.content}>\n      <Text style={styles.title}>@atom_design/tabs</Text>\n      <Text style={styles.subtitle}>Complete Component Test</Text>\n\n      {/* VARIANTS SECTION */}\n      <Text style={styles.sectionTitle}>Variants</Text>\n\n      <Text style={styles.label}>All Radius (Default)</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab1}\n        onTabChange={setActiveTab1}\n        variant=\"allRadius\"\n      />\n\n      <Text style={styles.label}>Left Right Radius</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab2}\n        onTabChange={setActiveTab2}\n        variant=\"leftRightRadius\"\n      />\n\n      <Text style={styles.label}>No Radius</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab3}\n        onTabChange={setActiveTab3}\n        variant=\"noRadius\"\n      />\n\n      <Text style={styles.label}>Rounded Radius (Pill)</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab4}\n        onTabChange={setActiveTab4}\n        variant=\"roundedRadius\"\n      />\n\n      <Text style={styles.label}>Dual Line Top Radius</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab5}\n        onTabChange={setActiveTab5}\n        variant=\"dualLineTopRadius\"\n      />\n\n      <Text style={styles.label}>Underline Style</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab6}\n        onTabChange={setActiveTab6}\n        variant=\"underLineTabBackground\"\n      />\n\n      {/* SIZES SECTION */}\n      <Text style={styles.sectionTitle}>Sizes</Text>\n\n      <Text style={styles.label}>Small</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab7}\n        onTabChange={setActiveTab7}\n        size=\"small\"\n      />\n\n      <Text style={styles.label}>Medium (Default)</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab7}\n        onTabChange={setActiveTab7}\n        size=\"medium\"\n      />\n\n      <Text style={styles.label}>Large</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab7}\n        onTabChange={setActiveTab7}\n        size=\"large\"\n      />\n\n      {/* BADGES SECTION */}\n      <Text style={styles.sectionTitle}>With Badges</Text>\n      <Tabs\n        tabs={badgeTabs}\n        activeTab={activeTab8}\n        onTabChange={setActiveTab8}\n        showBadge={true}\n      />\n\n      <Text style={styles.label}>Underline with Badges</Text>\n      <Tabs\n        tabs={badgeTabs}\n        activeTab={activeTab8}\n        onTabChange={setActiveTab8}\n        variant=\"underLineTabBackground\"\n        showBadge={true}\n      />\n\n      {/* SCROLLABLE SECTION */}\n      <Text style={styles.sectionTitle}>Scrollable Tabs</Text>\n      <Tabs\n        tabs={manyTabs}\n        activeTab={activeTab9}\n        onTabChange={setActiveTab9}\n        scrollable={true}\n      />\n\n      {/* CUSTOM COLORS SECTION */}\n      <Text style={styles.sectionTitle}>Custom Colors</Text>\n\n      <Text style={styles.label}>Blue Theme</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab10}\n        onTabChange={setActiveTab10}\n        activeColor=\"#007AFF\"\n        activeBackgroundColor=\"#007AFF\"\n        inactiveBackgroundColor=\"#e8f0fe\"\n      />\n\n      <Text style={styles.label}>Green Theme</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab10}\n        onTabChange={setActiveTab10}\n        activeColor=\"#34C759\"\n        activeBackgroundColor=\"#34C759\"\n        inactiveBackgroundColor=\"#e8f8ec\"\n      />\n\n      <Text style={styles.label}>Purple Underline</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab10}\n        onTabChange={setActiveTab10}\n        variant=\"underLineTabBackground\"\n        activeColor=\"#AF52DE\"\n      />\n\n      {/* DISABLED SECTION */}\n      <Text style={styles.sectionTitle}>Disabled States</Text>\n\n      <Text style={styles.label}>Mixed Enabled/Disabled</Text>\n      <Tabs\n        tabs={mixedTabs}\n        activeTab={activeTab11}\n        onTabChange={setActiveTab11}\n      />\n\n      <Text style={styles.label}>All Disabled</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab11}\n        onTabChange={setActiveTab11}\n        disabled={true}\n      />\n\n      {/* CUSTOM STYLING SECTION */}\n      <Text style={styles.sectionTitle}>Custom Styling</Text>\n\n      <Text style={styles.label}>Custom Container & Tabs</Text>\n      <Tabs\n        tabs={basicTabs}\n        activeTab={activeTab12}\n        onTabChange={setActiveTab12}\n        containerStyle={styles.customContainer}\n        tabStyle={styles.customTab}\n        activeTabStyle={styles.customActiveTab}\n        textStyle={styles.customText}\n        activeTextStyle={styles.customActiveText}\n      />\n\n      <Text style={styles.label}>Rounded with Shadow</Text>\n      <Tabs\n        tabs={twoTabs}\n        activeTab={activeTab12}\n        onTabChange={setActiveTab12}\n        variant=\"roundedRadius\"\n        containerStyle={styles.shadowContainer}\n        activeTabStyle={styles.shadowActiveTab}\n      />\n\n      {/* TWO TABS SECTION */}\n      <Text style={styles.sectionTitle}>Two Tabs (Toggle Style)</Text>\n      <Tabs\n        tabs={twoTabs}\n        activeTab={activeTab12}\n        onTabChange={setActiveTab12}\n        variant=\"roundedRadius\"\n      />\n\n      <View style={{ height: 50 }} />\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  content: {\n    padding: 20,\n  },\n  title: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 5,\n    color: '#333',\n  },\n  subtitle: {\n    fontSize: 16,\n    textAlign: 'center',\n    marginBottom: 30,\n    color: '#666',\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 30,\n    marginBottom: 15,\n    color: '#333',\n    borderBottomWidth: 1,\n    borderBottomColor: '#ddd',\n    paddingBottom: 5,\n  },\n  label: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 8,\n    marginTop: 15,\n  },\n\n  // Custom styling examples\n  customContainer: {\n    borderRadius: 12,\n    padding: 6,\n    backgroundColor: '#1a1a2e',\n  },\n  customTab: {\n    paddingVertical: 12,\n  },\n  customActiveTab: {\n    backgroundColor: '#e94560',\n    borderRadius: 10,\n  },\n  customText: {\n    color: '#888',\n    fontWeight: '500',\n  },\n  customActiveText: {\n    color: '#fff',\n    fontWeight: 'bold',\n  },\n\n  shadowContainer: {\n    backgroundColor: '#fff',\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  shadowActiveTab: {\n    shadowColor: '#d9232d',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.3,\n    shadowRadius: 4,\n    elevation: 4,\n  },\n});\n\nexport default TabsTestScreen;\n```\n\n### Usage in Your App\n\n```jsx\n// App.js or navigation screen\nimport TabsTestScreen from './TabsTestScreen';\n\n// In your navigator or directly\n<TabsTestScreen />\n```\n\n## License\n\nMIT © Atom Design\n","readmeFilename":"README.md","_rev":"1-762587e5415954d2aa42d0e48fdf6144"}