Add lucide_htmx_init_script function to initialize Lucide icons after HTMX content swaps. Update switch component to improve cursor interaction with cursor-pointer class.

dakixr · dakixr · commit 1e480900b434 · 2025-09-21T12:16:30.000+02:00
diff --git a/src/htpy_uikit/components/lucide.py b/src/htpy_uikit/components/lucide.py
@@ -1,6 +1,7 @@
 from htpy import Renderable
 from htpy import i as i_el
 from htpy import script
+from markupsafe import Markup
 from sourcetypes import js
 
 from ._types_lucide import LucideName
@@ -46,3 +47,18 @@ def lucide_auto_init_script() -> Renderable:
         lucide.createIcons();
     """
     return script()[code]
+
+
+def lucide_htmx_init_script() -> Renderable:
+    """Return a <script> tag that initializes Lucide icons after HTMX content swaps.
+
+    This listens for HTMX's 'htmx:afterSwap' event and re-initializes Lucide icons
+    for any new content that was swapped in. Place this once, near the end of <body>
+    or in your layout/template head.
+    """
+    code: js = """
+        document.addEventListener('htmx:afterSwap', function(evt) {
+            lucide.createIcons();
+        });
+    """
+    return script()[Markup(code)]
diff --git a/src/htpy_uikit/components/switch.py b/src/htpy_uikit/components/switch.py
@@ -47,7 +47,7 @@ def switch(
     # Inline full tailwind classes from reference for switches.
     # Color-specific classes are appended based on `color`.
     base_switch_classes = (
-        "input appearance-none focus-visible:border-ring focus-visible:ring-ring/50 "
+        "input cursor-pointer appearance-none focus-visible:border-ring focus-visible:ring-ring/50 "
         "inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border "
         "border-border shadow-xs transition-all outline-none focus-visible:ring-[3px] "
         "disabled:cursor-not-allowed disabled:opacity-50 bg-input dark:bg-input/80 "
