@agentero/design-system 0.25.1 → 0.25.3

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">193 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>4.2s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.7s</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">11 stories</label>
+        <label for="c-21-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6675,6 +6675,24 @@ icon with a long label clips the label and leaves the icon at full size.</div>
             &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

@@ -6192,6 +6192,13 @@
           "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",
@@ -6987,6 +6994,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4234
+    "durationMs": 3698
   }
 }

package/package.json

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

package/src/data-table/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Table as t } from "../table/index.js";
-import { Pagination as n } from "../pagination/pagination.js";
+import { Pagination as t } from "../pagination/pagination.js";
+import { Table as n } from "../table/index.js";
 import { IconArrowUpward as r, IconSwapVert as i } from "./icons.js";
 import { tv as a } from "tailwind-variants";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -57,24 +57,24 @@ var b = a({
 			left: "justify-start"
 		}
 	}
-}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: n = /* @__PURE__ */ s(w, {}), size: a = "md", sticky: u = "header", embed: d = !0, enclosed: f = !1 }) => {
+}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: t = /* @__PURE__ */ s(w, {}), size: a = "md", sticky: u = "header", embed: d = !0, enclosed: f = !1 }) => {
 	let { table: m, isLoading: h, scrollRef: g, onRowClick: v, rowHref: y, linkComponent: C } = _(), T = m.getAllColumns().length;
 	return /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-loading-overlay",
 		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", h && "opacity-50"),
-		children: /* @__PURE__ */ c(t.Root, {
+		children: /* @__PURE__ */ c(n.Root, {
 			size: a,
 			sticky: u,
 			embed: d,
 			enclosed: f,
 			ref: g,
-			children: [/* @__PURE__ */ s(t.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ s(t.Row, { children: e.headers.map((e) => {
-				let n = e.column.columnDef.meta, a = e.column.getCanSort(), l = e.column.getIsSorted(), u = n?.style?.textAlign === "right" || n?.className?.includes("text-right") ? "right" : "left", d = e.isPlaceholder ? null : /* @__PURE__ */ c(o, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ s(n.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ s(n.Row, { children: e.headers.map((e) => {
+				let t = e.column.columnDef.meta, a = e.column.getCanSort(), l = e.column.getIsSorted(), u = t?.style?.textAlign === "right" || t?.className?.includes("text-right") ? "right" : "left", d = e.isPlaceholder ? null : /* @__PURE__ */ c(o, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ s("span", {
 					className: "size-4",
 					children: l ? /* @__PURE__ */ s(r, { className: b({ direction: l }) }) : /* @__PURE__ */ s(i, { className: "size-4" })
 				})] });
-				return /* @__PURE__ */ s(t.Header, {
-					...n,
+				return /* @__PURE__ */ s(n.Header, {
+					...t,
 					"aria-sort": a ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
 					children: a ? /* @__PURE__ */ s("button", {
 						type: "button",
@@ -93,18 +93,18 @@ var b = a({
 						children: d
 					})
 				}, e.id);
-			}) }, e.id)) }), /* @__PURE__ */ s(t.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((n) => {
-				let r = y?.(n.original), i = !!v || !!r;
-				return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t.Row, {
+			}) }, e.id)) }), /* @__PURE__ */ s(n.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((t) => {
+				let r = y?.(t.original), i = !!v || !!r;
+				return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(n.Row, {
 					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
 					onClick: i ? (e) => {
-						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(n.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
+						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
-					children: n.getVisibleCells().map((e, n) => {
+					children: t.getVisibleCells().map((e, t) => {
 						let i = e.column.columnDef.meta;
-						return /* @__PURE__ */ c(t.Cell, {
+						return /* @__PURE__ */ c(n.Cell, {
 							...i,
-							children: [n === 0 && r && /* @__PURE__ */ s(C, {
+							children: [t === 0 && r && /* @__PURE__ */ s(C, {
 								href: r,
 								"data-row-link": !0,
 								className: "hidden",
@@ -113,13 +113,13 @@ var b = a({
 							}), p(e.column.columnDef.cell, e.getContext())]
 						}, e.id);
 					})
-				}) }, n.id);
-			}) : h ? null : /* @__PURE__ */ s(t.Row, { children: /* @__PURE__ */ s(t.Cell, {
+				}) }, t.id);
+			}) : h ? null : /* @__PURE__ */ s(n.Row, { children: /* @__PURE__ */ s(n.Cell, {
 				colSpan: T,
 				children: /* @__PURE__ */ s("div", {
 					"data-slot": "table-empty-state",
 					className: "whitespace-normal",
-					children: n
+					children: t
 				})
 			}) }) })]
 		})
@@ -139,11 +139,11 @@ var w = () => /* @__PURE__ */ s("div", {
 });
 T.displayName = "DataTable.Footer";
 var E = (e) => {
-	let { scrollRef: t } = _();
-	return /* @__PURE__ */ s(n, {
+	let { scrollRef: n } = _();
+	return /* @__PURE__ */ s(t, {
 		...e,
-		onPageChange: (n) => {
-			t.current?.scrollTo({ top: 0 }), e.onPageChange(n);
+		onPageChange: (t) => {
+			n.current?.scrollTo({ top: 0 }), e.onPageChange(t);
 		}
 	});
 };

package/src/data-table/index.d.ts

@@ -1,144 +1,5 @@
 export { useDataTable } from './data-table';
 export type { DataTableColumnMeta, PaginationState } from './data-table';
-/**
- * @deprecated Import from `@agentero/design-system/table` instead — that entry
- * point carries no `@tanstack/react-table` dependency.
- */
-export declare const Table: {
-    Root: {
-        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('.').TableRootProps>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Head: {
-        ({ children, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ children, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Row: {
-        ({ className, ...props }: import('react').ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Header: {
-        ({ className, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Cell: {
-        ({ className, ...props }: import('react').PropsWithChildren<import('react').TdHTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    ExpandButton: {
-        ({ toggleExpanded, isExpanded, className, ...props }: {
-            toggleExpanded: () => void;
-            isExpanded: boolean;
-        } & {
-            children?: import('react').ReactNode;
-            variant?: import('../button').ButtonVariantType;
-            size?: import('../button').ButtonSizeType;
-            status?: "danger";
-            loading?: boolean;
-            disabled?: boolean;
-            iconOnly?: boolean;
-            rounded?: boolean;
-            align?: "center" | "start" | "end" | "justify";
-            fitContent?: boolean;
-            ref?: import('react').Ref<HTMLButtonElement | HTMLAnchorElement>;
-        } & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
-            asChild?: boolean;
-        }): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    ExpandedRow: {
-        ({ className, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableRowElement>>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    RowActions: {
-        ({ children }: import('react').PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
-/**
- * @deprecated Import from `@agentero/design-system/table` instead.
- */
-export declare const tableRecipe: import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: {};
-        md: {};
-        lg: {};
-    };
-    embed: {
-        true: {
-            root: string;
-        };
-    };
-    enclosed: {
-        true: {
-            root: string;
-        };
-    };
-    sticky: {
-        header: {};
-        headerAndFooter: {};
-    };
-}, {
-    root: string[];
-    scroll: string;
-    table: string;
-}, undefined, {
-    size: {
-        sm: {};
-        md: {};
-        lg: {};
-    };
-    embed: {
-        true: {
-            root: string;
-        };
-    };
-    enclosed: {
-        true: {
-            root: string;
-        };
-    };
-    sticky: {
-        header: {};
-        headerAndFooter: {};
-    };
-}, {
-    root: string[];
-    scroll: string;
-    table: string;
-}, import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: {};
-        md: {};
-        lg: {};
-    };
-    embed: {
-        true: {
-            root: string;
-        };
-    };
-    enclosed: {
-        true: {
-            root: string;
-        };
-    };
-    sticky: {
-        header: {};
-        headerAndFooter: {};
-    };
-}, {
-    root: string[];
-    scroll: string;
-    table: string;
-}, undefined, unknown, unknown, undefined>>;
-/**
- * @deprecated Import from `@agentero/design-system/table` instead.
- */
-export type { TableRootProps } from '../table';
 export declare const DataTable: {
     Root: {
         <TData extends import('@tanstack/table-core').RowData>({ children, isLoading, onRowClick, rowHref, linkComponent, ...tableOptions }: import('react').PropsWithChildren<{
@@ -239,10 +100,10 @@ export declare const DataTable: {
     };
     Table: {
         ({ children, size, sticky, embed, enclosed }: {
-            size?: import('.').TableRootProps["size"];
-            sticky?: import('.').TableRootProps["sticky"];
-            embed?: import('.').TableRootProps["embed"];
-            enclosed?: import('.').TableRootProps["enclosed"];
+            size?: import('../table').TableRootProps["size"];
+            sticky?: import('../table').TableRootProps["sticky"];
+            embed?: import('../table').TableRootProps["embed"];
+            enclosed?: import('../table').TableRootProps["enclosed"];
         } & {
             children?: import('react').ReactNode | undefined;
         }): import("react/jsx-runtime").JSX.Element;

package/src/data-table/index.js

@@ -1,13 +1,11 @@
-import { tableRecipe as e } from "../table/table.js";
-import { Table as t } from "../table/index.js";
-import { DataTablePagination as n, DataTableTable as r, Footer as i, Root as a, ToolBar as o, useDataTable as s } from "./data-table.js";
+import { DataTablePagination as e, DataTableTable as t, Footer as n, Root as r, ToolBar as i, useDataTable as a } from "./data-table.js";
 //#region src/data-table/index.ts
-var c = t, l = e, u = {
-	Root: a,
-	ToolBar: o,
-	Table: r,
-	Footer: i,
-	Pagination: n
+var o = {
+	Root: r,
+	ToolBar: i,
+	Table: t,
+	Footer: n,
+	Pagination: e
 };
 //#endregion
-export { u as DataTable, c as Table, l as tableRecipe, s as useDataTable };
+export { o as DataTable, a as useDataTable };

package/src/tag/tag.js

@@ -8,7 +8,7 @@ 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]:shrink-0"
 	],
@@ -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 whitespace-nowrap" },
+		truncate: { true: "max-w-full min-w-0 overflow-hidden" },
 		interactive: { true: "cursor-pointer" },
 		hasOnlyIcon: { true: "justify-center px-0" }
 	},