{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stripe-button","type":"registry:ui","title":"Stripe Button","description":"Diagonal barber stripes that brighten and scroll on hover, like a live progress bar.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/stripe-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes, CSSProperties } from \"react\";\n\nexport interface StripeButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Stripe tile size in px (two stripes per tile). */\n  stripeSize?: number;\n  /** Seconds for the stripes to scroll one tile. */\n  speed?: number;\n}\n\nconst css = `@keyframes stripe-button-scroll{to{background-position:var(--sb-size) 0}}`;\n\nexport function StripeButton({ stripeSize = 18, speed = 0.5, className, style, children, ...props }: StripeButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={`group relative isolate inline-flex h-11 items-center justify-center gap-2 overflow-hidden rounded-xl bg-primary px-7 text-sm font-semibold text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/.4),inset_0_-2px_0_rgb(0_0_0/.1),0_8px_24px_-12px_var(--primary)] transition-[scale,translate,box-shadow] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring enabled:hover:-translate-y-px enabled:hover:shadow-[inset_0_1px_0_rgb(255_255_255/.4),inset_0_-2px_0_rgb(0_0_0/.1),0_12px_30px_-10px_var(--primary)] enabled:active:translate-y-0 enabled:active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-50 ${className ?? \"\"}`}\n      style={{ \"--sb-size\": `${stripeSize}px`, ...style } as CSSProperties}\n    >\n      <style href=\"stripe-button\" precedence=\"default\">\n        {css}\n      </style>\n      <span\n        aria-hidden\n        className=\"absolute inset-0 -z-10 opacity-45 transition-opacity duration-300 [animation:stripe-button-scroll_1s_linear_infinite] [animation-play-state:paused] group-focus-visible:opacity-100 group-focus-visible:[animation-play-state:running] group-enabled:group-hover:opacity-100 group-enabled:group-hover:[animation-play-state:running] motion-reduce:[animation:none]\"\n        style={\n          {\n            \"--sb-c\": \"color-mix(in oklab, var(--primary-foreground) 16%, transparent)\",\n            backgroundImage:\n              \"linear-gradient(135deg, var(--sb-c) 25%, transparent 25% 50%, var(--sb-c) 50% 75%, transparent 75%)\",\n            backgroundSize: \"var(--sb-size) var(--sb-size)\",\n            animationDuration: `${speed}s`,\n          } as CSSProperties\n        }\n      />\n      {/* Soft top sheen so the stripes read as under glass. */}\n      <span aria-hidden className=\"absolute inset-x-0 top-0 -z-10 h-1/2 bg-gradient-to-b from-white/25 to-transparent\" />\n      {children}\n    </button>\n  );\n}\n"}]}