FIXED: Interfaces

app/page.tsx

@@ -1,11 +1,11 @@
 import { Fragment } from 'react';
 import Fabs from './components/fabs';
 import Badges from './components/badges';
-import IconButtons from './components/icon-buttons';
+import Radios from './components/radios';
 import Buttons from './components/buttons';
 import Switches from './components/switches';
 import Checkboxes from './components/checkboxes';
-import Radios from './components/radios';
+import IconButtons from './components/icon-buttons';
 import { TextFields } from './components/text-fields';
 
 export default function Page() {

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

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
-import { IRippleProps } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
 
-export type ButtonLayoutProps = IRippleProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
+    ButtonHTMLAttributes<HTMLButtonElement> & {
         variant?: string;
     };

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

@@ -1,11 +1,12 @@
+import { RipplePropsForComponents } from '../ripple/ripple.types';
 import { ButtonHTMLAttributes } from 'react';
-import { IRippleProps } from '../ripple/ripple.types';
 
-export interface ButtonMainProps
+export interface ButtonMainProps {
-    extends ButtonHTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
     icon?: string;
 }
 
-export type ButtonProps = IRippleProps & ButtonMainProps;
+export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
+    ButtonMainProps &
+    ButtonHTMLAttributes<HTMLButtonElement>;

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

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
-import { IRippleProps } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
-    IRippleProps & {
+    RipplePropsForComponents<HTMLInputElement> & {
         indeterminate?: boolean;
     };

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { IRippleProps } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export interface FABMainProps {
     icon: string;
@@ -10,5 +10,5 @@ export interface FABMainProps {
 }
 
 export type FABProps = FABMainProps &
-    IRippleProps &
+    RipplePropsForComponents<HTMLButtonElement> &
     ButtonHTMLAttributes<HTMLButtonElement>;

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

@@ -45,7 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         const buttonRef = useRef<HTMLButtonElement>(null);
 
         const callback = useCallback(
-            (event: MouseEventHandler<HTMLButtonElement>) => {
+            () => (event: MouseEventHandler<HTMLButtonElement>) => {
                 if (toggled) {
                     if (toggleIcon.state === 'selected') {
                         toggle('', toggled.unselected ?? 'add_circle');

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { IRippleProps } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export interface IconButtonMainProps {
     icon: string;
@@ -20,5 +20,5 @@ export type ToggleButtonType = {
 };
 
 export type IconButtonProps = IconButtonMainProps &
-    IRippleProps &
+    RipplePropsForComponents<HTMLButtonElement> &
     ButtonHTMLAttributes<HTMLButtonElement>;

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

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

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

@@ -19,17 +19,10 @@ interface RippleEventHandlers {
     onTouchStart: TouchEventHandler;
 }
 
-export type InteractionEventsType = MouseEvent & TouchEvent & DragEvent & FocusEvent
+export type InteractionEventsType = MouseEvent &
-
+    TouchEvent &
-export interface InteractionEvents<T>
+    DragEvent &
-    extends MouseEvent,
+    FocusEvent;
-        TouchEvent,
-        DragEvent,
-        FocusEvent,
-        MouseEventHandler<T>,
-        DragEventHandler<T>,
-        FocusEventHandler<T>,
-        TouchEventHandler<T> {}
 
 const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
     const [mounted, setMounted] = useState<boolean>(false);

src/primitive-components/ripple/ripple-area.tsx

@@ -11,7 +11,7 @@ import React, {
 import { Ripple } from './ripple';
 import { Ripples } from './ripple';
 import { RippleAreaProps } from './ripple.types';
-import {InteractionEvents, InteractionEventsType} from './hooks/useRippleEffect';
+import { InteractionEventsType } from './hooks/useRippleEffect';
 
 const TIMEOUT: number = 550;
 const rippleAreaContext = React.createContext(false);

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

@@ -4,7 +4,7 @@ export interface RipplesProps extends HTMLAttributes<HTMLElement> {
     children?: ReactElement[];
 }
 
-export interface IRippleProps extends HTMLAttributes<HTMLElement> {
+export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
     centralRipple?: boolean;
 }