From ab4ae3701511a3b27210a74fd41616f930281e44 Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Thu, 1 Feb 2024 16:23:59 +0400
Subject: [PATCH] CHANGED: Types

---
 app/components/buttons.tsx                    |  2 +-
 app/components/checkboxes.tsx                 |  5 +-
 app/components/fabs.tsx                       |  2 +-
 app/components/icon-buttons.tsx               |  2 +-
 app/components/radios.tsx                     |  2 +-
 app/components/switches.tsx                   |  2 +-
 src/primitive-components/badge/badge.tsx      | 53 ++++++------
 .../button-layout/button-layout.tsx           | 75 +++++++++--------
 src/primitive-components/button/button.tsx    | 10 +--
 .../checkbox-layout/check-box-layout.tsx      | 52 ++++++------
 .../checkbox/checkbox.tsx                     | 77 +++++++++---------
 ...rial-you-components.tsx => components.tsx} |  0
 src/primitive-components/divider/divider.tsx  |  8 +-
 src/primitive-components/fab/fab.tsx          |  7 +-
 .../icon-button/icon-button.tsx               | 42 +++++-----
 src/primitive-components/icon/icon.tsx        | 81 ++++++++++---------
 src/primitive-components/radio/radio.tsx      | 49 ++++++-----
 src/primitive-components/switch/switch.tsx    |  3 +-
 .../text-field/text-field.tsx                 | 14 ++--
 19 files changed, 238 insertions(+), 248 deletions(-)
 rename src/primitive-components/{material-you-components.tsx => components.tsx} (100%)

diff --git a/app/components/buttons.tsx b/app/components/buttons.tsx
index 3413007..e9afb08 100644
--- a/app/components/buttons.tsx
+++ b/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);
diff --git a/app/components/checkboxes.tsx b/app/components/checkboxes.tsx
index 16af3e2..f1f1981 100644
--- a/app/components/checkboxes.tsx
+++ b/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 (
diff --git a/app/components/fabs.tsx b/app/components/fabs.tsx
index 4b8cd9d..0e1b893 100644
--- a/app/components/fabs.tsx
+++ b/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 (
diff --git a/app/components/icon-buttons.tsx b/app/components/icon-buttons.tsx
index 90eb275..9693d93 100644
--- a/app/components/icon-buttons.tsx
+++ b/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 (
diff --git a/app/components/radios.tsx b/app/components/radios.tsx
index 1439e15..17854c4 100644
--- a/app/components/radios.tsx
+++ b/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 (
diff --git a/app/components/switches.tsx b/app/components/switches.tsx
index bbdf4be..5c885a7 100644
--- a/app/components/switches.tsx
+++ b/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 (
diff --git a/src/primitive-components/badge/badge.tsx b/src/primitive-components/badge/badge.tsx
index 38653be..23fc0ca 100644
--- a/src/primitive-components/badge/badge.tsx
+++ b/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,
-        disableValueClassName =
-            disableValue || (!props.children ?? true) ? 'disable-value' : '';
+const Badge = forwardRef<SVGSVGElement, BadgeProps>(
+    ({ disableValue = false, children, ...props }, ref) => {
+        const digitLength = children ? 16 + (children.length - 1) * 6 : 6,
+            disableValueClassName =
+                disableValue || (!children ?? true) ? 'disable-value' : '';
 
-    return (
-        <svg
-            {...props}
-            className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
-            ref={ref}
-            width={`${digitLength}px`}
-        >
-            {props.children && (
-                <text x={'50%'} y={'50%'}>
-                    {props.children}
-                </text>
-            )}
-        </svg>
-    );
-});
+        return (
+            <svg
+                {...props}
+                className={`m3 m3-badge ${props.className ?? ''}${disableValueClassName}`.trimEnd()}
+                height={'16px'}
+                ref={ref}
+                width={`${digitLength}px`}
+            >
+                {children && (
+                    <text x={'50%'} y={'50%'}>
+                        {children}
+                    </text>
+                )}
+            </svg>
+        );
+    },
+);
 
 Badge.propTypes = {
-    children: number,
-    className: string,
+    children: string,
     disableValue: bool,
 };
 
diff --git a/src/primitive-components/button-layout/button-layout.tsx b/src/primitive-components/button-layout/button-layout.tsx
index 4fe0601..1fa4222 100644
--- a/src/primitive-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-layout/button-layout.tsx
@@ -1,48 +1,45 @@
 '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) {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        ripplesRef = useRef(null),
-        buttonId = useId(),
-        events = useRippleEffect(ripplesRef, setIsActive);
+export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
+    function ButtonBase({ centralRipple = false, ...props }, ref) {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            ripplesRef = useRef(null),
+            buttonId = useId(),
+            events = useRippleEffect(ripplesRef, setIsActive);
 
-    const { variant, disabled, className } = props;
+        const { variant, disabled, className } = props;
 
-    const classes = className
-        ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
-        : `m3 ${variant}${isActive ? ' is-active' : ''}`;
+        const classes = className
+            ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
+            : `m3 ${variant}${isActive ? ' is-active' : ''}`;
 
-    return (
-        <button
-            {...props}
-            {...events}
-            className={classes}
-            disabled={disabled}
-            id={buttonId}
-            ref={ref}
-        >
-            {props.children}
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                ref={ripplesRef}
-            />
-        </button>
-    );
-});
+        return (
+            <button
+                {...props}
+                {...events}
+                className={classes}
+                disabled={disabled}
+                id={buttonId}
+                ref={ref}
+            >
+                {props.children}
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    ref={ripplesRef}
+                />
+            </button>
+        );
+    },
+);
 
-export { ButtonLayout };
+ButtonLayout.propTypes = {
+    centralRipple: bool,
+    children: string,
+};
diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button/button.tsx
index 79d3ab0..330dbc6 100644
--- a/src/primitive-components/button/button.tsx
+++ b/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,
diff --git a/src/primitive-components/checkbox-layout/check-box-layout.tsx b/src/primitive-components/checkbox-layout/check-box-layout.tsx
index 9dec1ae..fe88f83 100644
--- a/src/primitive-components/checkbox-layout/check-box-layout.tsx
+++ b/src/primitive-components/checkbox-layout/check-box-layout.tsx
@@ -6,33 +6,39 @@ 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;
-    }, []);
+        useEffect(() => {
+            checkboxRef.current.indeterminate = indeterminate === true;
+        }, []);
 
-    useImperativeHandle(ref, () => checkboxRef.current);
+        useImperativeHandle(ref, () => checkboxRef.current);
 
-    const classesType = typeInput || type;
+        const classesType = typeInput || type;
 
-    const classes =
-        props.className !== undefined
-            ? `m3 m3-${type} ${props.className}`
-            : `m3 m3-${classesType}`;
+        const classes =
+            props.className !== undefined
+                ? `m3 m3-${type} ${props.className}`
+                : `m3 m3-${classesType}`;
 
-    return (
-        <input
-            ref={checkboxRef}
-            {...props}
-            className={classes.trimEnd()}
-            type={type}
-        />
-    );
-});
+        return (
+            <input
+                ref={checkboxRef}
+                {...props}
+                className={classes.trimEnd()}
+                type={type}
+            />
+        );
+    },
+);
+
+CheckBoxLayout.propTypes = {
+    indeterminate: bool,
+    typeInput: string,
+    type: string,
+};
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx
index e172e69..616ac90 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/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,
+};
diff --git a/src/primitive-components/material-you-components.tsx b/src/primitive-components/components.tsx
similarity index 100%
rename from src/primitive-components/material-you-components.tsx
rename to src/primitive-components/components.tsx
diff --git a/src/primitive-components/divider/divider.tsx b/src/primitive-components/divider/divider.tsx
index 8213a4c..813ba04 100644
--- a/src/primitive-components/divider/divider.tsx
+++ b/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) => (
diff --git a/src/primitive-components/fab/fab.tsx b/src/primitive-components/fab/fab.tsx
index 8873b2d..539dd52 100644
--- a/src/primitive-components/fab/fab.tsx
+++ b/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,
diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx
index 1e2be5e..79c7095 100644
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/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,32 +29,35 @@ 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(() => {
-            if (toggled) {
-                if (toggleIcon.state === 'selected') {
-                    toggle('', toggled.unselected ?? 'add_circle');
-                } else {
-                    toggle('selected', toggled.selected ?? 'add_circle');
+        const callback = useCallback(
+            (e: MouseEvent) => {
+                if (toggled) {
+                    if (toggleIcon.state === 'selected') {
+                        toggle('', toggled.unselected ?? 'add_circle');
+                    } else {
+                        toggle('selected', toggled.selected ?? 'add_circle');
+                    }
                 }
-            }
-            if (props.onClick) {
-                props.onClick();
-            }
-        }, [toggleIcon]);
+                if (props.onClick) {
+                    props.onClick.apply(null, e);
+                }
+            },
+            [toggleIcon],
+        );
 
         useImperativeHandle(ref, () => buttonRef.current);
 
diff --git a/src/primitive-components/icon/icon.tsx b/src/primitive-components/icon/icon.tsx
index dcf075c..fb3063c 100644
--- a/src/primitive-components/icon/icon.tsx
+++ b/src/primitive-components/icon/icon.tsx
@@ -1,53 +1,56 @@
 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(
-    {
-        grade = 0,
-        weight = 500,
-        svgSize = 20,
-        fill = false,
-        iconSize = 20,
-        opticalSize = 24,
-        type = 'outlined',
-        ...props
-    }: IconProps,
-    ref: ForwardedRef<any>,
-) {
-    const fontVariation = {
-        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
-    };
+const Icon = forwardRef<SVGSVGElement, IconProps>(
+    (
+        {
+            children = '',
+            grade = 0,
+            weight = 500,
+            svgSize = 20,
+            fillIcon = 0,
+            iconSize = 20,
+            opticalSize = 24,
+            type = 'outlined',
+            ...props
+        },
+        ref,
+    ) => {
+        const fontVariation = {
+            fontVariationSettings: `'FILL' ${fillIcon}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
+        };
 
-    return (
-        <svg
-            {...props}
-            className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
-            height={svgSize}
-            ref={ref}
-            width={svgSize}
-        >
-            <text
-                className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
-                style={fontVariation}
-                x={'50%'}
-                y={'50%'}
+        return (
+            <svg
+                {...props}
+                className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
+                height={svgSize}
+                ref={ref}
+                width={svgSize}
             >
-                {props.children ?? 'add_circle'}
-            </text>
-        </svg>
-    );
-});
+                <text
+                    className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
+                    style={fontVariation}
+                    x={'50%'}
+                    y={'50%'}
+                >
+                    {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 };
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index 2635e0a..c6b662f 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/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>
+        );
+    },
+);
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/switch/switch.tsx
index c520b03..6c0e907 100644
--- a/src/primitive-components/switch/switch.tsx
+++ b/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>
diff --git a/src/primitive-components/text-field/text-field.tsx b/src/primitive-components/text-field/text-field.tsx
index b4604c7..67174df 100644
--- a/src/primitive-components/text-field/text-field.tsx
+++ b/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,
 };