/** Source code string shown in the Storybook Docs tab for the AllControlsShowcase story */
declare const allControlsShowcaseSource = "\nimport { z } from 'zod';\nimport {\n  Box,\n  BaseSkeleton,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  DatePicker,\n  DateRangePicker,\n  ErrorMessage,\n  Form,\n  SimpleInput,\n  InputGroup,\n  InputGroupAddon,\n  InputGroupIcon,\n  InputGroupInput,\n  InputOTP,\n  Label,\n  Link,\n  Radio,\n  Select,\n  Switch,\n  Text,\n  useZodForm,\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel\n} from '@jtl-software/platform-ui-react';\n\n/**\n * Zod schema covering every control type shown in the showcase form.\n * Each field maps to one of the supported control components.\n */\nconst allControlSchema = z\n  .object({\n    /** Standard text input */\n    email: z.string().email({ message: 'Please enter a valid email address' }),\n    /** InputGroup \u2014 prefix icon + text input */\n    username: z.string().min(3, { message: 'Username must be at least 3 characters' }),\n    /** InputOTP \u2014 6-digit one-time password */\n    otp: z.string().length(6, { message: 'OTP must be exactly 6 digits' }),\n    /** Checkbox \u2014 single boolean toggle */\n    termsAccepted: z.boolean().refine(val => val === true, { message: 'You must accept the terms' }),\n    /** CheckboxGroup \u2014 multi-select array of strings */\n    interests: z.array(z.string().nullable()).min(1, { message: 'Select at least one interest' }),\n    /**\n     * DatePicker \u2014 typed as optional so undefined is a valid default value.\n     * Required-on-submit validation is handled via superRefine below to avoid\n     * Zod narrowing the output type to Date (which would break defaultValues).\n     */\n    birthDay: z.date().optional(),\n    /** DateRangePicker \u2014 { from: Date, to?: Date } */\n    bookingRange: z.object({ from: z.date(), to: z.date().optional() }).optional(),\n    /** Radio \u2014 single string value from a radio group */\n    gender: z.string().min(1, { message: 'Please select a gender' }),\n    /** Select \u2014 single string value from a dropdown */\n    country: z.string().min(1, { message: 'Please select a country' }),\n    /** Switch \u2014 boolean toggle */\n    newsletter: z.boolean().refine(val => val === true, { message: 'You must accept the newsletter' }),\n  })\n  .superRefine((data, ctx) => {\n    // birthDay is optional in type but required on submit\n    if (!data.birthDay) {\n      ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Please select your birth date', path: ['birthDay'] });\n    }\n    if (!data.bookingRange?.from || !data.bookingRange?.to) {\n      ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Please select your booking range', path: ['bookingRange'] });\n    }\n  });\n\n/** Options for the CheckboxGroup */\nconst interestOptions = [\n  { value: 'technology', label: 'Technology' },\n  { value: 'design', label: 'Design' },\n  { value: 'marketing', label: 'Marketing' },\n];\n\n/** Options for the Select dropdown */\nconst countryOptions = [\n  { value: 'de', label: 'Germany' },\n  { value: 'at', label: 'Austria' },\n  { value: 'ch', label: 'Switzerland' },\n  { value: 'us', label: 'United States' },\n];\n\n/**\n * Showcase form demonstrating every supported control type integrated with\n * `<Field>`, `<FieldLabel>`, `<FieldControl>`, and react-hook-form.\n *\n * Integration patterns used:\n * - `<FieldControl>` \u2014 for SimpleInput, InputGroup, InputOTP, Select (string-value onChange)\n * - `render` prop \u2014 for CheckboxGroup, DatePicker, DateRangePicker, Radio, Switch\n *   (non-standard onChange signatures incompatible with cloneElement injection)\n */\nconst AllControlsShowcase = ({ isLoading = false }) => {\n  const form = useZodForm({\n    schema: allControlSchema,\n    defaultValues: {\n      email: '',\n      username: '',\n      otp: '',\n      termsAccepted: false,\n      interests: [],\n      birthDay: undefined,\n      bookingRange: undefined,\n      gender: '',\n      country: '',\n      newsletter: false,\n    },\n  });\n\n  const onSubmit = (data) => {\n    alert(JSON.stringify(data, null, 2));\n  };\n\n  return (\n    <Form form={form} onSubmit={onSubmit}>\n      <Box className=\"flex gap-[var(--spacing-6)]\">\n        <Box className=\"flex flex-col gap-[var(--spacing-6)]\">\n          {/* SimpleInput \u2014 standard text control; FieldControl injects id + RHF props */}\n          <Field name=\"email\" isLoading={isLoading}>\n            <FieldLabel required>Email Address</FieldLabel>\n            <FieldControl>\n              <SimpleInput type=\"email\" placeholder=\"you@example.com\" />\n            </FieldControl>\n            <FieldDescription>We'll never share your email</FieldDescription>\n          </Field>\n\n          {/* InputGroup \u2014 prefix icon + text input; FieldControl wires onChange */}\n          <Field name=\"username\" isLoading={isLoading}>\n            <FieldLabel required>Username</FieldLabel>\n            <FieldControl>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupIcon name=\"AtSign\" />\n                </InputGroupAddon>\n                <InputGroupInput placeholder=\"your-handle\" />\n              </InputGroup>\n            </FieldControl>\n            <FieldDescription>At least 3 characters</FieldDescription>\n          </Field>\n\n          {/* InputOTP \u2014 6-digit code; FieldControl injects value + onChange(string) */}\n          <Field name=\"otp\" isLoading={isLoading}>\n            <FieldLabel required>One-Time Password</FieldLabel>\n            <FieldControl>\n              <InputOTP maxLength={6} groupLength={3} separator />\n            </FieldControl>\n            <FieldDescription>Enter the 6-digit code from your authenticator app</FieldDescription>\n          </Field>\n\n          {/* Select \u2014 string value; FieldControl handles cloneElement injection */}\n          <Field name=\"country\" isLoading={isLoading}>\n            <FieldLabel required>Country</FieldLabel>\n            <FieldControl>\n              <Select placeholder=\"Select your country\" options={countryOptions} />\n            </FieldControl>\n          </Field>\n\n          {/* CheckboxGroup \u2014 multi-select array; render prop needed because\n              onChange receives (string | null)[] instead of a DOM event */}\n          <Field\n            name=\"interests\"\n            isLoading={isLoading}\n            render={({ field, fieldState, isLoading: loading }) => (\n              <Box className=\"flex flex-col gap-[var(--spacing-2)]\">\n                <FieldLabel required error={Boolean(fieldState?.error)}>\n                  Interests\n                </FieldLabel>\n                {loading ? (\n                  <BaseSkeleton className=\"h-[var(--spacing-20)] w-full rounded-[var(--border-radius-md)]\" />\n                ) : (\n                  <CheckboxGroup value={field?.value} onChange={val => field?.onChange(val)}>\n                    {interestOptions.map(option => (\n                      <Box className=\"flex flex-row items-center gap-[var(--spacing-2)]\" key={option.value}>\n                        <Checkbox value={option.value} id={option.value} />\n                        <Label variant=\"subtitle\" htmlFor={option.value}>\n                          {option.label}\n                        </Label>\n                      </Box>\n                    ))}\n                  </CheckboxGroup>\n                )}\n                <FieldDescription>Select all that apply</FieldDescription>\n                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}\n              </Box>\n            )}\n          />\n        </Box>\n\n        <Box className=\"flex flex-col gap-[var(--spacing-6)]\">\n          {/* Radio \u2014 single selection from a group; FieldControl handles injection */}\n          <Field name=\"gender\" isLoading={isLoading}>\n            <FieldLabel required>Gender</FieldLabel>\n            <FieldControl>\n              <Radio\n                options={[\n                  { value: 'male', label: 'Male' },\n                  { value: 'female', label: 'Female' },\n                  { value: 'other', label: 'Other' },\n                ]}\n              />\n            </FieldControl>\n          </Field>\n\n          {/* DatePicker \u2014 single Date value; FieldControl handles injection */}\n          <Field name=\"birthDay\" isLoading={isLoading}>\n            <FieldLabel htmlFor=\"birthDay\" required>\n              Date of Birth\n            </FieldLabel>\n            <FieldControl>\n              <DatePicker id=\"birthDay\" />\n            </FieldControl>\n          </Field>\n\n          {/* DateRangePicker \u2014 { from, to } range; FieldControl handles injection */}\n          <Field name=\"bookingRange\" isLoading={isLoading}>\n            <FieldLabel htmlFor=\"bookingRange\">Booking Period</FieldLabel>\n            <FieldControl>\n              <DateRangePicker id=\"bookingRange\" />\n            </FieldControl>\n            <FieldDescription>Select your check-in and check-out dates</FieldDescription>\n          </Field>\n\n          {/* Switch \u2014 boolean toggle; render prop needed because\n              onChange(boolean) does not match the standard event API */}\n          <Field\n            name=\"newsletter\"\n            isLoading={isLoading}\n            render={({ field, fieldState, isLoading: loading }) => (\n              <Box className=\"flex flex-col gap-[var(--spacing-2)]\">\n                <Box className=\"flex flex-row items-center justify-between gap-[var(--spacing-4)]\">\n                  <Box className=\"flex flex-col gap-[var(--spacing-1)]\">\n                    <FieldLabel error={Boolean(fieldState?.error)}>Newsletter</FieldLabel>\n                    <FieldDescription>Receive weekly product updates and tips</FieldDescription>\n                  </Box>\n                  {loading ? (\n                    <BaseSkeleton className=\"h-[var(--spacing-6)] w-[var(--spacing-10)] rounded-full\" />\n                  ) : (\n                    <Switch value={field?.value} onChange={val => field?.onChange(val)} />\n                  )}\n                </Box>\n                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}\n              </Box>\n            )}\n          />\n\n          {/* Checkbox \u2014 single boolean; render prop needed because Checkbox\n              onChange(checked: boolean) differs from the standard event API */}\n          <Field\n            name=\"termsAccepted\"\n            isLoading={isLoading}\n            render={({ field, fieldState, isLoading: loading }) => (\n              <Box className=\"flex flex-col gap-[var(--spacing-2)]\">\n                <Box className=\"flex flex-row items-center gap-[var(--spacing-3)]\">\n                  {loading ? (\n                    <BaseSkeleton className=\"h-[var(--spacing-5)] w-[var(--spacing-5)] rounded-[var(--border-radius-sm)]\" />\n                  ) : (\n                    <Checkbox\n                      id=\"terms\"\n                      value={Boolean(field?.value)}\n                      onChange={checked => field?.onChange(Boolean(checked))}\n                      error={Boolean(fieldState?.error)}\n                    />\n                  )}\n                  <FieldLabel htmlFor=\"terms\" error={Boolean(fieldState?.error)}>\n                    I accept the{' '}\n                    <Link url=\"#\">\n                      <Text as=\"span\" type=\"muted\">\n                        Terms and Conditions\n                      </Text>\n                    </Link>\n                  </FieldLabel>\n                </Box>\n                {fieldState?.error?.message && <ErrorMessage message={fieldState.error.message} />}\n              </Box>\n            )}\n          />\n\n          <Button type=\"submit\" label=\"Submit\" />\n        </Box>\n      </Box>\n    </Form>\n  );\n};\n";
export default allControlsShowcaseSource;