{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-scroll-row",
  "type": "registry:component",
  "title": "Horizontal Scroll Row",
  "description": "Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/horizontal-scroll-row/horizontal-scroll-row.tsx",
      "content": "\"use client\";\n\nimport { memo, type ReactNode } from \"react\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport { useHorizontalScroll } from \"@vllnt/ui\";\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\n\ntype HorizontalScrollRowProps = {\n  children: ReactNode;\n  className?: string;\n  description?: string;\n  title: string;\n};\n\nconst HorizontalScrollRow = memo(function HorizontalScrollRow({\n  children,\n  className,\n  description,\n  title,\n}: HorizontalScrollRowProps) {\n  const { canScrollLeft, canScrollRight, containerRef, scroll } =\n    useHorizontalScroll();\n\n  const showControls = canScrollLeft || canScrollRight;\n\n  return (\n    <section className={cn(\"space-y-4\", className)}>\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-lg font-semibold\">{title}</h3>\n          {description ? (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          ) : null}\n        </div>\n        {showControls ? (\n          <div className=\"flex gap-1\">\n            <Button\n              aria-label=\"Scroll left\"\n              className=\"size-8\"\n              disabled={!canScrollLeft}\n              onClick={() => {\n                scroll(\"left\");\n              }}\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <ChevronLeft className=\"size-4\" />\n            </Button>\n            <Button\n              aria-label=\"Scroll right\"\n              className=\"size-8\"\n              disabled={!canScrollRight}\n              onClick={() => {\n                scroll(\"right\");\n              }}\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <ChevronRight className=\"size-4\" />\n            </Button>\n          </div>\n        ) : null}\n      </div>\n      <div\n        className=\"flex gap-4 overflow-x-auto snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        ref={containerRef}\n      >\n        {children}\n      </div>\n    </section>\n  );\n});\n\nHorizontalScrollRow.displayName = \"HorizontalScrollRow\";\n\nexport { HorizontalScrollRow };\nexport type { HorizontalScrollRowProps };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}