import { P as e } from "../../../../packageName-CJwD6mUt.js";
const r = `
import {
  Form,
  Field,
  FieldLabel,
  FieldControl,
  useZodForm,
  SimpleInput,
  Button,
  Box,
  Text
} from '${e}';
import { z } from 'zod';

const registrationFormSchema = z
  .object({
    username: z.string().min(3, { message: 'Username must be at least 3 characters' }),
    email: z.string().email({ message: 'Please enter a valid email address' }),
    password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
    confirmPassword: z.string(),
    avatar: z.instanceof(File).optional(),
  })
  .refine(data => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
    path: ['confirmPassword'],
  });

const RegistrationForm: React.FC = () => {
  const form = useZodForm({
    schema: registrationFormSchema,
    defaultValues: { username: '', email: '', password: '', confirmPassword: '' },
  });

  const onSubmit = (data: z.infer<typeof registrationFormSchema>) => {
    console.log(data);
  };

  return (
    <Form form={form} onSubmit={onSubmit}>
      <Box className="flex flex-col gap-4">
        <Field name="username">
          <FieldLabel required>Username</FieldLabel>
          <FieldControl>
            <SimpleInput placeholder="Enter your username" />
          </FieldControl>
        </Field>

        <Field name="email">
          <FieldLabel required>Email</FieldLabel>
          <FieldControl>
            <SimpleInput type="email" placeholder="Enter your email" />
          </FieldControl>
        </Field>

        <Field name="password">
          <FieldLabel required>Password</FieldLabel>
          <FieldControl>
            <SimpleInput type="password" placeholder="Enter your password" />
          </FieldControl>
        </Field>

        <Field name="confirmPassword">
          <FieldLabel required>Confirm Password</FieldLabel>
          <FieldControl>
            <SimpleInput type="password" placeholder="Confirm your password" />
          </FieldControl>
        </Field>

        <Field name="avatar">
          <FieldLabel>Avatar</FieldLabel>
          <FieldControl>
            <SimpleInput type="file" />
          </FieldControl>
        </Field>

        <Button type="submit" label="Register" />
      </Box>
    </Form>
  );
};
`;
export {
  r as default
};
//# sourceMappingURL=registrationFormSource.js.map
