{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "draw-path",
  "title": "Draw Path",
  "description": "Draws SVG strokes as if by hand: signatures, underlines, diagrams.",
  "dependencies": [
    "gsap"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/draw-path.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { DrawSVGPlugin } from \"gsap/DrawSVGPlugin\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") gsap.registerPlugin(DrawSVGPlugin, ScrollTrigger);\n\ntype DrawPathProps = React.ComponentProps<\"svg\"> & {\n  /** Draw on mount, when scrolled into view, or scrubbed to scroll position. */\n  trigger?: \"mount\" | \"inView\" | \"scroll\";\n  duration?: number;\n};\n\n/**\n * Draws the strokes of any inline SVG as if by hand (GSAP DrawSVGPlugin): signatures, underlines, diagrams,\n * icons. Put your paths inside; every stroked element draws in sequence.\n */\nfunction DrawPath({ className, trigger = \"inView\", duration = 1.4, children, ...props }: DrawPathProps) {\n  const ref = React.useRef<SVGSVGElement>(null);\n\n  useGSAP(\n    () => {\n      const svg = ref.current;\n      if (!svg || !motionScale(svg)) return;\n      const paths = svg.querySelectorAll(\"path, line, polyline, circle, rect, ellipse\");\n      const vars: gsap.TweenVars = { drawSVG: \"0%\", duration, ease: \"power2.inOut\", stagger: duration / Math.max(paths.length, 1) / 2 };\n      if (trigger === \"scroll\") gsap.from(paths, { drawSVG: \"0%\", ease: \"none\", scrollTrigger: { trigger: svg, start: \"top 85%\", end: \"bottom 40%\", scrub: 0.5 } });\n      else gsap.from(paths, { ...vars, scrollTrigger: trigger === \"inView\" ? { trigger: svg, start: \"top 85%\", once: true } : undefined });\n    },\n    { scope: ref, dependencies: [trigger, duration] },\n  );\n\n  return (\n    <svg ref={ref} data-slot=\"draw-path\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={cn(className)} {...props}>\n      {children}\n    </svg>\n  );\n}\n\nexport { DrawPath };\nexport type { DrawPathProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/draw-path",
  "categories": [
    "effects"
  ],
  "type": "registry:ui"
}