Stepper

<.stepper current={2}>
  <:step><h4>Profile</h4><p>Tell us about yourself</p></:step>
  <:step><h4>Workspace</h4><p>Configure team defaults</p></:step>
  <:step><h4>Invite</h4><p>Bring in teammates</p></:step>
</.stepper>

<.stepper current={3} orientation="vertical">
  <:step><h4>Account</h4><p>Email and password</p></:step>
  <:step><h4>Team</h4><p>Invite collaborators</p></:step>
  <:step><h4>Billing</h4><p>Choose a plan</p></:step>
  <:step><h4>Launch</h4><p>Go live</p></:step>
</.stepper>

<.stepper current={2} orientation="responsive">
  <:step><h4>Design</h4><p>Wireframes</p></:step>
  <:step><h4>Build</h4><p>Implementation</p></:step>
  <:step><h4>Review</h4><p>QA pass</p></:step>
  <:step><h4>Ship</h4><p>Deploy</p></:step>
</.stepper>

<.stepper current={@current_step} select_event="jump_to_step">
  <:step value="profile"><h4>Profile</h4></:step>
  <:step value="workspace"><h4>Workspace</h4></:step>
  <:step value="invite"><h4>Invite</h4></:step>
</.stepper>
<p class="text-sm text-muted-foreground">
  Click any marker above to jump to that step. Currently on step {@current_step}.
</p>

<.stepper current={3} errors={%{3 => "Card declined"}}>
  <:step><h4>Select plan</h4></:step>
  <:step><h4>Payment</h4></:step>
  <:step><h4>Confirm</h4></:step>
</.stepper>

<.stepper current={2} variant="outline">
  <:step><h4>Design</h4><p>Wireframes</p></:step>
  <:step><h4>Build</h4><p>Implementation</p></:step>
  <:step><h4>Ship</h4><p>Deploy</p></:step>
</.stepper>

<.stepper current={3} orientation="vertical">
  <:step icon="✓"><h4>Order placed</h4></:step>
  <:step icon="✓"><h4>Shipped</h4></:step>
  <:step icon="🚚"><h4>In transit</h4><p>Arriving today</p></:step>
  <:step icon="📦"><h4>Delivered</h4></:step>
</.stepper>

<.form
  id="workspace-wizard-form"
  for={%{}}
  as={:wizard}
  phx-change="validate"
  phx-submit="next_step"
  class="grid gap-6"
>
  <.stepper_wizard
    id="workspace-wizard"
    current={@wizard_step}
    errors={@wizard_errors}
    orientation="responsive"
  >
    <:step id="account" label="Account" description="Profile details">
      <.input
        name="wizard[full_name]"
        label="Full name"
        value={@wizard_params["full_name"]}
        errors={field_errors(@wizard_field_errors, "full_name")}
        placeholder="Maya Chen"
      />
      <.input
        name="wizard[email]"
        type="email"
        label="Email"
        value={@wizard_params["email"]}
        errors={field_errors(@wizard_field_errors, "email")}
        placeholder="maya@example.com"
      />
    </:step>
    <:step id="workspace" label="Workspace" description="Team setup">
      <.input name="wizard[company]" label="Company" value={@wizard_params["company"]} placeholder="Acme Inc." />
      <.input name="wizard[workspace]" label="Workspace URL" value={@wizard_params["workspace"]} placeholder="acme" />
    </:step>
    <:step id="invite" label="Invite" description="Add teammates">
      <div class="rounded-md border bg-muted/30 p-4 text-sm text-muted-foreground">
        Invite teammates after the workspace is created.
      </div>
    </:step>
    <:actions>
      <.button type="submit">Continue</.button>
    </:actions>
  </.stepper_wizard>
</.form>