{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stripe-button",
  "type": "registry:ui",
  "title": "Stripe Button",
  "description": "Smooth animated button crafted with refined glow and modern motion.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/stripe-button.tsx",
      "content": "'use client';\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface StripeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  stripesSpeed?: number;\n  variant?: 'default' | 'compact';\n  size?: 'default' | 'sm' | 'lg' | 'icon';\n}\n\nconst StripeButton = React.forwardRef<HTMLButtonElement, StripeButtonProps>(\n  (\n    {\n      children,\n      className = '',\n      stripesSpeed = 500,\n      variant = 'default',\n      size = 'default',\n      ...props\n    },\n    ref,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n\n    const sizeClasses = {\n      default: 'h-10 px-10',\n      sm: 'h-8 px-10 text-xs',\n      lg: 'h-12 px-8',\n      icon: 'h-10 w-10 p-0',\n    };\n\n    return (\n      <button\n        ref={ref}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        className={cn(\n          'group relative cursor-pointer border-0 bg-transparent p-0 outline-hidden',\n          size === 'icon' && 'w-11',\n          className,\n        )}\n        {...props}\n      >\n        <div className='relative h-full w-full overflow-hidden rounded-2xl p-0.5 transition-all duration-300 ease-in-out bg-zinc-200 dark:bg-zinc-800'>\n          <div className='absolute inset-0 overflow-hidden rounded-2xl'>\n            <motion.div\n              className='absolute h-10 w-20 -translate-x-1/2 -translate-y-1/2 blur-xs\n                         [background:linear-gradient(to_right,transparent_20%,#000000_50%,#000000_60%,transparent_80%)] \n                         dark:[background:linear-gradient(to_right,transparent_20%,#ffffff_50%,#ffffff_60%,transparent_80%)]'\n              animate={{\n                top: ['0%', '0%', '100%', '100%', '0%'],\n                left: ['0%', '100%', '100%', '0%', '0%'],\n              }}\n              transition={{\n                duration: 4,\n                repeat: Infinity,\n                ease: 'linear',\n              }}\n            />\n\n            <motion.div\n              className='absolute h-10 w-20 -translate-x-1/2 -translate-y-1/2 blur-xs\n                         [background:linear-gradient(to_right,transparent_20%,#000000_50%,#000000_60%,transparent_80%)] \n                         dark:[background:linear-gradient(to_right,transparent_20%,#ffffff_50%,#ffffff_60%,transparent_80%)]'\n              animate={{\n                top: ['100%', '100%', '0%', '0%', '100%'],\n                left: ['100%', '0%', '0%', '100%', '100%'],\n              }}\n              transition={{\n                duration: 4,\n                repeat: Infinity,\n                ease: 'linear',\n              }}\n            />\n          </div>\n\n          <div\n            className={cn(\n              'relative z-10 flex items-center justify-center gap-2 rounded-2xl transition-all duration-300 ease-in-out bg-white dark:bg-black overflow-hidden',\n              variant === 'compact' ? 'h-full px-10' : sizeClasses[size],\n            )}\n          >\n            <span\n              className='absolute inset-0 pointer-events-none dark:hidden'\n              style={{\n                backgroundImage:\n                  'repeating-linear-gradient(120deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 10px, rgba(100, 100, 100, 1) 10px, rgba(100, 100, 100, 1) 20px)',\n                backgroundPosition: isHovered ? '40px 0' : '0 0',\n                backgroundSize: '28.28px 100%',\n                transition: `background-position ${stripesSpeed}ms ease-out`,\n                opacity: 0.15,\n              }}\n            />\n\n            <span\n              className='absolute inset-0 pointer-events-none hidden dark:block'\n              style={{\n                backgroundImage:\n                  'repeating-linear-gradient(120deg, rgba(19, 19, 19, 1), rgba(19, 19, 19, 1) 10px, rgba(43, 43, 43, 1) 10px, rgba(43, 43, 43, 1) 20px)',\n                backgroundPosition: isHovered ? '40px 0' : '0 0',\n                backgroundSize: '28.28px 100%',\n                transition: `background-position ${stripesSpeed}ms ease-out`,\n              }}\n            />\n\n            <span className='absolute top-0 left-4 right-4 h-0.5 bg-linear-to-r from-transparent via-slate-400/60 dark:via-white/60 to-transparent pointer-events-none rounded-2xl' />\n            <span className='relative z-10 text-base font-semibold text-black dark:text-white'>\n              {children}\n            </span>\n            <span className='absolute inset-0 rounded-2xl shadow-[inset_0_1px_0_rgba(255,255,255,0.3)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] pointer-events-none' />\n          </div>\n        </div>\n      </button>\n    );\n  },\n);\n\nStripeButton.displayName = 'StripeButton';\n\nexport { StripeButton };\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}"
    }
  ]
}