{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "type": "registry:ui",
  "title": "Carousel",
  "description": "Snap-scrolling horizontal pager with optional arrows.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/carousel.tsx",
      "type": "registry:ui",
      "target": "components/ui/carousel.tsx",
      "content": "import { useRef, useState, type ReactNode } from 'react';\nimport {\n  FlatList,\n  Pressable,\n  useWindowDimensions,\n  View,\n  type ViewProps,\n} from 'react-native';\nimport { ChevronLeft, ChevronRight } from 'lucide-react-native';\nimport { cn, useIconColor } from '@/lib/utils';\n\nexport interface CarouselProps<T> extends Omit<ViewProps, 'children'> {\n  data: T[];\n  renderItem: (item: T, index: number) => ReactNode;\n  /** Item width in px — defaults to viewport width. */\n  itemWidth?: number;\n  className?: string;\n  itemClassName?: string;\n  showArrows?: boolean;\n  /** Pagination dots under the carousel. */\n  showDots?: boolean;\n  onIndexChange?: (index: number) => void;\n}\n\nexport function Carousel<T>({\n  data,\n  renderItem,\n  itemWidth,\n  className,\n  itemClassName,\n  showArrows = false,\n  showDots = true,\n  onIndexChange,\n  ...props\n}: CarouselProps<T>) {\n  const { width: viewport } = useWindowDimensions();\n  const w = itemWidth ?? viewport;\n  const list = useRef<FlatList<T>>(null);\n  const [index, setIndex] = useState(0);\n  const iconColor = useIconColor('foreground');\n\n  const scrollTo = (i: number) => {\n    const next = Math.max(0, Math.min(data.length - 1, i));\n    list.current?.scrollToOffset({ offset: next * w, animated: true });\n    setIndex(next);\n    onIndexChange?.(next);\n  };\n\n  return (\n    <View className={cn('w-full', className)} {...props}>\n      <FlatList\n        ref={list}\n        horizontal\n        data={data}\n        keyExtractor={(_, i) => String(i)}\n        showsHorizontalScrollIndicator={false}\n        snapToInterval={w}\n        decelerationRate=\"fast\"\n        onMomentumScrollEnd={(e) => {\n          const i = Math.round(e.nativeEvent.contentOffset.x / w);\n          setIndex(i);\n          onIndexChange?.(i);\n        }}\n        renderItem={({ item, index: i }) => (\n          <View className={itemClassName} style={{ width: w }}>\n            {renderItem(item, i)}\n          </View>\n        )}\n      />\n      {showArrows && (\n        <View\n          className=\"absolute top-0 bottom-0 w-full flex-row items-center justify-between px-2\"\n          pointerEvents=\"box-none\"\n        >\n          <Pressable\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Previous\"\n            onPress={() => scrollTo(index - 1)}\n            className=\"rounded-full border border-border bg-background p-2\"\n          >\n            <ChevronLeft size={18} color={iconColor} />\n          </Pressable>\n          <Pressable\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Next\"\n            onPress={() => scrollTo(index + 1)}\n            className=\"rounded-full border border-border bg-background p-2\"\n          >\n            <ChevronRight size={18} color={iconColor} />\n          </Pressable>\n        </View>\n      )}\n      {showDots && data.length > 1 && (\n        <View className=\"mt-3 flex-row items-center justify-center gap-1.5\">\n          {data.map((_item, i) => (\n            <Pressable\n              // biome-ignore lint/suspicious/noArrayIndexKey: pagination dots have no stable id\n              key={i}\n              accessibilityRole=\"button\"\n              accessibilityLabel={`Go to slide ${i + 1}`}\n              hitSlop={6}\n              onPress={() => scrollTo(i)}\n              className={cn(\n                'h-1.5 rounded-full',\n                i === index ? 'w-5 bg-foreground' : 'w-1.5 bg-border'\n              )}\n            />\n          ))}\n        </View>\n      )}\n    </View>\n  );\n}\n"
    }
  ]
}