{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "Timeline, where you can showcase history (like your work) or a process (like a project).",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/blocks/timeline/index.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport {\n  motion,\n  HTMLMotionProps,\n  MotionValue,\n  useScroll,\n  useSpring,\n} from 'motion/react';\nimport React from 'react';\n\ninterface TimelineContextT {\n  scrollYProgress: MotionValue<number>;\n}\n\nconst TimelineContext = React.createContext<TimelineContextT | undefined>(\n  undefined,\n);\nfunction useTimelineContext() {\n  const context = React.useContext(TimelineContext);\n  if (!context) {\n    throw new Error('useTimelineContext must be used within a Timeline');\n  }\n  return context;\n}\n\nexport function Timeline({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<'div'>) {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: scrollRef,\n    offset: ['start center', 'end end'],\n  });\n\n  return (\n    <TimelineContext.Provider value={{ scrollYProgress }}>\n      <div\n        className={cn('relative', className)}\n        ref={scrollRef}\n        data-slot=\"timeline\"\n        {...props}\n      />\n    </TimelineContext.Provider>\n  );\n}\nexport function TimelineCard({ ...props }: HTMLMotionProps<'div'>) {\n  return (\n    <motion.div\n      data-slot=\"timeline-card\"\n      initial={{ opacity: 0.2 }}\n      whileInView={{ opacity: 1 }}\n      viewport={{ amount: 'all' }}\n      {...props}\n    />\n  );\n}\n\nexport function TimelineProgress({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const { scrollYProgress } = useTimelineContext();\n  const scaleY = useSpring(scrollYProgress, {\n    damping: 50,\n    stiffness: 300,\n    restDelta: 0.001,\n  });\n\n  return (\n    <div\n      className={cn('self-stretch w-0.5 bg-muted *:bg-primary', className)}\n      data-slot=\"timeline-progress\"\n      {...props}\n    >\n      <motion.div className=\"origin-top size-full\" style={{ scaleY }} />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/timeline.tsx"
    }
  ],
  "type": "registry:block"
}