@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 6.39 kB
Source Map (JSON)
{"version":3,"file":"components\\ui\\ripple-button.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/ripple-button.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n }\n }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\r\n\r\nimport * as React from \"react\";\r\nimport { type HTMLMotionProps, motion, type Transition } from \"motion/react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface Ripple {\r\n id: number;\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface RippleButtonProps extends HTMLMotionProps<\"button\"> {\r\n children: React.ReactNode;\r\n rippleClassName?: string;\r\n scale?: number;\r\n transition?: Transition;\r\n}\r\n\r\nconst RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(\r\n (\r\n {\r\n children,\r\n onClick,\r\n className,\r\n rippleClassName,\r\n scale = 10,\r\n transition = { duration: 0.6, ease: \"easeOut\" },\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const [ripples, setRipples] = React.useState<Ripple[]>([]);\r\n const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n React.useImperativeHandle(\r\n ref,\r\n () => buttonRef.current as HTMLButtonElement,\r\n );\r\n\r\n const createRipple = React.useCallback(\r\n (event: React.MouseEvent<HTMLButtonElement>) => {\r\n const button = buttonRef.current;\r\n if (!button) return;\r\n\r\n const rect = button.getBoundingClientRect();\r\n const x = event.clientX - rect.left;\r\n const y = event.clientY - rect.top;\r\n\r\n const newRipple: Ripple = {\r\n id: Date.now(),\r\n x,\r\n y,\r\n };\r\n\r\n setRipples((prev) => [...prev, newRipple]);\r\n\r\n setTimeout(() => {\r\n setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));\r\n }, 600);\r\n },\r\n [],\r\n );\r\n\r\n const handleClick = React.useCallback(\r\n (event: React.MouseEvent<HTMLButtonElement>) => {\r\n createRipple(event);\r\n if (onClick) {\r\n onClick(event);\r\n }\r\n },\r\n [createRipple, onClick],\r\n );\r\n\r\n return (\r\n <motion.button\r\n ref={buttonRef}\r\n onClick={handleClick}\r\n whileTap={{ scale: 0.95 }}\r\n whileHover={{ scale: 1.05 }}\r\n className={cn(\r\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\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {ripples.map((ripple) => (\r\n <motion.span\r\n key={ripple.id}\r\n initial={{ scale: 0, opacity: 0.5 }}\r\n animate={{ scale, opacity: 0 }}\r\n transition={transition}\r\n className={cn(\r\n \"absolute bg-primary-foreground rounded-full size-5 pointer-events-none\",\r\n rippleClassName,\r\n )}\r\n style={{\r\n top: ripple.y - 10,\r\n left: ripple.x - 10,\r\n }}\r\n />\r\n ))}\r\n </motion.button>\r\n );\r\n },\r\n);\r\n\r\nRippleButton.displayName = \"RippleButton\";\r\n\r\nexport { RippleButton, type RippleButtonProps };\r\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","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":";;;;IAAAA,oBAAoB,CAAC,GAAG,CAAC,UAASC;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGD,oBAAoB,CAAC,CAACC,YAAYC,QAAQ,CAACF,oBAAoB,CAAC,CAAC,UAASE,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAF,oBAAoB,CAAC,GAAG,CAACI,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFL,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,sBAAOM,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;;ACcA,MAAMI,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"}