{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-button",
  "type": "registry:component",
  "title": "Shimmer button",
  "description": "A React call to action with a slow band of light sweeping across it, a lit top edge and a press state. Ink or accent tone, renders as a button or a link.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/shimmer-button.tsx",
      "type": "registry:ui",
      "target": "components/ui/shimmer-button.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\nimport { ArrowRightIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A call to action with a slow band of light that sweeps across the face,\n * a lit top edge and a soft bloom underneath. The sweep pauses for reduced\n * motion. Renders a button, or pass `render` to make it a link.\n */\ntype ShimmerButtonProps = React.ComponentProps<\"button\"> & {\n  /** Seconds for one sweep. */\n  duration?: number\n  tone?: \"ink\" | \"accent\"\n  size?: \"default\" | \"lg\"\n  render?: React.ReactElement<Record<string, unknown>>\n}\n\nfunction ShimmerButton({ children = <>Get started <ArrowRightIcon className=\"size-4\" /></>, duration = 2.6, tone = \"ink\", size = \"lg\", className, render, style, ...props }: ShimmerButtonProps) {\n  const reduce = useReducedMotion()\n  const cls = cn(\n    \"group/shimmer relative isolate inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl font-medium whitespace-nowrap outline-none select-none\",\n    \"transition-[transform,box-shadow] duration-200 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg\",\n    tone === \"ink\" ? \"bg-ink text-on-ink shadow-ink\" : \"bg-accent text-on-accent shadow-ink\",\n    size === \"lg\" ? \"h-12 px-6 text-[0.9375rem]\" : \"h-10 px-4 text-sm\",\n    className,\n  )\n  const inner = (\n    <>\n      <span aria-hidden className=\"pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/60 to-transparent\" />\n      {!reduce ? (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-y-0 -left-1/2 w-1/2 -skew-x-12 bg-gradient-to-r from-transparent via-white/35 to-transparent mix-blend-soft-light\"\n          style={{ animation: `shimmer-sweep ${duration}s cubic-bezier(0.4,0,0.2,1) infinite` }}\n        />\n      ) : null}\n      <span className=\"relative z-10 inline-flex items-center gap-2\">{children}</span>\n      <style>{`@keyframes shimmer-sweep{0%{transform:translateX(0)}60%,100%{transform:translateX(320%)}}`}</style>\n    </>\n  )\n  if (render) return React.cloneElement(render, { className: cls, style, \"data-slot\": \"shimmer-button\", children: inner })\n  return (\n    <button type=\"button\" data-slot=\"shimmer-button\" className={cls} style={style} {...props}>\n      {inner}\n    </button>\n  )\n}\n\nexport { ShimmerButton }\nexport type { ShimmerButtonProps }\n"
    }
  ]
}