{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "webhook",
  "type": "registry:ui",
  "addGlobalCss": false,
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "webhook-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 WebhookIconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface WebhookIconProps 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 WebhookIcon = forwardRef<WebhookIconHandle, WebhookIconProps>(\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 nodeVariants = (delay: number): Variants => ({\n   normal: { scale: 1 },\n   animate: {\n    scale: [1, 1.25, 1],\n    transition: {\n     duration: 0.35 * duration,\n     ease: \"easeInOut\",\n     delay: delay * duration,\n    },\n   },\n  });\n\n  const signalVariants = (\n   length: number,\n   delay: number,\n   reverse = false,\n  ): Variants => ({\n   normal: { strokeDashoffset: 0 },\n   animate: {\n    strokeDashoffset: [reverse ? -length : length, 0],\n    transition: {\n     duration: 0.3 * duration,\n     ease: \"easeInOut\",\n     delay: delay * 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      <path\n       d=\"M16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.004 8.83007 10.3141 10.0571 10.9973L7 16.5\"\n       opacity=\"0.25\"\n      />\n      <path\n       d=\"M5.062 13C3.83229 13.6824 3 14.994 3 16.5C3 18.7091 4.79086 20.5 7 20.5C9.20914 20.5 11 18.7091 11 16.5H17\"\n       opacity=\"0.25\"\n      />\n      <path\n       d=\"M12 7.5L15.0571 13.0027C15.6323 12.6825 16.2949 12.5 17 12.5C19.2091 12.5 21 14.2909 21 16.5C21 18.7091 19.2091 20.5 17 20.5C16.0541 20.5 15.1848 20.1716 14.5 19.6227\"\n       opacity=\"0.25\"\n      />\n      <m.path\n       d=\"M16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.004 8.83007 10.3141 10.0571 10.9973L7 16.5\"\n       strokeDasharray=\"24\"\n       strokeDashoffset=\"0\"\n       variants={signalVariants(24, 0)}\n      />\n      <m.path\n       d=\"M5.062 13C3.83229 13.6824 3 14.994 3 16.5C3 18.7091 4.79086 20.5 7 20.5C9.20914 20.5 11 18.7091 11 16.5H17\"\n       strokeDasharray=\"24\"\n       strokeDashoffset=\"0\"\n       variants={signalVariants(24, 0.28)}\n      />\n      <m.path\n       d=\"M12 7.5L15.0571 13.0027C15.6323 12.6825 16.2949 12.5 17 12.5C19.2091 12.5 21 14.2909 21 16.5C21 18.7091 19.2091 20.5 17 20.5C16.0541 20.5 15.1848 20.1716 14.5 19.6227\"\n       strokeDasharray=\"25\"\n       strokeDashoffset=\"0\"\n       variants={signalVariants(25, 0.56, true)}\n      />\n      <m.path\n       d=\"M12 8.5C12.5523 8.5 13 8.05228 13 7.5C13 6.94772 12.5523 6.5 12 6.5M12 8.5C11.4477 8.5 11 8.05228 11 7.5C11 6.94772 11.4477 6.5 12 6.5M12 8.5V6.5\"\n       variants={nodeVariants(0)}\n       style={{ transformBox: \"view-box\", originX: \"12px\", originY: \"7.5px\" }}\n      />\n      <m.path\n       d=\"M7 17.5C7.55228 17.5 8 17.0523 8 16.5C8 15.9477 7.55228 15.5 7 15.5M7 17.5C6.44772 17.5 6 17.0523 6 16.5C6 15.9477 6.44772 15.5 7 15.5M7 17.5V15.5\"\n       variants={nodeVariants(0.28)}\n       style={{ transformBox: \"view-box\", originX: \"7px\", originY: \"16.5px\" }}\n      />\n      <m.path\n       d=\"M17 17.5C17.5523 17.5 18 17.0523 18 16.5C18 15.9477 17.5523 15.5 17 15.5M17 17.5C16.4477 17.5 16 17.0523 16 16.5C16 15.9477 16.4477 15.5 17 15.5M17 17.5V15.5\"\n       variants={nodeVariants(0.56)}\n       style={{ transformBox: \"view-box\", originX: \"17px\", originY: \"16.5px\" }}\n      />\n     </m.svg>\n    </m.div>\n   </LazyMotion>\n  );\n },\n);\n\nWebhookIcon.displayName = \"WebhookIcon\";\nexport { WebhookIcon };\n",
      "type": "registry:ui"
    }
  ]
}