@agentero/design-system 0.25.2 → 0.25.4

package/mcp/manifests/components.html

@@ -594,7 +594,7 @@
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>3.0s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.3s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2019,7 +2019,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Button</h2>
       <div class="badges">
-        <label for="c-4-components-button-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-4-components-button-props" class="badge ok as-toggle">13 prop types</label>
         
         <label for="c-4-components-button-stories" class="badge ok as-toggle">11 stories</label>
         
@@ -2061,7 +2061,7 @@ without Button binding to any particular framework.</div>
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">12 prop types</span>
+              <span class="badge ok">13 prop types</span>
             </div>
             <pre><code>Component: src/button/button.tsx::Button</code></pre>
             <pre><code>Props:</code></pre>
@@ -2139,6 +2139,18 @@ ref?: Ref&lt;HTMLButtonElement | HTMLAnchorElement&gt; | undefined
  */
 rounded?: boolean
 
+/**
+ * When `true`, the button dips to 97% while held so the control answers the
+ * pointer instead of only changing color. Defaults to `false`.
+ * 
+ * Has no effect with `variant=&quot;link&quot;` (scaling bare text with no padding or
+ * background reads as a wobble) or while the button is disabled or loading,
+ * including the `asChild` anchor form, which stays keyboard-focusable and
+ * would otherwise dip on Enter. The dip is gated behind `motion-safe`, so it
+ * disappears under `prefers-reduced-motion`.
+ */
+scaleOnPress?: boolean
+
 /**
  * Control size. Defaults to `&#39;sm&#39;`.
  * - `xs` (24px) — dense toolbars, compact inline actions.
@@ -2186,8 +2198,8 @@ variant?: &quot;link&quot; | &quot;ghost&quot; | &quot;primary&quot; | &quot;sec
               </div>
               <div>Default args playground for Button</div>
               <div class="hint">Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`,
-`disabled`, and `rounded` from the Controls panel to explore every visual
-combination of the Button.</div>
+`disabled`, `rounded`, and `scaleOnPress` from the Controls panel to explore
+every visual combination of the Button.</div>
               <pre><code>const Default = () =&gt; &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot;&gt;{TEXT}&lt;/Button&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -2412,31 +2424,37 @@ router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s L
                 <span class="ex-name">Pressed</span>
                 <span class="badge ok">story ok</span>
               </div>
-              <div>Press feedback dips the button, excluding `link` and disabled</div>
-              <div class="hint">Buttons dip to 97% while held so the control answers the pointer rather than
-only changing color. Press and hold one below to feel it — the effect is
-deliberately small, and if a quick click draws the eye it is too strong.
+              <div>Opt-in press feedback via `scaleOnPress`, excluding `link` and disabled</div>
+              <div class="hint">With `scaleOnPress`, a button dips to 97% while held so the control answers
+the pointer rather than only changing color. Press and hold one below to
+feel it — the effect is deliberately small, and if a quick click draws the
+eye it is too strong. It is off by default: pass the prop where the extra
+feedback is wanted.
 
-`variant=&quot;link&quot;` is excluded: it has no padding or background, so scaling
-bare text reads as a wobble rather than a button being pushed. Disabled
-buttons are excluded too, including the `asChild` anchor form, which stays
-keyboard-focusable and would otherwise dip on Enter. The whole effect is
-gated behind `motion-safe`, so it disappears under `prefers-reduced-motion`.</div>
+`variant=&quot;link&quot;` is excluded even with the prop set: it has no padding or
+background, so scaling bare text reads as a wobble rather than a button
+being pushed. Disabled buttons are excluded too, including the `asChild`
+anchor form, which stays keyboard-focusable and would otherwise dip on
+Enter. The whole effect is gated behind `motion-safe`, so it disappears
+under `prefers-reduced-motion`.</div>
               <pre><code>const Pressed = () =&gt; (
     &lt;Stack&gt;
         &lt;Row&gt;
             {NON_LINK_VARIANTS.map(variant =&gt; (
-                &lt;Button key={variant} variant={variant}&gt;
+                &lt;Button key={variant} variant={variant} scaleOnPress&gt;
                     Press {variant}
                 &lt;/Button&gt;
             ))}
         &lt;/Row&gt;
         &lt;Row&gt;
-            &lt;Button variant=&quot;link&quot;&gt;Link stays still&lt;/Button&gt;
-            &lt;Button variant=&quot;primary&quot; disabled&gt;
+            &lt;Button variant=&quot;primary&quot;&gt;Opted out stays still&lt;/Button&gt;
+            &lt;Button variant=&quot;link&quot; scaleOnPress&gt;
+                Link stays still
+            &lt;/Button&gt;
+            &lt;Button variant=&quot;primary&quot; scaleOnPress disabled&gt;
                 Disabled stays still
             &lt;/Button&gt;
-            &lt;Button asChild variant=&quot;secondary&quot; disabled&gt;
+            &lt;Button asChild variant=&quot;secondary&quot; scaleOnPress disabled&gt;
                 &lt;a href=&quot;/dashboard&quot;&gt;Disabled anchor stays still&lt;/a&gt;
             &lt;/Button&gt;
         &lt;/Row&gt;

package/mcp/manifests/components.json

@@ -1248,7 +1248,7 @@
         "displayName": "Button",
         "exportName": "Button",
         "filePath": "/home/runner/work/design-system/design-system/src/button/button.tsx",
-        "description": "Button is the design system's primary actionable control. Use it for any\ninteraction that triggers behavior, submits a form, or navigates the user.\nBy default Button renders a `<button>`; pass `asChild` to render its single\nchild element as the underlying tag instead — Button merges its styles,\n`className`, `ref`, and props onto whatever the consumer nests. This keeps\nthe design system framework-agnostic: route a plain `<a>`, a Next.js\n`<Link>`, a React Router `<Link>`, or any custom element through the same\nvisual treatment.\n\nPick `variant` to express hierarchy (`primary` for the main CTA,\n`secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis\ninline actions, `link` for text-only actions). Use `status=\"danger\"` for\ndestructive actions and `loading` to block interaction while async work\nresolves.\n\nDo **not** use Button for toggle states (prefer a Switch or ToggleButton),\nfor passive decorative anchors without action intent (use a plain `<a>`),\nor with `variant=\"link\"` when loading or when the button has no text\nchildren — both combinations log a dev-only warning (silent in production).",
+        "description": "Button is the design system's primary actionable control. Use it for any\ninteraction that triggers behavior, submits a form, or navigates the user.\nBy default Button renders a `<button>`; pass `asChild` to render its single\nchild element as the underlying tag instead — Button merges its styles,\n`className`, `ref`, and props onto whatever the consumer nests. This keeps\nthe design system framework-agnostic: route a plain `<a>`, a Next.js\n`<Link>`, a React Router `<Link>`, or any custom element through the same\nvisual treatment.\n\nPick `variant` to express hierarchy (`primary` for the main CTA,\n`secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis\ninline actions, `link` for text-only actions). Use `status=\"danger\"` for\ndestructive actions and `loading` to block interaction while async work\nresolves. Press feedback is opt-in: set `scaleOnPress` to make the button\ndip while held.\n\nDo **not** use Button for toggle states (prefer a Switch or ToggleButton),\nfor passive decorative anchors without action intent (use a plain `<a>`),\nor with `variant=\"link\"` when loading or when the button has no text\nchildren — both combinations log a dev-only warning (silent in production).",
         "jsDocTags": {
           "summary": [
             "Primary actionable control; renders a `<button>` or, with `asChild`, any nested element"
@@ -1513,6 +1513,25 @@
               }
             ]
           },
+          "scaleOnPress": {
+            "name": "scaleOnPress",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "When `true`, the button dips to 97% while held so the control answers the\npointer instead of only changing color. Defaults to `false`.\n\nHas no effect with `variant=\"link\"` (scaling bare text with no padding or\nbackground reads as a wobble) or while the button is disabled or loading,\nincluding the `asChild` anchor form, which stays keyboard-focusable and\nwould otherwise dip on Enter. The dip is gated behind `motion-safe`, so it\ndisappears under `prefers-reduced-motion`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonBaseProps",
+              "fileName": "src/button/button.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/button/button.tsx"
+              }
+            ]
+          },
           "ref": {
             "name": "ref",
             "required": false,
@@ -1558,7 +1577,7 @@
           "id": "components-button--default",
           "name": "Default",
           "snippet": "const Default = () => <Button variant=\"primary\" size=\"sm\">{TEXT}</Button>;",
-          "description": "Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`,\n`disabled`, and `rounded` from the Controls panel to explore every visual\ncombination of the Button.",
+          "description": "Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`,\n`disabled`, `rounded`, and `scaleOnPress` from the Controls panel to explore\nevery visual combination of the Button.",
           "summary": "Default args playground for Button"
         },
         {
@@ -1627,9 +1646,9 @@
         {
           "id": "components-button--pressed",
           "name": "Pressed",
-          "snippet": "const Pressed = () => (\n    <Stack>\n        <Row>\n            {NON_LINK_VARIANTS.map(variant => (\n                <Button key={variant} variant={variant}>\n                    Press {variant}\n                </Button>\n            ))}\n        </Row>\n        <Row>\n            <Button variant=\"link\">Link stays still</Button>\n            <Button variant=\"primary\" disabled>\n                Disabled stays still\n            </Button>\n            <Button asChild variant=\"secondary\" disabled>\n                <a href=\"/dashboard\">Disabled anchor stays still</a>\n            </Button>\n        </Row>\n    </Stack>\n);",
-          "description": "Buttons dip to 97% while held so the control answers the pointer rather than\nonly changing color. Press and hold one below to feel it — the effect is\ndeliberately small, and if a quick click draws the eye it is too strong.\n\n`variant=\"link\"` is excluded: it has no padding or background, so scaling\nbare text reads as a wobble rather than a button being pushed. Disabled\nbuttons are excluded too, including the `asChild` anchor form, which stays\nkeyboard-focusable and would otherwise dip on Enter. The whole effect is\ngated behind `motion-safe`, so it disappears under `prefers-reduced-motion`.",
-          "summary": "Press feedback dips the button, excluding `link` and disabled"
+          "snippet": "const Pressed = () => (\n    <Stack>\n        <Row>\n            {NON_LINK_VARIANTS.map(variant => (\n                <Button key={variant} variant={variant} scaleOnPress>\n                    Press {variant}\n                </Button>\n            ))}\n        </Row>\n        <Row>\n            <Button variant=\"primary\">Opted out stays still</Button>\n            <Button variant=\"link\" scaleOnPress>\n                Link stays still\n            </Button>\n            <Button variant=\"primary\" scaleOnPress disabled>\n                Disabled stays still\n            </Button>\n            <Button asChild variant=\"secondary\" scaleOnPress disabled>\n                <a href=\"/dashboard\">Disabled anchor stays still</a>\n            </Button>\n        </Row>\n    </Stack>\n);",
+          "description": "With `scaleOnPress`, a button dips to 97% while held so the control answers\nthe pointer rather than only changing color. Press and hold one below to\nfeel it — the effect is deliberately small, and if a quick click draws the\neye it is too strong. It is off by default: pass the prop where the extra\nfeedback is wanted.\n\n`variant=\"link\"` is excluded even with the prop set: it has no padding or\nbackground, so scaling bare text reads as a wobble rather than a button\nbeing pushed. Disabled buttons are excluded too, including the `asChild`\nanchor form, which stays keyboard-focusable and would otherwise dip on\nEnter. The whole effect is gated behind `motion-safe`, so it disappears\nunder `prefers-reduced-motion`.",
+          "summary": "Opt-in press feedback via `scaleOnPress`, excluding `link` and disabled"
         }
       ],
       "import": "import { Button } from \"@agentero/design-system\";"
@@ -6994,6 +7013,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3008
+    "durationMs": 3272
   }
 }

package/package.json

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

package/src/button/button.d.ts

@@ -2,8 +2,8 @@ import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
 /**
  * Style recipe for Button using tailwind-variants. Single-slot recipe whose
  * variants (`variant`, `size`, `status`, `hasOnlyIcon`, `disabled`, `rounded`,
- * `align`, `fitContent`) plus compound variants drive destructive and disabled
- * treatments. All colors route through design-system tokens defined in
+ * `align`, `fitContent`, `scaleOnPress`) plus compound variants drive
+ * destructive and disabled treatments. All colors route through design-system tokens defined in
  * `themes/base.css`.
  *
  * Exported for advanced composition (e.g., styling a link or custom element
@@ -12,6 +12,9 @@ import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
  * @summary tailwind-variants recipe backing the Button component styles
  */
 export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
+    scaleOnPress: {
+        true: string[];
+    };
     variant: {
         primary: string[];
         secondary: string[];
@@ -47,6 +50,9 @@ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
         true: string;
     };
 }, undefined, string[], {
+    scaleOnPress: {
+        true: string[];
+    };
     variant: {
         primary: string[];
         secondary: string[];
@@ -82,6 +88,9 @@ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
         true: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
+    scaleOnPress: {
+        true: string[];
+    };
     variant: {
         primary: string[];
         secondary: string[];
@@ -201,6 +210,17 @@ type ButtonBaseProps = {
      * its content. Useful for inline actions inside tight containers.
      */
     fitContent?: boolean;
+    /**
+     * When `true`, the button dips to 97% while held so the control answers the
+     * pointer instead of only changing color. Defaults to `false`.
+     *
+     * Has no effect with `variant="link"` (scaling bare text with no padding or
+     * background reads as a wobble) or while the button is disabled or loading,
+     * including the `asChild` anchor form, which stays keyboard-focusable and
+     * would otherwise dip on Enter. The dip is gated behind `motion-safe`, so it
+     * disappears under `prefers-reduced-motion`.
+     */
+    scaleOnPress?: boolean;
     /**
      * Ref forwarded to the underlying element. Typed as a union covering both
      * `<button>` and `<a>` because `asChild` lets consumers render either tag
@@ -245,7 +265,8 @@ export type ButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonEleme
  * `secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis
  * inline actions, `link` for text-only actions). Use `status="danger"` for
  * destructive actions and `loading` to block interaction while async work
- * resolves.
+ * resolves. Press feedback is opt-in: set `scaleOnPress` to make the button
+ * dip while held.
  *
  * Do **not** use Button for toggle states (prefer a Switch or ToggleButton),
  * for passive decorative anchors without action intent (use a plain `<a>`),
@@ -275,5 +296,5 @@ export type ButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonEleme
  *   Delete account
  * </Button>
  */
-export declare const Button: ({ children, asChild, variant, size, status, loading, rounded, align, fitContent, disabled, iconOnly, ref, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ children, asChild, variant, size, status, loading, rounded, align, fitContent, scaleOnPress, disabled, iconOnly, ref, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/button/button.js

@@ -11,8 +11,6 @@ var c = t({
 		"bg-transparent no-underline",
 		"border border-solid border-transparent",
 		"transition-[background-color,border-color,color,transform] duration-150",
-		"motion-safe:active:[transform:scale(0.97)]",
-		"motion-safe:active:ease-out-expo",
 		"[-webkit-tap-highlight-color:transparent]",
 		"[&_svg]:[flex:0_0_fit-content]",
 		"[&_svg_path[fill]]:fill-current",
@@ -22,6 +20,7 @@ var c = t({
 		"focus-visible:outline-focus-ring-button-primary"
 	],
 	variants: {
+		scaleOnPress: { true: ["motion-safe:active:[transform:scale(0.97)]", "motion-safe:active:ease-out-expo"] },
 		variant: {
 			primary: [
 				"bg-bg-button-primary-enable border-bg-button-primary-enable",
@@ -241,6 +240,7 @@ var c = t({
 		}
 	],
 	defaultVariants: {
+		scaleOnPress: !1,
 		variant: "primary",
 		size: "sm",
 		align: "center"
@@ -249,28 +249,29 @@ var c = t({
 	"aria-label": "loading",
 	role: "status",
 	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
-}), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
-	let C = u ? !!y : i.toArray(t).every((e) => a(e)), w = v || m;
-	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && a(t) && i.toArray(t.props.children).some((e) => !a(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
-	let T = e(c({
+}), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, scaleOnPress: v, disabled: y, iconOnly: b, ref: x, className: S, ...C }) => {
+	let w = u ? !!b : i.toArray(t).every((e) => a(e)), T = y || m;
+	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), w && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && b && a(t) && i.toArray(t.props.children).some((e) => !a(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
+	let E = e(c({
 		variant: d,
 		size: f,
-		hasOnlyIcon: C,
-		disabled: w,
+		hasOnlyIcon: w,
+		disabled: T,
 		status: p,
 		rounded: h,
 		align: g,
-		fitContent: _
-	}), x);
+		fitContent: _,
+		scaleOnPress: v
+	}), S);
 	return /* @__PURE__ */ r(u ? o : "button", {
 		"data-slot": "button",
 		...u ? {
-			"aria-disabled": w || void 0,
-			"data-disabled": w || void 0
-		} : { disabled: w },
-		...S,
-		className: T,
-		ref: b,
+			"aria-disabled": T || void 0,
+			"data-disabled": T || void 0
+		} : { disabled: T },
+		...C,
+		className: E,
+		ref: x,
 		children: [m && /* @__PURE__ */ n(l, {}), u ? /* @__PURE__ */ n(s, { children: t }) : t]
 	});
 };

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/pagination/pagination.js

@@ -17,9 +17,7 @@ var l = o({
 			"min-w-8 h-8 px-1",
 			"border border-solid border-transparent",
 			"bg-bg-button-ghost-enable text-text-button-ghost-enable",
-			"transition-[background-color,border-color,color,transform] duration-150",
-			"motion-safe:active:[transform:scale(0.97)]",
-			"motion-safe:active:ease-out-expo",
+			"transition-[background-color,border-color,color] duration-150",
 			"disabled:pointer-events-none disabled:opacity-30",
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-[0.0625rem] focus-visible:outline-focus-ring-button-primary",
 			"hover:not-aria-[current=page]:border-border-button-secondary-enable hover:not-aria-[current=page]:shadow-1",

package/src/table/index.d.ts

@@ -40,6 +40,7 @@ export declare const Table: {
             rounded?: boolean;
             align?: "center" | "start" | "end" | "justify";
             fitContent?: boolean;
+            scaleOnPress?: boolean;
             ref?: import('react').Ref<HTMLButtonElement | HTMLAnchorElement>;
         } & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
             asChild?: boolean;