{
  "name": "scroll-rail",
  "type": "registry:component",
  "description": "Scroll progress rail indicator",
  "files": [
    {
      "path": "ui/ScrollRail.astro",
      "type": "registry:component",
      "content": "---\ninterface Props {\n  autoScroll?: boolean;\n  direction?: 'left' | 'right';\n  duration?: string;\n  gap?: string;\n  pauseOnHover?: boolean;\n  useMask?: boolean;\n  class?: string;\n  wrapperClass?: string;\n}\n\nconst {\n  autoScroll = true,\n  direction = 'left',\n  duration = '30s',\n  gap = '1rem',\n  pauseOnHover = true,\n  useMask = true,\n  class: className = '',\n  wrapperClass = '',\n} = Astro.props;\n\nconst animationName = direction === 'right' ? 'scroll-rail-right' : 'scroll-rail-left';\n---\n\n<div\n  class={`scroll-rail-wrapper relative overflow-hidden ${wrapperClass}`}\n  data-mask={useMask}\n  data-pause-on-hover={pauseOnHover}\n>\n  <div\n    class={`scroll-rail-track flex items-center ${className}`}\n    style={`--scroll-rail-gap: ${gap}; --scroll-rail-duration: ${duration}; --scroll-rail-animation: ${animationName};`}\n    data-scroll-rail-track\n    data-auto-scroll={autoScroll ? \"true\" : \"false\"}\n  >\n    <div class=\"scroll-rail-slot\" data-scroll-rail-slot>\n      <slot />\n    </div>\n\n    {autoScroll && (\n      <div class=\"scroll-rail-slot\" data-scroll-rail-slot>\n        <slot />\n      </div>\n    )}\n  </div>\n</div>\n\n<style>\n  @layer components {\n    .scroll-rail-wrapper[data-mask=\"true\"] {\n      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n    }\n\n    .scroll-rail-track {\n      display: inline-flex;\n      width: max-content;\n      flex-wrap: nowrap;\n    }\n\n    .scroll-rail-track[data-auto-scroll=\"true\"] {\n      animation: var(--scroll-rail-animation) var(--scroll-rail-duration, 30s) linear infinite;\n    }\n\n    .scroll-rail-slot {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--scroll-rail-gap, 1rem);\n      padding-inline: calc(var(--scroll-rail-gap, 1rem) / 2);\n      flex-wrap: nowrap;\n    }\n\n    .scroll-rail-track[data-auto-scroll=\"true\"]::after {\n      content: \"\";\n      display: inline-block;\n      width: calc(var(--scroll-rail-gap, 1rem) / 2);\n    }\n\n    .scroll-rail-wrapper[data-pause-on-hover=\"true\"]:hover .scroll-rail-track[data-auto-scroll=\"true\"] {\n      animation-play-state: paused;\n    }\n  }\n\n  @keyframes scroll-rail-left {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-50% - var(--scroll-rail-gap, 1rem) / 2));\n    }\n  }\n\n  @keyframes scroll-rail-right {\n    from {\n      transform: translateX(calc(-50% - var(--scroll-rail-gap, 1rem) / 2));\n    }\n    to {\n      transform: translateX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .scroll-rail-track[data-auto-scroll=\"true\"] {\n      animation: none;\n      transform: none !important;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}