{"_id":"@atom_design/carousel","_rev":"4-9b9ea35aa257c7075fcda23c90ddcc23","name":"@atom_design/carousel","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.1":{"name":"@atom_design/carousel","version":"1.0.1","keywords":["react-native","carousel","slider","banner","autoplay","ui-component","atom-design","accessible"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/carousel@1.0.1","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"homepage":"https://github.com/atom-design/carousel#readme","bugs":{"url":"https://github.com/atom-design/carousel/issues"},"dist":{"shasum":"fa75a9f35d183156db21760a167c896d5f8114b3","tarball":"https://registry.npmjs.org/@atom_design/carousel/-/carousel-1.0.1.tgz","fileCount":5,"integrity":"sha512-Za4n+8MmKBABK9gZrB2cY/YFvsORCXSzsNqqMfnum8v+4Xy0I0OoUr2Z5ZiQZH/VosthpkE1jZsrafyK3F0PDw==","signatures":[{"sig":"MEUCIQCvm2PWj6uMGo5mmoOp2C5fwgrza/HBajr1ZsM+B7VxpgIgI3zqPZM2fV7wyBppA+9vnflK9k3ph/6OGfO2w7LGEVk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42056},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"repository":{"url":"git+https://github.com/atom-design/carousel.git","type":"git"},"_npmVersion":"10.8.2","description":"A customizable React Native carousel component with auto-play, dots navigation, progress bar, and loop support.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/carousel_1.0.1_1764744808259_0.1924682508322686","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atom_design/carousel","version":"1.0.2","keywords":["react-native","carousel","slider","banner","autoplay","ui-component","atom-design","accessible"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/carousel@1.0.2","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"21a9afb4f93a8fccd2c1d68336fc9334ee523443","tarball":"https://registry.npmjs.org/@atom_design/carousel/-/carousel-1.0.2.tgz","fileCount":5,"integrity":"sha512-KqFpNw5IH5IXCR4R6Yp9pNsTKikTppshF9XvqXERYGxLFfS6uG2GIS13dtwGY+21Az//zspC4XjaDntQQfu3Rg==","signatures":[{"sig":"MEQCIEMPLozPP8fqkkdLB+g5uoXT8LeJe/DDwCg9IakRZPr8AiAlDyV6Wl/6iw4OpJkq8g157YHsBNIlw9prQxy9mGr2mw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41961},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native carousel component with auto-play, dots navigation, progress bar, and loop support.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/carousel_1.0.2_1764744879166_0.12911279074277804","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@atom_design/carousel","version":"1.0.3","keywords":["react-native","carousel","slider","banner","autoplay","ui-component","atom-design","accessible"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/carousel@1.0.3","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"b36a9cad5c4a9933a9ca0d005a27f403e72f0be9","tarball":"https://registry.npmjs.org/@atom_design/carousel/-/carousel-1.0.3.tgz","fileCount":5,"integrity":"sha512-8R5dG2UUhqU960UIi2jpznEsbFarnBTXnI1os9Ty1yExvyiRoC/cS04EW9rFTqyvqyGAwC+BsHnsQ1we18Th4Q==","signatures":[{"sig":"MEQCIBGGlW4W6LoPAH8vDKjuEw5USvKF/7WiQ06HUhiMHLcyAiBye8wl/albEvWYcvCuMv+awQ46dHrfPFNj2Pt57Txz/A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40789},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native carousel component with auto-play, dots navigation, progress bar, and loop support.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/carousel_1.0.3_1764745367724_0.17890227014327054","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@atom_design/carousel","version":"1.0.4","description":"A customizable React Native carousel component with auto-play, dots navigation, progress bar, and loop support.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","carousel","slider","banner","autoplay","ui-component","atom-design","accessible"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0"},"_id":"@atom_design/carousel@1.0.4","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-2yb2WRLh/VcWJEID7+7Fv4+90h1QX3i6oc8863Dk9ybxchtn3K+CBQdalJ3eD601+RsGBFnLvJuz8XvuxTcFnw==","shasum":"e929cce0d34de742928f97d987e2e37f5aea9b80","tarball":"https://registry.npmjs.org/@atom_design/carousel/-/carousel-1.0.4.tgz","fileCount":5,"unpackedSize":28939,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFp7nxtk1wTU6NNzyYAkA9T6c+4fAJfaEoD4Xfqvptd6AiEA8Px/gSqPqhvAZPbAENxNbp5WR2KrZd0bjoqrGN8SZAY="}]},"_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/carousel_1.0.4_1764745854283_0.33655298056663296"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T06:53:28.155Z","modified":"2025-12-03T07:10:54.717Z","1.0.1":"2025-12-03T06:53:28.495Z","1.0.2":"2025-12-03T06:54:39.368Z","1.0.3":"2025-12-03T07:02:47.912Z","1.0.4":"2025-12-03T07:10:54.471Z"},"author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","carousel","slider","banner","autoplay","ui-component","atom-design","accessible"],"description":"A customizable React Native carousel component with auto-play, dots navigation, progress bar, and loop support.","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom_design/carousel\n\nA highly customizable React Native carousel component with auto-play, dots navigation, progress bar, loop support, and full accessibility features. Part of the Atom Design System.\n\n[![npm version](https://img.shields.io/npm/v/@atom_design/carousel.svg)](https://www.npmjs.com/package/@atom_design/carousel)\n[![license](https://img.shields.io/npm/l/@atom_design/carousel.svg)](https://github.com/atom-design/carousel/blob/main/LICENSE)\n\n## Features\n\n- 🎠 **Smooth Scrolling** - Native FlatList-based horizontal scrolling\n- 🔄 **Auto-play** - Configurable automatic slide transitions\n- 🔁 **Loop Mode** - Infinite scrolling support\n- 📍 **Dot Navigation** - Customizable pagination dots\n- 📊 **Progress Bar** - Visual progress indicator\n- 🎨 **Fully Customizable** - Style every aspect of the carousel\n- ♿ **Accessible** - Full screen reader support\n- 📱 **Responsive** - Adapts to screen dimensions\n- 🖼️ **Custom Rendering** - Use renderItem for complete control\n- 💪 **TypeScript Support** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/carousel\n# or\nyarn add @atom_design/carousel\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types\n```\n\n---\n\n## 🚀 Basic Usage\n\n```jsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport Carousel from '@atom_design/carousel';\n\nconst App = () => {\n  const slides = [\n    { id: 1, background: 'https://picsum.photos/800/400?random=1', content: 'Summer Sale' },\n    { id: 2, background: 'https://picsum.photos/800/400?random=2', content: 'New Arrivals' },\n    { id: 3, background: 'https://picsum.photos/800/400?random=3', content: 'Best Sellers' },\n  ];\n\n  return (\n    <View style={{ flex: 1 }}>\n      <Carousel\n        slides={slides}\n        autoPlay\n        showDots\n        height={200}\n      />\n    </View>\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🧩 Props\n\n### Core Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `slides` | `SlideItem[]` | **Required** | Array of slide objects to display |\n| `renderSlide` | `(slide, index, isActive) => ReactNode` | `undefined` | Custom render function for slides |\n| `autoPlay` | `boolean` | `true` | Enable auto-play functionality |\n| `autoPlayInterval` | `number` | `3000` | Interval between transitions (ms) |\n| `loop` | `boolean` | `true` | Enable infinite loop scrolling |\n| `showDots` | `boolean` | `true` | Show navigation dots |\n| `showProgressBar` | `boolean` | `true` | Show progress bar |\n| `aspectRatio` | `number` | `2.37` | Aspect ratio (width/height) for slides |\n| `height` | `number` | `auto` | Custom height (overrides aspectRatio) |\n\n### Callback Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `onSlideChange` | `(index) => void` | Called when active slide changes |\n| `onSlidePress` | `(slide, index) => void` | Called when a slide is pressed |\n\n### Style Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `containerStyle` | `ViewStyle` | Style for the carousel container |\n| `slideStyle` | `ViewStyle` | Style for each slide wrapper |\n| `imageResizeMode` | `string` | Image resize mode: 'cover', 'contain', 'stretch', 'center' |\n\n### Dot Customization Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `dotsContainerStyle` | `ViewStyle` | `undefined` | Style for the dots container |\n| `dotStyle` | `ViewStyle` | `undefined` | Style for individual dot |\n| `activeDotStyle` | `ViewStyle` | `undefined` | Style for the active dot |\n| `inactiveColor` | `string` | `'#ccc'` | Color of inactive dots |\n| `activeColor` | `string` | `'#d9232d'` | Color of active dot |\n| `dotSize` | `number` | `9` | Size of the dots |\n\n### Progress Bar Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `progressBarStyle` | `ViewStyle` | `undefined` | Style for progress bar |\n| `progressBarBackgroundColor` | `string` | `'#f0f0f0'` | Progress bar background |\n| `progressBarColor` | `string` | `'#d9232d'` | Progress bar fill color |\n\n### Accessibility Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `testID` | `string` | Test ID for testing frameworks |\n\n---\n\n## 📁 SlideItem Type\n\n```typescript\ninterface SlideItem {\n  id?: string | number;\n  background: string;           // Image URL or color (hex/rgb)\n  content?: string;             // Text overlay\n  textStyle?: object;           // Custom text style\n  overlayStyle?: object;        // Custom overlay style\n  accessibilityLabel?: string;  // Accessibility label\n}\n```\n\n---\n\n## ✨ Advanced Examples\n\n### With Custom Render Slide\n\n```jsx\n<Carousel\n  slides={products}\n  renderSlide={(slide, index, isActive) => (\n    <View style={styles.slide}>\n      <Image source={{ uri: slide.background }} style={styles.image} />\n      <View style={styles.overlay}>\n        <Text style={styles.title}>{slide.content}</Text>\n        <Text style={styles.price}>${slide.price}</Text>\n        <TouchableOpacity style={styles.button}>\n          <Text>Shop Now</Text>\n        </TouchableOpacity>\n      </View>\n    </View>\n  )}\n  height={300}\n  showDots\n/>\n```\n\n### With Progress Bar\n\n```jsx\n<Carousel\n  slides={banners}\n  autoPlay\n  autoPlayInterval={5000}\n  showProgressBar\n  showDots={false}\n  progressBarColor=\"#4CAF50\"\n/>\n```\n\n### Custom Styled Dots\n\n```jsx\n<Carousel\n  slides={items}\n  showDots\n  dotSize={10}\n  inactiveColor=\"#cccccc\"\n  activeColor=\"#ff6b6b\"\n  activeDotStyle={{\n    width: 24,\n    borderRadius: 5,\n  }}\n  dotsContainerStyle={{\n    bottom: 20,\n  }}\n/>\n```\n\n---\n\n## 🧪 Full Test Screen Example\n\n```jsx\nimport React from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  ScrollView,\n  SafeAreaView,\n  Dimensions,\n} from 'react-native';\nimport Carousel from '@atom_design/carousel';\n\nconst { width: SCREEN_WIDTH } = Dimensions.get('window');\n\n// Image slides - uses image URLs\nconst imageSlides = [\n  { id: 1, background: 'https://picsum.photos/800/400?random=1', content: 'Summer Collection' },\n  { id: 2, background: 'https://picsum.photos/800/400?random=2', content: 'New Arrivals' },\n  { id: 3, background: 'https://picsum.photos/800/400?random=3', content: 'Flash Sale' },\n];\n\n// Color slides - uses hex colors\nconst colorSlides = [\n  { id: 1, background: '#d9232d', content: 'Welcome to Moglix' },\n  { id: 2, background: '#2196F3', content: 'Best Deals' },\n  { id: 3, background: '#4CAF50', content: 'Shop Now' },\n];\n\n// Compact slides\nconst compactSlides = [\n  { id: 1, background: 'https://picsum.photos/800/300?random=4' },\n  { id: 2, background: 'https://picsum.photos/800/300?random=5' },\n  { id: 3, background: 'https://picsum.photos/800/300?random=6' },\n];\n\nconst CarouselTestScreen = () => {\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView>\n        {/* Header */}\n        <Text style={styles.header}>Carousel Test</Text>\n\n        {/* Image Carousel */}\n        <View style={styles.section}>\n          <Text style={styles.sectionTitle}>Image Carousel</Text>\n          <Carousel\n            slides={imageSlides}\n            autoPlay\n            autoPlayInterval={3000}\n            showDots\n            showProgressBar\n            height={200}\n            onSlideChange={(index) => console.log('Slide:', index)}\n          />\n        </View>\n\n        {/* Color Carousel */}\n        <View style={styles.section}>\n          <Text style={styles.sectionTitle}>Color Carousel</Text>\n          <Carousel\n            slides={colorSlides}\n            autoPlay\n            autoPlayInterval={2500}\n            showDots\n            showProgressBar\n            height={180}\n            activeColor=\"#fff\"\n            inactiveColor=\"rgba(255,255,255,0.5)\"\n            progressBarColor=\"#fff\"\n          />\n        </View>\n\n        {/* Compact Carousel */}\n        <View style={styles.section}>\n          <Text style={styles.sectionTitle}>Compact Carousel</Text>\n          <Carousel\n            slides={compactSlides}\n            height={120}\n            showDots\n            dotSize={6}\n          />\n        </View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n  },\n  section: {\n    marginBottom: 24,\n    paddingHorizontal: 16,\n  },\n  sectionTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    marginBottom: 10,\n  },\n});\n\nexport default CarouselTestScreen;\n```\n\n---\n\n## ♿ Accessibility\n\nThe Carousel component is fully accessible:\n\n- **Screen Reader Support**: Announces slide changes and positions\n- **Accessibility Labels**: Describes carousel content\n- **Accessibility Hints**: Provides navigation instructions\n\n```jsx\n<Carousel\n  data={banners}\n  accessibilityLabel=\"Product showcase carousel\"\n  accessibilityHint=\"Swipe left or right to view more products\"\n/>\n```\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript support included:\n\n```tsx\nimport Carousel from '@atom_design/carousel';\n\ninterface SlideItem {\n  id: number;\n  background: string;\n  content?: string;\n}\n\nconst slides: SlideItem[] = [\n  { id: 1, background: 'https://example.com/img.jpg', content: 'Banner 1' },\n  { id: 2, background: '#d9232d', content: 'Color Slide' },\n];\n\nconst MyCarousel: React.FC = () => (\n  <Carousel\n    slides={slides}\n    autoPlay\n    showDots\n    onSlideChange={(index: number) => {\n      console.log('Current slide:', index);\n    }}\n  />\n);\n```\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"}