/**
 * Source code string shown in the Storybook Docs tab for the LoginForm story.
 *
 * Demonstrates the minimal Form + Field + useZodForm integration pattern.
 */
declare const conprehensiveFormSource = "\nimport React, { useCallback, useEffect } from 'react';\nimport { z } from 'zod';\nimport {\n\tBox,\n\tButton,\n\tText,\n\tForm,\n\tField,\n\tFieldControl,\n\tFieldLabel,\n\tFieldArray,\n\tFormGroup,\n\tSelect,\n\tSimpleInput,\n\tuseZodForm\n} from '@jtl-software/platform-ui-react';\n\ninterface IComprehensiveFormWrapperProps {}\n\n/** Zod schema \u2014 personal info, phone numbers, address, and account settings */\nconst comprehensiveFormSchema = z\n  .object({\n    firstName: z.string().min(1, 'First name is required'),\n    lastName: z.string().min(1, 'Last name is required'),\n    email: z.string().email('Please enter a valid email'),\n    phoneNumbers: z\n      .array(\n        z.object({\n          type: z.enum(['mobile', 'home', 'work']),\n          number: z.string().min(1, 'Phone number is required'),\n        }),\n      )\n      .min(1),\n    street: z.string().min(1, 'Street is required'),\n    city: z.string().min(1, 'City is required'),\n    state: z.string().min(1, 'State is required'),\n    zipCode: z.string().min(1, 'ZIP code is required'),\n    username: z.string().min(3, 'Username must be at least 3 characters'),\n    password: z.string().min(8, 'Password must be at least 8 characters'),\n    confirmPassword: z.string(),\n  })\n  .refine(data => data.password === data.confirmPassword, {\n    message: 'Passwords do not match',\n    path: ['confirmPassword'],\n  });\n\n/** Phone type options for the Select inside FieldArray */\nconst phoneTypeOptions = [\n  { value: 'mobile', label: 'Mobile' },\n  { value: 'home', label: 'Home' },\n  { value: 'work', label: 'Work' },\n];\n\n/**\n * Comprehensive form wrapper story component.\n *\n * Demonstrates:\n * - `<FormGroup>` for labeled, responsive grid sections\n * - `<FieldArray>` with min/max constraints and dynamic append/remove\n * - `<Select>` wired through `<FieldControl>`\n * - `form.watch`, `form.setValue`, `form.reset`, and `form.trigger`\n * - Cross-field Zod validation (confirmPassword)\n */\nconst ComprehensiveFormWrapper: React.FC<IComprehensiveFormWrapperProps> = () => {\n  const form = useZodForm({\n    schema: comprehensiveFormSchema,\n    defaultValues: {\n      firstName: '',\n      lastName: '',\n      email: '',\n      phoneNumbers: [{ type: 'mobile' as const, number: '' }],\n      street: '',\n      city: '',\n      state: '',\n      zipCode: '',\n      username: '',\n      password: '',\n      confirmPassword: '',\n    },\n  });\n\n  // Re-validate confirmPassword whenever password changes\n  const password = form.watch('password');\n  useEffect(() => {\n    if (form.getValues('confirmPassword')) {\n      form.trigger('confirmPassword');\n    }\n  }, [password, form]);\n\n  const watchedFirstName = form.watch('firstName');\n  const watchedEmail = form.watch('email');\n\n  /** Fill all fields with sample data to demonstrate form.setValue */\n  const fillSampleData = useCallback(() => {\n    form.setValue('firstName', 'John');\n    form.setValue('lastName', 'Doe');\n    form.setValue('email', 'john.doe@example.com');\n    form.setValue('phoneNumbers', [{ type: 'mobile', number: '+1 555-0100' }]);\n    form.setValue('street', '123 Main St');\n    form.setValue('city', 'Springfield');\n    form.setValue('state', 'IL');\n    form.setValue('zipCode', '62701');\n    form.setValue('username', 'johndoe');\n    form.setValue('password', 'Password123!');\n    form.setValue('confirmPassword', 'Password123!');\n  }, [form]);\n\n  const handleReset = useCallback(() => {\n    form.reset();\n  }, [form]);\n\n  const onSubmit = useCallback((data: z.infer<typeof comprehensiveFormSchema>) => {\n    console.log(data);\n    alert('Form submitted successfully!');\n  }, []);\n\n  return (\n    <Form form={form} onSubmit={onSubmit}>\n      {/* Live state panel \u2014 shows form.watch in action */}\n      <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)]\">\n        <Text type=\"small\">\n          First Name: <strong>{watchedFirstName || '\u2014'}</strong> | Email: <strong>{watchedEmail || '\u2014'}</strong>\n        </Text>\n      </Box>\n\n      <Box className=\"flex flex-col gap-[var(--spacing-6)]\">\n        {/* Personal Information */}\n        <FormGroup label=\"Personal Information\" columns={{ xs: 4, lg: 12 }}>\n          <Field name=\"firstName\" columnSpan={{ xs: 4, lg: 6 }}>\n            <FieldLabel required>First Name</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"John\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"lastName\" columnSpan={{ xs: 4, lg: 6 }}>\n            <FieldLabel required>Last Name</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"Doe\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"email\" columnSpan={{ xs: 4, lg: 12 }}>\n            <FieldLabel required>Email</FieldLabel>\n            <FieldControl>\n              <SimpleInput type=\"email\" placeholder=\"john@example.com\" />\n            </FieldControl>\n          </Field>\n        </FormGroup>\n\n        {/* Contact Information \u2014 FieldArray with min/max constraints */}\n        <FormGroup label=\"Contact Information\" columns={1}>\n          <FieldArray name=\"phoneNumbers\" min={1} max={3}>\n            {({ fields, append, remove }) => (\n              <Box className=\"flex flex-col gap-[var(--spacing-3)]\">\n                {fields.map((field, index) => (\n                  <Box key={field.id} className=\"flex items-end gap-[var(--spacing-3)]\">\n                    <Field name={`phoneNumbers.${index}.type`} columnSpan={{ xs: 4, lg: 4 }}>\n                      <FieldLabel>Type</FieldLabel>\n                      <FieldControl>\n                        <Select options={phoneTypeOptions} placeholder=\"Select type\" />\n                      </FieldControl>\n                    </Field>\n                    <Field name={`phoneNumbers.${index}.number`} columnSpan={{ xs: 4, lg: 6 }}>\n                      <FieldLabel>Number</FieldLabel>\n                      <FieldControl>\n                        <SimpleInput type=\"tel\" placeholder=\"+1 555-0100\" />\n                      </FieldControl>\n                    </Field>\n                    <Box className=\"pb-[var(--spacing-1)]\">\n                      <Button variant=\"ghost\" label=\"Remove\" type=\"button\" disabled={fields.length <= 1} onClick={() => remove(index)} />\n                    </Box>\n                  </Box>\n                ))}\n                <Button\n                  variant=\"outline\"\n                  label=\"+ Add Phone\"\n                  type=\"button\"\n                  disabled={fields.length >= 3}\n                  onClick={() => append({ type: 'mobile', number: '' })}\n                />\n              </Box>\n            )}\n          </FieldArray>\n        </FormGroup>\n\n        {/* Address */}\n        <FormGroup label=\"Address\" columns={{ xs: 4, lg: 12 }}>\n          <Field name=\"street\" columnSpan={{ xs: 4, lg: 12 }}>\n            <FieldLabel required>Street</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"123 Main St\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"city\" columnSpan={{ xs: 4, lg: 6 }}>\n            <FieldLabel required>City</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"Springfield\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"state\" columnSpan={{ xs: 2, lg: 3 }}>\n            <FieldLabel required>State</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"IL\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"zipCode\" columnSpan={{ xs: 2, lg: 3 }}>\n            <FieldLabel required>ZIP Code</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"62701\" />\n            </FieldControl>\n          </Field>\n        </FormGroup>\n\n        {/* Account Settings */}\n        <FormGroup label=\"Account Settings\" columns={{ xs: 4, lg: 12 }}>\n          <Field name=\"username\" columnSpan={{ xs: 4, lg: 12 }}>\n            <FieldLabel required>Username</FieldLabel>\n            <FieldControl>\n              <SimpleInput placeholder=\"johndoe\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"password\" columnSpan={{ xs: 4, lg: 6 }}>\n            <FieldLabel required>Password</FieldLabel>\n            <FieldControl>\n              <SimpleInput type=\"password\" placeholder=\"Min 8 characters\" />\n            </FieldControl>\n          </Field>\n          <Field name=\"confirmPassword\" columnSpan={{ xs: 4, lg: 6 }}>\n            <FieldLabel required>Confirm Password</FieldLabel>\n            <FieldControl>\n              <SimpleInput type=\"password\" placeholder=\"Repeat password\" />\n            </FieldControl>\n          </Field>\n        </FormGroup>\n\n        {/* Action buttons */}\n        <Box className=\"flex gap-[var(--spacing-3)]\">\n          <Button type=\"submit\" label=\"Submit\" variant=\"default\" />\n          <Button type=\"button\" label=\"Fill Sample Data\" variant=\"outline\" onClick={fillSampleData} />\n          <Button type=\"button\" label=\"Reset\" variant=\"ghost\" onClick={handleReset} />\n        </Box>\n      </Box>\n    </Form>\n  );\n};\n\nexport default ComprehensiveFormWrapper;\n\n";
export default conprehensiveFormSource;