CHANGED: Types

src/primitive-components/checkbox/checkbox.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import { bool } from 'prop-types';
+import { CheckboxProps } from './checkbox.types';
 import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 import {
     forwardRef,
-    PropsWithChildren,
     useEffect,
     useImperativeHandle,
     useRef,
@@ -18,42 +18,45 @@ import {
  ** description
  */
 
-export const Checkbox = forwardRef<
-    HTMLInputElement,
-    PropsWithChildren<any> & IRippleProps
->(({ centralRipple, ...props }, ref) => {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        [checked, setChecked] = useState<boolean>(props.checked ?? false),
-        ripplesRef = useRef(null),
-        checkboxRef = useRef(null),
-        events = useRippleEffect(ripplesRef, setIsActive);
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    ({ centralRipple, ...props }, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            [checked, setChecked] = useState<boolean>(props.checked ?? false),
+            ripplesRef = useRef(null),
+            checkboxRef = useRef(null),
+            events = useRippleEffect(ripplesRef, setIsActive);
 
-    const classes =
-        `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
-    const indeterminate = (props.indeterminate === true).toString();
+        const classes =
+            `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
 
-    useImperativeHandle(ref, () => checkboxRef.current);
+        useImperativeHandle(ref, () => checkboxRef.current);
 
-    useEffect(() => {
-        setChecked(!checked);
-    }, [checkboxRef.current?.checked]);
+        useEffect(() => {
+            setChecked(!checked);
+        }, [checkboxRef.current?.checked]);
 
-    return (
-        <label {...events} className={classes}>
-            <CheckBoxLayout
-                {...props}
-                indeterminate={indeterminate}
-                ref={checkboxRef}
-                type={'checkbox'}
-            />
-            <span className={'m3 m3-checkbox-state-layer'} />
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                className={'m3-checkbox-ripple-layer'}
-                ref={ripplesRef}
-            />
-            {props.children}
-        </label>
-    );
-});
+        return (
+            <label {...events} className={classes}>
+                <CheckBoxLayout
+                    {...props}
+                    indeterminate={props.indeterminate}
+                    ref={checkboxRef}
+                    type={'checkbox'}
+                />
+                <span className={'m3 m3-checkbox-state-layer'} />
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                />
+                {props.children}
+            </label>
+        );
+    },
+);
+
+Checkbox.propTypes = {
+    indeterminate: bool,
+    centralRipple: bool,
+};