@toolr/ui-design 0.1.10 → 0.1.11

package/components/ui/input.tsx

@@ -26,7 +26,7 @@ import { useAccentColor } from '../lib/accent-context.ts'
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
   value: string
   onChange: (value: string) => void
-  type?: 'text' | 'search' | 'password'
+  type?: 'text' | 'search' | 'password' | 'email'
   debounceMs?: number
   error?: boolean | string
   variant?: 'filled' | 'outline'

package/components/ui/tooltip.tsx

@@ -247,6 +247,29 @@ export function Tooltip({
     return () => window.removeEventListener('scroll', handleScroll, true)
   }, [trigger, isVisible, position, align])
 
+  // Dismiss hover tooltips on scroll, keyboard, click elsewhere, or window blur to prevent orphans
+  useEffect(() => {
+    if (trigger !== 'hover' || !isVisible) return
+    const dismiss = () => setIsVisible(false)
+    window.addEventListener('scroll', dismiss, true)
+    window.addEventListener('keydown', dismiss)
+    window.addEventListener('pointerdown', dismiss)
+    window.addEventListener('blur', dismiss)
+    return () => {
+      window.removeEventListener('scroll', dismiss, true)
+      window.removeEventListener('keydown', dismiss)
+      window.removeEventListener('pointerdown', dismiss)
+      window.removeEventListener('blur', dismiss)
+    }
+  }, [trigger, isVisible])
+
+  // Clear pending hide timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current)
+    }
+  }, [])
+
   const resolvedPos = position === 'auto' ? actualPosition : position
   const arrowClasses = getArrowClasses(resolvedPos, align)
 

package/dist/index.d.ts

@@ -400,7 +400,7 @@ declare function Toggle({ checked, onChange, disabled, size, className, accentCo
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     value: string;
     onChange: (value: string) => void;
-    type?: 'text' | 'search' | 'password';
+    type?: 'text' | 'search' | 'password' | 'email';
     debounceMs?: number;
     error?: boolean | string;
     variant?: 'filled' | 'outline';

package/dist/index.js

@@ -566,6 +566,25 @@ function Tooltip({
     window.addEventListener("scroll", handleScroll, true);
     return () => window.removeEventListener("scroll", handleScroll, true);
   }, [trigger, isVisible, position, align]);
+  useEffect2(() => {
+    if (trigger !== "hover" || !isVisible) return;
+    const dismiss = () => setIsVisible(false);
+    window.addEventListener("scroll", dismiss, true);
+    window.addEventListener("keydown", dismiss);
+    window.addEventListener("pointerdown", dismiss);
+    window.addEventListener("blur", dismiss);
+    return () => {
+      window.removeEventListener("scroll", dismiss, true);
+      window.removeEventListener("keydown", dismiss);
+      window.removeEventListener("pointerdown", dismiss);
+      window.removeEventListener("blur", dismiss);
+    };
+  }, [trigger, isVisible]);
+  useEffect2(() => {
+    return () => {
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
   const resolvedPos = position === "auto" ? actualPosition : position;
   const arrowClasses = getArrowClasses(resolvedPos, align);
   const tooltipContent = /* @__PURE__ */ jsxs3(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolr/ui-design",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",