@geckoui/geckoui 1.2.0-beta.1 → 1.2.0-beta.2

package/dist/index.d.mts

@@ -2989,9 +2989,12 @@ interface TooltipProps extends PropsWithChildren {
      * */
     triggerClassName?: string;
     /**
-     * Whether consider the trigger as a child
-     * Use this to avoid invalid button nesting errors when using a button as the trigger
-     * If you use custom components as the trigger, you might need to wrap with `forwardRef`
+     * Classname to apply to the tooltip arrow
+     * */
+    arrowClassName?: string;
+    /**
+     * Whether to use the child element directly as the trigger.
+     * Use this to avoid invalid button nesting errors when using a button as the trigger.
      * */
     triggerAsChild?: boolean;
     /**
@@ -3001,60 +3004,13 @@ interface TooltipProps extends PropsWithChildren {
     /**
      * The side of the tooltip to display
      * */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: Placement;
     /**
      * The offset of the tooltip from the trigger
      * */
     sideOffset?: number;
 }
 
-/**
- * Tooltip displays contextual information in a floating overlay when users hover over or focus on an element.
- * Built on Radix UI, it provides accessible tooltips with customizable positioning, delays, and styling.
- * Returns children unchanged if no content is provided.
- *
- * @example
- * Icon button with helpful hint:
- *
- * ```tsx
- * <Tooltip content="Add new item" side="right" delayDuration={300}>
- *   <button className="p-2">
- *     <PlusIcon />
- *   </button>
- * </Tooltip>
- * ```
- *
- * @example
- * Complex tooltip content:
- *
- * ```tsx
- * <Tooltip
- *   content={
- *     <div>
- *       <strong>Premium Feature</strong>
- *       <p>Upgrade to access this feature</p>
- *     </div>
- *   }
- *   backgroundColor="#1f2937"
- *   sideOffset={10}
- * >
- *   <LockIcon />
- * </Tooltip>
- * ```
- *
- * @example
- * Bottom-positioned with custom delay:
- *
- * ```tsx
- * <Tooltip
- *   content="Last updated: 2 hours ago"
- *   side="bottom"
- *   delayDuration={500}
- * >
- *   <span>Status: Active</span>
- * </Tooltip>
- * ```
- */
 declare const Tooltip: FC<TooltipProps>;
 
 /** Extensible variant map - To allow module augmentation */

package/dist/index.d.ts

@@ -2989,9 +2989,12 @@ interface TooltipProps extends PropsWithChildren {
      * */
     triggerClassName?: string;
     /**
-     * Whether consider the trigger as a child
-     * Use this to avoid invalid button nesting errors when using a button as the trigger
-     * If you use custom components as the trigger, you might need to wrap with `forwardRef`
+     * Classname to apply to the tooltip arrow
+     * */
+    arrowClassName?: string;
+    /**
+     * Whether to use the child element directly as the trigger.
+     * Use this to avoid invalid button nesting errors when using a button as the trigger.
      * */
     triggerAsChild?: boolean;
     /**
@@ -3001,60 +3004,13 @@ interface TooltipProps extends PropsWithChildren {
     /**
      * The side of the tooltip to display
      * */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: Placement;
     /**
      * The offset of the tooltip from the trigger
      * */
     sideOffset?: number;
 }
 
-/**
- * Tooltip displays contextual information in a floating overlay when users hover over or focus on an element.
- * Built on Radix UI, it provides accessible tooltips with customizable positioning, delays, and styling.
- * Returns children unchanged if no content is provided.
- *
- * @example
- * Icon button with helpful hint:
- *
- * ```tsx
- * <Tooltip content="Add new item" side="right" delayDuration={300}>
- *   <button className="p-2">
- *     <PlusIcon />
- *   </button>
- * </Tooltip>
- * ```
- *
- * @example
- * Complex tooltip content:
- *
- * ```tsx
- * <Tooltip
- *   content={
- *     <div>
- *       <strong>Premium Feature</strong>
- *       <p>Upgrade to access this feature</p>
- *     </div>
- *   }
- *   backgroundColor="#1f2937"
- *   sideOffset={10}
- * >
- *   <LockIcon />
- * </Tooltip>
- * ```
- *
- * @example
- * Bottom-positioned with custom delay:
- *
- * ```tsx
- * <Tooltip
- *   content="Last updated: 2 hours ago"
- *   side="bottom"
- *   delayDuration={500}
- * >
- *   <span>Status: Active</span>
- * </Tooltip>
- * ```
- */
 declare const Tooltip: FC<TooltipProps>;
 
 /** Extensible variant map - To allow module augmentation */

package/dist/index.js

@@ -2616,7 +2616,8 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Tooltip/Tooltip.tsx
-var RTooltip = __toESM(require("@radix-ui/react-tooltip"));
+var import_react17 = require("@floating-ui/react");
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Tooltip = ({
   children,
@@ -2625,37 +2626,77 @@ var Tooltip = ({
   className,
   triggerClassName,
   triggerAsChild = false,
-  backgroundColor = "#4b5563",
+  arrowClassName,
+  backgroundColor,
   side = "top",
-  sideOffset = 5
+  sideOffset = 12
 }) => {
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const arrowRef = (0, import_react18.useRef)(null);
+  const timeoutRef = (0, import_react18.useRef)(null);
+  const { refs, floatingStyles, context } = (0, import_react17.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: side,
+    middleware: [(0, import_react17.offset)(sideOffset), (0, import_react17.flip)(), (0, import_react17.shift)({ padding: 5 }), (0, import_react17.arrow)({ element: arrowRef })]
+  });
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+    }, delayDuration);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(false);
+  };
   if (!content) return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RTooltip.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      RTooltip.Trigger,
-      {
-        asChild: triggerAsChild,
-        className: classNames(!triggerAsChild && "GeckoUITooltip__trigger", triggerClassName),
-        role: "tooltip",
-        type: "button",
-        children
+  const triggerProps = {
+    ref: refs.setReference,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave
+  };
+  const renderTrigger = () => {
+    if (triggerAsChild) {
+      const child = import_react18.Children.only(children);
+      if ((0, import_react18.isValidElement)(child)) {
+        return (0, import_react18.cloneElement)(child, __spreadProps(__spreadValues({}, triggerProps), {
+          className: classNames(child.props.className, triggerClassName)
+        }));
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-      RTooltip.Content,
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", __spreadProps(__spreadValues({}, triggerProps), { className: classNames("GeckoUITooltip__trigger", triggerClassName), children }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    renderTrigger(),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
       {
-        side,
+        ref: refs.setFloating,
+        style: __spreadProps(__spreadValues({}, floatingStyles), { backgroundColor }),
         className: classNames("GeckoUITooltip", className),
-        sideOffset,
         role: "tooltip",
-        style: { backgroundColor },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DynamicComponentRenderer_default, { component: content }),
-          (side === "top" || side === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Arrow, { fill: backgroundColor, className: "GeckoUITooltip__arrow" })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_react17.FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              className: classNames("GeckoUITooltip__arrow", arrowClassName),
+              style: { fill: backgroundColor }
+            }
+          )
         ]
       }
     ) })
-  ] }) });
+  ] });
 };
 var Tooltip_default = Tooltip;
 
@@ -2705,9 +2746,9 @@ var InputError = (_a) => {
 var InputError_default = InputError;
 
 // src/components/Button/Button.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Button = (0, import_react17.forwardRef)(
+var Button = (0, import_react19.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "filled", size = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -2817,7 +2858,7 @@ LoadingButton.displayName = "LoadingButton";
 var LoadingButton_default = LoadingButton;
 
 // src/components/RHF/RHFCheckbox/RHFCheckbox.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/utils/isEqual.ts
 var import_lodash = __toESM(require("lodash.isequal"));
@@ -2872,7 +2913,7 @@ var RHFCheckbox = (_a) => {
     "partial",
     "onBlur"
   ]);
-  const _id = (0, import_react18.useId)();
+  const _id = (0, import_react20.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     RHFController_default,
     {
@@ -3046,7 +3087,7 @@ RHFInput.displayName = "RHFInput";
 var RHFInput_default = RHFInput;
 
 // src/components/RHF/RHFError/RHFError.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var RHFError = ({ name, control, className, render }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3056,7 +3097,7 @@ var RHFError = ({ name, control, className, render }) => {
       name,
       render: ({ fieldState }) => {
         const { error } = fieldState;
-        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react19.Fragment, {}, "rhf-error");
+        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react21.Fragment, {}, "rhf-error");
         if (typeof render === "function") {
           return render(fieldState);
         }
@@ -3196,10 +3237,10 @@ RHFCurrencyInput.displayName = "RHFCurrencyInput";
 var RHFCurrencyInput_default = RHFCurrencyInput;
 
 // src/components/Textarea/Textarea.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Textarea = (0, import_react20.forwardRef)(
+var Textarea = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, { autoResize, className, rows = 2, maxRows } = _b, rest = __objRest(_b, ["autoResize", "className", "rows", "maxRows"]);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -3272,14 +3313,14 @@ RHFTextarea.displayName = "RHFTextarea";
 var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
-var import_react21 = require("@headlessui/react");
-var import_react22 = require("react");
+var import_react23 = require("@headlessui/react");
+var import_react24 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Switch = (0, import_react22.forwardRef)(
+var Switch = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, thumbClassName, size = "md" } = _b, rest = __objRest(_b, ["className", "thumbClassName", "size"]);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_react21.Switch,
+      import_react23.Switch,
       __spreadProps(__spreadValues({
         onKeyUp: (e) => {
           if (e.key === "Enter") {
@@ -3385,12 +3426,12 @@ RHFSwitch.displayName = "RHFSwitch";
 var RHFSwitch_default = RHFSwitch;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // src/components/Radio/Radio.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Radio = (0, import_react23.forwardRef)((_a, ref) => {
+var Radio = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", __spreadProps(__spreadValues({ className: classNames("GeckoUIRadio", className), ref }, rest), { type: "radio" }));
 });
@@ -3423,7 +3464,7 @@ var RHFRadio = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  const _id = (0, import_react24.useId)();
+  const _id = (0, import_react26.useId)();
   const uniqueId = id || _id;
   if (value === void 0 || value === null) {
     throw new Error("RHFRadio: value cannot be undefined or null");
@@ -3606,9 +3647,9 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var OTPInput = (0, import_react25.forwardRef)(
+var OTPInput = (0, import_react27.forwardRef)(
   ({
     value = "",
     onChange,
@@ -3621,7 +3662,7 @@ var OTPInput = (0, import_react25.forwardRef)(
     onOTPComplete,
     disabled
   }, ref) => {
-    const divRef = (0, import_react25.useRef)(null);
+    const divRef = (0, import_react27.useRef)(null);
     const focus = (index) => {
       var _a, _b;
       const children = (_a = divRef.current) == null ? void 0 : _a.children;
@@ -3881,8 +3922,8 @@ RHFFilePicker.displayName = "RHFFilePicker";
 var RHFFilePicker_default = RHFFilePicker;
 
 // src/components/Select/Select/Select.tsx
-var import_react30 = require("@floating-ui/react");
-var import_react31 = require("react");
+var import_react32 = require("@floating-ui/react");
+var import_react33 = require("react");
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -3951,7 +3992,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/utils/createLabel.ts
 function createLabel(item) {
@@ -3984,13 +4025,13 @@ var createLabel_default = createLabel;
 
 // src/components/Select/hooks/useSelectTrigger.tsx
 var import_lodash2 = __toESM(require("lodash.isequal"));
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/Select/useSelect.tsx
-var import_react26 = require("react");
-var SelectContext = (0, import_react26.createContext)(void 0);
+var import_react28 = require("react");
+var SelectContext = (0, import_react28.createContext)(void 0);
 var useSelect = () => {
-  const context = (0, import_react26.useContext)(SelectContext);
+  const context = (0, import_react28.useContext)(SelectContext);
   if (context === void 0) {
     throw new Error("SelectContext must be used within a SelectProvider");
   }
@@ -4069,7 +4110,7 @@ var useSelectTrigger = () => {
       handleChange(value.at(-1));
     }
   };
-  const hasValue = (0, import_react27.useMemo)(() => {
+  const hasValue = (0, import_react29.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) && !!(value == null ? void 0 : value.length);
     }
@@ -4129,9 +4170,9 @@ function SelectButton({ prefix, suffix, className }) {
     onChange,
     clearable
   } = useSelect();
-  const id = (0, import_react28.useId)();
+  const id = (0, import_react30.useId)();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
-  const trigger = (0, import_react28.useMemo)(() => import_react28.Children.toArray(children).find(isSelectTrigger), [children]);
+  const trigger = (0, import_react30.useMemo)(() => import_react30.Children.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -4319,7 +4360,7 @@ SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
 var import_lodash3 = __toESM(require("lodash.isequal"));
@@ -4429,8 +4470,8 @@ var SelectMenu = (_a) => {
     menuScrollContainerRef,
     floating: { refs, floatingStyles }
   } = useSelect();
-  const menuItems = (0, import_react29.useMemo)(
-    () => import_react29.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
+  const menuItems = (0, import_react31.useMemo)(
+    () => import_react31.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
   if (!open || disabled) {
@@ -4461,7 +4502,7 @@ var SelectMenu = (_a) => {
 function Empty({ children }) {
   const { hideDefaultEmptyUI = false } = useSelect();
   if (hideDefaultEmptyUI) return null;
-  const customEmpty = import_react29.Children.toArray(children).find(isSelectEmpty);
+  const customEmpty = import_react31.Children.toArray(children).find(isSelectEmpty);
   if (customEmpty) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectEmpty_default, {});
 }
@@ -4471,8 +4512,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var Select = (props) => {
-  const inputRef = (0, import_react31.useRef)(null);
-  const menuScrollContainerRef = (0, import_react31.useRef)(null);
+  const inputRef = (0, import_react33.useRef)(null);
+  const menuScrollContainerRef = (0, import_react33.useRef)(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -4500,22 +4541,22 @@ var Select = (props) => {
     "floatingStrategy",
     "clearable"
   ]);
-  const [open, setOpen] = (0, import_react31.useState)(false);
-  const [keyword, setKeyword] = (0, import_react31.useState)("");
-  const [focusedOption, setFocusedOption] = (0, import_react31.useState)(null);
-  const floating = (0, import_react30.useFloating)({
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const [keyword, setKeyword] = (0, import_react33.useState)("");
+  const [focusedOption, setFocusedOption] = (0, import_react33.useState)(null);
+  const floating = (0, import_react32.useFloating)({
     placement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react30.flip)({ padding: 6 }), (0, import_react30.offset)({ mainAxis: 6 })],
-    whileElementsMounted: import_react30.autoUpdate,
+    middleware: [(0, import_react32.flip)({ padding: 6 }), (0, import_react32.offset)({ mainAxis: 6 })],
+    whileElementsMounted: import_react32.autoUpdate,
     open,
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const options = (0, import_react31.useMemo)(
+  const options = (0, import_react33.useMemo)(
     () => {
       var _a2;
-      return (_a2 = import_react31.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
+      return (_a2 = import_react33.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
     },
     [children]
   );
@@ -4611,7 +4652,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -4634,7 +4675,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = (0, import_react32.useRef)(null);
+  const ref = (0, import_react34.useRef)(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -4652,7 +4693,7 @@ var SelectOption = (_a) => {
   } = useSelect();
   const selected = isSelected(value);
   const focused = !isNil_default(focusedOption) && isEqual_default(focusedOption == null ? void 0 : focusedOption.value, value);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!ref.current || !menuScrollContainerRef.current) return;
     if ((focusedOption == null ? void 0 : focusedOption.focusType) !== "mouse" && focused) {
       const scrollContainer = menuScrollContainerRef.current;
@@ -4708,7 +4749,7 @@ var SelectOption = (_a) => {
     }
     attachPreventDefault(selectCurrentOption);
   };
-  const Content2 = () => {
+  const Content = () => {
     if (!children) {
       return label;
     }
@@ -4737,7 +4778,7 @@ var SelectOption = (_a) => {
       },
       onClick: disabled ? void 0 : handleOnClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Content2, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Content, {}),
         !!selected && !hideCheckIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
       ]
     })
@@ -4959,10 +5000,10 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
 var Pagination_default = Pagination;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // src/components/Dialog/Dialog.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_client = require("react-dom/client");
 
 // src/components/Dialog/DialogContainer.tsx
@@ -5013,8 +5054,8 @@ function DialogContent(_a) {
     }
     return acc;
   }, {});
-  const ref = (0, import_react33.useRef)(null);
-  const [animationState, setAnimationState] = (0, import_react33.useState)("entering");
+  const ref = (0, import_react35.useRef)(null);
+  const [animationState, setAnimationState] = (0, import_react35.useState)("entering");
   const handleDismiss = () => {
     setAnimationState("closing");
     setTimeout(() => {
@@ -5025,7 +5066,7 @@ function DialogContent(_a) {
       }
     }, 300);
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     dismissCallback = handleDismiss;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -5056,10 +5097,10 @@ function ConfirmDialogContent({
   onConfirm,
   onCancel
 }) {
-  const [cancelLoading, setCancelLoading] = (0, import_react34.useState)(false);
-  const [confirmLoading, setConfirmLoading] = (0, import_react34.useState)(false);
+  const [cancelLoading, setCancelLoading] = (0, import_react36.useState)(false);
+  const [confirmLoading, setConfirmLoading] = (0, import_react36.useState)(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
-  const handleConfirm = (0, import_react34.useCallback)(() => __async(null, null, function* () {
+  const handleConfirm = (0, import_react36.useCallback)(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
     if (isAsync) {
       setConfirmLoading(true);
@@ -5077,7 +5118,7 @@ function ConfirmDialogContent({
     setCancelLoading(false);
     attachPreventDefault(dismiss2);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const onKeyDown = (e) => {
       const el = document.activeElement;
       if (e.key === "Enter") {
@@ -5172,7 +5213,7 @@ var GeckoUIPortal = ({ toastOptions = {} }) => {
 var GeckoUIPortal_default = GeckoUIPortal;
 
 // src/components/Drawer/Drawer.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_client2 = require("react-dom/client");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function getDrawerClasses(placement, open, className) {
@@ -5202,7 +5243,7 @@ function Drawer({
   children,
   dismissOnEscape = true
 }) {
-  const drawerRootRef = (0, import_react35.useRef)(null);
+  const drawerRootRef = (0, import_react37.useRef)(null);
   const handleDismiss = () => {
     if (open) handleClose == null ? void 0 : handleClose();
   };
@@ -5251,13 +5292,13 @@ Drawer.dismiss = () => {
 var Drawer_default = Drawer;
 
 // src/components/Menu/Menu.tsx
-var import_react36 = require("@headlessui/react");
+var import_react38 = require("@headlessui/react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var Menu = import_react36.Menu;
+var Menu = import_react38.Menu;
 var MenuButton = (_a) => {
   var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react36.MenuButton,
+    import_react38.MenuButton,
     __spreadProps(__spreadValues({
       as: as != null ? as : "button"
     }, rest), {
@@ -5274,7 +5315,7 @@ var MenuButton = (_a) => {
 var MenuItems = (_a) => {
   var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react36.MenuItems,
+    import_react38.MenuItems,
     __spreadProps(__spreadValues({
       as: as != null ? as : "div"
     }, rest), {
@@ -5291,7 +5332,7 @@ var MenuItems = (_a) => {
 var MenuItem = (_a) => {
   var _b = _a, { children, as } = _b, rest = __objRest(_b, ["children", "as"]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react36.MenuItem,
+    import_react38.MenuItem,
     __spreadProps(__spreadValues({}, rest), {
       className: (args) => {
         const className = rest.className;
@@ -5306,9 +5347,9 @@ var MenuItem = (_a) => {
     })
   );
 };
-var MenuHeading = import_react36.MenuHeading;
-var MenuSection = import_react36.MenuSection;
-var MenuSeparator = import_react36.MenuSeparator;
+var MenuHeading = import_react38.MenuHeading;
+var MenuSection = import_react38.MenuSection;
+var MenuSeparator = import_react38.MenuSeparator;
 
 // src/components/Dropdown/Dropdown.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -2516,8 +2516,17 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Tooltip/Tooltip.tsx
-import * as RTooltip from "@radix-ui/react-tooltip";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import {
+  FloatingArrow,
+  FloatingPortal,
+  arrow,
+  flip as flip3,
+  offset as offset3,
+  shift,
+  useFloating as useFloating3
+} from "@floating-ui/react";
+import { Children, cloneElement, isValidElement as isValidElement2, useRef as useRef7, useState as useState9 } from "react";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var Tooltip = ({
   children,
   delayDuration = 700,
@@ -2525,37 +2534,77 @@ var Tooltip = ({
   className,
   triggerClassName,
   triggerAsChild = false,
-  backgroundColor = "#4b5563",
+  arrowClassName,
+  backgroundColor,
   side = "top",
-  sideOffset = 5
+  sideOffset = 12
 }) => {
+  const [isOpen, setIsOpen] = useState9(false);
+  const arrowRef = useRef7(null);
+  const timeoutRef = useRef7(null);
+  const { refs, floatingStyles, context } = useFloating3({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: side,
+    middleware: [offset3(sideOffset), flip3(), shift({ padding: 5 }), arrow({ element: arrowRef })]
+  });
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+    }, delayDuration);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(false);
+  };
   if (!content) return children;
-  return /* @__PURE__ */ jsx18(RTooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs14(RTooltip.Root, { children: [
-    /* @__PURE__ */ jsx18(
-      RTooltip.Trigger,
-      {
-        asChild: triggerAsChild,
-        className: classNames(!triggerAsChild && "GeckoUITooltip__trigger", triggerClassName),
-        role: "tooltip",
-        type: "button",
-        children
+  const triggerProps = {
+    ref: refs.setReference,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave
+  };
+  const renderTrigger = () => {
+    if (triggerAsChild) {
+      const child = Children.only(children);
+      if (isValidElement2(child)) {
+        return cloneElement(child, __spreadProps(__spreadValues({}, triggerProps), {
+          className: classNames(child.props.className, triggerClassName)
+        }));
       }
-    ),
-    /* @__PURE__ */ jsx18(RTooltip.Portal, { children: /* @__PURE__ */ jsxs14(
-      RTooltip.Content,
+    }
+    return /* @__PURE__ */ jsx18("span", __spreadProps(__spreadValues({}, triggerProps), { className: classNames("GeckoUITooltip__trigger", triggerClassName), children }));
+  };
+  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    renderTrigger(),
+    isOpen && /* @__PURE__ */ jsx18(FloatingPortal, { children: /* @__PURE__ */ jsxs14(
+      "div",
       {
-        side,
+        ref: refs.setFloating,
+        style: __spreadProps(__spreadValues({}, floatingStyles), { backgroundColor }),
         className: classNames("GeckoUITooltip", className),
-        sideOffset,
         role: "tooltip",
-        style: { backgroundColor },
         children: [
           /* @__PURE__ */ jsx18(DynamicComponentRenderer_default, { component: content }),
-          (side === "top" || side === "bottom") && /* @__PURE__ */ jsx18(RTooltip.Arrow, { fill: backgroundColor, className: "GeckoUITooltip__arrow" })
+          /* @__PURE__ */ jsx18(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              className: classNames("GeckoUITooltip__arrow", arrowClassName),
+              style: { fill: backgroundColor }
+            }
+          )
         ]
       }
     ) })
-  ] }) });
+  ] });
 };
 var Tooltip_default = Tooltip;
 
@@ -2946,7 +2995,7 @@ RHFInput.displayName = "RHFInput";
 var RHFInput_default = RHFInput;
 
 // src/components/RHF/RHFError/RHFError.tsx
-import { Fragment as Fragment7 } from "react";
+import { Fragment as Fragment8 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var RHFError = ({ name, control, className, render }) => {
   return /* @__PURE__ */ jsx28(
@@ -2956,7 +3005,7 @@ var RHFError = ({ name, control, className, render }) => {
       name,
       render: ({ fieldState }) => {
         const { error } = fieldState;
-        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ jsx28(Fragment7, {}, "rhf-error");
+        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ jsx28(Fragment8, {}, "rhf-error");
         if (typeof render === "function") {
           return render(fieldState);
         }
@@ -3098,11 +3147,11 @@ var RHFCurrencyInput_default = RHFCurrencyInput;
 // src/components/Textarea/Textarea.tsx
 import { forwardRef as forwardRef5 } from "react";
 import ReactTextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment8, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
 var Textarea = forwardRef5(
   (_a, ref) => {
     var _b = _a, { autoResize, className, rows = 2, maxRows } = _b, rest = __objRest(_b, ["autoResize", "className", "rows", "maxRows"]);
-    return /* @__PURE__ */ jsx32(Fragment8, { children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx32(Fragment9, { children: /* @__PURE__ */ jsx32(
       ReactTextareaAutosize,
       __spreadValues({
         className: classNames("GeckoUITextarea", className),
@@ -3506,7 +3555,7 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-import { forwardRef as forwardRef8, useRef as useRef7 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef8 } from "react";
 import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 var OTPInput = forwardRef8(
   ({
@@ -3521,7 +3570,7 @@ var OTPInput = forwardRef8(
     onOTPComplete,
     disabled
   }, ref) => {
-    const divRef = useRef7(null);
+    const divRef = useRef8(null);
     const focus = (index) => {
       var _a, _b;
       const children = (_a = divRef.current) == null ? void 0 : _a.children;
@@ -3781,8 +3830,8 @@ RHFFilePicker.displayName = "RHFFilePicker";
 var RHFFilePicker_default = RHFFilePicker;
 
 // src/components/Select/Select/Select.tsx
-import { autoUpdate as autoUpdate3, flip as flip3, offset as offset3, useFloating as useFloating3 } from "@floating-ui/react";
-import { Children as Children3, useMemo as useMemo4, useRef as useRef8, useState as useState9 } from "react";
+import { autoUpdate as autoUpdate3, flip as flip4, offset as offset4, useFloating as useFloating4 } from "@floating-ui/react";
+import { Children as Children4, useMemo as useMemo4, useRef as useRef9, useState as useState10 } from "react";
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -3851,7 +3900,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-import { Children, useId as useId5, useMemo as useMemo2 } from "react";
+import { Children as Children2, useId as useId5, useMemo as useMemo2 } from "react";
 
 // src/utils/createLabel.ts
 function createLabel(item) {
@@ -4031,7 +4080,7 @@ function SelectButton({ prefix, suffix, className }) {
   } = useSelect();
   const id = useId5();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
-  const trigger = useMemo2(() => Children.toArray(children).find(isSelectTrigger), [children]);
+  const trigger = useMemo2(() => Children2.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -4219,7 +4268,7 @@ SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-import { Children as Children2, useMemo as useMemo3 } from "react";
+import { Children as Children3, useMemo as useMemo3 } from "react";
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
 import isEqual3 from "lodash.isequal";
@@ -4330,7 +4379,7 @@ var SelectMenu = (_a) => {
     floating: { refs, floatingStyles }
   } = useSelect();
   const menuItems = useMemo3(
-    () => Children2.toArray(children).filter((el) => !isSelectTrigger(el)),
+    () => Children3.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
   if (!open || disabled) {
@@ -4361,7 +4410,7 @@ var SelectMenu = (_a) => {
 function Empty({ children }) {
   const { hideDefaultEmptyUI = false } = useSelect();
   if (hideDefaultEmptyUI) return null;
-  const customEmpty = Children2.toArray(children).find(isSelectEmpty);
+  const customEmpty = Children3.toArray(children).find(isSelectEmpty);
   if (customEmpty) return null;
   return /* @__PURE__ */ jsx47(SelectEmpty_default, {});
 }
@@ -4371,8 +4420,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = (props) => {
-  const inputRef = useRef8(null);
-  const menuScrollContainerRef = useRef8(null);
+  const inputRef = useRef9(null);
+  const menuScrollContainerRef = useRef9(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -4400,13 +4449,13 @@ var Select = (props) => {
     "floatingStrategy",
     "clearable"
   ]);
-  const [open, setOpen] = useState9(false);
-  const [keyword, setKeyword] = useState9("");
-  const [focusedOption, setFocusedOption] = useState9(null);
-  const floating = useFloating3({
+  const [open, setOpen] = useState10(false);
+  const [keyword, setKeyword] = useState10("");
+  const [focusedOption, setFocusedOption] = useState10(null);
+  const floating = useFloating4({
     placement,
     strategy: floatingStrategy,
-    middleware: [flip3({ padding: 6 }), offset3({ mainAxis: 6 })],
+    middleware: [flip4({ padding: 6 }), offset4({ mainAxis: 6 })],
     whileElementsMounted: autoUpdate3,
     open,
     onOpenChange: setOpen
@@ -4415,7 +4464,7 @@ var Select = (props) => {
   const options = useMemo4(
     () => {
       var _a2;
-      return (_a2 = Children3.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
+      return (_a2 = Children4.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
     },
     [children]
   );
@@ -4511,7 +4560,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { useEffect as useEffect8, useRef as useRef10 } from "react";
 import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -4534,7 +4583,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -4608,7 +4657,7 @@ var SelectOption = (_a) => {
     }
     attachPreventDefault(selectCurrentOption);
   };
-  const Content2 = () => {
+  const Content = () => {
     if (!children) {
       return label;
     }
@@ -4637,7 +4686,7 @@ var SelectOption = (_a) => {
       },
       onClick: disabled ? void 0 : handleOnClick,
       children: [
-        /* @__PURE__ */ jsx49(Content2, {}),
+        /* @__PURE__ */ jsx49(Content, {}),
         !!selected && !hideCheckIcon && /* @__PURE__ */ jsx49("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
       ]
     })
@@ -4859,10 +4908,10 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
 var Pagination_default = Pagination;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useState as useState11 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useState as useState12 } from "react";
 
 // src/components/Dialog/Dialog.tsx
-import { useEffect as useEffect9, useRef as useRef10, useState as useState10 } from "react";
+import { useEffect as useEffect9, useRef as useRef11, useState as useState11 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/components/Dialog/DialogContainer.tsx
@@ -4913,8 +4962,8 @@ function DialogContent(_a) {
     }
     return acc;
   }, {});
-  const ref = useRef10(null);
-  const [animationState, setAnimationState] = useState10("entering");
+  const ref = useRef11(null);
+  const [animationState, setAnimationState] = useState11("entering");
   const handleDismiss = () => {
     setAnimationState("closing");
     setTimeout(() => {
@@ -4944,7 +4993,7 @@ var Dialog = { show, dismiss };
 var Dialog_default = Dialog;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 function ConfirmDialogContent({
   confirmButtonLabel = "Ok",
   cancelButtonLabel = "Cancel",
@@ -4956,8 +5005,8 @@ function ConfirmDialogContent({
   onConfirm,
   onCancel
 }) {
-  const [cancelLoading, setCancelLoading] = useState11(false);
-  const [confirmLoading, setConfirmLoading] = useState11(false);
+  const [cancelLoading, setCancelLoading] = useState12(false);
+  const [confirmLoading, setConfirmLoading] = useState12(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const handleConfirm = useCallback3(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
@@ -4994,7 +5043,7 @@ function ConfirmDialogContent({
       return document.removeEventListener("keydown", onKeyDown);
     };
   }, [handleConfirm]);
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__title", titleClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: title }) }),
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__content", contentClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: content, dismiss: dismiss2 }) }),
     /* @__PURE__ */ jsxs29("div", { className: "GeckoUIConfirmDialog__actions", children: [
@@ -5050,10 +5099,10 @@ function DrawerContainer() {
 }
 
 // src/components/GeckoUIPortal/GeckoUIPortal.tsx
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
 var GeckoUIPortal = ({ toastOptions = {} }) => {
   const _a = toastOptions, { style } = _a, restToastOptions = __objRest(_a, ["style"]);
-  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment11, { children: [
     /* @__PURE__ */ jsx57(
       Toaster,
       __spreadValues({
@@ -5072,7 +5121,7 @@ var GeckoUIPortal = ({ toastOptions = {} }) => {
 var GeckoUIPortal_default = GeckoUIPortal;
 
 // src/components/Drawer/Drawer.tsx
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 function getDrawerClasses(placement, open, className) {
@@ -5102,7 +5151,7 @@ function Drawer({
   children,
   dismissOnEscape = true
 }) {
-  const drawerRootRef = useRef11(null);
+  const drawerRootRef = useRef12(null);
   const handleDismiss = () => {
     if (open) handleClose == null ? void 0 : handleClose();
   };
@@ -5219,7 +5268,7 @@ var MenuSection = HeadlessMenuSection;
 var MenuSeparator = HeadlessMenuSeparator;
 
 // src/components/Dropdown/Dropdown.tsx
-import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs32 } from "react/jsx-runtime";
 function Dropdown(_a) {
   var _b = _a, {
     items,
@@ -5280,7 +5329,7 @@ function Dropdown(_a) {
         className: classNames("GeckoUIDropdown__menu", menuClassName),
         anchor: anchor || "bottom start",
         children: () => {
-          return /* @__PURE__ */ jsx60(Fragment11, { children: items.map((item, index) => {
+          return /* @__PURE__ */ jsx60(Fragment12, { children: items.map((item, index) => {
             const label = createLabel_default(item);
             return /* @__PURE__ */ jsx60(
               MenuItem,

package/dist/styles.css

@@ -1176,32 +1176,12 @@
   color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
 }
 .GeckoUITooltip__trigger {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  text-transform: none;
-  -webkit-appearance: button;
-  cursor: pointer;
-  background-color: transparent;
-  background-image: none;
+  display: inline-flex;
   height: -moz-fit-content;
   height: fit-content;
   width: -moz-fit-content;
   width: fit-content;
-}
-.GeckoUITooltip span:nth-child(2) {
-  bottom: 0.5px !important;
+  cursor: pointer;
 }
 .GeckoUITooltip {
   z-index: 50;
@@ -1209,7 +1189,7 @@
   max-width: 320px;
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--gecko-ui-surface-overlay) / var(--tw-bg-opacity, 1));
+  background-color: rgb(var(--gecko-ui-surface-emphasis) / var(--tw-bg-opacity, 1));
   padding: 0.5rem;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1220,61 +1200,9 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-}
-.GeckoUITooltip[data-state=delayed-open][data-side=top] {
-  animation-name: slideDownAndFade;
-}
-.GeckoUITooltip[data-state=delayed-open][data-side=right] {
-  animation-name: slideLeftAndFade;
-}
-.GeckoUITooltip[data-state=delayed-open][data-side=bottom] {
-  animation-name: slideUpAndFade;
-}
-.GeckoUITooltip[data-state=delayed-open][data-side=left] {
-  animation-name: slideRightAndFade;
 }
-@keyframes slideUpAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes slideRightAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(-2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes slideDownAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(-2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes slideLeftAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+.GeckoUITooltip__arrow {
+  fill: rgb(var(--gecko-ui-surface-emphasis) / 1);
 }
 .GeckoUISpinnerIcon {
   box-sizing: border-box;
@@ -3406,6 +3334,7 @@
   --gecko-ui-surface-disabled: 235 235 235;
   --gecko-ui-surface-overlay: 0 0 0;
   --gecko-ui-surface-autofill: 245 245 245;
+  --gecko-ui-surface-emphasis: 75 85 99;
   --gecko-ui-text-primary: 23 23 23;
   --gecko-ui-text-secondary: 64 64 64;
   --gecko-ui-text-tertiary: 115 115 115;
@@ -3433,6 +3362,7 @@
   --gecko-ui-surface-disabled: 45 45 45;
   --gecko-ui-surface-overlay: 0 0 0;
   --gecko-ui-surface-autofill: 32 32 32;
+  --gecko-ui-surface-emphasis: 179 182 185;
   --gecko-ui-text-primary: 250 250 250;
   --gecko-ui-text-secondary: 212 212 212;
   --gecko-ui-text-tertiary: 163 163 163;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckoui/geckoui",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -69,7 +69,6 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
     "@headlessui/react": "^2.2.9",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "lodash.isequal": "^4.5.0",
     "mime": "^4.1.0",
     "react-textarea-autosize": "^8.5.9",