porting to the use of penguinui

assets/views/macros/ui.html

@@ -120,3 +120,12 @@
   <span>{{ label }}</span>
 </label>
 {%- endmacro checkbox %}
+
+{# Radio dot (verbatim Penguin custom radio from penguinui/radio/radio-with-container.html).
+   Emits ONLY the <input> (the styled dot) — callers keep their own card-style
+   <label> wrapper (e.g. checkout's has-[:checked]:border-primary cards). Use
+   `attrs` for x-model / required etc.; callers whose @change mixes nested
+   single+double quotes (carrier loop) spell this class out inline instead. #}
+{% macro radio(name, value="", id="", checked=false, attrs="", extra="") -%}
+<input {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" type="radio" value="{{ value }}"{% if checked %} checked{% endif %} class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-outline bg-surface before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-on-primary checked:border-primary checked:bg-primary checked:before:visible focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark dark:before:bg-on-primary-dark dark:checked:border-primary-dark dark:checked:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark {{ extra }}" {{ attrs | safe }}/>
+{%- endmacro radio %}