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

ADDED: container and card component, card-subcomponents WIP

src/primitive-components/input-components/radio/radio.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { bool, string } from 'prop-types';
+import { RadioProps } from './radio.types';
+import { RippleArea } from '../../ripple/ripple-area';
+import { forwardRef, useRef, useState } from 'react';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
+import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+
+/**
+ * Radio component
+ ** description
+ */
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+    ({ centralRipple, ...props }, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            ripplesRef = useRef(null),
+            events = useRippleEffect(ripplesRef, setIsActive);
+
+        const classes =
+            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
+
+        return (
+            <div {...events} className={classes}>
+                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                <span className={'m3 m3-radio-state-layer'} />
+                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                    <circle
+                        className={'m3-radio-outline'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                    <circle
+                        className={'m3-radio-state'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                </svg>
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                />
+            </div>
+        );
+    },
+);
+
+Radio.propTypes = {
+    children: string,
+    centralRipple: bool,
+};

src/primitive-components/input-components/radio/radio.types.ts

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
+
+export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
+    RipplePropsForComponents<HTMLInputElement> & {
+        children?: string;
+        centralRipple?: boolean;
+    };