@arolariu/components/dist/cjs/components/ui/ripple-button.cjs.map

A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍

{"version":3,"file":"components\\ui\\ripple-button.cjs","sources":["webpack://@arolariu/components/./src/components/ui/ripple-button.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport { type HTMLMotionProps, motion, type Transition } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface Ripple {\n  id: number;\n  x: number;\n  y: number;\n}\n\ninterface RippleButtonProps extends HTMLMotionProps<\"button\"> {\n  children: React.ReactNode;\n  rippleClassName?: string;\n  scale?: number;\n  transition?: Transition;\n}\n\nconst RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(\n  (\n    {\n      children,\n      onClick,\n      className,\n      rippleClassName,\n      scale = 10,\n      transition = { duration: 0.6, ease: \"easeOut\" },\n      ...props\n    },\n    ref\n  ) => {\n    const [ripples, setRipples] = React.useState<Ripple[]>([]);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    React.useImperativeHandle(\n      ref,\n      () => buttonRef.current as HTMLButtonElement\n    );\n\n    const createRipple = React.useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        const button = buttonRef.current;\n        if (!button) return;\n\n        const rect = button.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const y = event.clientY - rect.top;\n\n        const newRipple: Ripple = {\n          id: Date.now(),\n          x,\n          y,\n        };\n\n        setRipples((prev) => [...prev, newRipple]);\n\n        setTimeout(() => {\n          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));\n        }, 600);\n      },\n      []\n    );\n\n    const handleClick = React.useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        createRipple(event);\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [createRipple, onClick]\n    );\n\n    return (\n      <motion.button\n        ref={buttonRef}\n        onClick={handleClick}\n        whileTap={{ scale: 0.95 }}\n        whileHover={{ scale: 1.05 }}\n        className={cn(\n          \"relative h-10 px-4 py-2 text-sm font-medium text-primary-foreground overflow-hidden bg-primary cursor-pointer rounded-lg focus:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {ripples.map((ripple) => (\n          <motion.span\n            key={ripple.id}\n            initial={{ scale: 0, opacity: 0.5 }}\n            animate={{ scale, opacity: 0 }}\n            transition={transition}\n            className={cn(\n              \"absolute bg-primary-foreground rounded-full size-5 pointer-events-none\",\n              rippleClassName\n            )}\n            style={{\n              top: ripple.y - 10,\n              left: ripple.x - 10,\n            }}\n          />\n        ))}\n      </motion.button>\n    );\n  }\n);\n\nRippleButton.displayName = \"RippleButton\";\n\nexport { RippleButton, type RippleButtonProps };\n"],"names":["RippleButton","React","children","onClick","className","rippleClassName","scale","transition","props","ref","ripples","setRipples","buttonRef","createRipple","event","button","rect","x","y","newRipple","Date","prev","setTimeout","r","handleClick","motion","cn","ripple"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,eAAe,WAAfA,GAAeC,+BAAAA,UAAgB,CACnC,CACE,EACEC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,eAAe,EACfC,QAAQ,EAAE,EACVC,aAAa;IAAE,UAAU;IAAK,MAAM;AAAU,CAAC,EAC/C,GAAGC,OACJ,EACDC;IAEA,MAAM,CAACC,SAASC,WAAW,GAAGV,+BAAAA,QAAc,CAAW,EAAE;IACzD,MAAMW,YAAYX,+BAAAA,MAAY,CAAoB;IAClDA,+BAAAA,mBAAyB,CACvBQ,KACA,IAAMG,UAAU,OAAO;IAGzB,MAAMC,eAAeZ,+BAAAA,WAAiB,CACpC,CAACa;QACC,MAAMC,SAASH,UAAU,OAAO;QAChC,IAAI,CAACG,QAAQ;QAEb,MAAMC,OAAOD,OAAO,qBAAqB;QACzC,MAAME,IAAIH,MAAM,OAAO,GAAGE,KAAK,IAAI;QACnC,MAAME,IAAIJ,MAAM,OAAO,GAAGE,KAAK,GAAG;QAElC,MAAMG,YAAoB;YACxB,IAAIC,KAAK,GAAG;YACZH;YACAC;QACF;QAEAP,WAAW,CAACU,OAAS;mBAAIA;gBAAMF;aAAU;QAEzCG,WAAW;YACTX,WAAW,CAACU,OAASA,KAAK,MAAM,CAAC,CAACE,IAAMA,EAAE,EAAE,KAAKJ,UAAU,EAAE;QAC/D,GAAG;IACL,GACA,EAAE;IAGJ,MAAMK,cAAcvB,+BAAAA,WAAiB,CACnC,CAACa;QACCD,aAAaC;QACb,IAAIX,SACFA,QAAQW;IAEZ,GACA;QAACD;QAAcV;KAAQ;IAGzB,OACE,WADF,GACE,sCAACsB,sBAAAA,MAAAA,CAAAA,MAAa;QACZ,KAAKb;QACL,SAASY;QACT,UAAU;YAAE,OAAO;QAAK;QACxB,YAAY;YAAE,OAAO;QAAK;QAC1B,WAAWE,IAAAA,0BAAAA,EAAAA,EACT,+IACAtB;QAED,GAAGI,KAAK;;YAERN;YACAQ,QAAQ,GAAG,CAAC,CAACiB,SACZ,WADYA,GACZ,qCAACF,sBAAAA,MAAAA,CAAAA,IAAW;oBAEV,SAAS;wBAAE,OAAO;wBAAG,SAAS;oBAAI;oBAClC,SAAS;wBAAEnB;wBAAO,SAAS;oBAAE;oBAC7B,YAAYC;oBACZ,WAAWmB,IAAAA,0BAAAA,EAAAA,EACT,0EACArB;oBAEF,OAAO;wBACL,KAAKsB,OAAO,CAAC,GAAG;wBAChB,MAAMA,OAAO,CAAC,GAAG;oBACnB;mBAXKA,OAAO,EAAE;;;AAgBxB;AAGF3B,aAAa,WAAW,GAAG"}