import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a,t as o}from"./Steps-DqxHd6g-.js";import{n as s,t as c}from"./LayoutFlex-BKX2c6Gj.js";var l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{l=e(n(),1),i(),s(),u=r(),{expect:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Components/Steps`,component:o,decorators:[e=>(0,u.jsx)(`div`,{style:{padding:`32px`},children:(0,u.jsx)(e,{})})]},h=(0,u.jsx)(`div`,{style:{width:`100%`,height:`300px`,backgroundColor:`#e0e0e0`,marginBottom:`16px`}}),g={parameters:{docs:{description:{story:`Basic usage with header, controls, and content per step.`}}},render:()=>(0,u.jsxs)(o,{dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`This is the description for step 1.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`This is the description for step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the description for step 3.`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.click(e.getByText(`Previous`)),await p(()=>{d(e.getByText(`Step 1`)).toBeVisible()})}},_={parameters:{docs:{description:{story:`Example with hidden headers and only content per step.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,hideHeader:!0,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},v={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>(0,u.jsxs)(o,{initialStep:2,"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Step 1 is skipped.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Starting at step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the third step.`,children:h})]})},y={parameters:{docs:{description:{story:`Example with only navigation controls, no headers or content.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},b={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.

Navigation controls are disabled during transitions, with a cursor loading indicator.`}}},render:()=>(0,u.jsxs)(o,{onStepChange:async(e,t)=>(await new Promise(e=>setTimeout(e,1e3)),t),dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Navigation has a 1s delay`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Each navigation has async validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`Buttons are disabled during validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 4`,description:`Final step`,children:h}),(0,u.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{let t=e.getByTestId(`steps`);d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`true`)},{timeout:500}),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`false`)},{timeout:3e3}),d(e.getByText(`Step 2`)).toBeVisible()}},x={parameters:{docs:{description:{story:`You can override the navigation flow using \`onStepChange\`.

The following example skips step 3 and goes directly to step 4.`}}},render:()=>(0,u.jsxs)(o,{onStepChange:async(e,t)=>t===3?e<3?4:2:t,dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Next goes to step 2`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Step 3 will always be skipped`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This step is not accessible`,children:h}),(0,u.jsx)(o.Step,{title:`Step 4`,description:`Previous goes to step 2`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 4`)).toBeVisible()}),await f.click(e.getByText(`Previous`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()})}},S={parameters:{docs:{description:{story:`Although not a great UX, you can customize the placement of the navigation buttons.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Custom Buttons Location`,description:`Navigation buttons can be placed anywhere`,children:(0,u.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`16px`},children:[(0,u.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,u.jsx)(o.Previous,{variant:`secondary`}),(0,u.jsx)(o.Next,{})]}),h]})}),(0,u.jsxs)(o.Step,{title:`Customized Navigation`,description:`Buttons can have custom text and styles`,children:[h,(0,u.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,alignItems:`center`,gap:`8px`},children:[(0,u.jsx)(o.Next,{variant:`secondary`,children:`Continue`}),(0,u.jsx)(o.Previous,{variant:`tertiary`,children:`Go Back`})]})]}),(0,u.jsxs)(o.Step,{title:`Final Step`,description:`Only previous button is needed here`,children:[h,(0,u.jsx)(`div`,{children:(0,u.jsx)(o.Previous,{children:`Return to previous step`})})]})]})},C=()=>{let{goToPreviousStep:e,goToNextStep:t,goToStep:n,totalSteps:r,isNavigating:i}=a();return(0,l.useEffect)(()=>{let r=r=>{if(!i)switch(r.key){case`ArrowLeft`:e();break;case`ArrowRight`:t();break;case`1`:n(1);break;case`2`:n(2);break;case`3`:n(3);break;default:break}};return window.addEventListener(`keydown`,r),()=>window.removeEventListener(`keydown`,r)},[e,t,n,r,i]),(0,u.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f5f5f5`,borderRadius:`4px`},children:[(0,u.jsxs)(`p`,{children:[(0,u.jsx)(`strong`,{children:`Keyboard Navigation:`}),` Click here to focus, then use:`]}),(0,u.jsxs)(`ul`,{children:[(0,u.jsxs)(`li`,{children:[(0,u.jsx)(`kbd`,{children:`←`}),` Previous step`]}),(0,u.jsxs)(`li`,{children:[(0,u.jsx)(`kbd`,{children:`→`}),` Next step`]}),(0,u.jsxs)(`li`,{children:[(0,u.jsx)(`kbd`,{children:`1`}),` - `,(0,u.jsx)(`kbd`,{children:`3`}),` Jump to step`]})]})]})},w={parameters:{docs:{description:{story:`This example demonstrates controlled navigation using the Steps context.

The component listens for keyboard events and uses the context functions to navigate between steps.`}}},render:()=>(0,u.jsxs)(o,{dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Use arrow keys or number keys to navigate`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Press ← or → to navigate between steps`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`Press 1, 2, or 3 to jump to a specific step`,children:h}),(0,u.jsx)(C,{})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(/Keyboard Navigation:/)),await f.keyboard(`{ArrowRight}`),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.keyboard(`{ArrowLeft}`),await p(()=>{d(e.getByText(`Step 1`)).toBeVisible()}),await f.keyboard(`3`),await p(()=>{d(e.getByText(`Step 3`)).toBeVisible()})}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Basic usage with header, controls, and content per step.'
      }
    }
  },
  render: () => <Steps dataset={{
    testid: 'steps'
  }} aria-label="Story Steps">
            <Steps.Step title="Step 1" description="This is the description for step 1.">
                {DummyContent}
            </Steps.Step>
            <Steps.Step title="Step 2" description="This is the description for step 2.">
                {DummyContent}
            </Steps.Step>
            <Steps.Step title="Step 3" description="This is the description for step 3.">
                {DummyContent}
            </Steps.Step>
            <LayoutFlex justifyContent="space-between">
                <Steps.Previous />
                <Steps.Next />
            </LayoutFlex>
        </Steps>,
  play: async ({
    canvas
  }) => {
    expect(canvas.getByText('Step 1')).toBeVisible();
    await userEvent.click(canvas.getByText('Next'));
    await waitFor(() => {
      expect(canvas.getByText('Step 2')).toBeVisible();
    });
    await userEvent.click(canvas.getByText('Previous'));
    await waitFor(() => {
      expect(canvas.getByText('Step 1')).toBeVisible();
    });
  }
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Example with hidden headers and only content per step.'
      }
    }
  },
  render: () => <Steps aria-label="Story Steps">
            <Steps.Step title="Step 1" hideHeader>
                {DummyContent}
            </Steps.Step>
            <Steps.Step title="Step 2" hideHeader>
                {DummyContent}
            </Steps.Step>
            <Steps.Step title="Step 3" hideHeader>
                {DummyContent}
            </Steps.Step>
            <LayoutFlex justifyContent="space-between">
                <Steps.Previous />
                <Steps.Next />
            </LayoutFlex>
        </Steps>
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Example demonstrating the use of a custom \`initialStep\`.'
      }
    }
  },
  render: () => {
    return <Steps initialStep={2} aria-label="Story Steps">
                <Steps.Step title="Step 1" description="Step 1 is skipped.">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 2" description="Starting at step 2.">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 3" description="This is the third step.">
                    {DummyContent}
                </Steps.Step>
            </Steps>;
  }
}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Example with only navigation controls, no headers or content.'
      }
    }
  },
  render: () => {
    return <Steps aria-label="Story Steps">
                <Steps.Step title="Step 1">{DummyContent}</Steps.Step>
                <Steps.Step title="Step 2">{DummyContent}</Steps.Step>
                <Steps.Step title="Step 3">{DummyContent}</Steps.Step>
                <LayoutFlex justifyContent="space-between">
                    <Steps.Previous />
                    <Steps.Next />
                </LayoutFlex>
            </Steps>;
  }
}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`Example with a 1-second async delay between steps.

Navigation controls are disabled during transitions, with a cursor loading indicator.\`
      }
    }
  },
  render: () => {
    const handleStepChange = async (_current: number, next: number) => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return next;
    };
    return <Steps onStepChange={handleStepChange} dataset={{
      testid: 'steps'
    }} aria-label="Story Steps">
                <Steps.Step title="Step 1" description="Navigation has a 1s delay">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 2" description="Each navigation has async validation">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 3" description="Buttons are disabled during validation">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 4" description="Final step">
                    {DummyContent}
                </Steps.Step>
                <div style={{
        display: 'flex',
        justifyContent: 'space-between'
      }}>
                    <Steps.Previous />
                    <Steps.Next />
                </div>
            </Steps>;
  },
  play: async ({
    canvas
  }) => {
    const steps = canvas.getByTestId('steps');
    expect(canvas.getByText('Step 1')).toBeVisible();
    await userEvent.click(canvas.getByText('Next'));
    await waitFor(() => {
      expect(steps).toHaveAttribute('aria-busy', 'true');
    }, {
      timeout: 500
    });

    // Wait for navigation to complete (1s async delay + buffer)
    await waitFor(() => {
      expect(steps).toHaveAttribute('aria-busy', 'false');
    }, {
      timeout: 3000
    });
    expect(canvas.getByText('Step 2')).toBeVisible();
  }
}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`You can override the navigation flow using \\\`onStepChange\\\`.

The following example skips step 3 and goes directly to step 4.\`
      }
    }
  },
  render: () => {
    const handleStepChange = async (current: number, next: number) => {
      if (next === 3) {
        return current < 3 ? 4 : 2;
      }
      return next;
    };
    return <Steps onStepChange={handleStepChange} dataset={{
      testid: 'steps'
    }} aria-label="Story Steps">
                <Steps.Step title="Step 1" description="Next goes to step 2">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 2" description="Step 3 will always be skipped">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 3" description="This step is not accessible">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 4" description="Previous goes to step 2">
                    {DummyContent}
                </Steps.Step>
                <LayoutFlex justifyContent="space-between">
                    <Steps.Previous />
                    <Steps.Next />
                </LayoutFlex>
            </Steps>;
  },
  play: async ({
    canvas
  }) => {
    expect(canvas.getByText('Step 1')).toBeVisible();
    await userEvent.click(canvas.getByText('Next'));
    await waitFor(() => {
      expect(canvas.getByText('Step 2')).toBeVisible();
    });
    await userEvent.click(canvas.getByText('Next'));
    await waitFor(() => {
      expect(canvas.getByText('Step 4')).toBeVisible();
    });
    await userEvent.click(canvas.getByText('Previous'));
    await waitFor(() => {
      expect(canvas.getByText('Step 2')).toBeVisible();
    });
  }
}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Although not a great UX, you can customize the placement of the navigation buttons.'
      }
    }
  },
  render: () => <Steps aria-label="Story Steps">
            <Steps.Step title="Custom Buttons Location" description="Navigation buttons can be placed anywhere">
                <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px'
      }}>
                    <div style={{
          display: 'flex',
          gap: '8px'
        }}>
                        <Steps.Previous variant="secondary" />
                        <Steps.Next />
                    </div>
                    {DummyContent}
                </div>
            </Steps.Step>
            <Steps.Step title="Customized Navigation" description="Buttons can have custom text and styles">
                {DummyContent}
                <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '8px'
      }}>
                    <Steps.Next variant="secondary">Continue</Steps.Next>
                    <Steps.Previous variant="tertiary">Go Back</Steps.Previous>
                </div>
            </Steps.Step>
            <Steps.Step title="Final Step" description="Only previous button is needed here">
                {DummyContent}
                <div>
                    <Steps.Previous>Return to previous step</Steps.Previous>
                </div>
            </Steps.Step>
        </Steps>
}`,...S.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`This example demonstrates controlled navigation using the Steps context.

The component listens for keyboard events and uses the context functions to navigate between steps.\`
      }
    }
  },
  render: () => {
    return <Steps dataset={{
      testid: 'steps'
    }} aria-label="Story Steps">
                <Steps.Step title="Step 1" description="Use arrow keys or number keys to navigate">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 2" description="Press ← or → to navigate between steps">
                    {DummyContent}
                </Steps.Step>
                <Steps.Step title="Step 3" description="Press 1, 2, or 3 to jump to a specific step">
                    {DummyContent}
                </Steps.Step>
                <KeyboardNavigation />
            </Steps>;
  },
  play: async ({
    canvas
  }) => {
    expect(canvas.getByText('Step 1')).toBeVisible();

    // Focus the component to enable keyboard navigation
    await userEvent.click(canvas.getByText(/Keyboard Navigation:/));

    // Test arrow key navigation
    await userEvent.keyboard('{ArrowRight}');
    await waitFor(() => {
      expect(canvas.getByText('Step 2')).toBeVisible();
    });
    await userEvent.keyboard('{ArrowLeft}');
    await waitFor(() => {
      expect(canvas.getByText('Step 1')).toBeVisible();
    });

    // Test number key navigation
    await userEvent.keyboard('3');
    await waitFor(() => {
      expect(canvas.getByText('Step 3')).toBeVisible();
    });
  }
}`,...w.parameters?.docs?.source}}},T=[`WithHeadersAndControls`,`WithHiddenHeaders`,`WithCustomInitialStep`,`WithConstantControls`,`WithAsyncNavigation`,`WithNonLinearFlow`,`WithVaryingControls`,`WithCustomControls`]}))();export{b as WithAsyncNavigation,y as WithConstantControls,w as WithCustomControls,v as WithCustomInitialStep,g as WithHeadersAndControls,_ as WithHiddenHeaders,x as WithNonLinearFlow,S as WithVaryingControls,T as __namedExportsOrder,m as default};