{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-check",
  "title": "Animated Check",
  "description": "Self-drawing check icon, plus a copy-to-clipboard button that confirms with it.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@ikas/button",
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/animated-check.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { CopyIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { EASE_OUT, ICON_SPRING, INSTANT } from \"@/lib/motion\"\nimport { Button, type ButtonProps } from \"@/components/ui/button\"\n\n/** A check mark that draws itself and pops in when it mounts. */\nfunction AnimatedCheckIcon({ className, strokeWidth = 2.25 }: { className?: string; strokeWidth?: number }) {\n  const reduce = useReducedMotion()\n\n  return (\n    <motion.svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      initial={reduce ? false : { scale: 0.6 }}\n      animate={{ scale: 1 }}\n      transition={reduce ? INSTANT : ICON_SPRING}\n      className={cn(\"size-4\", className)}\n    >\n      <motion.path\n        d=\"M4.5 12.75l5 5 10-11.5\"\n        initial={reduce ? false : { pathLength: 0 }}\n        animate={{ pathLength: 1 }}\n        transition={reduce ? INSTANT : { duration: 0.25, ease: EASE_OUT }}\n      />\n    </motion.svg>\n  )\n}\n\ntype CopyIconButtonProps = Omit<ButtonProps, \"onClick\" | \"children\" | \"asChild\"> & {\n  /** Text copied to the clipboard. */\n  value: string\n  /** Accessible label before copying. */\n  label?: string\n}\n\n/** Icon button that copies `value` and swaps to a drawn check for 1.5s. */\nfunction CopyIconButton({ value, label = \"Kopyala\", variant = \"ghost\", size = \"icon-sm\", className, ...props }: CopyIconButtonProps) {\n  const [copied, setCopied] = React.useState(false)\n  const reduce = useReducedMotion()\n\n  React.useEffect(() => {\n    if (!copied) return\n    const timeout = setTimeout(() => setCopied(false), 1500)\n    return () => clearTimeout(timeout)\n  }, [copied])\n\n  const swap = reduce\n    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }\n    : {\n        initial: { opacity: 0, scale: 0.8, filter: \"blur(2px)\" },\n        animate: { opacity: 1, scale: 1, filter: \"blur(0px)\" },\n        exit: { opacity: 0, scale: 0.8, filter: \"blur(2px)\" },\n      }\n\n  return (\n    <Button\n      {...props}\n      variant={variant}\n      size={size}\n      aria-label={copied ? \"Kopyalandı\" : label}\n      className={cn(copied && \"text-success\", className)}\n      onClick={() => {\n        navigator.clipboard?.writeText(value).then(\n          () => setCopied(true),\n          () => setCopied(true)\n        )\n      }}\n    >\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <motion.span key={copied ? \"check\" : \"copy\"} {...swap} transition={{ duration: 0.15, ease: EASE_OUT }} className=\"flex\">\n          {copied ? <AnimatedCheckIcon /> : <CopyIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </Button>\n  )\n}\n\nexport { AnimatedCheckIcon, CopyIconButton, type CopyIconButtonProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/animated-check.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/animated-check",
  "categories": [
    "motion",
    "forms"
  ],
  "type": "registry:component"
}