import { P as e } from "../../../../packageName-CJwD6mUt.js";
const o = `
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { z } from 'zod';
import {
  Box,
  Button,
  Text,
  Input,
  Field,
  FieldLabel,
  FieldControl,
  FieldDescription,
  Form,
  useZodForm,
  Radio,
  Select,
  Checkbox,
  Alert,
  Icon,
  StepperLayout,
  useStepperLayoutState,
} from '${e}';
 import type { StepConfig, StepHandle } from '${e}';

// ─── ERP Onboarding Wizard helpers ────────────────────────────────────────

/** Step definitions for the 5-step onboarding wizard with content headers */
const onboardingSteps: StepConfig[] = [
  {
    title: 'Welcome',
    contentHeader: {
      title: 'Welcome!',
      subtitle: 'How would you like to get started?',
      icon: { icon: 'Plus', variant: 'info', size: 'lg' },
    },
  },
  {
    title: 'Company Data',
    contentHeader: {
      title: 'Welcome to JTL ERP Cloud',
      subtitle: 'Please enter your company data to get started.',
      icon: { icon: 'Building2', variant: 'info', size: 'lg' },
    },
  },
  {
    title: 'Shipping',
    contentHeader: {
      title: 'Shipping',
      subtitle: 'Configure your shipping settings for a smooth workflow.',
      icon: { icon: 'Package', variant: 'info', size: 'lg' },
    },
  },
  {
    title: 'Online Shop',
    contentHeader: {
      title: 'Online Shop',
      subtitle: 'Connect your online shop with the ERP.',
      icon: { icon: 'ShoppingBag', variant: 'info', size: 'lg' },
    },
  },
  {
    title: 'Setup',
    completedTitle: 'Complete',
    contentHeader: {
      title: 'Setup in progress...',
      subtitle: 'Please wait while your system is being configured.',
      icon: { icon: 'Check', variant: 'success', size: 'lg' },
    },
  },
];

/** Radio options for the welcome step */
const welcomeOptions = [
  { value: 'new', label: 'Start with a new instance', description: 'Set up a new JTL ERP Cloud instance from scratch.' },
  { value: 'import', label: 'Import existing data', description: 'Import data from an existing system. (Coming soon)' },
];

/** Dropdown options for country selection */
const countryOptions = [
  { value: 'de', label: 'Germany' },
  { value: 'at', label: 'Austria' },
  { value: 'ch', label: 'Switzerland' },
];

/** Dropdown options for shipping provider */
const shippingProviderOptions = [
  { value: 'dhl', label: 'DHL' },
  { value: 'dpd', label: 'DPD' },
  { value: 'ups', label: 'UPS' },
  { value: 'hermes', label: 'Hermes' },
];

/** Dropdown options for sales channel */
const salesChannelOptions = [
  { value: 'jtl-shop', label: 'JTL-Shop' },
  { value: 'shopify', label: 'Shopify' },
  { value: 'woocommerce', label: 'WooCommerce' },
];

// ─── Step 0: Welcome — instance type selection ───────────────────────────

/** Zod schema for step 0: must select an instance type */
const welcomeSchema = z.object({
  instanceType: z.string().min(1, 'Please select an option to continue.'),
});

/**
 * Step 0: Welcome screen with two selectable radio cards.
 * Uses Radio with hasBorder for the card-style selection UI.
 */
const WelcomeStep = forwardRef<StepHandle>((_, ref) => {
  const form = useZodForm({ schema: welcomeSchema, defaultValues: { instanceType: '' } });

  useImperativeHandle(ref, () => ({
    validate: () => form.trigger(),
  }));

  // Sync Radio selection with form state
  const handleRadioChange = useCallback(
    (value: string | number) => {
      form.setValue('instanceType', String(value), { shouldValidate: true });
    },
    [form],
  );

  return (
    <Form form={form} onSubmit={() => {}} noValidate>
      {/* Radio card selection — header is rendered by StepperLayout via contentHeader */}
      <Field name="instanceType">
        <FieldControl>
          <Radio options={welcomeOptions} value={form.watch('instanceType')} onChange={handleRadioChange} hasBorder />
        </FieldControl>
      </Field>
    </Form>
  );
});

// ─── Step 1: Company Data — address form ─────────────────────────────────

/** Zod schema for step 1: all company fields required */
const companyDataSchema = z.object({
  firstName: z.string().min(1, 'First name is required'),
  lastName: z.string().min(1, 'Last name is required'),
  companyName: z.string().min(1, 'Company name is required'),
  address: z.string().min(1, 'Address is required'),
  country: z.string().min(1, 'Country is required'),
  taxId: z.string().min(1, 'Tax ID is required'),
  phone: z.string().min(1, 'Phone number is required'),
});

/**
 * Step 1: Company data form with address fields.
 * Demonstrates a multi-field form controlled by StepperLayout's external Next button.
 */
const CompanyDataStep = forwardRef<StepHandle>((_, ref) => {
  const form = useZodForm({
    schema: companyDataSchema,
    defaultValues: { firstName: '', lastName: '', companyName: '', address: '', country: '', taxId: '', phone: '' },
  });

  useImperativeHandle(ref, () => ({
    validate: () => form.trigger(),
  }));

  // Sync Select value with form state
  const handleCountryChange = useCallback(
    (value: string) => {
      form.setValue('country', value, { shouldValidate: true });
    },
    [form],
  );

  return (
    <Form form={form} onSubmit={() => {}} noValidate>
      <Box className="flex flex-col gap-[var(--spacing-6)]">
        {/* Form fields — header is rendered by StepperLayout via contentHeader */}
        <Field name="firstName">
          <FieldLabel required>First Name</FieldLabel>
          <FieldControl>
            <Input placeholder="Sebastian" />
          </FieldControl>
        </Field>
        <Field name="lastName">
          <FieldLabel required>Last Name</FieldLabel>
          <FieldControl>
            <Input placeholder="Evers" />
          </FieldControl>
        </Field>
        <Field name="companyName">
          <FieldLabel required>Company Name</FieldLabel>
          <FieldControl>
            <Input placeholder="Tassen-Tycoon Evers" />
          </FieldControl>
        </Field>
        <Field name="address">
          <FieldLabel required>Address</FieldLabel>
          <FieldControl>
            <Input placeholder="Rheinstr. 3, 33602 Bielefeld" />
          </FieldControl>
        </Field>
        <Field name="country">
          <FieldLabel required>Country</FieldLabel>
          <FieldControl>
            <Select options={countryOptions} placeholder="Select a country" onChange={handleCountryChange} value={form.watch('country')} />
          </FieldControl>
        </Field>
        <Field name="taxId">
          <FieldLabel required>Tax ID</FieldLabel>
          <FieldControl>
            <Input placeholder="DE123456789" />
          </FieldControl>
        </Field>
        <Field name="phone">
          <FieldLabel required>Phone Number</FieldLabel>
          <FieldControl>
            <Input placeholder="+49 521 123456" />
          </FieldControl>
        </Field>
      </Box>
    </Form>
  );
});

// ─── Step 2: Shipping — provider + terms ─────────────────────────────────

/** Zod schema for step 2: shipping provider optional, terms checkbox must be checked */
const shippingSchema = z.object({
  shippingProvider: z.string().optional(),
  acceptShippingTerms: z.boolean().refine(val => val, { message: 'You must accept the shipping terms to continue.' }),
});

/**
 * Step 2: Shipping configuration with provider dropdown and terms checkbox.
 * Demonstrates Select + Checkbox integration with Zod validation.
 */
const ShippingStep = forwardRef<StepHandle>((_, ref) => {
  const form = useZodForm({
    schema: shippingSchema,
    defaultValues: { shippingProvider: 'dhl', acceptShippingTerms: false },
  });

  useImperativeHandle(ref, () => ({
    validate: () => form.trigger(),
  }));

  // Sync checkbox with form state
  const handleTermsChange = useCallback(
    (checked: boolean) => {
      form.setValue('acceptShippingTerms', checked, { shouldValidate: true });
    },
    [form],
  );

  // Sync shipping provider with form state
  const handleProviderChange = useCallback(
    (value: string) => {
      form.setValue('shippingProvider', value);
    },
    [form],
  );

  return (
    <Form form={form} onSubmit={() => {}} noValidate>
      <Box className="flex flex-col gap-[var(--spacing-6)]">
        {/* Shipping provider dropdown — header is rendered by StepperLayout via contentHeader */}
        <Field name="shippingProvider">
          <FieldLabel>Shipping Provider</FieldLabel>
          <FieldControl>
            <Select options={shippingProviderOptions} placeholder="DHL" defaultValue="dhl" onChange={handleProviderChange} />
          </FieldControl>
          <FieldDescription>More shipping providers coming soon.</FieldDescription>
        </Field>

        {/* Terms acceptance checkbox */}
        <Field name="acceptShippingTerms">
          <FieldControl>
            <Checkbox value={form.watch('acceptShippingTerms')} onChange={handleTermsChange}>
              I accept the JTL Shipping Terms and confirm that I have read and understood them.
            </Checkbox>
          </FieldControl>
        </Field>
      </Box>
    </Form>
  );
});

// ─── Step 3: Online Shop — shop name + terms ─────────────────────────────

/** Zod schema for step 3: sales channel, shop name required, terms checkbox must be checked */
const onlineShopSchema = z.object({
  salesChannel: z.string().optional(),
  shopName: z.string().min(1, 'Shop name is required'),
  acceptShopTerms: z.boolean().refine(val => val, { message: 'You must accept the shop terms to continue.' }),
});

/**
 * Step 3: Online shop configuration with sales channel, shop name, disclaimer, and terms.
 * Demonstrates Alert component for legal notices alongside form fields.
 */
const OnlineShopStep = forwardRef<StepHandle>((_, ref) => {
  const form = useZodForm({
    schema: onlineShopSchema,
    defaultValues: { salesChannel: 'jtl-shop', shopName: '', acceptShopTerms: false },
  });

  useImperativeHandle(ref, () => ({
    validate: () => form.trigger(),
  }));

  // Sync checkbox with form state
  const handleShopTermsChange = useCallback(
    (checked: boolean) => {
      form.setValue('acceptShopTerms', checked, { shouldValidate: true });
    },
    [form],
  );

  // Sync sales channel with form state
  const handleChannelChange = useCallback(
    (value: string) => {
      form.setValue('salesChannel', value);
    },
    [form],
  );

  return (
    <Form form={form} onSubmit={() => {}} noValidate>
      <Box className="flex flex-col gap-[var(--spacing-6)]">
        {/* Sales channel dropdown — header is rendered by StepperLayout via contentHeader */}
        <Field name="salesChannel">
          <FieldLabel required>Sales Channel</FieldLabel>
          <FieldControl>
            <Select options={salesChannelOptions} placeholder="JTL-Shop" defaultValue="jtl-shop" onChange={handleChannelChange} />
          </FieldControl>
        </Field>

        {/* Shop name input */}
        <Field name="shopName">
          <FieldLabel required>Shop Name</FieldLabel>
          <FieldControl>
            <Input placeholder="Tassen Tycoon" />
          </FieldControl>
        </Field>

        {/* Legal disclaimer */}
        <Alert
          variant="warning"
          title="Notice"
          description="JTL-Software-GmbH is not responsible for products or services sold through the connected online shop. As the shop operator, you are responsible for compliance with all legal requirements, such as a complete imprint or cancellation form."
          closable={false}
        />

        {/* Terms acceptance checkbox */}
        <Field name="acceptShopTerms">
          <FieldControl>
            <Checkbox value={form.watch('acceptShopTerms')} onChange={handleShopTermsChange}>
              I accept the JTL Shop Terms of Use and confirm that I have read and understood them.
            </Checkbox>
          </FieldControl>
        </Field>
      </Box>
    </Form>
  );
});

// ─── Step 4: Setup — progress/success ────────────────────────────────────

/** Setup progress items shown during the final step */
const setupProgressItems = ['Setting up shipping...', 'Setting up online shop...', 'Setting up inventory management...', 'Finalizing setup...'];

/**
 * Step 4: Setup progress/success screen.
 * Simulates a background setup process with animated progress indicators.
 * No validation — this is the final step with no Next button.
 */
const SetupStep = () => {
  const [completedItems, setCompletedItems] = useState<number>(0);

  // Simulate progressive setup completion
  useEffect(() => {
    if (completedItems >= setupProgressItems.length) return;

    const timer = setTimeout(() => {
      setCompletedItems(prev => prev + 1);
    }, 1200);

    return () => clearTimeout(timer);
  }, [completedItems]);

  return (
    <Box className="flex flex-col gap-[var(--spacing-6)]">
      {/* Progress list — header is rendered by StepperLayout via contentHeader */}
      <Box className="w-full flex justify-center">
        <Box className="flex flex-col gap-[var(--spacing-4)] items-start py-[var(--spacing-6)]">
          {setupProgressItems.map((item, index) => {
            const isComplete = index < completedItems;
            const isActive = index === completedItems;
            return (
              <Box key={item} className="flex items-center gap-[var(--spacing-3)]">
                {isComplete ? (
                  <Box className="flex items-center justify-center w-[var(--spacing-8)] h-[var(--spacing-8)] rounded-full bg-[var(--base-success-background)] text-[var(--base-success-text)]">
                    <Icon name="Check" size={16} />
                  </Box>
                ) : (
                  <Box className="flex items-center justify-center w-[var(--spacing-8)] h-[var(--spacing-8)] rounded-full border border-[var(--base-border)]">
                    {isActive ? (
                      <Icon name="Loader2" size={16} animation="spin" />
                    ) : (
                      <Box className="w-[var(--spacing-2)] h-[var(--spacing-2)] rounded-full bg-[var(--base-muted-foreground)]" />
                    )}
                  </Box>
                )}
                <Text type={isComplete ? 'muted' : undefined} weight={isActive ? 'semibold' : 'regular'}>
                  {item}
                </Text>
              </Box>
            );
          })}
        </Box>
      </Box>
    </Box>
  );
};

interface IFormExampleProps {}

const FormExample: React.FC<IFormExampleProps> = () => {
  const { steps, activeStep, goNext, goBack, setStepStatus } = useStepperLayoutState(onboardingSteps);

  // One ref per validated step — step 4 (setup) has no validation
  const step0Ref = useRef<StepHandle>(null);
  const step1Ref = useRef<StepHandle>(null);
  const step2Ref = useRef<StepHandle>(null);
  const step3Ref = useRef<StepHandle>(null);
  const stepRefs = useMemo(() => [step0Ref, step1Ref, step2Ref, step3Ref, null], []);

  /** Validate current step before advancing via form.trigger() */
  const handleNext = useCallback(
    async (current: number) => {
      const ref = stepRefs[current];
      // Steps without a ref (e.g. setup) are always valid
      const isValid = ref ? ((await ref.current?.validate()) ?? true) : true;

      if (!isValid) {
        setStepStatus(current, 'error');
        return;
      }

      setStepStatus(current, undefined);
      goNext();
    },
    [stepRefs, setStepStatus, goNext],
  );

  const handleBack = useCallback(
    (current: number) => {
      setStepStatus(current, undefined);
      goBack();
    },
    [setStepStatus, goBack],
  );

  return (
    <StepperLayout
      steps={steps}
      activeStep={activeStep}
      onNext={handleNext}
      onBack={handleBack}
      backButton={{ label: 'Back', icon: 'ChevronLeft' }}
      nextButton={{ label: 'Next', icon: 'ChevronRight', iconPosition: 'right' }}
      secondaryActions={<Button label="Cancel" variant="ghost" onClick={() => {}} />}
    >
      {activeStep === 0 && <WelcomeStep ref={step0Ref} />}
      {activeStep === 1 && <CompanyDataStep ref={step1Ref} />}
      {activeStep === 2 && <ShippingStep ref={step2Ref} />}
      {activeStep === 3 && <OnlineShopStep ref={step3Ref} />}
      {activeStep === 4 && <SetupStep />}
    </StepperLayout>
  );
};

export default FormExample;
`;
export {
  o as default
};
//# sourceMappingURL=formExampleSource.js.map
