{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-pager",
  "title": "Horizontal pager",
  "description": "CSS scroll-snap pager + dots · keyboard scrollable",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [
    "@kit/pager-dots"
  ],
  "files": [
    {
      "path": "components/kit/horizontal-pager.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport * as React from 'react';\nimport { PagerDots } from '@/components/kit/pager-dots';\n\ntype Props = {\n  children: React.ReactNode;\n  /** Width of each page: px, or any CSS length (\"85%\" peeks the next card). Default \"85%\". */\n  itemWidth?: number | string;\n  /** Gap between pages (px). */\n  gap?: number;\n  /** Inset before the first and after the last page (px). */\n  sidePadding?: number;\n  showDots?: boolean;\n  onIndexChange?: (index: number) => void;\n  /** Names the region for screen readers. Default \"Pages\". */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/** Horizontal snap pager with dots. Marketing banners, account cards, onboarding slides. */\nexport function HorizontalPager({ children, itemWidth = '85%', gap = 12, sidePadding = 0, showDots = true, onIndexChange, className, ...props }: Props) {\n  const items = React.Children.toArray(children);\n  const [active, setActive] = React.useState(0);\n  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const el = e.currentTarget;\n    const first = el.firstElementChild as HTMLElement | null;\n    if (!first) return;\n    const i = Math.round(el.scrollLeft / (first.offsetWidth + gap));\n    if (i !== active && i >= 0 && i < items.length) {\n      setActive(i);\n      onIndexChange?.(i);\n    }\n  };\n  return (\n    <div className={cn('flex min-w-0 flex-col', className)}>\n      {/* Focusable so arrow keys scroll it. */}\n      <div\n        role=\"region\"\n        aria-label={props['aria-label'] ?? 'Pages'}\n        tabIndex={0}\n        onScroll={onScroll}\n        className=\"focus-visible:ring-ring/50 flex snap-x snap-mandatory overflow-x-auto rounded-lg outline-none [scrollbar-width:none] focus-visible:ring-[3px] motion-safe:scroll-smooth\"\n        style={{ gap, paddingInline: sidePadding, scrollPaddingInline: sidePadding }}>\n        {items.map((child, i) => (\n          <div key={i} className=\"shrink-0 snap-start\" style={{ width: itemWidth }}>\n            {child}\n          </div>\n        ))}\n      </div>\n      {showDots && items.length > 1 ? <PagerDots count={items.length} activeIndex={active} className=\"mt-3\" /> : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/horizontal-pager.tsx"
    }
  ],
  "meta": {
    "exports": [
      "HorizontalPager"
    ],
    "api": "<HorizontalPager itemWidth? gap? showDots? onIndexChange?>{cards}</HorizontalPager>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}