@agentero/design-system 0.25.3 → 0.26.0

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\";"
@@ -4286,6 +4305,274 @@
       ],
       "import": "import { Avatar, Button, HoverCard } from \"@agentero/design-system\";"
     },
+    "components-input": {
+      "id": "components-input",
+      "name": "Input",
+      "path": "./src/input/input.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Base single-line text control, unaware of fields and form libraries"
+        ],
+        "example": [
+          "<Label htmlFor=\"email\">Email</Label>\n<Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />",
+          "<Input id=\"email\" aria-invalid aria-describedby=\"email-error\" />\n<span id=\"email-error\">Enter a valid email address.</span>"
+        ]
+      },
+      "description": "Input is the base single-line text control. It is intentionally unaware of\nform fields and form libraries: `id`, `aria-invalid` and `aria-describedby`\nare plain props, set by a field wrapper or by hand.\n\nThere is no `status` prop. Mark the control `aria-invalid` and the\ndestructive border follows, so the styling can never disagree with what\nassistive technology announces.",
+      "summary": "Base single-line text control, unaware of fields and form libraries",
+      "reactComponentMeta": {
+        "displayName": "Input",
+        "exportName": "Input",
+        "filePath": "/home/runner/work/design-system/design-system/src/input/input.tsx",
+        "description": "Input is the design system's base single-line text control. Reach for it\nwhenever a form collects free text, and pair it with\n[Label](?path=/docs/components-label--docs) so the control has an accessible\nname.\n\nIt is deliberately self-contained: it renders the props it is given and\nknows nothing about form fields, form libraries, or surrounding layout.\nWiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so\na field wrapper can inject them and standalone usage can set them by hand.\nThere is no `status` prop — mark the control `aria-invalid` and the\ndestructive border follows.\n\nDo not use Input for multi-line text; that is TextArea's job. It also has no\nslots for leading or trailing addons — an input with a currency prefix or a\nunit suffix belongs in an input group, not here.",
+        "jsDocTags": {
+          "summary": [
+            "Base single-line text control, unaware of fields and form libraries"
+          ],
+          "example": [
+            "<Label htmlFor=\"email\">Email</Label>\n<Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />",
+            "<Input id=\"email\" aria-invalid aria-describedby=\"email-error\" />\n<span id=\"email-error\">Enter a valid email address.</span>"
+          ]
+        },
+        "props": {
+          "aria-invalid": {
+            "name": "aria-invalid",
+            "required": false,
+            "type": {
+              "name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
+            },
+            "description": "Indicates the entered value does not conform to the format expected by the application.\nSet this when the value fails validation: it drives the destructive border\nand is what assistive technology announces. Point `aria-describedby` at\nthe error message so the two are read together.",
+            "defaultValue": null,
+            "parent": {
+              "name": "AriaAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "AriaAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "type": {
+            "name": "type",
+            "required": false,
+            "type": {
+              "name": "HTMLInputTypeAttribute | undefined"
+            },
+            "description": "Native input type. Picks the on-screen keyboard on touch devices and the\nbrowser's own parsing, so set it even when you validate yourself.\nDefaults to `'text'`. Multi-line text is not one of the options — that is\na TextArea.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "InputHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "disabled": {
+            "name": "disabled",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Blocks interaction, greys the control out and drops its shadow. The value\nis not submitted. When the user still needs to read or copy the value,\nuse `readOnly` instead.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "InputHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "placeholder": {
+            "name": "placeholder",
+            "required": false,
+            "type": {
+              "name": "string"
+            },
+            "description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "InputHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "readOnly": {
+            "name": "readOnly",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "InputHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "required": {
+            "name": "required",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Marks the control required for both the browser and assistive technology.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "InputHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n  the text to `base` and the corner radius to `lg`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputProps",
+              "fileName": "src/input/input.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-input--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" />;",
+          "description": "The default control at `md`, usable anywhere without a surrounding field.",
+          "summary": "Default standalone input"
+        },
+        {
+          "id": "components-input--small",
+          "name": "Small",
+          "snippet": "const Small = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"sm\" />;",
+          "description": "`sm` (32px) keeps dense layouts compact where vertical space is tight.",
+          "summary": "Small 32px control for dense layouts"
+        },
+        {
+          "id": "components-input--medium",
+          "name": "Medium",
+          "snippet": "const Medium = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"md\" />;",
+          "description": "`md` (40px) is the default and covers standard form density.",
+          "summary": "Medium 40px control, the default"
+        },
+        {
+          "id": "components-input--large",
+          "name": "Large",
+          "snippet": "const Large = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"lg\" />;",
+          "description": "`lg` (48px) suits low-density forms and larger touch targets. It also raises\nthe text to `base` and the corner radius to `lg`.",
+          "summary": "Large 48px control for low-density forms"
+        },
+        {
+          "id": "components-input--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>\n    <Input type=\"text\" size=\"sm\" aria-label=\"Small input\" placeholder=\"sm — 32px\" />\n    <Input type=\"text\" size=\"md\" aria-label=\"Medium input\" placeholder=\"md — 40px\" />\n    <Input type=\"text\" size=\"lg\" aria-label=\"Large input\" placeholder=\"lg — 48px\" />\n</div>;",
+          "description": "All three heights together for visual comparison.",
+          "summary": "Visual comparison of the three input sizes"
+        },
+        {
+          "id": "components-input--types",
+          "name": "Types",
+          "snippet": "const Types = () => <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>\n    <Input type=\"text\" aria-label=\"Text\" placeholder=\"Text\" />\n    <Input type=\"email\" aria-label=\"Email address\" placeholder=\"you@example.com\" />\n    <Input type=\"password\" aria-label=\"Password\" placeholder=\"Password\" />\n    <Input type=\"number\" aria-label=\"Amount\" placeholder=\"0\" />\n    <Input type=\"date\" aria-label=\"Date\" placeholder=\"\" />\n</div>;",
+          "description": "A range of input types. The type picks the on-screen keyboard on touch\ndevices and the browser's own parsing, so set it even when you validate\nyourself.",
+          "summary": "Common input types side by side"
+        },
+        {
+          "id": "components-input--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <div style={{ display: 'grid', gap: '0.25rem', maxWidth: '20rem' }}>\n    <Input\n        type=\"email\"\n        placeholder=\"Insert value\"\n        aria-label=\"Email\"\n        aria-invalid\n        aria-describedby=\"email-error\"\n        defaultValue=\"not-an-email\" />\n    <span id=\"email-error\">Enter a valid email address.</span>\n</div>;",
+          "description": "The invalid treatment comes purely from `aria-invalid`, so the border can\nnever disagree with what assistive technology announces. Point\n`aria-describedby` at the message so it is read out with the control.",
+          "summary": "Invalid state driven by aria-invalid"
+        },
+        {
+          "id": "components-input--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <Input\n    type=\"text\"\n    placeholder=\"Insert value\"\n    aria-label=\"Value\"\n    disabled\n    defaultValue=\"Cannot be edited\" />;",
+          "description": "A disabled input keeps its value readable but blocks interaction, drops its\nshadow and leaves the tab order.",
+          "summary": "Disabled state"
+        },
+        {
+          "id": "components-input--read-only",
+          "name": "Read Only",
+          "snippet": "const ReadOnly = () => <Input\n    type=\"text\"\n    placeholder=\"Insert value\"\n    aria-label=\"Value\"\n    readOnly\n    defaultValue=\"Copy me, but do not change me\" />;",
+          "description": "Read-only inputs stay focusable and copyable and still submit their value —\nreach for this over `disabled` when the user needs to read or copy something\nthey cannot change.",
+          "summary": "Read-only value that stays focusable and copyable"
+        }
+      ],
+      "import": "import { Input } from \"@agentero/design-system\";"
+    },
     "components-label": {
       "id": "components-label",
       "name": "Label",
@@ -6994,6 +7281,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3698
+    "durationMs": 3983
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.25.3",
+	"version": "0.26.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -65,6 +65,10 @@
 			"types": "./src/hover-card/index.d.ts",
 			"import": "./src/hover-card/index.js"
 		},
+		"./input": {
+			"types": "./src/input/index.d.ts",
+			"import": "./src/input/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"

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/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, inputRecipe } from './input';
+export type { InputProps, InputSize, InputVariants } from './input';

package/src/input/index.js

@@ -0,0 +1,2 @@
+import { Input as e, inputRecipe as t } from "./input.js";
+export { e as Input, t as inputRecipe };

package/src/input/input.d.ts

@@ -0,0 +1,109 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for Input. Single-element recipe with a `size` variant; the
+ * invalid treatment is driven entirely by the `aria-invalid` attribute so the
+ * visual state can never drift from what assistive technology announces.
+ *
+ * @summary tailwind-variants recipe backing the Input component styles
+ */
+export declare const inputRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type InputVariants = VariantProps<typeof inputRecipe>;
+/** Control height. See the `size` prop for when to reach for each one. */
+export type InputSize = NonNullable<InputVariants['size']>;
+/**
+ * Every standard `<input>` attribute is accepted and forwarded. The handful
+ * redeclared below are the ones worth documenting: they are what most callers
+ * reach for, and `react-docgen` does not expand native attributes, so without
+ * this they would be invisible in the docs and the MCP manifest.
+ */
+export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
+    /**
+     * Control height. Defaults to `'md'`.
+     * - `sm` (32px) — dense layouts where vertical space is tight.
+     * - `md` (40px) — standard form density.
+     * - `lg` (48px) — low-density forms and larger touch targets. Also raises
+     *   the text to `base` and the corner radius to `lg`.
+     */
+    size?: InputSize;
+    /**
+     * Native input type. Picks the on-screen keyboard on touch devices and the
+     * browser's own parsing, so set it even when you validate yourself.
+     * Defaults to `'text'`. Multi-line text is not one of the options — that is
+     * a TextArea.
+     */
+    type?: ComponentPropsWithRef<'input'>['type'];
+    /**
+     * Short hint shown while the field is empty. It disappears on the first
+     * keystroke, so it is never a substitute for a label.
+     */
+    placeholder?: string;
+    /**
+     * Blocks interaction, greys the control out and drops its shadow. The value
+     * is not submitted. When the user still needs to read or copy the value,
+     * use `readOnly` instead.
+     */
+    disabled?: boolean;
+    /**
+     * Keeps the value focusable and copyable but not editable, and still
+     * submits it. Unlike `disabled`, it stays in the tab order.
+     */
+    readOnly?: boolean;
+    /** Marks the control required for both the browser and assistive technology. */
+    required?: boolean;
+    /**
+     * Set this when the value fails validation: it drives the destructive border
+     * and is what assistive technology announces. Point `aria-describedby` at
+     * the error message so the two are read together.
+     */
+    'aria-invalid'?: ComponentPropsWithRef<'input'>['aria-invalid'];
+};
+/**
+ * Input is the design system's base single-line text control. Reach for it
+ * whenever a form collects free text, and pair it with
+ * [Label](?path=/docs/components-label--docs) so the control has an accessible
+ * name.
+ *
+ * It is deliberately self-contained: it renders the props it is given and
+ * knows nothing about form fields, form libraries, or surrounding layout.
+ * Wiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so
+ * a field wrapper can inject them and standalone usage can set them by hand.
+ * There is no `status` prop — mark the control `aria-invalid` and the
+ * destructive border follows.
+ *
+ * Do not use Input for multi-line text; that is TextArea's job. It also has no
+ * slots for leading or trailing addons — an input with a currency prefix or a
+ * unit suffix belongs in an input group, not here.
+ *
+ * @summary Base single-line text control, unaware of fields and form libraries
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" placeholder="you@example.com" />
+ *
+ * @example
+ * <Input id="email" aria-invalid aria-describedby="email-error" />
+ * <span id="email-error">Enter a valid email address.</span>
+ */
+export declare const Input: {
+    ({ className, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};