@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/components/overlays/Toast/useProgressToast.js

@@ -0,0 +1,156 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useToastContext } from "../Notifications/NotificationContext.js";
+import { useEffect, useRef } from "react";
+
+//#region src/components/overlays/Toast/useProgressToast.ts
+const RESULT_DURATION = 3e3;
+/**
+* Check if the options represent an "empty" value (null, undefined, false, or empty object).
+* When empty, the hook should immediately remove any existing toast.
+*/
+function isEmptyOptions(options) {
+	if (options == null || options === false) return true;
+	if (typeof options === "object" && Object.keys(options).length === 0) return true;
+	return false;
+}
+function getStringValue(value) {
+	return typeof value === "string" ? value : void 0;
+}
+/**
+* Hook to display a progress toast that persists while loading.
+*
+* @example
+* ```tsx
+* useProgressToast(
+*   isLoading
+*     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+*     : { isLoading: false, title: 'Saved!', icon: <IconCheck />, theme: 'success' }
+* );
+*
+* // Or with error handling:
+* useProgressToast(
+*   isLoading
+*     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+*     : isError
+*       ? { isLoading: false, title: 'Error', description: errorMessage, theme: 'danger' }
+*       : { isLoading: false, title: 'Saved!', theme: 'success' }
+* );
+*
+* // Pass empty value to immediately remove any existing toast:
+* useProgressToast(shouldShow ? { isLoading: true, title: 'Loading...' } : null);
+* ```
+*/
+function useProgressToast(options) {
+	const { addToast, removeToast } = useToastContext();
+	const toastIdRef = useRef(null);
+	const wasLoadingRef = useRef(null);
+	const hideTimerRef = useRef(null);
+	const isFirstRenderRef = useRef(true);
+	const optionsRef = useRef(options);
+	const wasEmptyRef = useRef(false);
+	const prevThemeRef = useRef(void 0);
+	const prevTitleRef = useRef(void 0);
+	const prevDescriptionRef = useRef(void 0);
+	optionsRef.current = options;
+	const clearHideTimer = () => {
+		if (hideTimerRef.current) {
+			clearTimeout(hideTimerRef.current);
+			hideTimerRef.current = null;
+		}
+	};
+	const isEmpty = isEmptyOptions(options);
+	const isLoading = isEmpty ? false : options.isLoading;
+	const currentTheme = isEmpty ? void 0 : options.theme;
+	const currentTitle = isEmpty ? void 0 : getStringValue(options.title);
+	const currentDescription = isEmpty ? void 0 : getStringValue(options.description);
+	useEffect(() => {
+		const wasLoading = wasLoadingRef.current;
+		const wasEmpty = wasEmptyRef.current;
+		const isFirstRender = isFirstRenderRef.current;
+		const currentOptions = optionsRef.current;
+		if (isEmptyOptions(currentOptions)) {
+			clearHideTimer();
+			if (toastIdRef.current != null) {
+				removeToast(toastIdRef.current);
+				toastIdRef.current = null;
+			}
+			wasLoadingRef.current = null;
+			wasEmptyRef.current = true;
+			isFirstRenderRef.current = false;
+			prevThemeRef.current = void 0;
+			prevTitleRef.current = void 0;
+			prevDescriptionRef.current = void 0;
+			return;
+		}
+		const { isLoading: currentIsLoading, ...currentToastData } = currentOptions;
+		const themeChanged = currentTheme !== prevThemeRef.current;
+		const titleChanged = currentTitle !== prevTitleRef.current;
+		const descriptionChanged = currentDescription !== prevDescriptionRef.current;
+		const dataChanged = themeChanged || titleChanged || descriptionChanged;
+		const showToast = () => {
+			if (toastIdRef.current != null) removeToast(toastIdRef.current);
+			toastIdRef.current = addToast({
+				...currentToastData,
+				isLoading: currentIsLoading,
+				duration: null
+			}, true);
+		};
+		const showToastWithTimer = () => {
+			showToast();
+			hideTimerRef.current = setTimeout(() => {
+				if (toastIdRef.current != null) {
+					removeToast(toastIdRef.current);
+					toastIdRef.current = null;
+				}
+			}, RESULT_DURATION);
+		};
+		if (currentIsLoading) {
+			clearHideTimer();
+			if (toastIdRef.current == null) showToast();
+			else if (dataChanged) showToast();
+		} else if ((wasLoading === true || wasEmpty) && !currentIsLoading) {
+			clearHideTimer();
+			if (currentTitle) showToastWithTimer();
+			else if (toastIdRef.current != null) {
+				removeToast(toastIdRef.current);
+				toastIdRef.current = null;
+			}
+		} else if (!currentIsLoading && !isFirstRender && dataChanged) {
+			if (currentTitle) {
+				clearHideTimer();
+				showToastWithTimer();
+			} else if (toastIdRef.current != null) {
+				clearHideTimer();
+				removeToast(toastIdRef.current);
+				toastIdRef.current = null;
+			}
+		}
+		wasLoadingRef.current = currentIsLoading;
+		wasEmptyRef.current = false;
+		isFirstRenderRef.current = false;
+		prevThemeRef.current = currentTheme;
+		prevTitleRef.current = currentTitle;
+		prevDescriptionRef.current = currentDescription;
+	}, [
+		isEmpty,
+		isLoading,
+		currentTheme,
+		currentTitle,
+		currentDescription,
+		addToast,
+		removeToast
+	]);
+	useEffect(() => {
+		return () => {
+			clearHideTimer();
+			if (toastIdRef.current != null) {
+				removeToast(toastIdRef.current);
+				toastIdRef.current = null;
+			}
+		};
+	}, [removeToast]);
+}
+
+//#endregion
+export { useProgressToast };
+//# sourceMappingURL=useProgressToast.js.map

package/dist/components/overlays/Toast/useProgressToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressToast.js","names":[],"sources":["../../../../src/components/overlays/Toast/useProgressToast.ts"],"sourcesContent":["import { Key, useEffect, useRef } from 'react';\n\nimport { useToastContext } from './ToastProvider';\n\nimport type { ProgressToastEmpty, ProgressToastOptions } from './types';\n\nconst RESULT_DURATION = 3000;\n\n/**\n * Check if the options represent an \"empty\" value (null, undefined, false, or empty object).\n * When empty, the hook should immediately remove any existing toast.\n */\nfunction isEmptyOptions(\n  options: ProgressToastOptions | ProgressToastEmpty,\n): options is ProgressToastEmpty {\n  if (options == null || options === false) return true;\n  if (typeof options === 'object' && Object.keys(options).length === 0)\n    return true;\n  return false;\n}\n\n// Get string value for comparison (only strings are compared for re-show logic)\nfunction getStringValue(value: unknown): string | undefined {\n  return typeof value === 'string' ? value : undefined;\n}\n\n/**\n * Hook to display a progress toast that persists while loading.\n *\n * @example\n * ```tsx\n * useProgressToast(\n *   isLoading\n *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }\n *     : { isLoading: false, title: 'Saved!', icon: <IconCheck />, theme: 'success' }\n * );\n *\n * // Or with error handling:\n * useProgressToast(\n *   isLoading\n *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }\n *     : isError\n *       ? { isLoading: false, title: 'Error', description: errorMessage, theme: 'danger' }\n *       : { isLoading: false, title: 'Saved!', theme: 'success' }\n * );\n *\n * // Pass empty value to immediately remove any existing toast:\n * useProgressToast(shouldShow ? { isLoading: true, title: 'Loading...' } : null);\n * ```\n */\nexport function useProgressToast(\n  options: ProgressToastOptions | ProgressToastEmpty,\n): void {\n  const { addToast, removeToast } = useToastContext();\n\n  const toastIdRef = useRef<Key | null>(null);\n  const wasLoadingRef = useRef<boolean | null>(null);\n  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isFirstRenderRef = useRef(true);\n  const optionsRef = useRef(options);\n  const wasEmptyRef = useRef<boolean>(false);\n\n  // Track previous string values for re-show comparison\n  const prevThemeRef = useRef<string | undefined>(undefined);\n  const prevTitleRef = useRef<string | undefined>(undefined);\n  const prevDescriptionRef = useRef<string | undefined>(undefined);\n\n  // Always update optionsRef to latest\n  optionsRef.current = options;\n\n  // Clear any pending hide timer\n  const clearHideTimer = () => {\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n  };\n\n  // Check if current options are empty\n  const isEmpty = isEmptyOptions(options);\n\n  // Extract values only when options are not empty\n  const isLoading = isEmpty ? false : options.isLoading;\n  const currentTheme = isEmpty ? undefined : options.theme;\n  const currentTitle = isEmpty ? undefined : getStringValue(options.title);\n  const currentDescription = isEmpty\n    ? undefined\n    : getStringValue(options.description);\n\n  useEffect(() => {\n    const wasLoading = wasLoadingRef.current;\n    const wasEmpty = wasEmptyRef.current;\n    const isFirstRender = isFirstRenderRef.current;\n    const currentOptions = optionsRef.current;\n    const currentIsEmpty = isEmptyOptions(currentOptions);\n\n    // Handle empty options - immediately remove any existing toast\n    if (currentIsEmpty) {\n      clearHideTimer();\n\n      if (toastIdRef.current != null) {\n        removeToast(toastIdRef.current);\n        toastIdRef.current = null;\n      }\n\n      // Update refs for next comparison\n      wasLoadingRef.current = null;\n      wasEmptyRef.current = true;\n      isFirstRenderRef.current = false;\n      prevThemeRef.current = undefined;\n      prevTitleRef.current = undefined;\n      prevDescriptionRef.current = undefined;\n      return;\n    }\n\n    // From here, we know options is a valid ProgressToastOptions\n    const { isLoading: currentIsLoading, ...currentToastData } = currentOptions;\n\n    // Check if meaningful data changed (only string values)\n    const themeChanged = currentTheme !== prevThemeRef.current;\n    const titleChanged = currentTitle !== prevTitleRef.current;\n    const descriptionChanged =\n      currentDescription !== prevDescriptionRef.current;\n    const dataChanged = themeChanged || titleChanged || descriptionChanged;\n\n    // Helper to create a new toast (removes old one first if exists)\n    const showToast = () => {\n      // Remove existing toast if any\n      if (toastIdRef.current != null) {\n        removeToast(toastIdRef.current);\n      }\n\n      // Create new toast with fresh data\n      // Icon auto-resolved by ToastItem based on theme/isLoading\n      toastIdRef.current = addToast(\n        {\n          ...currentToastData,\n          isLoading: currentIsLoading,\n          duration: null, // Persistent - we control removal\n        },\n        true, // isProgress = true\n      );\n    };\n\n    // Helper to show toast and schedule removal\n    const showToastWithTimer = () => {\n      showToast();\n\n      // Schedule removal after result duration\n      hideTimerRef.current = setTimeout(() => {\n        if (toastIdRef.current != null) {\n          removeToast(toastIdRef.current);\n          toastIdRef.current = null;\n        }\n      }, RESULT_DURATION);\n    };\n\n    if (currentIsLoading) {\n      // Starting or continuing loading\n      clearHideTimer();\n\n      if (toastIdRef.current == null) {\n        // Create new toast\n        showToast();\n      } else if (dataChanged) {\n        // Toast exists but data changed (e.g., switching back to loading from another state)\n        showToast();\n      }\n    } else if ((wasLoading === true || wasEmpty) && !currentIsLoading) {\n      // Transitioning from loading (or from empty) to not loading\n      clearHideTimer();\n\n      if (currentTitle) {\n        // Show result toast with timer\n        showToastWithTimer();\n      } else {\n        // No content - just remove the loading toast immediately\n        if (toastIdRef.current != null) {\n          removeToast(toastIdRef.current);\n          toastIdRef.current = null;\n        }\n      }\n    } else if (!currentIsLoading && !isFirstRender && dataChanged) {\n      // Not loading, data changed - update or re-show toast\n      // But only if there's meaningful content (non-empty title)\n      if (currentTitle) {\n        clearHideTimer();\n        showToastWithTimer();\n      } else if (toastIdRef.current != null) {\n        // No content - hide existing toast\n        clearHideTimer();\n        removeToast(toastIdRef.current);\n        toastIdRef.current = null;\n      }\n    }\n\n    // Update refs for next comparison\n    wasLoadingRef.current = currentIsLoading;\n    wasEmptyRef.current = false;\n    isFirstRenderRef.current = false;\n    prevThemeRef.current = currentTheme;\n    prevTitleRef.current = currentTitle;\n    prevDescriptionRef.current = currentDescription;\n  }, [\n    isEmpty,\n    isLoading,\n    currentTheme,\n    currentTitle,\n    currentDescription,\n    addToast,\n    removeToast,\n  ]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      clearHideTimer();\n\n      if (toastIdRef.current != null) {\n        removeToast(toastIdRef.current);\n        toastIdRef.current = null;\n      }\n    };\n  }, [removeToast]);\n}\n"],"mappings":"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"}

package/dist/components/overlays/Toast/useToast.d.ts

@@ -0,0 +1,36 @@
+
+import { ToastApi, ToastType } from "./types.js";
+import { ReactNode } from "react";
+
+//#region src/components/overlays/Toast/useToast.d.ts
+/**
+ * Get the appropriate icon for a toast based on theme and loading state.
+ * - When loading, returns the provided icon as-is (loading indicator is separate)
+ * - When not loading, returns the provided icon or falls back to theme-based default
+ */
+declare function getThemeIcon(theme: ToastType | undefined, icon: ReactNode | undefined, isLoading?: boolean): ReactNode | undefined;
+/**
+ * Hook to display toast notifications.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ *
+ * // String shorthand
+ * toast.success('Copied to clipboard');
+ *
+ * // Object with options
+ * toast.success({
+ *   title: 'Success',
+ *   description: 'File copied to clipboard',
+ *   icon: <CustomIcon />,
+ *   duration: 3000,
+ * });
+ *
+ * // Methods: toast(), toast.success(), toast.danger(), toast.warning(), toast.note()
+ * ```
+ */
+declare function useToast(): ToastApi;
+//#endregion
+export { getThemeIcon, useToast };
+//# sourceMappingURL=useToast.d.ts.map

package/dist/components/overlays/Toast/useToast.js

@@ -0,0 +1,89 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { CheckIcon } from "../../../icons/CheckIcon.js";
+import { DangerIcon } from "../../../icons/DangerIcon.js";
+import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";
+import { WarningIcon } from "../../../icons/WarningIcon.js";
+import { useToastContext } from "../Notifications/NotificationContext.js";
+import { isValidElement, useMemo } from "react";
+import { isFragment } from "react-is";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/Toast/useToast.tsx
+const THEME_ICONS = {
+	success: /* @__PURE__ */ jsx(CheckIcon, {}),
+	danger: /* @__PURE__ */ jsx(DangerIcon, {}),
+	warning: /* @__PURE__ */ jsx(WarningIcon, {}),
+	note: /* @__PURE__ */ jsx(InfoCircleIcon, {})
+};
+/**
+* Get the appropriate icon for a toast based on theme and loading state.
+* - When loading, returns the provided icon as-is (loading indicator is separate)
+* - When not loading, returns the provided icon or falls back to theme-based default
+*/
+function getThemeIcon(theme, icon, isLoading) {
+	if (isLoading) return icon;
+	if (icon !== void 0) return icon;
+	return theme ? THEME_ICONS[theme] : void 0;
+}
+function isToastData(data) {
+	return !(isValidElement(data) || isFragment(data) || typeof data === "string" || typeof data === "number" || typeof data === "boolean" || data === null || data === void 0 || Array.isArray(data));
+}
+function normalizeToastData(data, defaultTheme) {
+	if (isToastData(data)) return {
+		...data,
+		theme: data.theme ?? defaultTheme
+	};
+	return {
+		title: data,
+		theme: defaultTheme
+	};
+}
+/**
+* Hook to display toast notifications.
+*
+* @example
+* ```tsx
+* const toast = useToast();
+*
+* // String shorthand
+* toast.success('Copied to clipboard');
+*
+* // Object with options
+* toast.success({
+*   title: 'Success',
+*   description: 'File copied to clipboard',
+*   icon: <CustomIcon />,
+*   duration: 3000,
+* });
+*
+* // Methods: toast(), toast.success(), toast.danger(), toast.warning(), toast.note()
+* ```
+*/
+function useToast() {
+	const { addToast, removeToast } = useToastContext();
+	return useMemo(() => {
+		const toast = (data) => {
+			return addToast(normalizeToastData(data));
+		};
+		toast.success = (data) => {
+			return addToast(normalizeToastData(data, "success"));
+		};
+		toast.danger = (data) => {
+			return addToast(normalizeToastData(data, "danger"));
+		};
+		toast.warning = (data) => {
+			return addToast(normalizeToastData(data, "warning"));
+		};
+		toast.note = (data) => {
+			return addToast(normalizeToastData(data, "note"));
+		};
+		toast.remove = (id) => {
+			removeToast(id);
+		};
+		return toast;
+	}, [addToast, removeToast]);
+}
+
+//#endregion
+export { getThemeIcon, useToast };
+//# sourceMappingURL=useToast.js.map

package/dist/components/overlays/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","names":[],"sources":["../../../../src/components/overlays/Toast/useToast.tsx"],"sourcesContent":["import { isValidElement, Key, ReactNode, useMemo } from 'react';\nimport { isFragment } from 'react-is';\n\nimport {\n  CheckIcon,\n  DangerIcon,\n  InfoCircleIcon,\n  WarningIcon,\n} from '../../../icons';\n\nimport { useToastContext } from './ToastProvider';\n\nimport type { ToastApi, ToastData, ToastType } from './types';\n\n// Default icons for each theme\nconst THEME_ICONS: Partial<Record<ToastType, ReactNode>> = {\n  success: <CheckIcon />,\n  danger: <DangerIcon />,\n  warning: <WarningIcon />,\n  note: <InfoCircleIcon />,\n};\n\n/**\n * Get the appropriate icon for a toast based on theme and loading state.\n * - When loading, returns the provided icon as-is (loading indicator is separate)\n * - When not loading, returns the provided icon or falls back to theme-based default\n */\nexport function getThemeIcon(\n  theme: ToastType | undefined,\n  icon: ReactNode | undefined,\n  isLoading?: boolean,\n): ReactNode | undefined {\n  // When loading, don't apply theme icons (loading indicator is shown separately)\n  if (isLoading) return icon;\n\n  // If icon is explicitly provided, use it\n  if (icon !== undefined) return icon;\n\n  // Apply theme-based default icon\n  return theme ? THEME_ICONS[theme] : undefined;\n}\n\nfunction isToastData(data: ToastData | ReactNode): data is ToastData {\n  // ReactNode includes: ReactElement | string | number | boolean | null | undefined | Iterable<ReactNode>\n  const isReactNode =\n    isValidElement(data) ||\n    isFragment(data) ||\n    typeof data === 'string' ||\n    typeof data === 'number' ||\n    typeof data === 'boolean' ||\n    data === null ||\n    data === undefined ||\n    Array.isArray(data);\n\n  return !isReactNode;\n}\n\nfunction normalizeToastData(\n  data: ToastData | ReactNode,\n  defaultTheme?: ToastType,\n): ToastData {\n  if (isToastData(data)) {\n    return {\n      ...data,\n      theme: data.theme ?? defaultTheme,\n    };\n  }\n\n  // String or ReactNode passed directly - use as title\n  return {\n    title: data,\n    theme: defaultTheme,\n  };\n}\n\n/**\n * Hook to display toast notifications.\n *\n * @example\n * ```tsx\n * const toast = useToast();\n *\n * // String shorthand\n * toast.success('Copied to clipboard');\n *\n * // Object with options\n * toast.success({\n *   title: 'Success',\n *   description: 'File copied to clipboard',\n *   icon: <CustomIcon />,\n *   duration: 3000,\n * });\n *\n * // Methods: toast(), toast.success(), toast.danger(), toast.warning(), toast.note()\n * ```\n */\nexport function useToast(): ToastApi {\n  const { addToast, removeToast } = useToastContext();\n\n  const api = useMemo<ToastApi>(() => {\n    const toast = (data: ToastData | ReactNode): Key => {\n      return addToast(normalizeToastData(data));\n    };\n\n    toast.success = (data: ToastData | ReactNode): Key => {\n      return addToast(normalizeToastData(data, 'success'));\n    };\n\n    toast.danger = (data: ToastData | ReactNode): Key => {\n      return addToast(normalizeToastData(data, 'danger'));\n    };\n\n    toast.warning = (data: ToastData | ReactNode): Key => {\n      return addToast(normalizeToastData(data, 'warning'));\n    };\n\n    toast.note = (data: ToastData | ReactNode): Key => {\n      return addToast(normalizeToastData(data, 'note'));\n    };\n\n    toast.remove = (id: Key): void => {\n      removeToast(id);\n    };\n\n    return toast;\n  }, [addToast, removeToast]);\n\n  return api;\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAM,cAAqD;CACzD,SAAS,oBAAC,cAAY;CACtB,QAAQ,oBAAC,eAAa;CACtB,SAAS,oBAAC,gBAAc;CACxB,MAAM,oBAAC,mBAAiB;CACzB;;;;;;AAOD,SAAgB,aACd,OACA,MACA,WACuB;AAEvB,KAAI,UAAW,QAAO;AAGtB,KAAI,SAAS,OAAW,QAAO;AAG/B,QAAO,QAAQ,YAAY,SAAS;;AAGtC,SAAS,YAAY,MAAgD;AAYnE,QAAO,EATL,eAAe,KAAK,IACpB,WAAW,KAAK,IAChB,OAAO,SAAS,YAChB,OAAO,SAAS,YAChB,OAAO,SAAS,aAChB,SAAS,QACT,SAAS,UACT,MAAM,QAAQ,KAAK;;AAKvB,SAAS,mBACP,MACA,cACW;AACX,KAAI,YAAY,KAAK,CACnB,QAAO;EACL,GAAG;EACH,OAAO,KAAK,SAAS;EACtB;AAIH,QAAO;EACL,OAAO;EACP,OAAO;EACR;;;;;;;;;;;;;;;;;;;;;;;AAwBH,SAAgB,WAAqB;CACnC,MAAM,EAAE,UAAU,gBAAgB,iBAAiB;AA8BnD,QA5BY,cAAwB;EAClC,MAAM,SAAS,SAAqC;AAClD,UAAO,SAAS,mBAAmB,KAAK,CAAC;;AAG3C,QAAM,WAAW,SAAqC;AACpD,UAAO,SAAS,mBAAmB,MAAM,UAAU,CAAC;;AAGtD,QAAM,UAAU,SAAqC;AACnD,UAAO,SAAS,mBAAmB,MAAM,SAAS,CAAC;;AAGrD,QAAM,WAAW,SAAqC;AACpD,UAAO,SAAS,mBAAmB,MAAM,UAAU,CAAC;;AAGtD,QAAM,QAAQ,SAAqC;AACjD,UAAO,SAAS,mBAAmB,MAAM,OAAO,CAAC;;AAGnD,QAAM,UAAU,OAAkB;AAChC,eAAY,GAAG;;AAGjB,SAAO;IACN,CAAC,UAAU,YAAY,CAAC"}

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

@@ -0,0 +1,28 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { PlacementAxis } from "../../../shared/index.js";
+import * as react from "react";
+import { AriaTooltipProps } from "react-aria";
+import { DOMRefValue } from "@react-types/shared";
+
+//#region src/components/overlays/Tooltip/Tooltip.d.ts
+interface CubeTooltipProps extends BaseProps, ContainerStyleProps, AriaTooltipProps {
+  tipStyles?: Styles;
+  showIcon?: boolean;
+  placement?: PlacementAxis;
+  isMaterial?: boolean;
+  isOpen?: boolean;
+  isLight?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  defaultOpen?: boolean;
+  shouldFlip?: boolean;
+}
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */
+declare let _Tooltip: react.ForwardRefExoticComponent<CubeTooltipProps & react.RefAttributes<DOMRefValue<HTMLDivElement>>>;
+//#endregion
+export { CubeTooltipProps, _Tooltip };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,160 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
+import { TooltipContext } from "./context.js";
+import { forwardRef, useContext, useImperativeHandle, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTooltip } from "react-aria";
+import { createDOMRef } from "@react-spectrum/utils";
+
+//#region src/components/overlays/Tooltip/Tooltip.tsx
+const TooltipElement = tasty({ styles: {
+	display: "block",
+	fill: {
+		"": "#dark.85",
+		light: "#white"
+	},
+	color: {
+		"": "#white",
+		light: "#dark-02"
+	},
+	width: "initial 36x max-content",
+	radius: true,
+	padding: ".75x 1x",
+	preset: "t4",
+	backdropFilter: "blur(.5x)",
+	whiteSpace: "pre-line",
+	pointerEvents: {
+		"": "none",
+		material: "auto"
+	},
+	filter: {
+		"": false,
+		light: "drop-shadow(0 0 1px #dark.2)"
+	},
+	transition: "translate $transition ease-out, scale $transition ease-out, theme $transition ease-out",
+	translate: {
+		"": "0 0",
+		"open & [data-placement=\"top\"]": "0 0",
+		"!open & [data-placement=\"top\"]": "0 1x",
+		"open & [data-placement=\"bottom\"]": "0 0",
+		"!open & [data-placement=\"bottom\"]": "0 -1x",
+		"open & [data-placement=\"left\"]": "0 0",
+		"!open & [data-placement=\"left\"]": "1x 0",
+		"open & [data-placement=\"right\"]": "0 0",
+		"!open & [data-placement=\"right\"]": "-1x 0"
+	},
+	transformOrigin: {
+		"": "top center",
+		"[data-placement=\"top\"]": "bottom center",
+		"[data-placement=\"left\"]": "right center",
+		"[data-placement=\"right\"]": "left center"
+	},
+	scale: {
+		"": "1 1",
+		"!open": "1 .8",
+		"!open & ([data-placement=\"left\"] | [data-placement=\"right\"])": ".8 1"
+	},
+	opacity: {
+		"": 1,
+		"!open": .001
+	}
+} });
+const TooltipTipElement = tasty({ styles: {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	border: ".5x #clear",
+	borderTop: {
+		"": ".5x solid #dark.85",
+		light: ".5x solid #white"
+	},
+	borderBottom: "0",
+	top: {
+		"": "initial",
+		"[data-placement=\"left\"] | [data-placement=\"right\"]": "50%",
+		"[data-placement=\"top\"]": "100%"
+	},
+	left: {
+		"": "initial",
+		"[data-placement=\"top\"] | [data-placement=\"bottom\"]": "50%",
+		"[data-placement=\"left\"]": "100%"
+	},
+	right: {
+		"": "initial",
+		"[data-placement=\"right\"]": "100%"
+	},
+	bottom: {
+		"": "initial",
+		"[data-placement=\"bottom\"]": "100%"
+	},
+	transform: {
+		"": "translate((-.375x - 1px), 0)",
+		"[data-placement=\"bottom\"]": "translate((-.375x - 1px), 0) rotate(180deg)",
+		"[data-placement=\"left\"]": "translate(-.25x, -.25x) rotate(270deg)",
+		"[data-placement=\"right\"]": "translate(.25x, -.25x) rotate(90deg)"
+	},
+	transition: "theme"
+} });
+function Tooltip(props, ref) {
+	let { ref: overlayRef, transitionRef, arrowProps, state, overlayProps, minOffset, minScale, isMaterial: isMaterialContext, isLight: isLightContext, phase, isShown, updatePosition, ...tooltipProviderProps } = useContext(TooltipContext);
+	const defaultRef = useRef(null);
+	const combinedRef = mergeRefs(transitionRef, overlayRef ?? defaultRef);
+	const finalOverlayRef = overlayRef ?? defaultRef;
+	props = mergeProps$1(props, tooltipProviderProps);
+	let { placement = "top", isOpen, tipStyles, showIcon, isMaterial = isMaterialContext, isLight = isLightContext, ...otherProps } = props;
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	let { tooltipProps } = useTooltip({
+		...props,
+		isDismissable: false
+	}, state);
+	useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));
+	if (typeof minOffset === "number") minOffset = `${minOffset}px`;
+	if (typeof minScale === "number") minScale = String(minScale);
+	const placementDirection = placement?.split(" ")[0] || placement || "top";
+	const mods = useMemo(() => {
+		return {
+			material: isMaterial,
+			light: isLight,
+			open: isShown ?? isOpen
+		};
+	}, [
+		isMaterial,
+		isShown,
+		isOpen,
+		isLight
+	]);
+	useLayoutEffect$1(() => {
+		updatePosition?.();
+	}, []);
+	return /* @__PURE__ */ jsxs(TooltipElement, {
+		...tooltipProps,
+		...overlayProps,
+		ref: combinedRef,
+		styles,
+		mods,
+		"data-min-offset": minOffset,
+		"data-min-scale": minScale,
+		"data-placement": placementDirection,
+		"data-phase": phase,
+		children: [props.children, /* @__PURE__ */ jsx(TooltipTipElement, {
+			"data-placement": placementDirection,
+			styles: tipStyles,
+			mods,
+			...arrowProps
+		})]
+	});
+}
+/**
+* Display container for Tooltip content. Has a directional arrow dependent on its placement.
+*/
+let _Tooltip = forwardRef(Tooltip);
+_Tooltip.displayName = "Tooltip";
+
+//#endregion
+export { _Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/overlays/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["mergeProps"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import { createDOMRef } from '@react-spectrum/utils';\nimport { DOMRefValue } from '@react-types/shared';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTooltipProps, useTooltip } from 'react-aria';\n\nimport { PlacementAxis } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps, mergeRefs, useLayoutEffect } from '../../../utils/react';\n\nimport { TooltipContext } from './context';\n\nexport type { AriaTooltipProps };\n\nconst TooltipElement = tasty({\n  styles: {\n    display: 'block',\n    fill: {\n      '': '#dark.85',\n      light: '#white',\n    },\n    color: {\n      '': '#white',\n      light: '#dark-02',\n    },\n    width: 'initial 36x max-content',\n    radius: true,\n    padding: '.75x 1x',\n    preset: 't4',\n    backdropFilter: 'blur(.5x)',\n    whiteSpace: 'pre-line',\n    pointerEvents: {\n      '': 'none',\n      material: 'auto',\n    },\n    filter: {\n      '': false,\n      light: 'drop-shadow(0 0 1px #dark.2)',\n    },\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & [data-placement=\"bottom\"]': '0 0',\n      '!open & [data-placement=\"bottom\"]': '0 -1x',\n      'open & [data-placement=\"left\"]': '0 0',\n      '!open & [data-placement=\"left\"]': '1x 0',\n      'open & [data-placement=\"right\"]': '0 0',\n      '!open & [data-placement=\"right\"]': '-1x 0',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n      '[data-placement=\"left\"]': 'right center',\n      '[data-placement=\"right\"]': 'left center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .8',\n      '!open & ([data-placement=\"left\"] | [data-placement=\"right\"])': '.8 1',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n  },\n});\n\nconst TooltipTipElement = tasty({\n  styles: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    border: '.5x #clear',\n    borderTop: {\n      '': '.5x solid #dark.85',\n      light: '.5x solid #white',\n    },\n    borderBottom: '0',\n    top: {\n      '': 'initial',\n      '[data-placement=\"left\"] | [data-placement=\"right\"]': '50%',\n      '[data-placement=\"top\"]': '100%',\n    },\n    left: {\n      '': 'initial',\n      '[data-placement=\"top\"] | [data-placement=\"bottom\"]': '50%',\n      '[data-placement=\"left\"]': '100%',\n    },\n    right: {\n      '': 'initial',\n      '[data-placement=\"right\"]': '100%',\n    },\n    bottom: {\n      '': 'initial',\n      '[data-placement=\"bottom\"]': '100%',\n    },\n    transform: {\n      '': 'translate((-.375x - 1px), 0)',\n      '[data-placement=\"bottom\"]':\n        'translate((-.375x - 1px), 0) rotate(180deg)',\n      '[data-placement=\"left\"]': 'translate(-.25x, -.25x) rotate(270deg)',\n      '[data-placement=\"right\"]': 'translate(.25x, -.25x) rotate(90deg)',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeTooltipProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaTooltipProps {\n  tipStyles?: Styles;\n  showIcon?: boolean;\n  placement?: PlacementAxis;\n  isMaterial?: boolean;\n  isOpen?: boolean;\n  isLight?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n}\n\nfunction Tooltip(\n  props: CubeTooltipProps,\n  ref: ForwardedRef<DOMRefValue<HTMLDivElement>>,\n) {\n  let {\n    ref: overlayRef,\n    transitionRef,\n    arrowProps,\n    state,\n    overlayProps,\n    minOffset,\n    minScale,\n    isMaterial: isMaterialContext,\n    isLight: isLightContext,\n    phase,\n    isShown,\n    updatePosition,\n    ...tooltipProviderProps\n  } = useContext(TooltipContext);\n\n  const defaultRef = useRef<HTMLDivElement>(null);\n  const combinedRef = mergeRefs(transitionRef, overlayRef ?? defaultRef);\n  const finalOverlayRef = overlayRef ?? defaultRef;\n\n  props = mergeProps(props, tooltipProviderProps);\n\n  let {\n    placement = 'top',\n    isOpen,\n    tipStyles,\n    showIcon,\n    isMaterial = isMaterialContext,\n    isLight = isLightContext,\n    ...otherProps\n  } = props;\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let { tooltipProps } = useTooltip({ ...props, isDismissable: false }, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));\n\n  if (typeof minOffset === 'number') {\n    minOffset = `${minOffset}px`;\n  }\n\n  if (typeof minScale === 'number') {\n    minScale = String(minScale);\n  }\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || placement || 'top';\n\n  const mods = useMemo(() => {\n    return {\n      material: isMaterial,\n      light: isLight,\n      open: isShown ?? isOpen,\n    };\n  }, [isMaterial, isShown, isOpen, isLight]);\n\n  // Update position when tooltip becomes visible\n  useLayoutEffect(() => {\n    updatePosition?.();\n  }, []);\n\n  return (\n    <TooltipElement\n      {...tooltipProps}\n      {...overlayProps}\n      ref={combinedRef}\n      styles={styles}\n      mods={mods}\n      data-min-offset={minOffset}\n      data-min-scale={minScale}\n      data-placement={placementDirection}\n      data-phase={phase}\n    >\n      {props.children}\n      <TooltipTipElement\n        data-placement={placementDirection}\n        styles={tipStyles}\n        mods={mods}\n        {...arrowProps}\n      />\n    </TooltipElement>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\n\n_Tooltip.displayName = 'Tooltip';\n\nexport { _Tooltip as Tooltip };\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB,MAAM,EAC3B,QAAQ;CACN,SAAS;CACT,MAAM;EACJ,IAAI;EACJ,OAAO;EACR;CACD,OAAO;EACL,IAAI;EACJ,OAAO;EACR;CACD,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,YAAY;CACZ,eAAe;EACb,IAAI;EACJ,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,OAAO;EACR;CACD,YACE;CACF,WAAW;EACT,IAAI;EACJ,mCAAiC;EACjC,oCAAkC;EAClC,sCAAoC;EACpC,uCAAqC;EACrC,oCAAkC;EAClC,qCAAmC;EACnC,qCAAmC;EACnC,sCAAoC;EACrC;CACD,iBAAiB;EACf,IAAI;EACJ,4BAA0B;EAC1B,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACT,oEAAgE;EACjE;CACD,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACF,EACF,CAAC;AAEF,MAAM,oBAAoB,MAAM,EAC9B,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,OAAO;EACR;CACD,cAAc;CACd,KAAK;EACH,IAAI;EACJ,0DAAsD;EACtD,4BAA0B;EAC3B;CACD,MAAM;EACJ,IAAI;EACJ,0DAAsD;EACtD,6BAA2B;EAC5B;CACD,OAAO;EACL,IAAI;EACJ,8BAA4B;EAC7B;CACD,QAAQ;EACN,IAAI;EACJ,+BAA6B;EAC9B;CACD,WAAW;EACT,IAAI;EACJ,+BACE;EACF,6BAA2B;EAC3B,8BAA4B;EAC7B;CACD,YAAY;CACb,EACF,CAAC;AAiBF,SAAS,QACP,OACA,KACA;CACA,IAAI,EACF,KAAK,YACL,eACA,YACA,OACA,cACA,WACA,UACA,YAAY,mBACZ,SAAS,gBACT,OACA,SACA,gBACA,GAAG,yBACD,WAAW,eAAe;CAE9B,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,cAAc,UAAU,eAAe,cAAc,WAAW;CACtE,MAAM,kBAAkB,cAAc;AAEtC,SAAQA,aAAW,OAAO,qBAAqB;CAE/C,IAAI,EACF,YAAY,OACZ,QACA,WACA,UACA,aAAa,mBACb,UAAU,gBACV,GAAG,eACD;CAEJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,EAAE,iBAAiB,WAAW;EAAE,GAAG;EAAO,eAAe;EAAO,EAAE,MAAM;AAG5E,qBAAoB,WAAW,aAAa,gBAAgB,CAAC;AAE7D,KAAI,OAAO,cAAc,SACvB,aAAY,GAAG,UAAU;AAG3B,KAAI,OAAO,aAAa,SACtB,YAAW,OAAO,SAAS;CAI7B,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM,aAAa;CAEpE,MAAM,OAAO,cAAc;AACzB,SAAO;GACL,UAAU;GACV,OAAO;GACP,MAAM,WAAW;GAClB;IACA;EAAC;EAAY;EAAS;EAAQ;EAAQ,CAAC;AAG1C,yBAAsB;AACpB,oBAAkB;IACjB,EAAE,CAAC;AAEN,QACE,qBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK;EACG;EACF;EACN,mBAAiB;EACjB,kBAAgB;EAChB,kBAAgB;EAChB,cAAY;aAEX,MAAM,UACP,oBAAC;GACC,kBAAgB;GAChB,QAAQ;GACF;GACN,GAAI;IACJ;GACa;;;;;AAOrB,IAAI,WAAW,WAAW,QAAQ;AAElC,SAAS,cAAc"}

package/dist/components/overlays/Tooltip/TooltipProvider.d.ts

@@ -0,0 +1,18 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { CubeTooltipProps } from "./Tooltip.js";
+import { CubeTooltipTriggerProps, TooltipTriggerFunction } from "./TooltipTrigger.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/overlays/Tooltip/TooltipProvider.d.ts
+interface CubeTooltipProviderProps extends Omit<CubeTooltipTriggerProps, 'children'> {
+  children: ReactNode | TooltipTriggerFunction;
+  title?: ReactNode;
+  tooltipStyles?: Styles;
+  width?: CubeTooltipProps['width'];
+}
+declare function TooltipProvider(props: CubeTooltipProviderProps): ReactElement;
+//#endregion
+export { CubeTooltipProviderProps, TooltipProvider };
+//# sourceMappingURL=TooltipProvider.d.ts.map

package/dist/components/overlays/Tooltip/TooltipProvider.js

@@ -0,0 +1,30 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { _Tooltip } from "./Tooltip.js";
+import { TooltipTrigger } from "./TooltipTrigger.js";
+import { isValidElement, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Tooltip/TooltipProvider.tsx
+function TooltipProvider(props) {
+	const [rendered, setRendered] = useState(false);
+	const { title, children, tooltipStyles, width, isDisabled, ...otherProps } = props;
+	useEffect(() => {
+		setRendered(true);
+	}, []);
+	const isFunction = typeof children === "function";
+	if (!rendered) return /* @__PURE__ */ jsx(Fragment$1, { children: isFunction ? children({}, { current: null }) : children });
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		...otherProps,
+		isDisabled,
+		disableFocusableProvider: isFunction,
+		children: [isFunction || isValidElement(children) || typeof children === "string" ? children : /* @__PURE__ */ jsx(Fragment$1, { children }), isDisabled ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx(_Tooltip, {
+			styles: tooltipStyles,
+			...width ? { width } : null,
+			children: title
+		})]
+	});
+}
+
+//#endregion
+export { TooltipProvider };
+//# sourceMappingURL=TooltipProvider.js.map

package/dist/components/overlays/Tooltip/TooltipProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipProvider.js","names":["Tooltip"],"sources":["../../../../src/components/overlays/Tooltip/TooltipProvider.tsx"],"sourcesContent":["import {\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { Styles } from '../../../tasty';\n\nimport { CubeTooltipProps, Tooltip } from './Tooltip';\nimport {\n  CubeTooltipTriggerProps,\n  TooltipTrigger,\n  TooltipTriggerFunction,\n} from './TooltipTrigger';\n\nexport interface CubeTooltipProviderProps\n  extends Omit<CubeTooltipTriggerProps, 'children'> {\n  children: ReactNode | TooltipTriggerFunction;\n  title?: ReactNode;\n  tooltipStyles?: Styles;\n  width?: CubeTooltipProps['width'];\n}\n\nexport function TooltipProvider(props: CubeTooltipProviderProps): ReactElement {\n  const [rendered, setRendered] = useState(false);\n  const { title, children, tooltipStyles, width, isDisabled, ...otherProps } =\n    props;\n\n  useEffect(() => {\n    setRendered(true);\n  }, []);\n\n  const isFunction = typeof children === 'function';\n\n  // SSR: render without tooltip\n  if (!rendered) {\n    return (\n      <>\n        {isFunction\n          ? children({}, { current: null } as unknown as RefObject<HTMLElement>)\n          : children}\n      </>\n    ) as ReactElement;\n  }\n\n  // Both patterns pass through to TooltipTrigger\n  // The difference is whether we pass function or element as first child\n  return (\n    <TooltipTrigger\n      {...otherProps}\n      isDisabled={isDisabled}\n      disableFocusableProvider={isFunction}\n    >\n      {isFunction ||\n      isValidElement(children) ||\n      typeof children === 'string' ? (\n        children\n      ) : (\n        <>{children}</>\n      )}\n      {isDisabled ? (\n        <div />\n      ) : (\n        <Tooltip styles={tooltipStyles} {...(width ? { width } : null)}>\n          {title}\n        </Tooltip>\n      )}\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,gBAAgB,OAA+C;CAC7E,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,OAAO,UAAU,eAAe,OAAO,YAAY,GAAG,eAC5D;AAEF,iBAAgB;AACd,cAAY,KAAK;IAChB,EAAE,CAAC;CAEN,MAAM,aAAa,OAAO,aAAa;AAGvC,KAAI,CAAC,SACH,QACE,4CACG,aACG,SAAS,EAAE,EAAE,EAAE,SAAS,MAAM,CAAsC,GACpE,WACH;AAMP,QACE,qBAAC;EACC,GAAI;EACQ;EACZ,0BAA0B;aAEzB,cACD,eAAe,SAAS,IACxB,OAAO,aAAa,WAClB,WAEA,kCAAG,WAAY,EAEhB,aACC,oBAAC,UAAM,GAEP,oBAACA;GAAQ,QAAQ;GAAe,GAAK,QAAQ,EAAE,OAAO,GAAG;aACtD;IACO;GAEG"}

package/dist/components/overlays/Tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,60 @@
+
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Placement, TooltipTriggerProps } from "react-aria";
+
+//#region src/components/overlays/Tooltip/TooltipTrigger.d.ts
+type TooltipTriggerFunction = (triggerProps: HTMLAttributes<HTMLElement>, ref: RefObject<HTMLElement>) => ReactNode;
+interface CubeTooltipTriggerProps extends TooltipTriggerProps {
+  children: [ReactElement | string | TooltipTriggerFunction, ReactElement];
+  crossOffset?: number;
+  offset?: number;
+  placement?: Placement;
+  isMaterial?: boolean;
+  isLight?: boolean;
+  /**
+   * @deprecated Use function-as-first-child pattern instead.
+   * Whether the trigger should have an ActiveZone wrap to make sure it's focusable and hoverable.
+   * Otherwise, tooltip won't work.
+   */
+  activeWrap?: boolean;
+  /**
+   * External ref to use instead of internal ref (optional).
+   */
+  targetRef?: RefObject<HTMLElement>;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  defaultOpen?: boolean;
+  /**
+   * Whether the tooltip should be disabled, independent of the trigger.
+   */
+  isDisabled?: boolean;
+  /**
+   * The delay time for the tooltip to show up.
+   * @default 1500
+   */
+  delay?: number;
+  /**
+   * The delay time for the tooltip to close.
+   * @default 500
+   */
+  closeDelay?: number;
+  /**
+   * By default, opens for both focus and hover. Can be made to open only for focus.
+   */
+  trigger?: 'focus';
+  /**
+   * When true, FocusableProvider won't be applied to the trigger.
+   * Useful when trigger already handles focus or uses render props pattern.
+   */
+  disableFocusableProvider?: boolean;
+}
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+declare function TooltipTrigger(props: CubeTooltipTriggerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeTooltipTriggerProps, TooltipTrigger, TooltipTriggerFunction };
+//# sourceMappingURL=TooltipTrigger.d.ts.map