{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "type": "registry:ui",
  "title": "Timeline",
  "description": "خط زمانی رویدادها و فعالیت‌ها، به ترتیب داده‌شده",
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/relative-time.json"
  ],
  "files": [
    {
      "path": "registry/kashi/Timeline.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Timeline.tsx",
      "content": "\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"./cx\";\nimport { RelativeTime } from \"./RelativeTime\";\n\nexport interface TimelineItem {\n  id?: string | number;\n  title: ReactNode;\n  /** Date به شکل نسبی («۵ دقیقه پیش») نمایش داده می‌شود */\n  time?: Date | ReactNode;\n  /** آیکون یا آواتار داخل نشانگر */\n  icon?: ReactNode;\n  tone?: \"neutral\" | \"brand\" | \"success\" | \"error\";\n  /** متن یا محتوای اضافه در کادر زیر عنوان، مثل متن کامنت */\n  content?: ReactNode;\n}\n\nexport interface TimelineProps extends HTMLAttributes<HTMLOListElement> {\n  items: TimelineItem[];\n  /** @default \"fa\" */\n  digits?: \"fa\" | \"latin\";\n}\n\nconst Dot = () => <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"10\" r=\"3\" fill=\"currentColor\" /></svg>;\n\n/** خط زمانی رویدادها و فعالیت‌ها، به ترتیب داده‌شده */\nexport function Timeline({ items, digits, className, ...rest }: TimelineProps) {\n  return (\n    <ol className={cx(\"k-timeline\", className)} {...rest}>\n      {items.map((it, i) => (\n        <li key={it.id ?? i} className=\"k-timeline__item\" data-tone={it.tone && it.tone !== \"neutral\" ? it.tone : undefined}>\n          <span className=\"k-timeline__marker\" aria-hidden=\"true\">{it.icon ?? <Dot />}</span>\n          <div className=\"k-timeline__body\">\n            <p className=\"k-timeline__title\">{it.title}</p>\n            {it.time !== undefined && (\n              <span className=\"k-timeline__time\">{it.time instanceof Date ? <RelativeTime date={it.time} digits={digits} /> : it.time}</span>\n            )}\n            {it.content && <div className=\"k-timeline__content\">{it.content}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"
    }
  ]
}