{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chevrons-up-down-icon",
  "author": "nghia.ly <physicalmeans@gmail.com>",
  "description": "TBD",
  "devDependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/chevrons-up-down-icon/chevrons-up-down-icon.tsx",
      "content": "\"use client\"\n\nimport { motion, useAnimation } from \"motion/react\"\nimport { forwardRef, useImperativeHandle } from \"react\"\n\nexport type ChevronsUpDownIconHandle = {\n  startAnimation: () => void\n  stopAnimation: () => void\n}\n\nexport type ChevronsUpDownIconProps = React.ComponentProps<\"svg\"> & {\n  duration?: number\n}\n\nconst ChevronsUpDownIcon = forwardRef<\n  ChevronsUpDownIconHandle,\n  ChevronsUpDownIconProps\n>(({ duration = 0.3, ...props }, ref) => {\n  const controls = useAnimation()\n\n  useImperativeHandle(ref, () => {\n    return {\n      startAnimation: () => controls.start(\"animate\"),\n      stopAnimation: () => controls.start(\"normal\"),\n    }\n  })\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      {...props}\n    >\n      <motion.path\n        d=\"M7 15L12 20L17 15\"\n        variants={{\n          normal: {\n            d: \"M7 15L12 20L17 15\",\n          },\n          animate: {\n            d: \"M7 20L12 15L17 20\",\n          },\n        }}\n        initial=\"normal\"\n        animate={controls}\n        transition={{\n          duration,\n        }}\n      />\n      <motion.path\n        d=\"M7 9L12 4L17 9\"\n        variants={{\n          normal: {\n            d: \"M7 9L12 4L17 9\",\n          },\n          animate: {\n            d: \"M7 4L12 9L17 4\",\n          },\n        }}\n        initial=\"normal\"\n        animate={controls}\n        transition={{\n          duration,\n        }}\n      />\n    </svg>\n  )\n})\n\nChevronsUpDownIcon.displayName = \"ChevronsUpDownIcon\"\n\nexport { ChevronsUpDownIcon }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}