{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-row",
  "type": "registry:component",
  "title": "Media Row",
  "description": "Netflix-style media rail: edge fade masks and full-height overlay arrows on hover. Bring your own cards.",
  "author": "asmyshlyaev177 <https://asmyshlyaev177.dev>",
  "dependencies": [
    "react-horizontal-scrolling-menu",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json"
  ],
  "files": [
    {
      "path": "components/ui/media-row.tsx",
      "target": "components/ui/media-row.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport * as React from 'react';\n\nimport { ScrollMenu, useScrollMenu } from '@/components/ui/scroll-menu';\nimport { cn } from '@/lib/utils';\n\n/**\n * Netflix-style media rail: edge fade, full-height overlay arrows on hover.\n * Children are your cards — each needs a unique `itemId` prop.\n */\nfunction MediaRow({\n  className,\n  scrollContainerClassName,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof ScrollMenu>, 'hideArrows'>) {\n  return (\n    <ScrollMenu\n      hideArrows\n      Header={<MediaRowArrows />}\n      className={cn('group/media-row max-w-full', className)}\n      scrollContainerClassName={cn(\n        'gap-4 py-1',\n        '[mask-image:linear-gradient(to_right,transparent,black_2.5rem,black_calc(100%-2.5rem),transparent)]',\n        scrollContainerClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </ScrollMenu>\n  );\n}\n\n/** Rendered as the menu Header so it sits inside VisibilityContext. */\nfunction MediaRowArrows() {\n  const api = useScrollMenu();\n  const atStart = api.useLeftArrowVisible();\n  const atEnd = api.useRightArrowVisible();\n\n  return (\n    <>\n      <MediaRowArrow\n        side=\"left\"\n        hidden={atStart}\n        onClick={() => api.scrollPrev()}\n      >\n        <ChevronLeft className=\"size-6\" />\n      </MediaRowArrow>\n      <MediaRowArrow\n        side=\"right\"\n        hidden={atEnd}\n        onClick={() => api.scrollNext()}\n      >\n        <ChevronRight className=\"size-6\" />\n      </MediaRowArrow>\n    </>\n  );\n}\n\nfunction MediaRowArrow({\n  side,\n  hidden,\n  onClick,\n  children,\n}: {\n  side: 'left' | 'right';\n  hidden: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={side === 'left' ? 'Scroll left' : 'Scroll right'}\n      aria-hidden={hidden}\n      tabIndex={hidden ? -1 : 0}\n      onClick={onClick}\n      className={cn(\n        'absolute inset-y-0 z-10 flex w-10 items-center justify-center',\n        side === 'left' ? 'left-0' : 'right-0',\n        'text-foreground opacity-0 transition-opacity',\n        'from-background/80 to-transparent',\n        side === 'left' ? 'bg-gradient-to-r' : 'bg-gradient-to-l',\n        'focus-visible:ring-ring focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none',\n        !hidden && 'group-hover/media-row:opacity-100',\n        hidden && 'pointer-events-none',\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { MediaRow };\n"
    }
  ],
  "docs": "Each child card needs a unique itemId prop. Examples: https://react-horizontal-scrolling-menu.dev"
}