{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-motion",
  "type": "registry:component",
  "title": "Changelog motion",
  "description": "A React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/changelog-motion.tsx",
      "type": "registry:ui",
      "target": "components/ui/changelog-motion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\n\ntype Entry = { version: string; date: string; title: string; items: string[]; tag?: \"New\" | \"Fix\" | \"Premium\" }\n\ntype ChangelogMotionProps = {\n  entries?: Entry[]\n  className?: string\n}\n\nconst SAMPLE_ENTRIES: Entry[] = [\n  {\n    version: \"v2.4.0\",\n    date: \"Oct 8, 2026\",\n    title: \"Approvals and audit trail\",\n    tag: \"New\",\n    items: [\n      \"Refunds and credits over $1,000 now route to an approver\",\n      \"Every approval decision is logged with actor and timestamp\",\n      \"Audit trail export to CSV from the Settings page\",\n    ],\n  },\n  {\n    version: \"v2.3.2\",\n    date: \"Sep 24, 2026\",\n    title: \"Invoice reminders\",\n    tag: \"Fix\",\n    items: [\n      \"Reminders no longer send after a partial payment lands\",\n      \"Fixed timezone drift on due dates for customers in Europe\",\n    ],\n  },\n  {\n    version: \"v2.3.0\",\n    date: \"Sep 9, 2026\",\n    title: \"Multi-currency ledger\",\n    tag: \"Premium\",\n    items: [\n      \"Bill in one currency and report in another with locked rates\",\n      \"Month end reconciliation view with per-currency totals\",\n      \"Northwind-style parent and child accounts\",\n    ],\n  },\n]\n\n/** A vertical release timeline whose entries slide in as they scroll into view, with version, date and tag per release. */\nfunction ChangelogMotion({ entries = SAMPLE_ENTRIES, className }: ChangelogMotionProps) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"changelog-motion\" data-tier=\"premium\" className={cn(\"mx-auto max-w-2xl space-y-10\", className)}>\n      <div className=\"text-center\">\n        <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Changelog</p>\n        <h1 className=\"mt-2 text-3xl font-medium tracking-[-0.022em] text-fg\">What shipped</h1>\n      </div>\n      <ol className=\"relative space-y-8 border-l border-border pl-6\">\n        {entries.map((e, i) => (\n          <motion.li\n            key={e.version}\n            initial={reduce ? false : { opacity: 0, x: -8 }}\n            whileInView={{ opacity: 1, x: 0 }}\n            viewport={{ once: true }}\n            transition={{ delay: i * 0.05 }}\n            className=\"relative\"\n          >\n            <span className=\"absolute top-1.5 -left-[1.91rem] size-2.5 rounded-full border border-border bg-accent\" aria-hidden />\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"font-mono text-xs text-fg-muted\">{e.version}</span>\n              <span className=\"text-xs text-fg-muted\">{e.date}</span>\n              {e.tag ? <Badge variant=\"outline\">{e.tag}</Badge> : null}\n            </div>\n            <h2 className=\"mt-1 text-base font-medium text-fg\">{e.title}</h2>\n            <ul className=\"mt-2 space-y-1 text-sm text-fg-muted\">\n              {e.items.map((item) => (\n                <li key={item}>• {item}</li>\n              ))}\n            </ul>\n          </motion.li>\n        ))}\n      </ol>\n    </div>\n  )\n}\nexport { ChangelogMotion }\nexport type { ChangelogMotionProps, Entry as ChangelogEntry }\n"
    }
  ]
}