Packages
petal_components
4.6.2
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/progress.ex
defmodule PetalComponents.Progress do
use Phoenix.Component
attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
attr(:color, :string,
default: "primary",
values: ["primary", "secondary", "info", "success", "warning", "danger", "gray"]
)
attr(:label, :string, default: nil, doc: "labels your progress bar")
attr(:label_position, :string,
default: "inside",
values: ["inside", "top"],
doc:
"inside renders the label in the bar itself (xl only); top renders a label row with the percentage above the bar, at any size"
)
attr(:value, :integer, default: nil, doc: "adds a value to your progress bar")
attr(:max, :integer, default: 100, doc: "sets a max value for your progress bar")
attr(:class, :any, default: nil, doc: "CSS class")
attr(:rest, :global)
def progress(%{label_position: "top"} = assigns) do
assigns = assign(assigns, :percentage, calculate_percentage(assigns.value, assigns.max))
~H"""
<div {@rest} class={["pc-progress-wrapper", @class]}>
<div class="pc-progress__header">
<span class="pc-progress__title">{@label}</span>
<span :if={@value} class="pc-progress__value">{round(@percentage)}%</span>
</div>
<div
class={["pc-progress--#{@size}", "pc-progress", "pc-progress--#{@color}"]}
role="progressbar"
aria-valuemin="0"
aria-valuemax={@max}
aria-valuenow={@value}
aria-valuetext={"#{round(@percentage)}%"}
aria-label={@label || "Progress"}
>
<span
class={["pc-progress__inner--#{@color}", "pc-progress__inner"]}
style={"width: #{@percentage}%"}
></span>
</div>
</div>
"""
end
def progress(assigns) do
assigns = assign(assigns, :percentage, calculate_percentage(assigns.value, assigns.max))
~H"""
<div
{@rest}
class={["pc-progress--#{@size}", "pc-progress", "pc-progress--#{@color}", @class]}
role="progressbar"
aria-valuemin="0"
aria-valuemax={@max}
aria-valuenow={@value}
aria-valuetext={"#{round(@percentage)}%"}
aria-label={@label || "Progress"}
>
<span
class={["pc-progress__inner--#{@color}", "pc-progress__inner"]}
style={"width: #{@percentage}%"}
>
<%= if @size == "xl" do %>
<span class="pc-progress__label">
{@label}
</span>
<% end %>
</span>
</div>
"""
end
defp calculate_percentage(_value, 0), do: 0.0
defp calculate_percentage(value, max) when max > 0 do
Float.round(value / max * 100, 2)
end
end