@telegraph/truncate 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @telegraph/truncate
+
+## 0.0.1
+
+### Patch Changes
+
+- [#446](https://github.com/knocklabs/telegraph/pull/446) [`5c0784e`](https://github.com/knocklabs/telegraph/commit/5c0784e3fc5198ae4a83ef5c09b7b8c57c8d264d) Thanks [@kylemcd](https://github.com/kylemcd)! - add truncate component and integrate into combobox
+
+- Updated dependencies [[`5c0784e`](https://github.com/knocklabs/telegraph/commit/5c0784e3fc5198ae4a83ef5c09b7b8c57c8d264d)]:
+  - @telegraph/tooltip@0.0.46

package/README.md

@@ -0,0 +1,85 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/truncate.svg)](https://www.npmjs.com/package/@telegraph/truncate)
+
+# @telegraph/truncate
+
+> Utility components for detecting and responding to content overflow, truncation, and visibility states in the UI.
+
+## Installation Instructions
+
+```
+npm install @telegraph/truncate
+```
+
+## Components
+
+### `<TruncatedText/>`
+
+A text component that automatically truncates content with an ellipsis and shows a tooltip when truncated.
+
+```tsx
+import { TruncatedText } from "@telegraph/truncate";
+
+<TruncatedText maxWidth="40">
+  This text will be truncated if it exceeds the container width
+</TruncatedText>;
+```
+
+#### Props
+
+| Name         | Type                                                   | Default | Description                                                                                                  |
+| ------------ | ------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
+| tooltipProps | Partial<TgphComponentProps<typeof TooltipIfTruncated>> | `{}`    | Props to pass to the underlying TooltipIfTruncated component                                                 |
+| ...TextProps | TgphComponentProps<typeof Text>                        | -       | All props from [@telegraph/typography](https://github.com/knocklabs/telegraph/tree/main/packages/typography) |
+
+### `<TooltipIfTruncated/>`
+
+A component that conditionally shows a tooltip only when its content is truncated.
+
+```tsx
+import { TooltipIfTruncated } from "@telegraph/truncate";
+
+<TooltipIfTruncated>
+  <span>This text will show a tooltip only when truncated</span>
+</TooltipIfTruncated>;
+```
+
+#### Props
+
+| Name            | Type                               | Default | Description                                                                                            |
+| --------------- | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| label           | string                             | -       | The text to show in the tooltip. If not provided, will use the content's text                          |
+| ...TooltipProps | TgphComponentProps<typeof Tooltip> | -       | All props from [@telegraph/tooltip](https://github.com/knocklabs/telegraph/tree/main/packages/tooltip) |
+
+## Hooks
+
+### `useTruncate`
+
+A hook that detects whether an element's content is truncated.
+
+```tsx
+import { useTruncate } from "@telegraph/truncate";
+
+const MyComponent = () => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { truncated } = useTruncate({ tgphRef: ref });
+
+  return (
+    <div ref={ref}>{truncated ? "Content is truncated" : "Content fits"}</div>
+  );
+};
+```
+
+#### Parameters
+
+| Name   | Type                                        | Description                                                           |
+| ------ | ------------------------------------------- | --------------------------------------------------------------------- |
+| params | `{ tgphRef: React.RefObject<HTMLElement> }` | A ref to the element to check for truncation                          |
+| deps   | `React.DependencyList`                      | Optional dependencies to re-run the truncation check when they change |
+
+#### Returns
+
+| Name      | Type      | Description                                |
+| --------- | --------- | ------------------------------------------ |
+| truncated | `boolean` | Whether the element's content is truncated |

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("@telegraph/helpers"),f=require("@telegraph/tooltip"),a=require("@telegraph/typography"),c=require("react"),l=({tgphRef:t},e=[])=>{const[r,n]=c.useState(!1);return c.useEffect(()=>{if(!t.current)return n(!1);const s=t.current,u=()=>{n(s.scrollWidth>s.clientWidth)};u();const i=new ResizeObserver(u);return i.observe(s),()=>{i.disconnect()}},[t,...e]),{truncated:r}},T=({label:t,children:e,...r})=>{const n=c.useRef(null),{truncated:s}=l({tgphRef:n},[e]),u=c.useMemo(()=>typeof e=="string"?e:c.isValidElement(e)?e.props.children:t,[e,t]);return o.jsx(f.Tooltip,{label:o.jsx(a.Text,{as:"span",size:"1",children:u}),enabled:s,triggerRef:n,...r,children:o.jsx(p.RefToTgphRef,{children:e})})},d=({tooltipProps:t,style:e,...r})=>o.jsx(T,{...t,children:o.jsx(a.Text,{textOverflow:"ellipsis",overflow:"hidden",style:{display:"block",whiteSpace:"nowrap",...e},...r})});exports.TooltipIfTruncated=T;exports.TruncatedText=d;exports.useTruncate=l;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\ntype TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate({ tgphRef: truncateRef }, [children]);\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) return children.props.children;\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\ntype TruncatedTextProps<T extends TgphElement> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"names":["useTruncate","tgphRef","deps","truncated","setTruncated","React","tgphRefElement","checkTruncation","resizeObserver","TooltipIfTruncated","label","children","props","truncateRef","textToDisplayInTooltip","jsx","Tooltip","Text","RefToTgphRef","TruncatedText","tooltipProps","style"],"mappings":"2OAMMA,EAAc,CAClB,CAAE,QAAAC,GACFC,EAA6B,CAAA,IAC1B,CACH,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACJ,EAAQ,QAAS,OAAOG,EAAa,EAAK,EAE/C,MAAME,EAAiBL,EAAQ,QAEzBM,EAAkB,IAAM,CACfH,EAAAE,EAAe,YAAcA,EAAe,WAAW,CACtE,EAGgBC,EAAA,EAGV,MAAAC,EAAiB,IAAI,eAAeD,CAAe,EACzD,OAAAC,EAAe,QAAQF,CAAc,EAG9B,IAAM,CACXE,EAAe,WAAW,CAC5B,CAAA,EAEC,CAACP,EAAS,GAAGC,CAAI,CAAC,EAEd,CAAE,UAAAC,CAAU,CACrB,ECpBMM,EAAqB,CAAC,CAC1B,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA+B,CACvB,MAAAC,EAAcR,EAAM,OAA0B,IAAI,EAClD,CAAE,UAAAF,CAAU,EAAIH,EAAY,CAAE,QAASa,CAAY,EAAG,CAACF,CAAQ,CAAC,EAGhEG,EAAyBT,EAAM,QAAQ,IACvC,OAAOM,GAAa,SAAiBA,EACrCN,EAAM,eAAeM,CAAQ,EAAUA,EAAS,MAAM,SACnDD,EACN,CAACC,EAAUD,CAAK,CAAC,EAGlB,OAAAK,EAAA,IAACC,EAAA,QAAA,CACC,MACGD,EAAAA,IAAAE,EAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAClB,SACHH,EAAA,EAEF,QAASX,EACT,WAAYU,EACX,GAAGD,EAEJ,SAAAG,EAAA,IAACG,gBAAc,SAAAP,CAAS,CAAA,CAAA,CAC1B,CAEJ,ECpCMQ,EAAgB,CAAwB,CAC5C,aAAAC,EACA,MAAAC,EACA,GAAGT,CACL,IAEIG,EAAA,IAACN,EAAoB,CAAA,GAAGW,EACtB,SAAAL,EAAA,IAACE,EAAA,KAAA,CACC,aAAa,WACb,SAAS,SACT,MAAO,CACL,QAAS,QACT,WAAY,SACZ,GAAGI,CACL,EACC,GAAGT,CAAA,CAAA,EAER"}

package/dist/esm/index.mjs

@@ -0,0 +1,57 @@
+import { jsx as s } from "react/jsx-runtime";
+import { RefToTgphRef as a } from "@telegraph/helpers";
+import { Tooltip as l } from "@telegraph/tooltip";
+import { Text as f } from "@telegraph/typography";
+import c from "react";
+const p = ({ tgphRef: t }, e = []) => {
+  const [r, o] = c.useState(!1);
+  return c.useEffect(() => {
+    if (!t.current) return o(!1);
+    const n = t.current, i = () => {
+      o(n.scrollWidth > n.clientWidth);
+    };
+    i();
+    const u = new ResizeObserver(i);
+    return u.observe(n), () => {
+      u.disconnect();
+    };
+  }, [t, ...e]), { truncated: r };
+}, m = ({
+  label: t,
+  children: e,
+  ...r
+}) => {
+  const o = c.useRef(null), { truncated: n } = p({ tgphRef: o }, [e]), i = c.useMemo(() => typeof e == "string" ? e : c.isValidElement(e) ? e.props.children : t, [e, t]);
+  return /* @__PURE__ */ s(
+    l,
+    {
+      label: /* @__PURE__ */ s(f, { as: "span", size: "1", children: i }),
+      enabled: n,
+      triggerRef: o,
+      ...r,
+      children: /* @__PURE__ */ s(a, { children: e })
+    }
+  );
+}, v = ({
+  tooltipProps: t,
+  style: e,
+  ...r
+}) => /* @__PURE__ */ s(m, { ...t, children: /* @__PURE__ */ s(
+  f,
+  {
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    style: {
+      display: "block",
+      whiteSpace: "nowrap",
+      ...e
+    },
+    ...r
+  }
+) });
+export {
+  m as TooltipIfTruncated,
+  v as TruncatedText,
+  p as useTruncate
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\ntype TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate({ tgphRef: truncateRef }, [children]);\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) return children.props.children;\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\ntype TruncatedTextProps<T extends TgphElement> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"names":["useTruncate","tgphRef","deps","truncated","setTruncated","React","tgphRefElement","checkTruncation","resizeObserver","TooltipIfTruncated","label","children","props","truncateRef","textToDisplayInTooltip","jsx","Tooltip","Text","RefToTgphRef","TruncatedText","tooltipProps","style"],"mappings":";;;;;AAMA,MAAMA,IAAc,CAClB,EAAE,SAAAC,KACFC,IAA6B,CAAA,MAC1B;AACH,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAM,SAAS,EAAK;AAEtD,SAAAA,EAAM,UAAU,MAAM;AACpB,QAAI,CAACJ,EAAQ,QAAS,QAAOG,EAAa,EAAK;AAE/C,UAAME,IAAiBL,EAAQ,SAEzBM,IAAkB,MAAM;AACf,MAAAH,EAAAE,EAAe,cAAcA,EAAe,WAAW;AAAA,IACtE;AAGgB,IAAAC,EAAA;AAGV,UAAAC,IAAiB,IAAI,eAAeD,CAAe;AACzD,WAAAC,EAAe,QAAQF,CAAc,GAG9B,MAAM;AACX,MAAAE,EAAe,WAAW;AAAA,IAC5B;AAAA,EAAA,GAEC,CAACP,GAAS,GAAGC,CAAI,CAAC,GAEd,EAAE,WAAAC,EAAU;AACrB,GCpBMM,IAAqB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AACvB,QAAAC,IAAcR,EAAM,OAA0B,IAAI,GAClD,EAAE,WAAAF,EAAU,IAAIH,EAAY,EAAE,SAASa,EAAY,GAAG,CAACF,CAAQ,CAAC,GAGhEG,IAAyBT,EAAM,QAAQ,MACvC,OAAOM,KAAa,WAAiBA,IACrCN,EAAM,eAAeM,CAAQ,IAAUA,EAAS,MAAM,WACnDD,GACN,CAACC,GAAUD,CAAK,CAAC;AAGlB,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OACG,gBAAAD,EAAAE,GAAA,EAAK,IAAG,QAAO,MAAK,KAClB,UACHH,GAAA;AAAA,MAEF,SAASX;AAAA,MACT,YAAYU;AAAA,MACX,GAAGD;AAAA,MAEJ,UAAA,gBAAAG,EAACG,KAAc,UAAAP,EAAS,CAAA;AAAA,IAAA;AAAA,EAC1B;AAEJ,GCpCMQ,IAAgB,CAAwB;AAAA,EAC5C,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGT;AACL,MAEI,gBAAAG,EAACN,GAAoB,EAAA,GAAGW,GACtB,UAAA,gBAAAL;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,UAAS;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAGI;AAAA,IACL;AAAA,IACC,GAAGT;AAAA,EAAA;AAAA,GAER;"}

package/dist/types/TooltipIfTruncated/TooltipIfTruncated.d.ts

@@ -0,0 +1,7 @@
+import { Optional, TgphComponentProps } from '@telegraph/helpers';
+import { Tooltip } from '@telegraph/tooltip';
+
+type TooltipIfTruncatedProps = Optional<TgphComponentProps<typeof Tooltip>, "label">;
+declare const TooltipIfTruncated: ({ label, children, ...props }: TooltipIfTruncatedProps) => import("react/jsx-runtime").JSX.Element;
+export { TooltipIfTruncated };
+//# sourceMappingURL=TooltipIfTruncated.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipIfTruncated.d.ts","sourceRoot":"","sources":["../../../src/TooltipIfTruncated/TooltipIfTruncated.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,EAEb,KAAK,kBAAkB,EACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAM7C,KAAK,uBAAuB,GAAG,QAAQ,CACrC,kBAAkB,CAAC,OAAO,OAAO,CAAC,EAClC,OAAO,CACR,CAAC;AAEF,QAAA,MAAM,kBAAkB,kCAIrB,uBAAuB,4CAyBzB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

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

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

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

package/dist/types/TruncatedText/TruncatedText.d.ts

@@ -0,0 +1,10 @@
+import { TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { Text } from '@telegraph/typography';
+import { TooltipIfTruncated } from '../TooltipIfTruncated';
+
+type TruncatedTextProps<T extends TgphElement> = {
+    tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;
+} & TgphComponentProps<typeof Text<T>>;
+declare const TruncatedText: <T extends TgphElement>({ tooltipProps, style, ...props }: TruncatedTextProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { TruncatedText };
+//# sourceMappingURL=TruncatedText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.d.ts","sourceRoot":"","sources":["../../../src/TruncatedText/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,KAAK,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC;CACvE,GAAG,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvC,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,qCAIzC,kBAAkB,CAAC,CAAC,CAAC,4CAevB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

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

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

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

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { TooltipIfTruncated } from './TooltipIfTruncated';
+export { TruncatedText } from './TruncatedText';
+export { useTruncate } from './useTruncate';
+//# 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,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

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

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

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

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

package/dist/types/useTruncate/useTruncate.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+type UseTruncateParams = {
+    tgphRef: React.RefObject<HTMLElement>;
+};
+declare const useTruncate: ({ tgphRef }: UseTruncateParams, deps?: React.DependencyList) => {
+    truncated: boolean;
+};
+export { useTruncate };
+//# sourceMappingURL=useTruncate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTruncate.d.ts","sourceRoot":"","sources":["../../../src/useTruncate/useTruncate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC;AAEF,QAAA,MAAM,WAAW,gBACF,iBAAiB,SACxB,KAAK,CAAC,cAAc;;CA4B3B,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@telegraph/truncate",
+  "version": "0.0.1",
+  "description": "Utility components for detecting and responding to content overflow, truncation, and visibility states in the UI.",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/truncate",
+  "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",
+    "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": {
+    "@telegraph/helpers": "^0.0.12",
+    "@telegraph/tooltip": "^0.0.46",
+    "@telegraph/typography": "^0.1.16"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.24",
+    "@telegraph/prettier-config": "^0.0.7",
+    "@telegraph/vite-config": "^0.0.14",
+    "@types/react": "^18.3.18",
+    "eslint": "^8.56.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}