{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-button",
  "type": "registry:ui",
  "title": "Shimmer Button",
  "description": "CTA button with a looping diagonal light sweep. Draws the eye to your primary action.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/shimmer-button.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Button with a sweeping shimmer/shine effect.\n * @author Saasflare™\n * A CTA button with a diagonal light sweep animation that loops infinitely.\n * Self-contained implementation that participates in the Saasflare theming\n * contract (surface / radius / animated).\n * @module packages/ui/components/ui/shimmer-button\n * @package ui\n *\n * @component\n * @example\n * import { ShimmerButton } from '@saasflare/ui';\n * <ShimmerButton>Get Started Free</ShimmerButton>\n *\n * @example\n * // Custom shimmer color and speed\n * <ShimmerButton shimmerColor=\"var(--primary-foreground)\" speed={3}>\n *   Launch Your SaaS\n * </ShimmerButton>\n */\n\nimport * as React from \"react\"\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useReducedMotion } from \"@saasflare/ui\"\n\n/** Props for the ShimmerButton component. */\nexport interface ShimmerButtonProps\n  extends Omit<React.ComponentProps<\"button\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Button content. */\n  children: ReactNode\n  /** Color of the shimmer highlight. Default: `\"var(--primary-foreground)\"` */\n  shimmerColor?: string\n  /** Shimmer cycle duration in seconds. Default: `2.5` */\n  speed?: number\n  /** Background color. Default: `\"var(--primary)\"` */\n  background?: string\n}\n\n/**\n * CTA button with a continuously sweeping shimmer effect.\n *\n * - Diagonal light sweep loops infinitely\n * - CSS-only animation (no JS frames)\n * - Falls back to a static button when reduced motion is preferred or\n *   when `animated` is disabled via prop/provider\n * - Inherits standard button props (onClick, disabled, etc.)\n *\n * @component\n * @package ui\n */\nexport function ShimmerButton({\n  children,\n  shimmerColor = \"var(--primary-foreground)\",\n  speed = 2.5,\n  background = \"var(--primary)\",\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ShimmerButtonProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const reduced = useReducedMotion()\n  const showShimmer = sf.animated && !reduced\n\n  return (\n    <>\n      {showShimmer && (\n        <style>{`\n          @keyframes sf-shimmer-slide {\n            from { transform: translateX(-100%) rotate(-15deg); }\n            to { transform: translateX(200%) rotate(-15deg); }\n          }\n        `}</style>\n      )}\n      <button\n        className={cn(\n          \"relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md px-6 text-sm font-medium text-primary-foreground shadow-sm transition-all hover:brightness-110\",\n          className,\n        )}\n        style={{ background }}\n        data-slot=\"shimmer-button\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n        {...props}\n      >\n        {/* Shimmer overlay */}\n        {showShimmer && (\n          <div\n            className=\"pointer-events-none absolute inset-0\"\n            style={{\n              background: `linear-gradient(\n                -15deg,\n                transparent 30%,\n                ${shimmerColor} 50%,\n                transparent 70%\n              )`,\n              backgroundSize: \"200% 100%\",\n              animation: `sf-shimmer-slide ${speed}s ease-in-out infinite`,\n            }}\n            aria-hidden=\"true\"\n          />\n        )}\n\n        <span className=\"relative z-10\">{children}</span>\n      </button>\n    </>\n  )\n}\n",
      "target": "components/ui/shimmer-button.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/shimmer-button.json"
  }
}