Packages
petal_components
0.17.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/progress.ex
defmodule PetalComponents.Progress do
use Phoenix.Component
import PetalComponents.Helpers
# prop size, :string, options: ["xs", "sm", "md", "lg", "xl"]
# prop color, :string, options: ["primary", "secondary", "info", "success", "warning", "danger"]
# prop class, :string
# prop value, :integer
# prop max, :integer
# prop label, :string [xl]
def progress(assigns) do
assigns =
assigns
|> assign_new(:label, fn -> "" end)
|> assign_new(:class, fn -> "" end)
|> assign_new(:size, fn -> "md" end)
|> assign_new(:value, fn -> nil end)
|> assign_new(:color, fn -> "primary" end)
|> assign_new(:max, fn -> 100 end)
|> assign_rest(~w(label class size value color max)a)
~H"""
<div {@rest} class={@class}>
<div class={"#{get_parent_classes(@size)} flex overflow-hidden #{get_parent_color_classes(@color)}"}>
<span class={"#{get_color_classes(@color)} text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 px-4 py-2"} style={"width: #{round(@value/@max*100)}%"}>
<%= if @size == "xl" do %>
<%= @label %>
<% end %>
</span>
</div>
</div>
"""
end
defp get_color_classes("primary"), do: "bg-primary-500"
defp get_color_classes("secondary"), do: "bg-secondary-500"
defp get_color_classes("info"), do: "bg-blue-500"
defp get_color_classes("success"), do: "bg-green-500"
defp get_color_classes("warning"), do: "bg-yellow-500"
defp get_color_classes("danger"), do: "bg-red-500"
defp get_color_classes("gray"), do: "bg-gray-500"
defp get_parent_classes("xs"), do: "h-1 rounded-sm"
defp get_parent_classes("sm"), do: "h-2 rounded-md"
defp get_parent_classes("md"), do: "h-3 rounded-md"
defp get_parent_classes("lg"), do: "h-4 rounded-lg"
defp get_parent_classes("xl"), do: "h-5 rounded-xl"
defp get_parent_color_classes("primary"), do: "bg-primary-100"
defp get_parent_color_classes("secondary"), do: "bg-secondary-100"
defp get_parent_color_classes("info"), do: "bg-blue-100"
defp get_parent_color_classes("success"), do: "bg-green-100"
defp get_parent_color_classes("warning"), do: "bg-yellow-100"
defp get_parent_color_classes("danger"), do: "bg-red-100"
defp get_parent_color_classes("gray"), do: "bg-gray-100"
end