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

@@ -1,9 +1,9 @@
 'use client';
 
 import { bool, string } from 'prop-types';
-import { RippleArea } from '../ripple/ripple-area';
+import { RippleArea } from '../../ripple/ripple-area';
 import { ButtonLayoutProps } from './button-layout.types';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import React, { forwardRef, useId, useRef, useState } from 'react';
 
 export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
     ButtonHTMLAttributes<HTMLButtonElement>;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { ButtonProps } from './button.types';
-import { ButtonLayout } from '../button-layout/button-layout';
 import { bool, oneOf, string } from 'prop-types';
+import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
  * Button component

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

@@ -1,4 +1,4 @@
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonMainProps {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { FABProps } from './fab.types';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
@@ -54,7 +54,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
 FAB.propTypes = {
     icon: string,
     elevated: bool,
-    children: string,
     size: oneOf(['small', 'default', 'large', 'extended']),
     variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
 };

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

@@ -1,9 +1,8 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export interface FABMainProps {
     icon: string;
-    children?: string;
     disabled?: boolean;
     elevated?: boolean;
     size?: 'small' | 'default' | 'large' | 'extended';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export interface IconButtonMainProps {
     icon: string;

src/primitive-components/card/card-action-area.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { RippleArea } from '../ripple/ripple-area';
+import { CardActionAreaProps } from './card.types';
+import { forwardRef, useRef, useState } from 'react';
+import useRippleEffect from '../ripple/hooks/useRippleEffect';
+
+export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
+    ({ centralRipple = false, ripples = true, ...props }, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false);
+        const ripplesRef = useRef(null);
+        const CardActionAreaEvents = useRippleEffect(
+            ripplesRef,
+            setIsActive,
+            ripples,
+        );
+        const classes =
+            `m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div
+                {...props}
+                {...CardActionAreaEvents}
+                className={classes}
+                ref={ref}
+            >
+                <div className={'m3 m3-card-action-area-content'}>
+                    {props.children}
+                </div>
+                <span className={'m3 m3-card-state-layer'} />
+                {ripples && (
+                    <RippleArea
+                        callback={setIsActive}
+                        central={centralRipple}
+                        ref={ripplesRef}
+                    />
+                )}
+            </div>
+        );
+    },
+);

src/primitive-components/card/card-actions.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardActions(props) {
+    return (
+        <div></div>
+    );
+}

src/primitive-components/card/card-content.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardContent(props) {
+    return (
+        <div></div>
+    );
+}

src/primitive-components/card/card-header.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardHeader(props) {
+    return (
+        <div></div>
+    );
+}

src/primitive-components/card/card-media.tsx

@@ -0,0 +1,21 @@
+// import { forwardRef } from 'react';
+// import { CardMediaProps, CardMedia } from "./card.types";
+
+// export const CardMedia = forwardRef<CardMedia, CardMediaProps>(
+//     ({rounded = true, preview = true, type, ...props}, ref) => {
+//     const classes = `m3 m3-card-media${rounded ? ' media-rounded' : ''}${preview ? ' media-preview' : ''} ${props.className ?? ''}`.trimEnd();
+//     switch (type){
+//         case "audio":
+//             break;
+//         case "iframe":
+//             break;
+//         case "img":
+//             break;
+//         case "picture":
+//             break;
+//         case "video":
+//             break;
+//         default:
+//             break;
+//     }
+// }

src/primitive-components/card/card.tsx

@@ -1,20 +1,20 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { CardProps } from './card.types';
+import { Container } from '../container/container';
 
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: 'outlined' | 'filled' | 'elevated';
-}
-
-const Card = forwardRef<HTMLDivElement, CardProps>(
+export const Card = forwardRef<HTMLDivElement, CardProps>(
     ({ variant = 'filled', ...props }, ref) => {
-        const classes =
-            `m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
+        const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
 
         return (
-            <div {...props} className={classes} ref={ref}>
+            <Container
+                {...props}
+                className={classes}
+                ref={ref}
+                variant={variant}
+            >
                 {props.children}
-            </div>
+            </Container>
         );
     },
 );
-
-export default Card;

src/primitive-components/card/card.types.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { ContainerProps } from '../container/container.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
+
+export interface CardActionAreaProps
+    extends RipplePropsForComponents<HTMLDivElement> {
+    ripples?: boolean;
+}
+
+export interface CardProps extends ContainerProps {}
+
+export interface CardMediaProps extends HTMLAttributes<CardMedia> {
+    type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
+    rounded?: boolean;
+    preview?: boolean;
+}
+
+export type CardMedia = HTMLImageElement &
+    HTMLVideoElement &
+    HTMLPictureElement &
+    HTMLMediaElement &
+    HTMLIFrameElement &
+    HTMLAudioElement;

src/primitive-components/components.tsx

@@ -1,14 +1,16 @@
-export { FAB } from './fab/fab';
+export { Card } from './card/card';
 export { Icon } from './icon/icon';
-export { Radio } from './radio/radio';
 export { Badge } from './badge/badge';
-export { Switch } from './switch/switch';
-export { Button } from './button/button';
 export { Divider } from './divider/divider';
-export { Checkbox } from './checkbox/checkbox';
+export { Container } from './container/container';
 export { RippleArea } from './ripple/ripple-area';
 export { Ripples, Ripple } from './ripple/ripple';
-export { TextField } from './text-field/text-field';
-export { IconButton } from './icon-button/icon-button';
-export { ButtonLayout } from './button-layout/button-layout';
-export { SegmentedButtons } from './segmented-buttons/segmented-buttons';
+export { FAB } from './button-components/fab/fab';
+export { Radio } from './input-components/radio/radio';
+export { Switch } from './input-components/switch/switch';
+export { Button } from './button-components/button/button';
+export { Checkbox } from './input-components/checkbox/checkbox';
+export { TextField } from './input-components/text-field/text-field';
+export { IconButton } from './button-components/icon-button/icon-button';
+export { ButtonLayout } from './button-components/button-layout/button-layout';
+export { SegmentedButtons } from './button-components/segmented-buttons/segmented-buttons';

src/primitive-components/container/container.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { ContainerProps } from './container.types';
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+    ({ variant = 'filled', ...props }, ref) => {
+        const classes =
+            `m3 m3-container m3-container-${variant} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div {...props} className={classes} ref={ref}>
+                {props.children}
+            </div>
+        );
+    },
+);

src/primitive-components/container/container.types.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'outlined' | 'filled' | 'elevated';
+}

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

@@ -2,8 +2,8 @@
 
 import { bool } from 'prop-types';
 import { CheckboxProps } from './checkbox.types';
-import { RippleArea } from '../ripple/ripple-area';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import { RippleArea } from '../../ripple/ripple-area';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 import {
     forwardRef,

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
     RipplePropsForComponents<HTMLInputElement> & {

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

@@ -2,9 +2,9 @@
 
 import { bool, string } from 'prop-types';
 import { RadioProps } from './radio.types';
-import { RippleArea } from '../ripple/ripple-area';
+import { RippleArea } from '../../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 /**

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
     RipplePropsForComponents<HTMLInputElement> & {

src/primitive-components/ripple/hooks/useRippleEffect.ts

@@ -24,7 +24,11 @@ export type InteractionEventsType = MouseEvent &
     DragEvent &
     FocusEvent;
 
-const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
+const UseRippleEffect = (
+    ref,
+    callback,
+    enabled = true,
+): undefined | RippleEventHandlers => {
     const [mounted, setMounted] = useState<boolean>(false);
 
     useEffect(() => {
@@ -37,6 +41,10 @@ const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
         return;
     }
 
+    if (!enabled) {
+        return;
+    }
+
     const { start, stop } = ref.current;
 
     return {