{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-dialog-countdown",
  "title": "Dynamic Countdown Dialog",
  "description": "A dynamic countdown dialog component.",
  "registryDependencies": [
    "button",
    "dialog",
    "Quackzoer/shadcn-registry/dynamic-dialog"
  ],
  "files": [
    {
      "path": "components/dynamic-dialog/dialogs/countdown-dialog.tsx",
      "content": "\"use client\"\r\n\r\nimport { dialog, type DialogComponentProps } from '@/registry/lib/dynamic-dialog-state';\r\nimport { Button } from \"@/registry/ui/button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/registry/ui/dialog\";\r\nimport { Clock } from \"lucide-react\";\r\nimport { useEffect, useState } from 'react';\r\n\r\nexport interface CountdownDialogProps {\r\n  countdownSeconds: number;\r\n  autoConfirm?: boolean;\r\n  showProgress?: boolean;\r\n}\r\n\r\nconst circumference = 2 * Math.PI * 28;\r\n\r\nexport function CountdownDialog(props: DialogComponentProps<CountdownDialogProps, string>) {\r\n  const [timeRemaining, setTimeRemaining] = useState(props.countdownSeconds);\r\n\r\n  useEffect(() => {\r\n    const countdownInterval = setInterval(() => {\r\n      setTimeRemaining(prev => Math.max(0, prev - 1));\r\n    }, 1000);\r\n\r\n    const doneTimer = setTimeout(() => {\r\n      if (props.autoConfirm) props.confirm('auto-confirmed');\r\n    }, props.countdownSeconds * 1000);\r\n\r\n    return () => {\r\n      clearInterval(countdownInterval);\r\n      clearTimeout(doneTimer);\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  const handleCancel = () => props.dismiss(\"cancel\");\r\n  const handleConfirm = () => props.confirm('confirm pressed');\r\n\r\n  return (\r\n    <Dialog open={props.open} onOpenChange={props.onOpenChange}>\r\n      <DialogContent>\r\n        <style>{`\r\n          @keyframes __cd-bar { from { width: 0% } to { width: 100% } }\r\n          @keyframes __cd-circle { from { stroke-dashoffset: ${circumference} } to { stroke-dashoffset: 0 } }\r\n        `}</style>\r\n        <DialogHeader>\r\n          <div className=\"flex items-center gap-3 mb-4\">\r\n            <div className=\"flex-shrink-0 w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <Clock className=\"w-5 h-5 text-primary\" />\r\n            </div>\r\n            <div>\r\n              <DialogTitle className=\"text-lg font-semibold text-foreground\">\r\n                Timed Action\r\n              </DialogTitle>\r\n              <DialogDescription className=\"text-sm text-muted-foreground\">\r\n                {props.autoConfirm\r\n                  ? `Auto-confirming in ${timeRemaining}s`\r\n                  : `Action available in ${timeRemaining}s`\r\n                }\r\n              </DialogDescription>\r\n            </div>\r\n          </div>\r\n        </DialogHeader>\r\n        <div className=\"space-y-4\">\r\n          {props.showProgress !== false && (\r\n            <div className=\"space-y-2\">\r\n              <div className=\"flex justify-between text-sm text-muted-foreground\">\r\n                <span>Time remaining</span>\r\n                <span>{timeRemaining}s</span>\r\n              </div>\r\n              <div className=\"w-full bg-muted rounded-full h-2\">\r\n                <div\r\n                  className=\"bg-primary h-2 rounded-full\"\r\n                  style={{ animation: `__cd-bar ${props.countdownSeconds}s linear forwards` }}\r\n                />\r\n              </div>\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"flex justify-center py-4\">\r\n            <div className=\"relative w-16 h-16\">\r\n              <svg className=\"w-16 h-16 transform -rotate-90\" viewBox=\"0 0 64 64\">\r\n                <circle\r\n                  cx=\"32\"\r\n                  cy=\"32\"\r\n                  r=\"28\"\r\n                  stroke=\"currentColor\"\r\n                  strokeWidth=\"4\"\r\n                  fill=\"none\"\r\n                  className=\"text-muted\"\r\n                />\r\n                <circle\r\n                  cx=\"32\"\r\n                  cy=\"32\"\r\n                  r=\"28\"\r\n                  stroke=\"currentColor\"\r\n                  strokeWidth=\"4\"\r\n                  fill=\"none\"\r\n                  strokeDasharray={circumference}\r\n                  className=\"text-primary\"\r\n                  style={{ animation: `__cd-circle ${props.countdownSeconds}s linear forwards` }}\r\n                />\r\n              </svg>\r\n              <div className=\"absolute inset-0 flex items-center justify-center\">\r\n                <span className=\"text-2xl font-bold text-foreground\">{timeRemaining}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"flex justify-end space-x-3 pt-2\">\r\n            <Button\r\n              type=\"button\"\r\n              onClick={handleCancel}\r\n              variant=\"outline\"\r\n            >\r\n              Cancel\r\n            </Button>\r\n            <Button\r\n              onClick={handleConfirm}\r\n              disabled={timeRemaining > 0 && !props.autoConfirm}\r\n              variant=\"default\"\r\n            >\r\n              {timeRemaining > 0 && !props.autoConfirm\r\n                ? `Confirm (${timeRemaining}s)`\r\n                : 'Confirm'\r\n              }\r\n            </Button>\r\n          </div>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n\r\nexport const countdownDialog = dialog(CountdownDialog);\r\n",
      "type": "registry:component",
      "target": "@components/dynamic-dialog/dialogs/countdown-dialog.tsx"
    }
  ],
  "type": "registry:component"
}