@affinda/react 0.0.25 → 0.0.27

package/dist/components/AfSelect.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface AfSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface AfSelectProps {
+    /** Array of options to display */
+    options: AfSelectOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Placeholder text when no value is selected */
+    placeholder?: string;
+    /** Label text for the select */
+    label?: string;
+    /** Description text below the label */
+    description?: string;
+    /** Error message to display */
+    error?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfSelect - Draft dropdown select component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfSelect: React.FC<AfSelectProps>;

package/dist/components/AfSelect.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+/**
+ * AfSelect - Draft dropdown select component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfSelect = ({ options, value, placeholder = 'Select an option', label, description, error, disabled = false, required = false, onChange, style, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value || '');
+    const containerRef = useRef(null);
+    const selectedOption = options.find(opt => opt.value === selectedValue);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleSelect = (optionValue) => {
+        setSelectedValue(optionValue);
+        setIsOpen(false);
+        onChange?.(optionValue);
+    };
+    const baseStyles = {
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        fontSize: '16px',
+    };
+    const triggerStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        border: `1px solid ${error ? 'var(--colour-feedback-error, #dc3545)' : 'var(--colour-tints-inkwell-100, #e0e5e6)'}`,
+        background: disabled ? 'var(--colour-background-level1, #f5f5f5)' : 'var(--colour-background-white, #fff)',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+        color: selectedValue ? 'var(--colour-brand-inkwell, #14343b)' : 'var(--colour-tints-inkwell-400, #7a8a8d)',
+        width: '100%',
+        boxSizing: 'border-box',
+    };
+    const dropdownStyles = {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        marginTop: '4px',
+        background: 'var(--colour-background-white, #fff)',
+        border: '1px solid var(--colour-tints-inkwell-100, #e0e5e6)',
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        zIndex: 100,
+        maxHeight: '240px',
+        overflow: 'auto',
+    };
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', ...baseStyles, ...style }, children: [label && (_jsxs("label", { style: { display: 'block', marginBottom: '4px', fontWeight: 500, color: 'var(--colour-brand-inkwell, #14343b)' }, children: [label, required && _jsx("span", { style: { color: 'var(--colour-feedback-error, #dc3545)' }, children: " *" })] })), description && (_jsx("p", { style: { margin: '0 0 8px', fontSize: '14px', color: 'var(--colour-tints-inkwell-400, #7a8a8d)' }, children: description })), _jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), style: triggerStyles, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("span", { children: selectedOption?.label || placeholder }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { transform: isOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }, children: _jsx("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), isOpen && (_jsx("ul", { style: dropdownStyles, role: "listbox", children: options.map((option) => (_jsx("li", { role: "option", "aria-selected": option.value === selectedValue, onClick: () => !option.disabled && handleSelect(option.value), style: {
+                        padding: '12px 16px',
+                        cursor: option.disabled ? 'not-allowed' : 'pointer',
+                        opacity: option.disabled ? 0.5 : 1,
+                        background: option.value === selectedValue ? 'var(--colour-tints-mist-green-100, #e8f0ee)' : 'transparent',
+                        listStyle: 'none',
+                    }, onMouseEnter: (e) => {
+                        if (!option.disabled)
+                            e.currentTarget.style.background = 'var(--colour-tints-mist-green-50, #f4f8f7)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.background = option.value === selectedValue ? 'var(--colour-tints-mist-green-100, #e8f0ee)' : 'transparent';
+                    }, children: option.label }, option.value))) })), error && (_jsx("p", { style: { margin: '4px 0 0', fontSize: '14px', color: 'var(--colour-feedback-error, #dc3545)' }, children: error }))] }));
+};

package/dist/components/AfSkeleton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface AfSkeletonProps {
+    /** Width of the skeleton */
+    width?: string | number;
+    /** Height of the skeleton */
+    height?: string | number;
+    /** Shape of the skeleton */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfSkeleton - Draft skeleton loading placeholder component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfSkeleton: React.FC<AfSkeletonProps>;

package/dist/components/AfSkeleton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AfSkeleton - Draft skeleton loading placeholder component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfSkeleton = ({ width = '100%', height, variant = 'text', animate = true, style, }) => {
+    const keyframes = `
+    @keyframes af-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  `;
+    const getHeight = () => {
+        if (height)
+            return height;
+        switch (variant) {
+            case 'text':
+                return '1em';
+            case 'circular':
+                return width;
+            case 'rectangular':
+                return '100px';
+            default:
+                return '1em';
+        }
+    };
+    const getBorderRadius = () => {
+        switch (variant) {
+            case 'text':
+                return '4px';
+            case 'circular':
+                return '50%';
+            case 'rectangular':
+                return '8px';
+            default:
+                return '4px';
+        }
+    };
+    const skeletonStyles = {
+        display: 'block',
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof getHeight() === 'number' ? `${getHeight()}px` : getHeight(),
+        borderRadius: getBorderRadius(),
+        background: 'var(--colour-tints-inkwell-100, #e0e5e6)',
+        animation: animate ? 'af-skeleton-pulse 1.5s ease-in-out infinite' : 'none',
+        ...style,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: keyframes }), _jsx("span", { style: skeletonStyles, "aria-hidden": "true" })] }));
+};

package/dist/components/AfSpinner.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface AfSpinnerProps {
+    /**
+     * Size of the spinner.
+     * - 'small' (16px), 'medium' (24px), 'large' (40px) for standalone usage
+     * - number (e.g. 20) for pixel size - use this when inside a button slot to match icon sizing
+     */
+    size?: 'small' | 'medium' | 'large' | number;
+    /**
+     * Color variant of the spinner - automatically picks theme-appropriate colors.
+     * Use 'currentColor' when inside a button to inherit the button's icon color.
+     */
+    variant?: 'inkwell' | 'white' | 'mist-green' | 'soft-clay' | 'currentColor';
+    /**
+     * Custom color override - takes precedence over variant.
+     * @deprecated Use variant prop instead for theme-aware colors
+     */
+    color?: string;
+    /** Accessible label */
+    label?: string;
+    /** Additional CSS class names */
+    className?: string;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+    /** Slot name for use inside web components (e.g. 'icon-left' for AfButton) */
+    slot?: string;
+}
+/**
+ * AfSpinner - Loading spinner component.
+ *
+ * Supports theme-aware color variants and can be used standalone or inside buttons.
+ * When used in a button, place in the icon-left or icon-right slot and use
+ * a numeric size (e.g. size={20}) with variant="currentColor" to match icon sizing.
+ *
+ * @example
+ * ```tsx
+ * // Standalone usage
+ * <AfSpinner size="medium" variant="inkwell" />
+ *
+ * // In a button with proper slot placement (matches icon sizing)
+ * <AfButton variant="primary" disabled>
+ *   <AfSpinner slot="icon-left" size={20} variant="currentColor" />
+ *   Loading...
+ * </AfButton>
+ * ```
+ */
+export declare const AfSpinner: React.FC<AfSpinnerProps>;

package/dist/components/AfSpinner.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const variantColors = {
+    'inkwell': 'var(--colour-brand-inkwell, #14343b)',
+    'white': 'var(--colour-brand-white, #ffffff)',
+    'mist-green': 'var(--colour-brand-mist-green, #c6d5d1)',
+    'soft-clay': 'var(--colour-brand-soft-clay, #b09670)',
+    'currentColor': 'currentColor',
+};
+/**
+ * AfSpinner - Loading spinner component.
+ *
+ * Supports theme-aware color variants and can be used standalone or inside buttons.
+ * When used in a button, place in the icon-left or icon-right slot and use
+ * a numeric size (e.g. size={20}) with variant="currentColor" to match icon sizing.
+ *
+ * @example
+ * ```tsx
+ * // Standalone usage
+ * <AfSpinner size="medium" variant="inkwell" />
+ *
+ * // In a button with proper slot placement (matches icon sizing)
+ * <AfButton variant="primary" disabled>
+ *   <AfSpinner slot="icon-left" size={20} variant="currentColor" />
+ *   Loading...
+ * </AfButton>
+ * ```
+ */
+export const AfSpinner = ({ size = 'medium', variant = 'inkwell', color, label = 'Loading', className, style, slot, }) => {
+    const sizeMap = {
+        small: 16,
+        medium: 24,
+        large: 40,
+    };
+    // Support both named sizes and numeric pixel values
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const strokeWidth = dimension <= 16 ? 2 : dimension >= 40 ? 4 : 3;
+    // Use explicit color if provided, otherwise use variant color
+    const strokeColor = color ?? variantColors[variant] ?? variantColors['inkwell'];
+    const spinnerStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: dimension,
+        height: dimension,
+        ...style,
+    };
+    const keyframes = `
+    @keyframes af-spinner-rotate {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+  `;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: keyframes }), _jsxs("div", { slot: slot, className: className, style: spinnerStyles, role: "status", "aria-label": label, children: [_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", style: { animation: 'af-spinner-rotate 1s linear infinite' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: strokeColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: "31.4 31.4", opacity: "0.25" }), _jsx("circle", { cx: "12", cy: "12", r: "10", stroke: strokeColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: "31.4 31.4", strokeDashoffset: "23.55" })] }), _jsx("span", { style: { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', border: 0 }, children: label })] })] }));
+};

package/dist/components/{Tab.d.ts → AfTab.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-export type TabShape = 'square' | 'pill';
-export interface TabProps {
+export type AfTabShape = 'square' | 'pill';
+export interface AfTabProps {
     /** The text label for the tab */
     label: string;
     /** Whether the tab is currently active/selected */
@@ -8,7 +8,7 @@ export interface TabProps {
     /** Whether the tab is disabled */
     disabled?: boolean;
     /** Visual shape variant */
-    shape?: TabShape;
+    shape?: AfTabShape;
     /** Whether to show the icon slot */
     displayIcon?: boolean;
     /** Whether to show the number badge slot */
@@ -27,7 +27,7 @@ export interface TabProps {
     children?: React.ReactNode;
 }
 /**
- * Tab component for use within a TabBar.
+ * AfTab component for use within an AfTabBar.
  * Represents an individual selectable tab with support for icons and number badges.
  */
-export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export declare const AfTab: React.ForwardRefExoticComponent<AfTabProps & React.RefAttributes<HTMLElement>>;

package/dist/components/{Tab.js → AfTab.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 /**
- * Tab component for use within a TabBar.
+ * AfTab component for use within an AfTabBar.
  * Represents an individual selectable tab with support for icons and number badges.
  */
-export const Tab = React.forwardRef(({ label, active, disabled, shape, displayIcon, displayNumber, value, className, style, onAfTabClick, children, ...props }, ref) => {
+export const AfTab = React.forwardRef(({ label, active, disabled, shape, displayIcon, displayNumber, value, className, style, onAfTabClick, children, ...props }, ref) => {
     const tabRef = React.useRef(null);
     React.useEffect(() => {
         const el = tabRef.current;
@@ -29,4 +29,4 @@ export const Tab = React.forwardRef(({ label, active, disabled, shape, displayIc
         ...props,
     }, children);
 });
-Tab.displayName = 'Tab';
+AfTab.displayName = 'AfTab';

package/dist/components/AfTabBar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type AfTabBarShape = 'square' | 'pill';
+export type AfTabBarBreakpoint = 'mobile' | 'desktop';
+export interface AfTabBarProps {
+    /** Visual shape variant for all tabs */
+    shape?: AfTabBarShape;
+    /** Responsive breakpoint mode */
+    breakpoint?: AfTabBarBreakpoint;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Tab elements */
+    children?: React.ReactNode;
+}
+/**
+ * AfTabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ */
+export declare const AfTabBar: React.ForwardRefExoticComponent<AfTabBarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/{TabBar.js → AfTabBar.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 /**
- * TabBar component that contains and manages a group of tabs.
+ * AfTabBar component that contains and manages a group of tabs.
  * Provides horizontal layout, keyboard navigation, and consistent styling.
  */
-export const TabBar = React.forwardRef(({ shape, breakpoint, className, style, children, ...props }, ref) => {
+export const AfTabBar = React.forwardRef(({ shape, breakpoint, className, style, children, ...props }, ref) => {
     return React.createElement('af-tab-bar', {
         ref,
         shape,
@@ -13,4 +13,4 @@ export const TabBar = React.forwardRef(({ shape, breakpoint, className, style, c
         ...props,
     }, children);
 });
-TabBar.displayName = 'TabBar';
+AfTabBar.displayName = 'AfTabBar';

package/dist/components/AfToast.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type AfToastVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AfToastProps {
+    /** Toast message */
+    message: string;
+    /** Toast variant */
+    variant?: AfToastVariant;
+    /** Whether the toast is visible */
+    isVisible: boolean;
+    /** Callback when toast should close */
+    onClose: () => void;
+    /** Auto-dismiss duration in ms (0 to disable) */
+    duration?: number;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfToast - Draft toast/notification component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfToast: React.FC<AfToastProps>;

package/dist/components/AfToast.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/**
+ * AfToast - Draft toast/notification component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfToast = ({ message, variant = 'info', isVisible, onClose, duration = 5000, style, }) => {
+    const [isExiting, setIsExiting] = useState(false);
+    useEffect(() => {
+        if (isVisible && duration > 0) {
+            const timer = setTimeout(() => {
+                setIsExiting(true);
+                setTimeout(onClose, 200);
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [isVisible, duration, onClose]);
+    if (!isVisible)
+        return null;
+    const variantStyles = {
+        info: {
+            bg: 'var(--colour-tints-mist-green-100, #e8f0ee)',
+            border: 'var(--colour-brand-mist-green, #c6d5d1)',
+            icon: 'ℹ️',
+        },
+        success: {
+            bg: 'var(--colour-tints-mist-green-100, #e8f0ee)',
+            border: 'var(--colour-brand-azure, #7fe2d4)',
+            icon: '✓',
+        },
+        warning: {
+            bg: 'var(--colour-tints-softclay-100, #f5efe6)',
+            border: 'var(--colour-brand-soft-clay, #b09670)',
+            icon: '⚠',
+        },
+        error: {
+            bg: '#fef2f2',
+            border: '#fca5a5',
+            icon: '✕',
+        },
+    };
+    const currentVariant = variantStyles[variant];
+    const toastStyles = {
+        position: 'fixed',
+        bottom: '24px',
+        right: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '14px 20px',
+        background: currentVariant.bg,
+        border: `1px solid ${currentVariant.border}`,
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        fontSize: '14px',
+        color: 'var(--colour-brand-inkwell, #14343b)',
+        zIndex: 1200,
+        transform: isExiting ? 'translateX(120%)' : 'translateX(0)',
+        opacity: isExiting ? 0 : 1,
+        transition: 'transform 0.2s ease, opacity 0.2s ease',
+        ...style,
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--colour-tints-inkwell-400, #7a8a8d)',
+        marginLeft: '8px',
+    };
+    return (_jsxs("div", { style: toastStyles, role: "alert", children: [_jsx("span", { style: { fontSize: '16px' }, children: currentVariant.icon }), _jsx("span", { style: { flex: 1 }, children: message }), _jsx("button", { type: "button", onClick: () => { setIsExiting(true); setTimeout(onClose, 200); }, style: closeButtonStyles, "aria-label": "Dismiss", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
+};

package/dist/components/AfTooltip.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface AfTooltipProps {
+    /** Tooltip content */
+    content: React.ReactNode;
+    /** Element that triggers the tooltip */
+    children: React.ReactElement;
+    /** Position of the tooltip */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing tooltip (ms) */
+    delay?: number;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfTooltip - Draft tooltip component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfTooltip: React.FC<AfTooltipProps>;

package/dist/components/AfTooltip.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+/**
+ * AfTooltip - Draft tooltip component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfTooltip = ({ content, children, position = 'top', delay = 200, style, }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef();
+    const updatePosition = () => {
+        if (!triggerRef.current || !tooltipRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - gap;
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + gap;
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                left = triggerRect.left - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                left = triggerRect.right + gap;
+                break;
+        }
+        setCoords({ top, left });
+    };
+    // Use useLayoutEffect to position the tooltip before paint
+    useLayoutEffect(() => {
+        if (isVisible) {
+            updatePosition();
+        }
+    }, [isVisible, position]);
+    const handleMouseEnter = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    };
+    const tooltipStyles = {
+        position: 'fixed',
+        top: coords.top,
+        left: coords.left,
+        background: 'var(--colour-brand-inkwell, #14343b)',
+        color: 'var(--colour-background-white, #fff)',
+        padding: '8px 12px',
+        borderRadius: '6px',
+        fontSize: '14px',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        zIndex: 1100,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.15s ease',
+        ...style,
+    };
+    const tooltipElement = isVisible ? (_jsx("div", { ref: tooltipRef, style: tooltipStyles, role: "tooltip", children: content })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, style: { display: 'inline-block' }, children: children }), tooltipElement && createPortal(tooltipElement, document.body)] }));
+};