CHANGED: Types

app/components/buttons.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useCallback, useState } from 'react';
-import { Button } from '../../src/primitive-components/material-you-components';
+import { Button } from '../../src/primitive-components/components';
 
 export default function Buttons() {
     const [state, setState] = useState(1);

app/components/checkboxes.tsx

@@ -1,10 +1,7 @@
 'use client';
 
 import React from 'react';
-import {
-    Button,
-    Checkbox,
-} from '../../src/primitive-components/material-you-components';
+import { Button, Checkbox } from '../../src/primitive-components/components';
 
 export default function Checkboxes() {
     return (

app/components/fabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FAB } from '../../src/primitive-components/material-you-components';
+import { FAB } from '../../src/primitive-components/components';
 
 export default function Fabs() {
     return (

app/components/icon-buttons.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { IconButton } from '../../src/primitive-components/material-you-components';
+import { IconButton } from '../../src/primitive-components/components';
 
 function IconButtons() {
     return (

app/components/radios.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Radio } from '../../src/primitive-components/material-you-components';
+import { Radio } from '../../src/primitive-components/components';
 
 export default function Radios() {
     return (

app/components/switches.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Switch } from '../../src/primitive-components/material-you-components';
+import { Switch } from '../../src/primitive-components/components';
 
 export default function Switches() {
     return (

src/primitive-components/badge/badge.tsx

@@ -1,36 +1,33 @@
-import { BadgeProps } from './badges.types';
-import { bool, number, string } from 'prop-types';
+import { bool, string } from 'prop-types';
 import React, { forwardRef } from 'react';
+import { BadgeProps } from './badges.types';
 
-const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
-    { disableValue = false, ...props },
-    ref,
-) {
-    const digitLength = props.children
-            ? 16 + (props.children.length - 1) * 6
-            : 6,
+const Badge = forwardRef<SVGSVGElement, BadgeProps>(
+    ({ disableValue = false, children, ...props }, ref) => {
+        const digitLength = children ? 16 + (children.length - 1) * 6 : 6,
             disableValueClassName =
-            disableValue || (!props.children ?? true) ? 'disable-value' : '';
+                disableValue || (!children ?? true) ? 'disable-value' : '';
 
         return (
             <svg
                 {...props}
-            className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
+                className={`m3 m3-badge ${props.className ?? ''}${disableValueClassName}`.trimEnd()}
+                height={'16px'}
                 ref={ref}
                 width={`${digitLength}px`}
             >
-            {props.children && (
+                {children && (
                     <text x={'50%'} y={'50%'}>
-                    {props.children}
+                        {children}
                     </text>
                 )}
             </svg>
         );
-});
+    },
+);
 
 Badge.propTypes = {
-    children: number,
-    className: string,
+    children: string,
     disableValue: bool,
 };
 

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

@@ -1,20 +1,13 @@
 'use client';
 
+import { bool, string } from 'prop-types';
 import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
+import { ButtonLayoutProps } from './button-layout.types';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
-import React, {
-    forwardRef,
-    PropsWithChildren,
-    useId,
-    useRef,
-    useState,
-} from 'react';
+import React, { forwardRef, useId, useRef, useState } from 'react';
 
-const ButtonLayout = forwardRef<
-    HTMLButtonElement,
-    PropsWithChildren<any> & IRippleProps
->(function ButtonBase({ centralRipple = false, ...props }, ref) {
+export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
+    function ButtonBase({ centralRipple = false, ...props }, ref) {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             buttonId = useId(),
@@ -43,6 +36,10 @@ const ButtonLayout = forwardRef<
                 />
             </button>
         );
-});
+    },
+);
 
-export { ButtonLayout };
+ButtonLayout.propTypes = {
+    centralRipple: bool,
+    children: string,
+};

src/primitive-components/button/button.tsx

@@ -1,20 +1,16 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../material-you-components';
-import { IRippleProps } from '../ripple/ripple.types';
+import { Icon } from '../components';
+import { ButtonProps } from './button.types';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { ButtonMainProps } from '../button-layout/button.types';
 
 /**
  * Button component
  ** description
  */
 
-export const Button = forwardRef<
-    HTMLButtonElement,
-    ButtonMainProps & IRippleProps
->(
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
         { centralRipple = false, variant, disabled = false, icon, ...props },
         ref,

src/primitive-components/checkbox-layout/check-box-layout.tsx

@@ -6,13 +6,12 @@ import React, {
     useImperativeHandle,
     useRef,
 } from 'react';
+import { bool, string } from 'prop-types';
 import { CheckboxLayoutProps } from './checkbox-layout.types';
 
-export const CheckBoxLayout = forwardRef(function CheckBoxBase(
-    { indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
-    ref,
-): JSX.Element {
-    const checkboxRef = useRef<any>(null);
+export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
+    ({ indeterminate, typeInput, type, ...props }, ref) => {
+        const checkboxRef = useRef<HTMLInputElement>(null);
 
         useEffect(() => {
             checkboxRef.current.indeterminate = indeterminate === true;
@@ -35,4 +34,11 @@ export const CheckBoxLayout = forwardRef(function CheckBoxBase(
                 type={type}
             />
         );
-});
+    },
+);
+
+CheckBoxLayout.propTypes = {
+    indeterminate: bool,
+    typeInput: string,
+    type: string,
+};

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,10 +18,8 @@ import {
  ** description
  */
 
-export const Checkbox = forwardRef<
-    HTMLInputElement,
-    PropsWithChildren<any> & IRippleProps
->(({ centralRipple, ...props }, ref) => {
+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),
@@ -30,7 +28,6 @@ export const Checkbox = forwardRef<
 
         const classes =
             `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
-    const indeterminate = (props.indeterminate === true).toString();
 
         useImperativeHandle(ref, () => checkboxRef.current);
 
@@ -42,7 +39,7 @@ export const Checkbox = forwardRef<
             <label {...events} className={classes}>
                 <CheckBoxLayout
                     {...props}
-                indeterminate={indeterminate}
+                    indeterminate={props.indeterminate}
                     ref={checkboxRef}
                     type={'checkbox'}
                 />
@@ -56,4 +53,10 @@ export const Checkbox = forwardRef<
                 {props.children}
             </label>
         );
-});
+    },
+);
+
+Checkbox.propTypes = {
+    indeterminate: bool,
+    centralRipple: bool,
+};

src/primitive-components/divider/divider.tsx

@@ -1,9 +1,5 @@
-import React, { forwardRef, PropsWithChildren } from 'react';
-
-interface DividerProps extends PropsWithChildren<any> {
-    orientation?: 'vertical' | 'horizontal';
-    variant?: 'full-width' | 'inset' | 'middle-inset';
-}
+import React, { forwardRef } from 'react';
+import { DividerProps } from './divider.types';
 
 const Divider = forwardRef<HTMLHRElement, DividerProps>(
     ({ orientation, variant, ...props }, ref) => (

src/primitive-components/fab/fab.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../material-you-components';
-import { IRippleProps } from '../ripple/ripple.types';
-import { FABMainProps } from '../button-layout/button.types';
+import { Icon } from '../components';
+import { FABProps } from './fab.types';
 import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
@@ -18,7 +17,7 @@ const sizes = {
     extended: 24,
 };
 
-export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
+export const FAB = forwardRef<HTMLButtonElement, FABProps>(
     (
         {
             variant,

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

@@ -1,10 +1,8 @@
 'use client';
 
-import { Icon } from '../material-you-components';
-import { toggleIconType } from './icon-button.types';
-import { IRippleProps } from '../ripple/ripple.types';
+import { Icon } from '../components';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { IconButtonMainProps } from '../button-layout/button.types';
+import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 import {
     forwardRef,
     useCallback,
@@ -18,10 +16,7 @@ import {
  ** description
  */
 
-export const IconButton = forwardRef<
-    HTMLButtonElement,
-    IconButtonMainProps & IRippleProps
->(
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     (
         {
             icon,
@@ -34,21 +29,22 @@ export const IconButton = forwardRef<
         },
         ref,
     ) => {
-        const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
+        const [toggleIcon, setToggleIcon] = useState<StateToggleIconType>({
             state: selected == true ? 'selected' : 'unselected',
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
         const toggle = (classes: string, icon: string) => {
-            setToggleIcon(() => ({
+            setToggleIcon({
                 state: classes,
                 icon: icon,
-            }));
+            });
         };
 
         const buttonRef = useRef<HTMLButtonElement>(null);
 
-        const callback = useCallback(() => {
+        const callback = useCallback(
+            (e: MouseEvent) => {
                 if (toggled) {
                     if (toggleIcon.state === 'selected') {
                         toggle('', toggled.unselected ?? 'add_circle');
@@ -57,9 +53,11 @@ export const IconButton = forwardRef<
                     }
                 }
                 if (props.onClick) {
-                props.onClick();
+                    props.onClick.apply(null, e);
                 }
-        }, [toggleIcon]);
+            },
+            [toggleIcon],
+        );
 
         useImperativeHandle(ref, () => buttonRef.current);
 

src/primitive-components/icon/icon.tsx

@@ -1,22 +1,24 @@
 import { IconProps } from './icon.types';
-import { bool, number, string } from 'prop-types';
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
+import { number, oneOf, string } from 'prop-types';
 
-const Icon = forwardRef(function Icon(
+const Icon = forwardRef<SVGSVGElement, IconProps>(
+    (
         {
+            children = '',
             grade = 0,
             weight = 500,
             svgSize = 20,
-        fill = false,
+            fillIcon = 0,
             iconSize = 20,
             opticalSize = 24,
             type = 'outlined',
             ...props
-    }: IconProps,
-    ref: ForwardedRef<any>,
-) {
+        },
+        ref,
+    ) => {
         const fontVariation = {
-        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
+            fontVariationSettings: `'FILL' ${fillIcon}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
         };
 
         return (
@@ -33,21 +35,22 @@ const Icon = forwardRef(function Icon(
                     x={'50%'}
                     y={'50%'}
                 >
-                {props.children ?? 'add_circle'}
+                    {children ?? 'add_circle'}
                 </text>
             </svg>
         );
-});
+    },
+);
 
 Icon.propTypes = {
-    fill: bool,
-    type: string,
     grade: number,
-    weight: number,
     svgSize: number,
     iconSize: number,
     children: string,
     opticalSize: number,
+    fillIcon: oneOf([0, 1]),
+    type: oneOf(['outlined', 'rounded', 'sharp']),
+    weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
 };
 
 export { Icon };

src/primitive-components/radio/radio.tsx

@@ -1,20 +1,18 @@
 '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) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+    ({ centralRipple, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
@@ -35,4 +33,5 @@ export const Radio = forwardRef<
                 {props.children}
             </label>
         );
-});
+    },
+);

src/primitive-components/switch/switch.tsx

@@ -11,11 +11,12 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
     ({ icon, disabled, selected = false, ...props }, ref) => (
-        <div className={'m3 m3-switch-exp'} ref={ref}>
+        <div className={'m3 m3-switch-exp'}>
             <CheckBoxLayout
                 {...props}
                 className={`m3 ${props.className ?? ''}`.trimEnd()}
                 disabled={disabled}
+                ref={ref}
                 type={'checkbox'}
             />
             <svg>

src/primitive-components/text-field/text-field.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { forwardRef, useState } from 'react';
-import { bool, string } from 'prop-types';
-import { type TextFieldInterface } from './text-field.types';
+import { bool, oneOf, string } from 'prop-types';
+import React, { FocusEvent, forwardRef, useState } from 'react';
+import { TextFieldInterface } from './text-field.types';
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
     (
@@ -15,11 +15,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
         },
         ref,
     ) => {
-        const [raised, setRaised] = useState<boolean>(
-            props.placeholder ?? false,
-        );
+        const [raised, setRaised] = useState<boolean>(!props.placeholder);
 
-        const callback = (e: any): void => {
+        const callback = (e: FocusEvent<HTMLInputElement>): void => {
             if (
                 e.type === 'blur' &&
                 e.target.value.length === 0 &&
@@ -97,7 +95,7 @@ TextField.propTypes = {
     withBeforeIcon: bool,
     withAfterIcon: bool,
     className: string,
-    variant: string,
+    variant: oneOf(['filled', 'outlined']),
     placeholder: string,
     supportingText: string,
 };