{
  "name": "ios-spinner-dual-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/ios-spinner-dual/default.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\ninterface IosSpinnerDualProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function IosSpinnerDual({\n  width = 100,\n  height = 100,\n  color = 'currentColor',\n  isAnimating = true,\n  duration = 1.2,\n  ease = 'linear',\n}: IosSpinnerDualProps) {\n  const outer = { count: 12, y: 26, height: 10, width: 3 };\n  const inner = { count: 8,  y: 34, height: 6,  width: 2.5 };\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      <motion.g\n        style={{ transformOrigin: '50px 50px' }}\n        animate={{ rotate: isAnimating ? 360 : 0 }}\n        transition={{ duration: duration, repeat: isAnimating ? Infinity : 0, ease: ease }}\n      >\n        {Array.from({ length: outer.count }).map((_, i) => (\n          <rect\n            key={i}\n            x={50 - outer.width / 2}\n            y={outer.y}\n            width={outer.width}\n            height={outer.height}\n            rx={outer.width / 2}\n            fill={color}\n            opacity={1 - (i / outer.count) * 0.88}\n            transform={`rotate(${(360 / outer.count) * i}, 50, 50)`}\n          />\n        ))}\n      </motion.g>\n\n      <motion.g\n        style={{ transformOrigin: '50px 50px' }}\n        animate={{ rotate: isAnimating ? -360 : 0 }}\n        transition={{ duration: duration * 0.75, repeat: isAnimating ? Infinity : 0, ease: ease }}\n      >\n        {Array.from({ length: inner.count }).map((_, i) => (\n          <rect\n            key={i}\n            x={50 - inner.width / 2}\n            y={inner.y}\n            width={inner.width}\n            height={inner.height}\n            rx={inner.width / 2}\n            fill={color}\n            opacity={1 - (i / inner.count) * 0.88}\n            transform={`rotate(${(360 / inner.count) * i}, 50, 50)`}\n          />\n        ))}\n      </motion.g>\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/ios-spinner-dual/default.tsx"
    }
  ],
  "meta": {
    "displayName": "iOS Spinner Dual - Dual Ring",
    "description": "Outer ring of 12 spokes clockwise, inner ring of 8 spokes counter-clockwise — gyroscope effect",
    "category": "loaders",
    "tags": [
      "apple",
      "ios",
      "macos",
      "spinner",
      "dual",
      "gyroscope",
      "counter-rotate"
    ],
    "animationType": "loop"
  }
}