{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "confirm-button",
  "title": "Confirm Button",
  "description": "Two-click inline confirm for destructive actions that do not need a dialog.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/button",
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/confirm-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { EASE_OUT, INSTANT, SPRING } from \"@/lib/motion\"\nimport { Button, type ButtonProps } from \"@/components/ui/button\"\n\ntype ConfirmButtonProps = Omit<ButtonProps, \"onClick\" | \"asChild\"> & {\n  /** Runs on the second click while armed. */\n  onConfirm: () => void\n  /** Label shown while armed. */\n  confirmLabel?: React.ReactNode\n  /** How long the button stays armed, in ms. */\n  timeout?: number\n}\n\n/**\n * Two-step inline confirm for destructive actions that do not deserve a dialog.\n * First click arms it (red, new label), a second click within `timeout` confirms.\n */\nfunction ConfirmButton({ onConfirm, confirmLabel = \"Emin misiniz?\", timeout = 3000, children, variant = \"outline\", color, onBlur, className, ...props }: ConfirmButtonProps) {\n  const [armed, setArmed] = React.useState(false)\n  const reduce = useReducedMotion()\n  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  React.useEffect(() => () => clearTimeout(timer.current), [])\n\n  function handleClick() {\n    clearTimeout(timer.current)\n    if (armed) {\n      setArmed(false)\n      onConfirm()\n      return\n    }\n    setArmed(true)\n    timer.current = setTimeout(() => setArmed(false), timeout)\n  }\n\n  const offset = reduce ? 0 : 8\n\n  return (\n    <Button\n      {...props}\n      variant={armed ? \"solid\" : variant}\n      color={armed ? \"red\" : color}\n      aria-live=\"polite\"\n      data-armed={armed || undefined}\n      onClick={handleClick}\n      onBlur={(event) => {\n        onBlur?.(event)\n        clearTimeout(timer.current)\n        setArmed(false)\n      }}\n      className={cn(\"overflow-hidden\", className)}\n    >\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <motion.span\n          key={armed ? \"armed\" : \"idle\"}\n          initial={{ y: offset, opacity: 0, filter: reduce ? \"blur(0px)\" : \"blur(2px)\" }}\n          animate={{ y: 0, opacity: 1, filter: \"blur(0px)\", transition: reduce ? INSTANT : SPRING }}\n          exit={{ y: -offset, opacity: 0, filter: reduce ? \"blur(0px)\" : \"blur(2px)\", transition: reduce ? INSTANT : { duration: 0.12, ease: EASE_OUT } }}\n          className=\"inline-flex items-center gap-[inherit]\"\n        >\n          {armed ? confirmLabel : children}\n        </motion.span>\n      </AnimatePresence>\n    </Button>\n  )\n}\n\nexport { ConfirmButton, type ConfirmButtonProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/confirm-button.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/confirm-button",
  "categories": [
    "forms",
    "feedback"
  ],
  "type": "registry:component"
}