@dust-tt/sparkle 0.2.609 → 0.2.610

package/dist/esm/components/ToolCard.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export interface ToolCardProps {
     icon: React.ComponentType;
     label: string;
-    description: string;
+    description: string | React.ReactNode;
     isSelected: boolean;
     canAdd: boolean;
     cantAddReason?: string;

package/dist/esm/components/ToolCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,sFA0DpB,CAAC"}
+{"version":3,"file":"ToolCard.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,sFA0DpB,CAAC"}

package/dist/esm/components/ToolCard.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Avatar, Button, Card, Chip } from "../components";
+import { TruncatedText } from "../components/TruncatedText";
 import { PlusIcon } from "../icons/app";
 import { cn } from "../lib/utils";
 var FADE_TRANSITION_CLASSES = "s-transition-opacity s-duration-300 s-ease-in-out";
@@ -14,7 +15,7 @@ export var ToolCard = React.forwardRef(function (_a, ref) {
                     isSelected && (React.createElement(Chip, { size: "xs", color: "green", label: "ADDED", className: cn(FADE_TRANSITION_CLASSES, "s-opacity-100") }))),
                 canAdd && (React.createElement(Button, { size: "xs", variant: "outline", icon: PlusIcon, label: "Add", className: cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0") })),
                 cantAddReason && (React.createElement("div", { className: "s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night" }, cantAddReason))),
-            React.createElement("div", { className: "s-line-clamp-2 s-h-10 s-overflow-hidden s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night" }, description))));
+            React.createElement(TruncatedText, { className: "s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night" }, description))));
 });
 ToolCard.displayName = "ToolCard";
 //# sourceMappingURL=ToolCard.js.map

package/dist/esm/components/ToolCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.js","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,uBAAuB,GAC3B,mDAAmD,CAAC;AAatD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EASC,EACD,GAAG;QATD,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;QAExC,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;oBAChC,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;oBACvD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,eAAe,CAAC,GACvD,CACH,CACG;gBACL,MAAM,IAAI,CACT,oBAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,GACzD,CACH;gBACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,+FAA+F,IAC3G,aAAa,CACV,CACP,CACG;YACN,6BAAK,SAAS,EAAC,8GAA8G,IAC1H,WAAW,CACR,CACF,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"ToolCard.js","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,uBAAuB,GAC3B,mDAAmD,CAAC;AAatD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EASC,EACD,GAAG;QATD,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;QAExC,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;oBAChC,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;oBACvD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,eAAe,CAAC,GACvD,CACH,CACG;gBACL,MAAM,IAAI,CACT,oBAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,GACzD,CACH;gBACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,+FAA+F,IAC3G,aAAa,CACV,CACP,CACG;YACN,oBAAC,aAAa,IAAC,SAAS,EAAC,sEAAsE,IAC5F,WAAW,CACE,CACZ,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/esm/components/TruncatedText.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TruncatedTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: string | React.ReactNode;
+    lineClamp?: number;
+}
+export declare const TruncatedText: React.FC<TruncatedTextProps>;
+export {};
+//# sourceMappingURL=TruncatedText.d.ts.map

package/dist/esm/components/TruncatedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4CtD,CAAC"}

package/dist/esm/components/TruncatedText.js

@@ -0,0 +1,25 @@
+import { __assign, __read, __rest } from "tslib";
+import React from "react";
+import { Tooltip } from "../components/Tooltip";
+import { cn } from "../lib/utils";
+export var TruncatedText = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.lineClamp, lineClamp = _b === void 0 ? 2 : _b, props = __rest(_a, ["children", "className", "lineClamp"]);
+    var _c = __read(React.useState(false), 2), isTruncated = _c[0], setIsTruncated = _c[1];
+    var textRef = React.useRef(null);
+    // Check if content is actually truncated by comparing scroll height to
+    // client height
+    // This ensures we only show the tooltip when text is cut off by line-clamp-
+    React.useLayoutEffect(function () {
+        var element = textRef.current;
+        if (element) {
+            var isOverflowing = element.scrollHeight > element.clientHeight;
+            setIsTruncated(isOverflowing);
+        }
+    });
+    var textElement = (React.createElement("div", __assign({ ref: textRef, className: cn("s-line-clamp-".concat(lineClamp, " s-cursor-pointer s-select-none"), className) }, props), children));
+    if (isTruncated) {
+        return (React.createElement(Tooltip, { trigger: textElement, label: children, tooltipTriggerAsChild: true }));
+    }
+    return textElement;
+};
+//# sourceMappingURL=TruncatedText.js.map

package/dist/esm/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAOxC,MAAM,CAAC,IAAM,aAAa,GAAiC,UAAC,EAK3D;IAJC,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACV,KAAK,cAJkD,sCAK3D,CADS;IAEF,IAAA,KAAA,OAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;IAC5D,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEnD,uEAAuE;IACvE,gBAAgB;IAChB,4EAA4E;IAC5E,KAAK,CAAC,eAAe,CAAC;QACpB,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAM,aAAa,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;YAClE,cAAc,CAAC,aAAa,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAM,WAAW,GAAG,CAClB,sCACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,EAAE,CACX,uBAAgB,SAAS,oCAAiC,EAC1D,SAAS,CACV,IACG,KAAK,GAER,QAAQ,CACL,CACP,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,CACL,oBAAC,OAAO,IACN,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,QAAQ,EACf,qBAAqB,EAAE,IAAI,GAC3B,CACH,CAAC;IACJ,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC"}

package/dist/esm/stories/ToolCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAqBpB,CAAC"}
+{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}

package/dist/esm/stories/ToolCard.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { ToolCard } from "../components";
+import { Hoverable } from "../components";
 import { BookOpenIcon, CommandLineIcon } from "../icons/app";
 var meta = {
     title: "Modules/ToolCard",
@@ -8,5 +9,8 @@ var meta = {
 export default meta;
 export var Examples = function () { return (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-3" },
     React.createElement(ToolCard, { icon: BookOpenIcon, label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: false, canAdd: true, onClick: function () { return console.log("Add Image Generation"); } }),
-    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: "Agent can decide to trigger a reasoning model for complex tasks.", isSelected: true, canAdd: false }))); };
+    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
+            "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
+            " ",
+            React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false }))); };
 //# sourceMappingURL=ToolCard.stories.js.map

package/dist/esm/stories/ToolCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EAAC,kEAAkE,EAC9E,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EArB6B,CAqB7B,CAAC"}
+{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;YAMyD,GAAG;YAC1D,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EAtC6B,CAsC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.609",
+  "version": "0.2.610",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/ToolCard.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Avatar, Button, Card, Chip } from "@sparkle/components/";
+import { TruncatedText } from "@sparkle/components/TruncatedText";
 import { PlusIcon } from "@sparkle/icons/app/";
 import { cn } from "@sparkle/lib/utils";
 
@@ -10,7 +11,7 @@ const FADE_TRANSITION_CLASSES =
 export interface ToolCardProps {
   icon: React.ComponentType;
   label: string;
-  description: string;
+  description: string | React.ReactNode;
   isSelected: boolean;
   canAdd: boolean;
   cantAddReason?: string;
@@ -69,9 +70,9 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
               </div>
             )}
           </div>
-          <div className="s-line-clamp-2 s-h-10 s-overflow-hidden s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+          <TruncatedText className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
             {description}
-          </div>
+          </TruncatedText>
         </div>
       </Card>
     );

package/src/components/TruncatedText.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { Tooltip } from "@sparkle/components/Tooltip";
+import { cn } from "@sparkle/lib/utils";
+
+interface TruncatedTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: string | React.ReactNode;
+  lineClamp?: number;
+}
+
+export const TruncatedText: React.FC<TruncatedTextProps> = ({
+  children,
+  className,
+  lineClamp = 2,
+  ...props
+}) => {
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  const textRef = React.useRef<HTMLDivElement>(null);
+
+  // Check if content is actually truncated by comparing scroll height to
+  // client height
+  // This ensures we only show the tooltip when text is cut off by line-clamp-
+  React.useLayoutEffect(() => {
+    const element = textRef.current;
+    if (element) {
+      const isOverflowing = element.scrollHeight > element.clientHeight;
+      setIsTruncated(isOverflowing);
+    }
+  });
+
+  const textElement = (
+    <div
+      ref={textRef}
+      className={cn(
+        `s-line-clamp-${lineClamp} s-cursor-pointer s-select-none`,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+
+  if (isTruncated) {
+    return (
+      <Tooltip
+        trigger={textElement}
+        label={children}
+        tooltipTriggerAsChild={true}
+      />
+    );
+  }
+
+  return textElement;
+};

package/src/stories/ToolCard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import { ToolCard } from "@sparkle/components";
+import { Hoverable } from "@sparkle/components";
 import { BookOpenIcon, CommandLineIcon } from "@sparkle/icons/app";
 
 const meta: Meta<typeof ToolCard> = {
@@ -27,7 +28,24 @@ export const Examples = () => (
     <ToolCard
       icon={CommandLineIcon}
       label="Reasoning"
-      description="Agent can decide to trigger a reasoning model for complex tasks."
+      description={
+        <>
+          Agent can decide to trigger a reasoning model for complex tasks. Agent
+          can decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks.{" "}
+          <Hoverable
+            href="https://example.com/help"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="primary"
+          >
+            the docs
+          </Hoverable>
+        </>
+      }
       isSelected={true}
       canAdd={false}
     />