Elements

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Spinning Squares from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/spinning-squares.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SpinningSquares = () => {
  return (
    <div className="relative w-10 h-10">
      <motion.div
        className="absolute top-0 left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm"
        animate={{ x: [0, 24, 24, 0, 0], y: [0, 0, 24, 24, 0] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute bottom-0 right-0 w-4 h-4 bg-zinc-300 dark:bg-zinc-700 rounded-sm"
        animate={{ x: [0, -24, -24, 0, 0], y: [0, 0, -24, -24, 0] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Smooth Ring from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/smooth-ring.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';

export const SmoothRing = () => (
  <div className="w-9 h-9">
    <svg className="w-full h-full animate-spin" viewBox="0 0 32 32">
      <circle
        cx="16"
        cy="16"
        r="14"
        fill="none"
        strokeWidth="3"
        className="stroke-zinc-200 dark:stroke-zinc-800"
      />
      <circle
        cx="16"
        cy="16"
        r="14"
        fill="none"
        strokeWidth="3"
        className="stroke-zinc-800 dark:stroke-white"
        strokeDasharray="38 80"
        strokeLinecap="round"
      />
    </svg>
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Smooth Rounded Square from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/smooth-rounded-square.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SmoothRoundedSquare = () => (
  <motion.div
    className="w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700"
    animate={{ borderRadius: ["10%", "50%", "10%"] }}
    transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
  />
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Sliding Bars from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/sliding-bars.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SlidingBars = () => (
  <div className="relative w-8 h-8">
    <motion.div
      className="absolute top-0 left-0 w-8 h-1.5 bg-zinc-800 dark:bg-white rounded-full"
      animate={{ y: [0, 24, 0] }}
      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
    />
    <motion.div
      className="absolute bottom-0 left-0 w-8 h-1.5 bg-zinc-400 dark:bg-zinc-200 rounded-full"
      animate={{ y: [0, -24, 0] }}
      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
    />
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Smooth Dot Shift from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/smooth-dot-shift.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SmoothDotShift = () => (
  <div className="relative w-12 h-3 flex items-center">
    <motion.div
      className="absolute w-3 h-3 bg-zinc-800 dark:bg-white rounded-full z-10"
      animate={{ x: [0, 18, 36, 18, 0] }}
      transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
    />
    <div className="w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-0" />
    <div className="w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[18px]" />
    <div className="w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[36px]" />
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Siri Wave from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/siri-wave.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SiriWave = () => (
  <div className="flex space-x-1 items-center h-8">
    {[0,1,2,3,4].map(i => (
      <motion.div
        key={i}
        className="w-1 bg-zinc-800 dark:bg-white rounded-full"
        animate={{ height: [4, 24, 4] }}
        transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }}
      />
    ))}
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Skeleton Loader from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/skeleton-loader.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const SkeletonLoader = () => {
  return (
    <div className="w-full max-w-[120px] space-y-2">
      <div className="flex items-center space-x-2">
        <motion.div
          className="w-8 h-8 bg-zinc-200 dark:bg-zinc-800 rounded-full shrink-0"
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="h-3 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full"
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
        />
      </div>
      <motion.div
        className="h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full"
        animate={{ opacity: [0.5, 1, 0.5] }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.4 }}
      />
      <motion.div
        className="h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-4/5"
        animate={{ opacity: [0.5, 1, 0.5] }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Shimmer Line from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/shimmer-line.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const ShimmerLine = () => {
  return (
    <div className="w-24 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden relative">
      <motion.div
        className="absolute top-0 left-0 bottom-0 w-1/3 bg-zinc-800 dark:bg-white rounded-full"
        animate={{ x: ["-100%", "300%"] }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Rotating Triangle from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/rotating-triangle.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const RotatingTriangle = () => {
  return (
    <svg className="w-10 h-10 overflow-visible" viewBox="0 0 50 50">
      <motion.polygon
        points="25,5 45,40 5,40"
        className="stroke-zinc-800 dark:stroke-white fill-none origin-center"
        strokeWidth="4"
        strokeLinejoin="round"
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
      />
    </svg>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Shape Shift Grid from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/shape-shift-grid.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const ShapeShiftGrid = () => (
  <div className="grid grid-cols-2 gap-1 w-8 h-8">
    {[0,1,2,3].map(i => (
      <motion.div
        key={i}
        className="w-full h-full bg-zinc-800 dark:bg-white"
        animate={{ borderRadius: ["10%", "50%", "10%"], scale: [1, 0.8, 1] }}
        transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }}
      />
    ))}
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Rotating Cross from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/rotating-cross.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const RotatingCross = () => {
  return (
    <motion.div
      className="relative w-8 h-8 flex items-center justify-center"
      animate={{ rotate: 180 }}
      transition={{ duration: 0.8, repeat: Infinity, ease: "easeInOut" }}
    >
      <div className="absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-sm" />
      <div className="absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-sm" />
    </motion.div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Ripple Effect from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/ripple-effect.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const RippleEffect = () => {
  return (
    <div className="relative w-12 h-12 flex items-center justify-center">
      {/* Center dot */}
      <div className="absolute w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full" />
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="absolute w-8 h-8 border border-zinc-850 dark:border-white rounded-full"
          initial={{ scale: 0.3, opacity: 0.8 }}
          animate={{ scale: 1.6, opacity: 0 }}
          transition={{
            duration: 2.2,
            repeat: Infinity,
            ease: "easeOut",
            delay: i * 0.7,
          }}
        />
      ))}
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Radar Sweep from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/radar-sweep.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const RadarSweep = ({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {
  const isDark = theme === 'dark';
  return (
    <div className="relative w-12 h-12 rounded-full border border-zinc-800/10 dark:border-white/10 flex items-center justify-center overflow-hidden">
      {/* Concentric rings */}
      <div className="absolute w-8 h-8 rounded-full border border-zinc-800/5 dark:border-white/5" />
      <div className="absolute w-4 h-4 rounded-full border border-zinc-800/5 dark:border-white/5" />
      
      {/* Center dot */}
      <div className="absolute w-1.5 h-1.5 rounded-full bg-zinc-800/80 dark:bg-white/80" />

      {/* Sweep hand */}
      <motion.div
        className="absolute inset-0 origin-center"
        style={{
          background: isDark
            ? "conic-gradient(from 0deg, transparent 50%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0.55) 100%)"
            : "conic-gradient(from 0deg, transparent 50%, rgba(39,39,42,0.02) 65%, rgba(39,39,42,0.1) 85%, rgba(39,39,42,0.45) 100%)",
        }}
        animate={{ rotate: 360 }}
        transition={{ duration: 1.8, repeat: Infinity, ease: "linear" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Ring Sweep from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/ring-sweep.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const RingSweep = () => {
  return (
    <motion.div
      className="w-10 h-10 border-[3px] border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white"
      animate={{ rotate: 360 }}
      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
    />
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Pulse Square from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/pulse-square.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const PulseSquare = () => {
  return (
    <motion.div
      className="w-8 h-8 border-4 border-zinc-800 dark:border-zinc-700 rounded-md"
      animate={{ scale: [1, 1.2, 1], opacity: [1, 0.3, 1], borderRadius: ["20%", "50%", "20%"] }}
      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
    />
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Pumping Heart from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/pumping-heart.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const PumpingHeart = () => {
  return (
    <motion.div
      className="w-8 h-8"
      animate={{ scale: [1, 1.25, 1, 1.25, 1] }}
      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
    >
      <svg viewBox="0 0 24 24" className="fill-zinc-800 dark:fill-white">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
      </svg>
    </motion.div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Pulse Dot from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/pulse-dot.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const PulseDot = () => {
  return (
    <div className="relative w-10 h-10 flex items-center justify-center">
      <motion.div
        className="absolute w-10 h-10 bg-zinc-800 dark:bg-white rounded-full"
        animate={{ scale: [0, 1], opacity: [0.8, 0] }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "easeOut" }}
      />
      <div className="w-3 h-3 bg-zinc-800 dark:bg-white rounded-full relative z-10" />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Pulse Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/pulse-dots.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const PulseDots = () => {
  return (
    <div className="flex space-x-1.5">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full"
          animate={{ opacity: [0.2, 1, 0.2] }}
          transition={{ duration: 1.4, repeat: Infinity, delay: i * 0.2 }}
        />
      ))}
    </div>
  );
};