@udixio/ui-react 2.9.3 → 2.9.4

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

@@ -5,5 +5,5 @@ import { ToolTipInterface } from '../interfaces';
  * @status beta
  * @category Communication
  */
-export declare const ToolTip: ({ variant, buttons, className, children, title, text, position, targetRef, ref, trigger, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolTip: ({ variant, buttons, className, children, title, text, position, targetRef, ref, trigger, transition, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolTip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolTip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,qGAYrB,WAAW,CAAC,gBAAgB,CAAC,4CA6M/B,CAAC"}
+{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolTip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,iHAarB,WAAW,CAAC,gBAAgB,CAAC,4CA8N/B,CAAC"}

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

@@ -1,6 +1,7 @@
 import { ReactProps } from '../utils';
 import { ButtonInterface } from './button.interface';
 import { ReactNode, RefObject } from 'react';
+import { Transition } from 'motion';
 type Trigger = 'hover' | 'click' | 'focus' | null;
 export type ToolTipInterface<T extends HTMLElement = any> = {
     type: 'div';
@@ -11,6 +12,7 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
         buttons?: ReactProps<ButtonInterface> | ReactProps<ButtonInterface>[];
         position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
         trigger?: Trigger | Trigger[];
+        transition?: Transition;
     } & ({
         children?: never;
         targetRef: RefObject<T>;

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;AAE7C,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;KAC/B,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,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"}

package/dist/lib/styles/fab-menu.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAapE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAGxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAG3B,CAAC"}
+{"version":3,"file":"fab-menu.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAcpE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAGxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAG3B,CAAC"}

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

@@ -7,6 +7,7 @@ export declare const toolStyle: (states: ({
     buttons: any;
     position: any;
     trigger: any;
+    transition: any;
     children: any;
     targetRef: any;
 } | {
@@ -16,6 +17,7 @@ export declare const toolStyle: (states: ({
     buttons: any;
     position: any;
     trigger: any;
+    transition: any;
     children: any;
     targetRef: any;
 }) & (({
@@ -25,6 +27,7 @@ export declare const toolStyle: (states: ({
     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;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;
@@ -41,6 +44,7 @@ export declare const useToolTipStyle: (states: ({
     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;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;

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;AA+BjD,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;AAgCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yFAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;wFAG3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.6",
-    "@udixio/tailwind": "2.4.4"
+    "@udixio/theme": "2.1.7",
+    "@udixio/tailwind": "2.4.5"
   },
   "repository": {
     "type": "git",

package/src/lib/components/ToolTip.tsx

@@ -29,8 +29,11 @@ export const ToolTip = ({
   targetRef,
   ref,
   trigger = ['hover', 'focus'],
+  transition,
   ...props
 }: MotionProps<ToolTipInterface>) => {
+  transition = { duration: 0.3, delay: 0.4, ...transition };
+
   if (!children && !targetRef) {
     throw new Error('ToolTip must have a child or a targetRef');
   }
@@ -50,6 +53,7 @@ export const ToolTip = ({
   const [isVisible, setIsVisible] = useState(false);
 
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const handleUpdate = (event: CustomEvent) => {
@@ -67,9 +71,19 @@ export const ToolTip = ({
 
   useEffect(() => {
     if (timeout.current) clearTimeout(timeout.current);
+    if (showTimeout.current) clearTimeout(showTimeout.current);
 
     if (currentToolTipId) {
-      setIsVisible(currentToolTipId === id);
+      if (currentToolTipId === id) {
+        showTimeout.current = setTimeout(
+          () => {
+            setIsVisible(true);
+          },
+          (transition?.delay ?? 0) * 1000,
+        );
+      } else {
+        setIsVisible(false);
+      }
     } else {
       timeout.current = setTimeout(() => {
         setIsVisible(false);
@@ -188,6 +202,17 @@ export const ToolTip = ({
     children: children as any,
   });
 
+  const variants = {
+    open: {
+      opacity: 1,
+      height: 'auto',
+    },
+    close: {
+      opacity: 0,
+      height: 16,
+    },
+  };
+
   return (
     <>
       {enhancedChildren}
@@ -195,24 +220,17 @@ export const ToolTip = ({
         {isVisible && (
           <SyncedFixedWrapper targetRef={resolvedRef}>
             <motion.div
-              initial={{ opacity: currentToolTipId ? 1 : 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: currentToolTipId ? 0 : 0.3 }}
-              exit={{ opacity: currentToolTipId ? 1 : 0 }}
+              initial={'close'}
+              variants={variants}
+              animate={'open'}
+              transition={{ duration: transition.duration }}
+              exit={'close'}
               className={styles.toolTip}
               {...props}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
-              <motion.div
-                className={styles.container}
-                layoutId={'tool-tip'}
-                transition={{
-                  type: 'spring',
-                  stiffness: 200,
-                  damping: 20,
-                }}
-              >
+              <div className={styles.container}>
                 {title && <div className={styles.subHead}>{title}</div>}
                 <div className={styles.supportingText}>{text}</div>
                 {buttons && (
@@ -228,7 +246,7 @@ export const ToolTip = ({
                       ))}
                   </div>
                 )}
-              </motion.div>
+              </div>
             </motion.div>
           </SyncedFixedWrapper>
         )}

package/src/lib/interfaces/tooltip.interface.ts

@@ -1,6 +1,7 @@
 import { ReactProps } from '../utils';
 import { ButtonInterface } from './button.interface';
 import { ReactNode, RefObject } from 'react';
+import { Transition } from 'motion';
 
 type Trigger = 'hover' | 'click' | 'focus' | null;
 
@@ -21,6 +22,7 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
       | 'bottom-left'
       | 'bottom-right';
     trigger?: Trigger | Trigger[];
+    transition?: Transition;
   } & (
     | {
         children?: never;

package/src/lib/styles/fab-menu.style.ts

@@ -15,6 +15,7 @@ const fabMenuConfig: ClassNameComponent<FabMenuInterface> = ({
   actions: classNames(
     'flex flex-col gap-1 items-end absolute bottom-[calc(100%_+_8px)] right-0',
   ),
+  label: classNames('text-nowrap'),
 });
 
 export const fabMenuStyle = defaultClassNames<FabMenuInterface>(

package/src/lib/styles/tooltip.style.ts

@@ -12,6 +12,9 @@ const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
 }) => ({
   toolTip: classNames(
     ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
+    variant == 'rich' &&
+      'bg-surface-container rounded-2xl text-on-surface-container shadow-2',
+    variant == 'plain' && 'bg-inverse-surface rounded text-inverse-on-surface ',
     {
       'bottom-full left-1/2 -translate-x-1/2': position == 'top',
       'top-full left-1/2 -translate-x-1/2': position == 'bottom',
@@ -25,10 +28,8 @@ const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
   ),
   container: classNames(
     'pb-2',
-    variant == 'rich' &&
-      'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
-    variant == 'plain' &&
-      'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1',
+    variant == 'rich' && 'px-4 pt-3 ',
+    variant == 'plain' && 'px-2 py-1',
   ),
   actions: classNames('flex gap-10 px-1 mt-2', variant == 'plain' && 'hidden'),
   subHead: classNames('text-title-small mb-1', variant == 'plain' && 'hidden'),