@telegraph/tooltip 0.0.19 → 0.0.21

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @telegraph/tooltip
 
+## 0.0.21
+
+### Patch Changes
+
+- [#214](https://github.com/knocklabs/telegraph/pull/214) [`e51c8ec`](https://github.com/knocklabs/telegraph/commit/e51c8ec8fc4c7de82f2f1829ada1225c23116088) Thanks [@kylemcd](https://github.com/kylemcd)! - add tooltip group hover functionality
+
+- Updated dependencies []:
+  - @telegraph/layout@0.0.27
+  - @telegraph/typography@0.0.27
+
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [[`048788f`](https://github.com/knocklabs/telegraph/commit/048788fd8bacb03307af9ef86b5289429d19363d)]:
+  - @telegraph/appearance@0.0.3
+  - @telegraph/typography@0.0.26
+
 ## 0.0.19
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("@radix-ui/react-tooltip"),M=require("@telegraph/appearance"),_=require("@telegraph/helpers"),q=require("@telegraph/layout"),R=require("@telegraph/typography"),E=require("framer-motion");function z(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const i=z(v),P=({delayDuration:t=0,skipDelayDuration:n,disableHoverableContent:r,defaultOpen:o,open:p,onOpenChange:d,"aria-label":f,onEscapeKeyDown:g,onPointerDownOutside:x,forceMount:y,side:c="bottom",sideOffset:T=4,align:O="center",alignOffset:j,avoidCollisions:m,collisionBoundary:h,collisionPadding:I,arrowPadding:A,sticky:N,hideWhenDetached:b,label:s,labelProps:l,enabled:S=!0,children:u})=>{const F=a=>{if(a==="top")return{y:-5};if(a==="bottom")return{y:5};if(a==="left")return{x:-5};if(a==="right")return{x:5}};return S?e.jsx(i.Provider,{delayDuration:t,skipDelayDuration:n,disableHoverableContent:r,children:e.jsxs(i.Root,{defaultOpen:o,open:p,onOpenChange:d,children:[e.jsx(i.Trigger,{asChild:!0,children:e.jsx(_.RefToTgphRef,{children:u})}),e.jsx(i.Portal,{children:e.jsx(i.Content,{"aria-label":f,onEscapeKeyDown:g,onPointerDownOutside:x,forceMount:y,side:c,sideOffset:T,align:O,alignOffset:j,avoidCollisions:m,collisionBoundary:h,collisionPadding:I,arrowPadding:A,sticky:N,hideWhenDetached:b,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:e.jsx(M.InvertedAppearance,{children:e.jsx(q.Stack,{as:E.motion.div,className:"tgph",initial:{opacity:.5,scale:.6,...F(c)},animate:{opacity:1,scale:1,x:0,y:0},transition:{duration:.2,type:"spring",bounce:0},bg:"gray-1",rounded:"3",py:"2",px:"3",align:"center",justify:"center",style:{transformOrigin:"var(--radix-tooltip-content-transform-origin)"},...l?{labelProps:l}:{},children:typeof s=="string"?e.jsx(R.Text,{as:"span",size:"1",children:s}):s})})})})]})}):e.jsx("span",{children:u})};exports.Tooltip=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("@radix-ui/react-tooltip"),E=require("@radix-ui/react-use-controllable-state"),z=require("@telegraph/appearance"),D=require("@telegraph/helpers"),k=require("@telegraph/layout"),w=require("@telegraph/typography"),B=require("framer-motion"),a=require("react");function U(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const i=U(R),O=a.createContext({groupOpen:!1,setGroupOpen:()=>{}}),H=({open:t,delay:o=600})=>{const e=a.useContext(O);return a.useEffect(()=>{let n=null;return e.setGroupOpen&&(t===!0&&e.setGroupOpen(!0),t===!1&&(n=setTimeout(()=>{e.setGroupOpen&&e.setGroupOpen(!1)},o))),()=>{n&&clearTimeout(n)}},[t,e,o]),{groupOpen:e.groupOpen}},J=({children:t})=>{const[o,e]=a.useState(!1);return r.jsx(O.Provider,{value:{groupOpen:o,setGroupOpen:e},children:t})},K=({delayDuration:t=600,skipDelayDuration:o,disableHoverableContent:e,defaultOpen:n,open:g,onOpenChange:x,"aria-label":T,onEscapeKeyDown:y,onPointerDownOutside:m,forceMount:h,side:u="bottom",sideOffset:j=4,align:S="center",alignOffset:b,avoidCollisions:v,collisionBoundary:A,collisionPadding:I,arrowPadding:N,sticky:C,hideWhenDetached:F,label:p,labelProps:c,enabled:q=!0,children:l})=>{const[f,G]=E.useControllableState({prop:g,onChange:x,defaultProp:n}),{groupOpen:d}=H({open:!!f,delay:t}),M=d?0:t,P=!d,_=s=>{if(s==="top")return{y:-5};if(s==="bottom")return{y:5};if(s==="left")return{x:-5};if(s==="right")return{x:5}};return q?r.jsx(i.Provider,{delayDuration:M,skipDelayDuration:o,disableHoverableContent:e,children:r.jsxs(i.Root,{open:f,onOpenChange:G,children:[r.jsx(i.Trigger,{asChild:!0,children:r.jsx(D.RefToTgphRef,{children:l})}),r.jsx(i.Portal,{children:r.jsx(i.Content,{"aria-label":T,onEscapeKeyDown:y,onPointerDownOutside:m,forceMount:h,side:u,sideOffset:j,align:S,alignOffset:b,avoidCollisions:v,collisionBoundary:A,collisionPadding:I,arrowPadding:N,sticky:C,hideWhenDetached:F,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:r.jsx(z.InvertedAppearance,{children:r.jsx(k.Stack,{as:B.motion.div,className:"tgph",initial:P?{opacity:.5,scale:.6,..._(u)}:{},animate:{opacity:1,scale:1,x:0,y:0},transition:{duration:.2,type:"spring",bounce:0},bg:"gray-1",rounded:"3",py:"2",px:"3",align:"center",justify:"center",style:{transformOrigin:"var(--radix-tooltip-content-transform-origin)"},...c?{labelProps:c}:{},children:typeof p=="string"?r.jsx(w.Text,{as:"span",size:"1",children:p}):p})})})})]})}):r.jsx("span",{children:l})};exports.Tooltip=K;exports.TooltipGroupProvider=J;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n  label: string | React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Stack<T>>;\n  enabled?: boolean;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n  typeof RadixTooltip.Root\n> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n  TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n  // Radix Tooltip Provider Props\n  delayDuration = 0,\n  skipDelayDuration,\n  disableHoverableContent,\n  // Radix Tooltip Root Props\n  defaultOpen,\n  open,\n  onOpenChange,\n  // Radix Tooltip Content Props\n  \"aria-label\": ariaLabel,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  forceMount,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  // Label Props\n  label,\n  labelProps,\n  // Telegraph Props\n  enabled = true,\n  children,\n}: TooltipProps<T>) => {\n  const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n    const ANIMATION_OFFSET = 5;\n    if (side === \"top\") {\n      return {\n        y: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"bottom\") {\n      return {\n        y: ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"left\") {\n      return {\n        x: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"right\") {\n      return {\n        x: ANIMATION_OFFSET,\n      };\n    }\n  };\n\n  if (enabled) {\n    return (\n      <RadixTooltip.Provider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <RadixTooltip.Root\n          defaultOpen={defaultOpen}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          <RadixTooltip.Trigger asChild={true}>\n            <RefToTgphRef>{children}</RefToTgphRef>\n          </RadixTooltip.Trigger>\n          <RadixTooltip.Portal>\n            <RadixTooltip.Content\n              aria-label={ariaLabel}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              forceMount={forceMount}\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n              avoidCollisions={avoidCollisions}\n              collisionBoundary={collisionBoundary}\n              collisionPadding={collisionPadding}\n              arrowPadding={arrowPadding}\n              sticky={sticky}\n              hideWhenDetached={hideWhenDetached}\n              style={{\n                zIndex: `var(--tgph-zIndex-tooltip)`,\n              }}\n            >\n              <InvertedAppearance>\n                <Stack\n                  as={motion.div}\n                  // Add tgph class so that this always works in portals\n                  className=\"tgph\"\n                  initial={{\n                    opacity: 0.5,\n                    scale: 0.6,\n                    ...deriveAnimationBasedOnSide(side),\n                  }}\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n                  bg=\"gray-1\"\n                  rounded=\"3\"\n                  py=\"2\"\n                  px=\"3\"\n                  align=\"center\"\n                  justify=\"center\"\n                  style={{\n                    transformOrigin:\n                      \"var(--radix-tooltip-content-transform-origin)\",\n                  }}\n                  {...(labelProps ? { labelProps } : {})}\n                >\n                  {typeof label === \"string\" ? (\n                    <Text as=\"span\" size=\"1\">\n                      {label}\n                    </Text>\n                  ) : (\n                    label\n                  )}\n                </Stack>\n              </InvertedAppearance>\n            </RadixTooltip.Content>\n          </RadixTooltip.Portal>\n        </RadixTooltip.Root>\n      </RadixTooltip.Provider>\n    );\n  }\n\n  return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpen","open","onOpenChange","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"olBAyBMA,EAAU,CAAwB,CAEtC,cAAAC,EAAgB,EAChB,kBAAAC,EACA,wBAAAC,EAEA,YAAAC,EACA,KAAAC,EACA,aAAAC,EAEA,aAAcC,EACd,gBAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,KAAAC,EAAO,SACP,WAAAC,EAAa,EACb,MAAAC,EAAQ,SACR,YAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EAEA,MAAAC,EACA,WAAAC,EAEA,QAAAC,EAAU,GACV,SAAAC,CACF,IAAuB,CACf,MAAAC,EAA8Bd,GAAkC,CAEpE,GAAIA,IAAS,MACJ,MAAA,CACL,EAAG,EAAC,EAIR,GAAIA,IAAS,SACJ,MAAA,CACL,EAAG,CAAA,EAIP,GAAIA,IAAS,OACJ,MAAA,CACL,EAAG,EAAC,EAIR,GAAIA,IAAS,QACJ,MAAA,CACL,EAAG,CAAA,CAEP,EAGF,OAAIY,EAEAG,EAAA,IAACC,EAAa,SAAb,CACC,cAAA1B,EACA,kBAAAC,EACA,wBAAAC,EAEA,SAAAyB,EAAA,KAACD,EAAa,KAAb,CACC,YAAAvB,EACA,KAAAC,EACA,aAAAC,EAEA,SAAA,CAACoB,EAAAA,IAAAC,EAAa,QAAb,CAAqB,QAAS,GAC7B,SAACD,EAAAA,IAAAG,EAAA,aAAA,CAAc,SAAAL,EAAS,CAC1B,CAAA,EACAE,EAAAA,IAACC,EAAa,OAAb,CACC,SAAAD,EAAA,IAACC,EAAa,QAAb,CACC,aAAYpB,EACZ,gBAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,MAAO,CACL,OAAQ,4BACV,EAEA,eAACU,qBACC,CAAA,SAAAJ,EAAA,IAACK,EAAA,MAAA,CACC,GAAIC,EAAO,OAAA,IAEX,UAAU,OACV,QAAS,CACP,QAAS,GACT,MAAO,GACP,GAAGP,EAA2Bd,CAAI,CACpC,EACA,QAAS,CACP,QAAS,EACT,MAAO,EACP,EAAG,EACH,EAAG,CACL,EACA,WAAY,CAAE,SAAU,GAAK,KAAM,SAAU,OAAQ,CAAE,EACvD,GAAG,SACH,QAAQ,IACR,GAAG,IACH,GAAG,IACH,MAAM,SACN,QAAQ,SACR,MAAO,CACL,gBACE,+CACJ,EACC,GAAIW,EAAa,CAAE,WAAAA,CAAA,EAAe,CAAC,EAEnC,SAAA,OAAOD,GAAU,SACfK,EAAA,IAAAO,EAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAClB,SAAAZ,CAAA,CACH,EAEAA,CAAA,CAAA,EAGN,CAAA,CAAA,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,EAKCK,MAAC,QAAM,SAAAF,CAAS,CAAA,CACzB"}
+{"version":3,"file":"index.js","sources":["../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from \"react\";\n\ntype TooltipGroupContextState = {\n  groupOpen: boolean;\n  setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n  groupOpen: false,\n  setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n  open: boolean;\n  delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n  const context = React.useContext(TooltipContext);\n\n  // If the open prop is set to true, we set the groupOpen state to true\n  // If the open prop is set to false, we set the groupOpen state to false after a delay\n  // to ensure that another tooltip is not opened while this one is closed.\n  React.useEffect(() => {\n    let timer: NodeJS.Timeout | null = null;\n    if (context.setGroupOpen) {\n      if (open === true) {\n        context.setGroupOpen(true);\n      }\n\n      if (open === false) {\n        timer = setTimeout(() => {\n          if (context.setGroupOpen) {\n            context.setGroupOpen(false);\n          }\n        }, delay);\n      }\n    }\n\n    return () => {\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [open, context, delay]);\n\n  return {\n    groupOpen: context.groupOpen,\n  };\n};\n\ntype TooltipGroupProviderProps = {\n  children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n  const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n  return (\n    <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n      {children}\n    </TooltipContext.Provider>\n  );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n  label: string | React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Stack<T>>;\n  enabled?: boolean;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n  typeof RadixTooltip.Root\n> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n  TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n  // Radix Tooltip Provider Props\n  delayDuration = 600,\n  skipDelayDuration,\n  disableHoverableContent,\n  // Radix Tooltip Root Props\n  defaultOpen: defaultOpenProp,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  // Radix Tooltip Content Props\n  \"aria-label\": ariaLabel,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  forceMount,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  // Label Props\n  label,\n  labelProps,\n  // Telegraph Props\n  enabled = true,\n  children,\n}: TooltipProps<T>) => {\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    onChange: onOpenChangeProp,\n    defaultProp: defaultOpenProp,\n  });\n  const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n  const derivedDelayDuration = groupOpen ? 0 : delayDuration;\n  const shouldAnimate = !groupOpen;\n\n  const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n    const ANIMATION_OFFSET = 5;\n    if (side === \"top\") {\n      return {\n        y: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"bottom\") {\n      return {\n        y: ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"left\") {\n      return {\n        x: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"right\") {\n      return {\n        x: ANIMATION_OFFSET,\n      };\n    }\n  };\n\n  if (enabled) {\n    return (\n      <RadixTooltip.Provider\n        delayDuration={derivedDelayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <RadixTooltip.Root open={open} onOpenChange={setOpen}>\n          <RadixTooltip.Trigger asChild={true}>\n            <RefToTgphRef>{children}</RefToTgphRef>\n          </RadixTooltip.Trigger>\n          <RadixTooltip.Portal>\n            <RadixTooltip.Content\n              aria-label={ariaLabel}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              forceMount={forceMount}\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n              avoidCollisions={avoidCollisions}\n              collisionBoundary={collisionBoundary}\n              collisionPadding={collisionPadding}\n              arrowPadding={arrowPadding}\n              sticky={sticky}\n              hideWhenDetached={hideWhenDetached}\n              style={{\n                zIndex: `var(--tgph-zIndex-tooltip)`,\n              }}\n            >\n              <InvertedAppearance>\n                <Stack\n                  as={motion.div}\n                  // Add tgph class so that this always works in portals\n                  className=\"tgph\"\n                  initial={\n                    shouldAnimate\n                      ? {\n                          opacity: 0.5,\n                          scale: 0.6,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n                  bg=\"gray-1\"\n                  rounded=\"3\"\n                  py=\"2\"\n                  px=\"3\"\n                  align=\"center\"\n                  justify=\"center\"\n                  style={{\n                    transformOrigin:\n                      \"var(--radix-tooltip-content-transform-origin)\",\n                  }}\n                  {...(labelProps ? { labelProps } : {})}\n                >\n                  {typeof label === \"string\" ? (\n                    <Text as=\"span\" size=\"1\">\n                      {label}\n                    </Text>\n                  ) : (\n                    label\n                  )}\n                </Stack>\n              </InvertedAppearance>\n            </RadixTooltip.Content>\n          </RadixTooltip.Portal>\n        </RadixTooltip.Root>\n      </RadixTooltip.Provider>\n    );\n  }\n\n  return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","setOpen","useControllableState","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,132 +1,150 @@
-import { jsx as r, jsxs as M } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-tooltip";
-import { InvertedAppearance as _ } from "@telegraph/appearance";
-import { RefToTgphRef as R } from "@telegraph/helpers";
-import { Stack as b } from "@telegraph/layout";
-import { Text as j } from "@telegraph/typography";
-import { motion as z } from "framer-motion";
-const G = ({
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-tooltip";
+import { useControllableState as z } from "@radix-ui/react-use-controllable-state";
+import { InvertedAppearance as D } from "@telegraph/appearance";
+import { RefToTgphRef as k } from "@telegraph/helpers";
+import { Stack as B } from "@telegraph/layout";
+import { Text as q } from "@telegraph/typography";
+import { motion as w } from "framer-motion";
+import a from "react";
+const O = a.createContext({
+  groupOpen: !1,
+  setGroupOpen: () => {
+  }
+}), H = ({ open: r, delay: o = 600 }) => {
+  const t = a.useContext(O);
+  return a.useEffect(() => {
+    let n = null;
+    return t.setGroupOpen && (r === !0 && t.setGroupOpen(!0), r === !1 && (n = setTimeout(() => {
+      t.setGroupOpen && t.setGroupOpen(!1);
+    }, o))), () => {
+      n && clearTimeout(n);
+    };
+  }, [r, t, o]), {
+    groupOpen: t.groupOpen
+  };
+}, Z = ({ children: r }) => {
+  const [o, t] = a.useState(!1);
+  return /* @__PURE__ */ e(O.Provider, { value: { groupOpen: o, setGroupOpen: t }, children: r });
+}, $ = ({
   // Radix Tooltip Provider Props
-  delayDuration: p = 0,
-  skipDelayDuration: c,
-  disableHoverableContent: m,
+  delayDuration: r = 600,
+  skipDelayDuration: o,
+  disableHoverableContent: t,
   // Radix Tooltip Root Props
-  defaultOpen: s,
-  open: f,
-  onOpenChange: l,
+  defaultOpen: n,
+  open: d,
+  onOpenChange: g,
   // Radix Tooltip Content Props
-  "aria-label": d,
-  onEscapeKeyDown: T,
-  onPointerDownOutside: g,
-  forceMount: I,
-  side: n = "bottom",
-  sideOffset: h = 4,
-  align: u = "center",
-  alignOffset: x,
-  avoidCollisions: y,
-  collisionBoundary: A,
-  collisionPadding: O,
-  arrowPadding: N,
-  sticky: F,
-  hideWhenDetached: S,
+  "aria-label": T,
+  onEscapeKeyDown: h,
+  onPointerDownOutside: x,
+  forceMount: y,
+  side: u = "bottom",
+  sideOffset: A = 4,
+  align: I = "center",
+  alignOffset: N,
+  avoidCollisions: v,
+  collisionBoundary: F,
+  collisionPadding: C,
+  arrowPadding: S,
+  sticky: G,
+  hideWhenDetached: E,
   // Label Props
-  label: o,
-  labelProps: e,
+  label: s,
+  labelProps: l,
   // Telegraph Props
-  enabled: v = !0,
-  children: a
+  enabled: M = !0,
+  children: c
 }) => {
-  const E = (i) => {
-    if (i === "top")
+  const [f, R] = z({
+    prop: d,
+    onChange: g,
+    defaultProp: n
+  }), { groupOpen: m } = H({ open: !!f, delay: r }), _ = m ? 0 : r, b = !m, P = (p) => {
+    if (p === "top")
       return {
         y: -5
       };
-    if (i === "bottom")
+    if (p === "bottom")
       return {
         y: 5
       };
-    if (i === "left")
+    if (p === "left")
       return {
         x: -5
       };
-    if (i === "right")
+    if (p === "right")
       return {
         x: 5
       };
   };
-  return v ? /* @__PURE__ */ r(
-    t.Provider,
+  return M ? /* @__PURE__ */ e(
+    i.Provider,
     {
-      delayDuration: p,
-      skipDelayDuration: c,
-      disableHoverableContent: m,
-      children: /* @__PURE__ */ M(
-        t.Root,
-        {
-          defaultOpen: s,
-          open: f,
-          onOpenChange: l,
-          children: [
-            /* @__PURE__ */ r(t.Trigger, { asChild: !0, children: /* @__PURE__ */ r(R, { children: a }) }),
-            /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
-              t.Content,
+      delayDuration: _,
+      skipDelayDuration: o,
+      disableHoverableContent: t,
+      children: /* @__PURE__ */ j(i.Root, { open: f, onOpenChange: R, children: [
+        /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e(k, { children: c }) }),
+        /* @__PURE__ */ e(i.Portal, { children: /* @__PURE__ */ e(
+          i.Content,
+          {
+            "aria-label": T,
+            onEscapeKeyDown: h,
+            onPointerDownOutside: x,
+            forceMount: y,
+            side: u,
+            sideOffset: A,
+            align: I,
+            alignOffset: N,
+            avoidCollisions: v,
+            collisionBoundary: F,
+            collisionPadding: C,
+            arrowPadding: S,
+            sticky: G,
+            hideWhenDetached: E,
+            style: {
+              zIndex: "var(--tgph-zIndex-tooltip)"
+            },
+            children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
+              B,
               {
-                "aria-label": d,
-                onEscapeKeyDown: T,
-                onPointerDownOutside: g,
-                forceMount: I,
-                side: n,
-                sideOffset: h,
-                align: u,
-                alignOffset: x,
-                avoidCollisions: y,
-                collisionBoundary: A,
-                collisionPadding: O,
-                arrowPadding: N,
-                sticky: F,
-                hideWhenDetached: S,
+                as: w.div,
+                className: "tgph",
+                initial: b ? {
+                  opacity: 0.5,
+                  scale: 0.6,
+                  ...P(u)
+                } : {},
+                animate: {
+                  opacity: 1,
+                  scale: 1,
+                  x: 0,
+                  y: 0
+                },
+                transition: { duration: 0.2, type: "spring", bounce: 0 },
+                bg: "gray-1",
+                rounded: "3",
+                py: "2",
+                px: "3",
+                align: "center",
+                justify: "center",
                 style: {
-                  zIndex: "var(--tgph-zIndex-tooltip)"
+                  transformOrigin: "var(--radix-tooltip-content-transform-origin)"
                 },
-                children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(
-                  b,
-                  {
-                    as: z.div,
-                    className: "tgph",
-                    initial: {
-                      opacity: 0.5,
-                      scale: 0.6,
-                      ...E(n)
-                    },
-                    animate: {
-                      opacity: 1,
-                      scale: 1,
-                      x: 0,
-                      y: 0
-                    },
-                    transition: { duration: 0.2, type: "spring", bounce: 0 },
-                    bg: "gray-1",
-                    rounded: "3",
-                    py: "2",
-                    px: "3",
-                    align: "center",
-                    justify: "center",
-                    style: {
-                      transformOrigin: "var(--radix-tooltip-content-transform-origin)"
-                    },
-                    ...e ? { labelProps: e } : {},
-                    children: typeof o == "string" ? /* @__PURE__ */ r(j, { as: "span", size: "1", children: o }) : o
-                  }
-                ) })
+                ...l ? { labelProps: l } : {},
+                children: typeof s == "string" ? /* @__PURE__ */ e(q, { as: "span", size: "1", children: s }) : s
               }
             ) })
-          ]
-        }
-      )
+          }
+        ) })
+      ] })
     }
-  ) : /* @__PURE__ */ r("span", { children: a });
+  ) : /* @__PURE__ */ e("span", { children: c });
 };
 export {
-  G as Tooltip
+  $ as Tooltip,
+  Z as TooltipGroupProvider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n  label: string | React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Stack<T>>;\n  enabled?: boolean;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n  typeof RadixTooltip.Root\n> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n  TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n  // Radix Tooltip Provider Props\n  delayDuration = 0,\n  skipDelayDuration,\n  disableHoverableContent,\n  // Radix Tooltip Root Props\n  defaultOpen,\n  open,\n  onOpenChange,\n  // Radix Tooltip Content Props\n  \"aria-label\": ariaLabel,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  forceMount,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  // Label Props\n  label,\n  labelProps,\n  // Telegraph Props\n  enabled = true,\n  children,\n}: TooltipProps<T>) => {\n  const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n    const ANIMATION_OFFSET = 5;\n    if (side === \"top\") {\n      return {\n        y: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"bottom\") {\n      return {\n        y: ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"left\") {\n      return {\n        x: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"right\") {\n      return {\n        x: ANIMATION_OFFSET,\n      };\n    }\n  };\n\n  if (enabled) {\n    return (\n      <RadixTooltip.Provider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <RadixTooltip.Root\n          defaultOpen={defaultOpen}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          <RadixTooltip.Trigger asChild={true}>\n            <RefToTgphRef>{children}</RefToTgphRef>\n          </RadixTooltip.Trigger>\n          <RadixTooltip.Portal>\n            <RadixTooltip.Content\n              aria-label={ariaLabel}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              forceMount={forceMount}\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n              avoidCollisions={avoidCollisions}\n              collisionBoundary={collisionBoundary}\n              collisionPadding={collisionPadding}\n              arrowPadding={arrowPadding}\n              sticky={sticky}\n              hideWhenDetached={hideWhenDetached}\n              style={{\n                zIndex: `var(--tgph-zIndex-tooltip)`,\n              }}\n            >\n              <InvertedAppearance>\n                <Stack\n                  as={motion.div}\n                  // Add tgph class so that this always works in portals\n                  className=\"tgph\"\n                  initial={{\n                    opacity: 0.5,\n                    scale: 0.6,\n                    ...deriveAnimationBasedOnSide(side),\n                  }}\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n                  bg=\"gray-1\"\n                  rounded=\"3\"\n                  py=\"2\"\n                  px=\"3\"\n                  align=\"center\"\n                  justify=\"center\"\n                  style={{\n                    transformOrigin:\n                      \"var(--radix-tooltip-content-transform-origin)\",\n                  }}\n                  {...(labelProps ? { labelProps } : {})}\n                >\n                  {typeof label === \"string\" ? (\n                    <Text as=\"span\" size=\"1\">\n                      {label}\n                    </Text>\n                  ) : (\n                    label\n                  )}\n                </Stack>\n              </InvertedAppearance>\n            </RadixTooltip.Content>\n          </RadixTooltip.Portal>\n        </RadixTooltip.Root>\n      </RadixTooltip.Provider>\n    );\n  }\n\n  return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpen","open","onOpenChange","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from \"react\";\n\ntype TooltipGroupContextState = {\n  groupOpen: boolean;\n  setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n  groupOpen: false,\n  setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n  open: boolean;\n  delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n  const context = React.useContext(TooltipContext);\n\n  // If the open prop is set to true, we set the groupOpen state to true\n  // If the open prop is set to false, we set the groupOpen state to false after a delay\n  // to ensure that another tooltip is not opened while this one is closed.\n  React.useEffect(() => {\n    let timer: NodeJS.Timeout | null = null;\n    if (context.setGroupOpen) {\n      if (open === true) {\n        context.setGroupOpen(true);\n      }\n\n      if (open === false) {\n        timer = setTimeout(() => {\n          if (context.setGroupOpen) {\n            context.setGroupOpen(false);\n          }\n        }, delay);\n      }\n    }\n\n    return () => {\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [open, context, delay]);\n\n  return {\n    groupOpen: context.groupOpen,\n  };\n};\n\ntype TooltipGroupProviderProps = {\n  children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n  const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n  return (\n    <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n      {children}\n    </TooltipContext.Provider>\n  );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n  label: string | React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Stack<T>>;\n  enabled?: boolean;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n  typeof RadixTooltip.Root\n> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n  TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n  // Radix Tooltip Provider Props\n  delayDuration = 600,\n  skipDelayDuration,\n  disableHoverableContent,\n  // Radix Tooltip Root Props\n  defaultOpen: defaultOpenProp,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  // Radix Tooltip Content Props\n  \"aria-label\": ariaLabel,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  forceMount,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  // Label Props\n  label,\n  labelProps,\n  // Telegraph Props\n  enabled = true,\n  children,\n}: TooltipProps<T>) => {\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    onChange: onOpenChangeProp,\n    defaultProp: defaultOpenProp,\n  });\n  const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n  const derivedDelayDuration = groupOpen ? 0 : delayDuration;\n  const shouldAnimate = !groupOpen;\n\n  const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n    const ANIMATION_OFFSET = 5;\n    if (side === \"top\") {\n      return {\n        y: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"bottom\") {\n      return {\n        y: ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"left\") {\n      return {\n        x: -ANIMATION_OFFSET,\n      };\n    }\n\n    if (side === \"right\") {\n      return {\n        x: ANIMATION_OFFSET,\n      };\n    }\n  };\n\n  if (enabled) {\n    return (\n      <RadixTooltip.Provider\n        delayDuration={derivedDelayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <RadixTooltip.Root open={open} onOpenChange={setOpen}>\n          <RadixTooltip.Trigger asChild={true}>\n            <RefToTgphRef>{children}</RefToTgphRef>\n          </RadixTooltip.Trigger>\n          <RadixTooltip.Portal>\n            <RadixTooltip.Content\n              aria-label={ariaLabel}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              forceMount={forceMount}\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n              avoidCollisions={avoidCollisions}\n              collisionBoundary={collisionBoundary}\n              collisionPadding={collisionPadding}\n              arrowPadding={arrowPadding}\n              sticky={sticky}\n              hideWhenDetached={hideWhenDetached}\n              style={{\n                zIndex: `var(--tgph-zIndex-tooltip)`,\n              }}\n            >\n              <InvertedAppearance>\n                <Stack\n                  as={motion.div}\n                  // Add tgph class so that this always works in portals\n                  className=\"tgph\"\n                  initial={\n                    shouldAnimate\n                      ? {\n                          opacity: 0.5,\n                          scale: 0.6,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n                  bg=\"gray-1\"\n                  rounded=\"3\"\n                  py=\"2\"\n                  px=\"3\"\n                  align=\"center\"\n                  justify=\"center\"\n                  style={{\n                    transformOrigin:\n                      \"var(--radix-tooltip-content-transform-origin)\",\n                  }}\n                  {...(labelProps ? { labelProps } : {})}\n                >\n                  {typeof label === \"string\" ? (\n                    <Text as=\"span\" size=\"1\">\n                      {label}\n                    </Text>\n                  ) : (\n                    label\n                  )}\n                </Stack>\n              </InvertedAppearance>\n            </RadixTooltip.Content>\n          </RadixTooltip.Portal>\n        </RadixTooltip.Root>\n      </RadixTooltip.Provider>\n    );\n  }\n\n  return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","setOpen","useControllableState","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"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"}

package/dist/types/Tooltip/Tooltip.d.ts

@@ -8,6 +8,6 @@ type TooltipBaseProps<T extends TgphElement> = {
     enabled?: boolean;
 };
 type TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<typeof RadixTooltip.Root> & React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> & React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> & TooltipBaseProps<T>;
-declare const Tooltip: <T extends TgphElement>({ delayDuration, skipDelayDuration, disableHoverableContent, defaultOpen, open, onOpenChange, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, forceMount, side, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, label, labelProps, enabled, children, }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: <T extends TgphElement>({ delayDuration, skipDelayDuration, disableHoverableContent, defaultOpen: defaultOpenProp, open: openProp, onOpenChange: onOpenChangeProp, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, forceMount, side, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, label, labelProps, enabled, children, }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/types/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC7C,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,KAAK,CAAC,wBAAwB,CACvE,OAAO,YAAY,CAAC,IAAI,CACzB,GACC,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,GAC5D,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,GAC3D,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAEtB,QAAA,MAAM,OAAO,iXA8BV,aAAa,CAAC,CAAC,4CA6GjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC7C,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,KAAK,CAAC,wBAAwB,CACvE,OAAO,YAAY,CAAC,IAAI,CACzB,GACC,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,GAC5D,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,GAC3D,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAEtB,QAAA,MAAM,OAAO,8ZA8BV,aAAa,CAAC,CAAC,4CAuHjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/types/Tooltip/Tooltip.hooks.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+type UseTooltipGroupParams = {
+    open: boolean;
+    delay?: number;
+};
+declare const useTooltipGroup: ({ open, delay }: UseTooltipGroupParams) => {
+    groupOpen: boolean;
+};
+type TooltipGroupProviderProps = {
+    children: React.ReactNode;
+};
+declare const TooltipGroupProvider: ({ children }: TooltipGroupProviderProps) => import("react/jsx-runtime").JSX.Element;
+export { TooltipGroupProvider, useTooltipGroup };
+//# sourceMappingURL=Tooltip.hooks.d.ts.map

package/dist/types/Tooltip/Tooltip.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.hooks.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,eAAe,oBAA2B,qBAAqB;;CAgCpE,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,oBAAoB,iBAAkB,yBAAyB,4CAQpE,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAC"}

package/dist/types/Tooltip/index.d.ts

@@ -1,2 +1,3 @@
 export { Tooltip } from './Tooltip';
+export { TooltipGroupProvider } from './Tooltip.hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip, TooltipGroupProvider } from './Tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tooltip",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "A simple tooltip component ",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tooltip",
   "author": "@knocklabs",
@@ -33,10 +33,11 @@
   },
   "dependencies": {
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@telegraph/appearance": "^0.0.2",
+    "@radix-ui/react-use-controllable-state": "^1.1.0",
+    "@telegraph/appearance": "^0.0.3",
     "@telegraph/helpers": "^0.0.5",
-    "@telegraph/layout": "^0.0.26",
-    "@telegraph/typography": "^0.0.25",
+    "@telegraph/layout": "^0.0.27",
+    "@telegraph/typography": "^0.0.27",
     "framer-motion": "^11.1.9"
   },
   "devDependencies": {
@@ -49,12 +50,12 @@
     "@types/react": "^18.2.48",
     "eslint": "^8.56.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "typescript": "^5.3.3",
-    "vite": "^5.3.0"
+    "vite": "^5.3.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.3.1"
   }
 }