Swaps

.mt-4.flex.gap-x-6.text-4xl.lg:text-6xl
  = daisy_swap(off: "❤️", on: "💔")
  = daisy_swap(off: "🌚", on: "🌞", css: "swap-rotate")
  = daisy_swap(off: "🔇", on: "🔊", css: "swap-flip")

.mt-2.flex.items-center.gap-x-4
  - sizes = "size-16"
  = daisy_swap(checked: true) do |swap|
    - swap.with_on do
      = hero_icon "pause-circle", css: sizes, variant: :outline
    - swap.with_off do
      = heroicon "play-circle", class: sizes, variant: :outline

  = daisy_swap(checked: true) do |swap|
    - swap.with_on do
      = heroicon "bell-alert", class: sizes + " animate-bounce text-purple-600", variant: :outline
    - swap.with_off do
      = heroicon "bell-slash", class: sizes + " text-gray-400", variant: :outline

  - # The standard tooltip hover doesn't work with the swap element well, so we
  - # force it open for this example.
  - #
  - # Also, the tooltip seems to change the spacing, so we add some top margin
  - # to keep the icon centered vertically.
  = daisy_swap(css: "text-blue-600 mt-1") do |swap|
    - swap.with_on do
      .tooltip.tooltip-right.tooltip-open{ data: { tip: "Dollar" }}
        = heroicon "currency-dollar", class: sizes, variant: :outline
    - swap.with_off do
      .tooltip.tooltip-right.tooltip-open{ data: { tip: "Euro" }}
        = heroicon "currency-euro", class: sizes, variant: :outline

- shared_classes = "p-8 mask text-center font-bold"
.w-56.mt-4.flex.flex-col.items-center
  = daisy_swap(css: "swap-rotate", checkbox_html: { id: "stopsign" }) do |swap|
    - swap.with_off(css: "mask-hexagon bg-red-600 text-white #{shared_classes}") do
      Stop
    - swap.with_on(css: "mask-circle bg-green-500 text-white #{shared_classes}") do
      Go
    - swap.with_indeterminate(css: "mask-squircle bg-yellow-500 text-black #{shared_classes}") do
      Slow

  .mt-2.btn.btn-sm.px-4.py-2{ onclick: "document.getElementById('stopsign').indeterminate = true" }
    Make Indeterminate