@hanzogui/tooltip 2.0.0-rc.41-hanzoai.3

package/dist/jsx/TooltipSimple.mjs

@@ -0,0 +1,76 @@
+import { getSpace } from "@hanzogui/get-token";
+import { Paragraph } from "@hanzogui/text";
+import * as React from "react";
+import { Tooltip } from "./Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TooltipSimple = React.forwardRef(({
+  label,
+  children,
+  contentProps,
+  disabled,
+  ...tooltipProps
+}, ref) => {
+  "use no memo";
+
+  const child = React.Children.only(children);
+  if (!label) {
+    return children;
+  }
+  return /* @__PURE__ */jsxs(Tooltip, {
+    disableRTL: true,
+    offset: 15,
+    restMs: 40,
+    delay: 40,
+    zIndex: 1e6,
+    ...tooltipProps,
+    ...(disabled ? {
+      open: false
+    } : null),
+    children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
+      ...(typeof label === "string" && {
+        "aria-label": label
+      }),
+      asChild: "except-style",
+      children: ref && React.isValidElement(child) ? React.cloneElement(child, {
+        ref
+      }) : child
+    }), /* @__PURE__ */jsxs(Tooltip.Content, {
+      enterStyle: {
+        y: -4,
+        opacity: 0,
+        scale: 0.96
+      },
+      exitStyle: {
+        y: -4,
+        opacity: 0,
+        scale: 0.96
+      },
+      scale: 1,
+      elevation: "$0.5",
+      opacity: 1,
+      pointerEvents: "none",
+      paddingVertical: getSpace(tooltipProps.size || "$true", {
+        shift: -4
+      }),
+      animateOnly: ["transform", "opacity"],
+      transition: ["quicker", {
+        opacity: {
+          overshootClamping: true
+        }
+      }],
+      ...contentProps,
+      children: [/* @__PURE__ */jsx(Tooltip.Arrow, {}), /* @__PURE__ */jsx(Paragraph, {
+        maxWidth: 350,
+        overflow: "hidden",
+        size: "$3",
+        textAlign: "center",
+        "$platform-web": {
+          textWrap: "balance"
+        },
+        children: label
+      })]
+    })]
+  });
+});
+export { TooltipSimple };
+//# sourceMappingURL=TooltipSimple.mjs.map

package/dist/jsx/TooltipSimple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["getSpace","Paragraph","React","Tooltip","jsx","jsxs","TooltipSimple","forwardRef","label","children","contentProps","disabled","tooltipProps","ref","child","Children","only","disableRTL","offset","restMs","delay","zIndex","open","Trigger","asChild","isValidElement","cloneElement","Content","enterStyle","y","opacity","scale","exitStyle","elevation","pointerEvents","paddingVertical","size","shift","animateOnly","transition","overshootClamping","Arrow","maxWidth","overflow","textAlign","textWrap"],"sources":["../../src/TooltipSimple.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AAEzB,SAASC,SAAA,QAAiB;AAC1B,YAAYC,KAAA,MAAW;AAGvB,SAASC,OAAA,QAAe;AA8BhB,SAAAC,GAAA,EAWAC,IAAA,QAXA;AArBD,MAAMC,aAAA,GAA8CJ,KAAA,CAAMK,UAAA,CAC/D,CAAC;EAAEC,KAAA;EAAOC,QAAA;EAAUC,YAAA;EAAcC,QAAA;EAAU,GAAGC;AAAa,GAAGC,GAAA,KAAQ;EACrE;;EAEA,MAAMC,KAAA,GAAQZ,KAAA,CAAMa,QAAA,CAASC,IAAA,CAAKP,QAAQ;EAE1C,IAAI,CAACD,KAAA,EAAO;IACV,OAAOC,QAAA;EACT;EAEA,OACE,eAAAJ,IAAA,CAACF,OAAA;IACCc,UAAA,EAAU;IACVC,MAAA,EAAQ;IACRC,MAAA,EAAQ;IACRC,KAAA,EAAO;IAEPC,MAAA,EAAQ;IACP,GAAGT,YAAA;IACH,IAAID,QAAA,GAAW;MAAEW,IAAA,EAAM;IAAM,IAAI;IAElCb,QAAA,kBAAAL,GAAA,CAACD,OAAA,CAAQoB,OAAA,EAAR;MACE,IAAI,OAAOf,KAAA,KAAU,YAAY;QAChC,cAAcA;MAChB;MACAgB,OAAA,EAAQ;MAEPf,QAAA,EAAAI,GAAA,IAAOX,KAAA,CAAMuB,cAAA,CAAeX,KAAK,IAC9BZ,KAAA,CAAMwB,YAAA,CAAaZ,KAAA,EAAO;QAAED;MAAI,CAAQ,IACxCC;IAAA,CACN,GAEA,eAAAT,IAAA,CAACF,OAAA,CAAQwB,OAAA,EAAR;MACCC,UAAA,EAAY;QAAEC,CAAA,EAAG;QAAIC,OAAA,EAAS;QAAGC,KAAA,EAAO;MAAK;MAC7CC,SAAA,EAAW;QAAEH,CAAA,EAAG;QAAIC,OAAA,EAAS;QAAGC,KAAA,EAAO;MAAK;MAC5CA,KAAA,EAAO;MACPE,SAAA,EAAU;MACVH,OAAA,EAAS;MACTI,aAAA,EAAc;MACdC,eAAA,EAAiBnC,QAAA,CAASY,YAAA,CAAawB,IAAA,IAAQ,SAAS;QACtDC,KAAA,EAAO;MACT,CAAC;MACDC,WAAA,EAAa,CAAC,aAAa,SAAS;MACpCC,UAAA,EAAY,CACV,WACA;QACET,OAAA,EAAS;UACPU,iBAAA,EAAmB;QACrB;MACF,EACF;MACC,GAAG9B,YAAA;MAEJD,QAAA,kBAAAL,GAAA,CAACD,OAAA,CAAQsC,KAAA,EAAR,EAAc,GACf,eAAArC,GAAA,CAACH,SAAA;QACCyC,QAAA,EAAU;QACVC,QAAA,EAAS;QACTP,IAAA,EAAK;QACLQ,SAAA,EAAU;QACV,iBAAe;UACbC,QAAA,EAAU;QACZ;QAECpC,QAAA,EAAAD;MAAA,CACH;IAAA,CACF;EAAA,CACF;AAEJ,CACF","ignoreList":[]}

package/dist/jsx/TooltipSimple.native.js

@@ -0,0 +1,34 @@
+"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);
+var TooltipSimple_native_exports = {};
+__export(TooltipSimple_native_exports, {
+  TooltipSimple: () => TooltipSimple
+});
+module.exports = __toCommonJS(TooltipSimple_native_exports);
+var RenderChildren = function (props) {
+  return props.children;
+};
+var TooltipSimple = RenderChildren;
+//# sourceMappingURL=TooltipSimple.native.js.map

package/dist/jsx/TooltipSimple.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TooltipSimple_native_exports","__export","TooltipSimple","module","exports","__toCommonJS","RenderChildren","props","children"],"sources":["../../src/TooltipSimple.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,4BAAA;AAAA,IAAIM,cAAA,GAAiB,SAAAA,CAASC,KAAA,EAAO;EACjC,OAAOA,KAAA,CAAMC,QAAA;AACjB;AACO,IAAIN,aAAA,GAAgBI,cAAA","ignoreList":[]}

package/dist/jsx/index.js

@@ -0,0 +1,3 @@
+export * from "./Tooltip.mjs";
+export * from "./TooltipSimple.mjs";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}

package/dist/jsx/index.mjs

@@ -0,0 +1,3 @@
+export * from "./Tooltip.mjs";
+export * from "./TooltipSimple.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc","ignoreList":[]}

package/dist/jsx/index.native.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Tooltip.native.js"), module.exports);
+__reExport(index_exports, require("./TooltipSimple.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAA,GAAcC,MAAA,CAAAC,cAAA","ignoreList":[]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@hanzogui/tooltip",
+  "version": "2.0.0-rc.41-hanzoai.3",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/compose-refs": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/core": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/create-context": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/floating": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/get-token": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/helpers": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/polyfill-dev": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/popover": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/popper": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/stacks": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/text": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/use-controllable-state": "2.0.0-rc.41-hanzoai.3"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.41-hanzoai.3",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/Tooltip.native.tsx

@@ -0,0 +1,26 @@
+import { withStaticProperties } from '@hanzogui/helpers'
+
+// no output on native for now
+// could have an option to long-press or similar to show in a context menu/drawer
+
+const RenderChildren = (props: any) => {
+  return props.children
+}
+
+const RenderNull = (props: any) => {
+  return null
+}
+
+export const TooltipGroup = () => null
+
+export const closeOpenTooltips = () => {
+  /* noop */
+}
+
+export const Tooltip = withStaticProperties(RenderChildren, {
+  Anchor: RenderChildren,
+  Arrow: RenderNull,
+  Close: RenderNull,
+  Content: RenderNull,
+  Trigger: RenderChildren,
+})

package/src/Tooltip.tsx

@@ -0,0 +1,291 @@
+import '@hanzogui/polyfill-dev'
+
+import { FloatingDelayGroup, useDelayGroupContext, type Delay } from '@hanzogui/floating'
+import type { SizeTokens, HanzoguiElement } from '@hanzogui/core'
+import { useEvent } from '@hanzogui/core'
+import { FloatingOverrideContext } from '@hanzogui/floating'
+import { getSize } from '@hanzogui/get-token'
+import { withStaticProperties } from '@hanzogui/helpers'
+import type {
+  PopoverAnchorProps,
+  PopoverContentProps,
+  PopoverTriggerProps,
+} from '@hanzogui/popover'
+import {
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverContent,
+  PopoverContextProvider,
+  PopoverTrigger,
+  useFloatingContext,
+} from '@hanzogui/popover'
+import type { PopperArrowProps, PopperProps } from '@hanzogui/popper'
+import { Popper, PopperContentFrame } from '@hanzogui/popper'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import * as React from 'react'
+
+const TOOLTIP_SCOPE = ''
+
+export type TooltipScopes = string
+
+type ScopedProps<P> = Omit<P, 'scope'> & { scope?: TooltipScopes }
+
+export type TooltipContentProps = ScopedProps<PopoverContentProps>
+
+// warning: setting to stylebale causes issues with themeInverse across portal root
+
+// performance: avoid 2 components we never use
+const ALWAYS_DISABLE_TOOLTIP = {
+  focus: true,
+  'remove-scroll': true,
+  // it's nice to hit escape to hide a tooltip
+  // dismiss: true
+} as const
+
+const TooltipContent = PopperContentFrame.styleable<TooltipContentProps>(
+  (props, ref) => {
+    const preventAnimation = React.useContext(PreventTooltipAnimationContext)
+    const zIndexFromContext = React.useContext(TooltipZIndexContext)
+
+    return (
+      <PopoverContent
+        scope={props.scope || TOOLTIP_SCOPE}
+        alwaysDisable={ALWAYS_DISABLE_TOOLTIP}
+        {...(!props.unstyled && {
+          backgroundColor: '$background',
+          alignItems: 'center',
+          pointerEvents: 'none',
+          size: '$true',
+        })}
+        ref={ref}
+        // zIndex from root Tooltip prop flows to portal
+        {...(zIndexFromContext !== undefined && { zIndex: zIndexFromContext })}
+        {...props}
+        {...(preventAnimation && {
+          transition: null,
+        })}
+      />
+    )
+  },
+  {
+    staticConfig: {
+      componentName: 'Tooltip',
+    },
+  }
+)
+
+const TooltipArrow = React.forwardRef<HanzoguiElement, PopperArrowProps>((props, ref) => {
+  return (
+    <PopoverArrow
+      scope={props.scope || TOOLTIP_SCOPE}
+      componentName="Tooltip"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export type TooltipProps = ScopedProps<
+  PopperProps & {
+    open?: boolean
+    unstyled?: boolean
+    children?: React.ReactNode
+    onOpenChange?: (open: boolean) => void
+    focus?: {
+      enabled?: boolean
+      visibleOnly?: boolean
+    }
+    groupId?: string
+    restMs?: number
+    delay?:
+      | number
+      | {
+          open?: number
+          close?: number
+        }
+    disableAutoCloseOnScroll?: boolean
+    /**
+     * z-index for the tooltip portal. Use this when tooltips need to appear
+     * above other portaled content like dialogs.
+     */
+    zIndex?: number
+  }
+>
+
+const PreventTooltipAnimationContext = React.createContext(false)
+const TooltipZIndexContext = React.createContext<number | undefined>(undefined)
+
+export const TooltipGroup = ({
+  children,
+  delay,
+  preventAnimation = false,
+  timeoutMs,
+}: {
+  children?: any
+  delay: Delay
+  preventAnimation?: boolean
+  timeoutMs?: number
+}) => {
+  return (
+    <PreventTooltipAnimationContext.Provider value={preventAnimation}>
+      <FloatingDelayGroup
+        timeoutMs={timeoutMs}
+        delay={React.useMemo(() => delay, [JSON.stringify(delay)])}
+      >
+        {children}
+      </FloatingDelayGroup>
+    </PreventTooltipAnimationContext.Provider>
+  )
+}
+
+const setOpens = new Set<React.Dispatch<React.SetStateAction<boolean>>>()
+
+export const closeOpenTooltips = () => {
+  setOpens.forEach((x) => x(false))
+}
+
+const TooltipComponent = React.forwardRef(function Tooltip(
+  props: TooltipProps,
+  // no real ref here but React complaining need to see why see SandboxCustomStyledAnimatedTooltip.ts
+  ref
+) {
+  // hooks inside useFloatingFn confuse the React Compiler
+  'use no memo'
+
+  const {
+    children,
+    delay: delayProp,
+    restMs: restMsProp,
+    onOpenChange: onOpenChangeProp,
+    focus,
+    open: openProp,
+    disableAutoCloseOnScroll,
+    zIndex,
+    scope = TOOLTIP_SCOPE,
+    ...restProps
+  } = props
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
+  const { delay: delayGroup, setCurrentId } = useDelayGroupContext()
+  // Use delayProp if explicitly provided, otherwise fall back to group delay or default 400
+  const delay = delayProp !== undefined ? delayProp : (delayGroup ?? 400)
+  const restMs = restMsProp ?? (typeof delay === 'number' ? delay : 0)
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: false,
+    onChange: onOpenChangeProp,
+  })
+  const id = props.groupId
+
+  const onOpenChange = useEvent((open: boolean) => {
+    if (open) {
+      setCurrentId(id)
+    }
+    setOpen(open)
+  })
+
+  // Auto close when document scroll
+  React.useEffect(() => {
+    if (!open) return
+    if (disableAutoCloseOnScroll) return
+    if (typeof document === 'undefined') return
+    const closeIt = () => {
+      setOpen(false)
+    }
+    setOpens.add(setOpen)
+    document.documentElement.addEventListener('scroll', closeIt)
+    return () => {
+      setOpens.delete(setOpen)
+      document.documentElement.removeEventListener('scroll', closeIt)
+    }
+  }, [open, disableAutoCloseOnScroll])
+
+  // use the shared floating context from popover — gives us multi-trigger
+  // hover coordination (onHoverReference/onLeaveReference + grace period)
+  // and safePolygon for free
+  const floatingContext = useFloatingContext({
+    open,
+    setOpen: onOpenChange,
+    disable: false,
+    disableFocus: false,
+    hoverable: true,
+    role: 'tooltip',
+    focus,
+    groupId: id,
+    delay,
+    restMs,
+  })
+
+  const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), [])
+  const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), [])
+  const contentId = React.useId()
+  const smallerSize = props.unstyled
+    ? null
+    : getSize('$true', {
+        shift: -2,
+        bounds: [0],
+      })
+
+  const content = (
+    <FloatingOverrideContext.Provider value={floatingContext}>
+      {/* default tooltip to a smaller size */}
+      <Popper
+        scope={scope}
+        size={smallerSize?.key as SizeTokens}
+        allowFlip
+        stayInFrame
+        open={open}
+        {...restProps}
+      >
+        <PopoverContextProvider
+          scope={scope}
+          contentId={contentId}
+          triggerRef={triggerRef}
+          open={open}
+          onOpenChange={setOpen}
+          onOpenToggle={voidFn}
+          hasCustomAnchor={hasCustomAnchor}
+          onCustomAnchorAdd={onCustomAnchorAdd}
+          onCustomAnchorRemove={onCustomAnchorRemove}
+        >
+          {children}
+        </PopoverContextProvider>
+      </Popper>
+    </FloatingOverrideContext.Provider>
+  )
+
+  if (zIndex !== undefined) {
+    return (
+      <TooltipZIndexContext.Provider value={zIndex}>
+        {content}
+      </TooltipZIndexContext.Provider>
+    )
+  }
+
+  return content
+})
+
+const TooltipTrigger = React.forwardRef(function TooltipTrigger(
+  props: ScopedProps<PopoverTriggerProps>,
+  ref: any
+) {
+  const { scope, ...rest } = props
+  return <PopoverTrigger {...rest} scope={scope || TOOLTIP_SCOPE} ref={ref} />
+})
+
+const TooltipAnchor = React.forwardRef(function TooltipAnchor(
+  props: ScopedProps<PopoverAnchorProps>,
+  ref: any
+) {
+  const { scope, ...rest } = props
+  return <PopoverAnchor {...rest} scope={scope || TOOLTIP_SCOPE} ref={ref} />
+})
+
+export const Tooltip = withStaticProperties(TooltipComponent, {
+  Anchor: TooltipAnchor,
+  Arrow: TooltipArrow,
+  Content: TooltipContent,
+  Trigger: TooltipTrigger,
+})
+
+const voidFn = () => {}

package/src/TooltipSimple.native.tsx

@@ -0,0 +1,5 @@
+const RenderChildren = (props: any) => {
+  return props.children
+}
+
+export const TooltipSimple = RenderChildren

package/src/TooltipSimple.tsx

@@ -0,0 +1,85 @@
+import { getSpace } from '@hanzogui/get-token'
+import type { SizableStackProps } from '@hanzogui/stacks'
+import { Paragraph } from '@hanzogui/text'
+import * as React from 'react'
+
+import type { TooltipProps } from './Tooltip'
+import { Tooltip } from './Tooltip'
+
+export type TooltipSimpleProps = TooltipProps & {
+  disabled?: boolean
+  label?: React.ReactNode
+  children?: React.ReactNode
+  contentProps?: SizableStackProps
+}
+
+export const TooltipSimple: React.FC<TooltipSimpleProps> = React.forwardRef(
+  ({ label, children, contentProps, disabled, ...tooltipProps }, ref) => {
+    'use no memo'
+
+    const child = React.Children.only(children)
+
+    if (!label) {
+      return children
+    }
+
+    return (
+      <Tooltip
+        disableRTL
+        offset={15}
+        restMs={40}
+        delay={40}
+        // ensure tooltips appear above dialogs and other portaled content
+        zIndex={1_000_000}
+        {...tooltipProps}
+        {...(disabled ? { open: false } : null)}
+      >
+        <Tooltip.Trigger
+          {...(typeof label === 'string' && {
+            'aria-label': label,
+          })}
+          asChild="except-style"
+        >
+          {ref && React.isValidElement(child)
+            ? React.cloneElement(child, { ref } as any)
+            : child}
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          enterStyle={{ y: -4, opacity: 0, scale: 0.96 }}
+          exitStyle={{ y: -4, opacity: 0, scale: 0.96 }}
+          scale={1}
+          elevation="$0.5"
+          opacity={1}
+          pointerEvents="none"
+          paddingVertical={getSpace(tooltipProps.size || '$true', {
+            shift: -4,
+          })}
+          animateOnly={['transform', 'opacity']}
+          transition={[
+            'quicker',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          {...contentProps}
+        >
+          <Tooltip.Arrow />
+          <Paragraph
+            maxWidth={350}
+            overflow="hidden"
+            size="$3"
+            textAlign="center"
+            $platform-web={{
+              textWrap: 'balance',
+            }}
+          >
+            {label}
+          </Paragraph>
+        </Tooltip.Content>
+      </Tooltip>
+    )
+  }
+)

package/src/index.tsx

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