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

interface IReactHookFormAPIWrapperProps {}

/**
 * Zod schema for the RHF API reference story.
 * Uses \`z.coerce.number()\` so the HTML number input string is coerced correctly.
 */
const apiReferenceSchema = z.object({
  email: z.string().email('Please enter a valid email'),
  age: z.coerce.number({ invalid_type_error: 'Age must be a number' }).min(18, 'Must be 18+').max(100, 'Must be 100 or under'),
});

const ReactHookFormAPIWrapper: React.FC<IReactHookFormAPIWrapperProps> = () => {
  const form = useZodForm({
    schema: apiReferenceSchema,
    // onChange mode gives immediate validation feedback on each keystroke
    mode: 'onChange',
    defaultValues: { email: '', age: 18 },
  });

  const watchedEmail = form.watch('email');
  const { isValid, isDirty, isSubmitted, errors } = form.formState;

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

  /** getValues() — returns current value without triggering re-render */
  const handleGetValues = useCallback(() => {
    alert(\`Current email: \${form.getValues('email') || '(empty)'}\`);
  }, [form]);

  /** setValue() — imperatively sets a field and triggers validate + dirty */
  const handleSetValue = useCallback(() => {
    form.setValue('email', 'sample@example.com', { shouldValidate: true, shouldDirty: true, shouldTouch: true });
  }, [form]);

  /** reset() — clears all fields back to defaultValues */
  const handleReset = useCallback(() => {
    form.reset();
  }, [form]);

  /** reset(values) — resets with specific values instead of defaultValues */
  const handleResetWithValues = useCallback(() => {
    form.reset({ email: 'new@example.com', age: 30 });
  }, [form]);

  /** trigger() — manually validates all fields and returns overall validity */
  const handleTrigger = useCallback(async () => {
    const isFormValid = await form.trigger();
    alert(isFormValid ? 'Form is valid!' : 'Form has errors!');
  }, [form]);

  /** clearErrors() — removes error messages without re-running validation */
  const handleClearErrors = useCallback(() => {
    form.clearErrors();
  }, [form]);

  return (
    <Form form={form} onSubmit={onSubmit}>
      <Box className="flex flex-col gap-[var(--spacing-6)]">
        {/* Form fields */}
        <Box className="flex flex-col gap-[var(--spacing-4)]">
          <Field name="email">
            <FieldLabel required>Email</FieldLabel>
            <FieldControl>
              <SimpleInput type="email" placeholder="user@example.com" />
            </FieldControl>
          </Field>
          <Field name="age">
            <FieldLabel required>Age</FieldLabel>
            <FieldControl>
              <SimpleInput type="number" placeholder="18" />
            </FieldControl>
          </Field>
        </Box>

        {/* API trigger buttons */}
        <Box className="flex flex-wrap gap-[var(--spacing-2)]">
          <Button type="button" variant="outline" label="getValues()" onClick={handleGetValues} />
          <Button type="button" variant="outline" label="setValue(email)" onClick={handleSetValue} />
          <Button type="button" variant="outline" label="reset()" onClick={handleReset} />
          <Button type="button" variant="outline" label="reset(values)" onClick={handleResetWithValues} />
          <Button type="button" variant="outline" label="trigger()" onClick={handleTrigger} />
          <Button type="button" variant="outline" label="clearErrors()" onClick={handleClearErrors} />
          <Button type="submit" variant="default" label="Submit" />
        </Box>

        {/* Live state panel */}
        <Box className="p-[var(--spacing-4)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]">
          <Text type="small">Live Form State</Text>
          <Box className="mt-[var(--spacing-2)] flex flex-col gap-[var(--spacing-1)]">
            <Text type="small">email (watched): {watchedEmail || '—'}</Text>
            <Text type="small">isValid: {String(isValid)}</Text>
            <Text type="small">isDirty: {String(isDirty)}</Text>
            <Text type="small">isSubmitted: {String(isSubmitted)}</Text>
            <Text type="small">errors: {JSON.stringify(errors)}</Text>
          </Box>
        </Box>

        {/* Static API docs panel */}
        <Box className="p-[var(--spacing-4)] rounded-[var(--border-radius-md)] border border-solid border-[var(--base-border)]">
          <Text type="small">RHF API Reference</Text>
          <Box className="mt-[var(--spacing-2)] flex flex-col gap-[var(--spacing-1)]">
            <Text type="small">
              <code>getValues(name?)</code> — Returns current value(s). Non-reactive; does not trigger re-renders.
            </Text>
            <Text type="small">
              <code>setValue(name, value, options?)</code> — Imperatively sets a field. Use <code>shouldValidate</code>, <code>shouldDirty</code>,{' '}
              <code>shouldTouch</code> to control side effects.
            </Text>
            <Text type="small">
              <code>reset(values?)</code> — Resets to defaultValues (or provided values). Clears errors and dirty/touched state.
            </Text>
            <Text type="small">
              <code>trigger(name?)</code> — Manually triggers validation. Returns <code>Promise&lt;boolean&gt;</code>.
            </Text>
            <Text type="small">
              <code>clearErrors(name?)</code> — Removes errors without re-running validation rules.
            </Text>
          </Box>
        </Box>
      </Box>
    </Form>
  );
};

export default ReactHookFormAPIWrapper;

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