@telegraph/tooltip 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @telegraph/tooltip
+
+## 0.0.2
+
+### Patch Changes
+
+- [#128](https://github.com/knocklabs/telegraph/pull/128) [`0d709cc`](https://github.com/knocklabs/telegraph/commit/0d709cca3708aa976daa78added35260e9c02834) Thanks [@kylemcd](https://github.com/kylemcd)! - adds tooltip to copy button + fixes small fixes
+
+## 0.0.1
+
+### Patch Changes
+
+- [#127](https://github.com/knocklabs/telegraph/pull/127) [`04e1459`](https://github.com/knocklabs/telegraph/commit/04e14597ed2148354923023b3668f63387ce63c4) Thanks [@kylemcd](https://github.com/kylemcd)! - tooltip + better themeing support
+
+- Updated dependencies [[`04e1459`](https://github.com/knocklabs/telegraph/commit/04e14597ed2148354923023b3668f63387ce63c4), [`def3d89`](https://github.com/knocklabs/telegraph/commit/def3d89056aa54c0d24f74e33bc04df8efc712d9), [`790c5e0`](https://github.com/knocklabs/telegraph/commit/790c5e0626c9b99451214f892def9807165d9572)]:
+  - @telegraph/appearance@0.0.1
+  - @telegraph/typography@0.0.11
+  - @telegraph/layout@0.0.12
+  - @telegraph/helpers@0.0.2

package/README.md

@@ -0,0 +1,17 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/button.svg)](https://www.npmjs.com/package/@telegraph/tooltip)
+
+# @telegraph/tooltip
+> A simple tooltip component 
+
+## Installation Instructions
+
+```
+npm install @telegraph/tooltip
+```
+
+### Add stylesheet
+```
+@import "@telegraph/tooltip"
+```

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("@radix-ui/react-tooltip"),v=require("@telegraph/appearance"),M=require("@telegraph/helpers"),_=require("@telegraph/layout"),q=require("@telegraph/typography"),R=require("framer-motion");function E(t){const i=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(i,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const n=E(F),P=({delayDuration:t=0,skipDelayDuration:i,disableHoverableContent:r,defaultOpen:o,open:u,onOpenChange:p,"aria-label":d,onEscapeKeyDown:f,onPointerDownOutside:g,forceMount:y,side:s="bottom",sideOffset:T=4,align:x="center",alignOffset:O,avoidCollisions:j,collisionBoundary:h,collisionPadding:m,arrowPadding:A,sticky:N,hideWhenDetached:b,label:c,labelProps:l,children:I})=>{const S=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 e.jsx(n.Provider,{delayDuration:t,skipDelayDuration:i,disableHoverableContent:r,children:e.jsxs(n.Root,{defaultOpen:o,open:u,onOpenChange:p,children:[e.jsx(n.Trigger,{asChild:!0,children:e.jsx(M.RefToTgphRef,{children:I})}),e.jsx(n.Portal,{children:e.jsx(n.Content,{"aria-label":d,onEscapeKeyDown:f,onPointerDownOutside:g,forceMount:y,side:s,sideOffset:T,align:x,alignOffset:O,avoidCollisions:j,collisionBoundary:h,collisionPadding:m,arrowPadding:A,sticky:N,hideWhenDetached:b,children:e.jsx(v.InvertedAppearance,{children:e.jsxs(_.Stack,{as:R.motion.div,className:"tgph",initial:{opacity:.5,scale:.6,...S(s)},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:[e.jsx(n.Arrow,{fill:"var(--tgph-gray-1)"}),typeof c=="string"?e.jsx(q.Text,{as:"span",size:"1",children:c}):c]})})})})]})})};exports.Tooltip=P;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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};\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  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  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          >\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                <RadixTooltip.Arrow fill=\"var(--tgph-gray-1)\" />\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\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","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"olBAwBMA,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,EACA,SAAAC,CACF,IAAuB,CACf,MAAAC,EAA8Bb,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,EAGA,OAAAc,EAAA,IAACC,EAAa,SAAb,CACC,cAAAzB,EACA,kBAAAC,EACA,wBAAAC,EAEA,SAAAwB,EAAA,KAACD,EAAa,KAAb,CACC,YAAAtB,EACA,KAAAC,EACA,aAAAC,EAEA,SAAA,CAACmB,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,aAAYnB,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,EAEA,eAACS,qBACC,CAAA,SAAAF,EAAA,KAACG,EAAA,MAAA,CACC,GAAIC,EAAO,OAAA,IAEX,UAAU,OACV,QAAS,CACP,QAAS,GACT,MAAO,GACP,GAAGP,EAA2Bb,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,EAEpC,SAAA,CAAAG,EAAAA,IAACC,EAAa,MAAb,CAAmB,KAAK,oBAAqB,CAAA,EAC7C,OAAOL,GAAU,SACfI,MAAAO,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAClB,SAAAX,CAAA,CACH,EAEAA,CAAA,CAAA,CAAA,EAGN,CAAA,CAAA,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/css/default.css

@@ -0,0 +1 @@
+.tgph :is(.sticky){position:sticky}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

package/dist/esm/index.mjs

@@ -0,0 +1,130 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-tooltip";
+import { InvertedAppearance as M } from "@telegraph/appearance";
+import { RefToTgphRef as _ } from "@telegraph/helpers";
+import { Stack as R } from "@telegraph/layout";
+import { Text as b } from "@telegraph/typography";
+import { motion as j } from "framer-motion";
+const D = ({
+  // Radix Tooltip Provider Props
+  delayDuration: p = 0,
+  skipDelayDuration: c,
+  disableHoverableContent: m,
+  // Radix Tooltip Root Props
+  defaultOpen: l,
+  open: f,
+  onOpenChange: s,
+  // Radix Tooltip Content Props
+  "aria-label": d,
+  onEscapeKeyDown: T,
+  onPointerDownOutside: g,
+  forceMount: h,
+  side: n = "bottom",
+  sideOffset: A = 4,
+  align: y = "center",
+  alignOffset: O,
+  avoidCollisions: I,
+  collisionBoundary: N,
+  collisionPadding: u,
+  arrowPadding: x,
+  sticky: F,
+  hideWhenDetached: S,
+  // Label Props
+  label: o,
+  labelProps: e,
+  children: v
+}) => {
+  const E = (i) => {
+    if (i === "top")
+      return {
+        y: -5
+      };
+    if (i === "bottom")
+      return {
+        y: 5
+      };
+    if (i === "left")
+      return {
+        x: -5
+      };
+    if (i === "right")
+      return {
+        x: 5
+      };
+  };
+  return /* @__PURE__ */ r(
+    t.Provider,
+    {
+      delayDuration: p,
+      skipDelayDuration: c,
+      disableHoverableContent: m,
+      children: /* @__PURE__ */ a(
+        t.Root,
+        {
+          defaultOpen: l,
+          open: f,
+          onOpenChange: s,
+          children: [
+            /* @__PURE__ */ r(t.Trigger, { asChild: !0, children: /* @__PURE__ */ r(_, { children: v }) }),
+            /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
+              t.Content,
+              {
+                "aria-label": d,
+                onEscapeKeyDown: T,
+                onPointerDownOutside: g,
+                forceMount: h,
+                side: n,
+                sideOffset: A,
+                align: y,
+                alignOffset: O,
+                avoidCollisions: I,
+                collisionBoundary: N,
+                collisionPadding: u,
+                arrowPadding: x,
+                sticky: F,
+                hideWhenDetached: S,
+                children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ a(
+                  R,
+                  {
+                    as: j.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: [
+                      /* @__PURE__ */ r(t.Arrow, { fill: "var(--tgph-gray-1)" }),
+                      typeof o == "string" ? /* @__PURE__ */ r(b, { as: "span", size: "1", children: o }) : o
+                    ]
+                  }
+                ) })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  D as Tooltip
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +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};\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  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  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          >\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                <RadixTooltip.Arrow fill=\"var(--tgph-gray-1)\" />\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\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","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":";;;;;;;AAwBA,MAAMA,IAAU,CAAwB;AAAA;AAAA,EAEtC,eAAAC,IAAgB;AAAA,EAChB,mBAAAC;AAAA,EACA,yBAAAC;AAAA;AAAA,EAEA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA;AAAA,EAEA,cAAcC;AAAA,EACd,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,kBAAAC;AAAA;AAAA,EAEA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAAuB;AACf,QAAAC,IAA6B,CAACb,MAAkC;AAEpE,QAAIA,MAAS;AACJ,aAAA;AAAA,QACL,GAAG;AAAA,MAAC;AAIR,QAAIA,MAAS;AACJ,aAAA;AAAA,QACL,GAAG;AAAA,MAAA;AAIP,QAAIA,MAAS;AACJ,aAAA;AAAA,QACL,GAAG;AAAA,MAAC;AAIR,QAAIA,MAAS;AACJ,aAAA;AAAA,QACL,GAAG;AAAA,MAAA;AAAA,EAEP;AAGA,SAAA,gBAAAc;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,eAAAzB;AAAA,MACA,mBAAAC;AAAA,MACA,yBAAAC;AAAA,MAEA,UAAA,gBAAAwB;AAAA,QAACD,EAAa;AAAA,QAAb;AAAA,UACC,aAAAtB;AAAA,UACA,MAAAC;AAAA,UACA,cAAAC;AAAA,UAEA,UAAA;AAAA,YAAC,gBAAAmB,EAAAC,EAAa,SAAb,EAAqB,SAAS,IAC7B,UAAC,gBAAAD,EAAAG,GAAA,EAAc,UAAAL,GAAS,EAC1B,CAAA;AAAA,YACA,gBAAAE,EAACC,EAAa,QAAb,EACC,UAAA,gBAAAD;AAAA,cAACC,EAAa;AAAA,cAAb;AAAA,gBACC,cAAYnB;AAAA,gBACZ,iBAAAC;AAAA,gBACA,sBAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,MAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,OAAAC;AAAA,gBACA,aAAAC;AAAA,gBACA,iBAAAC;AAAA,gBACA,mBAAAC;AAAA,gBACA,kBAAAC;AAAA,gBACA,cAAAC;AAAA,gBACA,QAAAC;AAAA,gBACA,kBAAAC;AAAA,gBAEA,4BAACS,GACC,EAAA,UAAA,gBAAAF;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,IAAIC,EAAO;AAAA,oBAEX,WAAU;AAAA,oBACV,SAAS;AAAA,sBACP,SAAS;AAAA,sBACT,OAAO;AAAA,sBACP,GAAGP,EAA2Bb,CAAI;AAAA,oBACpC;AAAA,oBACA,SAAS;AAAA,sBACP,SAAS;AAAA,sBACT,OAAO;AAAA,sBACP,GAAG;AAAA,sBACH,GAAG;AAAA,oBACL;AAAA,oBACA,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,oBACvD,IAAG;AAAA,oBACH,SAAQ;AAAA,oBACR,IAAG;AAAA,oBACH,IAAG;AAAA,oBACH,OAAM;AAAA,oBACN,SAAQ;AAAA,oBACR,OAAO;AAAA,sBACL,iBACE;AAAA,oBACJ;AAAA,oBACC,GAAIW,IAAa,EAAE,YAAAA,EAAA,IAAe,CAAC;AAAA,oBAEpC,UAAA;AAAA,sBAAA,gBAAAG,EAACC,EAAa,OAAb,EAAmB,MAAK,qBAAqB,CAAA;AAAA,sBAC7C,OAAOL,KAAU,WACf,gBAAAI,EAAAO,GAAA,EAAK,IAAG,QAAO,MAAK,KAClB,UAAAX,EAAA,CACH,IAEAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,GAGN;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,12 @@
+import { TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { Stack } from '@telegraph/layout';
+import { default as React } from 'react';
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+type TooltipBaseProps<T extends TgphElement> = {
+    label: string | React.ReactNode;
+    labelProps?: TgphComponentProps<typeof Stack<T>>;
+};
+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, children, }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +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;CAClD,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,wWA4BV,aAAa,CAAC,CAAC,4CAsGjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

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

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

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

package/dist/types/index.d.ts

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

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

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

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@telegraph/tooltip",
+  "version": "0.0.2",
+  "description": "A simple tooltip component ",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tooltip",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/css/default.css"
+    },
+    "./default.css": "./dist/css/default.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@telegraph/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "//test": "vitest run",
+    "//test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@telegraph/appearance": "^0.0.1",
+    "@telegraph/helpers": "^0.0.2",
+    "@telegraph/layout": "^0.0.12",
+    "@telegraph/typography": "^0.0.11",
+    "framer-motion": "^11.1.9"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.16",
+    "@telegraph/prettier-config": "^0.0.6",
+    "@telegraph/tailwind-config": "^0.0.11",
+    "@telegraph/vite-config": "^0.0.9",
+    "@telegraph/vitest-config": "^0.0.6",
+    "@types/react": "^18.2.48",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.13",
+    "vitest": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}