material-you-react/src/primitive-components/button-layout/button-layout.tsx

'use client';

import { bool, string } from 'prop-types';
import { RippleArea } from '../ripple/ripple-area';
import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, { forwardRef, useId, useRef, useState } from 'react';

export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
    ({ centralRipple = false, ...props }, ref) => {
        const [isActive, setIsActive] = useState<boolean>(false),
            ripplesRef = useRef(null),
            buttonId = useId(),
            events = useRippleEffect(ripplesRef, setIsActive);

        const classes =
            `m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();

        return (
            <button
                {...props}
                {...events}
                className={classes}
                disabled={props.disabled}
                id={buttonId}
                ref={ref}
            >
                {props.children}
                <RippleArea
                    callback={setIsActive}
                    central={centralRipple}
                    ref={ripplesRef}
                />
            </button>
        );
    },
);

ButtonLayout.propTypes = {
    children: string,
    centralRipple: bool,
};