ESLINT is holy crap

src/primitive-components/button-layout/button-layout.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { RippleArea } from '../ripple/ripple-area';
+import { IRippleProps } from '../ripple/ripple.types';
+import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import React, {
+    forwardRef,
+    PropsWithChildren,
+    useId,
+    useRef,
+    useState,
+} from 'react';
+
+const ButtonLayout = forwardRef<
+    HTMLButtonElement,
+    PropsWithChildren<any> & IRippleProps
+>(function ButtonBase({ centralRipple = false, ...props }, ref) {
+    const [isActive, setIsActive] = useState<boolean>(false),
+        ripplesRef = useRef(null),
+        buttonId = useId(),
+        events = useRippleEffect(ripplesRef, setIsActive);
+
+    const { variant, disabled, className } = props;
+
+    const classes = className
+        ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
+        : `m3 ${variant}${isActive ? ' is-active' : ''}`;
+
+    return (
+        <button
+            {...props}
+            {...events}
+            className={classes}
+            disabled={disabled}
+            id={buttonId}
+            ref={ref}
+        >
+            {props.children}
+            <RippleArea
+                callback={setIsActive}
+                central={centralRipple}
+                ref={ripplesRef}
+            />
+        </button>
+    );
+});
+
+export { ButtonLayout };