ADDED: A few types for convenience

FIXED: Fixed generic types, where used type "any"

src/primitive-components/badge/badges.types.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { SVGProps } from 'react';
 
-export interface BadgeProps extends PropsWithChildren<any> {
+export interface BadgeProps extends SVGProps<SVGSVGElement> {
+    children?: string | undefined;
     disableValue?: boolean;
 }

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

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export interface ButtonLayoutProps
+    extends IRippleProps,
+        ButtonHTMLAttributes<HTMLButtonElement> {}

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

@@ -1,25 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-type ToggleButtonType = {
-    selected: string;
-    unselected: string;
-};
-
-export interface ButtonMainProps extends PropsWithChildren<any> {
-    disabled?: boolean;
-    variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
-}
-
-export interface FABMainProps extends PropsWithChildren<any> {
-    icon: string;
-    disabled?: boolean;
-    size?: 'small' | 'default' | 'large' | 'extended';
-    variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
-}
-
-export interface IconButtonMainProps extends PropsWithChildren<any> {
-    icon: string;
-    toggled?: false | ToggleButtonType;
-    disabled?: boolean;
-    variant?: 'default' | 'filled' | 'tonal' | 'outlined';
-}

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

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export interface ButtonMainProps
+    extends ButtonHTMLAttributes<HTMLButtonElement> {
+    disabled?: boolean;
+    variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
+}
+
+export interface ButtonProps extends IRippleProps, ButtonMainProps {}

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

@@ -1,6 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { InputHTMLAttributes } from 'react';
 
-export interface CheckboxLayoutProps extends PropsWithChildren<any> {
+export interface CheckboxLayoutProps
+    extends InputHTMLAttributes<HTMLInputElement> {
     indeterminate?: boolean;
     typeInput?: string;
     type?: string;

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

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export interface CheckboxProps
+    extends InputHTMLAttributes<HTMLInputElement>,
+        IRippleProps {}

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    orientation?: 'vertical' | 'horizontal';
+    variant?: 'full-width' | 'inset' | 'middle-inset';
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export interface FABMainProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    disabled?: boolean;
+    size?: 'small' | 'default' | 'large' | 'extended';
+    variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
+}
+
+export interface FABProps extends FABMainProps, IRippleProps {}

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

@@ -1,4 +1,22 @@
-export type toggleIconType = {
+import React from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export type StateToggleIconType = {
     state: string;
     icon: string;
 };
+
+export type ToggleButtonType = {
+    selected: string;
+    unselected: string;
+};
+
+export interface IconButtonMainProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    toggled?: false | ToggleButtonType;
+    disabled?: boolean;
+    variant?: 'default' | 'filled' | 'tonal' | 'outlined';
+}
+
+export interface IconButtonProps extends IconButtonMainProps, IRippleProps {}

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

@@ -1,11 +1,12 @@
-import { PropsWithChildren } from 'react';
+import { SVGProps } from 'react';
 
-export interface IconProps extends PropsWithChildren<any> {
+export interface IconProps extends SVGProps<SVGSVGElement> {
-    fill?: boolean;
     grade?: number;
     svgSize?: number;
+    fillIcon?: 0 | 1;
     iconSize?: number;
     opticalSize?: number;
+    children?: string | undefined;
     type?: 'outlined' | 'rounded' | 'sharp';
     weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
 }

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

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
+
+export interface RadioProps
+    extends InputHTMLAttributes<HTMLInputElement>,
+        IRippleProps {
+    centralRipple?: boolean;
+}

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

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { InputHTMLAttributes } from 'react';
 
-export interface SwitchMainProps extends PropsWithChildren<any> {
+export interface SwitchMainProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     icon?: boolean;
     selected?: boolean;

src/primitive-components/text-field/text-field.types.ts

@@ -1,6 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { InputHTMLAttributes } from 'react';
 
-export interface TextFieldInterface extends PropsWithChildren<any> {
+export interface TextFieldInterface
+    extends InputHTMLAttributes<HTMLInputElement> {
     variant: 'filled' | 'outlined';
     withAfterIcon?: boolean;
     withBeforeIcon?: boolean;