# Carousel

A versatile component for displaying a series of content slides, supporting navigation, indicators, and autoplay.

### **Import**
```tsx
import { Carousel } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-blue-500', text: 'Slide 1' },
    { color: 'color-green-500', text: 'Slide 2' },
    { color: 'color-purple-500', text: 'Slide 3' },
    { color: 'color-orange-500', text: 'Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel>
        {slides.map((slide, index) => (
          <View
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
          </View>
        ))}
      </Carousel>
    </View>
  );
};
```

### **autoPlay**
Enables or disables automatic slide progression.

- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const AutoPlayDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-red-500', text: 'Auto-play Slide 1' },
    { color: 'color-yellow-500', text: 'Auto-play Slide 2' },
    { color: 'color-teal-500', text: 'Auto-play Slide 3' },
    { color: 'color-pink-500', text: 'Auto-play Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel autoPlay autoPlayInterval={2000} pauseOnHover>
        {slides.map((slide, index) => (
          <Vertical
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
            <Text color="white" fontSize="16px" marginTop="10px">
              Auto-advances every 2 seconds. Hover to pause.
            </Text>
          </Vertical>
        ))}
      </Carousel>
    </View>
  );
};
```

### **stepIndices**
An array of indices defining specific steps or accessible slides within the carousel.

- **Type:** `number[]`
- **Possible Values:** ``

```tsx
import React, { useState } from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Button } from '../../Button/Button';

export const StepIndicesDemo = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  // Create an array of slides
  const slides = [
    { color: 'color-blue-500', text: 'Introduction', id: 0 },
    { color: 'color-gray-400', text: 'Step 1', id: 1 },
    { color: 'color-gray-400', text: 'Step 2', id: 2 },
    { color: 'color-gray-400', text: 'Step 3', id: 3 },
    { color: 'color-gray-400', text: 'Step 4', id: 4 },
    { color: 'color-green-500', text: 'Summary', id: 5 },
  ];

  // Only allow navigation to specific slides (introduction, steps 2 & 4, summary)
  const stepIndices = [0, 2, 4, 5];

  return (
    <View>
      <Text fontWeight="bold" marginBottom={2}>
        Step Navigation (Only specific slides)
      </Text>
      <View height="300px" width="100%">
        <Carousel
          activeIndex={activeIndex}
          onChange={setActiveIndex}
          stepIndices={stepIndices}
          showIndicators={false}
        >
          {slides.map((slide, index) => (
            <View
              key={index}
              backgroundColor={
                stepIndices.includes(index) ? slide.color : 'color-gray-400'
              }
              width="100%"
              height="100%"
              display="flex"
              alignItems="center"
              justifyContent="center"
              flexDirection="column"
              gap={4}
            >
              <Text color="white" fontSize="24px" fontWeight="bold">
                {slide.text}
              </Text>
              <Text color="white" fontSize="16px">
                {stepIndices.includes(index)
                  ? 'This is an allowed step'
                  : 'This slide is skipped in navigation'}
              </Text>
            </View>
          ))}
        </Carousel>
      </View>

      <Horizontal justifyContent="center" gap={4} marginTop={4}>
        {stepIndices.map((index) => (
          <Button
            key={index}
            onClick={() => setActiveIndex(index)}
            variant={activeIndex === index ? 'filled' : 'outline'}
          >
            {slides[index].text}
          </Button>
        ))}
      </Horizontal>
    </View>
  );
};
```

### **Autoplay**

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const AutoPlayDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-red-500', text: 'Auto-play Slide 1' },
    { color: 'color-yellow-500', text: 'Auto-play Slide 2' },
    { color: 'color-teal-500', text: 'Auto-play Slide 3' },
    { color: 'color-pink-500', text: 'Auto-play Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel autoPlay autoPlayInterval={2000} pauseOnHover>
        {slides.map((slide, index) => (
          <Vertical
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
            <Text color="white" fontSize="16px" marginTop="10px">
              Auto-advances every 2 seconds. Hover to pause.
            </Text>
          </Vertical>
        ))}
      </Carousel>
    </View>
  );
};
```

### **Compound**

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Button } from '../../Button/Button';

export const CompoundDemo = () => {
  const slides = [
    { color: 'color-blue-500', text: 'Slide 1' },
    { color: 'color-green-500', text: 'Slide 2' },
    { color: 'color-purple-500', text: 'Slide 3' },
  ];

  return (
    <View height="300px" width="100%">
      <Text fontWeight="bold" marginBottom={2}>
        Compound Component Pattern
      </Text>
      <Carousel
        aria-label="Compound Carousel Example"
        views={{
          container: {
            borderRadius: '8px',
            overflow: 'hidden',
            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
          },
        }}
      >
        <Carousel.Content>
          {slides.map((slide, index) => (
            <Carousel.Item key={index}>
              <View
                backgroundColor={slide.color}
                width="100%"
                height="100%"
                display="flex"
                alignItems="center"
                justifyContent="center"
              >
                <Text color="white" fontSize="24px" fontWeight="bold">
                  {slide.text}
                </Text>
              </View>
            </Carousel.Item>
          ))}
        </Carousel.Content>

        <Carousel.Previous />
        <Carousel.Next />
      </Carousel>
    </View>
  );
};

export const CustomCompoundDemo = () => {
  const slides = [
    { color: 'color-red-500', text: 'Custom 1' },
    { color: 'color-yellow-500', text: 'Custom 2' },
    { color: 'color-teal-500', text: 'Custom 3' },
  ];

  return (
    <View height="300px" width="100%" marginTop={8}>
      <Text fontWeight="bold" marginBottom={2}>
        Custom Compound Components
      </Text>
      <Carousel
        aria-label="Custom Compound Carousel"
        views={{
          // Global styles for all parts
          container: {
            borderRadius: '16px',
            overflow: 'hidden',
          },
          // Styles for the inner container that moves
          innerContainer: {
            transitionDuration: '500ms', // Slower transition
            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', // Custom easing
          },
        }}
      >
        <Carousel.Content>
          {slides.map((slide, index) => (
            <Carousel.Item key={index}>
              <View
                backgroundColor={slide.color}
                width="100%"
                height="100%"
                display="flex"
                alignItems="center"
                justifyContent="center"
                flexDirection="column"
                gap={4}
              >
                <Text color="white" fontSize="24px" fontWeight="bold">
                  {slide.text}
                </Text>
                <Button
                  size="sm"
                  variant="outline"
                  backgroundColor="color-white"
                >
                  Learn More
                </Button>
              </View>
            </Carousel.Item>
          ))}
        </Carousel.Content>

        {/* Custom navigation buttons */}
        <Carousel.Previous>Previous</Carousel.Previous>
        <Carousel.Next>Next</Carousel.Next>
      </Carousel>
    </View>
  );
};
```

### **Custom**

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Card } from '../../Card/Card';
import { Horizontal } from 'app-studio';

export const CustomDemo = () => {
  // Create an array of card content
  const cards = [
    {
      title: 'Mountain Retreat',
      description: 'Peaceful mountain cabin with stunning views.',
      color: 'color-blue-100',
    },
    {
      title: 'Beach Paradise',
      description: 'Relax on white sandy beaches with crystal clear water.',
      color: 'color-green-100',
    },
    {
      title: 'City Adventure',
      description: 'Explore the vibrant streets and culture of the city.',
      color: 'color-purple-100',
    },
    {
      title: 'Desert Oasis',
      description: 'Experience tranquility in the heart of the desert.',
      color: 'color-orange-100',
    },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel
        views={{
          container: {
            borderRadius: '16px',
            overflow: 'hidden',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
          },
          indicators: {
            bottom: '20px',
          },
          indicator: {
            width: '30px',
            height: '4px',
            borderRadius: '2px',
            backgroundColor: 'color-gray-200',
          },
          activeIndicator: {
            backgroundColor: 'color-blue-500',
            width: '40px',
          },
          prevButton: {
            backgroundColor: 'color-blue-500',
            color: 'color-white',
          },
          nextButton: {
            backgroundColor: 'color-blue-500',
            color: 'color-white',
          },
        }}
        indicatorVariant="line"
      >
        {cards.map((card, index) => (
          <View
            key={index}
            width="100%"
            height="100%"
            padding="20px"
            backgroundColor={card.color}
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Card
              variant="elevated"
              width="80%"
              maxWidth="500px"
              padding="20px"
            >
              <Card.Header>
                <Text fontSize="24px" fontWeight="bold">
                  {card.title}
                </Text>
              </Card.Header>
              <Card.Content>
                <Text fontSize="16px">{card.description}</Text>
              </Card.Content>
              <Card.Footer>
                <Horizontal justifyContent="flex-end">
                  <Text fontSize="14px" color="color-gray-500">
                    Slide {index + 1} of {cards.length}
                  </Text>
                </Horizontal>
              </Card.Footer>
            </Card>
          </View>
        ))}
      </Carousel>
    </View>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './autoplay';
export * from './indicators';
export * from './navigation';
export * from './custom';
export * from './compound';
export * from './stepIndices';
```

### **Indicators**

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { IndicatorVariant } from '../Carousel/Carousel.type';

export const IndicatorsDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-indigo-500', text: 'Slide 1' },
    { color: 'color-cyan-500', text: 'Slide 2' },
    { color: 'color-amber-500', text: 'Slide 3' },
  ];

  // Different indicator variants
  const indicatorVariants: IndicatorVariant[] = ['dot', 'line', 'number'];

  return (
    <Vertical gap={40}>
      {indicatorVariants.map((variant) => (
        <View key={variant} height="200px" width="100%">
          <Text marginBottom="10px" fontWeight="bold">
            {variant.charAt(0).toUpperCase() + variant.slice(1)} Indicators
          </Text>
          <Carousel indicatorVariant={variant} indicatorPosition="bottom">
            {slides.map((slide, index) => (
              <View
                key={index}
                backgroundColor={slide.color}
                width="100%"
                height="100%"
                display="flex"
                alignItems="center"
                justifyContent="center"
              >
                <Text color="white" fontSize="24px" fontWeight="bold">
                  {slide.text}
                </Text>
              </View>
            ))}
          </Carousel>
        </View>
      ))}
    </Vertical>
  );
};
```

### **Navigation**

```tsx
import React from 'react';
import { Carousel } from '../Carousel';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { Button } from '../../Button/Button';

export const NavigationDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-blue-500', text: 'Slide 1' },
    { color: 'color-green-500', text: 'Slide 2' },
    { color: 'color-purple-500', text: 'Slide 3' },
  ];

  return (
    <Vertical gap={40}>
      <View height="200px" width="100%">
        <Text marginBottom="10px" fontWeight="bold">
          Inside Navigation
        </Text>
        <Carousel navigationPosition="inside" showIndicators={false}>
          {slides.map((slide, index) => (
            <View
              key={index}
              backgroundColor={slide.color}
              width="100%"
              height="100%"
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Text color="white" fontSize="24px" fontWeight="bold">
                {slide.text}
              </Text>
            </View>
          ))}
        </Carousel>
      </View>

      <View height="200px" width="100%">
        <Text marginBottom="10px" fontWeight="bold">
          Custom Navigation Buttons
        </Text>
        <Carousel
          showIndicators={false}
          prevButton={
            <Button size="sm" variant="outline">
              Previous
            </Button>
          }
          nextButton={
            <Button size="sm" variant="outline">
              Next
            </Button>
          }
        >
          {slides.map((slide, index) => (
            <View
              key={index}
              backgroundColor={slide.color}
              width="100%"
              height="100%"
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Text color="white" fontSize="24px" fontWeight="bold">
                {slide.text}
              </Text>
            </View>
          ))}
        </Carousel>
      </View>
    </Vertical>
  );
};
```