{
  "name": "timeline",
  "type": "registry:ui",
  "title": "Timeline",
  "description": "Read-only chronological history with structured titles, descriptions and semantic status markers.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "class-variance-authority@0.7.1"
  ],
  "files": [
    {
      "path": "src/components/ui/timeline.tsx",
      "type": "registry:ui",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Timeline({\n  className,\n  ...props\n}: React.ComponentProps<\"ol\">): React.ReactElement {\n  return (\n    <ol className={cn(\"flex flex-col\", className)} data-slot=\"timeline\" {...props} />\n  );\n}\n\nconst timelineDotVariants = cva(\n  \"relative z-10 mt-0.5 size-2.5 shrink-0 rounded-full ring-4 ring-background\",\n  {\n    defaultVariants: { variant: \"default\" },\n    variants: {\n      variant: {\n        accent: \"bg-primary\",\n        default: \"bg-muted-foreground/40\",\n        error: \"bg-destructive\",\n        info: \"bg-info\",\n        success: \"bg-success\",\n        warning: \"bg-warning\",\n      },\n    },\n  },\n);\n\nexport type TimelineMarkerShape = \"bar\" | \"diamond\" | \"dot\" | \"ring\";\n\nconst timelineMarkerShapeClassNames = {\n  bar: \"h-4 w-1.5 rounded-full\",\n  diamond: \"mt-1 rotate-45 rounded-[2px]\",\n  dot: \"\",\n  ring: \"border-2 border-current bg-background\",\n} as const satisfies Record<TimelineMarkerShape, string>;\n\nexport interface TimelineItemProps\n  extends React.ComponentProps<\"li\">,\n    VariantProps<typeof timelineDotVariants> {\n  marker?: React.ReactNode;\n  markerLabel?: string;\n  markerShape?: TimelineMarkerShape;\n}\n\nexport function TimelineItem({\n  className,\n  variant,\n  marker,\n  markerLabel,\n  markerShape = \"dot\",\n  children,\n  ...props\n}: TimelineItemProps): React.ReactElement {\n  return (\n    <li\n      className={cn(\n        \"relative flex gap-3 pb-5 last:pb-0\",\n        \"before:absolute before:top-4 before:bottom-0 before:left-[5px] before:w-px before:-translate-x-1/2 before:bg-border last:before:hidden\",\n        className,\n      )}\n      data-slot=\"timeline-item\"\n      {...props}\n    >\n      <span\n        aria-hidden={markerLabel ? undefined : true}\n        aria-label={markerLabel}\n        className={cn(\n          timelineDotVariants({ variant }),\n          timelineMarkerShapeClassNames[markerShape],\n          marker &&\n            \"grid size-5 place-items-center rounded-full text-primary-foreground ring-2 [&>svg]:size-3\",\n        )}\n        role={markerLabel ? \"img\" : undefined}\n      >\n        {marker ? (\n          <span className={markerShape === \"diamond\" ? \"-rotate-45\" : undefined}>\n            {marker}\n          </span>\n        ) : null}\n      </span>\n      <div className=\"-mt-0.5 min-w-0 flex-1 pb-1\">{children}</div>\n    </li>\n  );\n}\n\nexport function TimelineTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-medium text-foreground text-sm\", className)}\n      data-slot=\"timeline-title\"\n      {...props}\n    />\n  );\n}\n\nexport function TimelineDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      data-slot=\"timeline-description\"\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "categories": [
    "data-display"
  ],
  "docs": "# Timeline\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Timeline for read-only chronological history such as activity, status changes or audit events.\n\n## Import\n\n```tsx\nimport { Timeline, TimelineDescription, TimelineItem, TimelineTitle } from \"@/components/ui/timeline\";\n```\n\n## Public API\n\n- Compose `Timeline`, `TimelineItem`, `TimelineTitle` and `TimelineDescription`.\n- `TimelineItem` accepts semantic status variants, an optional `marker`, and marker shapes `bar`, `diamond`, `dot` or `ring`.\n- Keep title, description and optional marker content in DOM order so chronology remains understandable without visual styling.\n\n## Public Motion\n\n- Timeline is static by default and does not animate events on initial render.\n- State accents do not require a reduced-motion override.\n\n## Public Accessibility\n\n- Keep DOM order identical to the visual chronological order.\n- Status must remain readable in text or another non-color cue; marker color alone is not enough.\n- Timeline is read-only. Use Stepper when people can control or navigate process steps.\n\n## Public Agent Guidance\n\n- Use status variants only for real semantic meaning, not decoration.\n- Do not turn a Timeline item into a hidden workflow button.\n- Prefer Stepper for interactive progress and Resource List for non-chronological entity collections.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/timeline)\n\n- [Registry source](https://ui.siteplane.io/r/timeline.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/timeline",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}