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.
 */
// Concentric Ring from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/concentric-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';
import { motion } from 'framer-motion';

export const ConcentricRing = () => {
  return (
    <div className="relative w-12 h-12 flex items-center justify-center">
      <motion.div
        className="absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 border-t-transparent rounded-full"
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        className="absolute w-8 h-8 border-2 border-zinc-500 border-b-transparent rounded-full"
        animate={{ rotate: -360 }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        className="absolute w-4 h-4 border-2 border-zinc-300 border-l-transparent rounded-full"
        animate={{ rotate: 360 }}
        transition={{ duration: 1, 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.
 */
// Concentric Squares from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/concentric-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 ConcentricSquares = () => {
  return (
    <div className="relative w-12 h-12 flex items-center justify-center">
      <motion.div
        className="absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 rounded-sm"
        animate={{ rotate: [0, 90, 90], scale: [1, 1, 0.8, 1] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute w-6 h-6 border-2 border-zinc-500 rounded-sm"
        animate={{ rotate: [0, -90, -90], scale: [1, 1, 1.2, 1] }}
        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.
 */
// Concentric Pulse from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/concentric-pulse.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 ConcentricPulse = () => {
  return (
    <div className="relative w-12 h-12 flex items-center justify-center">
      {[1, 2, 3].map((i) => (
        <motion.div
          key={i}
          className="absolute rounded-full border border-zinc-800 dark:border-zinc-700"
          initial={{ width: 0, height: 0, opacity: 1 }}
          animate={{ width: 48, height: 48, opacity: 0 }}
          transition={{ duration: 2, repeat: Infinity, delay: i * 0.6, ease: "easeOut" }}
        />
      ))}
    </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.
 */
// Comet Spinner from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/comet-spinner.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 CometSpinner = () => {
  return (
    <div className="relative w-10 h-10 border border-zinc-200 dark:border-zinc-800 rounded-full flex items-center justify-center">
      <motion.div
        className="absolute w-full h-full rounded-full"
        style={{
          background: "conic-gradient(from 0deg, transparent 0%, rgba(39, 39, 42, 0.1) 60%, rgba(39, 39, 42, 1) 100%)",
        }}
        animate={{ rotate: 360 }}
        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
      />
      <div className="absolute bg-white w-8 h-8 rounded-full" />
    </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.
 */
// Classic Spinner from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/classic-spinner.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 ClassicSpinner = () => {
  return (
    <div className="relative w-8 h-8">
      {Array.from({ length: 12 }).map((_, i) => (
        <motion.div
          key={i}
          className="absolute top-0 left-[14px] w-[4px] h-[8px] bg-zinc-400 dark:bg-zinc-200 rounded-full origin-[2px_16px]"
          style={{ rotate: i * 30 }}
          animate={{ opacity: [1, 0.2] }}
          transition={{
            duration: 1,
            repeat: Infinity,
            ease: "linear",
            delay: i * (1 / 12),
          }}
        />
      ))}
    </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.
 */
// Clock Spinner from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/clock-spinner.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 ClockSpinner = () => {
  return (
    <div className="relative w-10 h-10 border-2 border-zinc-800 dark:border-zinc-700 rounded-full flex items-center justify-center">
      <motion.div
        className="absolute w-0.5 h-3.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom"
        style={{ bottom: "50%" }}
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        className="absolute w-0.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom"
        style={{ bottom: "50%" }}
        animate={{ rotate: 360 }}
        transition={{ duration: 12, 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.
 */
// Circular Bars from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/circular-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 CircularBars = () => {
  return (
    <div className="relative w-10 h-10">
      {Array.from({ length: 8 }).map((_, i) => (
        <motion.div
          key={i}
          className="absolute top-0 left-[18px] w-1 h-3 bg-zinc-800 dark:bg-white rounded-full origin-[2px_20px]"
          style={{ rotate: i * 45 }}
          animate={{ scaleY: [0.5, 1.5, 0.5] }}
          transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.15, 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.
 */
// Breathing Glow from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/breathing-glow.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 BreathingGlow = () => {
  return (
    <div className="relative flex items-center justify-center w-12 h-12">
      <motion.div
        className="absolute w-8 h-8 bg-blue-500 rounded-full blur-md"
        animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0.8, 0.5] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
      <div className="relative w-6 h-6 bg-white rounded-full shadow-sm" />
    </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.
 */
// Breathing Square from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/breathing-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 BreathingSquare = () => {
  return (
    <motion.div
      className="w-8 h-8 bg-zinc-800 dark:bg-white"
      animate={{
        scale: [1, 1.2, 1],
        borderRadius: ["0%", "50%", "0%"],
        rotate: [0, 90, 180]
      }}
      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.
 */
// Bouncing Square from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bouncing-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 BouncingSquare = () => {
  return (
    <div className="relative w-10 h-12 flex items-end justify-center">
      <div className="absolute bottom-0 w-8 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full blur-sm" />
      <motion.div
        className="w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm origin-bottom"
        animate={{ y: [0, -24, 0], scaleY: [0.8, 1.1, 0.8], scaleX: [1.2, 0.9, 1.2] }}
        transition={{ duration: 0.6, 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.
 */
// Breathe Ring from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/breathe-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';
import { motion } from 'framer-motion';

export const BreatheRing = () => (
  <motion.div
    className="w-10 h-10 rounded-full border-4 border-zinc-800 dark:border-zinc-700"
    animate={{ scale: [0.8, 1.1, 0.8], borderWidth: [6, 2, 6] }}
    transition={{ duration: 3, 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.
 */
// Bouncing Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bouncing-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 BouncingDots = () => {
  return (
    <div className="flex space-x-2 h-12 items-end pb-2 border-b-2 border-zinc-200 dark:border-zinc-800 w-16 justify-center relative">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-3 h-3 bg-zinc-800 dark:bg-white rounded-full absolute bottom-2"
          style={{ left: `${(i * 14) + 10}px` }}
          animate={{ y: [0, -20, 0], scaleY: [0.8, 1.1, 0.8] }}
          transition={{ duration: 0.8, 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.
 */
// Bouncing Lines from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bouncing-lines.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 BouncingLines = () => {
  return (
    <div className="flex flex-col space-y-1.5 w-8">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-full h-1.5 bg-zinc-800 dark:bg-white rounded-full origin-left"
          animate={{ scaleX: [0.3, 1, 0.3] }}
          transition={{ duration: 1, repeat: Infinity, delay: i * 0.2, 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.
 */
// Bounce Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bounce-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 BounceDots = () => {
  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={{ y: [0, -8, 0] }}
          transition={{
            duration: 0.6,
            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.
 */
// Bouncing Bars from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bouncing-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 BouncingBars = () => {
  return (
    <div className="flex space-x-1.5 h-8 items-center">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-1.5 h-8 bg-zinc-800 dark:bg-white rounded-full"
          animate={{ scaleY: [0.3, 1, 0.3] }}
          transition={{ duration: 1, repeat: Infinity, delay: i * 0.2, 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.
 */
// Bar Sweep from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bar-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 BarSweep = () => {
  return (
    <div className="w-12 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full p-1 relative flex items-center overflow-hidden">
      <motion.div
        className="w-4 h-4 bg-zinc-800 dark:bg-white rounded-full absolute"
        animate={{ x: [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.
 */
// Bobbing Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/bobbing-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 BobbingDots = () => {
  return (
    <div className="flex space-x-2">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-3 h-3 bg-zinc-800 dark:bg-white rounded-full"
          animate={{ y: [0, -10, 0] }}
          transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.15, 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.
 */
// Arc Tracer from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/arc-tracer.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 ArcTracer = () => {
  return (
    <svg className="w-10 h-10" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" className="stroke-zinc-200 dark:stroke-zinc-800 fill-none" strokeWidth="4" />
      <motion.circle
        cx="25"
        cy="25"
        r="20"
        className="stroke-zinc-800 dark:stroke-white fill-none"
        strokeWidth="4"
        strokeLinecap="round"
        strokeDasharray="125"
        animate={{ strokeDashoffset: [125, 0, -125] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
    </svg>
  );
};