@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/loader-x.tsx

@@ -1,1757 +0,0 @@
-
-import { motion } from "motion/react";
-import React, { useState, useEffect, ComponentProps, useCallback, useRef } from "react";
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn, Card, SpinnerV2 } from "~/components/catalyst-ui"
-import { Loader2, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, type LucideProps, } from 'lucide-react';
-// @devsearch app/components/catalyst-ui/data/core-data.tsx:loaderX
-
-export type LoaderProps = LucideProps & {
-  variant?: 'default' | 'circle' | 'pinwheel' | 'circle-filled' | 'ellipsis' | 'ring' | 'bars' | 'infinite';
-  size?: number | string;
-  strokeWidth?: number;
-  fill?: string;
-  animationDuration?: string;
-  style?: React.CSSProperties;
-  spinning?: boolean;
-  delay?: number;
-  tip?: string;
-  indicator?: React.ReactNode;
-  text?: string;
-  subText?: string;
-  frames?: number[][];
-  dotClassName?: string;
-  isPlaying?: boolean;
-  duration?: number;
-  repeatCount?: number;
-  onComplete?: () => void;
-  outerSize?: string;
-  childSize?: string;
-  className?: string;
-  wrapperClassName?: string;
-  children?: React.ReactNode;
-};
-
-export const loaderVariants = cva(
-  "animate-spin rounded-full border-2 border-solid border-current border-r-transparent",
-  {
-    variants: {
-      size: {
-        default: {
-          container: "size-8",
-          titleClass: "text-sm/tight font-medium",
-          subtitleClass: "text-xs/relaxed",
-          spacing: "space-y-2",
-          maxWidth: "max-w-8",
-        },
-        sm: {
-          container: "size-20",
-          titleClass: "text-sm/tight font-medium",
-          subtitleClass: "text-xs/relaxed",
-          spacing: "space-y-2",
-          maxWidth: "max-w-48",
-        },
-        md: {
-          container: "size-32",
-          titleClass: "text-base/snug font-medium",
-          subtitleClass: "text-sm/relaxed",
-          spacing: "space-y-3",
-          maxWidth: "max-w-56",
-        },
-        lg: {
-          container: "size-40",
-          titleClass: "text-lg/tight font-semibold",
-          subtitleClass: "text-base/relaxed",
-          spacing: "space-y-4",
-          maxWidth: "max-w-64",
-        },
-      }
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-export function LoaderX({ variant = 'default', ...props }: LoaderProps) {
-  switch (variant) {
-    case 'circle':
-      return <Circle {...props} />;
-    case 'pinwheel':
-      return <Pinwheel {...props} />;
-    case 'circle-filled':
-      return <CircleFilled {...props} />;
-    case 'ellipsis':
-      return <Ellipsis {...props} />;
-    case 'ring':
-      return <Ring {...props} />;
-    case 'bars':
-      return <Bars {...props} />;
-    case 'infinite':
-      return <Infinite {...props} />;
-    case '1':
-      return <LoaderOne {...props} />;
-    case '2':
-      return <LoaderTwo {...props} />;
-    case '3':
-      return <LoaderThree {...props} />;
-    case '4':
-      return <LoaderFour {...props} />;
-    case '5':
-      return <LoaderFive {...props} />;
-    case '6':
-      return <LoaderSix {...props} />;
-    case '7':
-      return <LoaderSeven {...props} />;
-    case '8':
-      return <LoaderEight {...props} />;
-    case '9':
-      return <LoaderNine {...props} />;
-    case '10':
-      return <LoaderTen {...props} />;
-    case '11':
-      return <LoaderEleven {...props} />;
-    case '12':
-      return <LoaderTwelve {...props} />;
-    case '13':
-      return <LoaderThirteen {...props} />;
-    case '14':
-      return <LoaderFourteen {...props} />;
-    case '15':
-      return <LoaderFifteen {...props} />;
-    case '16':
-      return <LoaderSixteen {...props} />;
-    case '17':
-      return <LoaderSeventeen {...props} />;
-    case '18':
-      return <LoaderEighteen {...props} />;
-    case '19':
-      return <LoaderNineteen {...props} />;
-    case '20':
-      return <LoaderTwenty {...props} />;
-    case '21':
-      return <LoaderTwentyOne {...props} />;
-    case '22':
-      return <LoaderTwentyTwo {...props} />;
-    case 'default':
-    default:
-      return <Default {...props} />;
-  }
-}
-
-
-
-
-function LoaderTwentyTwo({
-  title = "Configuring your account...",
-  subtitle = "Please wait while we prepare everything for you",
-  size = "md",
-  className,
-  ...props
-}: LoaderProps) {
-  const sizeConfig = {
-    sm: {
-      container: "size-20",
-      titleClass: "text-sm/tight font-medium",
-      subtitleClass: "text-xs/relaxed",
-      spacing: "space-y-2",
-      maxWidth: "max-w-48",
-    },
-    md: {
-      container: "size-32",
-      titleClass: "text-base/snug font-medium",
-      subtitleClass: "text-sm/relaxed",
-      spacing: "space-y-3",
-      maxWidth: "max-w-56",
-    },
-    lg: {
-      container: "size-40",
-      titleClass: "text-lg/tight font-semibold",
-      subtitleClass: "text-base/relaxed",
-      spacing: "space-y-4",
-      maxWidth: "max-w-64",
-    },
-  };
-
-  const config = sizeConfig[size];
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center gap-8 p-8",
-        className
-      )}
-      {...props}
-    >
-      {/* Enhanced Monochrome Loader */}
-      <motion.div
-        className={cn("relative", config.container)}
-        animate={{
-          scale: [1, 1.02, 1],
-        }}
-        transition={{
-          duration: 4,
-          repeat: Number.POSITIVE_INFINITY,
-          ease: [0.4, 0, 0.6, 1],
-        }}
-      >
-        {/* Outer elegant ring with shimmer */}
-        <motion.div
-          className="absolute inset-0 rounded-full"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 90deg, transparent 180deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            opacity: 0.8,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 3,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: "linear",
-          }}
-        />
-
-        {/* Primary animated ring with gradient */}
-        <motion.div
-          className="absolute inset-0 rounded-full"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 120deg, rgba(0, 0, 0, 0.5) 240deg, transparent 360deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            opacity: 0.9,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 2.5,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: [0.4, 0, 0.6, 1],
-          }}
-        />
-
-        {/* Secondary elegant ring - counter rotation */}
-        <motion.div
-          className="absolute inset-0 rounded-full"
-          style={{
-            background: `conic-gradient(from 180deg, transparent 0deg, rgba(0, 0, 0, 0.6) 45deg, transparent 90deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            opacity: 0.35,
-          }}
-          animate={{
-            rotate: [0, -360],
-          }}
-          transition={{
-            duration: 4,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: [0.4, 0, 0.6, 1],
-          }}
-        />
-
-        {/* Accent particles */}
-        <motion.div
-          className="absolute inset-0 rounded-full"
-          style={{
-            background: `conic-gradient(from 270deg, transparent 0deg, rgba(0, 0, 0, 0.4) 20deg, transparent 40deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            opacity: 0.5,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 3.5,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: "linear",
-          }}
-        />
-
-        {/* Dark mode variants */}
-        <motion.div
-          className="absolute inset-0 rounded-full dark:block hidden"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 90deg, transparent 180deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            opacity: 0.8,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 3,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: "linear",
-          }}
-        />
-
-        <motion.div
-          className="absolute inset-0 rounded-full dark:block hidden"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 120deg, rgba(255, 255, 255, 0.5) 240deg, transparent 360deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            opacity: 0.9,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 2.5,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: [0.4, 0, 0.6, 1],
-          }}
-        />
-
-        <motion.div
-          className="absolute inset-0 rounded-full dark:block hidden"
-          style={{
-            background: `conic-gradient(from 180deg, transparent 0deg, rgba(255, 255, 255, 0.6) 45deg, transparent 90deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            opacity: 0.35,
-          }}
-          animate={{
-            rotate: [0, -360],
-          }}
-          transition={{
-            duration: 4,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: [0.4, 0, 0.6, 1],
-          }}
-        />
-
-        <motion.div
-          className="absolute inset-0 rounded-full dark:block hidden"
-          style={{
-            background: `conic-gradient(from 270deg, transparent 0deg, rgba(255, 255, 255, 0.4) 20deg, transparent 40deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            opacity: 0.5,
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration: 3.5,
-            repeat: Number.POSITIVE_INFINITY,
-            ease: "linear",
-          }}
-        />
-      </motion.div>
-
-      {/* Enhanced Typography with Breathing Animation */}
-      <motion.div
-        className={cn("text-center", config.spacing, config.maxWidth)}
-        initial={{ opacity: 0, y: 12 }}
-        animate={{
-          opacity: 1,
-          y: 0,
-        }}
-        transition={{
-          delay: 0.4,
-          duration: 1,
-          ease: [0.4, 0, 0.2, 1],
-        }}
-      >
-        {/* Clean title with subtle animation */}
-        <motion.h1
-          className={cn(
-            config.titleClass,
-            "text-black/90 dark:text-white/90 font-medium tracking-[-0.02em] leading-[1.15] antialiased"
-          )}
-          initial={{ opacity: 0, y: 12 }}
-          animate={{
-            opacity: 1,
-            y: 0,
-          }}
-          transition={{
-            delay: 0.6,
-            duration: 0.8,
-            ease: [0.4, 0, 0.2, 1],
-          }}
-        >
-          <motion.span
-            animate={{
-              opacity: [0.9, 0.7, 0.9],
-            }}
-            transition={{
-              duration: 3,
-              repeat: Number.POSITIVE_INFINITY,
-              ease: [0.4, 0, 0.6, 1],
-            }}
-          >
-            {title}
-          </motion.span>
-        </motion.h1>
-
-        {/* Clean subtitle with subtle animation */}
-        <motion.p
-          className={cn(
-            config.subtitleClass,
-            "text-black/60 dark:text-white/60 font-normal tracking-[-0.01em] leading-[1.45] antialiased"
-          )}
-          initial={{ opacity: 0, y: 8 }}
-          animate={{
-            opacity: 1,
-            y: 0,
-          }}
-          transition={{
-            delay: 0.8,
-            duration: 0.8,
-            ease: [0.4, 0, 0.2, 1],
-          }}
-        >
-          <motion.span
-            animate={{
-              opacity: [0.6, 0.4, 0.6],
-            }}
-            transition={{
-              duration: 4,
-              repeat: Number.POSITIVE_INFINITY,
-              ease: [0.4, 0, 0.6, 1],
-            }}
-          >
-            {subtitle}
-          </motion.span>
-        </motion.p>
-      </motion.div>
-    </div>
-  );
-}
-const Default = ({ className, ...props }: LoaderProps) => (
-  <LoaderIcon className={cn('animate-spin', className)} {...(props as any)} />
-);
-
-const Circle = ({ className, ...props }: LoaderProps) => (
-  <LoaderCircleIcon className={cn('animate-spin', className)} {...(props as any)} />
-);
-
-const Pinwheel = ({ className, ...props }: LoaderProps) => (
-  <LoaderPinwheelIcon className={cn('animate-spin', className)} {...(props as any)} />
-);
-
-const CircleFilled = ({
-  className,
-  size = 24,
-  ...props
-}: LoaderProps) => (
-  <div className="relative" style={{ width: size, height: size }}>
-    <div className="absolute inset-0 rotate-180">
-      <LoaderCircleIcon
-        className={cn('animate-spin', className, 'text-foreground opacity-20')}
-        size={size}
-        {...(props as any)}
-      />
-    </div>
-    <LoaderCircleIcon
-      className={cn('relative animate-spin', className)}
-      size={size}
-      {...(props as any)}
-    />
-  </div>
-);
-
-const Ellipsis = ({ size = 24, ...props }: LoaderProps) => {
-  return (
-    <svg
-      height={size}
-      viewBox="0 0 24 24"
-      width={size}
-      xmlns="http://www.w3.org/2000/svg"
-      {...(props as any)}
-    >
-      <circle cx="4" cy="12" fill="currentColor" r="2">
-        <animate
-          attributeName="cy"
-          begin="0;ellipsis3.end+0.25s"
-          calcMode="spline"
-          dur="0.6s"
-          id="ellipsis1"
-          keySplines=".33,.66,.66,1;.33,0,.66,.33"
-          values="12;6;12"
-        />
-      </circle>
-      <circle cx="12" cy="12" fill="currentColor" r="2">
-        <animate
-          attributeName="cy"
-          begin="ellipsis1.begin+0.1s"
-          calcMode="spline"
-          dur="0.6s"
-          keySplines=".33,.66,.66,1;.33,0,.66,.33"
-          values="12;6;12"
-        />
-      </circle>
-      <circle cx="20" cy="12" fill="currentColor" r="2">
-        <animate
-          attributeName="cy"
-          begin="ellipsis1.begin+0.2s"
-          calcMode="spline"
-          dur="0.6s"
-          id="ellipsis3"
-          keySplines=".33,.66,.66,1;.33,0,.66,.33"
-          values="12;6;12"
-        />
-      </circle>
-    </svg>
-  );
-};
-
-const Ring = ({ size = 24, ...props }: LoaderProps) => (
-  <svg
-    height={size}
-    stroke="currentColor"
-    viewBox="0 0 44 44"
-    width={size}
-    xmlns="http://www.w3.org/2000/svg"
-    {...(props as any)}
-  >
-    <g fill="none" fillRule="evenodd" strokeWidth="2">
-      <circle cx="22" cy="22" r="1">
-        <animate
-          attributeName="r"
-          begin="0s"
-          calcMode="spline"
-          dur="1.8s"
-          keySplines="0.165, 0.84, 0.44, 1"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-          values="1; 20"
-        />
-        <animate
-          attributeName="stroke-opacity"
-          begin="0s"
-          calcMode="spline"
-          dur="1.8s"
-          keySplines="0.3, 0.61, 0.355, 1"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-          values="1; 0"
-        />
-      </circle>
-      <circle cx="22" cy="22" r="1">
-        <animate
-          attributeName="r"
-          begin="-0.9s"
-          calcMode="spline"
-          dur="1.8s"
-          keySplines="0.165, 0.84, 0.44, 1"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-          values="1; 20"
-        />
-        <animate
-          attributeName="stroke-opacity"
-          begin="-0.9s"
-          calcMode="spline"
-          dur="1.8s"
-          keySplines="0.3, 0.61, 0.355, 1"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-          values="1; 0"
-        />
-      </circle>
-    </g>
-  </svg>
-);
-
-const Bars = ({ size = 24, ...props }: LoaderProps) => (
-  <svg
-    height={size}
-    viewBox="0 0 24 24"
-    width={size}
-    xmlns="http://www.w3.org/2000/svg"
-    {...(props as any)}
-  >
-    <style>{`
-      .spinner-bar {
-        animation: spinner-bars-animation .8s linear infinite;
-        animation-delay: -.8s;
-      }
-      .spinner-bars-2 {
-        animation-delay: -.65s;
-      }
-      .spinner-bars-3 {
-        animation-delay: -0.5s;
-      }
-      @keyframes spinner-bars-animation {
-        0% {
-          y: 1px;
-          height: 22px;
-        }
-        93.75% {
-          y: 5px;
-          height: 14px;
-          opacity: 0.2;
-        }
-      }
-    `}</style>
-    <rect
-      className="spinner-bar"
-      fill="currentColor"
-      height="22"
-      width="6"
-      x="1"
-      y="1"
-    />
-    <rect
-      className="spinner-bar spinner-bars-2"
-      fill="currentColor"
-      height="22"
-      width="6"
-      x="9"
-      y="1"
-    />
-    <rect
-      className="spinner-bar spinner-bars-3"
-      fill="currentColor"
-      height="22"
-      width="6"
-      x="17"
-      y="1"
-    />
-  </svg>
-);
-
-const Infinite = ({ size = 24, ...props }: LoaderProps) => (
-  <svg
-    height={size}
-    preserveAspectRatio="xMidYMid"
-    viewBox="0 0 100 100"
-    width={size}
-    xmlns="http://www.w3.org/2000/svg"
-    {...(props as any)}
-  >
-    <path
-      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
-      fill="none"
-      stroke="currentColor"
-      strokeDasharray="205.271142578125 51.317785644531256"
-      strokeLinecap="round"
-      strokeWidth="10"
-      style={{
-        transform: 'scale(0.8)',
-        transformOrigin: '50px 50px',
-      }}
-    >
-      <animate
-        attributeName="stroke-dashoffset"
-        dur="2s"
-        keyTimes="0;1"
-        repeatCount="indefinite"
-        values="0;256.58892822265625"
-      />
-    </path>
-  </svg>
-);
-
-function LoaderOne() {
-  const transition = (x: number) => {
-    return {
-      duration: 1,
-      repeat: Infinity,
-      repeatType: "loop" as const,
-      delay: x * 0.2,
-      ease: "easeInOut",
-    };
-  };
-  return (
-    <div className="flex items-center gap-2">
-      <motion.div
-        initial={{ y: 0 }}
-        animate={{ y: [0, 10, 0] }}
-        transition={transition(0)}
-        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
-      />
-      <motion.div
-        initial={{ y: 0 }}
-        animate={{ y: [0, 10, 0] }}
-        transition={transition(1)}
-        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
-      />
-      <motion.div
-        initial={{ y: 0 }}
-        animate={{ y: [0, 10, 0] }}
-        transition={transition(2)}
-        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
-      />
-    </div>
-  );
-}
-
-function LoaderTwo() {
-  const transition = (x: number) => {
-    return {
-      duration: 2,
-      repeat: Infinity,
-      repeatType: "loop" as const,
-      delay: x * 0.2,
-      ease: "easeInOut",
-    };
-  };
-  return (
-    <div className="flex items-center">
-      <motion.div
-        transition={transition(0)}
-        initial={{ x: 0 }}
-        animate={{ x: [0, 20, 0] }}
-        className="h-4 w-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
-      />
-      <motion.div
-        initial={{ x: 0 }}
-        animate={{ x: [0, 20, 0] }}
-        transition={transition(0.4)}
-        className="h-4 w-4 -translate-x-2 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
-      />
-      <motion.div
-        initial={{ x: 0 }}
-        animate={{ x: [0, 20, 0] }}
-        transition={transition(0.8)}
-        className="h-4 w-4 -translate-x-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
-      />
-    </div>
-  );
-}
-
-function LoaderThree() {
-  return (
-    <motion.svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-20 w-20 stroke-neutral-500 [--fill-final:var(--color-yellow-300)] [--fill-initial:var(--color-neutral-50)] dark:stroke-neutral-100 dark:[--fill-final:var(--color-yellow-500)] dark:[--fill-initial:var(--color-neutral-800)]"
-    >
-      <motion.path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <motion.path
-        initial={{ pathLength: 0, fill: "var(--fill-initial)" }}
-        animate={{ pathLength: 1, fill: "var(--fill-final)" }}
-        transition={{
-          duration: 2,
-          ease: "easeInOut",
-          repeat: Infinity,
-          repeatType: "reverse",
-        }}
-        d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"
-      />
-    </motion.svg>
-  );
-}
-
-function LoaderFour({ text = "Loading..." }: { text?: string }) {
-  return (
-    <div className="relative font-bold text-black [perspective:1000px] dark:text-white">
-      <motion.span
-        animate={{
-          skew: [0, -40, 0],
-          scaleX: [1, 2, 1],
-        }}
-        transition={{
-          duration: 0.05,
-          repeat: Infinity,
-          repeatType: "reverse",
-          repeatDelay: 2,
-          ease: "linear",
-          times: [0, 0.2, 0.5, 0.8, 1],
-        }}
-        className="relative z-20 inline-block"
-      >
-        {text}
-      </motion.span>
-      <motion.span
-        className="absolute inset-0 text-[#00e571]/50 blur-[0.5px] dark:text-[#00e571]"
-        animate={{
-          x: [-2, 4, -3, 1.5, -2],
-          y: [-2, 4, -3, 1.5, -2],
-          opacity: [0.3, 0.9, 0.4, 0.8, 0.3],
-        }}
-        transition={{
-          duration: 0.5,
-          repeat: Infinity,
-          repeatType: "reverse",
-          ease: "linear",
-          times: [0, 0.2, 0.5, 0.8, 1],
-        }}
-      >
-        {text}
-      </motion.span>
-      <motion.span
-        className="absolute inset-0 text-[#8b00ff]/50 dark:text-[#8b00ff]"
-        animate={{
-          x: [0, 1, -1.5, 1.5, -1, 0],
-          y: [0, -1, 1.5, -0.5, 0],
-          opacity: [0.4, 0.8, 0.3, 0.9, 0.4],
-        }}
-        transition={{
-          duration: 0.8,
-          repeat: Infinity,
-          repeatType: "reverse",
-          ease: "linear",
-          times: [0, 0.3, 0.6, 0.8, 1],
-        }}
-      >
-        {text}
-      </motion.span>
-    </div>
-  );
-}
-
-function LoaderFive({ text }: { text: string }) {
-  return (
-    <div className="font-sans font-bold [--shadow-color:var(--color-neutral-500)] dark:[--shadow-color:var(--color-neutral-100)]">
-      {text.split("").map((char, i) => (
-        <motion.span
-          key={i}
-          className="inline-block"
-          initial={{ scale: 1, opacity: 0.5 }}
-          animate={{
-            scale: [1, 1.1, 1],
-            textShadow: [
-              "0 0 0 var(--shadow-color)",
-              "0 0 1px var(--shadow-color)",
-              "0 0 0 var(--shadow-color)",
-            ],
-            opacity: [0.5, 1, 0.5],
-          }}
-          transition={{
-            duration: 0.5,
-            repeat: Infinity,
-            repeatType: "loop",
-            delay: i * 0.05,
-            ease: "easeInOut",
-            repeatDelay: 2,
-          }}
-        >
-          {char === " " ? "\u00A0" : char}
-        </motion.span>
-      ))}
-    </div>
-  );
-}
-
-function LoaderSix({ text = 'Loading...' }) {
-  return (
-    <div className='flex flex-col items-center gap-3'>
-      <SpinnerV2 />
-      <p className='ml-3'>{text}</p>
-    </div>
-  );
-}
-
-function LoaderSeven({ className, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof loaderVariants>) {
-  const config = loaderVariants({ size }) as any;
-
-  return (
-    <div
-      role="status"
-      aria-label="Loading"
-      className={cn(config.container, className)}
-      {...props}
-    />
-  )
-}
-function LoaderEight() {
-  return (
-    <div className="relative w-24 h-24">
-      <div className="absolute inset-0 border-4 border-primary/30 rounded-full animate-ping"></div>
-      <div className="absolute inset-2 border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
-    </div>
-  );
-}
-
-function LoaderNine({
-  spinning = true,
-  delay = 0,
-  size = "lg",
-  tip,
-  className,
-  children,
-  wrapperClassName
-}: LoaderProps) {
-  const [shouldShow, setShouldShow] = useState(!delay);
-
-  useEffect(() => {
-    if (!spinning || !delay) {
-      setShouldShow(spinning);
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      setShouldShow(spinning);
-    }, delay);
-
-    return () => clearTimeout(timer);
-  }, [spinning, delay]);
-
-  if (!shouldShow) {
-    return children ? <div className={wrapperClassName}>{children}</div> : null;
-  }
-
-  return (
-    <div className={cn("relative", wrapperClassName)}>
-      <div className={cn("absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity", spinning ? "opacity-100 z-10" : "opacity-0 -z-10")}>
-        <div className={cn("flex flex-col items-center justify-center gap-2", !children && "p-4")}>
-          <Loader2 className={cn("animate-spin text-primary", loaderVariants({ size: size as any, className }))} />
-          {tip && <span className="text-sm text-muted-foreground">{tip}</span>}
-        </div>
-      </div>
-      <div className={spinning ? "opacity-50 pointer-events-none" : ""}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function LoaderTen({
-  text = null,
-  subText = null,
-  size = "md",
-  className,
-  ...props
-}: LoaderProps) {
-
-  const config = loaderVariants({ size }) as any;
-
-  return (
-    <div className={cn("flex flex-col items-center justify-center gap-8 p-8", className)}  {...props}  >
-      <div
-        className={cn("relative", config.container)}
-        style={{
-          animation: "spinnerPulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-        }}
-      >
-        <div
-          className="absolute inset-0 rounded-full dark:hidden"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 90deg, transparent 180deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            opacity: 0.8,
-            animation: "spinnerRotate 3s linear infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full dark:hidden"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 120deg, rgba(0, 0, 0, 0.5) 240deg, transparent 360deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            opacity: 0.9,
-            animation: "spinnerRotate 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full dark:hidden"
-          style={{
-            background: `conic-gradient(from 180deg, transparent 0deg, rgba(0, 0, 0, 0.6) 45deg, transparent 90deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            opacity: 0.35,
-            animation: "spinnerRotateReverse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full dark:hidden"
-          style={{
-            background: `conic-gradient(from 270deg, transparent 0deg, rgba(0, 0, 0, 0.4) 20deg, transparent 40deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            opacity: 0.5,
-            animation: "spinnerRotate 3.5s linear infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full hidden dark:block"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 90deg, transparent 180deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
-            opacity: 0.8,
-            animation: "spinnerRotate 3s linear infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full hidden dark:block"
-          style={{
-            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 120deg, rgba(255, 255, 255, 0.5) 240deg, transparent 360deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
-            opacity: 0.9,
-            animation: "spinnerRotate 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full hidden dark:block"
-          style={{
-            background: `conic-gradient(from 180deg, transparent 0deg, rgba(255, 255, 255, 0.6) 45deg, transparent 90deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
-            opacity: 0.35,
-            animation: "spinnerRotateReverse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-          }}
-        />
-
-        <div
-          className="absolute inset-0 rounded-full hidden dark:block"
-          style={{
-            background: `conic-gradient(from 270deg, transparent 0deg, rgba(255, 255, 255, 0.4) 20deg, transparent 40deg)`,
-            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
-            opacity: 0.5,
-            animation: "spinnerRotate 3.5s linear infinite",
-          }}
-        />
-      </div>
-
-      <div
-        className={cn("text-center", config.spacing, config.maxWidth)}
-        style={{
-          animation: "spinnerFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards",
-        }}
-      >
-        <h1
-          className={cn(
-            config.titleClass,
-            "text-black/90 dark:text-white/90 font-medium tracking-[-0.02em] leading-[1.15] antialiased"
-          )}
-          style={{
-            animation: "spinnerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards",
-          }}
-        >
-          <span
-            style={{
-              animation: "spinnerBreath 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-            }}
-          >
-            {text}
-          </span>
-        </h1>
-
-        <p
-          className={cn(
-            config.subtitleClass,
-            "text-black/60 dark:text-white/60 font-normal tracking-[-0.01em] leading-[1.45] antialiased"
-          )}
-          style={{
-            animation: "spinnerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s backwards",
-          }}
-        >
-          <span
-            style={{
-              animation: "spinnerBreathSubtle 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-            }}
-          >
-            {subText}
-          </span>
-        </p>
-      </div>
-
-      <style jsx>{`
-        @keyframes spinnerRotate {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        
-        @keyframes spinnerRotateReverse {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(-360deg);
-          }
-        }
-        
-        @keyframes spinnerPulse {
-          0%, 100% {
-            transform: scale(1);
-          }
-          50% {
-            transform: scale(1.02);
-          }
-        }
-        
-        @keyframes spinnerFadeIn {
-          from {
-            opacity: 0;
-            transform: translateY(12px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        
-        @keyframes spinnerBreath {
-          0%, 100% {
-            opacity: 0.9;
-          }
-          50% {
-            opacity: 0.7;
-          }
-        }
-        
-        @keyframes spinnerBreathSubtle {
-          0%, 100% {
-            opacity: 0.6;
-          }
-          50% {
-            opacity: 0.4;
-          }
-        }
-      `}</style>
-    </div>
-  )
-}
-function LoaderEleven({
-  size = "2em",
-  strokeWidth = 2,
-  fill = "transparent",
-  animationDuration = "2s",
-  className,
-  style,
-  ...props
-}: LoaderProps) {
-  const sizeValue = typeof size === "number" ? size + 'px' : size;
-
-  return (
-    <div
-      className={cn("inline-block", className)}
-      style={{
-        width: sizeValue,
-        height: sizeValue,
-        ...style,
-      }}
-      role="progressbar"
-      {...props}
-    >
-      <svg
-        className="animate-spin"
-        width="100%"
-        height="100%"
-        viewBox="0 0 50 50"
-        style={{ animationDuration }}
-      >
-        <circle
-          cx="25"
-          cy="25"
-          r="20"
-          fill={fill}
-          stroke="currentColor"
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          strokeDasharray="31.416"
-          strokeDashoffset="31.416"
-          className="opacity-25"
-        />
-        <circle
-          cx="25"
-          cy="25"
-          r="20"
-          fill={fill}
-          stroke="currentColor"
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          strokeDasharray="31.416"
-          strokeDashoffset="7.854"
-          className="opacity-100"
-        />
-      </svg>
-    </div>
-  );
-}
-
-const game = [
-  [14, 7, 0, 8, 6, 13, 20],
-  [14, 7, 13, 20, 16, 27, 21],
-  [14, 20, 27, 21, 34, 24, 28],
-  [27, 21, 34, 28, 41, 32, 35],
-  [34, 28, 41, 35, 48, 40, 42],
-  [34, 28, 41, 35, 48, 42, 46],
-  [34, 28, 41, 35, 48, 42, 38],
-  [34, 28, 41, 35, 48, 30, 21],
-  [34, 28, 41, 48, 21, 22, 14],
-  [34, 28, 41, 21, 14, 16, 27],
-  [34, 28, 21, 14, 10, 20, 27],
-  [28, 21, 14, 4, 13, 20, 27],
-  [28, 21, 14, 12, 6, 13, 20],
-  [28, 21, 14, 6, 13, 20, 11],
-  [28, 21, 14, 6, 13, 20, 10],
-  [14, 6, 13, 20, 9, 7, 21],
-];
-
-function LoaderTwelve({
-  frames = game,
-  isPlaying = true,
-  duration = 100,
-  dotClassName,
-  className,
-  repeatCount = -1,
-  onComplete,
-  ...props
-}: LoaderProps) {
-  const gridRef = useRef<HTMLDivElement>(null);
-  const currentIndex = useRef(0);
-  const repeats = useRef(0);
-  const interval = useRef<NodeJS.Timeout | null>(null);
-
-  const applyFrameToDots = useCallback(
-    (dots: HTMLDivElement[], frameIndex: number) => {
-      const frame = frames[frameIndex];
-      if (!frame) return;
-
-      dots.forEach((dot, index) => {
-        dot.classList.toggle("active", frame.includes(index));
-      });
-    },
-    [frames],
-  );
-
-  useEffect(() => {
-    currentIndex.current = 0;
-    repeats.current = 0;
-  }, [frames]);
-
-  useEffect(() => {
-    if (isPlaying) {
-      if (currentIndex.current >= frames.length) {
-        currentIndex.current = 0;
-      }
-      const dotElements = gridRef.current?.children;
-      if (!dotElements) return;
-      const dots = Array.from(dotElements) as HTMLDivElement[];
-      interval.current = setInterval(() => {
-        applyFrameToDots(dots, currentIndex.current);
-        if (currentIndex.current + 1 >= frames.length) {
-          if (repeatCount != -1 && repeats.current + 1 >= repeatCount) {
-            clearInterval(interval.current!);
-            onComplete?.();
-          }
-          repeats.current++;
-        }
-        currentIndex.current = (currentIndex.current + 1) % frames.length;
-      }, duration);
-    } else {
-      if (interval.current) clearInterval(interval.current);
-    }
-
-    return () => {
-      if (interval.current) clearInterval(interval.current);
-    };
-  }, [frames, isPlaying, applyFrameToDots, duration, repeatCount, onComplete]);
-
-  return (
-    <div {...props} ref={gridRef} className={cn("grid w-fit grid-cols-7 gap-0.5", className)}>
-      {Array.from({ length: 49 }).map((_, i) => (
-        <div key={i} className={cn("h-1.5 w-1.5 rounded-sm bg-muted-foreground/20", dotClassName, "[&.active]:bg-foreground")} />
-      ))}
-    </div>
-  );
-}
-
-function LoaderThirteen({ variant = 'circle', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderFourteen({ variant = 'pinwheel', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderFifteen({ variant = 'circle-filled', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderSixteen({ variant = 'ellipsis', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderSeventeen({ variant = 'ring', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderEighteen({ variant = 'bars', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderNineteen({ variant = 'infinite', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderTwenty({ variant = 'default', ...props }: LoaderProps) {
-  return <Loader variant={variant} {...props} />;
-}
-
-function LoaderTwentyOne({ className, outerSize, childSize }: LoaderProps) {
-  return (
-    <div
-      className={cn(
-        "m-2 h-8 w-8 animate-spin items-center justify-center rounded-full bg-gradient-to-bl from-pink-500 to-blue-600 p-0.5",
-        className,
-        outerSize,
-      )}
-    >
-      <div className={cn("h-6 w-6 rounded-full bg-white", childSize)} />
-    </div>
-  );
-}
-
-export function LoaderOneDemo() {
-  return <LoaderOne />;
-}
-export function LoaderTwoDemo() {
-  return <LoaderTwo />;
-}
-export function LoaderThreeDemo() {
-  return <LoaderThree />;
-}
-export function LoaderFourDemo() {
-  return <LoaderFour />;
-}
-export function LoaderFiveDemo() {
-  return <LoaderFive text="Generating chat..." />;
-}
-export function LoaderSixDemo() {
-  return (
-    <div>
-      <LoaderSix />
-    </div>
-  );
-}
-export function LoaderSevenDemo() {
-  return (
-    <div className="space-y-8 p-6 max-w-2xl mx-auto">
-      <div>
-        <h2 className="text-2xl font-bold mb-4">SpinnerV1 Sizes</h2>
-        <div className="flex items-center gap-4">
-          <LoaderSeven size="sm" />
-          <LoaderSeven size="default" />
-          <LoaderSeven size="lg" />
-          <LoaderSeven size="xl" />
-        </div>
-      </div>
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Custom Color</h2>
-        <div className="flex items-center gap-4">
-          <LoaderSeven className="text-primary" />
-          <LoaderSeven className="text-destructive" />
-        </div>
-      </div>
-    </div>
-  )
-}
-export function LoaderEightDemo() {
-  return (
-    <div>
-      <LoaderEight />
-    </div>
-  );
-}
-export function LoaderNineDemo() {
-  const [spinning, setSpinning] = useState(true);
-
-  return (
-    <div className="p-8 space-y-8">
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Basic Usage</h3>
-        <LoaderNine spinning={spinning}>
-          <div className="p-6 border rounded-lg bg-card">
-            <h4 className="text-lg font-medium mb-2">Content Section</h4>
-            <p className="text-muted-foreground">
-              This content will be blurred when spinning is active.
-            </p>
-          </div>
-        </LoaderNine>
-        <button
-          onClick={() => setSpinning(!spinning)}
-          className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
-        >
-          {spinning ? "Stop" : "Start"} Spinning
-        </button>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">With Tip</h3>
-        <LoaderNine spinning tip="Loading..." size="large">
-          <div className="p-6 border rounded-lg bg-card">
-            <h4 className="text-lg font-medium mb-2">Another Section</h4>
-            <p className="text-muted-foreground">
-              This demonstrates the tip prop functionality.
-            </p>
-          </div>
-        </LoaderNine>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Different Sizes</h3>
-        <div className="flex gap-4 items-center">
-          <LoaderNine spinning size="small">
-            <div className="w-20 h-20 border rounded-lg bg-card"></div>
-          </LoaderNine>
-          <LoaderNine spinning size="default">
-            <div className="w-20 h-20 border rounded-lg bg-card"></div>
-          </LoaderNine>
-          <LoaderNine spinning size="large">
-            <div className="w-20 h-20 border rounded-lg bg-card"></div>
-          </LoaderNine>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Standalone</h3>
-        <LoaderNine spinning tip="Processing..." />
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">With Delay</h3>
-        <LoaderNine spinning delay={500} tip="Delayed loading...">
-          <div className="p-6 border rounded-lg bg-card">
-            <h4 className="text-lg font-medium mb-2">Delayed Content</h4>
-            <p className="text-muted-foreground">
-              This spinner will appear after 500ms delay.
-            </p>
-          </div>
-        </LoaderNine>
-      </div>
-    </div>
-  );
-}
-export function LoaderTenDemo() {
-  return (
-    <div className="space-y-8 p-6">
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Loader Ten</h2>
-        <LoaderTen text="Configuring your account..." subText="Please wait while we prepare everything for you" />
-      </div>
-    </div>
-  )
-}
-export function LoaderElevenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <div className="space-y-2">
-          <h1 className="text-3xl font-bold">Spinner</h1>
-          <p className="text-muted-foreground">
-            Spinner is a process status indicator.
-          </p>
-        </div>
-
-        <div className="grid gap-8">
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Basic</h2>
-              <p className="text-muted-foreground">
-                An infinite spin animation is displayed by default.
-              </p>
-              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
-                <LoaderEleven />
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner />`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Custom</h2>
-              <p className="text-muted-foreground">
-                Spinner can be customized with styling property like style, strokeWidth and fill.
-              </p>
-              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
-                <LoaderEleven
-                  size={50}
-                  strokeWidth={8}
-                  fill="hsl(var(--background))"
-                  animationDuration="0.5s"
-                />
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner 
-  size={50}
-  strokeWidth={8}
-  fill="hsl(var(--background))"
-  animationDuration="0.5s"
-/>`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Sizes</h2>
-              <p className="text-muted-foreground">
-                Different sizes can be specified using the size property.
-              </p>
-              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={20} />
-                  <p className="text-xs text-muted-foreground">Small</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} />
-                  <p className="text-xs text-muted-foreground">Default</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={48} />
-                  <p className="text-xs text-muted-foreground">Large</p>
-                </div>
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner size={20} />
-<Spinner size={32} />
-<Spinner size={48} />`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Colors</h2>
-              <p className="text-muted-foreground">
-                Custom colors can be applied using CSS variables or direct color values.
-              </p>
-              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
-                <div className="text-center space-y-2">
-                  <div className="text-red-500">
-                    <LoaderEleven size={32} />
-                  </div>
-                  <p className="text-xs text-muted-foreground">Red</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <div className="text-green-500">
-                    <LoaderEleven size={32} />
-                  </div>
-                  <p className="text-xs text-muted-foreground">Green</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <div className="text-blue-500">
-                    <LoaderEleven size={32} />
-                  </div>
-                  <p className="text-xs text-muted-foreground">Blue</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <div className="text-purple-500">
-                    <LoaderEleven size={32} />
-                  </div>
-                  <p className="text-xs text-muted-foreground">Purple</p>
-                </div>
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<div className="text-red-500">
-  <Spinner size={32} />
-</div>`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Animation Speed</h2>
-              <p className="text-muted-foreground">
-                Control the animation speed with the animationDuration property.
-              </p>
-              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} animationDuration="0.5s" />
-                  <p className="text-xs text-muted-foreground">Fast (0.5s)</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} animationDuration="1s" />
-                  <p className="text-xs text-muted-foreground">Normal (1s)</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} animationDuration="3s" />
-                  <p className="text-xs text-muted-foreground">Slow (3s)</p>
-                </div>
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner animationDuration="0.5s" />
-<Spinner animationDuration="1s" />
-<Spinner animationDuration="3s" />`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Stroke Width</h2>
-              <p className="text-muted-foreground">
-                Customize the thickness of the spinner with strokeWidth property.
-              </p>
-              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} strokeWidth={1} />
-                  <p className="text-xs text-muted-foreground">Thin (1px)</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} strokeWidth={3} />
-                  <p className="text-xs text-muted-foreground">Normal (3px)</p>
-                </div>
-                <div className="text-center space-y-2">
-                  <LoaderEleven size={32} strokeWidth={6} />
-                  <p className="text-xs text-muted-foreground">Thick (6px)</p>
-                </div>
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner strokeWidth={1} />
-<Spinner strokeWidth={3} />
-<Spinner strokeWidth={6} />`}
-                </code>
-              </div>
-            </div>
-          </Card>
-
-          <Card className="p-6">
-            <div className="space-y-4">
-              <h2 className="text-xl font-semibold">Accessibility</h2>
-              <p className="text-muted-foreground">
-                Spinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
-              </p>
-              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
-                <LoaderEleven aria-label="Loading content" />
-              </div>
-              <div className="bg-muted/30 p-4 rounded-lg">
-                <code className="text-sm">
-                  {`<Spinner aria-label="Loading content" />`}
-                </code>
-              </div>
-              <p className="text-sm text-muted-foreground">
-                Component does not include any interactive elements.
-              </p>
-            </div>
-          </Card>
-        </div>
-      </div>
-    </div>
-  )
-}
-export function LoadertwelveDemo() {
-  return (
-    <div className="flex items-center gap-5 rounded bg-black px-4 py-3 text-white">
-      <div className="">
-        <LoaderTwelve
-          frames={game}
-          className="gap-0.5"
-          dotClassName="bg-white/15 [&.active]:bg-white size-1.5"></LoaderTwelve>
-      </div>
-      <p className="font-medium">Loading...</p>
-    </div>
-  );
-};
-export function LoaderThirteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderThirteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderFourteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderFourteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderFifthteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderFifteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderSixteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderSixteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderSeventeenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderSeventeen />
-      </div>
-    </div>
-  )
-}
-export function LoaderEightteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderEighteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderNineteenDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderNineteen />
-      </div>
-    </div>
-  )
-}
-export function LoaderTwentyDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderTwenty />
-      </div>
-    </div>
-  )
-}
-export function LoaderTwentyOneDemo() {
-  return (
-    <div className="min-h-screen bg-background text-foreground p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <LoaderTwentyOne />
-      </div>
-    </div>
-  )
-}
-
-
-
-
-