{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-button",
  "title": "Shimmer Button",
  "description": "A shimmering button component",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/shimmer-button.tsx",
      "content": "\"use client\"\n\nimport React, { type CSSProperties, type ComponentPropsWithoutRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Loader2 } from \"lucide-react\"\n\nexport interface ShimmerButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  shimmerColor?: string\n  shimmerSize?: string\n  borderRadius?: string\n  shimmerDuration?: string\n  background?: string\n  className?: string\n  children?: React.ReactNode\n  icon?: React.ReactNode\n  isLoading?: boolean\n}\n\nexport const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(\n  (\n    {\n      shimmerColor = \"#ffffff\",\n      shimmerSize = \"0.05em\",\n      shimmerDuration = \"3s\",\n      borderRadius = \"100px\",\n      background = \"rgba(0, 0, 0, 1)\",\n      className,\n      children,\n      icon,\n      isLoading = false,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <button\n        style={\n          {\n            \"--spread\": \"90deg\",\n            \"--shimmer-color\": shimmerColor,\n            \"--radius\": borderRadius,\n            \"--speed\": shimmerDuration,\n            \"--cut\": shimmerSize,\n            \"--bg\": background,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black\",\n          \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n          isLoading && \"cursor-wait\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        ref={ref}\n        disabled={disabled || isLoading}\n        {...props}\n      >\n        {/* spark container */}\n        <div className={cn(\"-z-30 blur-[2px]\", \"absolute inset-0 overflow-visible [container-type:size]\")}>\n          {/* spark */}\n          <div className=\"absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]\">\n            {/* spark before */}\n            <div className=\"absolute -inset-full w-auto rotate-0 animate-spin-around [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]\" />\n          </div>\n        </div>\n\n        {isLoading ? (\n          <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n        ) : icon ? (\n          <span className=\"mr-2\">{icon}</span>\n        ) : null}\n        {children}\n\n        {/* Highlight */}\n        <div\n          className={cn(\n            \"insert-0 absolute size-full\",\n            \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n            \"transform-gpu transition-all duration-300 ease-in-out\",\n            \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n            \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\",\n          )}\n        />\n\n        {/* backdrop */}\n        <div className={cn(\"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\")} />\n      </button>\n    )\n  },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\n",
      "type": "registry:ui",
      "target": "components/pioneerui/shimmer-button.tsx"
    }
  ],
  "type": "registry:ui"
}