CHANGED: Types

src/primitive-components/radio/radio.tsx

@@ -1,38 +1,37 @@
 'use client';
 
+import { RadioProps } from './radio.types';
 import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
+import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
 
 /**
  * Radio component
  ** description
  */
 
-export const Radio = forwardRef<
-    HTMLInputElement,
-    PropsWithChildren<HTMLElement> & IRippleProps
->(({ centralRipple, ...props }, ref) => {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        ripplesRef = useRef(null),
-        events = useRippleEffect(ripplesRef, setIsActive);
+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-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+        const classes =
+            `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
 
-    return (
-        <label {...events} className={classes}>
-            <CheckBoxLayout {...props} ref={ref} type={'radio'} />
-            <span className={'m3 m3-radio-state-layer'} />
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                className={'m3-checkbox-ripple-layer'}
-                ref={ripplesRef}
-            />
-            {props.children}
-        </label>
-    );
-});
+        return (
+            <label {...events} className={classes}>
+                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                <span className={'m3 m3-radio-state-layer'} />
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                />
+                {props.children}
+            </label>
+        );
+    },
+);