REFACTOR: Ripple effect

TODO: Segmented buttons styles

src/primitive-components/ripple/ripple-effect.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import useRippleBuilder from './hooks/useRippleBuilder';
+import React, { forwardRef, useId, useRef } from 'react';
+import { RippleAreaProps, RippleContainer } from './ripple.types';
+
+const rippleAreaContext = React.createContext(false);
+
+const RippleEffect = forwardRef<RippleContainer, RippleAreaProps>(
+    ({ central = false, ...props }, ref) => {
+        const uniqueId = useId(),
+            rippleDomain = useRef<HTMLSpanElement>(null),
+            clicked = useRef<boolean>(false),
+            ripples = useRippleBuilder(clicked, rippleDomain, central, ref);
+
+        return (
+            <span
+                className={`m3 m3-ripple-domain ${props.className ?? ''}`.trimEnd()}
+                id={uniqueId}
+                ref={rippleDomain}
+            >
+                <rippleAreaContext.Provider value={clicked.current}>
+                    {Object.values(ripples)}
+                </rippleAreaContext.Provider>
+            </span>
+        );
+    },
+);
+
+export { rippleAreaContext, RippleEffect };