{
  "name": "shimmer-button",
  "type": "registry:ui",
  "dependencies": [],
  "registryDependencies": [],
  "description": "A button with a shimmering light effect.",
  "files": [
    {
      "path": "components/ui/shimmer-button.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShimmerButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  shimmerColor?: string\n  shimmerSize?: string\n  borderRadius?: string\n  shimmerDuration?: string\n  background?: string\n  className?: string\n  children?: React.ReactNode\n}\n\nconst 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      ...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 React.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          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {/* spark container */}\n        <div\n          className={cn(\n            \"-z-30 blur-[2px]\",\n            \"absolute inset-0 overflow-visible [container-type:size]\",\n          )}\n        >\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=\"animate-spin-around absolute -inset-full w-auto rotate-0 [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        {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\n          className={cn(\n            \"absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]\",\n          )}\n        />\n      </button>\n    )\n  },\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n\nexport { ShimmerButton }\n",
      "type": "registry:ui"
    }
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "animation": {
            "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
            "spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
          },
          "keyframes": {
            "shimmer-slide": {
              "to": {
                "transform": "translate(calc(100cqw - 100%), 0)"
              }
            },
            "spin-around": {
              "0%": {
                "transform": "translateZ(0) rotate(0)"
              },
              "15%, 35%": {
                "transform": "translateZ(0) rotate(90deg)"
              },
              "65%, 85%": {
                "transform": "translateZ(0) rotate(270deg)"
              },
              "100%": {
                "transform": "translateZ(0) rotate(360deg)"
              }
            }
          }
        }
      }
    }
  }
}