@agentero/design-system 0.24.5 → 0.25.1

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">193 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>3.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.2s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -5888,13 +5888,13 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
         
       </div>
     </div>
-    <div class="meta" title="./src/data-table/table.stories.tsx">components-table · ./src/data-table/table.stories.tsx</div>
+    <div class="meta" title="./src/table/table.stories.tsx">components-table · ./src/table/table.stories.tsx</div>
     <div>Table root that owns the scroll viewport and `&lt;table&gt;` element</div>
     <div class="hint">Low-level presentational table primitive: native `&lt;table&gt;` markup themed for
 scrolling, sticky rows, cell padding, dividers, hover, and expandable rows.
 For sorting/toolbar/pagination, prefer `DataTable`.</div>
     <div class="kv"><span class="chip">summary: Table root that owns the scroll viewport and `&lt;table&gt;` element</span><span class="chip">example: ```tsx
-import { Table } from &#39;@agentero/design-system/data-table&#39;;
+import { Table } from &#39;@agentero/design-system/table&#39;;
 
 &lt;Table.Root size=&quot;md&quot; sticky=&quot;head&quot;&gt;
   &lt;Table.Head&gt;
@@ -5929,7 +5929,7 @@ import { Table } from &#39;@agentero/design-system/data-table&#39;;
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">6 prop types</span>
             </div>
-            <pre><code>Component: src/data-table/index.ts::Table</code></pre>
+            <pre><code>Component: src/table/index.ts::Table</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>children?: ReactNode
 
@@ -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">11 stories</label>
         
         
       </div>
@@ -6650,6 +6650,31 @@ 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">

package/mcp/manifests/components.json

@@ -3670,198 +3670,6 @@
       ],
       "import": "import { Button, DataTable, DropdownMenu, Pagination, Table } from \"@agentero/design-system\";"
     },
-    "components-table": {
-      "id": "components-table",
-      "name": "Table.Root",
-      "path": "./src/data-table/table.stories.tsx",
-      "jsDocTags": {
-        "summary": [
-          "Table root that owns the scroll viewport and `<table>` element"
-        ],
-        "example": [
-          "```tsx\nimport { Table } from '@agentero/design-system/data-table';\n\n<Table.Root size=\"md\" sticky=\"head\">\n  <Table.Head>\n    <Table.Row>\n      <Table.Header>Name</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Jane Doe</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>\n```"
-        ]
-      },
-      "description": "Low-level presentational table primitive: native `<table>` markup themed for\nscrolling, sticky rows, cell padding, dividers, hover, and expandable rows.\nFor sorting/toolbar/pagination, prefer `DataTable`.",
-      "summary": "Table root that owns the scroll viewport and `<table>` element",
-      "reactComponentMeta": {
-        "displayName": "Table.Root",
-        "exportName": "Table",
-        "filePath": "/home/runner/work/design-system/design-system/src/data-table/index.ts",
-        "description": "The outermost part of the low-level presentational table primitive — a thin\nthemed wrapper over native `<table>` markup (scrolling, sticky rows, row\nsizing, dividers, hover, expandable rows). It renders the scroll viewport and\n`<table>`, shares variants with the other parts via context, and forwards\n`ref` to the scroll container. The viewport fills its (bounded) parent — cap\nheight by constraining that parent.\n\nCompose `Root` with `Head` / `Body` / `Row` / `Header` / `Cell`, plus\n`ExpandButton` / `ExpandedRow` and `RowActions`. For sorting, toolbar and\npagination, prefer `DataTable`, which is built on top of this.",
-        "jsDocTags": {
-          "summary": [
-            "Table root that owns the scroll viewport and `<table>` element"
-          ],
-          "example": [
-            "```tsx\nimport { Table } from '@agentero/design-system/data-table';\n\n<Table.Root size=\"md\" sticky=\"head\">\n  <Table.Head>\n    <Table.Row>\n      <Table.Header>Name</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Jane Doe</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>\n```"
-          ]
-        },
-        "props": {
-          "enclosed": {
-            "name": "enclosed",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "",
-            "defaultValue": null
-          },
-          "embed": {
-            "name": "embed",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "",
-            "defaultValue": null
-          },
-          "size": {
-            "name": "size",
-            "required": false,
-            "type": {
-              "name": "enum",
-              "raw": "\"sm\" | \"md\" | \"lg\"",
-              "value": [
-                {
-                  "value": "\"sm\""
-                },
-                {
-                  "value": "\"md\""
-                },
-                {
-                  "value": "\"lg\""
-                }
-              ]
-            },
-            "description": "",
-            "defaultValue": null
-          },
-          "sticky": {
-            "name": "sticky",
-            "required": false,
-            "type": {
-              "name": "enum",
-              "raw": "\"header\" | \"headerAndFooter\"",
-              "value": [
-                {
-                  "value": "\"header\""
-                },
-                {
-                  "value": "\"headerAndFooter\""
-                }
-              ]
-            },
-            "description": "",
-            "defaultValue": null
-          },
-          "ref": {
-            "name": "ref",
-            "required": false,
-            "type": {
-              "name": "Ref<HTMLDivElement> | undefined"
-            },
-            "description": "",
-            "defaultValue": null,
-            "parent": {
-              "name": "TableRootProps",
-              "fileName": "src/data-table/table.tsx"
-            },
-            "declarations": [
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/data-table/table.tsx"
-              }
-            ]
-          },
-          "children": {
-            "name": "children",
-            "required": false,
-            "type": {
-              "name": "ReactNode"
-            },
-            "description": "",
-            "defaultValue": null,
-            "parent": {
-              "name": "PropsWithChildren",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TypeLiteral",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              }
-            ]
-          }
-        }
-      },
-      "stories": [
-        {
-          "id": "components-table--default",
-          "name": "Default",
-          "snippet": "const Default = args => renderTable(args);",
-          "description": "Default args playground.",
-          "summary": "Default table"
-        },
-        {
-          "id": "components-table--sizes",
-          "name": "Sizes",
-          "snippet": "const Sizes = () => (\n    <div className=\"flex flex-col gap-6\">\n        {(['sm', 'md', 'lg'] as const).map(size => (\n            <div key={size} className=\"flex flex-col gap-1\">\n                <span className=\"text-xs text-text-default-base-tertiary\">size=&quot;{size}&quot;</span>\n                {renderTable({ size })}\n            </div>\n        ))}\n    </div>\n);",
-          "description": "The three row densities. `size` sets row min-height: sm 48 / md 64 / lg 88px.",
-          "summary": "size — sm / md / lg"
-        },
-        {
-          "id": "components-table--sticky-header",
-          "name": "Sticky Header",
-          "snippet": "const StickyHeader = args => renderTable(args);",
-          "description": "`sticky=\"header\"` pins the header while the body scrolls. Needs a bounded-height parent.",
-          "summary": "sticky=\"header\" with a scrolling body"
-        },
-        {
-          "id": "components-table--sticky-header-and-footer",
-          "name": "Sticky Header And Footer",
-          "snippet": "const StickyHeaderAndFooter = args => renderTable(args, { totals: true });",
-          "description": "`sticky=\"headerAndFooter\"` pins the header and the last body row (totals here).",
-          "summary": "sticky=\"headerAndFooter\" with a pinned totals row"
-        },
-        {
-          "id": "components-table--embed",
-          "name": "Embed",
-          "snippet": "const Embed = args => renderTable(args);",
-          "description": "`embed` drops the per-row dividers and tightens the edge gutter to 1rem.",
-          "summary": "embed — no row dividers, 1rem edge gutter"
-        },
-        {
-          "id": "components-table--enclosed",
-          "name": "Enclosed",
-          "snippet": "const Enclosed = args => renderTable(args);",
-          "description": "`enclosed` wraps the table in a bordered, rounded container — the standalone\n\"card\" look, as opposed to a full-bleed page table.",
-          "summary": "enclosed — bordered, rounded card container"
-        },
-        {
-          "id": "components-table--with-checkbox",
-          "name": "With Checkbox",
-          "snippet": "const WithCheckbox = args => renderTable(args, { checkbox: true });",
-          "description": "A leading checkbox column; checkbox cells collapse to zero width.",
-          "summary": "Selectable rows with a collapsing checkbox column"
-        },
-        {
-          "id": "components-table--with-row-actions",
-          "name": "With Row Actions",
-          "snippet": "const WithRowActions = args => renderTable(args, { actions: true });",
-          "description": "Hover-revealed row actions pinned to the trailing edge.",
-          "summary": "Hover-revealed row actions"
-        },
-        {
-          "id": "components-table--expandable-rows",
-          "name": "Expandable Rows",
-          "snippet": "const ExpandableRows = args => {\n    const Demo = () => {\n        const [openId, setOpenId] = useState<string | null>(ROWS[0]!.id);\n        return (\n            <Table.Root {...args}>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Header>\n                            <span className=\"sr-only\">Expand</span>\n                        </Table.Header>\n                        <Table.Header>Name</Table.Header>\n                        <Table.Header>Email</Table.Header>\n                        <Table.Header>Role</Table.Header>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    {ROWS.slice(0, 4).map(row => (\n                        <Fragment key={row.id}>\n                            <Table.Row>\n                                <Table.Cell>\n                                    <Table.ExpandButton\n                                        isExpanded={openId === row.id}\n                                        toggleExpanded={() => setOpenId(openId === row.id ? null : row.id)}\n                                        aria-label={`Toggle ${row.name}`}\n                                    />\n                                </Table.Cell>\n                                <Table.Cell className=\"font-bold\">{row.name}</Table.Cell>\n                                <Table.Cell className=\"text-text-default-base-secondary\">{row.email}</Table.Cell>\n                                <Table.Cell>{row.role}</Table.Cell>\n                            </Table.Row>\n                            {openId === row.id && (\n                                <Table.ExpandedRow>\n                                    <Table.Cell colSpan={4}>\n                                        <div className=\"py-2 text-text-default-base-secondary\">\n                                            Extended details for {row.name} — {row.amount} lifetime value.\n                                        </div>\n                                    </Table.Cell>\n                                </Table.ExpandedRow>\n                            )}\n                        </Fragment>\n                    ))}\n                </Table.Body>\n            </Table.Root>\n        );\n    };\n    return <Demo />;\n};",
-          "description": "`Table.ExpandButton` toggles a `Table.ExpandedRow` detail panel under its row.",
-          "summary": "Expandable rows with a detail panel"
-        }
-      ],
-      "import": "import { Button, Table } from \"@agentero/design-system\";\nimport { Fragment } from \"react\";"
-    },
     "components-divider": {
       "id": "components-divider",
       "name": "Divider",
@@ -5634,6 +5442,198 @@
       ],
       "import": "import { Switch } from \"@agentero/design-system\";"
     },
+    "components-table": {
+      "id": "components-table",
+      "name": "Table.Root",
+      "path": "./src/table/table.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Table root that owns the scroll viewport and `<table>` element"
+        ],
+        "example": [
+          "```tsx\nimport { Table } from '@agentero/design-system/table';\n\n<Table.Root size=\"md\" sticky=\"head\">\n  <Table.Head>\n    <Table.Row>\n      <Table.Header>Name</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Jane Doe</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>\n```"
+        ]
+      },
+      "description": "Low-level presentational table primitive: native `<table>` markup themed for\nscrolling, sticky rows, cell padding, dividers, hover, and expandable rows.\nFor sorting/toolbar/pagination, prefer `DataTable`.",
+      "summary": "Table root that owns the scroll viewport and `<table>` element",
+      "reactComponentMeta": {
+        "displayName": "Table.Root",
+        "exportName": "Table",
+        "filePath": "/home/runner/work/design-system/design-system/src/table/index.ts",
+        "description": "The outermost part of the low-level presentational table primitive — a thin\nthemed wrapper over native `<table>` markup (scrolling, sticky rows, row\nsizing, dividers, hover, expandable rows). It renders the scroll viewport and\n`<table>`, shares variants with the other parts via context, and forwards\n`ref` to the scroll container. The viewport fills its (bounded) parent — cap\nheight by constraining that parent.\n\nCompose `Root` with `Head` / `Body` / `Row` / `Header` / `Cell`, plus\n`ExpandButton` / `ExpandedRow` and `RowActions`. For sorting, toolbar and\npagination, prefer `DataTable`, which is built on top of this.",
+        "jsDocTags": {
+          "summary": [
+            "Table root that owns the scroll viewport and `<table>` element"
+          ],
+          "example": [
+            "```tsx\nimport { Table } from '@agentero/design-system/table';\n\n<Table.Root size=\"md\" sticky=\"head\">\n  <Table.Head>\n    <Table.Row>\n      <Table.Header>Name</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Jane Doe</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>\n```"
+          ]
+        },
+        "props": {
+          "enclosed": {
+            "name": "enclosed",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": null
+          },
+          "embed": {
+            "name": "embed",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": null
+          },
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "",
+            "defaultValue": null
+          },
+          "sticky": {
+            "name": "sticky",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"header\" | \"headerAndFooter\"",
+              "value": [
+                {
+                  "value": "\"header\""
+                },
+                {
+                  "value": "\"headerAndFooter\""
+                }
+              ]
+            },
+            "description": "",
+            "defaultValue": null
+          },
+          "ref": {
+            "name": "ref",
+            "required": false,
+            "type": {
+              "name": "Ref<HTMLDivElement> | undefined"
+            },
+            "description": "",
+            "defaultValue": null,
+            "parent": {
+              "name": "TableRootProps",
+              "fileName": "src/table/table.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/table/table.tsx"
+              }
+            ]
+          },
+          "children": {
+            "name": "children",
+            "required": false,
+            "type": {
+              "name": "ReactNode"
+            },
+            "description": "",
+            "defaultValue": null,
+            "parent": {
+              "name": "PropsWithChildren",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-table--default",
+          "name": "Default",
+          "snippet": "const Default = args => renderTable(args);",
+          "description": "Default args playground.",
+          "summary": "Default table"
+        },
+        {
+          "id": "components-table--sizes",
+          "name": "Sizes",
+          "snippet": "const Sizes = () => (\n    <div className=\"flex flex-col gap-6\">\n        {(['sm', 'md', 'lg'] as const).map(size => (\n            <div key={size} className=\"flex flex-col gap-1\">\n                <span className=\"text-xs text-text-default-base-tertiary\">size=&quot;{size}&quot;</span>\n                {renderTable({ size })}\n            </div>\n        ))}\n    </div>\n);",
+          "description": "The three row densities. `size` sets row min-height: sm 48 / md 64 / lg 88px.",
+          "summary": "size — sm / md / lg"
+        },
+        {
+          "id": "components-table--sticky-header",
+          "name": "Sticky Header",
+          "snippet": "const StickyHeader = args => renderTable(args);",
+          "description": "`sticky=\"header\"` pins the header while the body scrolls. Needs a bounded-height parent.",
+          "summary": "sticky=\"header\" with a scrolling body"
+        },
+        {
+          "id": "components-table--sticky-header-and-footer",
+          "name": "Sticky Header And Footer",
+          "snippet": "const StickyHeaderAndFooter = args => renderTable(args, { totals: true });",
+          "description": "`sticky=\"headerAndFooter\"` pins the header and the last body row (totals here).",
+          "summary": "sticky=\"headerAndFooter\" with a pinned totals row"
+        },
+        {
+          "id": "components-table--embed",
+          "name": "Embed",
+          "snippet": "const Embed = args => renderTable(args);",
+          "description": "`embed` drops the per-row dividers and tightens the edge gutter to 1rem.",
+          "summary": "embed — no row dividers, 1rem edge gutter"
+        },
+        {
+          "id": "components-table--enclosed",
+          "name": "Enclosed",
+          "snippet": "const Enclosed = args => renderTable(args);",
+          "description": "`enclosed` wraps the table in a bordered, rounded container — the standalone\n\"card\" look, as opposed to a full-bleed page table.",
+          "summary": "enclosed — bordered, rounded card container"
+        },
+        {
+          "id": "components-table--with-checkbox",
+          "name": "With Checkbox",
+          "snippet": "const WithCheckbox = args => renderTable(args, { checkbox: true });",
+          "description": "A leading checkbox column; checkbox cells collapse to zero width.",
+          "summary": "Selectable rows with a collapsing checkbox column"
+        },
+        {
+          "id": "components-table--with-row-actions",
+          "name": "With Row Actions",
+          "snippet": "const WithRowActions = args => renderTable(args, { actions: true });",
+          "description": "Hover-revealed row actions pinned to the trailing edge.",
+          "summary": "Hover-revealed row actions"
+        },
+        {
+          "id": "components-table--expandable-rows",
+          "name": "Expandable Rows",
+          "snippet": "const ExpandableRows = args => {\n    const Demo = () => {\n        const [openId, setOpenId] = useState<string | null>(ROWS[0]!.id);\n        return (\n            <Table.Root {...args}>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Header>\n                            <span className=\"sr-only\">Expand</span>\n                        </Table.Header>\n                        <Table.Header>Name</Table.Header>\n                        <Table.Header>Email</Table.Header>\n                        <Table.Header>Role</Table.Header>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    {ROWS.slice(0, 4).map(row => (\n                        <Fragment key={row.id}>\n                            <Table.Row>\n                                <Table.Cell>\n                                    <Table.ExpandButton\n                                        isExpanded={openId === row.id}\n                                        toggleExpanded={() => setOpenId(openId === row.id ? null : row.id)}\n                                        aria-label={`Toggle ${row.name}`}\n                                    />\n                                </Table.Cell>\n                                <Table.Cell className=\"font-bold\">{row.name}</Table.Cell>\n                                <Table.Cell className=\"text-text-default-base-secondary\">{row.email}</Table.Cell>\n                                <Table.Cell>{row.role}</Table.Cell>\n                            </Table.Row>\n                            {openId === row.id && (\n                                <Table.ExpandedRow>\n                                    <Table.Cell colSpan={4}>\n                                        <div className=\"py-2 text-text-default-base-secondary\">\n                                            Extended details for {row.name} — {row.amount} lifetime value.\n                                        </div>\n                                    </Table.Cell>\n                                </Table.ExpandedRow>\n                            )}\n                        </Fragment>\n                    ))}\n                </Table.Body>\n            </Table.Root>\n        );\n    };\n    return <Demo />;\n};",
+          "description": "`Table.ExpandButton` toggles a `Table.ExpandedRow` detail panel under its row.",
+          "summary": "Expandable rows with a detail panel"
+        }
+      ],
+      "import": "import { Button, Table } from \"@agentero/design-system\";\nimport { Fragment } from \"react\";"
+    },
     "components-tabs": {
       "id": "components-tabs",
       "name": "Tabs.Root",
@@ -6185,6 +6185,13 @@
           "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--colors",
           "name": "Colors",
@@ -6980,6 +6987,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3663
+    "durationMs": 4234
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.24.5",
+	"version": "0.25.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -97,6 +97,10 @@
 			"types": "./src/switch/index.d.ts",
 			"import": "./src/switch/index.js"
 		},
+		"./table": {
+			"types": "./src/table/index.d.ts",
+			"import": "./src/table/index.js"
+		},
 		"./tabs": {
 			"types": "./src/tabs/index.d.ts",
 			"import": "./src/tabs/index.js"

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
 import { RowData, Table as TableType, TableOptions } from '@tanstack/react-table';
 import { PaginationProps } from '../pagination';
-import { TableRootProps } from './table';
+import { TableRootProps } from '../table';
 /**
  * Shape a column's `meta` may carry; spread onto the `<th>`/`<td>`.
  * Right alignment of the header content is derived from either `style.textAlign: 'right'`

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

@@ -1,51 +1,51 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Pagination as t } from "../pagination/pagination.js";
-import { IconArrowUpward as n, IconSwapVert as r } from "./icons.js";
-import { TableBody as i, TableCell as a, TableHead as o, TableHeader as s, TableRoot as c, TableRow as l } from "./table.js";
-import { tv as u } from "tailwind-variants";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Fragment as m, createContext as h, use as g, useRef as _ } from "react";
-import { flexRender as v, getCoreRowModel as y, useReactTable as b } from "@tanstack/react-table";
+import { Table as t } from "../table/index.js";
+import { Pagination as n } from "../pagination/pagination.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";
+import { Fragment as l, createContext as u, use as d, useRef as f } from "react";
+import { flexRender as p, getCoreRowModel as m, useReactTable as h } from "@tanstack/react-table";
 //#region src/data-table/data-table.tsx
-var x = h(null), S = () => {
-	let e = g(x);
+var g = u(null), _ = () => {
+	let e = d(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, C = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ f(x, {
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ s(g, {
 	value: {
-		table: b({
+		table: h({
 			...a,
-			getCoreRowModel: y()
+			getCoreRowModel: m()
 		}),
 		isLoading: t,
-		scrollRef: _(null),
+		scrollRef: f(null),
 		onRowClick: n,
 		rowHref: r,
 		linkComponent: i
 	},
-	children: /* @__PURE__ */ f("div", {
+	children: /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-root",
 		className: "flex min-h-0 flex-1 flex-col",
 		children: e
 	})
 });
-C.displayName = "DataTable.Root";
-var w = ({ children: e }) => /* @__PURE__ */ f("div", {
+v.displayName = "DataTable.Root";
+var y = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-toolbar",
 	role: "toolbar",
 	className: "flex gap-2 border-b border-border-default-base-primary px-4 py-3",
 	children: e
 });
-w.displayName = "DataTable.ToolBar";
-var T = u({
+y.displayName = "DataTable.ToolBar";
+var b = a({
 	base: "size-4 transition-transform duration-200",
 	variants: { direction: {
 		asc: "",
 		desc: "rotate-180",
 		false: ""
 	} }
-}), E = u({
+}), x = a({
 	base: "flex w-full appearance-none items-center bg-transparent p-0 text-left [font:inherit]",
 	variants: {
 		canSort: {
@@ -57,96 +57,96 @@ var T = u({
 			left: "justify-start"
 		}
 	}
-}), D = (e) => !!e.closest("a, button, [role=\"menu\"]"), O = ({ children: t = /* @__PURE__ */ f(k, {}), size: u = "md", sticky: h = "header", embed: g = !0, enclosed: _ = !1 }) => {
-	let { table: y, isLoading: b, scrollRef: x, onRowClick: C, rowHref: w, linkComponent: O } = S(), A = y.getAllColumns().length;
-	return /* @__PURE__ */ f("div", {
+}), 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 }) => {
+	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", b && "opacity-50"),
-		children: /* @__PURE__ */ p(c, {
-			size: u,
-			sticky: h,
-			embed: g,
-			enclosed: _,
-			ref: x,
-			children: [/* @__PURE__ */ f(o, { children: y.getHeaderGroups().map((e) => /* @__PURE__ */ f(l, { children: e.headers.map((e) => {
-				let t = e.column.columnDef.meta, i = e.column.getCanSort(), a = e.column.getIsSorted(), o = t?.style?.textAlign === "right" || t?.className?.includes("text-right") ? "right" : "left", c = e.isPlaceholder ? null : /* @__PURE__ */ p(d, { children: [v(e.column.columnDef.header, e.getContext()), i && /* @__PURE__ */ f("span", {
+		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", h && "opacity-50"),
+		children: /* @__PURE__ */ c(t.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", {
 					className: "size-4",
-					children: a ? /* @__PURE__ */ f(n, { className: T({ direction: a }) }) : /* @__PURE__ */ f(r, { className: "size-4" })
+					children: l ? /* @__PURE__ */ s(r, { className: b({ direction: l }) }) : /* @__PURE__ */ s(i, { className: "size-4" })
 				})] });
-				return /* @__PURE__ */ f(s, {
-					...t,
-					"aria-sort": i ? a === "asc" ? "ascending" : a === "desc" ? "descending" : "none" : void 0,
-					children: i ? /* @__PURE__ */ f("button", {
+				return /* @__PURE__ */ s(t.Header, {
+					...n,
+					"aria-sort": a ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
+					children: a ? /* @__PURE__ */ s("button", {
 						type: "button",
-						className: E({
+						className: x({
 							canSort: !0,
-							align: o
+							align: u
 						}),
 						onClick: e.column.getToggleSortingHandler(),
 						title: e.column.getNextSortingOrder() === "asc" ? "Sort ascending" : e.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort",
-						children: c
-					}) : /* @__PURE__ */ f("div", {
-						className: E({
+						children: d
+					}) : /* @__PURE__ */ s("div", {
+						className: x({
 							canSort: !1,
-							align: o
+							align: u
 						}),
-						children: c
+						children: d
 					})
 				}, e.id);
-			}) }, e.id)) }), /* @__PURE__ */ f(i, { children: y.getRowModel().rows.length ? y.getRowModel().rows.map((t) => {
-				let n = w?.(t.original), r = !!C || !!n;
-				return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(l, {
-					className: e("has-aria-expanded:bg-bg-default-base-secondary", r && "cursor-pointer"),
-					onClick: r ? (e) => {
-						D(e.target) || !e.currentTarget.contains(e.target) || (C ? C(t.original) : n && e.currentTarget.querySelector("[data-row-link]")?.click());
+			}) }, 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, {
+					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());
 					} : void 0,
-					children: t.getVisibleCells().map((e, t) => {
-						let r = e.column.columnDef.meta;
-						return /* @__PURE__ */ p(a, {
-							...r,
-							children: [t === 0 && n && /* @__PURE__ */ f(O, {
-								href: n,
+					children: n.getVisibleCells().map((e, n) => {
+						let i = e.column.columnDef.meta;
+						return /* @__PURE__ */ c(t.Cell, {
+							...i,
+							children: [n === 0 && r && /* @__PURE__ */ s(C, {
+								href: r,
 								"data-row-link": !0,
 								className: "hidden",
 								tabIndex: -1,
 								"aria-hidden": "true"
-							}), v(e.column.columnDef.cell, e.getContext())]
+							}), p(e.column.columnDef.cell, e.getContext())]
 						}, e.id);
 					})
-				}) }, t.id);
-			}) : b ? null : /* @__PURE__ */ f(l, { children: /* @__PURE__ */ f(a, {
-				colSpan: A,
-				children: /* @__PURE__ */ f("div", {
+				}) }, n.id);
+			}) : h ? null : /* @__PURE__ */ s(t.Row, { children: /* @__PURE__ */ s(t.Cell, {
+				colSpan: T,
+				children: /* @__PURE__ */ s("div", {
 					"data-slot": "table-empty-state",
 					className: "whitespace-normal",
-					children: t
+					children: n
 				})
 			}) }) })]
 		})
 	});
 };
-O.displayName = "DataTable.Table";
-var k = () => /* @__PURE__ */ f("div", {
+C.displayName = "DataTable.Table";
+var w = () => /* @__PURE__ */ s("div", {
 	className: "mb-6 flex flex-col items-center gap-4",
-	children: /* @__PURE__ */ f("div", {
+	children: /* @__PURE__ */ s("div", {
 		className: "text-lg",
-		children: /* @__PURE__ */ f("b", { children: "No results." })
+		children: /* @__PURE__ */ s("b", { children: "No results." })
 	})
-}), A = ({ children: e }) => /* @__PURE__ */ f("div", {
+}), T = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-pagination",
 	className: "flex justify-end border-t border-border-default-base-primary px-6 py-3",
 	children: e
 });
-A.displayName = "DataTable.Footer";
-var j = (e) => {
-	let { scrollRef: n } = S();
-	return /* @__PURE__ */ f(t, {
+T.displayName = "DataTable.Footer";
+var E = (e) => {
+	let { scrollRef: t } = _();
+	return /* @__PURE__ */ s(n, {
 		...e,
-		onPageChange: (t) => {
-			n.current?.scrollTo({ top: 0 }), e.onPageChange(t);
+		onPageChange: (n) => {
+			t.current?.scrollTo({ top: 0 }), e.onPageChange(n);
 		}
 	});
 };
-j.displayName = "DataTable.Pagination";
+E.displayName = "DataTable.Pagination";
 //#endregion
-export { j as DataTablePagination, O as DataTableTable, A as Footer, C as Root, w as ToolBar, S as useDataTable };
+export { E as DataTablePagination, C as DataTableTable, T as Footer, v as Root, y as ToolBar, _ as useDataTable };

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

@@ -16,11 +16,3 @@ export declare const IconArrowUpward: (props: SVGProps<SVGSVGElement>) => import
  * @summary 24px swap-vert icon used as the sortable (unsorted) indicator
  */
 export declare const IconSwapVert: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Downward chevron glyph used by the row expand/collapse button. Rotates 180°
- * when its row is expanded (driven by `data-state=open`). The fill follows
- * `currentColor` so it inherits the button's text color token.
- *
- * @summary 24px chevron-down icon used by the row expand button
- */
-export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/data-table/icons.js

@@ -22,17 +22,6 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 		fill: "currentColor",
 		d: "M9.163 12.644a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534v-6.53L6.096 7.68a.68.68 0 0 1-.507.207.767.767 0 0 1-.77-.751q0-.303.233-.535l3.47-3.47a.8.8 0 0 1 .297-.197 1.001 1.001 0 0 1 .678 0 .8.8 0 0 1 .3.198l3.493 3.494a.7.7 0 0 1 .22.517.788.788 0 0 1-.763.752.7.7 0 0 1-.526-.225L9.914 5.364v6.54q0 .315-.216.527a.73.73 0 0 1-.535.213m5.682 8.47a1 1 0 0 1-.341-.059.8.8 0 0 1-.3-.197l-3.495-3.495a.7.7 0 0 1-.22-.517.788.788 0 0 1 .763-.752.7.7 0 0 1 .527.225l2.307 2.308v-6.54q0-.315.216-.528a.73.73 0 0 1 .535-.213q.318 0 .534.216a.73.73 0 0 1 .215.534v6.531l2.318-2.317a.68.68 0 0 1 .507-.208.767.767 0 0 1 .77.752q0 .302-.233.535l-3.47 3.469a.8.8 0 0 1-.296.198 1 1 0 0 1-.337.057"
 	})
-}), r = (t) => /* @__PURE__ */ e("svg", {
-	width: "24",
-	height: "24",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...t,
-	children: /* @__PURE__ */ e("path", {
-		fill: "currentColor",
-		d: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256"
-	})
 });
 //#endregion
-export { t as IconArrowUpward, r as IconKeyboardArrowDown, n as IconSwapVert };
+export { t as IconArrowUpward, n as IconSwapVert };

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

@@ -1,10 +1,12 @@
-export { tableRecipe } from './table';
-export type { TableRootProps } from './table';
 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('./table').TableRootProps>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('.').TableRootProps>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Head: {
@@ -57,6 +59,86 @@ export declare const Table: {
         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<{
@@ -157,10 +239,10 @@ export declare const DataTable: {
     };
     Table: {
         ({ children, size, sticky, embed, enclosed }: {
-            size?: import('./table').TableRootProps["size"];
-            sticky?: import('./table').TableRootProps["sticky"];
-            embed?: import('./table').TableRootProps["embed"];
-            enclosed?: import('./table').TableRootProps["enclosed"];
+            size?: import('.').TableRootProps["size"];
+            sticky?: import('.').TableRootProps["sticky"];
+            embed?: import('.').TableRootProps["embed"];
+            enclosed?: import('.').TableRootProps["enclosed"];
         } & {
             children?: import('react').ReactNode | undefined;
         }): import("react/jsx-runtime").JSX.Element;

package/src/data-table/index.js

@@ -1,22 +1,13 @@
-import { TableBody as e, TableCell as t, TableExpandButton as n, TableExpandedRow as r, TableHead as i, TableHeader as a, TableRoot as o, TableRow as s, TableRowActions as c, tableRecipe as l } from "./table.js";
-import { DataTablePagination as u, DataTableTable as d, Footer as f, Root as p, ToolBar as m, useDataTable as h } from "./data-table.js";
+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";
 //#region src/data-table/index.ts
-var g = {
-	Root: o,
-	Head: i,
-	Body: e,
-	Row: s,
-	Header: a,
-	Cell: t,
-	ExpandButton: n,
-	ExpandedRow: r,
-	RowActions: c
-}, _ = {
-	Root: p,
-	ToolBar: m,
-	Table: d,
-	Footer: f,
-	Pagination: u
+var c = t, l = e, u = {
+	Root: a,
+	ToolBar: o,
+	Table: r,
+	Footer: i,
+	Pagination: n
 };
 //#endregion
-export { _ as DataTable, g as Table, l as tableRecipe, h as useDataTable };
+export { u as DataTable, c as Table, l as tableRecipe, s as useDataTable };

package/src/table/icons.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Downward chevron glyph used by the row expand/collapse button. Rotates 180°
+ * when its row is expanded (driven by `data-state=open`). The fill follows
+ * `currentColor` so it inherits the button's text color token.
+ *
+ * @summary 24px chevron-down icon used by the row expand button
+ */
+export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/table/icons.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/table/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", {
+		fill: "currentColor",
+		d: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256"
+	})
+});
+//#endregion
+export { t as IconKeyboardArrowDown };

package/src/table/index.d.ts

@@ -0,0 +1,57 @@
+export { tableRecipe } from './table';
+export type { TableRootProps } from './table';
+export declare const Table: {
+    Root: {
+        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('./table').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;
+    };
+};

package/src/table/index.js

@@ -0,0 +1,15 @@
+import { Body as e, Cell as t, ExpandButton as n, ExpandedRow as r, Head as i, Header as a, Root as o, Row as s, RowActions as c, tableRecipe as l } from "./table.js";
+//#region src/table/index.ts
+var u = {
+	Root: o,
+	Head: i,
+	Body: e,
+	Row: s,
+	Header: a,
+	Cell: t,
+	ExpandButton: n,
+	ExpandedRow: r,
+	RowActions: c
+};
+//#endregion
+export { u as Table, l as tableRecipe };

package/src/{data-table → table}/table.d.ts

@@ -100,7 +100,7 @@ export type TableRootProps = TableVariants & {
  *
  * @example
  * ```tsx
- * import { Table } from '@agentero/design-system/data-table';
+ * import { Table } from '@agentero/design-system/table';
  *
  * <Table.Root size="md" sticky="head">
  *   <Table.Head>
@@ -116,7 +116,7 @@ export type TableRootProps = TableVariants & {
  * </Table.Root>
  * ```
  */
-export declare const TableRoot: {
+export declare const Root: {
     ({ children, ref, ...variants }: PropsWithChildren<TableRootProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -125,7 +125,7 @@ export declare const TableRoot: {
  *
  * @summary `<thead>` wrapper for header rows
  */
-export declare const TableHead: {
+export declare const Head: {
     ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -134,7 +134,7 @@ export declare const TableHead: {
  *
  * @summary `<tbody>` wrapper
  */
-export declare const TableBody: {
+export declare const Body: {
     ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -144,7 +144,7 @@ export declare const TableBody: {
  *
  * @summary Table row element
  */
-export declare const TableRow: {
+export declare const Row: {
     ({ className, ...props }: ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -153,7 +153,7 @@ export declare const TableRow: {
  *
  * @summary Header cell element
  */
-export declare const TableHeader: {
+export declare const Header: {
     ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -162,11 +162,11 @@ export declare const TableHeader: {
  *
  * @summary Data cell element
  */
-export declare const TableCell: {
+export declare const Cell: {
     ({ className, ...props }: PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-type TableExpandButtonProps = {
+type ExpandButtonProps = {
     toggleExpanded: () => void;
     isExpanded: boolean;
 } & ButtonProps;
@@ -175,8 +175,8 @@ type TableExpandButtonProps = {
  *
  * @summary Expand/collapse toggle button for an expandable row
  */
-export declare const TableExpandButton: {
-    ({ toggleExpanded, isExpanded, className, ...props }: TableExpandButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandButton: {
+    ({ toggleExpanded, isExpanded, className, ...props }: ExpandButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -185,7 +185,7 @@ export declare const TableExpandButton: {
  *
  * @summary Detail row shown under an expanded parent row
  */
-export declare const TableExpandedRow: {
+export declare const ExpandedRow: {
     ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -195,7 +195,7 @@ export declare const TableExpandedRow: {
  *
  * @summary Hover-revealed row action cluster
  */
-export declare const TableRowActions: {
+export declare const RowActions: {
     ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/{data-table → table}/table.js

@@ -5,7 +5,7 @@ import { IconKeyboardArrowDown as n } from "./icons.js";
 import { tv as r } from "tailwind-variants";
 import { jsx as i } from "react/jsx-runtime";
 import { createContext as a, use as o } from "react";
-//#region src/data-table/table.tsx
+//#region src/table/table.tsx
 var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = r({
 	slots: {
 		root: ["flex min-h-0 flex-1 flex-col overflow-hidden", "[--table-cell-padding-inline:1.25rem] [--table-cell-padding-inline-ends:1.25rem]"],
@@ -169,4 +169,4 @@ var E = r({ base: [
 });
 D.displayName = "Table.RowActions";
 //#endregion
-export { g as TableBody, S as TableCell, w as TableExpandButton, T as TableExpandedRow, h as TableHead, b as TableHeader, m as TableRoot, v as TableRow, D as TableRowActions, c as tableRecipe };
+export { g as Body, S as Cell, w as ExpandButton, T as ExpandedRow, h as Head, b as Header, m as Root, v as Row, D as RowActions, c as tableRecipe };

package/src/tag/tag.js

@@ -10,7 +10,7 @@ var s = t({
 		"rounded-md border border-solid border-transparent px-2",
 		"font-normal leading-normal 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 whitespace-nowrap" },
 		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 };