Packages
petal_components
0.18.1
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/alert.ex
defmodule PetalComponents.Alert do
use Phoenix.Component
import PetalComponents.Helpers
# prop color, :string, options: ["info", "success", "warning", "danger"]
# prop class, :string
# prop label, :string
# slot default
def alert(assigns) do
assigns =
assigns
|> assign_new(:label, fn -> nil end)
|> assign_new(:color, fn -> "info" end)
|> assign_new(:heading, fn -> nil end)
|> assign_new(:with_icon, fn -> false end)
|> assign_new(:inner_block, fn -> nil end)
|> assign_new(:classes, fn -> alert_classes(assigns) end)
|> assign_new(:close_button_properties, fn -> nil end)
|> assign_rest(~w(label color heading with_icon classes class close_button_properties)a)
~H"""
<%= unless label_blank?(@label, @inner_block) do %>
<div {@rest} class={@classes}>
<%= if @with_icon do %>
<div class="self-start flex-shrink-0 pt-0.5 w-6 h-6">
<.get_icon color={@color} />
</div>
<% end %>
<div class="w-full flex-0">
<div class="flex items-start justify-between">
<div>
<%= if @heading do %>
<div class="pt-1 font-bold">
<%= @heading %>
</div>
<% end %>
<div class="py-1 font-medium">
<%= if @inner_block do %>
<%= render_slot(@inner_block) %>
<% else %>
<%= @label %>
<% end %>
</div>
</div>
<%= if @close_button_properties do %>
<button class={build_class(["p-2 mouse-hover flex hover:rounded", get_dismiss_icon_classes(@color)])} {@close_button_properties}>
<Heroicons.x_mark solid class="self-start w-4 h-4" />
</button>
<% end %>
</div>
</div>
</div>
<% end %>
"""
end
defp alert_classes(opts) do
opts = %{
color: opts[:color] || "info",
class: opts[:class] || ""
}
base_classes = "w-full flex text-sm rounded items-center focus:outline-none px-4 py-2 gap-3"
color_css = get_color_classes(opts.color)
custom_classes = opts.class
build_class([base_classes, color_css, custom_classes])
end
defp get_color_classes("info"),
do: "text-blue-800 bg-blue-100 dark:bg-blue-200 dark:text-blue-800"
defp get_color_classes("success"),
do: "text-green-800 bg-green-100 dark:bg-green-200 dark:text-green-800"
defp get_color_classes("warning"),
do: "text-yellow-800 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800"
defp get_color_classes("danger"),
do: "text-red-800 bg-red-100 dark:bg-red-200 dark:text-red-800"
defp get_dismiss_icon_classes("info"),
do:
"bg-blue-100 dark:bg-blue-200 hover:bg-blue-200 dark:hover:bg-blue-300 hover:text-blue-800 dark:hover:text-blue-900"
defp get_dismiss_icon_classes("success"),
do:
"bg-green-100 dark:bg-green-200 hover:bg-green-200 dark:hover:bg-green-300 hover:text-green-800 dark:hover:text-green-900"
defp get_dismiss_icon_classes("warning"),
do:
"bg-yellow-100 dark:bg-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-300 hover:text-yellow-800 dark:hover:text-yellow-900"
defp get_dismiss_icon_classes("danger"),
do:
"bg-red-100 dark:bg-red-200 hover:bg-red-200 dark:hover:bg-red-300 hover:text-red-800 dark:hover:text-red-900"
defp get_icon(%{color: "info"} = assigns) do
~H"""
<Heroicons.information_circle/>
"""
end
defp get_icon(%{color: "success"} = assigns) do
~H"""
<Heroicons.check_circle/>
"""
end
defp get_icon(%{color: "warning"} = assigns) do
~H"""
<Heroicons.exclamation_circle/>
"""
end
defp get_icon(%{color: "danger"} = assigns) do
~H"""
<Heroicons.x_circle/>
"""
end
defp label_blank?(label, inner_block) do
(!label || label == "") && !inner_block
end
end