feat: Added react version of M3TextField

Author: magomedov_gusein

m3-react/src/components/text-field/M3TextField.tsx

@@ -0,0 +1,51 @@
+import React, {HTMLAttributes} from 'react'
+
+import makeId from '@/utils/id'
+import { toClassName } from '@/utils/styling'
+
+export interface M3TextFieldProps extends HTMLAttributes<HTMLElement> {
+  id: string;
+  type: string;
+  value: string|number;
+  label: string;
+  placeholder: string;
+  lazy: boolean;
+  multiline: boolean;
+  invalid: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  outlined: boolean;
+}
+
+const M3TextField: React.FC<M3TextFieldProps> = ({
+    id = makeId('m3-text-field'),
+    type = 'text',
+    value = '',
+    label = '',
+    placeholder = '',
+    lazy = false,
+    multiline = false,
+    invalid = false,
+    disabled = false,
+    readonly = false,
+    outlined = false,
+    className = '',
+}) => (
+    <div
+        className={toClassName([className, {
+            'm3-text-field': true,
+            'm3-text-field_outlined': outlined,
+            // 'm3-text-field_has-leading': 'leading-icon' in $slots,
+            // 'm3-text-field_has-trailing': 'trailing-icon' in $slots,
+            // 'm3-text-field_filled': ('' + value).length,
+            // 'm3-text-field_focused': focused,
+            'm3-text-field_invalid': invalid,
+            'm3-text-field_disabled': disabled,
+            'm3-text-field_readonly': readonly,
+        }])}
+    >
+        
+    </div>
+)
+
+export default M3TextField