{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-timeline",
  "title": "Glass Timeline",
  "description": "A timeline component with glass morphism styling, suitable for displaying events or processes in a chronological order.",
  "files": [
    {
      "path": "registry/innovative/glass-timeline.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TimelineItem {\n  id: string\n  title: string\n  description?: string\n  date?: string\n  icon?: React.ReactNode\n  status?: \"completed\" | \"current\" | \"upcoming\"\n}\n\ninterface GlassTimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: TimelineItem[]\n  orientation?: \"vertical\" | \"horizontal\"\n}\n\nconst GlassTimeline = React.forwardRef<HTMLDivElement, GlassTimelineProps>(\n  ({ className, items, orientation = \"vertical\", ...props }, ref) => {\n    if (orientation === \"horizontal\") {\n      return (\n        <div ref={ref} className={cn(\"w-full overflow-x-auto\", className)} {...props}>\n          <div className=\"flex items-start gap-4 min-w-max px-4\">\n            {items.map((item, index) => (\n              <div key={item.id} className=\"flex flex-col items-center\">\n                <div className=\"flex items-center\">\n                  {/* Node */}\n                  <GlassTimelineNode status={item.status} icon={item.icon} />\n\n                  {/* Connector */}\n                  {index < items.length - 1 && (\n                    <div\n                      className={cn(\n                        \"w-24 h-0.5 mx-2\",\n                        item.status === \"completed\" ? \"bg-linear-to-r from-cyan-500 to-blue-500\" : \"bg-white/20\",\n                      )}\n                    />\n                  )}\n                </div>\n\n                {/* Content */}\n                <div className=\"mt-4 text-center max-w-37.5\">\n                  <h4 className=\"font-medium text-white text-sm\">{item.title}</h4>\n                  {item.date && <p className=\"text-xs text-white/40 mt-1\">{item.date}</p>}\n                  {item.description && <p className=\"text-xs text-white/60 mt-2\">{item.description}</p>}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {items.map((item, index) => (\n          <div key={item.id} className=\"flex gap-4 pb-8 last:pb-0\">\n            {/* Node and line */}\n            <div className=\"flex flex-col items-center\">\n              <GlassTimelineNode status={item.status} icon={item.icon} />\n              {index < items.length - 1 && (\n                <div\n                  className={cn(\n                    \"w-0.5 flex-1 mt-2\",\n                    item.status === \"completed\" ? \"bg-linear-to-b from-cyan-500 to-blue-500\" : \"bg-white/20\",\n                  )}\n                />\n              )}\n            </div>\n\n            {/* Content card */}\n            <div className=\"flex-1 pb-2\">\n              <GlassTimelineCard item={item} />\n            </div>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nGlassTimeline.displayName = \"GlassTimeline\"\n\nfunction GlassTimelineNode({ status, icon }: { status?: TimelineItem[\"status\"]; icon?: React.ReactNode }) {\n  return (\n    <div className=\"relative\">\n      {/* Glow for current */}\n      {status === \"current\" && (\n        <div className=\"absolute -inset-2 rounded-full bg-linear-to-r from-cyan-500/50 to-blue-500/50 blur-md animate-pulse\" />\n      )}\n\n      <div\n        className={cn(\n          \"relative w-10 h-10 rounded-full flex items-center justify-center\",\n          \"border-2 transition-all duration-300\",\n          status === \"completed\" && \"bg-linear-to-br from-cyan-500 to-blue-500 border-cyan-400/50\",\n          status === \"current\" && \"bg-white/20 backdrop-blur-xl border-cyan-400/50\",\n          status === \"upcoming\" && \"bg-white/5 backdrop-blur-xl border-white/20\",\n          !status && \"bg-white/10 backdrop-blur-xl border-white/20\",\n        )}\n      >\n        {status === \"completed\" ? (\n          <Check className=\"w-5 h-5 text-white\" />\n        ) : icon ? (\n          <span className={cn(\"text-white/80\", status === \"current\" && \"text-cyan-400\")}>{icon}</span>\n        ) : (\n          <div className={cn(\"w-3 h-3 rounded-full\", status === \"current\" ? \"bg-cyan-400\" : \"bg-white/40\")} />\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction GlassTimelineCard({ item }: { item: TimelineItem }) {\n  const isCurrent = item.status === \"current\"\n\n  return (\n    <div className=\"relative\">\n      {isCurrent && (\n        <div className=\"absolute -inset-1 rounded-xl bg-linear-to-r from-cyan-500/30 to-blue-500/30 blur-lg opacity-70\" />\n      )}\n\n      <div\n        className={cn(\n          \"relative rounded-xl border p-4\",\n          \"backdrop-blur-xl transition-all duration-300\",\n          isCurrent ? \"bg-white/15 border-white/30\" : \"bg-white/5 border-white/10 hover:bg-white/10\",\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-2\">\n          <h4 className=\"font-medium text-white\">{item.title}</h4>\n          {item.date && <span className=\"text-xs text-white/40 shrink-0\">{item.date}</span>}\n        </div>\n        {item.description && <p className=\"mt-2 text-sm text-white/60\">{item.description}</p>}\n      </div>\n    </div>\n  )\n}\n\nexport { GlassTimeline }\nexport type { TimelineItem }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}