{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "vertical status steps joined by a line · each `done` / `current` / `upcoming` with time and note",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/timeline.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon } from 'lucide-react-native';\nimport { View } from 'react-native';\n\nexport type TimelineItem = {\n  title: string;\n  /** When it happened, or is expected: \"12 Jun, 10:02\", \"Expected Fri\". */\n  time?: string;\n  description?: string;\n  state: 'done' | 'current' | 'upcoming';\n};\n\ntype Props = {\n  items: TimelineItem[];\n  /** The colour of what is done: `success` for orders and deliveries, `primary` for neutral processes. */\n  tone?: 'success' | 'primary';\n  className?: string;\n};\n\nconst SPOKEN = { done: 'done', current: 'in progress', upcoming: 'not yet' } as const;\n\n/**\n * Vertical status steps joined by a line: an order, a delivery, an application. Done steps are filled\n * with a tick, the current one is ringed, upcoming ones are hollow and muted. Each step is announced\n * as one item (\"On its way, in progress, 13 Jun\").\n */\nexport function Timeline({ items, tone = 'success', className }: Props) {\n  const fill = tone === 'success' ? 'bg-success' : 'bg-primary';\n  const ring = tone === 'success' ? 'border-success' : 'border-primary';\n  return (\n    <View role=\"list\" className={className}>\n      {items.map((item, i) => {\n        const last = i === items.length - 1;\n        const next = items[i + 1];\n        return (\n          <View\n            key={`${item.title}-${i}`}\n            role=\"listitem\"\n            accessible\n            aria-label={[item.title, SPOKEN[item.state], item.time, item.description].filter(Boolean).join(', ')}\n            className=\"flex-row gap-3\">\n            <View className=\"items-center\">\n              <View\n                className={cn(\n                  'size-6 items-center justify-center rounded-full',\n                  item.state === 'done' && fill,\n                  item.state === 'current' && cn('bg-background border-2', ring),\n                  item.state === 'upcoming' && 'bg-background border-muted-foreground border-2'\n                )}>\n                {item.state === 'done' ? (\n                  <Icon as={CheckIcon} size={14} className={tone === 'success' ? 'text-success-foreground' : 'text-primary-foreground'} />\n                ) : item.state === 'current' ? (\n                  <View className={cn('size-2.5 rounded-full', fill)} />\n                ) : null}\n              </View>\n              {!last ? <View className={cn('min-h-4 w-0.5 flex-1', next && next.state !== 'upcoming' ? fill : 'bg-border')} /> : null}\n            </View>\n            <View className={cn('flex-1 gap-0.5 pt-0.5', !last && 'pb-5')}>\n              <Text className={item.state === 'upcoming' ? 'text-muted-foreground' : 'font-medium'}>{item.title}</Text>\n              {item.time ? <Text className=\"text-muted-foreground text-sm\">{item.time}</Text> : null}\n              {item.description ? <Text className=\"text-muted-foreground text-sm\">{item.description}</Text> : null}\n            </View>\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/timeline.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Timeline"
    ],
    "api": "<Timeline items={[{ title, time?, description?, state }]} tone? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}