{
  "name": "relative-time-card-variants-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "hover-card"
  ],
  "files": [
    {
      "path": "examples/relative-time-card-variants-demo.tsx",
      "type": "registry:example",
      "content": "import { Clock } from \"lucide-react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { RelativeTimeCard } from \"@/registry/bases/radix/ui/relative-time-card\";\n\nexport default function RelativeTimeCardVariantsDemo() {\n  const now = new Date();\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">Style variants</span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={now} variant=\"default\" />\n          <RelativeTimeCard date={now} variant=\"muted\" />\n          <RelativeTimeCard date={now} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">Custom styling</span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard\n            date={now}\n            className=\"text-blue-500 hover:text-blue-700\"\n          />\n          <RelativeTimeCard\n            date={now}\n            className=\"font-semibold text-green-600 hover:text-green-800\"\n          />\n          <RelativeTimeCard\n            date={now}\n            className=\"text-purple-500 italic hover:text-purple-700\"\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">\n          Hover card positions\n        </span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={now} side=\"top\" align=\"start\" sideOffset={10}>\n            Top aligned\n          </RelativeTimeCard>\n          <RelativeTimeCard\n            date={now}\n            side=\"right\"\n            align=\"center\"\n            sideOffset={10}\n          >\n            Right aligned\n          </RelativeTimeCard>\n          <RelativeTimeCard\n            date={now}\n            side=\"bottom\"\n            align=\"end\"\n            sideOffset={10}\n          >\n            Bottom aligned\n          </RelativeTimeCard>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">Custom trigger</span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={now} asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              <Clock />\n              Time details\n            </Button>\n          </RelativeTimeCard>\n          <RelativeTimeCard date={now}>\n            <div className=\"flex items-center gap-2 text-emerald-600\">\n              <span className=\"i-lucide-calendar h-4 w-4\" />\n              <span>View date</span>\n            </div>\n          </RelativeTimeCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}