@agentero/design-system 0.26.1 → 0.26.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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">204 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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">203 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>5.6s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2019,9 +2019,9 @@ 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">13 prop types</label>
+        <label for="c-4-components-button-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-4-components-button-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-4-components-button-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -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">13 prop types</span>
+              <span class="badge ok">12 prop types</span>
             </div>
             <pre><code>Component: src/button/button.tsx::Button</code></pre>
             <pre><code>Props:</code></pre>
@@ -2139,18 +2139,6 @@ 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.
@@ -2198,8 +2186,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`, `rounded`, and `scaleOnPress` from the Controls panel to explore
-every visual combination of the Button.</div>
+`disabled`, and `rounded` 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">
@@ -2417,48 +2405,6 @@ router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s L
             &lt;/a&gt;
         &lt;/Button&gt;
     &lt;/Row&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Pressed</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              <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 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} scaleOnPress&gt;
-                    Press {variant}
-                &lt;/Button&gt;
-            ))}
-        &lt;/Row&gt;
-        &lt;Row&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; scaleOnPress disabled&gt;
-                &lt;a href=&quot;/dashboard&quot;&gt;Disabled anchor stays still&lt;/a&gt;
-            &lt;/Button&gt;
-        &lt;/Row&gt;
-    &lt;/Stack&gt;
 );</code></pre>
             </div>
         </div>

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. 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).",
+        "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).",
         "jsDocTags": {
           "summary": [
             "Primary actionable control; renders a `<button>` or, with `asChild`, any nested element"
@@ -1513,25 +1513,6 @@
               }
             ]
           },
-          "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,
@@ -1577,7 +1558,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`, `rounded`, and `scaleOnPress` from the Controls panel to explore\nevery visual combination of the 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.",
           "summary": "Default args playground for Button"
         },
         {
@@ -1642,13 +1623,6 @@
           "snippet": "const AsChild = () => (\n    <Row>\n        <Button asChild variant=\"primary\">\n            <a href=\"/dashboard\">Go to dashboard</a>\n        </Button>\n        <Button asChild variant=\"secondary\">\n            <a href=\"https://agentero.com\" target=\"_blank\" rel=\"noreferrer\">\n                Visit Agentero\n            </a>\n        </Button>\n    </Row>\n);",
           "description": "`asChild` renders Button's styles on the nested child element rather than\non a `<button>` — the child receives Button's `className`, `ref`, and\nmerged props via Radix's `Slot` primitive. Use it to turn any anchor or\nframework `Link` into a Button without coupling the design system to a\nrouter. In app code, swap the plain `<a>` below for your framework's Link\n(`next/link`, `react-router`, `@tanstack/react-router`, etc.).",
           "summary": "`asChild` composes Button's styles onto any element"
-        },
-        {
-          "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} 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\";"
@@ -7287,6 +7261,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 5599
+    "durationMs": 4038
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.26.1",
+	"version": "0.26.3",
 	"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,7 +2,7 @@ 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`, `scaleOnPress`) plus compound variants drive
+ * `align`, `fitContent`) plus compound variants drive
  * destructive and disabled treatments. All colors route through design-system tokens defined in
  * `themes/base.css`.
  *
@@ -12,9 +12,6 @@ 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[];
@@ -50,9 +47,6 @@ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
         true: string;
     };
 }, undefined, string[], {
-    scaleOnPress: {
-        true: string[];
-    };
     variant: {
         primary: string[];
         secondary: string[];
@@ -88,9 +82,6 @@ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
         true: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    scaleOnPress: {
-        true: string[];
-    };
     variant: {
         primary: string[];
         secondary: string[];
@@ -210,17 +201,6 @@ 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
@@ -265,8 +245,7 @@ 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. Press feedback is opt-in: set `scaleOnPress` to make the button
- * dip while held.
+ * resolves.
  *
  * Do **not** use Button for toggle states (prefer a Switch or ToggleButton),
  * for passive decorative anchors without action intent (use a plain `<a>`),
@@ -296,5 +275,5 @@ export type ButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonEleme
  *   Delete account
  * </Button>
  */
-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 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 {};

package/src/button/button.js

@@ -10,7 +10,7 @@ var c = t({
 		"font-semibold rounded-md cursor-pointer",
 		"bg-transparent no-underline",
 		"border border-solid border-transparent",
-		"transition-[background-color,border-color,color,transform] duration-150",
+		"transition-[background-color,border-color,color] duration-150",
 		"[-webkit-tap-highlight-color:transparent]",
 		"[&_svg]:[flex:0_0_fit-content]",
 		"[&_svg_path[fill]]:fill-current",
@@ -20,7 +20,6 @@ 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",
@@ -52,8 +51,7 @@ var c = t({
 				"px-0 underline",
 				"[text-underline-offset:var(--text-underline-offset)]",
 				"text-text-button-link-enable",
-				"[&_svg]:fill-icon-button-link-enable",
-				"motion-safe:active:[transform:none]"
+				"[&_svg]:fill-icon-button-link-enable"
 			]
 		},
 		size: {
@@ -64,7 +62,7 @@ var c = t({
 		},
 		status: { danger: "focus-visible:outline-focus-ring-button-destructive" },
 		hasOnlyIcon: { true: "aspect-square px-0 min-w-[unset]" },
-		disabled: { true: "cursor-not-allowed pointer-events-none motion-safe:active:[transform:none]" },
+		disabled: { true: "cursor-not-allowed pointer-events-none" },
 		rounded: { true: "rounded-full" },
 		align: {
 			center: "justify-center",
@@ -240,7 +238,6 @@ var c = t({
 		}
 	],
 	defaultVariants: {
-		scaleOnPress: !1,
 		variant: "primary",
 		size: "sm",
 		align: "center"
@@ -249,29 +246,28 @@ 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: _, 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({
+}), 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({
 		variant: d,
 		size: f,
-		hasOnlyIcon: w,
-		disabled: T,
+		hasOnlyIcon: C,
+		disabled: w,
 		status: p,
 		rounded: h,
 		align: g,
-		fitContent: _,
-		scaleOnPress: v
-	}), S);
+		fitContent: _
+	}), x);
 	return /* @__PURE__ */ r(u ? o : "button", {
 		"data-slot": "button",
 		...u ? {
-			"aria-disabled": T || void 0,
-			"data-disabled": T || void 0
-		} : { disabled: T },
-		...C,
-		className: E,
-		ref: x,
+			"aria-disabled": w || void 0,
+			"data-disabled": w || void 0
+		} : { disabled: w },
+		...S,
+		className: T,
+		ref: b,
 		children: [m && /* @__PURE__ */ n(l, {}), u ? /* @__PURE__ */ n(s, { children: t }) : t]
 	});
 };

package/src/command/command.js

@@ -5,8 +5,8 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Command as i } from "cmdk";
 //#region src/command/command.tsx
 var a = t({ slots: {
-	root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-secondary"],
-	search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-secondary"],
+	root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-primary"],
+	search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-primary"],
 	searchIcon: "shrink-0 pointer-events-none [&>path]:fill-icon-default-base-tertiary",
 	input: ["w-full border-none bg-transparent text-sm text-text-default-base-primary outline-none", "placeholder:text-text-default-base-tertiary"],
 	list: ["max-h-65.25 overflow-y-auto rounded-md px-1 py-2 outline-none scroll-py-2", "not-has-[[cmdk-item]]:py-0"],

package/src/table/index.d.ts

@@ -40,7 +40,6 @@ 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;