{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clock-sm-12",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/button.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/clock/sm/clock-12.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState, useEffect, useRef } from \"react\";\r\nimport { Play, Pause, RotateCcw } from \"lucide-react\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetFooter,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\nimport { Button } from \"@/registry/default/ui/button\";\r\n\r\nexport default function StopwatchPage() {\r\n  const [time, setTime] = useState(0);\r\n  const [isRunning, setIsRunning] = useState(false);\r\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (isRunning) {\r\n      intervalRef.current = setInterval(() => {\r\n        setTime((prev) => prev + 10);\r\n      }, 10);\r\n    } else {\r\n      if (intervalRef.current) {\r\n        clearInterval(intervalRef.current);\r\n      }\r\n    }\r\n\r\n    return () => {\r\n      if (intervalRef.current) {\r\n        clearInterval(intervalRef.current);\r\n      }\r\n    };\r\n  }, [isRunning]);\r\n\r\n  const formatTime = (ms: number) => {\r\n    const totalSeconds = Math.floor(ms / 1000);\r\n    const seconds = totalSeconds % 60;\r\n    const milliseconds = Math.floor((ms % 1000) / 10);\r\n\r\n    const padZero = (num: number) => String(num).padStart(2, \"0\");\r\n\r\n    return {\r\n      seconds: padZero(seconds),\r\n      milliseconds: padZero(milliseconds),\r\n    };\r\n  };\r\n\r\n  const { seconds, milliseconds } = formatTime(time);\r\n\r\n  const totalSeconds = Math.floor(time / 1000);\r\n  const totalMilliseconds = time % 1000;\r\n\r\n  const secondHandRotation =\r\n    ((totalSeconds % 60) + totalMilliseconds / 1000) * 6;\r\n\r\n  const handleReset = () => {\r\n    setTime(0);\r\n    setIsRunning(false);\r\n  };\r\n\r\n  const handlePlayPause = () => {\r\n    setIsRunning(!isRunning);\r\n  };\r\n\r\n  return (\r\n    <Widget design=\"mumbai\">\r\n      <WidgetContent className=\"border-foreground/50 relative mx-auto aspect-square size-full max-h-32 max-w-32 rounded-full border-2\">\r\n        {/* Clock center dot */}\r\n        <div className=\"absolute top-1/2 left-1/2 z-20 size-2 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-red-500\" />\r\n\r\n        {[...Array(60)].map((_, i) => {\r\n          return (\r\n            <div\r\n              key={`tick-${i}`}\r\n              className=\"absolute h-full w-full\"\r\n              style={{\r\n                transform: `rotate(${i * 6}deg)`,\r\n              }}\r\n            >\r\n              {/* Small second tick */}\r\n              <div className=\"bg-muted absolute top-0 left-1/2 h-1.5 w-0.5 -translate-x-1/2 transform\" />\r\n            </div>\r\n          );\r\n        })}\r\n\r\n        {/* Hour markers and numbers */}\r\n        {[...Array(12)].map((_, i) => {\r\n          const angle = i * 30 * (Math.PI / 180);\r\n\r\n          return (\r\n            <div\r\n              key={i}\r\n              className=\"absolute h-full w-full\"\r\n              style={{\r\n                transform: `rotate(${i * 30}deg)`,\r\n              }}\r\n            >\r\n              {/* Hour tick */}\r\n              <div className=\"bg-muted-foreground/50 absolute top-0 left-1/2 h-3 w-0.5 -translate-x-1/2 transform\" />\r\n            </div>\r\n          );\r\n        })}\r\n\r\n        {/* Numbers 1-12 */}\r\n        {[...Array(12)].map((_, i) => {\r\n          const angle = i * 30 * (Math.PI / 180);\r\n          const x = Math.sin(angle) * 50;\r\n          const y = -Math.cos(angle) * 50;\r\n          const number = i === 0 ? 12 : i;\r\n\r\n          return (\r\n            <Label\r\n              key={`num-${i}`}\r\n              className=\"text-muted-foreground absolute flex size-4 items-center justify-center text-xs font-semibold\"\r\n              style={{\r\n                left: `calc(50% + ${x}px)`,\r\n                top: `calc(50% + ${y}px)`,\r\n                transform: \"translate(-50%, -50%)\",\r\n              }}\r\n            >\r\n              {number}\r\n            </Label>\r\n          );\r\n        })}\r\n\r\n        {/* Second hand (red) with dot at the end */}\r\n        <div\r\n          className=\"absolute top-1/2 left-1/2 z-10 h-16 w-0.5 origin-bottom rounded-full bg-red-500\"\r\n          style={{\r\n            transform: `translate(-50%, -100%) rotate(${secondHandRotation}deg)`,\r\n          }}\r\n        />\r\n\r\n        <Label className=\"text-foreground absolute bottom-8 z-5 text-center text-lg\">\r\n          {seconds}.{milliseconds}\r\n        </Label>\r\n      </WidgetContent>\r\n\r\n      <WidgetFooter>\r\n        {/* Reset Button */}\r\n        <Button\r\n          onClick={handleReset}\r\n          size=\"icon-sm\"\r\n          variant=\"outline\"\r\n          className=\"rounded-full\"\r\n          aria-label=\"Reset stopwatch\"\r\n        >\r\n          <RotateCcw className=\"size-4\" />\r\n        </Button>\r\n        <Button\r\n          onClick={handlePlayPause}\r\n          size=\"icon-sm\"\r\n          variant=\"outline\"\r\n          className=\"rounded-full\"\r\n          aria-label={isRunning ? \"Pause stopwatch\" : \"Start stopwatch\"}\r\n        >\r\n          {isRunning ? (\r\n            <Pause className=\"size-4 fill-current\" />\r\n          ) : (\r\n            <Play className=\"size-4 fill-current\" />\r\n          )}\r\n        </Button>\r\n      </WidgetFooter>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "clock"
    ],
    "size": "sm"
  }
}