{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "Vertical timeline with colored icon markers, time labels, headers, body content, and footer actions.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-badge.json"
  ],
  "files": [
    {
      "path": "registry/new-york/timeline/components/timeline.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\n/* ---------------------------------------------------------------------------\n * Timeline\n * -------------------------------------------------------------------------- */\n\ninterface TimelineProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={cn(\n          \"relative list-none m-[0_0_30px] p-0 before:content-[''] before:absolute before:top-0 before:bottom-0 before:w-[4px] before:bg-[#ddd] before:left-[31px] before:m-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </ul>\n    )\n  }\n)\nTimeline.displayName = \"Timeline\"\n\n/* ---------------------------------------------------------------------------\n * TimelineLabel\n * -------------------------------------------------------------------------- */\n\ninterface TimelineLabelProps extends React.HTMLAttributes<HTMLLIElement> {\n  color?: string\n}\n\nconst TimelineLabel = React.forwardRef<HTMLLIElement, TimelineLabelProps>(\n  ({ className, color = \"bg-[#3c8dbc]\", children, ...props }, ref) => {\n    return (\n      <li\n        ref={ref}\n        className={cn(\"mb-[20px]\", className)}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"inline-block py-[5px] px-[15px] rounded-[4px] text-white font-bold text-[14px]\",\n            color\n          )}\n        >\n          {children}\n        </span>\n      </li>\n    )\n  }\n)\nTimelineLabel.displayName = \"TimelineLabel\"\n\n/* ---------------------------------------------------------------------------\n * TimelineItem\n * -------------------------------------------------------------------------- */\n\ninterface TimelineItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  icon?: React.ReactNode\n  iconColor?: string\n  time?: string\n  header?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      icon,\n      iconColor = \"bg-[#d2d6de]\",\n      time,\n      header,\n      footer,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <li\n        ref={ref}\n        className={cn(\"relative mb-[15px]\", className)}\n        {...props}\n      >\n        {/* Time marker icon */}\n        <span\n          className={cn(\n            \"absolute left-[18px] w-[30px] h-[30px] rounded-full text-center leading-[30px] text-[15px] text-white z-[1]\",\n            iconColor\n          )}\n        >\n          {icon}\n        </span>\n\n        {/* Content */}\n        <div className=\"ml-[60px] bg-white rounded-[3px] p-0 relative shadow-[0_1px_1px_rgba(0,0,0,0.1)]\">\n          {/* Time stamp */}\n          {time && (\n            <span className=\"absolute right-[10px] top-[10px] text-[#999] text-[12px] italic\">\n              {time}\n            </span>\n          )}\n\n          {/* Header */}\n          {header && (\n            <h3 className=\"text-[16px] m-0 p-[10px] border-b border-b-[#f4f4f4] font-semibold text-[#333]\">\n              {header}\n            </h3>\n          )}\n\n          {/* Body */}\n          {children && (\n            <div className=\"p-[10px] text-[14px] text-[#444]\">{children}</div>\n          )}\n\n          {/* Footer */}\n          {footer && (\n            <div className=\"p-[10px] border-t border-t-[#f4f4f4]\">\n              {footer}\n            </div>\n          )}\n        </div>\n      </li>\n    )\n  }\n)\nTimelineItem.displayName = \"TimelineItem\"\n\nexport { Timeline, TimelineItem, TimelineLabel }\nexport type { TimelineProps, TimelineItemProps, TimelineLabelProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}