Packages
petal_components
4.5.0
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/stepper.ex
defmodule PetalComponents.Stepper do
use Phoenix.Component
import PetalComponents.Icon
attr :steps, :list, required: true
attr :orientation, :string, default: "horizontal", values: ["horizontal", "vertical"]
attr :size, :string, default: "md", values: ["sm", "md", "lg"]
attr :class, :string, default: ""
def stepper(assigns) do
~H"""
<div
class={[
"pc-stepper",
"pc-stepper--#{@orientation}",
"pc-stepper--#{@size}",
@class
]}
role="list"
aria-label="Progress steps"
>
<div class="pc-stepper__container">
<%= for {step, index} <- Enum.with_index(@steps) do %>
<!-- Step Item -->
<div class="pc-stepper__item" role="listitem">
<button
type="button"
class="pc-stepper__item-content"
id={"step-#{index}"}
phx-click={step[:on_click]}
aria-current={step.active? && "step"}
aria-label={"Step #{index + 1}: #{step.name}#{if step.complete?, do: " (completed)"}"}
>
<!-- Node -->
<div class={[
"pc-stepper__node",
step.complete? && "pc-stepper__node--complete",
step.active? && "pc-stepper__node--active"
]}>
<div class="pc-stepper__indicator" aria-hidden="true">
<%= if step.complete? do %>
<.icon name="hero-check-solid" class="pc-stepper__check" />
<% else %>
<span class="pc-stepper__number">
{index + 1}
</span>
<% end %>
</div>
</div>
<!-- Content -->
<div class="pc-stepper__content">
<h3 class="pc-stepper__title" id={"step-title-#{index}"}>
{step.name}
</h3>
<%= if Map.get(step, :description) do %>
<p class="pc-stepper__description" id={"step-description-#{index}"}>
{step.description}
</p>
<% end %>
</div>
</button>
</div>
<%= if index < length(@steps) - 1 do %>
<div class="pc-stepper__connector-wrapper" aria-hidden="true">
<div class={[
"pc-stepper__connector",
step.complete? && Enum.at(@steps, index + 1).complete? &&
"pc-stepper__connector--complete"
]} />
</div>
<% end %>
<% end %>
</div>
</div>
"""
end
end