{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loader",
  "type": "registry:ui",
  "title": "Loader",
  "description": "Animated versatile loader with different variants, customizable size and content.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/loader.tsx",
      "content": "'use client';\nimport { ReactNode, useMemo } from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface LoaderProps {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'default' | 'cube' | 'dual-ring' | 'magnetic-dots';\n  size?: number;\n}\n\nexport function Loader({\n  children,\n  className = '',\n  variant = 'default',\n  size,\n}: LoaderProps) {\n  const finalSize = useMemo(() => size ?? 24, [size]);\n\n  return (\n    <div className={cn('flex gap-2', className)}>\n      <div\n        className='relative flex items-center justify-center'\n        style={{\n          height: finalSize,\n          width: finalSize,\n        }}\n      >\n        {variant === 'default' && (\n          <>\n            <div className='absolute inset-0 rounded-full border-t-[1.5px] border-b-[1.5px] border-black/30 dark:border-white/30' />\n            <motion.div\n              className='absolute inset-0 rounded-full border-t-[1.5px] border-b-[1.5px] border-black dark:border-white'\n              animate={{ rotate: 360 }}\n              transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}\n            />\n          </>\n        )}\n\n        {variant === 'cube' && (\n          <motion.div\n            className='absolute inset-0 bg-black dark:bg-white shadow-[0_0_4px_rgba(255,255,255,0.6)] dark:shadow-[0_0_4px_rgba(255,255,255,0.6)]'\n            animate={{ rotateX: [0, 180, 0], rotateY: [0, 180, 0] }}\n            transition={{ repeat: Infinity, duration: 1.1, ease: 'linear' }}\n          />\n        )}\n\n        {variant === 'dual-ring' && (\n          <>\n            <div className='absolute inset-0 rounded-full border-[1.5px] border-black/20 dark:border-white/20 shadow-[0_0_4px_rgba(0,0,0,0.3)] dark:shadow-[0_0_4px_rgba(255,255,255,0.3)]' />\n            <motion.div\n              className='absolute inset-0 rounded-full border-t-[1.5px] border-black border-b-transparent dark:border-white dark:border-b-transparent shadow-[0_0_6px_rgba(0,0,0,0.5)] dark:shadow-[0_0_6px_rgba(255,255,255,0.7)]'\n              animate={{ rotate: 360 }}\n              transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}\n            />\n          </>\n        )}\n\n        {variant === 'magnetic-dots' && (\n          <div className='relative flex items-center justify-center h-full w-full'>\n            <motion.div\n              className='absolute rounded-full bg-black dark:bg-white'\n              style={{\n                height: finalSize / 3,\n                width: finalSize / 3,\n              }}\n              animate={{ x: [-(finalSize / 3), 0, -(finalSize / 3)] }}\n              transition={{\n                repeat: Infinity,\n                duration: 1.2,\n                ease: 'easeInOut',\n                times: [0, 0.5, 1],\n              }}\n            />\n            <motion.div\n              className='absolute rounded-full bg-black dark:bg-white'\n              style={{\n                height: finalSize / 3,\n                width: finalSize / 3,\n              }}\n              animate={{ x: [finalSize / 3, 0, finalSize / 3] }}\n              transition={{\n                repeat: Infinity,\n                duration: 1.2,\n                ease: 'easeInOut',\n                times: [0, 0.5, 1],\n              }}\n            />\n            <motion.div\n              className='absolute rounded-full bg-black dark:bg-white opacity-0'\n              style={{\n                height: finalSize / 3,\n                width: finalSize / 3,\n              }}\n              animate={{ opacity: [0, 1, 0] }}\n              transition={{\n                repeat: Infinity,\n                duration: 1.2,\n                ease: 'easeInOut',\n                times: [0.45, 0.5, 0.55],\n              }}\n            />\n          </div>\n        )}\n      </div>\n\n      {children && <div className='text-sm'>{children}</div>}\n    </div>\n  );\n}\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}