50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1911,"use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type ButtonSize = "sm" | "md" | "lg" | "xl"; type ButtonColor = "pink" | "blue" | "orange" | "yellow" | "green" | "purple"; interface PulseButtonProps { /** * The text to display on the button. * @default "Swap" */ text?: string; /** * Optional click handler. */ onClick?: () => void; /** * Additional CSS classes for the button. */ className?: string; /** * The preset color theme for the button. * @default "pink" */ color?: ButtonColor; /** * The size of the button. * @default "lg" */ size?: ButtonSize; } const colorMap: Record = { pink: { primary: "#ff2281", glow: "#ff4da0", shadow: "rgba(255, 34, 129, 0.4)", }, blue: { primary: "#0070f3", glow: "#00d2ff", shadow: "rgba(0, 112, 243, 0.4)", }, orange: { primary: "#f2994a", glow: "#f2c94c", shadow: "rgba(242, 153, 74, 0.4)", }, yellow: { primary: "#f2c94c", glow: "#ffe000", shadow: "rgba(242, 201, 76, 0.4)", }, green: { primary: "#27ae60", glow: "#2ecc71", shadow: "rgba(39, 174, 96, 0.4)", }, purple: { primary: "#8e44ad", glow: "#9b59b6", shadow: "rgba(142, 68, 173, 0.4)", }, }; const sizeConfig = { sm: { button: "h-10 min-w-[120px] px-4 rounded-lg", text: "text-sm", dots: [2, 1.2, 0.8], }, md: { button: "h-14 min-w-[180px] px-6 rounded-xl", text: "text-xl", dots: [3, 1.8, 1], }, lg: { button: "h-20 min-w-[240px] px-8 rounded-2xl", text: "text-3xl", dots: [3.5, 2, 1], }, xl: { button: "h-28 min-w-[320px] px-12 rounded-[2rem]", text: "text-5xl", dots: [5, 3, 1.5], }, }; /** * A beautifully animated button component with gradient background, * pulsing dot patterns, and smooth hover/active interactions. */ export default function PulseButton({ text = "Swap", onClick, className, color = "pink", size = "lg", }: PulseButtonProps) { const config = sizeConfig[size]; const theme = colorMap[color]; return ( {/* Pattern Overlay Container */}

{/* Large dots (Outer Edges) */} {/* Medium dots (Mid Section) */} {/* Small dots (Inner Section fading to center) */}

{/* Text Label */} {text} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@satoriui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"packages/pulse-button/pulse-button.tsx","content":"$52","type":"registry:component","target":"components/satori-ui/pulse-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]