@orfium/ictinus 5.41.2 → 5.41.4

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @orfium/ictinus@5.41.2 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.41.4 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > pnpm build:main && pnpm build:codemods && pnpm build:vanilla
 
 
-> @orfium/ictinus@5.41.2 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.41.4 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --mode production
 
 production /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
@@ -133,9 +133,6 @@ computing gzip size...
 dist/_virtual/treeRole.js                                                                                         0.04 kB │ gzip:  0.06 kB
 dist/_virtual/treegridRole.js                                                                                     0.04 kB │ gzip:  0.06 kB
 dist/_virtual/treeitemRole.js                                                                                     0.04 kB │ gzip:  0.06 kB
-dist/_virtual/graphicsDocumentRole.js                                                                             0.04 kB │ gzip:  0.06 kB
-dist/_virtual/graphicsObjectRole.js                                                                               0.04 kB │ gzip:  0.06 kB
-dist/_virtual/graphicsSymbolRole.js                                                                               0.04 kB │ gzip:  0.06 kB
 dist/_virtual/docAbstractRole.js                                                                                  0.04 kB │ gzip:  0.06 kB
 dist/_virtual/docAcknowledgmentsRole.js                                                                           0.04 kB │ gzip:  0.06 kB
 dist/_virtual/docAfterwordRole.js                                                                                 0.04 kB │ gzip:  0.06 kB
@@ -175,6 +172,9 @@ computing gzip size...
 dist/_virtual/docSubtitleRole.js                                                                                  0.04 kB │ gzip:  0.06 kB
 dist/_virtual/docTipRole.js                                                                                       0.04 kB │ gzip:  0.06 kB
 dist/_virtual/docTocRole.js                                                                                       0.04 kB │ gzip:  0.06 kB
+dist/_virtual/graphicsDocumentRole.js                                                                             0.04 kB │ gzip:  0.06 kB
+dist/_virtual/graphicsObjectRole.js                                                                               0.04 kB │ gzip:  0.06 kB
+dist/_virtual/graphicsSymbolRole.js                                                                               0.04 kB │ gzip:  0.06 kB
 dist/_virtual/__vite-browser-external.js                                                                          0.04 kB │ gzip:  0.06 kB
 dist/_virtual/lz-string2.js                                                                                       0.05 kB │ gzip:  0.07 kB
 dist/_virtual/index5.js                                                                                           0.05 kB │ gzip:  0.07 kB
@@ -451,8 +451,8 @@ computing gzip size...
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/alertdialogRole.js         0.78 kB │ gzip:  0.43 kB
 dist/components/Table/components/TH/components/SortingButton/SortingButton.js                                     0.79 kB │ gzip:  0.46 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/switchRole.js              0.79 kB │ gzip:  0.44 kB
-dist/components/Chart/LineChart/components/CustomTooltip/CustomTooltip.js                                         0.79 kB │ gzip:  0.39 kB
 dist/components/Icon/assets/musicBusiness/license.svg.js                                                          0.79 kB │ gzip:  0.47 kB
+dist/components/Chart/LineChart/components/CustomTooltip/CustomTooltip.js                                         0.79 kB │ gzip:  0.39 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/toolbarRole.js             0.79 kB │ gzip:  0.44 kB
 dist/components/NumberField/components/Stepper/Stepper.style.js                                                   0.79 kB │ gzip:  0.48 kB
 dist/components/IconButton/IconButton.js                                                                          0.79 kB │ gzip:  0.46 kB
@@ -516,8 +516,8 @@ computing gzip size...
 dist/components/Search/StatefulSearch.js                                                                          0.89 kB │ gzip:  0.48 kB
 dist/components/Chart/BarChart/components/CustomTooltip/CustomTooltip.style.js                                    0.89 kB │ gzip:  0.45 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/dpub/docQnaRole.js                 0.90 kB │ gzip:  0.47 kB
-dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/menuitemcheckboxRole.js    0.90 kB │ gzip:  0.47 kB
 dist/components/Filter/components/FilterMenu/components/Options/Options.style.js                                  0.90 kB │ gzip:  0.49 kB
+dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/menuitemcheckboxRole.js    0.90 kB │ gzip:  0.47 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/dpub/docCreditRole.js              0.90 kB │ gzip:  0.47 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/searchboxRole.js           0.90 kB │ gzip:  0.47 kB
 dist/components/Icon/assets/musicBusiness/recording.svg.js                                                        0.90 kB │ gzip:  0.53 kB
@@ -590,8 +590,8 @@ computing gzip size...
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/listitemRole.js            1.00 kB │ gzip:  0.50 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/columnheaderRole.js        1.01 kB │ gzip:  0.49 kB
 dist/hooks/useFieldUtils.js                                                                                       1.01 kB │ gzip:  0.59 kB
-dist/components/TopAppBar/TopAppBar.style.js                                                                      1.01 kB │ gzip:  0.47 kB
 dist/components/Icon/assets/generic/keyword.svg.js                                                                1.01 kB │ gzip:  0.55 kB
+dist/components/TopAppBar/TopAppBar.style.js                                                                      1.01 kB │ gzip:  0.47 kB
 dist/components/Icon/assets/toggledActions/freeze.svg.js                                                          1.02 kB │ gzip:  0.52 kB
 dist/components/Notification/NotificationVisual/NotificationVisual.js                                             1.03 kB │ gzip:  0.47 kB
 dist/components/Icon/assets/audioControls/resume.svg.js                                                           1.03 kB │ gzip:  0.53 kB
@@ -609,8 +609,8 @@ computing gzip size...
 dist/components/Filter/components/FilterMenu/FilterMenu.js                                                        1.05 kB │ gzip:  0.50 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/optionRole.js              1.06 kB │ gzip:  0.49 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/graphics/graphicsDocumentRole.js   1.07 kB │ gzip:  0.50 kB
-dist/components/Tooltip/Tooltip.style.js                                                                          1.07 kB │ gzip:  0.57 kB
 dist/components/Icon/assets/toggledActions/flagOff.svg.js                                                         1.07 kB │ gzip:  0.61 kB
+dist/components/Tooltip/Tooltip.style.js                                                                          1.07 kB │ gzip:  0.57 kB
 dist/node_modules/@testing-library/react/node_modules/aria-query/lib/etc/roles/literal/imgRole.js                 1.07 kB │ gzip:  0.47 kB
 dist/components/Icon/assets/navigation/arrowDown.svg.js                                                           1.07 kB │ gzip:  0.60 kB
 dist/components/Icon/assets/navigation/arrowRight.svg.js                                                          1.07 kB │ gzip:  0.60 kB
@@ -674,8 +674,8 @@ computing gzip size...
 dist/components/Notification/subcomponents/CompactNotification/CompactNotification.style.js                       1.32 kB │ gzip:  0.55 kB
 dist/components/Notification/Snackbar/Snackbar.style.js                                                           1.32 kB │ gzip:  0.62 kB
 dist/components/Icon/assets/toggledActions/pair.svg.js                                                            1.33 kB │ gzip:  0.68 kB
-dist/components/Notification/Notification.style.js                                                                1.33 kB │ gzip:  0.61 kB
 dist/components/DropdownButton/DropdownButton.style.js                                                            1.33 kB │ gzip:  0.60 kB
+dist/components/Notification/Notification.style.js                                                                1.33 kB │ gzip:  0.61 kB
 dist/components/Icon/assets/generic/mail.svg.js                                                                   1.33 kB │ gzip:  0.71 kB
 dist/components/TextInputBase/TextInputBase.js                                                                    1.33 kB │ gzip:  0.63 kB
 dist/node_modules/is-regex/index.js                                                                               1.33 kB │ gzip:  0.57 kB
@@ -904,11 +904,11 @@ computing gzip size...
 dist/node_modules/object-inspect/index.js                                                                        12.77 kB │ gzip:  3.79 kB
 dist/index.js                                                                                                    13.21 kB │ gzip:  3.15 kB
 dist/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js      55.14 kB │ gzip: 13.99 kB
-[vite:dts] Declaration files built in 13760ms.
+[vite:dts] Declaration files built in 12487ms.
 
-✓ built in 18.73s
+✓ built in 17.21s
 
-> @orfium/ictinus@5.41.2 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.41.4 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --config vite.codemods.config.ts
 
 vite v7.1.6 building for production...
@@ -941,16 +941,16 @@ computing gzip size...
 dist/codemods/drawerCodemod.cjs          1.07 kB │ gzip: 0.42 kB
 dist/codemods/unchangedIconsCodemod.cjs  1.12 kB │ gzip: 0.56 kB
 dist/codemods/globalsCodemod.cjs         7.12 kB │ gzip: 1.12 kB
-[vite:dts] Declaration files built in 989ms.
+[vite:dts] Declaration files built in 967ms.
 
-✓ built in 1.18s
+✓ built in 1.15s
 
-> @orfium/ictinus@5.41.2 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.41.4 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > rm -rf dist/vanilla && NODE_ENV=production rollup -c
 
 
 ./src/vanilla/index.ts → dist/vanilla...
-created dist/vanilla in 945ms
+created dist/vanilla in 1s
 
 ./src/vanilla/index.ts → dist/vanilla...
-created dist/vanilla in 4.7s
+created dist/vanilla in 4.8s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orfium/ictinus
 
+## 5.41.4
+
+### Patch Changes
+
+- cc639ea: extend box props in tooltip content
+
+## 5.41.3
+
+### Patch Changes
+
+- d6aba99: react aria tooltip
+
 ## 5.41.2
 
 ### Patch Changes

package/dist/src/vanilla/Tooltip/Tooltip.css.d.ts

@@ -0,0 +1,20 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const tooltip: import('@vanilla-extract/recipes').RuntimeFn<{
+    inverse: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const trigger: string;
+export declare const arrow: import('@vanilla-extract/recipes').RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import('@vanilla-extract/css').ComplexStyleRule;
+    };
+}>;
+export declare const arrowInverse: import('@vanilla-extract/recipes').RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import('@vanilla-extract/css').ComplexStyleRule;
+    };
+}>;
+export declare const arrowInverseBorder: string;
+export type TooltipVariants = RecipeVariants<typeof tooltip>;

package/dist/src/vanilla/Tooltip/Tooltip.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps, ReactNode } from 'react';
+import { TooltipProps as TooltipPrimitiveProps, Focusable, TooltipTrigger as TooltipTriggerPrimitive } from 'react-aria-components';
+import { ExtendProps } from '../../utils/ExtendProps';
+import { BoxProps } from '../Box';
+import * as styles from './Tooltip.css';
+type TooltipProps = ComponentProps<typeof TooltipTriggerPrimitive> & {
+    /**
+     * Only show the tooltip when children are partially hidden due to text overflow.
+     */
+    auto?: boolean;
+};
+declare const Tooltip: {
+    ({ delay, auto, defaultOpen, onOpenChange, isOpen: openProp, ...props }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type TooltipContentProps = Omit<TooltipPrimitiveProps, 'children'> & ExtendProps<BoxProps, NonNullable<styles.TooltipVariants>> & {
+    showArrow?: boolean;
+    children?: ReactNode;
+};
+declare const TooltipContent: {
+    ({ offset, inverse, showArrow, children, className, ...props }: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare function TooltipTrigger({ ...props }: ComponentProps<typeof Focusable>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace TooltipTrigger {
+    var displayName: string;
+}
+export { Tooltip, TooltipContent, TooltipTrigger };
+export type { TooltipContentProps, TooltipProps };

package/dist/src/vanilla/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/src/vanilla/index.d.ts

@@ -2,3 +2,4 @@ export * from './Box';
 export * from './Table';
 export * from './Text';
 export * from './ThemeProvider';
+export * from './Tooltip';

package/dist/vanilla/Tooltip/Tooltip-css.js

@@ -0,0 +1,12 @@
+import './../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../assets/src/vanilla-extract/global.css.ts.vanilla-t__QdzLU.css';
+import './../assets/src/sprinkles/properties.css.ts.vanilla-Ckyezauv.css';
+import './../assets/src/vanilla/Tooltip/Tooltip.css.ts.vanilla-nRPDcOsw.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var arrow = createRuntimeFn({defaultClassName:'_1gov5q56',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var arrowInverse = createRuntimeFn({defaultClassName:'_1gov5q58',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var arrowInverseBorder = '_1gov5q5a';
+var tooltip = createRuntimeFn({defaultClassName:'_146hxcf13o _146hxcf2c _146hxcfk8 _146hxcf1gh _146hxcf1j1 _1gov5q50',variantClassNames:{inverse:{true:'_146hxcf1hp _146hxcf1gc _146hxcf1hj _146hxcf1hm _146hxcf1kw _146hxcf21c _146hxcf1uc _146hxcf1hu',false:'_146hxcf1l0 _146hxcf224'}},defaultVariants:{},compoundVariants:[]});
+
+export { arrow, arrowInverse, arrowInverseBorder, tooltip };

package/dist/vanilla/Tooltip/Tooltip.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { createContext, useRef, useContext } from 'react';
+import { TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Focusable } from 'react-aria-components';
+import { cn } from '../src/utils/cn.js';
+import { Box } from '../Box/Box.js';
+import { extractBoxProps } from '../Box/extractBoxProps.js';
+import { arrowInverse, arrowInverseBorder, arrow, tooltip } from './Tooltip-css.js';
+
+const TooltipContext = createContext({ triggerRef: null });
+const Tooltip = ({
+  delay = 500,
+  auto = false,
+  defaultOpen = false,
+  onOpenChange,
+  isOpen: openProp,
+  ...props
+}) => {
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useControllableState({
+    caller: "Tooltip",
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: { triggerRef }, children: /* @__PURE__ */ jsx(
+    TooltipTrigger$1,
+    {
+      delay,
+      defaultOpen: auto ? open : defaultOpen,
+      isDisabled: auto && openProp === void 0 ? void 0 : props.isDisabled,
+      isOpen: auto ? open : openProp,
+      onOpenChange: (isOpen) => {
+        if (auto && isOpen && triggerRef.current && !hasTruncatedContent(triggerRef.current)) {
+          return;
+        }
+        setOpen(isOpen);
+      },
+      ...props
+    }
+  ) });
+};
+Tooltip.displayName = "Tooltip";
+const TooltipContent = ({
+  offset = 8,
+  inverse = false,
+  showArrow = true,
+  children,
+  className,
+  ...props
+}) => {
+  const { boxProps, restProps } = extractBoxProps(props);
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className: cn(tooltip({ inverse }), className), ...boxProps, children: /* @__PURE__ */ jsxs(Tooltip$1, { ...restProps, offset, children: [
+    showArrow && /* @__PURE__ */ jsx(OverlayArrow, { children: inverse ? /* @__PURE__ */ jsxs("svg", { width: 18, height: 8, viewBox: "0 0 18 8", className: arrowInverse(), children: [
+      /* @__PURE__ */ jsx("path", { d: "M9.00744 6.52304L1.6397 0.000488281L16.3752 0.000489658L9.00744 6.52304Z" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.00337 6.51095L16.3588 0.00158653H18.0034L9.00337 8.00049L0.00337219 0.00158653L1.6397 0.000488281L9.00337 6.51095Z",
+          className: arrowInverseBorder
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("svg", { width: 15, height: 6, viewBox: "0 0 15 6", className: arrow(), children: /* @__PURE__ */ jsx("path", { d: "M7.5 6L0.500001 -1.22392e-06L14.5 0L7.5 6Z" }) }) }),
+    children
+  ] }) });
+};
+TooltipContent.displayName = "TooltipContent";
+function TooltipTrigger({ ...props }) {
+  const { triggerRef } = useContext(TooltipContext);
+  return /* @__PURE__ */ jsx(Focusable, { ref: triggerRef, "data-slot": "tooltip-trigger", ...props });
+}
+TooltipTrigger.displayName = "TooltipTrigger";
+const hasTruncatedContent = (element) => {
+  let truncated = false;
+  const elements = [element];
+  while (!truncated && elements.length) {
+    const element2 = elements.shift();
+    if (!(element2 instanceof HTMLElement)) {
+      continue;
+    }
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element2;
+    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
+      truncated = true;
+      break;
+    }
+    elements.push(...element2.children);
+  }
+  return truncated;
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/dist/vanilla/assets/src/vanilla/Tooltip/Tooltip.css.ts.vanilla-nRPDcOsw.css

@@ -0,0 +1,39 @@
+@layer ictinus._16quzhu0;
+@layer ictinus._16quzhu0 {
+  ._1gov5q50 {
+    transform: translate3d(0, 0, 0);
+    transform-origin: var(--trigger-anchor-point);
+  }
+  ._1gov5q54 {
+    background: transparent;
+  }
+  ._1gov5q56 {
+    display: block;
+    fill: var(--ictinus-color-background-inverted);
+  }
+  [data-placement=bottom] ._1gov5q56 {
+    transform: rotate(180deg);
+  }
+  [data-placement=right] ._1gov5q56 {
+    transform: rotate(90deg) translateY(-5px);
+  }
+  [data-placement=left] ._1gov5q56 {
+    transform: rotate(-90deg) translateY(-5px);
+  }
+  ._1gov5q58 {
+    display: block;
+    fill: var(--ictinus-color-background-alt);
+  }
+  [data-placement=bottom] ._1gov5q58 {
+    transform: rotate(180deg);
+  }
+  [data-placement=right] ._1gov5q58 {
+    transform: rotate(90deg) translateY(-5px);
+  }
+  [data-placement=left] ._1gov5q58 {
+    transform: rotate(-90deg) translateY(-5px);
+  }
+  ._1gov5q5a {
+    fill: var(--ictinus-color-border-color-decorative-default);
+  }
+}

package/dist/vanilla/index.d.ts

@@ -1,8 +1,9 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentProps } from 'react';
 import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
 import { RecipeVariants } from '@vanilla-extract/recipes';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { TooltipTrigger as TooltipTrigger$1, TooltipProps as TooltipProps$1, Focusable } from 'react-aria-components';
 
 declare const sprinkles: ((props: {
     borderColor?: "decorative.transparent" | "decorative.default" | "decorative.inverted" | "interactive.default" | "interactive.active" | "interactive.error" | "interactive.upsell" | "interactive.warning" | "interactive.success" | "interactive.focused";
@@ -3805,5 +3806,36 @@ type ThemeProviderProps = {
 declare const ThemeProvider: ({ children, colorScheme: initialColorScheme, asChild, }: ThemeProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const useTheme: () => ThemeContextValue;
 
-export { Box, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Text, ThemeProvider, extractBoxProps, useTheme };
-export type { BoxProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps };
+declare const tooltip: _vanilla_extract_recipes.RuntimeFn<{
+    inverse: {
+        true: string;
+        false: string;
+    };
+}>;
+type TooltipVariants = RecipeVariants<typeof tooltip>;
+
+type TooltipProps = ComponentProps<typeof TooltipTrigger$1> & {
+    /**
+     * Only show the tooltip when children are partially hidden due to text overflow.
+     */
+    auto?: boolean;
+};
+declare const Tooltip: {
+    ({ delay, auto, defaultOpen, onOpenChange, isOpen: openProp, ...props }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type TooltipContentProps = Omit<TooltipProps$1, 'children'> & ExtendProps<BoxProps, NonNullable<TooltipVariants>> & {
+    showArrow?: boolean;
+    children?: ReactNode;
+};
+declare const TooltipContent: {
+    ({ offset, inverse, showArrow, children, className, ...props }: TooltipContentProps): _emotion_react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare function TooltipTrigger({ ...props }: ComponentProps<typeof Focusable>): _emotion_react_jsx_runtime.JSX.Element;
+declare namespace TooltipTrigger {
+    var displayName: string;
+}
+
+export { Box, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Text, ThemeProvider, Tooltip, TooltipContent, TooltipTrigger, extractBoxProps, useTheme };
+export type { BoxProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps, TooltipContentProps, TooltipProps };

package/dist/vanilla/index.js

@@ -9,3 +9,4 @@ export { TableHeaderCell } from './Table/TableHeaderCell.js';
 export { TableRow } from './Table/TableRow.js';
 export { Text } from './Text/Text.js';
 export { ThemeProvider, useTheme } from './ThemeProvider/ThemeProvider.js';
+export { Tooltip, TooltipContent, TooltipTrigger } from './Tooltip/Tooltip.js';

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.41.2";
+var version = "5.41.4";
 
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.41.2",
+  "version": "5.41.4",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",

package/src/vanilla/Tooltip/Tooltip.css.ts

@@ -0,0 +1,93 @@
+import { vars } from '@orfium/tokens';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sprinkles } from '../../sprinkles';
+import { style } from '../../vanilla-extract';
+
+export const tooltip = recipe({
+  base: [
+    sprinkles({
+      display: 'flex',
+      flexDirection: 'column',
+      p: '4',
+      borderRadius: '2',
+      typography: 'body03',
+    }),
+    style({
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: 'var(--trigger-anchor-point)',
+    }),
+  ],
+  variants: {
+    inverse: {
+      true: sprinkles({
+        bg: 'alt',
+        color: 'primary',
+        border: '1',
+        borderColor: 'decorative.default',
+        boxShadow: '2',
+      }),
+      false: sprinkles({
+        bg: 'inverted',
+        color: 'inverted.primary',
+      }),
+    },
+  },
+});
+
+export const trigger = style([
+  sprinkles({
+    cursor: 'default',
+  }),
+  style({
+    background: 'transparent',
+  }),
+]);
+
+export const arrow = recipe({
+  base: [
+    style({
+      display: 'block',
+      fill: vars.color.background.inverted,
+
+      selectors: {
+        '[data-placement=bottom] &': {
+          transform: 'rotate(180deg)',
+        },
+        '[data-placement=right] &': {
+          transform: 'rotate(90deg) translateY(-5px)',
+        },
+        '[data-placement=left] &': {
+          transform: 'rotate(-90deg) translateY(-5px)',
+        },
+      },
+    }),
+  ],
+});
+
+export const arrowInverse = recipe({
+  base: [
+    style({
+      display: 'block',
+      fill: vars.color.background.alt,
+
+      selectors: {
+        '[data-placement=bottom] &': {
+          transform: 'rotate(180deg)',
+        },
+        '[data-placement=right] &': {
+          transform: 'rotate(90deg) translateY(-5px)',
+        },
+        '[data-placement=left] &': {
+          transform: 'rotate(-90deg) translateY(-5px)',
+        },
+      },
+    }),
+  ],
+});
+
+export const arrowInverseBorder = style({
+  fill: vars.color['border-color'].decorative.default,
+});
+
+export type TooltipVariants = RecipeVariants<typeof tooltip>;

package/src/vanilla/Tooltip/Tooltip.tsx

@@ -0,0 +1,147 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import {
+  createContext,
+  useContext,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import type { TooltipProps as TooltipPrimitiveProps } from 'react-aria-components';
+import {
+  Focusable,
+  OverlayArrow,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+} from 'react-aria-components';
+
+import { cn } from '../../utils/cn';
+import { type ExtendProps } from '../../utils/ExtendProps';
+import { Box, extractBoxProps, type BoxProps } from '../Box';
+import * as styles from './Tooltip.css';
+
+const TooltipContext = createContext<{
+  triggerRef: RefObject<HTMLElement> | null;
+}>({ triggerRef: null });
+
+type TooltipProps = ComponentProps<typeof TooltipTriggerPrimitive> & {
+  /**
+   * Only show the tooltip when children are partially hidden due to text overflow.
+   */
+  auto?: boolean;
+};
+
+const Tooltip = ({
+  delay = 500,
+  auto = false,
+  defaultOpen = false,
+  onOpenChange,
+  isOpen: openProp,
+  ...props
+}: TooltipProps) => {
+  const triggerRef = useRef<HTMLElement>(null);
+  const [open, setOpen] = useControllableState({
+    caller: 'Tooltip',
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp,
+  });
+
+  return (
+    <TooltipContext.Provider value={{ triggerRef }}>
+      <TooltipTriggerPrimitive
+        delay={delay}
+        defaultOpen={auto ? open : defaultOpen}
+        isDisabled={auto && openProp === undefined ? undefined : props.isDisabled}
+        isOpen={auto ? open : openProp}
+        onOpenChange={(isOpen) => {
+          if (auto && isOpen && triggerRef.current && !hasTruncatedContent(triggerRef.current)) {
+            return;
+          }
+
+          setOpen(isOpen);
+        }}
+        {...props}
+      />
+    </TooltipContext.Provider>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';
+
+type TooltipContentProps = Omit<TooltipPrimitiveProps, 'children'> &
+  ExtendProps<BoxProps, NonNullable<styles.TooltipVariants>> & {
+    showArrow?: boolean;
+    children?: ReactNode;
+  };
+
+const TooltipContent = ({
+  offset = 8,
+  inverse = false,
+  showArrow = true,
+  children,
+  className,
+  ...props
+}: TooltipContentProps) => {
+  const { boxProps, restProps } = extractBoxProps(props);
+
+  return (
+    <Box asChild className={cn(styles.tooltip({ inverse }), className)} {...boxProps}>
+      <TooltipPrimitive {...restProps} offset={offset}>
+        {showArrow && (
+          <OverlayArrow>
+            {inverse ? (
+              <svg width={18} height={8} viewBox="0 0 18 8" className={styles.arrowInverse()}>
+                <path d="M9.00744 6.52304L1.6397 0.000488281L16.3752 0.000489658L9.00744 6.52304Z" />
+                <path
+                  d="M9.00337 6.51095L16.3588 0.00158653H18.0034L9.00337 8.00049L0.00337219 0.00158653L1.6397 0.000488281L9.00337 6.51095Z"
+                  className={styles.arrowInverseBorder}
+                />
+              </svg>
+            ) : (
+              <svg width={15} height={6} viewBox="0 0 15 6" className={styles.arrow()}>
+                <path d="M7.5 6L0.500001 -1.22392e-06L14.5 0L7.5 6Z" />
+              </svg>
+            )}
+          </OverlayArrow>
+        )}
+        {children}
+      </TooltipPrimitive>
+    </Box>
+  );
+};
+
+TooltipContent.displayName = 'TooltipContent';
+
+function TooltipTrigger({ ...props }: ComponentProps<typeof Focusable>) {
+  const { triggerRef } = useContext(TooltipContext);
+
+  return <Focusable ref={triggerRef} data-slot="tooltip-trigger" {...props} />;
+}
+
+TooltipTrigger.displayName = 'TooltipTrigger';
+
+const hasTruncatedContent = (element: HTMLElement) => {
+  let truncated = false;
+
+  const elements: Element[] = [element];
+  while (!truncated && elements.length) {
+    const element = elements.shift();
+    if (!(element instanceof HTMLElement)) {
+      continue;
+    }
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element;
+
+    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
+      truncated = true;
+      break;
+    }
+
+    elements.push(...element.children);
+  }
+
+  return truncated;
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger };
+export type { TooltipContentProps, TooltipProps };

package/src/vanilla/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/src/vanilla/index.ts

@@ -2,3 +2,4 @@ export * from './Box';
 export * from './Table';
 export * from './Text';
 export * from './ThemeProvider';
+export * from './Tooltip';