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

interface IFormContextWrapperProps {}

/** Zod schema for the address form used in the useFormContext pattern story */
const addressFormSchema = z.object({
  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'),
});

const AddressFieldsWithContext = () => {
  const { watch } = useFormContext<z.infer<typeof addressFormSchema>>();
  const currentCity = watch('city');

  return (
    <Box className="flex flex-col gap-[var(--spacing-4)]">
      {/* Live city display — updates as user types */}
      <Box className="p-[var(--spacing-3)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]">
        <Text type="small">
          Current city: <strong>{currentCity || '—'}</strong>
        </Text>
      </Box>

      <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>
    </Box>
  );
};

const FormContextWrapper: React.FC<IFormContextWrapperProps> = () => {
  const form = useZodForm({
    schema: addressFormSchema,
    defaultValues: { street: '', city: '', state: '', zipCode: '' },
  });

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

  return (
    <Form form={form} onSubmit={onSubmit}>
      <Box className="flex flex-col gap-[var(--spacing-4)]">
        <AddressFieldsWithContext />
        <Button type="submit" label="Submit Address" variant="default" />
      </Box>
    </Form>
  );
};

export default FormContextWrapper;

`;
export {
  t as default
};
//# sourceMappingURL=formContextWrapperSource.js.map
