@agentero/design-system 0.26.2 → 0.27.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. 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\";"
@@ -1698,6 +1672,320 @@
       ],
       "import": "import { CheckList } from \"@agentero/design-system\";"
     },
+    "components-checkbox": {
+      "id": "components-checkbox",
+      "name": "Checkbox",
+      "path": "./src/checkbox/checkbox.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Base checkbox control, with mixed state, unaware of form libraries"
+        ],
+        "example": [
+          "<Label htmlFor=\"terms\">I accept the terms</Label>\n<Checkbox id=\"terms\" name=\"terms\" required />"
+        ]
+      },
+      "description": "Base control for a boolean the user confirms later. Headless: pair it with\na `Label` and `htmlFor`, or give it an `aria-label`. There is no `status`\nprop — set `aria-invalid` and the destructive treatment follows.",
+      "summary": "Base checkbox control, with mixed state, unaware of form libraries",
+      "reactComponentMeta": {
+        "displayName": "Checkbox",
+        "exportName": "Checkbox",
+        "filePath": "/home/runner/work/design-system/design-system/src/checkbox/checkbox.tsx",
+        "description": "Base control for a boolean the user confirms later: one item of a\nmulti-select, a terms tick, a row picked for a bulk action. Supports the\nmixed state for a parent that summarises a partially selected group.\nKeeps the legacy 16px surface, glyphs and state colours during adoption.\n\nHeadless like [Input](?path=/docs/components-input--docs): pair it with\n[Label](?path=/docs/components-label--docs) and `htmlFor`, or give it an\n`aria-label`. There is no `status` prop — set `aria-invalid`.\n\nUse [Switch](?path=/docs/components-switch--docs) when the change applies\nimmediately, and [CheckList](?path=/docs/components-check-list--docs) for a\nread-only list of ticked items.",
+        "jsDocTags": {
+          "summary": [
+            "Base checkbox control, with mixed state, unaware of form libraries"
+          ],
+          "example": [
+            "<Label htmlFor=\"terms\">I accept the terms</Label>\n<Checkbox id=\"terms\" name=\"terms\" required />"
+          ]
+        },
+        "props": {
+          "defaultChecked": {
+            "name": "defaultChecked",
+            "required": false,
+            "type": {
+              "name": "CheckedState | undefined"
+            },
+            "description": "Initial state for an uncontrolled checkbox.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "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.\nDrives the destructive border and fill. Point `aria-describedby` at the error message.",
+            "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/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "asChild": {
+            "name": "asChild",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": null,
+            "parent": {
+              "name": "PrimitivePropsWithRef",
+              "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+              }
+            ]
+          },
+          "value": {
+            "name": "value",
+            "required": false,
+            "type": {
+              "name": "string | (readonly string[] & string) | undefined"
+            },
+            "description": "Value submitted when checked. Defaults to `'on'`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "disabled": {
+            "name": "disabled",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Blocks interaction and greys the box out; the value is not submitted.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "name": {
+            "name": "name",
+            "required": false,
+            "type": {
+              "name": "string"
+            },
+            "description": "Form field name. Needed for uncontrolled form usage.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "checked": {
+            "name": "checked",
+            "required": false,
+            "type": {
+              "name": "CheckedState | undefined"
+            },
+            "description": "Controlled state. `'indeterminate'` renders a dash and announces `aria-checked=\"mixed\"`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "required": {
+            "name": "required",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Marks the control required for the browser and assistive technology.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "onCheckedChange": {
+            "name": "onCheckedChange",
+            "required": false,
+            "type": {
+              "name": "(checked: CheckedState) => void"
+            },
+            "description": "Fires with the next state (`true`, `false` or `'indeterminate'`) on click and on Space.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-checkbox--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Checkbox disabled={false} aria-label=\"Select row\" />;",
+          "description": "",
+          "summary": "Default standalone checkbox"
+        },
+        {
+          "id": "components-checkbox--checked",
+          "name": "Checked",
+          "snippet": "const Checked = () => <Checkbox disabled={false} aria-label=\"Select row\" defaultChecked />;",
+          "description": "",
+          "summary": "Checked state"
+        },
+        {
+          "id": "components-checkbox--indeterminate",
+          "name": "Indeterminate",
+          "snippet": "const Indeterminate = () => <Checkbox disabled={false} aria-label=\"Select row\" checked=\"indeterminate\" />;",
+          "description": "A state you set, never one the user clicks into: use it for a parent that\ngoverns a partially selected group.",
+          "summary": "Mixed state for a partially selected group"
+        },
+        {
+          "id": "components-checkbox--uncontrolled-indeterminate",
+          "name": "Uncontrolled Indeterminate",
+          "snippet": "const UncontrolledIndeterminate = () => <Checkbox disabled={false} aria-label=\"Select row\" defaultChecked=\"indeterminate\" />;",
+          "description": "Starts mixed without a controlled value, then toggles through checked and unchecked.",
+          "summary": "Uncontrolled checkbox starting in the mixed state"
+        },
+        {
+          "id": "components-checkbox--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => (\n    <div className=\"flex items-center gap-6\">\n        <Checkbox disabled aria-label=\"Disabled unchecked\" />\n        <Checkbox disabled defaultChecked aria-label=\"Disabled checked\" />\n        <Checkbox disabled checked=\"indeterminate\" aria-label=\"Disabled mixed\" />\n    </div>\n);",
+          "description": "",
+          "summary": "Disabled in every state"
+        },
+        {
+          "id": "components-checkbox--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => (\n    <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center gap-2\">\n            <Checkbox id=\"terms\" aria-invalid aria-describedby=\"terms-error\" required />\n            <Label htmlFor=\"terms\">I accept the terms of service</Label>\n        </div>\n        <p id=\"terms-error\" className=\"text-sm text-text-input-destructive\">\n            You must accept the terms to continue.\n        </p>\n    </div>\n);",
+          "description": "",
+          "summary": "Failed validation, driven by aria-invalid"
+        },
+        {
+          "id": "components-checkbox--with-label",
+          "name": "With Label",
+          "snippet": "const WithLabel = () => (\n    <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"newsletter\" name=\"newsletter\" />\n        <Label htmlFor=\"newsletter\">Email me product updates</Label>\n    </div>\n);",
+          "description": "",
+          "summary": "Labelled checkbox with the text in the hit target"
+        },
+        {
+          "id": "components-checkbox--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [accepted, setAccepted] = useState(false);\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Checkbox\n                id=\"controlled\"\n                checked={accepted}\n                onCheckedChange={value => setAccepted(value === true)}\n            />\n            <Label htmlFor=\"controlled\">Auto-renew policy {accepted ? '(on)' : '(off)'}</Label>\n        </div>\n    );\n};",
+          "description": "",
+          "summary": "Controlled checkbox driven by component state"
+        },
+        {
+          "id": "components-checkbox--select-all",
+          "name": "Select All",
+          "snippet": "const SelectAll = () => {\n    const carriers = ['Openly', 'Lemonade', 'Bamboo'];\n    const [selected, setSelected] = useState<string[]>(['Openly']);\n    const allSelected = selected.length === carriers.length;\n\n    return (\n        <div className=\"flex flex-col gap-3\">\n            <div className=\"flex items-center gap-2\">\n                <Checkbox\n                    id=\"select-all\"\n                    checked={allSelected ? true : selected.length > 0 ? 'indeterminate' : false}\n                    onCheckedChange={value => setSelected(value === true ? carriers : [])}\n                />\n                <Label htmlFor=\"select-all\">Select all carriers</Label>\n            </div>\n            <div className=\"ms-6 flex flex-col gap-2\">\n                {carriers.map(carrier => (\n                    <div key={carrier} className=\"flex items-center gap-2\">\n                        <Checkbox\n                            id={carrier}\n                            checked={selected.includes(carrier)}\n                            onCheckedChange={value =>\n                                setSelected(prev =>\n                                    value === true ? [...prev, carrier] : prev.filter(name => name !== carrier)\n                                )\n                            }\n                        />\n                        <Label htmlFor={carrier}>{carrier}</Label>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};",
+          "description": "",
+          "summary": "Parent select-all checkbox governing a group"
+        },
+        {
+          "id": "components-checkbox--inside-selected-group",
+          "name": "Inside Selected Group",
+          "snippet": "const InsideSelectedGroup = () => (\n    <div className=\"group\" data-state=\"checked\">\n        <Checkbox aria-label=\"Select carriers\" defaultChecked=\"indeterminate\" />\n    </div>\n);",
+          "description": "A surrounding selection container must not change the checkbox's own glyph.",
+          "summary": "Mixed checkbox inside another selected group"
+        },
+        {
+          "id": "components-checkbox--legacy-states",
+          "name": "Legacy States",
+          "snippet": "const LegacyStates = () => (\n    <div className=\"flex flex-col gap-6\">\n        {[false, true].map(invalid => (\n            <div key={String(invalid)} className=\"flex flex-col gap-4\">\n                {[false, true].map(disabled => (\n                    <div key={String(disabled)} className=\"flex items-center gap-6\">\n                        {([false, true, 'indeterminate'] as const).map(checked => (\n                            <Checkbox\n                                key={String(checked)}\n                                aria-label={`${invalid ? 'Invalid' : 'Valid'} ${disabled ? 'disabled' : 'enabled'} ${checked}`}\n                                checked={checked}\n                                disabled={disabled}\n                                aria-invalid={invalid}\n                            />\n                        ))}\n                    </div>\n                ))}\n            </div>\n        ))}\n    </div>\n);",
+          "description": "Preserves the legacy palette and 16px footprint for every value and validation state.",
+          "summary": "Legacy checkbox colours across all interaction states"
+        }
+      ],
+      "import": "import { Checkbox, Label } from \"@agentero/design-system\";"
+    },
     "components-command": {
       "id": "components-command",
       "name": "Command.Root",
@@ -4410,13 +4698,13 @@
               }
             ]
           },
-          "placeholder": {
-            "name": "placeholder",
+          "required": {
+            "name": "required",
             "required": false,
             "type": {
-              "name": "string"
+              "name": "boolean"
             },
-            "description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
+            "description": "Marks the control required for both the browser and assistive technology.",
             "defaultValue": null,
             "parent": {
               "name": "InputHTMLAttributes",
@@ -4433,13 +4721,13 @@
               }
             ]
           },
-          "readOnly": {
-            "name": "readOnly",
+          "placeholder": {
+            "name": "placeholder",
             "required": false,
             "type": {
-              "name": "boolean"
+              "name": "string"
             },
-            "description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
+            "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",
@@ -4456,13 +4744,13 @@
               }
             ]
           },
-          "required": {
-            "name": "required",
+          "readOnly": {
+            "name": "readOnly",
             "required": false,
             "type": {
               "name": "boolean"
             },
-            "description": "Marks the control required for both the browser and assistive technology.",
+            "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",
@@ -4617,12 +4905,12 @@
             "defaultValue": null,
             "parent": {
               "name": "PrimitivePropsWithRef",
-              "fileName": "node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+              "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
             },
             "declarations": [
               {
                 "name": "TypeLiteral",
-                "fileName": "node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+                "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
               }
             ]
           },
@@ -7287,6 +7575,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4462
+    "durationMs": 2995
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.26.2",
+	"version": "0.27.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -45,6 +45,10 @@
 			"types": "./src/check-list/index.d.ts",
 			"import": "./src/check-list/index.js"
 		},
+		"./checkbox": {
+			"types": "./src/checkbox/index.d.ts",
+			"import": "./src/checkbox/index.js"
+		},
 		"./command": {
 			"types": "./src/command/index.d.ts",
 			"import": "./src/command/index.js"
@@ -150,6 +154,7 @@
 	"dependencies": {
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-checkbox": "^1.3.11",
 		"@radix-ui/react-dialog": "^1.1.19",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.19",

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]
 	});
 };