{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clock-sm-11",
  "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-11.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  MinusIcon,\n  PauseIcon,\n  PlayIcon,\n  PlusIcon,\n  RotateCcw,\n} from \"lucide-react\";\n\nimport {\n  Widget,\n  WidgetContent,\n  WidgetFooter,\n  WidgetHeader,\n} from \"@/registry/default/ui/widget\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Button } from \"@/registry/default/ui/button\";\n\ntype TimeAction = \"add\" | \"subtract\";\n\nexport default function WidgetDemo() {\n  const [isCountingDown, setIsCountingDown] = React.useState(false);\n  const [timeLeft, setTimeLeft] = React.useState(60);\n  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const minutes = Math.floor(timeLeft / 60);\n  const seconds = (timeLeft % 60).toString().padStart(2, \"0\");\n\n  const updateTime = React.useCallback((action: TimeAction) => {\n    setTimeLeft((prev) => {\n      if (action === \"add\") return prev + 60;\n      if (action === \"subtract\" && prev >= 60) return prev - 60;\n      return prev;\n    });\n  }, []);\n\n  const resetTimer = React.useCallback(() => {\n    setIsCountingDown(false);\n    setTimeLeft(60);\n  }, []);\n\n  const handleToggle = React.useCallback(() => {\n    setIsCountingDown((prev) => !prev);\n  }, []);\n\n  React.useEffect(() => {\n    if (isCountingDown && !intervalRef.current) {\n      intervalRef.current = setInterval(() => {\n        setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));\n      }, 1000);\n    }\n\n    if (!isCountingDown) {\n      clearInterval(intervalRef.current!);\n      intervalRef.current = null;\n    }\n\n    return () => {\n      clearInterval(intervalRef.current!);\n      intervalRef.current = null;\n    };\n  }, [isCountingDown]);\n\n  return (\n    <Widget className=\"gap-3\" design=\"mumbai\">\n      <WidgetHeader className=\"items-center\">\n        <Button\n          aria-label=\"Subtract one minute\"\n          disabled={isCountingDown || timeLeft <= 60}\n          onClick={() => updateTime(\"subtract\")}\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"disabled:cursor-not-allowed\"\n        >\n          <MinusIcon />\n        </Button>\n\n        <Label className=\"text-muted-foreground text-base\">\n          {minutes} Min{minutes !== 1 ? \"s\" : \"\"}\n        </Label>\n        <Button\n          aria-label=\"Add one minute\"\n          disabled={isCountingDown || timeLeft >= 600}\n          onClick={() => updateTime(\"add\")}\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"disabled:cursor-not-allowed\"\n        >\n          <PlusIcon />\n        </Button>\n      </WidgetHeader>\n      <WidgetContent>\n        <div className=\"flex h-full w-full items-center justify-center\">\n          <Label className=\"text-5xl\">\n            {minutes}:{seconds}\n          </Label>\n        </div>\n      </WidgetContent>\n      <WidgetFooter>\n        <Button\n          aria-label=\"Reset timer\"\n          onClick={resetTimer}\n          variant=\"outline\"\n          size=\"icon-sm\"\n          className=\"rounded-full\"\n        >\n          <RotateCcw />\n        </Button>\n        <Button\n          aria-label={isCountingDown ? \"Pause timer\" : \"Start timer\"}\n          onClick={handleToggle}\n          variant=\"outline\"\n          size=\"icon-sm\"\n          className=\"rounded-full\"\n        >\n          {isCountingDown ? (\n            <PauseIcon className=\"size-4 fill-current stroke-none\" />\n          ) : (\n            <PlayIcon className=\"size-4 fill-current stroke-none\" />\n          )}\n        </Button>\n      </WidgetFooter>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "clock"
    ],
    "size": "sm"
  }
}