{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-pager",
  "title": "Horizontal pager",
  "description": "snap pager + dots",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/pager-dots"
  ],
  "files": [
    {
      "path": "components/kit/horizontal-pager.tsx",
      "content": "import { PagerDots } from '@/components/kit/pager-dots';\nimport * as React from 'react';\nimport { ScrollView, View } from 'react-native';\n\ntype Props = {\n  children: React.ReactNode;\n  /** Width of each page — required for snapping. */\n  itemWidth: number;\n  gap?: number;\n  sidePadding?: number;\n  showDots?: boolean;\n  onIndexChange?: (index: number) => void;\n};\n\n/** Horizontal snap pager with dots. Marketing banners, account cards, onboarding slides. */\nexport function HorizontalPager({ children, itemWidth, gap = 12, sidePadding = 20, showDots = true, onIndexChange }: Props) {\n  const items = React.Children.toArray(children);\n  const [active, setActive] = React.useState(0);\n  const stride = itemWidth + gap;\n  return (\n    <View className=\"self-stretch\">\n      <ScrollView\n        className=\"flex-grow-0\"\n        // Reachable by keyboard on the web (arrow keys scroll it), named for screen readers.\n        focusable\n        role=\"region\"\n        aria-label=\"Pages\"\n        horizontal\n        snapToInterval={stride}\n        decelerationRate=\"fast\"\n        showsHorizontalScrollIndicator={false}\n        contentContainerStyle={{ paddingHorizontal: sidePadding }}\n        scrollEventThrottle={16}\n        onScroll={(e) => {\n          const i = Math.round(e.nativeEvent.contentOffset.x / stride);\n          if (i !== active && i >= 0 && i < items.length) {\n            setActive(i);\n            onIndexChange?.(i);\n          }\n        }}>\n        {items.map((child, i) => (\n          <View key={i} style={{ width: itemWidth, marginRight: i === items.length - 1 ? 0 : gap }}>\n            {child}\n          </View>\n        ))}\n      </ScrollView>\n      {showDots && items.length > 1 ? <PagerDots count={items.length} activeIndex={active} className=\"mt-3\" /> : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/horizontal-pager.tsx"
    }
  ],
  "meta": {
    "exports": [
      "HorizontalPager"
    ],
    "api": "<HorizontalPager itemWidth gap? showDots? onIndexChange?>{cards}</HorizontalPager>"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}