@glob-ui/tooltip 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/tooltip
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A short description that appears on hover or keyboard focus. It stays open while the pointer is over it.
+
+## Install
+
+```bash
+pnpm add @glob-ui/tooltip
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Tooltip](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/tooltip.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Placement } from '@glob-ui/hooks';
+
+interface TooltipProps {
+    content: React.ReactNode;
+    /** One element that can hold a ref and receive focus (usually a button). */
+    children: React.ReactElement;
+    placement?: Placement;
+    /** Hover delay before opening, in ms. Keyboard focus opens immediately. */
+    delayDuration?: number;
+    /**
+     * Delay before closing after the pointer leaves, in ms. Moving onto the tooltip within this
+     * time keeps it open (WCAG 1.4.13, hoverable).
+     */
+    closeDelay?: number;
+    /** Gap between trigger and tooltip, in px. */
+    offset?: number;
+    arrow?: boolean;
+    className?: string;
+}
+declare function Tooltip({ content, children, placement, delayDuration, closeDelay, offset, arrow, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+
+export { Tooltip, type TooltipProps };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Placement } from '@glob-ui/hooks';
+
+interface TooltipProps {
+    content: React.ReactNode;
+    /** One element that can hold a ref and receive focus (usually a button). */
+    children: React.ReactElement;
+    placement?: Placement;
+    /** Hover delay before opening, in ms. Keyboard focus opens immediately. */
+    delayDuration?: number;
+    /**
+     * Delay before closing after the pointer leaves, in ms. Moving onto the tooltip within this
+     * time keeps it open (WCAG 1.4.13, hoverable).
+     */
+    closeDelay?: number;
+    /** Gap between trigger and tooltip, in px. */
+    offset?: number;
+    arrow?: boolean;
+    className?: string;
+}
+declare function Tooltip({ content, children, placement, delayDuration, closeDelay, offset, arrow, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+
+export { Tooltip, type TooltipProps };

package/dist/index.js

@@ -0,0 +1,141 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/tooltip.tsx
+var import_react = require("react");
+var import_utils = require("@glob-ui/utils");
+var import_slot = require("@glob-ui/slot");
+var import_hooks = require("@glob-ui/hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
+var oppositeSide = { top: "bottom", right: "left", bottom: "top", left: "right" };
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delayDuration = 500,
+  closeDelay = 150,
+  offset = 6,
+  arrow = false,
+  className
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [arrowEl, setArrowEl] = (0, import_react.useState)(null);
+  const timer = (0, import_react.useRef)(void 0);
+  const id = (0, import_react.useId)();
+  const { setTrigger, setPanel, floatingStyles, placement: finalPlacement, middlewareData } = (0, import_hooks.useFloatingPanel)({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    offset: offset + (arrow ? 4 : 0),
+    arrow: arrow ? arrowEl : null,
+    fitViewport: false,
+    restoreFocus: false
+  });
+  const show = (0, import_react.useCallback)((delay) => {
+    clearTimeout(timer.current);
+    if (delay <= 0) setOpen(true);
+    else timer.current = setTimeout(() => setOpen(true), delay);
+  }, []);
+  const hide = (0, import_react.useCallback)((delay) => {
+    clearTimeout(timer.current);
+    if (delay <= 0) setOpen(false);
+    else timer.current = setTimeout(() => setOpen(false), delay);
+  }, []);
+  (0, import_react.useEffect)(() => () => clearTimeout(timer.current), []);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") hide(0);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, hide]);
+  const child = import_react.Children.only(children);
+  const childDescribedBy = (0, import_react.isValidElement)(child) ? child.props["aria-describedby"] : void 0;
+  const side = finalPlacement.split("-")[0];
+  const arrowData = middlewareData.arrow;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_slot.Slot,
+      {
+        ref: setTrigger,
+        "aria-describedby": [childDescribedBy, id].filter(Boolean).join(" "),
+        onPointerEnter: (e) => {
+          if (e.pointerType !== "touch") show(delayDuration);
+        },
+        onPointerLeave: (e) => {
+          if (e.pointerType !== "touch") hide(closeDelay);
+        },
+        onPointerDown: () => hide(0),
+        onFocus: (e) => {
+          if (e.currentTarget.matches(":focus-visible")) show(0);
+        },
+        onBlur: () => hide(0),
+        children: child
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: setPanel,
+        id,
+        role: "tooltip",
+        popover: "manual",
+        style: floatingStyles,
+        onPointerEnter: () => clearTimeout(timer.current),
+        onPointerLeave: () => hide(closeDelay),
+        className: (0, import_utils.cn)(
+          "m-0 overflow-visible rounded-glob-sm border-0 bg-glob-text px-2 py-1 text-xs text-glob-surface shadow-glob-md",
+          "opacity-0 transition-[opacity,overlay,display] transition-discrete duration-100 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none",
+          className
+        ),
+        children: [
+          content,
+          arrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: setArrowEl,
+              "aria-hidden": "true",
+              className: "absolute h-2 w-2 rotate-45 bg-glob-text",
+              style: {
+                left: (arrowData == null ? void 0 : arrowData.x) != null ? `${arrowData.x}px` : void 0,
+                top: (arrowData == null ? void 0 : arrowData.y) != null ? `${arrowData.y}px` : void 0,
+                [oppositeSide[side]]: "-4px"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/tooltip.tsx"],"sourcesContent":["export { Tooltip } from \"./tooltip\"\nexport type { TooltipProps } from \"./tooltip\"\n","\"use client\"\n\nimport { Children, isValidElement, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Slot } from \"@glob-ui/slot\"\nimport { useFloatingPanel, type Placement } from \"@glob-ui/hooks\"\n\nconst oppositeSide = { top: \"bottom\", right: \"left\", bottom: \"top\", left: \"right\" } as const\n\nexport interface TooltipProps {\n  content: React.ReactNode\n  /** One element that can hold a ref and receive focus (usually a button). */\n  children: React.ReactElement\n  placement?: Placement\n  /** Hover delay before opening, in ms. Keyboard focus opens immediately. */\n  delayDuration?: number\n  /**\n   * Delay before closing after the pointer leaves, in ms. Moving onto the tooltip within this\n   * time keeps it open (WCAG 1.4.13, hoverable).\n   */\n  closeDelay?: number\n  /** Gap between trigger and tooltip, in px. */\n  offset?: number\n  arrow?: boolean\n  className?: string\n}\n\nfunction Tooltip({\n  content,\n  children,\n  placement = \"top\",\n  delayDuration = 500,\n  closeDelay = 150,\n  offset = 6,\n  arrow = false,\n  className,\n}: TooltipProps) {\n  const [open, setOpen] = useState(false)\n  const [arrowEl, setArrowEl] = useState<HTMLDivElement | null>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const id = useId()\n\n  // Destructured: the compiler would treat a whole object passed to `ref=` as a ref.\n  const { setTrigger, setPanel, floatingStyles, placement: finalPlacement, middlewareData } = useFloatingPanel({\n    open,\n    onOpenChange: setOpen,\n    placement,\n    offset: offset + (arrow ? 4 : 0),\n    arrow: arrow ? arrowEl : null,\n    fitViewport: false,\n    restoreFocus: false,\n  })\n\n  const show = useCallback((delay: number) => {\n    clearTimeout(timer.current)\n    if (delay <= 0) setOpen(true)\n    else timer.current = setTimeout(() => setOpen(true), delay)\n  }, [])\n  const hide = useCallback((delay: number) => {\n    clearTimeout(timer.current)\n    if (delay <= 0) setOpen(false)\n    else timer.current = setTimeout(() => setOpen(false), delay)\n  }, [])\n\n  useEffect(() => () => clearTimeout(timer.current), [])\n\n  // popover=\"manual\" has no Esc handling of its own.\n  useEffect(() => {\n    if (!open) return\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") hide(0)\n    }\n    document.addEventListener(\"keydown\", onKeyDown)\n    return () => document.removeEventListener(\"keydown\", onKeyDown)\n  }, [open, hide])\n\n  const child = Children.only(children)\n  const childDescribedBy = isValidElement<{ \"aria-describedby\"?: string }>(child)\n    ? child.props[\"aria-describedby\"]\n    : undefined\n  const side = finalPlacement.split(\"-\")[0] as keyof typeof oppositeSide\n  const arrowData = middlewareData.arrow\n\n  return (\n    <>\n      <Slot\n        ref={setTrigger}\n        aria-describedby={[childDescribedBy, id].filter(Boolean).join(\" \")}\n        onPointerEnter={(e: React.PointerEvent) => {\n          if (e.pointerType !== \"touch\") show(delayDuration)\n        }}\n        onPointerLeave={(e: React.PointerEvent) => {\n          if (e.pointerType !== \"touch\") hide(closeDelay)\n        }}\n        onPointerDown={() => hide(0)}\n        onFocus={(e: React.FocusEvent<HTMLElement>) => {\n          // Keyboard focus only: a tap or click also focuses, but is not :focus-visible.\n          if (e.currentTarget.matches(\":focus-visible\")) show(0)\n        }}\n        onBlur={() => hide(0)}\n      >\n        {child}\n      </Slot>\n      <div\n        ref={setPanel}\n        id={id}\n        role=\"tooltip\"\n        popover=\"manual\"\n        style={floatingStyles}\n        // Hoverable: entering the tooltip cancels the pending close, leaving starts it again.\n        onPointerEnter={() => clearTimeout(timer.current)}\n        onPointerLeave={() => hide(closeDelay)}\n        className={cn(\n          \"m-0 overflow-visible rounded-glob-sm border-0 bg-glob-text px-2 py-1 text-xs text-glob-surface shadow-glob-md\",\n          \"opacity-0 transition-[opacity,overlay,display] transition-discrete duration-100 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none\",\n          className\n        )}\n      >\n        {content}\n        {arrow && (\n          <div\n            ref={setArrowEl}\n            aria-hidden=\"true\"\n            className=\"absolute h-2 w-2 rotate-45 bg-glob-text\"\n            style={{\n              left: arrowData?.x != null ? `${arrowData.x}px` : undefined,\n              top: arrowData?.y != null ? `${arrowData.y}px` : undefined,\n              [oppositeSide[side]]: \"-4px\",\n            }}\n          />\n        )}\n      </div>\n    </>\n  )\n}\nTooltip.displayName = \"Tooltip\"\n\nexport { Tooltip }\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,115 @@
+"use client"
+
+// src/tooltip.tsx
+import { Children, isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { cn } from "@glob-ui/utils";
+import { Slot } from "@glob-ui/slot";
+import { useFloatingPanel } from "@glob-ui/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var oppositeSide = { top: "bottom", right: "left", bottom: "top", left: "right" };
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delayDuration = 500,
+  closeDelay = 150,
+  offset = 6,
+  arrow = false,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const [arrowEl, setArrowEl] = useState(null);
+  const timer = useRef(void 0);
+  const id = useId();
+  const { setTrigger, setPanel, floatingStyles, placement: finalPlacement, middlewareData } = useFloatingPanel({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    offset: offset + (arrow ? 4 : 0),
+    arrow: arrow ? arrowEl : null,
+    fitViewport: false,
+    restoreFocus: false
+  });
+  const show = useCallback((delay) => {
+    clearTimeout(timer.current);
+    if (delay <= 0) setOpen(true);
+    else timer.current = setTimeout(() => setOpen(true), delay);
+  }, []);
+  const hide = useCallback((delay) => {
+    clearTimeout(timer.current);
+    if (delay <= 0) setOpen(false);
+    else timer.current = setTimeout(() => setOpen(false), delay);
+  }, []);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") hide(0);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, hide]);
+  const child = Children.only(children);
+  const childDescribedBy = isValidElement(child) ? child.props["aria-describedby"] : void 0;
+  const side = finalPlacement.split("-")[0];
+  const arrowData = middlewareData.arrow;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref: setTrigger,
+        "aria-describedby": [childDescribedBy, id].filter(Boolean).join(" "),
+        onPointerEnter: (e) => {
+          if (e.pointerType !== "touch") show(delayDuration);
+        },
+        onPointerLeave: (e) => {
+          if (e.pointerType !== "touch") hide(closeDelay);
+        },
+        onPointerDown: () => hide(0),
+        onFocus: (e) => {
+          if (e.currentTarget.matches(":focus-visible")) show(0);
+        },
+        onBlur: () => hide(0),
+        children: child
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setPanel,
+        id,
+        role: "tooltip",
+        popover: "manual",
+        style: floatingStyles,
+        onPointerEnter: () => clearTimeout(timer.current),
+        onPointerLeave: () => hide(closeDelay),
+        className: cn(
+          "m-0 overflow-visible rounded-glob-sm border-0 bg-glob-text px-2 py-1 text-xs text-glob-surface shadow-glob-md",
+          "opacity-0 transition-[opacity,overlay,display] transition-discrete duration-100 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none",
+          className
+        ),
+        children: [
+          content,
+          arrow && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setArrowEl,
+              "aria-hidden": "true",
+              className: "absolute h-2 w-2 rotate-45 bg-glob-text",
+              style: {
+                left: (arrowData == null ? void 0 : arrowData.x) != null ? `${arrowData.x}px` : void 0,
+                top: (arrowData == null ? void 0 : arrowData.y) != null ? `${arrowData.y}px` : void 0,
+                [oppositeSide[side]]: "-4px"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport { Children, isValidElement, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Slot } from \"@glob-ui/slot\"\nimport { useFloatingPanel, type Placement } from \"@glob-ui/hooks\"\n\nconst oppositeSide = { top: \"bottom\", right: \"left\", bottom: \"top\", left: \"right\" } as const\n\nexport interface TooltipProps {\n  content: React.ReactNode\n  /** One element that can hold a ref and receive focus (usually a button). */\n  children: React.ReactElement\n  placement?: Placement\n  /** Hover delay before opening, in ms. Keyboard focus opens immediately. */\n  delayDuration?: number\n  /**\n   * Delay before closing after the pointer leaves, in ms. Moving onto the tooltip within this\n   * time keeps it open (WCAG 1.4.13, hoverable).\n   */\n  closeDelay?: number\n  /** Gap between trigger and tooltip, in px. */\n  offset?: number\n  arrow?: boolean\n  className?: string\n}\n\nfunction Tooltip({\n  content,\n  children,\n  placement = \"top\",\n  delayDuration = 500,\n  closeDelay = 150,\n  offset = 6,\n  arrow = false,\n  className,\n}: TooltipProps) {\n  const [open, setOpen] = useState(false)\n  const [arrowEl, setArrowEl] = useState<HTMLDivElement | null>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const id = useId()\n\n  // Destructured: the compiler would treat a whole object passed to `ref=` as a ref.\n  const { setTrigger, setPanel, floatingStyles, placement: finalPlacement, middlewareData } = useFloatingPanel({\n    open,\n    onOpenChange: setOpen,\n    placement,\n    offset: offset + (arrow ? 4 : 0),\n    arrow: arrow ? arrowEl : null,\n    fitViewport: false,\n    restoreFocus: false,\n  })\n\n  const show = useCallback((delay: number) => {\n    clearTimeout(timer.current)\n    if (delay <= 0) setOpen(true)\n    else timer.current = setTimeout(() => setOpen(true), delay)\n  }, [])\n  const hide = useCallback((delay: number) => {\n    clearTimeout(timer.current)\n    if (delay <= 0) setOpen(false)\n    else timer.current = setTimeout(() => setOpen(false), delay)\n  }, [])\n\n  useEffect(() => () => clearTimeout(timer.current), [])\n\n  // popover=\"manual\" has no Esc handling of its own.\n  useEffect(() => {\n    if (!open) return\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") hide(0)\n    }\n    document.addEventListener(\"keydown\", onKeyDown)\n    return () => document.removeEventListener(\"keydown\", onKeyDown)\n  }, [open, hide])\n\n  const child = Children.only(children)\n  const childDescribedBy = isValidElement<{ \"aria-describedby\"?: string }>(child)\n    ? child.props[\"aria-describedby\"]\n    : undefined\n  const side = finalPlacement.split(\"-\")[0] as keyof typeof oppositeSide\n  const arrowData = middlewareData.arrow\n\n  return (\n    <>\n      <Slot\n        ref={setTrigger}\n        aria-describedby={[childDescribedBy, id].filter(Boolean).join(\" \")}\n        onPointerEnter={(e: React.PointerEvent) => {\n          if (e.pointerType !== \"touch\") show(delayDuration)\n        }}\n        onPointerLeave={(e: React.PointerEvent) => {\n          if (e.pointerType !== \"touch\") hide(closeDelay)\n        }}\n        onPointerDown={() => hide(0)}\n        onFocus={(e: React.FocusEvent<HTMLElement>) => {\n          // Keyboard focus only: a tap or click also focuses, but is not :focus-visible.\n          if (e.currentTarget.matches(\":focus-visible\")) show(0)\n        }}\n        onBlur={() => hide(0)}\n      >\n        {child}\n      </Slot>\n      <div\n        ref={setPanel}\n        id={id}\n        role=\"tooltip\"\n        popover=\"manual\"\n        style={floatingStyles}\n        // Hoverable: entering the tooltip cancels the pending close, leaving starts it again.\n        onPointerEnter={() => clearTimeout(timer.current)}\n        onPointerLeave={() => hide(closeDelay)}\n        className={cn(\n          \"m-0 overflow-visible rounded-glob-sm border-0 bg-glob-text px-2 py-1 text-xs text-glob-surface shadow-glob-md\",\n          \"opacity-0 transition-[opacity,overlay,display] transition-discrete duration-100 open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none\",\n          className\n        )}\n      >\n        {content}\n        {arrow && (\n          <div\n            ref={setArrowEl}\n            aria-hidden=\"true\"\n            className=\"absolute h-2 w-2 rotate-45 bg-glob-text\"\n            style={{\n              left: arrowData?.x != null ? `${arrowData.x}px` : undefined,\n              top: arrowData?.y != null ? `${arrowData.y}px` : undefined,\n              [oppositeSide[side]]: \"-4px\",\n            }}\n          />\n        )}\n      </div>\n    </>\n  )\n}\nTooltip.displayName = \"Tooltip\"\n\nexport { Tooltip }\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@glob-ui/tooltip",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/hooks": "0.1.0",
+    "@glob-ui/slot": "0.1.0",
+    "@glob-ui/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A short description that appears on hover or keyboard focus. It stays open while the pointer is over it.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "tooltip"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/tooltip"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }