import { P as e } from "../../../../packageName-CJwD6mUt.js";
const i = `
import { Field, FieldLabel, FieldDescription, FieldControl, Form, Input, Button, Switch, ErrorMessage, Box, useZodForm } from '${e}';
import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email({ message: 'Please enter a valid email address' }),
  password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
  enableNotifications: z.boolean().refine(val => val, {
    message: 'Please enable notifications',
  }),
});

// FieldLabel auto-gets htmlFor from context.
// FieldControl auto-injects id + RHF props into the wrapped control.
// ErrorMessage is auto-appended when validation fails.
// All sub-components work at any nesting depth via React context.
const LoginForm = () => {
  const form = useZodForm({ schema: loginSchema, defaultValues: { email: '', password: '', enableNotifications: false } });

  return (
    <Form form={form} onSubmit={console.log}>
      <Field name="email">
        <FieldLabel required>Email Address</FieldLabel>
        <FieldControl>
          <Input type="email" placeholder="you@example.com" />
        </FieldControl>
        <FieldDescription>Enter your registered email</FieldDescription>
      </Field>

      <Field name="password">
        <FieldLabel required>Password</FieldLabel>
        <FieldControl>
          <Input type="password" placeholder="Enter your password" />
        </FieldControl>
        <FieldDescription>Must be at least 8 characters</FieldDescription>
      </Field>

      <Field
        name="enableNotifications"
        render={({ field, fieldState }) => (
          <Box className="flex flex-col">
            <Box className="flex flex-row gap-[var(--spacing-2)] justify-between">
              <Box className="flex flex-col gap-[var(--spacing-2)]">
                <FieldLabel>Enable notifications</FieldLabel>
                <FieldDescription>Get updates via email</FieldDescription>
              </Box>
              <FieldControl>
                <Switch {...field} />
              </FieldControl>
            </Box>
            {fieldState?.error?.message && <ErrorMessage message={fieldState.error?.message} />}
          </Box>
        )}
      />

      <Button type="submit" label="Sign In" />
    </Form>
  );
};
`;
export {
  i as default
};
//# sourceMappingURL=withFormIntegrationSource.js.map
