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 };

src/primitive-components/button-layout/button.types.ts

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+
+type ToggleButtonType = {
+    selected: string;
+    unselected: string;
+};
+
+export interface ButtonMainProps extends PropsWithChildren<any> {
+    disabled?: boolean;
+    variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
+}
+
+export interface FABMainProps extends PropsWithChildren<any> {
+    icon: string;
+    disabled?: boolean;
+    size?: 'small' | 'default' | 'large' | 'extended';
+    variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
+}
+
+export interface IconButtonMainProps extends PropsWithChildren<any> {
+    icon: string;
+    toggled?: false | ToggleButtonType;
+    disabled?: boolean;
+    variant?: 'default' | 'filled' | 'tonal' | 'outlined';
+}