{
  "name": "bars-pulse-swap-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/bars-pulse-swap/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BarsPulseSwapProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  barWidth?: number;\n  gap?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function BarsPulseSwap({\n  width = 45,\n  height = 45,\n  color = \"currentColor\",\n  barWidth = 9,\n  gap = 9,\n  isAnimating = true,\n  duration = 0.5,\n  ease = 'easeInOut',\n}: BarsPulseSwapProps) {\n  const easeInOutQuad = [.785, .135, .15, .86] as const;\n\n  // 6 bars: 2 at each x position (0%, 50%, 100%)\n  const bars = [\n    { x: 0, pairIndex: 0, barInPair: 0 },           // Left pair - bar 1\n    { x: 0, pairIndex: 0, barInPair: 1 },           // Left pair - bar 2\n    { x: barWidth + gap, pairIndex: 1, barInPair: 0 }, // Center pair - bar 1\n    { x: barWidth + gap, pairIndex: 1, barInPair: 1 }, // Center pair - bar 2\n    { x: (barWidth + gap) * 2, pairIndex: 2, barInPair: 0 }, // Right pair - bar 1\n    { x: (barWidth + gap) * 2, pairIndex: 2, barInPair: 1 }  // Right pair - bar 2\n  ];\n\n  const tallHeight = height;\n  const shortHeight = height * 0.2;\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => {\n        const { pairIndex, barInPair } = bars[i];\n        let yPositions: number[];\n        if (pairIndex === 0) {\n          yPositions = barInPair === 0\n            ? [0, height / 2, 0]\n            : [height - shortHeight, height / 2, height - shortHeight];\n        } else if (pairIndex === 1) {\n          yPositions = barInPair === 0\n            ? [height / 2, 0, height / 2]\n            : [height / 2, height - shortHeight, height / 2];\n        } else {\n          yPositions = barInPair === 0\n            ? [0, height / 2, 0]\n            : [height - shortHeight, height / 2, height - shortHeight];\n        }\n        return {\n          height: [tallHeight, shortHeight],\n          y: yPositions,\n          transition: {\n            height: { duration, repeat: Infinity, repeatType: 'reverse', ease: easeInOutQuad },\n            y: { duration, repeat: Infinity, ease: easeInOutQuad, times: [0, 0.5, 1] },\n          },\n        };\n      });\n    } else {\n      controls.stop();\n      controls.set((i) => {\n        const { pairIndex, barInPair } = bars[i];\n        let y: number;\n        if (pairIndex === 0 || pairIndex === 2) {\n          y = barInPair === 0 ? 0 : height - shortHeight;\n        } else {\n          y = height / 2;\n        }\n        return { height: tallHeight, y };\n      });\n    }\n  }, [isAnimating, duration, height, shortHeight, tallHeight, controls]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {bars.map((bar, index) => {\n        const { pairIndex, barInPair } = bar;\n        let initialY: number;\n        if (pairIndex === 0 || pairIndex === 2) {\n          initialY = barInPair === 0 ? 0 : height - shortHeight;\n        } else {\n          initialY = height / 2;\n        }\n        return (\n          <motion.rect\n            key={index}\n            x={bar.x}\n            width={barWidth}\n            fill={color}\n            custom={index}\n            initial={{ height: tallHeight, y: initialY }}\n            animate={controls}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/bars-pulse-swap/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Bars Pulse Swap - Bars Pulse Swap",
    "description": "Six bars arranged in three pairs that continuously pulse while swapping between stacked and overlapped positions",
    "category": "loaders",
    "tags": [
      "bars",
      "loading",
      "pulse",
      "swap",
      "vertical",
      "animated"
    ],
    "animationType": "loop"
  }
}