+
,
+ document.body,
+ );
+};
diff --git a/src/components/UncontrolledForm.tsx b/src/components/UncontrolledForm.tsx
new file mode 100644
index 0000000..733a515
--- /dev/null
+++ b/src/components/UncontrolledForm.tsx
@@ -0,0 +1,85 @@
+import { useRef, useState } from 'react';
+import { FORM_FIELDS } from '@/shared/constants/formFields';
+import { useFormStore } from '@/shared/store/useFormStore';
+import { Button } from '@/shared/ui/Button';
+import { CheckboxWithLabel } from '@/shared/ui/CheckboxWithLabel';
+import { GenderField } from '@/shared/ui/GenderField';
+import { InputWithLabel } from '@/shared/ui/InputWithLabel';
+import { formSchema, type FormData } from '@/shared/validation/schema';
+
+export const UncontrolledForm = ({ onClose }: { onClose: () => void }) => {
+ const formRef = useRef
+ {children}
+
+
+
+);
diff --git a/src/shared/ui/GenderField.tsx b/src/shared/ui/GenderField.tsx
new file mode 100644
index 0000000..f6258ea
--- /dev/null
+++ b/src/shared/ui/GenderField.tsx
@@ -0,0 +1,32 @@
+import { Input } from '@/shared/ui/Input';
+import { Label } from '@/shared/ui/Label';
+
+type Gender = 'male' | 'female';
+
+type Props = {
+ value: string;
+ onChange: (value: Gender) => void;
+};
+
+export const GenderField = ({ value, onChange }: Props) => (
+
+
+
+
+
+ {error &&
+ {error}
} +
+
+ {['male', 'female'].map((gender) => {
+ const inputId = `gender-${gender}`;
+ return (
+
+);
diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx
new file mode 100644
index 0000000..e8c67ca
--- /dev/null
+++ b/src/shared/ui/Input.tsx
@@ -0,0 +1,17 @@
+type InputProps = {
+ className?: string;
+} & React.InputHTMLAttributes
+ onChange(gender as Gender)}
+ />
+
+
+ );
+ })}
+
+
+);
diff --git a/src/shared/ui/Label.tsx b/src/shared/ui/Label.tsx
new file mode 100644
index 0000000..ef81315
--- /dev/null
+++ b/src/shared/ui/Label.tsx
@@ -0,0 +1,11 @@
+type LabelProps = {
+ htmlFor?: string;
+ className?: string;
+ children: React.ReactNode;
+};
+
+export const Label = ({ htmlFor, className = '', children }: LabelProps) => (
+
+);
diff --git a/src/shared/ui/Tile.tsx b/src/shared/ui/Tile.tsx
new file mode 100644
index 0000000..0d19f76
--- /dev/null
+++ b/src/shared/ui/Tile.tsx
@@ -0,0 +1,26 @@
+import type { FormData } from '@/shared/validation/schema.ts';
+
+export const Tile = ({ data, isNew }: { data: FormData; isNew: boolean }) => {
+ return (
+
+
+
+
+
+ {error &&
+ {error}
} +
+ 
}
+
+ );
+};
diff --git a/src/shared/validation/schema.ts b/src/shared/validation/schema.ts
new file mode 100644
index 0000000..86e352f
--- /dev/null
+++ b/src/shared/validation/schema.ts
@@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).+$/;
+
+export const formSchema = z
+ .object({
+ name: z
+ .string()
+ .min(1, 'Name is required')
+ .regex(/^[A-Z]/, 'Name must start with uppercase letter'),
+ age: z.number().int().positive('Age must be a positive number'),
+ email: z.email('Invalid email'),
+ password: z
+ .string()
+ .min(8, 'Password must be at least 8 characters')
+ .regex(passwordRegex, 'Password too weak'),
+ confirmPassword: z.string(),
+ gender: z.enum(['male', 'female']),
+ accept: z
+ .boolean()
+ .refine((val) => val, 'You must accept Terms and Conditions'),
+ image: z.string().optional(),
+ country: z.string().min(1, 'Country is required'),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ message: "Passwords don't match",
+ path: ['confirmPassword'],
+ });
+
+export type FormData = z.infer+ Name: {data.name} +
++ Age: {data.age} +
++ Gender: {data.gender} +
++ Email: {data.email} +
++ Country: {data.country} +
+ {data.image &&