{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-line-drawing",
  "type": "registry:ui",
  "title": "Line drawing",
  "description": "Draw icons, paths, or explanatory connectors with stroke offset animation.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "polish-effects"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/line-drawing/",
  "files": [
    {
      "path": "src/registry/primitives/line-drawing.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/line-drawing.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Transition } from \"motion/react\";\n\nconst EASE_OUT = [0.33, 1, 0.68, 1] as const;\n\nexport type LineDrawingPrimitiveProps = {\n  path?: string;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  delay?: number;\n  strokeWidth?: number;\n  label?: string;\n  className?: string;\n};\n\nexport function LineDrawingPrimitive({\n  path = \"M6 13.5 10.5 18 20 7.5\",\n  duration = 1,\n  easing = EASE_OUT,\n  delay = 0,\n  strokeWidth = 2,\n  label = \"Complete\",\n  className,\n}: LineDrawingPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <motion.svg\n      className={className}\n      viewBox=\"0 0 26 26\"\n      fill=\"none\"\n      role=\"img\"\n      aria-label={label}\n    >\n      <motion.path\n        d={path}\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        initial={reduceMotion ? false : { pathLength: 0, opacity: 0 }}\n        animate={{ pathLength: 1, opacity: 1 }}\n        transition={reduceMotion ? { duration: 0.12 } : { duration, delay, ease: easing }}\n      />\n    </motion.svg>\n  );\n}\n"
    }
  ]
}