{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-product-rail",
  "type": "registry:component",
  "title": "Horizontal product rail",
  "description": "A horizontally scrolling rail of tagged product cards that slide in and lift on hover. The rail is a focusable, labelled region for keyboard scrolling.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/horizontal-product-rail.tsx",
      "type": "registry:ui",
      "target": "components/ui/horizontal-product-rail.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Item = { title: string; blurb: string; tag?: string }\n\nfunction HorizontalProductRail({\n  items = [\n    { title: \"AI Studio\", blurb: \"Composer, tools, notebook cells.\", tag: \"Product\" },\n    { title: \"Billing\", blurb: \"Plans, invoices, seat maps.\", tag: \"Commerce\" },\n    { title: \"Admin\", blurb: \"SSO, quotas, impersonation.\", tag: \"Ops\" },\n    { title: \"Charts\", blurb: \"Area, radar, sparklines.\", tag: \"Data\" },\n    { title: \"Email\", blurb: \"Welcome + receipt kits.\", tag: \"Marketing\" },\n  ],\n  ariaLabel = \"Product surfaces\",\n  className,\n}: {\n  items?: Item[]\n  ariaLabel?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  return (\n    <div data-slot=\"horizontal-product-rail\" data-tier=\"premium\" className={cn(\"space-y-3\", className)}>\n      <div className=\"flex items-end justify-between gap-3 px-1\">\n        <p className=\"text-lg font-medium tracking-[-0.008em] text-fg\">Product surfaces</p>\n        <p className=\"text-xs text-fg-muted\">Drag or scroll</p>\n      </div>\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={ariaLabel}\n        tabIndex={0}\n        className=\"flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2 outline-none focus-visible:ring-2 focus-visible:ring-accent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n      >\n        {items.map((item, i) => (\n          <motion.article\n            key={item.title}\n            initial={reduce ? false : { x: 24 }}\n            whileInView={{ x: 0 }}\n            viewport={{ once: true }}\n            transition={{ delay: i * 0.05 }}\n            whileHover={reduce ? undefined : { y: -4 }}\n            className=\"w-64 shrink-0 snap-start overflow-hidden rounded-xl border border-border bg-surface shadow-highlight\"\n          >\n            <div className=\"aspect-[16/10] border-b border-border bg-[radial-gradient(circle_at_70%_30%,color-mix(in_oklch,var(--accent)_20%,transparent),transparent_60%)] bg-sunken\" />\n            <div className=\"space-y-1 p-4\">\n              {item.tag ? <p className=\"text-[10px] font-medium tracking-[0.01em] text-fg-muted uppercase\">{item.tag}</p> : null}\n              <h4 className=\"text-sm font-medium text-fg\">{item.title}</h4>\n              <p className=\"text-xs leading-[1.55] text-fg-muted\">{item.blurb}</p>\n            </div>\n          </motion.article>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { HorizontalProductRail }\n"
    }
  ]
}