import { P as e } from "../../../../packageName-CJwD6mUt.js";
const l = `
import React, { useCallback, useEffect } from 'react';
import { z } from 'zod';
import {
	Box,
	Button,
	Text,
	Form,
	Field,
	FieldControl,
	FieldLabel,
	FieldArray,
	FormGroup,
	Select,
	SimpleInput,
	useZodForm
} from '${e}';

interface IComprehensiveFormWrapperProps {}

/** Zod schema — personal info, phone numbers, address, and account settings */
const comprehensiveFormSchema = z
  .object({
    firstName: z.string().min(1, 'First name is required'),
    lastName: z.string().min(1, 'Last name is required'),
    email: z.string().email('Please enter a valid email'),
    phoneNumbers: z
      .array(
        z.object({
          type: z.enum(['mobile', 'home', 'work']),
          number: z.string().min(1, 'Phone number is required'),
        }),
      )
      .min(1),
    street: z.string().min(1, 'Street is required'),
    city: z.string().min(1, 'City is required'),
    state: z.string().min(1, 'State is required'),
    zipCode: z.string().min(1, 'ZIP code is required'),
    username: z.string().min(3, 'Username must be at least 3 characters'),
    password: z.string().min(8, 'Password must be at least 8 characters'),
    confirmPassword: z.string(),
  })
  .refine(data => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
    path: ['confirmPassword'],
  });

/** Phone type options for the Select inside FieldArray */
const phoneTypeOptions = [
  { value: 'mobile', label: 'Mobile' },
  { value: 'home', label: 'Home' },
  { value: 'work', label: 'Work' },
];

/**
 * Comprehensive form wrapper story component.
 *
 * Demonstrates:
 * - \`<FormGroup>\` for labeled, responsive grid sections
 * - \`<FieldArray>\` with min/max constraints and dynamic append/remove
 * - \`<Select>\` wired through \`<FieldControl>\`
 * - \`form.watch\`, \`form.setValue\`, \`form.reset\`, and \`form.trigger\`
 * - Cross-field Zod validation (confirmPassword)
 */
const ComprehensiveFormWrapper: React.FC<IComprehensiveFormWrapperProps> = () => {
  const form = useZodForm({
    schema: comprehensiveFormSchema,
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      phoneNumbers: [{ type: 'mobile' as const, number: '' }],
      street: '',
      city: '',
      state: '',
      zipCode: '',
      username: '',
      password: '',
      confirmPassword: '',
    },
  });

  // Re-validate confirmPassword whenever password changes
  const password = form.watch('password');
  useEffect(() => {
    if (form.getValues('confirmPassword')) {
      form.trigger('confirmPassword');
    }
  }, [password, form]);

  const watchedFirstName = form.watch('firstName');
  const watchedEmail = form.watch('email');

  /** Fill all fields with sample data to demonstrate form.setValue */
  const fillSampleData = useCallback(() => {
    form.setValue('firstName', 'John');
    form.setValue('lastName', 'Doe');
    form.setValue('email', 'john.doe@example.com');
    form.setValue('phoneNumbers', [{ type: 'mobile', number: '+1 555-0100' }]);
    form.setValue('street', '123 Main St');
    form.setValue('city', 'Springfield');
    form.setValue('state', 'IL');
    form.setValue('zipCode', '62701');
    form.setValue('username', 'johndoe');
    form.setValue('password', 'Password123!');
    form.setValue('confirmPassword', 'Password123!');
  }, [form]);

  const handleReset = useCallback(() => {
    form.reset();
  }, [form]);

  const onSubmit = useCallback((data: z.infer<typeof comprehensiveFormSchema>) => {
    console.log(data);
    alert('Form submitted successfully!');
  }, []);

  return (
    <Form form={form} onSubmit={onSubmit}>
      {/* Live state panel — shows form.watch in action */}
      <Box className="mb-[var(--spacing-4)] p-[var(--spacing-3)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]">
        <Text type="small">
          First Name: <strong>{watchedFirstName || '—'}</strong> | Email: <strong>{watchedEmail || '—'}</strong>
        </Text>
      </Box>

      <Box className="flex flex-col gap-[var(--spacing-6)]">
        {/* Personal Information */}
        <FormGroup label="Personal Information" columns={{ xs: 4, lg: 12 }}>
          <Field name="firstName" columnSpan={{ xs: 4, lg: 6 }}>
            <FieldLabel required>First Name</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="John" />
            </FieldControl>
          </Field>
          <Field name="lastName" columnSpan={{ xs: 4, lg: 6 }}>
            <FieldLabel required>Last Name</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="Doe" />
            </FieldControl>
          </Field>
          <Field name="email" columnSpan={{ xs: 4, lg: 12 }}>
            <FieldLabel required>Email</FieldLabel>
            <FieldControl>
              <SimpleInput type="email" placeholder="john@example.com" />
            </FieldControl>
          </Field>
        </FormGroup>

        {/* Contact Information — FieldArray with min/max constraints */}
        <FormGroup label="Contact Information" columns={1}>
          <FieldArray name="phoneNumbers" min={1} max={3}>
            {({ fields, append, remove }) => (
              <Box className="flex flex-col gap-[var(--spacing-3)]">
                {fields.map((field, index) => (
                  <Box key={field.id} className="flex items-end gap-[var(--spacing-3)]">
                    <Field name={\`phoneNumbers.\${index}.type\`} columnSpan={{ xs: 4, lg: 4 }}>
                      <FieldLabel>Type</FieldLabel>
                      <FieldControl>
                        <Select options={phoneTypeOptions} placeholder="Select type" />
                      </FieldControl>
                    </Field>
                    <Field name={\`phoneNumbers.\${index}.number\`} columnSpan={{ xs: 4, lg: 6 }}>
                      <FieldLabel>Number</FieldLabel>
                      <FieldControl>
                        <SimpleInput type="tel" placeholder="+1 555-0100" />
                      </FieldControl>
                    </Field>
                    <Box className="pb-[var(--spacing-1)]">
                      <Button variant="ghost" label="Remove" type="button" disabled={fields.length <= 1} onClick={() => remove(index)} />
                    </Box>
                  </Box>
                ))}
                <Button
                  variant="outline"
                  label="+ Add Phone"
                  type="button"
                  disabled={fields.length >= 3}
                  onClick={() => append({ type: 'mobile', number: '' })}
                />
              </Box>
            )}
          </FieldArray>
        </FormGroup>

        {/* Address */}
        <FormGroup label="Address" columns={{ xs: 4, lg: 12 }}>
          <Field name="street" columnSpan={{ xs: 4, lg: 12 }}>
            <FieldLabel required>Street</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="123 Main St" />
            </FieldControl>
          </Field>
          <Field name="city" columnSpan={{ xs: 4, lg: 6 }}>
            <FieldLabel required>City</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="Springfield" />
            </FieldControl>
          </Field>
          <Field name="state" columnSpan={{ xs: 2, lg: 3 }}>
            <FieldLabel required>State</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="IL" />
            </FieldControl>
          </Field>
          <Field name="zipCode" columnSpan={{ xs: 2, lg: 3 }}>
            <FieldLabel required>ZIP Code</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="62701" />
            </FieldControl>
          </Field>
        </FormGroup>

        {/* Account Settings */}
        <FormGroup label="Account Settings" columns={{ xs: 4, lg: 12 }}>
          <Field name="username" columnSpan={{ xs: 4, lg: 12 }}>
            <FieldLabel required>Username</FieldLabel>
            <FieldControl>
              <SimpleInput placeholder="johndoe" />
            </FieldControl>
          </Field>
          <Field name="password" columnSpan={{ xs: 4, lg: 6 }}>
            <FieldLabel required>Password</FieldLabel>
            <FieldControl>
              <SimpleInput type="password" placeholder="Min 8 characters" />
            </FieldControl>
          </Field>
          <Field name="confirmPassword" columnSpan={{ xs: 4, lg: 6 }}>
            <FieldLabel required>Confirm Password</FieldLabel>
            <FieldControl>
              <SimpleInput type="password" placeholder="Repeat password" />
            </FieldControl>
          </Field>
        </FormGroup>

        {/* Action buttons */}
        <Box className="flex gap-[var(--spacing-3)]">
          <Button type="submit" label="Submit" variant="default" />
          <Button type="button" label="Fill Sample Data" variant="outline" onClick={fillSampleData} />
          <Button type="button" label="Reset" variant="ghost" onClick={handleReset} />
        </Box>
      </Box>
    </Form>
  );
};

export default ComprehensiveFormWrapper;

`;
export {
  l as default
};
//# sourceMappingURL=conprehensiveFormSource.js.map
