CHANGED: style and components directories, removed redundant imports from styles

ADDED: container and card component, card-subcomponents WIP

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

@@ -0,0 +1,42 @@
+'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,
+};