@tangible/ui 0.0.3 → 0.0.4

package/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
-import { useFloating, offset, flip, shift, autoUpdate, FloatingPortal, } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, FloatingPortal, FloatingArrow, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { getPortalRootFor } from '../../utils/portal.js';
 import { TooltipContext, TooltipProviderContext, useTooltipContext, useTooltipProviderContext, } from './TooltipContext.js';
@@ -8,7 +8,7 @@ import { toPlacement } from './types.js';
 // =============================================================================
 // TooltipProvider
 // =============================================================================
-function TooltipProviderComponent({ delayDuration = 400, closeDelayDuration = 0, children, }) {
+function TooltipProviderComponent({ delayDuration = 400, closeDelayDuration = 150, children, }) {
     const value = useMemo(() => ({ delayDuration, closeDelayDuration }), [delayDuration, closeDelayDuration]);
     return (_jsx(TooltipProviderContext.Provider, { value: value, children: children }));
 }
@@ -28,46 +28,63 @@ function TooltipRoot({ open: controlledOpen, onOpenChange, defaultOpen = false,
     }, [isControlled, onOpenChange]);
     const triggerRef = useRef(null);
     const contentId = useId();
-    const contextValue = useMemo(() => ({
-        open,
-        setOpen,
-        triggerRef,
-        contentId,
-        delayDuration: localDelay ?? providerContext.delayDuration,
-        closeDelayDuration: providerContext.closeDelayDuration,
-    }), [open, setOpen, contentId, localDelay, providerContext]);
-    return (_jsx(TooltipContext.Provider, { value: contextValue, children: children }));
-}
-// =============================================================================
-// TooltipTrigger
-// =============================================================================
-function TooltipTriggerComponent({ asChild = false, children }) {
-    const { open, setOpen, triggerRef, contentId, delayDuration, closeDelayDuration } = useTooltipContext();
+    // Shared timer refs — lifted here so both Trigger and Content can
+    // cancel/schedule close for WCAG 1.4.13 hover persistence.
     const openTimeoutRef = useRef(null);
     const closeTimeoutRef = useRef(null);
-    const clearTimeouts = useCallback(() => {
-        if (openTimeoutRef.current)
+    const resolvedDelay = localDelay ?? providerContext.delayDuration;
+    const resolvedCloseDelay = providerContext.closeDelayDuration;
+    const clearAllTimeouts = useCallback(() => {
+        if (openTimeoutRef.current) {
             clearTimeout(openTimeoutRef.current);
-        if (closeTimeoutRef.current)
+            openTimeoutRef.current = null;
+        }
+        if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
     }, []);
     const handleOpen = useCallback(() => {
-        clearTimeouts();
-        openTimeoutRef.current = setTimeout(() => setOpen(true), delayDuration);
-    }, [clearTimeouts, delayDuration, setOpen]);
+        clearAllTimeouts();
+        openTimeoutRef.current = setTimeout(() => setOpen(true), resolvedDelay);
+    }, [clearAllTimeouts, resolvedDelay, setOpen]);
     const handleClose = useCallback(() => {
-        clearTimeouts();
-        if (closeDelayDuration > 0) {
-            closeTimeoutRef.current = setTimeout(() => setOpen(false), closeDelayDuration);
+        clearAllTimeouts();
+        if (resolvedCloseDelay > 0) {
+            closeTimeoutRef.current = setTimeout(() => setOpen(false), resolvedCloseDelay);
         }
         else {
             setOpen(false);
         }
-    }, [clearTimeouts, closeDelayDuration, setOpen]);
+    }, [clearAllTimeouts, resolvedCloseDelay, setOpen]);
     // Cleanup on unmount
     useEffect(() => {
-        return () => clearTimeouts();
-    }, [clearTimeouts]);
+        return () => clearAllTimeouts();
+    }, [clearAllTimeouts]);
+    const contextValue = useMemo(() => ({
+        open,
+        setOpen,
+        triggerRef,
+        contentId,
+        delayDuration: resolvedDelay,
+        closeDelayDuration: resolvedCloseDelay,
+        handleOpen,
+        handleClose,
+        cancelClose,
+    }), [open, setOpen, contentId, resolvedDelay, resolvedCloseDelay, handleOpen, handleClose, cancelClose]);
+    return (_jsx(TooltipContext.Provider, { value: contextValue, children: children }));
+}
+// =============================================================================
+// TooltipTrigger
+// =============================================================================
+function TooltipTriggerComponent({ asChild = false, 'aria-label': ariaLabel, children, }) {
+    const { open, triggerRef, contentId, handleOpen, handleClose } = useTooltipContext();
     // Merge child ref with our triggerRef
     const setRefs = useCallback((node) => {
         triggerRef.current = node;
@@ -97,20 +114,22 @@ function TooltipTriggerComponent({ asChild = false, children }) {
         });
     }
     // Wrapper needs tabIndex to be keyboard-focusable for non-interactive children
-    return (_jsx("span", { ref: setRefs, ...triggerProps, tabIndex: 0, style: { display: 'inline-flex' }, children: children }));
+    return (_jsx("span", { ref: setRefs, ...triggerProps, tabIndex: 0, "aria-label": ariaLabel, style: { display: 'inline-flex' }, children: children }));
 }
 // =============================================================================
 // TooltipContent
 // =============================================================================
-function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, className, children, }) {
-    const { open, setOpen, triggerRef, contentId } = useTooltipContext();
-    const { refs, floatingStyles } = useFloating({
+function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, theme = 'dark', className, children, }) {
+    const { open, setOpen, triggerRef, contentId, cancelClose, handleClose } = useTooltipContext();
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context } = useFloating({
         placement: toPlacement(side, align),
         open,
         middleware: [
             offset(sideOffset),
             flip(),
             shift({ padding: 8 }),
+            arrow({ element: arrowRef }),
         ],
         whileElementsMounted: autoUpdate,
     });
@@ -121,17 +140,19 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
             refs.setReference(triggerRef.current);
         }
     }, [triggerRef, refs]);
-    // Close on Escape — scoped to trigger focus to avoid closing modal + tooltip together
+    // Close on Escape
+    // - Focus on trigger: close + stopPropagation (avoid closing parent modal)
+    // - Hover-only (focus elsewhere): close without stopPropagation
     useEffect(() => {
         if (!open)
             return;
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                // Only close if focus is on or within the trigger element
                 const activeEl = document.activeElement;
                 const trigger = triggerRef.current;
-                if (trigger && (trigger === activeEl || trigger.contains(activeEl))) {
-                    setOpen(false);
+                const focusIsOnTrigger = trigger && (trigger === activeEl || trigger.contains(activeEl));
+                setOpen(false);
+                if (focusIsOnTrigger) {
                     e.stopPropagation(); // Prevent bubbling to modal's Escape handler
                 }
             }
@@ -151,10 +172,10 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
                     'Tooltips should only contain plain text. Use Popover for interactive content.');
             }
         }
-    }, [open, refs.floating, children]);
+    }, [open, refs.floating]);
     if (!open)
         return null;
-    return (_jsx(FloatingPortal, { root: portalRoot, children: _jsx("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', className), style: floatingStyles, children: children }) }));
+    return (_jsx(FloatingPortal, { root: portalRoot, children: _jsxs("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', theme === 'light' && 'is-theme-light', className), style: floatingStyles, onMouseEnter: cancelClose, onMouseLeave: handleClose, children: [children, _jsx(FloatingArrow, { ref: arrowRef, context: context, className: "tui-tooltip__arrow" })] }) }));
 }
 export const Tooltip = TooltipRoot;
 Tooltip.Provider = TooltipProviderComponent;

package/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip';
-export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps, Side, Align, } from './types';
+export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps, TooltipTheme, Side, Align, } from './types';

package/components/Tooltip/types.d.ts

@@ -15,7 +15,9 @@ export type TooltipProviderProps = {
     delayDuration?: number;
     /**
      * Delay in ms before tooltip closes after pointer leaves.
-     * @default 0
+     * Provides a brief window for users to move their pointer to the tooltip
+     * content (partial WCAG 1.4.13 compliance).
+     * @default 150
      */
     closeDelayDuration?: number;
     children: React.ReactNode;
@@ -47,8 +49,22 @@ export type TooltipTriggerProps = {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Accessible label for the non-asChild wrapper span. When `asChild` is false,
+     * the trigger renders as a `<span>` with no semantic role — this label gives
+     * assistive technology a name for the focusable element. Omitting this when
+     * the span wraps non-descriptive content (e.g. an icon) means screen readers
+     * will announce the element with no accessible name.
+     */
+    'aria-label'?: string;
     children: React.ReactNode;
 };
+/**
+ * Visual theme for the tooltip.
+ * - `'dark'` (default): inverted background, high contrast against page content.
+ * - `'light'`: surface background with border, blends with surrounding UI.
+ */
+export type TooltipTheme = 'dark' | 'light';
 export type TooltipContentProps = {
     /**
      * Preferred side of the trigger to place the tooltip.
@@ -65,6 +81,11 @@ export type TooltipContentProps = {
      * @default 8
      */
     sideOffset?: number;
+    /**
+     * Visual theme variant.
+     * @default 'dark'
+     */
+    theme?: TooltipTheme;
     /**
      * Additional CSS class names.
      */
@@ -78,6 +99,12 @@ export type TooltipContextValue = {
     contentId: string;
     delayDuration: number;
     closeDelayDuration: number;
+    /** Open tooltip after delayDuration. Cancels any pending close. */
+    handleOpen: () => void;
+    /** Close tooltip after closeDelayDuration. Cancels any pending open. */
+    handleClose: () => void;
+    /** Cancel any pending close timeout (for WCAG 1.4.13 hover persistence). */
+    cancelClose: () => void;
 };
 /**
  * Convert side + align to Floating UI placement.

package/components/index.d.ts

@@ -11,7 +11,7 @@ export { ChipGroup } from './ChipGroup';
 export { Chips } from './Chips';
 export { ContentIndicator } from './ContentIndicator';
 export { Combobox, ComboboxContent, ComboboxOption, ComboboxGroup, ComboboxLabel, useCombobox } from './Combobox';
-export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator, DropdownHeader, useDropdown } from './Dropdown';
 export { Field } from './Field';
 export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect } from './MultiSelect';
 export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect } from './Select';
@@ -46,7 +46,7 @@ export type { ChipProps } from './Chip';
 export type { ChipGroupProps, ChipGroupSingleProps, ChipGroupMultipleProps } from './ChipGroup';
 export type { ChipsProps, ChipOption } from './Chips';
 export type { ContentIndicatorProps } from './ContentIndicator';
-export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, } from './Dropdown';
+export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, DropdownSeparatorProps, DropdownHeaderProps, } from './Dropdown';
 export type { ComboboxProps, ComboboxContentProps, ComboboxOptionProps, ComboboxGroupProps, ComboboxLabelProps, ComboboxRegisteredOption, } from './Combobox';
 export type { FieldProps } from './Field';
 export type { MultiSelectProps, MultiSelectTriggerProps, MultiSelectContentProps, MultiSelectOptionProps, MultiSelectGroupProps, MultiSelectLabelProps, MultiSelectValue, OptionValue as MultiSelectOptionValue, DisplayMode as MultiSelectDisplayMode, MultiSelectRegisteredOption, } from './MultiSelect';

package/components/index.js

@@ -9,7 +9,7 @@ export { ChipGroup } from './ChipGroup/index.js';
 export { Chips } from './Chips/index.js';
 export { ContentIndicator } from './ContentIndicator/index.js';
 export { Combobox, ComboboxContent, ComboboxOption, ComboboxGroup, ComboboxLabel, useCombobox } from './Combobox/index.js';
-export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown/index.js';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator, DropdownHeader, useDropdown } from './Dropdown/index.js';
 export { Field } from './Field/index.js';
 export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect } from './MultiSelect/index.js';
 export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect } from './Select/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",