{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "Timelines whose rail draws itself as you scroll.",
  "dependencies": [
    "gsap"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/timeline.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") gsap.registerPlugin(ScrollTrigger);\n\n/**\n * A vertical timeline (changelogs, histories, order tracking). With `animate`, the rail draws itself\n * as you scroll and each entry's marker lights up when the line reaches it (GSAP ScrollTrigger).\n */\nfunction Timeline({ className, animate = false, children, ...props }: React.ComponentProps<\"ol\"> & { animate?: boolean }) {\n  const ref = React.useRef<HTMLOListElement>(null);\n\n  useGSAP(\n    () => {\n      const root = ref.current;\n      if (!animate || !root || !motionScale(root)) return;\n      const rail = root.querySelector('[data-slot=\"timeline-rail-fill\"]');\n      gsap.fromTo(rail, { scaleY: 0 }, { scaleY: 1, ease: \"none\", scrollTrigger: { trigger: root, start: \"top 75%\", end: \"bottom 60%\", scrub: 0.4 } });\n      root.querySelectorAll<HTMLElement>('[data-slot=\"timeline-item\"]').forEach((item) => {\n        ScrollTrigger.create({\n          trigger: item,\n          start: \"top 65%\",\n          onEnter: () => item.setAttribute(\"data-reached\", \"\"),\n          onLeaveBack: () => item.removeAttribute(\"data-reached\"),\n        });\n        gsap.fromTo(item.querySelector('[data-slot=\"timeline-body\"]'), { opacity: 0, x: 12 }, { opacity: 1, x: 0, duration: 0.5, ease: \"cue\", scrollTrigger: { trigger: item, start: \"top 80%\" } });\n      });\n    },\n    { scope: ref, dependencies: [animate] },\n  );\n\n  return (\n    <ol ref={ref} data-slot=\"timeline\" data-animate={animate || undefined} className={cn(\"relative grid gap-8 ps-8\", className)} {...props}>\n      <span aria-hidden=\"true\" className=\"absolute top-1.5 bottom-1.5 start-[0.6875rem] w-px bg-border\">\n        <span data-slot=\"timeline-rail-fill\" className={cn(\"absolute inset-0 origin-top bg-primary\", !animate && \"hidden\")} />\n      </span>\n      {children}\n    </ol>\n  );\n}\n\nfunction TimelineItem({ className, children, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li data-slot=\"timeline-item\" className={cn(\"group/timeline relative\", className)} {...props}>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute top-1 -start-8 flex size-[1.375rem] items-center justify-center rounded-full border border-border bg-background transition-colors duration-300 group-data-[reached]/timeline:border-primary\"\n      >\n        <span className=\"size-2 rounded-full bg-muted-foreground/40 transition-[background-color,scale] duration-300 ease-cue group-data-[reached]/timeline:scale-125 group-data-[reached]/timeline:bg-primary [[data-slot=timeline]:not([data-animate])_&]:bg-primary\" />\n      </span>\n      <div data-slot=\"timeline-body\" className=\"grid gap-1\">\n        {children}\n      </div>\n    </li>\n  );\n}\n\nfunction TimelineTime({ className, ...props }: React.ComponentProps<\"time\">) {\n  return <time data-slot=\"timeline-time\" className={cn(\"cue-label\", className)} {...props} />;\n}\n\nfunction TimelineTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return <h3 data-slot=\"timeline-title\" className={cn(\"text-[0.9375rem] font-semibold tracking-tight\", className)} {...props} />;\n}\n\nfunction TimelineDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"timeline-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nexport { Timeline, TimelineItem, TimelineTime, TimelineTitle, TimelineDescription };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/timeline",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}