{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-timeline",
  "title": "Activity Timeline",
  "description": "Events, actors, timestamps, metadata, and grouped dates in an ordered timeline.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/components/activity-timeline.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { type ComponentProps, createContext, useContext, useId } from \"react\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const ACTIVITY_TIMELINE_VARIANTS = [\"rail\", \"card\", \"compact\"] as const;\nexport type ActivityTimelineVariant = (typeof ACTIVITY_TIMELINE_VARIANTS)[number];\nconst VariantContext = createContext<ActivityTimelineVariant | null>(null);\nconst GroupContext = createContext<string | null>(null);\nfunction useVariant(part: string) {\n  const variant = useContext(VariantContext);\n  if (!variant) throw new Error(`${part} must be used within ActivityTimeline`);\n  return variant;\n}\n\nconst activityTimelineVariants = cva(\n  \"grid min-w-0 text-[13px]/[18px] text-foreground [&_a]:text-foreground [&_a]:underline [&_a]:decoration-border-strong [&_a]:underline-offset-3 [&_a]:transition-[text-decoration-color] [&_a]:duration-120 [&_a]:ease-out [&_a]:hover:decoration-current motion-reduce:[&_a]:transition-none\",\n  {\n    variants: {\n      variant: {\n        rail: \"gap-5\",\n        card: \"gap-5\",\n        compact: \"gap-3.5\",\n      },\n    },\n  },\n);\n\nexport function ActivityTimeline({\n  variant = \"rail\",\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { variant?: ActivityTimelineVariant }) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <div\n        data-slot=\"activity-timeline\"\n        data-variant={variant}\n        className={cn(activityTimelineVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </VariantContext.Provider>\n  );\n}\n\nexport function ActivityTimelineGroup({ className, ...props }: ComponentProps<\"section\">) {\n  const variant = useVariant(\"ActivityTimelineGroup\");\n  const id = useId();\n  return (\n    <GroupContext.Provider value={id}>\n      <section\n        aria-labelledby={id}\n        data-slot=\"activity-timeline-group\"\n        className={cn(\n          \"grid min-w-0 rounded-[14px]\",\n          variant === \"compact\" ? \"gap-1.5\" : \"gap-3\",\n          variant === \"card\" ? \"border bg-card p-4\" : \"border-0 bg-transparent p-0\",\n          className,\n        )}\n        {...props}\n      />\n    </GroupContext.Provider>\n  );\n}\n\nexport function ActivityTimelineDate({ className, ...props }: ComponentProps<\"h3\">) {\n  const id = useContext(GroupContext);\n  if (!id) throw new Error(\"ActivityTimelineDate must be used within ActivityTimelineGroup\");\n  return (\n    <h3\n      data-slot=\"activity-timeline-date\"\n      className={cn(\"m-0 text-[11.5px]/4 font-medium text-subtle-foreground\", className)}\n      {...props}\n      id={id}\n    />\n  );\n}\n\nexport function ActivityTimelineEvents({ className, ...props }: ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"activity-timeline-events\"\n      className={cn(\"m-0 grid list-none gap-0 p-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineEvent({ className, ...props }: ComponentProps<\"li\">) {\n  const variant = useVariant(\"ActivityTimelineEvent\");\n  return (\n    <li\n      data-slot=\"activity-timeline-event\"\n      className={cn(\n        \"group/event relative grid min-w-0 animate-in fade-in-0 slide-in-from-bottom-1 duration-240 ease-out-quint fill-mode-both nth-2:[animation-delay:40ms] nth-3:[animation-delay:80ms] nth-4:[animation-delay:120ms] nth-5:[animation-delay:160ms] nth-6:[animation-delay:200ms] motion-reduce:animate-none\",\n        variant === \"compact\"\n          ? \"grid-cols-[16px_minmax(0,1fr)] gap-x-2 pb-2\"\n          : \"grid-cols-[28px_minmax(0,1fr)] gap-x-3 pb-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineMarker({ children, className, ...props }: ComponentProps<\"span\">) {\n  const variant = useVariant(\"ActivityTimelineMarker\");\n  const compact = variant === \"compact\";\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"activity-timeline-marker\"\n      className={cn(\"relative grid justify-items-center self-stretch\", className)}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"absolute left-1/2 w-px -translate-x-[0.5px] bg-border group-last/event:hidden\",\n          compact ? \"top-4 -bottom-2\" : \"top-7 -bottom-3.5\",\n        )}\n      />\n      <span\n        className={cn(\n          \"grid place-items-center rounded-full text-muted-foreground\",\n          compact ? \"size-4\" : \"size-7\",\n          children ? \"bg-muted ring-1 ring-foreground/6\" : \"bg-transparent\",\n        )}\n      >\n        {children ?? (\n          <span className=\"size-[7px] rounded-full bg-border-strong ring-3 ring-muted\" />\n        )}\n      </span>\n    </span>\n  );\n}\n\nexport function ActivityTimelineContent({ className, ...props }: ComponentProps<\"div\">) {\n  const variant = useVariant(\"ActivityTimelineContent\");\n  return (\n    <div\n      data-slot=\"activity-timeline-content\"\n      className={cn(\n        \"grid min-w-0\",\n        variant === \"compact\" ? \"gap-0.5 pt-0\" : \"gap-0.75 pt-1.25\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineTitle({ className, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"activity-timeline-title\"\n      className={cn(\"m-0 text-pretty wrap-anywhere text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineActor({ className, ...props }: ComponentProps<\"strong\">) {\n  return (\n    <strong\n      data-slot=\"activity-timeline-actor\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineTime({ className, ...props }: ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"activity-timeline-time\"\n      className={cn(\"text-[11.5px]/4 text-subtle-foreground tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ActivityTimelineMeta({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"activity-timeline-meta\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-[11.5px]/4 text-subtle-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/uai/activity-timeline.tsx"
    }
  ],
  "categories": [
    "feedback",
    "data-display"
  ],
  "type": "registry:ui"
}