New UI Components

2026-07-18 16:00:13 +05:30
parent d22824fa62
commit 95ca1c0625
75 changed files with 201 additions and 200 deletions
@@ -1,10 +1 @@
-// CSS-only tooltip shown on hover/focus. Wrap the trigger content in the slot.
-component Tooltip {
-  props {
-    text = ""
-    class = ""
-  }
-  view {
-    <span class="wire-tooltip {class}" data-tooltip="{text}" tabindex="0"><slot></slot></span>
-  }
-}
+component Tooltip { props { text = "Helpful information" position = "top" } view { <span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span> } }