import { P as e } from "../../../../packageName-CJwD6mUt.js";
const a = `
import { z } from 'zod';
import {
  Box,
  BaseSkeleton,
  Button,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  DateRangePicker,
  ErrorMessage,
  Form,
  SimpleInput,
  InputGroup,
  InputGroupAddon,
  InputGroupIcon,
  InputGroupInput,
  InputOTP,
  Label,
  Link,
  Radio,
  Select,
  Switch,
  Text,
  useZodForm,
  Field,
  FieldControl,
  FieldDescription,
  FieldLabel
} from '${e}';

/**
 * Zod schema covering every control type shown in the showcase form.
 * Each field maps to one of the supported control components.
 */
const allControlSchema = z
  .object({
    /** Standard text input */
    email: z.string().email({ message: 'Please enter a valid email address' }),
    /** InputGroup — prefix icon + text input */
    username: z.string().min(3, { message: 'Username must be at least 3 characters' }),
    /** InputOTP — 6-digit one-time password */
    otp: z.string().length(6, { message: 'OTP must be exactly 6 digits' }),
    /** Checkbox — single boolean toggle */
    termsAccepted: z.boolean().refine(val => val === true, { message: 'You must accept the terms' }),
    /** CheckboxGroup — multi-select array of strings */
    interests: z.array(z.string().nullable()).min(1, { message: 'Select at least one interest' }),
    /**
     * DatePicker — typed as optional so undefined is a valid default value.
     * Required-on-submit validation is handled via superRefine below to avoid
     * Zod narrowing the output type to Date (which would break defaultValues).
     */
    birthDay: z.date().optional(),
    /** DateRangePicker — { from: Date, to?: Date } */
    bookingRange: z.object({ from: z.date(), to: z.date().optional() }).optional(),
    /** Radio — single string value from a radio group */
    gender: z.string().min(1, { message: 'Please select a gender' }),
    /** Select — single string value from a dropdown */
    country: z.string().min(1, { message: 'Please select a country' }),
    /** Switch — boolean toggle */
    newsletter: z.boolean().refine(val => val === true, { message: 'You must accept the newsletter' }),
  })
  .superRefine((data, ctx) => {
    // birthDay is optional in type but required on submit
    if (!data.birthDay) {
      ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Please select your birth date', path: ['birthDay'] });
    }
    if (!data.bookingRange?.from || !data.bookingRange?.to) {
      ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Please select your booking range', path: ['bookingRange'] });
    }
  });

/** Options for the CheckboxGroup */
const interestOptions = [
  { value: 'technology', label: 'Technology' },
  { value: 'design', label: 'Design' },
  { value: 'marketing', label: 'Marketing' },
];

/** Options for the Select dropdown */
const countryOptions = [
  { value: 'de', label: 'Germany' },
  { value: 'at', label: 'Austria' },
  { value: 'ch', label: 'Switzerland' },
  { value: 'us', label: 'United States' },
];

/**
 * Showcase form demonstrating every supported control type integrated with
 * \`<Field>\`, \`<FieldLabel>\`, \`<FieldControl>\`, and react-hook-form.
 *
 * Integration patterns used:
 * - \`<FieldControl>\` — for SimpleInput, InputGroup, InputOTP, Select (string-value onChange)
 * - \`render\` prop — for CheckboxGroup, DatePicker, DateRangePicker, Radio, Switch
 *   (non-standard onChange signatures incompatible with cloneElement injection)
 */
const AllControlsShowcase = ({ isLoading = false }) => {
  const form = useZodForm({
    schema: allControlSchema,
    defaultValues: {
      email: '',
      username: '',
      otp: '',
      termsAccepted: false,
      interests: [],
      birthDay: undefined,
      bookingRange: undefined,
      gender: '',
      country: '',
      newsletter: false,
    },
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <Form form={form} onSubmit={onSubmit}>
      <Box className="flex gap-[var(--spacing-6)]">
        <Box className="flex flex-col gap-[var(--spacing-6)]">
          {/* SimpleInput — standard text control; FieldControl injects id + RHF props */}
          <Field name="email" isLoading={isLoading}>
            <FieldLabel required>Email Address</FieldLabel>
            <FieldControl>
              <SimpleInput type="email" placeholder="you@example.com" />
            </FieldControl>
            <FieldDescription>We'll never share your email</FieldDescription>
          </Field>

          {/* InputGroup — prefix icon + text input; FieldControl wires onChange */}
          <Field name="username" isLoading={isLoading}>
            <FieldLabel required>Username</FieldLabel>
            <FieldControl>
              <InputGroup>
                <InputGroupAddon>
                  <InputGroupIcon name="AtSign" />
                </InputGroupAddon>
                <InputGroupInput placeholder="your-handle" />
              </InputGroup>
            </FieldControl>
            <FieldDescription>At least 3 characters</FieldDescription>
          </Field>

          {/* InputOTP — 6-digit code; FieldControl injects value + onChange(string) */}
          <Field name="otp" isLoading={isLoading}>
            <FieldLabel required>One-Time Password</FieldLabel>
            <FieldControl>
              <InputOTP maxLength={6} groupLength={3} separator />
            </FieldControl>
            <FieldDescription>Enter the 6-digit code from your authenticator app</FieldDescription>
          </Field>

          {/* Select — string value; FieldControl handles cloneElement injection */}
          <Field name="country" isLoading={isLoading}>
            <FieldLabel required>Country</FieldLabel>
            <FieldControl>
              <Select placeholder="Select your country" options={countryOptions} />
            </FieldControl>
          </Field>

          {/* CheckboxGroup — multi-select array; render prop needed because
              onChange receives (string | null)[] instead of a DOM event */}
          <Field
            name="interests"
            isLoading={isLoading}
            render={({ field, fieldState, isLoading: loading }) => (
              <Box className="flex flex-col gap-[var(--spacing-2)]">
                <FieldLabel required error={Boolean(fieldState?.error)}>
                  Interests
                </FieldLabel>
                {loading ? (
                  <BaseSkeleton className="h-[var(--spacing-20)] w-full rounded-[var(--border-radius-md)]" />
                ) : (
                  <CheckboxGroup value={field?.value} onChange={val => field?.onChange(val)}>
                    {interestOptions.map(option => (
                      <Box className="flex flex-row items-center gap-[var(--spacing-2)]" key={option.value}>
                        <Checkbox value={option.value} id={option.value} />
                        <Label variant="subtitle" htmlFor={option.value}>
                          {option.label}
                        </Label>
                      </Box>
                    ))}
                  </CheckboxGroup>
                )}
                <FieldDescription>Select all that apply</FieldDescription>
                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}
              </Box>
            )}
          />
        </Box>

        <Box className="flex flex-col gap-[var(--spacing-6)]">
          {/* Radio — single selection from a group; FieldControl handles injection */}
          <Field name="gender" isLoading={isLoading}>
            <FieldLabel required>Gender</FieldLabel>
            <FieldControl>
              <Radio
                options={[
                  { value: 'male', label: 'Male' },
                  { value: 'female', label: 'Female' },
                  { value: 'other', label: 'Other' },
                ]}
              />
            </FieldControl>
          </Field>

          {/* DatePicker — single Date value; FieldControl handles injection */}
          <Field name="birthDay" isLoading={isLoading}>
            <FieldLabel htmlFor="birthDay" required>
              Date of Birth
            </FieldLabel>
            <FieldControl>
              <DatePicker id="birthDay" />
            </FieldControl>
          </Field>

          {/* DateRangePicker — { from, to } range; FieldControl handles injection */}
          <Field name="bookingRange" isLoading={isLoading}>
            <FieldLabel htmlFor="bookingRange">Booking Period</FieldLabel>
            <FieldControl>
              <DateRangePicker id="bookingRange" />
            </FieldControl>
            <FieldDescription>Select your check-in and check-out dates</FieldDescription>
          </Field>

          {/* Switch — boolean toggle; render prop needed because
              onChange(boolean) does not match the standard event API */}
          <Field
            name="newsletter"
            isLoading={isLoading}
            render={({ field, fieldState, isLoading: loading }) => (
              <Box className="flex flex-col gap-[var(--spacing-2)]">
                <Box className="flex flex-row items-center justify-between gap-[var(--spacing-4)]">
                  <Box className="flex flex-col gap-[var(--spacing-1)]">
                    <FieldLabel error={Boolean(fieldState?.error)}>Newsletter</FieldLabel>
                    <FieldDescription>Receive weekly product updates and tips</FieldDescription>
                  </Box>
                  {loading ? (
                    <BaseSkeleton className="h-[var(--spacing-6)] w-[var(--spacing-10)] rounded-full" />
                  ) : (
                    <Switch value={field?.value} onChange={val => field?.onChange(val)} />
                  )}
                </Box>
                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}
              </Box>
            )}
          />

          {/* Checkbox — single boolean; render prop needed because Checkbox
              onChange(checked: boolean) differs from the standard event API */}
          <Field
            name="termsAccepted"
            isLoading={isLoading}
            render={({ field, fieldState, isLoading: loading }) => (
              <Box className="flex flex-col gap-[var(--spacing-2)]">
                <Box className="flex flex-row items-center gap-[var(--spacing-3)]">
                  {loading ? (
                    <BaseSkeleton className="h-[var(--spacing-5)] w-[var(--spacing-5)] rounded-[var(--border-radius-sm)]" />
                  ) : (
                    <Checkbox
                      id="terms"
                      value={Boolean(field?.value)}
                      onChange={checked => field?.onChange(Boolean(checked))}
                      error={Boolean(fieldState?.error)}
                    />
                  )}
                  <FieldLabel htmlFor="terms" error={Boolean(fieldState?.error)}>
                    I accept the{' '}
                    <Link url="#">
                      <Text as="span" type="muted">
                        Terms and Conditions
                      </Text>
                    </Link>
                  </FieldLabel>
                </Box>
                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}
              </Box>
            )}
          />

          <Button type="submit" label="Submit" />
        </Box>
      </Box>
    </Form>
  );
};
`;
export {
  a as default
};
//# sourceMappingURL=allControlsShowcaseSource.js.map
