Feat:pulsating button enhancement

[abdmjd1]

Description

Enhances the existing PulsatingButton component with automatic pulse color detection, a new animation variant, and additional props for greater customization.

Changes

• Refactored PulsatingButton to remove unnecessary markup
• Pulse color is now automatically derived from the button's computed background color — no longer requires manual color input
• Added distance prop to control how far the pulse expands (default: "8px")
• Added variant prop with two animation styles: "pulse" and "ripple" (default: "pulse")
• pulseColor now accepts any valid CSS color instead of rgb numbers only
• Added "use client" directive for Next.js App Router compatibility
• Added demo file for the ripple variant (pulsating-button-demo-2.tsx)
• Updated documentation with new props and corrected prop descriptions

Motivation

• derive pulse color from the button's background color as a defualt
• enhance component's customization with new animation variant and distance variant.

Breaking Changes

• pulseColor no longer defaults to "#808080".
• The internal DOM structure has changed (the absolutely positioned div is removed). Custom styles targeting that element will no longer work.

Screenshots

Screenshots

pulsating.button.mp4

[vercel]

Someone is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

@abdmjd1
Tysm for the thoughtful improvements here.

I went ahead and made a few follow-up fixes on top of your PR to address the remaining issues, and everything looks good now. I’m going to merge this.