@udixio/ui-react 2.9.7 → 2.9.9

package/dist/lib/components/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { MotionProps } from '../utils';
+import { ToolTipInterface } from '../interfaces';
+/**
+ * Tooltips display brief labels or messages
+ * @status beta
+ * @category Communication
+ */
+export declare const Tooltip: ({ variant, buttons, className, children, title, text, content, position: positionProp, targetRef, ref, trigger, transition, openDelay, closeDelay, isOpen: isOpenProp, defaultOpen, onOpenChange, id, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/lib/components/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,kNAoBrB,WAAW,CAAC,gBAAgB,CAAC,4CAyI/B,CAAC"}

package/dist/lib/components/index.d.ts

@@ -23,5 +23,5 @@ export * from './TabPanel';
 export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';
-export * from './ToolTip';
+export * from './Tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/effects/State.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/State.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAGlB,UAAU,EACX,MAAM,UAAU,CAAC;AAGlB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,CAAC,EACX,MAAM,GACN,oBAAoB,GACpB,aAAa,GACb,aAAa,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,YAAY,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,GAAI,kDAKnB,UAAU,CAAC,cAAc,CAAC,4CAqC5B,CAAC;AAYF,eAAO,MAAM,aAAa;cA1DJ,OAAO;;eATd,MAAM;qBAEb,MAAM,GACN,oBAAoB,GACpB,aAAa,GACb,aAAa;gBACL,MAAM;YACV,KAAK,CAAC,aAAa;;;kCA+D9B,CAAC"}
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/State.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAGlB,UAAU,EACX,MAAM,UAAU,CAAC;AAGlB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,CAAC,EACX,MAAM,GACN,oBAAoB,GACpB,aAAa,GACb,aAAa,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,YAAY,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,GAAI,kDAKnB,UAAU,CAAC,cAAc,CAAC,4CAyC5B,CAAC;AAYF,eAAO,MAAM,aAAa;cA9DJ,OAAO;;eATd,MAAM;qBAEb,MAAM,GACN,oBAAoB,GACpB,aAAa,GACb,aAAa;gBACL,MAAM;YACV,KAAK,CAAC,aAAa;;;kCAmE9B,CAAC"}

package/dist/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useTooltipTrigger } from './useTooltipTrigger';
+export type { UseTooltipTriggerOptions, UseTooltipTriggerReturn, } from './useTooltipTrigger';
+export { useTooltipPosition } from './useTooltipPosition';
+export type { UseTooltipPositionOptions, UseTooltipPositionReturn, } from './useTooltipPosition';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}

package/dist/lib/hooks/useTooltipPosition.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Variant = 'plain' | 'rich';
+export interface UseTooltipPositionOptions {
+    targetRef: RefObject<HTMLElement | null>;
+    position?: Position;
+    variant?: Variant;
+    isOpen: boolean;
+}
+export interface UseTooltipPositionReturn {
+    resolvedPosition: Position;
+}
+/**
+ * Hook to calculate tooltip position using useLayoutEffect.
+ * Auto-flips position if not enough viewport space.
+ *
+ * For plain variant: prefers left/right, falls back to top/bottom
+ * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
+ */
+export declare function useTooltipPosition({ targetRef, position: positionProp, variant, isOpen, }: UseTooltipPositionOptions): UseTooltipPositionReturn;
+export {};
+//# sourceMappingURL=useTooltipPosition.d.ts.map

package/dist/lib/hooks/useTooltipPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipPosition.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,KAAK,QAAQ,GACT,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,QAAQ,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,OAAiB,EACjB,MAAM,GACP,EAAE,yBAAyB,GAAG,wBAAwB,CAyDtD"}

package/dist/lib/hooks/useTooltipTrigger.d.ts

@@ -0,0 +1,44 @@
+type Trigger = 'hover' | 'click' | 'focus' | null;
+type TooltipState = 'hidden' | 'hovered' | 'focused' | 'clicked';
+export interface UseTooltipTriggerOptions {
+    trigger?: Trigger | Trigger[];
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openDelay?: number;
+    closeDelay?: number;
+    id?: string;
+}
+export interface UseTooltipTriggerReturn {
+    triggerProps: {
+        'aria-describedby': string | undefined;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+    };
+    tooltipProps: {
+        id: string;
+        role: 'tooltip';
+        'aria-hidden': boolean;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    isOpen: boolean;
+    state: TooltipState;
+}
+/**
+ * Hook to manage tooltip trigger state machine, events, and accessibility props.
+ *
+ * State Machine:
+ * - States: hidden | hovered | focused | clicked
+ * - Priority: clicked > focused > hovered > hidden
+ * - Focus takes priority over hover (don't close on mouse leave if focused)
+ * - Escape key closes tooltip from any open state
+ * - Click toggles for 'click' trigger
+ */
+export declare function useTooltipTrigger({ trigger, isOpen: isOpenProp, defaultOpen, onOpenChange, openDelay, closeDelay, id: idProp, }?: UseTooltipTriggerOptions): UseTooltipTriggerReturn;
+export {};
+//# sourceMappingURL=useTooltipTrigger.d.ts.map

package/dist/lib/hooks/useTooltipTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipTrigger.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useTooltipTrigger.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE;QACZ,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;QACvC,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;KACjD,CAAC;IACF,YAAY,EAAE;QACZ,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,SAAS,CAAC;QAChB,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;IACF,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAA4B,EAC5B,MAAM,EAAE,UAAU,EAClB,WAAmB,EACnB,YAAY,EACZ,SAAe,EACf,UAAgB,EAChB,EAAE,EAAE,MAAM,GACX,GAAE,wBAA6B,GAAG,uBAAuB,CAsNzD"}

package/dist/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './effects';
+export * from './hooks';
 export * from './icon';
 export * from './interfaces';
 export * from './styles';

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/lib/interfaces/tooltip.interface.d.ts

@@ -8,11 +8,26 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
     props: {
         variant?: 'plain' | 'rich';
         title?: string;
-        text: string;
+        /** Supporting text for the tooltip. Optional when using `content` prop. */
+        text?: string;
+        /** Custom content slot that replaces title/text/buttons when provided */
+        content?: ReactNode;
         buttons?: ReactProps<ButtonInterface> | ReactProps<ButtonInterface>[];
         position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
         trigger?: Trigger | Trigger[];
         transition?: Transition;
+        /** Delay in milliseconds before showing the tooltip. Default: 400ms */
+        openDelay?: number;
+        /** Delay in milliseconds before hiding the tooltip. Default: 150ms */
+        closeDelay?: number;
+        /** Controlled mode: explicitly control whether the tooltip is open */
+        isOpen?: boolean;
+        /** Uncontrolled mode: default open state */
+        defaultOpen?: boolean;
+        /** Callback when the open state changes */
+        onOpenChange?: (open: boolean) => void;
+        /** Custom ID for accessibility linking. Auto-generated if not provided. */
+        id?: string;
     } & ({
         children?: never;
         targetRef: RefObject<T>;
@@ -20,7 +35,14 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
         children: ReactNode;
         targetRef?: never;
     });
-    elements: ['toolTip', 'container', 'subHead', 'supportingText', 'actions'];
+    elements: [
+        'toolTip',
+        'container',
+        'subHead',
+        'supportingText',
+        'actions',
+        'content'
+    ];
 };
 export {};
 //# sourceMappingURL=tooltip.interface.d.ts.map

package/dist/lib/interfaces/tooltip.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;CAC5E,CAAC"}
+{"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,2EAA2E;QAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yEAAyE;QACzE,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,uEAAuE;QACvE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sEAAsE;QACtE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sEAAsE;QACtE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,4CAA4C;QAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,2CAA2C;QAC3C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACvC,2EAA2E;QAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE;QACR,SAAS;QACT,WAAW;QACX,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,SAAS;KACV,CAAC;CACH,CAAC"}

package/dist/lib/styles/card.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/card.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAclB,eAAO,MAAM,SAAS;;;;;;;;;;2CAAuD,CAAC;AAE9E,eAAO,MAAM,YAAY;;;;;;2CAGxB,CAAC"}
+{"version":3,"file":"card.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/card.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAiBlB,eAAO,MAAM,SAAS;;;;;;;;;;2CAAuD,CAAC;AAE9E,eAAO,MAAM,YAAY;;;;;;2CAGxB,CAAC"}

package/dist/lib/styles/tooltip.style.d.ts

@@ -4,30 +4,51 @@ export declare const toolStyle: (states: ({
     variant: any;
     title: any;
     text: any;
+    content: any;
     buttons: any;
     position: any;
     trigger: any;
     transition: any;
+    openDelay: any;
+    closeDelay: any;
+    isOpen: any;
+    defaultOpen: any;
+    onOpenChange: any;
+    id: any;
     children: any;
     targetRef: any;
 } | {
     variant: any;
     title: any;
     text: any;
+    content: any;
     buttons: any;
     position: any;
     trigger: any;
     transition: any;
+    openDelay: any;
+    closeDelay: any;
+    isOpen: any;
+    defaultOpen: any;
+    onOpenChange: any;
+    id: any;
     children: any;
     targetRef: any;
 }) & (({
     variant?: "plain" | "rich";
     title?: string;
-    text: string;
+    text?: string;
+    content?: import('react').ReactNode;
     buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
     position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
     transition?: import('motion').Transition;
+    openDelay?: number;
+    closeDelay?: number;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;
@@ -36,15 +57,22 @@ export declare const toolStyle: (states: ({
     targetRef: import('react').RefObject<any>;
 })) & {
     className: string | ClassNameComponent<ToolTipInterface> | undefined;
-})) => Record<"container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
+})) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
 export declare const useToolTipStyle: (states: ({
     variant?: "plain" | "rich";
     title?: string;
-    text: string;
+    text?: string;
+    content?: import('react').ReactNode;
     buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
     position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
     transition?: import('motion').Transition;
+    openDelay?: number;
+    closeDelay?: number;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;
@@ -53,5 +81,5 @@ export declare const useToolTipStyle: (states: ({
     targetRef: import('react').RefObject<any>;
 })) & {
     className?: string | ClassNameComponent<ToolTipInterface> | undefined;
-}) => Record<"container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
+}) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
 //# sourceMappingURL=tooltip.style.d.ts.map

package/dist/lib/styles/tooltip.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAgCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yFAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;wFAG3B,CAAC"}
+{"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;oGAG3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.10",
-    "@udixio/tailwind": "2.4.8"
+    "@udixio/theme": "2.1.11",
+    "@udixio/tailwind": "2.4.9"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Fab.tsx

@@ -5,7 +5,7 @@ import { FabInterface } from '../interfaces/fab.interface';
 import { useFabStyle } from '../styles/fab.style';
 import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
-import { ToolTip } from './ToolTip';
+import { Tooltip } from './Tooltip';
 import { State } from '../effects';
 
 /**
@@ -86,7 +86,7 @@ export const Fab = ({
       aria-label={extended ? undefined : label}
       className={styles.fab}
     >
-      <ToolTip
+      <Tooltip
         trigger={extended ? null : undefined}
         text={label}
         targetRef={resolvedRef}

package/src/lib/components/IconButton.tsx

@@ -6,7 +6,7 @@ import { useIconButtonStyle } from '../styles/icon-button.style';
 import { ReactProps } from '../utils/component';
 import { State } from '../effects';
 import { classNames } from '../utils';
-import { ToolTip } from './ToolTip';
+import { Tooltip } from './Tooltip';
 
 export type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
 
@@ -104,11 +104,11 @@ export const IconButton = ({
       onClick={handleClick}
       ref={resolvedRef}
     >
-      <ToolTip
+      <Tooltip
         targetRef={resolvedRef}
         trigger={disabled ? null : undefined}
         text={title}
-      ></ToolTip>
+      ></Tooltip>
 
       <div className={styles.touchTarget} />
       <State

package/src/lib/components/Tooltip.tsx

@@ -0,0 +1,172 @@
+import { cloneElement, isValidElement, useRef } from 'react';
+import { MotionProps } from '../utils';
+import { Button } from './Button';
+import { ToolTipInterface } from '../interfaces';
+import { useToolTipStyle } from '../styles';
+import { AnimatePresence, motion } from 'motion/react';
+import { SyncedFixedWrapper } from '../effects';
+import { useTooltipTrigger, useTooltipPosition } from '../hooks';
+
+/**
+ * Tooltips display brief labels or messages
+ * @status beta
+ * @category Communication
+ */
+export const Tooltip = ({
+  variant = 'plain',
+  buttons,
+  className,
+  children,
+  title,
+  text,
+  content,
+  position: positionProp,
+  targetRef,
+  ref,
+  trigger = ['hover', 'focus'],
+  transition,
+  openDelay = 400,
+  closeDelay = 150,
+  isOpen: isOpenProp,
+  defaultOpen = false,
+  onOpenChange,
+  id,
+  ...props
+}: MotionProps<ToolTipInterface>) => {
+  transition = { duration: 0.3, ...transition };
+
+  if (!children && !targetRef) {
+    throw new Error('Tooltip must have a child or a targetRef');
+  }
+
+  if (buttons && !Array.isArray(buttons)) {
+    buttons = [buttons];
+  }
+
+  const internalRef = useRef<HTMLElement | null>(null);
+  const resolvedRef = targetRef || internalRef;
+
+  // Use the trigger hook for state management and accessibility
+  const { triggerProps, tooltipProps, isOpen } = useTooltipTrigger({
+    trigger,
+    isOpen: isOpenProp,
+    defaultOpen,
+    onOpenChange,
+    openDelay,
+    closeDelay,
+    id,
+  });
+
+  // Use the position hook for auto-positioning
+  const { resolvedPosition } = useTooltipPosition({
+    targetRef: resolvedRef,
+    position: positionProp,
+    variant,
+    isOpen,
+  });
+
+  // Apply trigger props to the target element
+  const enhancedChildren =
+    !targetRef && isValidElement(children)
+      ? cloneElement(children, {
+          ref: internalRef,
+          ...triggerProps,
+          // Merge event handlers if the child already has them
+          onMouseEnter: (e: React.MouseEvent) => {
+            triggerProps.onMouseEnter();
+            (children.props as any)?.onMouseEnter?.(e);
+          },
+          onMouseLeave: (e: React.MouseEvent) => {
+            triggerProps.onMouseLeave();
+            (children.props as any)?.onMouseLeave?.(e);
+          },
+          onFocus: (e: React.FocusEvent) => {
+            triggerProps.onFocus();
+            (children.props as any)?.onFocus?.(e);
+          },
+          onBlur: (e: React.FocusEvent) => {
+            triggerProps.onBlur();
+            (children.props as any)?.onBlur?.(e);
+          },
+          onClick: (e: React.MouseEvent) => {
+            triggerProps.onClick();
+            (children.props as any)?.onClick?.(e);
+          },
+          onKeyDown: (e: React.KeyboardEvent) => {
+            triggerProps.onKeyDown(e);
+            (children.props as any)?.onKeyDown?.(e);
+          },
+        } as any)
+      : children;
+
+  const styles = useToolTipStyle({
+    variant,
+    buttons,
+    className,
+    title,
+    text,
+    position: resolvedPosition,
+    trigger,
+    targetRef: targetRef as any,
+    children: children as any,
+  });
+
+  const variants = {
+    open: {
+      opacity: 1,
+      height: 'auto',
+    },
+    close: {
+      opacity: 0,
+      height: 16,
+    },
+  };
+
+  return (
+    <>
+      {enhancedChildren}
+      <AnimatePresence>
+        {isOpen && (
+          <SyncedFixedWrapper targetRef={resolvedRef}>
+            <motion.div
+              initial={'close'}
+              variants={variants}
+              animate={'open'}
+              transition={{ duration: transition.duration }}
+              exit={'close'}
+              className={styles.toolTip}
+              {...props}
+              {...tooltipProps}
+            >
+              <div className={styles.container}>
+                {content ? (
+                  <div className={styles.content}>{content}</div>
+                ) : (
+                  <>
+                    {title && <div className={styles.subHead}>{title}</div>}
+                    {text && (
+                      <div className={styles.supportingText}>{text}</div>
+                    )}
+                    {buttons && (
+                      <div className={styles.actions}>
+                        {Array.isArray(buttons) &&
+                          buttons.map((buttonArgs, index) => (
+                            <Button
+                              key={index}
+                              size={'small'}
+                              variant={'text'}
+                              {...buttonArgs}
+                            />
+                          ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </motion.div>
+          </SyncedFixedWrapper>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

package/src/lib/components/index.ts

@@ -23,4 +23,4 @@ export * from './TabPanel';
 export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';
-export * from './ToolTip';
+export * from './Tooltip';

package/src/lib/effects/State.tsx

@@ -44,9 +44,13 @@ export const State = ({
     if (ref.current && stateClassName !== 'state-layer') {
       const groupName = !stateClassName.includes('[')
         ? 'group'
-        : stateClassName.split('[')[1].split(']')[0];
+        : 'group/' + stateClassName.split('[')[1].split(']')[0];
+
+      // On échappe le slash pour le sélecteur CSS
+      const safeGroupName = groupName.replace(/\//g, '\\/');
+
       const furthestGroupState = ref.current.closest(
-        `.${groupName}:not(.${groupName} .${groupName})`,
+        `.${safeGroupName}:not(.${safeGroupName} .${safeGroupName})`,
       );
       groupStateRef.current = furthestGroupState as HTMLElement | null;
     }

package/src/lib/hooks/index.ts

@@ -0,0 +1,11 @@
+export { useTooltipTrigger } from './useTooltipTrigger';
+export type {
+  UseTooltipTriggerOptions,
+  UseTooltipTriggerReturn,
+} from './useTooltipTrigger';
+
+export { useTooltipPosition } from './useTooltipPosition';
+export type {
+  UseTooltipPositionOptions,
+  UseTooltipPositionReturn,
+} from './useTooltipPosition';

package/src/lib/hooks/useTooltipPosition.ts

@@ -0,0 +1,95 @@
+import { RefObject, useLayoutEffect, useState } from 'react';
+
+type Position =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+type Variant = 'plain' | 'rich';
+
+export interface UseTooltipPositionOptions {
+  targetRef: RefObject<HTMLElement | null>;
+  position?: Position;
+  variant?: Variant;
+  isOpen: boolean;
+}
+
+export interface UseTooltipPositionReturn {
+  resolvedPosition: Position;
+}
+
+/**
+ * Hook to calculate tooltip position using useLayoutEffect.
+ * Auto-flips position if not enough viewport space.
+ *
+ * For plain variant: prefers left/right, falls back to top/bottom
+ * For rich variant: uses corner positions (top-left, top-right, bottom-left, bottom-right)
+ */
+export function useTooltipPosition({
+  targetRef,
+  position: positionProp,
+  variant = 'plain',
+  isOpen,
+}: UseTooltipPositionOptions): UseTooltipPositionReturn {
+  const [resolvedPosition, setResolvedPosition] = useState<Position>(
+    positionProp ?? 'bottom',
+  );
+
+  useLayoutEffect(() => {
+    // If position is explicitly set, use it
+    if (positionProp) {
+      setResolvedPosition(positionProp);
+      return;
+    }
+
+    // Only calculate if open and we have a target
+    if (!isOpen || !targetRef.current || typeof window === 'undefined') {
+      return;
+    }
+
+    const targetElement = targetRef.current;
+    const rect = targetElement.getBoundingClientRect();
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Normalized position (0-1 range)
+    const x = rect.left / viewportWidth;
+    const y = rect.top / viewportHeight;
+
+    let newPosition: Position;
+
+    if (variant === 'plain') {
+      // Plain variant: prefer horizontal positioning, fall back to vertical
+      if (x < 1 / 3) {
+        newPosition = 'right';
+      } else if (x > 2 / 3) {
+        newPosition = 'left';
+      } else {
+        newPosition = y > 0.5 ? 'top' : 'bottom';
+      }
+    } else {
+      // Rich variant: use corner positions
+      if (x < 0.5 && y < 0.5) {
+        newPosition = 'bottom-right';
+      } else if (x >= 0.5 && y < 0.5) {
+        newPosition = 'bottom-left';
+      } else if (x >= 0.5 && y >= 0.5) {
+        newPosition = 'top-left';
+      } else {
+        newPosition = 'top-right';
+      }
+    }
+
+    setResolvedPosition(newPosition);
+  }, [isOpen, targetRef, positionProp, variant]);
+
+  return {
+    resolvedPosition,
+  };
+}