{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shiny-button",
  "type": "registry:ui",
  "title": "Shiny Button",
  "description": "A pill button with a diagonal light sweep that glides across on hover while the leading sparkle twinkles. Pure CSS — no GSAP dependency.",
  "dependencies": [],
  "registryDependencies": [],
  "cssVars": {
    "theme": {}
  },
  "files": [
    {
      "path": "components/tweenui/shiny-button.tsx",
      "type": "registry:component",
      "target": "components/tweenui/shiny-button.tsx",
      "content": "'use client';\n\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nfunction Sparkles() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\" />\n      <path d=\"M20 3v4\" />\n      <path d=\"M22 5h-4\" />\n      <path d=\"M4 17v2\" />\n      <path d=\"M5 18H3\" />\n    </svg>\n  );\n}\n\nexport interface ShinyButtonProps extends ComponentPropsWithRef<'button'> {\n  /** Leading icon. Defaults to a sparkles glyph; pass `null` to hide it. */\n  icon?: ReactNode;\n}\n\nexport default function ShinyButton({\n  children,\n  className,\n  icon,\n  type = 'button',\n  ...props\n}: ShinyButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn(\n        'group relative inline-flex h-12 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg border border-transparent bg-[#045f64] px-6 text-sm font-medium text-[#c6f56f] shadow-[0_1px_1px_rgba(16,24,40,0.16)] transition-colors duration-300 hover:bg-[#045f64]/95 focus-visible:ring-2 focus-visible:ring-[#045f64] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none dark:ring-offset-[#12161F]',\n        className\n      )}\n      {...props}\n    >\n      {/* Diagonal shine sweep on hover. */}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 left-[-67%] size-full -translate-y-1/2 rotate-[75deg] bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.35)_50%,transparent)] transition-none will-change-[left] group-hover:left-[70%] group-hover:transition-[left] group-hover:duration-700 group-hover:ease-in-out motion-reduce:hidden\"\n      />\n\n      {icon !== null ? (\n        <span className=\"relative inline-flex transition-transform duration-500 group-hover:scale-110 group-hover:rotate-12 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-hover:rotate-0\">\n          {icon ?? <Sparkles />}\n        </span>\n      ) : null}\n      <span className=\"relative\">{children}</span>\n    </button>\n  );\n}\n"
    }
  ],
  "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/shiny-button"
}