{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "Vertical timeline primitives.",
  "registryDependencies": [
    "@circle-ui/flex",
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/circle-ui/timeline.tsx",
      "content": "// Generated from packages/ui/src/components/timeline.tsx\nimport * as React from \"react\";\n\nimport { Flex } from \"@/registry/berlin/circle-ui/flex\";\nimport { cn } from \"@/registry/berlin/lib/utils\";\n\nexport type TimelineStepStatus =\n  | \"completed\"\n  | \"active\"\n  | \"upcoming\"\n  | \"loading\"\n  | \"error\";\n\nfunction CheckIcon() {\n  return (\n    <svg className=\"size-3\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M2.5 6 5 8.5 9.5 3.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction TimelineMarker({ status }: { status?: TimelineStepStatus }) {\n  if (status === \"completed\") {\n    return (\n      <span className=\"mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-foreground text-background\">\n        <CheckIcon />\n      </span>\n    );\n  }\n\n  if (status === \"active\") {\n    return (\n      <span className=\"mt-0.5 inline-flex size-6 items-center justify-center rounded-full border-[6px] border-foreground bg-background\" />\n    );\n  }\n\n  if (status === \"error\") {\n    return (\n      <span className=\"mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-destructive text-[11px] font-semibold text-destructive-foreground\">\n        !\n      </span>\n    );\n  }\n\n  if (status === \"loading\") {\n    return (\n      <span className=\"mt-0.5 inline-flex size-6 animate-pulse rounded-full bg-loading-surface\" />\n    );\n  }\n\n  return (\n    <span className=\"mt-[7px] inline-flex size-3 rounded-full border-2 border-primary bg-background\" />\n  );\n}\n\nfunction LoadingLine({\n  className,\n  width = \"100%\",\n}: {\n  className?: string;\n  width?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        \"block h-[1em] animate-pulse rounded-full bg-loading-surface\",\n        className,\n      )}\n      style={{ width }}\n    />\n  );\n}\n\nexport interface TimelineStepProps extends React.PropsWithChildren {\n  title?: React.ReactNode;\n  preTitle?: React.ReactNode;\n  text?: React.ReactNode;\n  variableTime?: boolean;\n  lastChild?: boolean;\n  loading?: boolean;\n  id?: string;\n  status?: TimelineStepStatus;\n  connectorLabel?: React.ReactNode;\n  className?: string;\n}\n\nexport function TimelineStep({\n  children,\n  className,\n  connectorLabel,\n  id,\n  lastChild,\n  loading,\n  preTitle,\n  status,\n  text,\n  title,\n}: TimelineStepProps) {\n  const effectiveStatus = loading ? \"loading\" : status;\n  const showLoading = effectiveStatus === \"loading\";\n  const connectorClass =\n    effectiveStatus === \"completed\" ? \"bg-foreground\" : \"bg-border\";\n\n  return (\n    <Flex\n      gap={12}\n      id={id}\n      style={{ scrollMarginTop: \"40px\", width: \"100%\" }}\n      className={className}\n    >\n      <div className=\"relative flex w-6 shrink-0 justify-center\">\n        <TimelineMarker status={effectiveStatus} />\n        {!lastChild ? (\n          <span\n            className={cn(\n              \"absolute top-6 h-[calc(100%-0.75rem)] w-px\",\n              connectorClass,\n            )}\n          />\n        ) : null}\n        {connectorLabel && !lastChild ? (\n          <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-sm bg-background px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground shadow-[0_0_0_1px_var(--border)]\">\n            {connectorLabel}\n          </span>\n        ) : null}\n      </div>\n      <div className=\"flex-1 pb-6\">\n        {showLoading || preTitle || title ? (\n          <div className=\"mb-2 space-y-1\">\n            {showLoading ? (\n              <LoadingLine width=\"7rem\" className=\"h-3\" />\n            ) : preTitle ? (\n              <div className=\"text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground\">\n                {preTitle}\n              </div>\n            ) : null}\n            {showLoading ? (\n              <LoadingLine width=\"11rem\" />\n            ) : title ? (\n              <div className=\"text-base font-semibold leading-6\">{title}</div>\n            ) : null}\n          </div>\n        ) : null}\n        {showLoading ? (\n          <div className=\"space-y-2\">\n            <LoadingLine />\n            <LoadingLine width=\"82%\" />\n          </div>\n        ) : text ? (\n          <div className=\"text-sm leading-6 text-muted-foreground\">{text}</div>\n        ) : children ? (\n          <div className=\"text-sm leading-6 text-muted-foreground\">\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </Flex>\n  );\n}\n\nexport function Timeline({ children }: React.PropsWithChildren) {\n  return <Flex direction=\"column\">{children}</Flex>;\n}\n",
      "type": "registry:ui",
      "target": "src/components/circle/ui/timeline.tsx"
    }
  ],
  "type": "registry:ui"
}