{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "a-arrow-down",
  "type": "registry:ui",
  "title": "a-arrow-down",
  "description": "Animated a arrow down icon for Vue",
  "dependencies": [
    "motion-v"
  ],
  "files": [
    {
      "path": "components/ui/a-arrow-down.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport { motion, useAnimationControls } from 'motion-v'\nimport type { Variants } from 'motion-v'\nimport { useIconAnimation } from '../composables/useIconAnimation'\nimport type { AnimatedIconHandle } from '../types'\n\ndefineOptions({ inheritAttrs: false, name: 'AArrowDownIcon' })\n\nwithDefaults(\n  defineProps<{\n    size?: number\n  }>(),\n  { size: 28 },\n)\n\n// the letter holds the baseline while the arrow drops, head first, and settles\n// authored from scripts/authored\nconst letterVariants: Variants = {\n  normal: { transform: 'scale(1)' },\n  animate: {\n    transform: ['scale(1)', 'scale(0.975)', 'scale(1)'],\n    transition: { duration: 0.46, times: [0, 0.34, 1], ease: [0.23, 1, 0.32, 1] },\n  },\n};\n\nconst shaftVariants: Variants = {\n  normal: { transform: 'translateY(0px) scaleY(1)' },\n  animate: {\n    transform: [\n      'translateY(0px) scaleY(1)',\n      'translateY(0.6px) scaleY(0.86)',\n      'translateY(1.6px) scaleY(1.06)',\n      'translateY(0px) scaleY(1)',\n    ],\n    transition: {\n      duration: 0.62,\n      times: [0, 0.26, 0.56, 1],\n      ease: [\n        [0.77, 0, 0.175, 1],\n        [0.23, 1, 0.32, 1],\n        [0.23, 1, 0.32, 1],\n      ],\n    },\n  },\n};\n\nconst headVariants: Variants = {\n  normal: { transform: 'translateY(0px)' },\n  animate: {\n    transform: ['translateY(0px)', 'translateY(2.6px)', 'translateY(-0.4px)', 'translateY(0px)'],\n    transition: {\n      duration: 0.64,\n      delay: 0.03,\n      times: [0, 0.44, 0.72, 1],\n      ease: [\n        [0.77, 0, 0.175, 1],\n        [0.23, 1, 0.32, 1],\n        [0.23, 1, 0.32, 1],\n      ],\n    },\n  },\n};\n\nconst controls = useAnimationControls()\nconst { onMouseEnter, onMouseLeave, startAnimation, stopAnimation } = useIconAnimation({\n  controls,\n  loops: false,\n})\n\ndefineExpose<AnimatedIconHandle>({ startAnimation, stopAnimation })\n</script>\n\n<template>\n  <div class=\"hia-icon\" @mouseenter=\"onMouseEnter\" @mouseleave=\"onMouseLeave\" v-bind=\"$attrs\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" :width=\"size\" :height=\"size\" viewBox=\"0 0 24 24\" fill=\"none\" overflow=\"visible\">\n            <motion.path d=\"M2 18L6.05826 6.66218C6.37429 5.77927 7.62571 5.77927 7.94174 6.66219L12 18\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" :variants=\"letterVariants\" :animate=\"controls\" initial=\"normal\" :style=\"{ transformOrigin: '7px 18px' }\" />\n            <motion.path d=\"M4 14H10\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" :variants=\"letterVariants\" :animate=\"controls\" initial=\"normal\" :style=\"{ transformOrigin: '7px 18px' }\" />\n            <motion.path d=\"M18 16V7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" :variants=\"shaftVariants\" :animate=\"controls\" initial=\"normal\" :style=\"{ transformOrigin: '18px 7px' }\" />\n            <motion.path d=\"M14 13C14 13 16.946 17 18 17C19.0541 17 22 13 22 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" :variants=\"headVariants\" :animate=\"controls\" initial=\"normal\" :style=\"{ transformOrigin: '18px 15px' }\" />\n          </svg>\n        </div>\n</template>\n"
    },
    {
      "path": "composables/useIconAnimation.ts",
      "type": "registry:lib",
      "content": "import { ref, toValue, type MaybeRefOrGetter } from 'vue'\nimport type { AnimatedIconHandle } from '../types'\n\nexport type IconPose = 'normal' | 'animate'\n\ntype AnimationControls = {\n  set: (variant: IconPose | Record<string, unknown>) => void\n  start: (variant: IconPose | Record<string, unknown>) => Promise<unknown>\n}\n\nexport function useReducedMotionFlag(\n  reduced?: MaybeRefOrGetter<boolean | undefined>,\n) {\n  if (typeof window === 'undefined') return () => false\n  return () => {\n    const override = reduced === undefined ? undefined : toValue(reduced)\n    if (override !== undefined) return override\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  }\n}\n\nexport function useIconAnimation(options: {\n  controls: AnimationControls\n  loops?: boolean\n}): AnimatedIconHandle & {\n  onMouseEnter: () => void\n  onMouseLeave: () => void\n} {\n  const { controls, loops = false } = options\n  const isPlaying = ref(false)\n  let run = 0\n\n  const prefersReduced = () =>\n    typeof window !== 'undefined' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n  async function startAnimation() {\n    if (prefersReduced() || isPlaying.value) return\n\n    isPlaying.value = true\n    const current = ++run\n    controls.set('normal')\n    await controls.start('animate')\n    if (run === current) isPlaying.value = false\n  }\n\n  function stopAnimation() {\n    if (!loops) return\n    run += 1\n    isPlaying.value = false\n    void controls.start('normal')\n  }\n\n  return {\n    startAnimation,\n    stopAnimation,\n    onMouseEnter: () => {\n      void startAnimation()\n    },\n    onMouseLeave: () => {\n      stopAnimation()\n    },\n  }\n}\n"
    },
    {
      "path": "types/animated-icon.ts",
      "type": "registry:lib",
      "content": "export interface AnimatedIconHandle {\n  startAnimation: () => void\n  stopAnimation: () => void\n}\n\nexport interface AnimatedIconProps {\n  size?: number\n}\n"
    }
  ]
}