{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "launch-countdown",
  "type": "registry:component",
  "title": "Launch countdown",
  "description": "A React launch countdown showing days, hours, minutes and seconds to a target time, with digits that slide in on each tick and a waitlist call to action.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/launch-countdown.tsx",
      "type": "registry:ui",
      "target": "components/ui/launch-countdown.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\n\nfunction Unit({ label, value }: { label: string; value: number }) {\n  const reduce = useReducedMotion()\n  const v = String(value).padStart(2, \"0\")\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex gap-1\" aria-label={`${value} ${label}`}>\n        {v.split(\"\").map((d, i) => (\n          <motion.span\n            key={`${label}-${i}-${d}`}\n            initial={reduce ? false : { y: 10 }}\n            animate={{ y: 0 }}\n            className=\"inline-flex h-14 w-10 items-center justify-center rounded-lg border border-border bg-surface font-mono text-2xl font-medium tabular-nums text-fg shadow-highlight\"\n          >\n            {d}\n          </motion.span>\n        ))}\n      </div>\n      <span className=\"text-[10px] font-medium tracking-[0.01em] text-fg-muted uppercase\">{label}</span>\n    </div>\n  )\n}\n\nfunction LaunchCountdown({\n  title = \"Opens in\",\n  targetOffsetMs = 1000 * 60 * 60 * 36,\n  className,\n}: {\n  title?: string\n  targetOffsetMs?: number\n  className?: string\n}) {\n  const target = React.useMemo(() => Date.now() + targetOffsetMs, [targetOffsetMs])\n  const [left, setLeft] = React.useState(targetOffsetMs)\n  React.useEffect(() => {\n    const id = window.setInterval(() => setLeft(Math.max(0, target - Date.now())), 1000)\n    return () => window.clearInterval(id)\n  }, [target])\n  const s = Math.floor(left / 1000)\n  const days = Math.floor(s / 86400)\n  const hours = Math.floor((s % 86400) / 3600)\n  const mins = Math.floor((s % 3600) / 60)\n  const secs = s % 60\n  return (\n    <section\n      data-slot=\"launch-countdown\"\n      data-tier=\"premium\"\n      className={cn(\n        \"flex flex-col items-center gap-8 rounded-2xl border border-border bg-bg px-6 py-16 text-center\",\n        className\n      )}\n    >\n      <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">{title}</p>\n      <div className=\"flex flex-wrap items-end justify-center gap-4\">\n        <Unit label=\"Days\" value={days} />\n        <Unit label=\"Hours\" value={hours} />\n        <Unit label=\"Mins\" value={mins} />\n        <Unit label=\"Secs\" value={secs} />\n      </div>\n      <MagneticCta>Join the waitlist</MagneticCta>\n    </section>\n  )\n}\nexport { LaunchCountdown }\n"
    }
  ]
}