@agentero/design-system 0.25.0 → 0.25.2

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">25 components ok</span><span class="filter-pill ok" aria-disabled="true">192 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">25 components ok</span><span class="filter-pill ok" aria-disabled="true">194 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>2.9s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -6371,7 +6371,7 @@ tablist role is announced.</div>
       <div class="badges">
         <label for="c-21-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-21-components-tag-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-21-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6650,6 +6650,49 @@ Icons are tinted with each color&#39;s `icon-tag-*` token.</div>
             &lt;/Row&gt;
         ))}
     &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Truncate</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Long labels capped at the container width with an ellipsis</div>
+              <div class="hint">`truncate` caps the Tag at its container&#39;s width and ellipsizes the label.
+The ellipsis sits on a wrapper around each text run, so a Tag that mixes an
+icon with a long label clips the label and leaves the icon at full size.</div>
+              <pre><code>const Truncate = () =&gt; (
+    &lt;Stack&gt;
+        &lt;div style={{ width: &#39;9rem&#39; }}&gt;
+            &lt;Tag truncate title=&quot;Travel insurance limited lines producer&quot;&gt;
+                Travel insurance limited lines producer
+            &lt;/Tag&gt;
+        &lt;/div&gt;
+        &lt;div style={{ width: &#39;9rem&#39; }}&gt;
+            &lt;Tag truncate color=&quot;informative&quot;&gt;
+                &lt;IconAdd /&gt;
+                Travel insurance limited lines producer
+            &lt;/Tag&gt;
+        &lt;/div&gt;
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Overflows Without Wrapping</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>A too-narrow container overflows a single-line Tag; the label never wraps</div>
+              <div class="hint">Without `truncate`, a Tag never wraps its label onto multiple lines — a
+container narrower than the label just gets overflowed by a single-line
+Tag that keeps its intrinsic width, instead of breaking the label across
+lines and spilling out of the fixed-height box.</div>
+              <pre><code>const OverflowsWithoutWrapping = () =&gt; (
+    &lt;div style={{ width: &#39;9rem&#39;, border: &#39;1px dashed gray&#39; }}&gt;
+        &lt;Tag title=&quot;Travel insurance limited lines producer&quot;&gt;
+            Travel insurance limited lines producer
+        &lt;/Tag&gt;
+    &lt;/div&gt;
 );</code></pre>
             </div>
             <div class="note ok">

package/mcp/manifests/components.json

@@ -6185,6 +6185,20 @@
           "description": "Every variant for every color rendered with a leading and trailing icon.\nIcons are tinted with each color's `icon-tag-*` token.",
           "summary": "Variant × color grid with icons"
         },
+        {
+          "id": "components-tag--truncate",
+          "name": "Truncate",
+          "snippet": "const Truncate = () => (\n    <Stack>\n        <div style={{ width: '9rem' }}>\n            <Tag truncate title=\"Travel insurance limited lines producer\">\n                Travel insurance limited lines producer\n            </Tag>\n        </div>\n        <div style={{ width: '9rem' }}>\n            <Tag truncate color=\"informative\">\n                <IconAdd />\n                Travel insurance limited lines producer\n            </Tag>\n        </div>\n    </Stack>\n);",
+          "description": "`truncate` caps the Tag at its container's width and ellipsizes the label.\nThe ellipsis sits on a wrapper around each text run, so a Tag that mixes an\nicon with a long label clips the label and leaves the icon at full size.",
+          "summary": "Long labels capped at the container width with an ellipsis"
+        },
+        {
+          "id": "components-tag--overflows-without-wrapping",
+          "name": "Overflows Without Wrapping",
+          "snippet": "const OverflowsWithoutWrapping = () => (\n    <div style={{ width: '9rem', border: '1px dashed gray' }}>\n        <Tag title=\"Travel insurance limited lines producer\">\n            Travel insurance limited lines producer\n        </Tag>\n    </div>\n);",
+          "description": "Without `truncate`, a Tag never wraps its label onto multiple lines — a\ncontainer narrower than the label just gets overflowed by a single-line\nTag that keeps its intrinsic width, instead of breaking the label across\nlines and spilling out of the fixed-height box.",
+          "summary": "A too-narrow container overflows a single-line Tag; the label never wraps"
+        },
         {
           "id": "components-tag--colors",
           "name": "Colors",
@@ -6980,6 +6994,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 2944
+    "durationMs": 3008
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.25.0",
+	"version": "0.25.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/tag/tag.js

@@ -8,9 +8,9 @@ var s = t({
 	base: [
 		"inline-flex w-fit min-w-fit items-center gap-1",
 		"rounded-md border border-solid border-transparent px-2",
-		"font-normal leading-normal no-underline",
+		"font-normal leading-normal whitespace-nowrap no-underline",
 		"transition-[background-color,opacity] duration-200",
-		"[&_svg]:size-3.5"
+		"[&_svg]:size-3.5 [&_svg]:shrink-0"
 	],
 	variants: {
 		color: {
@@ -35,7 +35,7 @@ var s = t({
 			md: "h-8 text-sm"
 		},
 		pill: { true: "rounded-full" },
-		truncate: { true: "max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" },
+		truncate: { true: "max-w-full min-w-0 overflow-hidden" },
 		interactive: { true: "cursor-pointer" },
 		hasOnlyIcon: { true: "justify-center px-0" }
 	},
@@ -106,23 +106,26 @@ var s = t({
 		variant: "tertiary",
 		size: "sm"
 	}
-}), c = ({ children: t, asChild: c, color: l, variant: u, size: d, pill: f, truncate: p, className: m, ref: h, ...g }) => {
-	let _ = c ? a : "span", v = c && i(t) ? t.props.children : t, y = r.toArray(v), b = e(s({
-		color: l,
-		variant: u,
-		size: d,
-		pill: f,
-		truncate: p,
-		interactive: c,
+}), c = (e) => r.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n("span", {
+	className: "min-w-0 truncate",
+	children: e
+}) : e), l = ({ children: t, asChild: l, color: u, variant: d, size: f, pill: p, truncate: m, className: h, ref: g, ..._ }) => {
+	let v = l ? a : "span", y = r.toArray(l && i(t) ? t.props.children : t), b = e(s({
+		color: u,
+		variant: d,
+		size: f,
+		pill: p,
+		truncate: m,
+		interactive: l,
 		hasOnlyIcon: y.length > 0 && y.every(i)
-	}), m);
-	return /* @__PURE__ */ n(_, {
+	}), h), x = m && !l ? c(t) : t;
+	return /* @__PURE__ */ n(v, {
 		"data-slot": "tag",
-		...g,
+		..._,
 		className: b,
-		ref: h,
-		children: c ? /* @__PURE__ */ n(o, { children: t }) : t
+		ref: g,
+		children: l ? /* @__PURE__ */ n(o, { children: t }) : x
 	});
 };
 //#endregion
-export { c as Tag, s as tagRecipe };
+export { l as Tag, s as tagRecipe };