{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkmark-square-0-1",
  "type": "registry:ui",
  "addGlobalCss": false,
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "checkmark-square-0-1-icon.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { Variants } from \"motion/react\";\nimport {\n LazyMotion,\n domMin,\n m,\n useAnimation,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n forwardRef,\n useCallback,\n useImperativeHandle,\n useRef,\n type HTMLAttributes,\n} from \"react\";\nexport interface CheckmarkSquare01IconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface CheckmarkSquare01IconProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n | \"color\"\n | \"onDrag\"\n | \"onDragStart\"\n | \"onDragEnd\"\n | \"onAnimationStart\"\n | \"onAnimationEnd\"\n | \"onAnimationIteration\"\n> {\n size?: number;\n duration?: number;\n isAnimated?: boolean;\n color?: string;\n}\n\nconst CheckmarkSquare01Icon = forwardRef<\n CheckmarkSquare01IconHandle,\n CheckmarkSquare01IconProps\n>(\n (\n  {\n   onMouseEnter,\n   onMouseLeave,\n   className,\n   size = 24,\n   duration = 1,\n   isAnimated = true,\n   color,\n   ...props\n  },\n  ref,\n ) => {\n  const controls = useAnimation();\n  const reduced = useReducedMotion();\n  const isControlled = useRef(false);\n\n  useImperativeHandle(ref, () => {\n   isControlled.current = true;\n   return {\n    startAnimation: () =>\n     reduced ? controls.start(\"normal\") : controls.start(\"animate\"),\n    stopAnimation: () => controls.start(\"normal\"),\n   };\n  });\n\n  const handleEnter = useCallback(\n   (e?: React.MouseEvent<HTMLDivElement>) => {\n    if (!isAnimated || reduced) return;\n    if (!isControlled.current) controls.start(\"animate\");\n    else onMouseEnter?.(e as any);\n   },\n   [controls, reduced, isAnimated, onMouseEnter],\n  );\n\n  const handleLeave = useCallback(\n   (e?: React.MouseEvent<HTMLDivElement>) => {\n    if (!isControlled.current) controls.start(\"normal\");\n    else onMouseLeave?.(e as any);\n   },\n   [controls, onMouseLeave],\n  );\n\n  const shapeVariants: Variants = {\n   normal: { scale: 1 },\n   animate: {\n    scale: [1, 1.1, 0.96, 1],\n    transition: {\n     duration: 0.6 * duration,\n     ease: \"easeInOut\",\n     times: [0, 0.35, 0.7, 1],\n    },\n   },\n  };\n\n  const tickVariants: Variants = {\n   normal: { strokeDashoffset: 0, opacity: 1 },\n   animate: {\n    strokeDashoffset: [13, 0],\n    opacity: [0, 1],\n    transition: {\n     strokeDashoffset: {\n      duration: 0.45 * duration,\n      ease: \"easeOut\",\n      delay: 0.15 * duration,\n     },\n     opacity: { duration: 0.1 * duration, delay: 0.15 * duration },\n    },\n   },\n  };\n\n  return (\n   <LazyMotion features={domMin} strict>\n    <m.div\n     className={cn(\"inline-flex items-center justify-center\", className)}\n     onMouseEnter={handleEnter}\n     onMouseLeave={handleLeave}\n     {...props}\n     style={{ color, ...props.style }}\n    >\n     <m.svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      animate={controls}\n      initial=\"normal\"\n     >\n      <m.path\n       d=\"M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z\"\n       variants={shapeVariants}\n       style={{ transformBox: \"view-box\", originX: \"12px\", originY: \"12px\" }}\n      />\n      <m.path\n       d=\"M8 13.75C8 13.75 9.6 14.6625 10.4 16C10.4 16 12.8 10.75 16 9\"\n       strokeDasharray=\"13\"\n       strokeDashoffset=\"0\"\n       variants={tickVariants}\n      />\n     </m.svg>\n    </m.div>\n   </LazyMotion>\n  );\n },\n);\n\nCheckmarkSquare01Icon.displayName = \"CheckmarkSquare01Icon\";\nexport { CheckmarkSquare01Icon };\n",
      "type": "registry:ui"
    }
  ]
}