{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-timeline",
  "title": "Date Timeline",
  "description": "A short line with a gap that slides to the current date, and the dates; a scroll stage moves it through its tracks. No dependencies.",
  "registryDependencies": [
    "@mewo/scroll-stage"
  ],
  "files": [
    {
      "path": "registry/mewo/ui/date-timeline.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimelineProps extends React.ComponentProps<\"div\"> {\n  /** The dates, in order. */\n  dates?: string[]\n  /** The track names' prefix inside a ScrollStage: the frame is `<track>.timeline`, the sliding line\n   * `<track>.timelineLine` (relative to the frame) and each date `<track>.year<i>`. */\n  track?: string\n}\n\n/**\n * A short line with a gap in the middle, and the dates. Inside a ScrollStage the tracks slide the line so the gap\n * comes to the current date, and bring each date into it; elsewhere the parts lay out in order. Its own element takes\n * no space (display: contents).\n */\nexport function DateTimeline({ dates = [\"c. 3000 BCE\", \"1850s\", \"1930s\"], track, className, ...props }: DateTimelineProps) {\n  const name = (part: string) => (track ? `${track}.${part}` : undefined)\n  return (\n    <div data-slot=\"date-timeline\" className={cn(\"[--story-u:min(2.6667cqw,12px)] min-[901px]:[--story-u:0.625cqw] min-[901px]:@max-[900px]:[--story-u:min(2.6667cqw,12px)] text-[length:var(--story-u)]\", \"contents\", className)} {...props}>\n      <div data-track={name(\"timeline\")} className=\"h-[2px] w-[calc(var(--story-u)*46)] overflow-hidden max-[900px]:w-[calc(100cqw-calc(var(--story-u)*4))]\">\n        <div data-track={name(\"timelineLine\")} data-track-rel={track ? \"1\" : undefined} className=\"flex h-[2px] w-[calc(var(--story-u)*92)] justify-between max-[900px]:w-[calc(200cqw-calc(var(--story-u)*8))]\">\n          {/* a 10rem gap in the middle for the date */}\n          <span className=\"h-[2px] w-[calc(var(--story-u)*41)] bg-foreground max-[900px]:w-[calc(100cqw-calc(var(--story-u)*9))]\" />\n          <span className=\"h-[2px] w-[calc(var(--story-u)*41)] bg-foreground max-[900px]:w-[calc(100cqw-calc(var(--story-u)*9))]\" />\n        </div>\n      </div>\n      {dates.map((date, i) => (\n        <p key={date} data-track={name(`year${i}`)} className=\"text-[length:max(11px,calc(var(--story-u)*1.4))] font-semibold tracking-[-0.01em] whitespace-nowrap max-[900px]:text-[length:calc(var(--story-u)*1.4)]\">\n          {date}\n        </p>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "added": "2026-10-27"
  },
  "categories": [
    "scroll",
    "text"
  ],
  "type": "registry:ui"
}