@edux-design/buttons 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @edux-design/buttons
 
-## 0.1.3
+## 0.2.0
 
-### Patch Changes
+### Minor Changes
 
-- Add shared control height tokens and update Button to use token-backed size classes.
+- Migrated Button, IconButton, MenuButton, ButtonCounter, and ButtonGroup to the shared semantic control-size tokens without changing their dimensions.
+- Added a visual compatibility matrix covering themes, brands, sizes, and variants.
 
 ## 0.1.2
 

package/README.md

@@ -1,11 +1,12 @@
 # @edux-design/buttons
 
-Headless-ish button primitives wired to the Edux design tokens. The package ships four components:
+Headless-ish button primitives wired to the Edux design tokens. The package ships five components:
 
-- `Button` – primary action button with size + variant helpers.
-- `IconButton` – circular/square icon surface that reuses the same states.
-- `MenuButton` – trigger wrapper that pairs nicely with popovers/menus.
-- `ButtonGroup` – segmented control with a sliding active state meant for contextual filters.
+- `Button` - primary action button with size + variant helpers.
+- `IconButton` - circular icon-only button surface.
+- `MenuButton` - semantic menu trigger button.
+- `ButtonGroup` - segmented control with a sliding active state meant for contextual filters.
+- `ButtonCounter` - increment/decrement control with optional editable value.
 
 Everything is built with Tailwind utilities via the shared `cx` helper so styling stays consistent with the rest of the system.
 
@@ -19,17 +20,24 @@ pnpm add @edux-design/buttons @edux-design/utils
 npm install @edux-design/buttons @edux-design/utils
 ```
 
-Peer deps: `react@^19.1.0`, `react-dom@^19.1.0`.
+Peer deps: `@edux-design/tokens@>=0.2.0 <0.3.0`, `react@^19.1.0`, `react-dom@^19.1.0`.
 
 ---
 
 ## Usage
 
 ```jsx
-import { Button, IconButton, MenuButton } from "@edux-design/buttons";
-import { Close, Chevron } from "@edux-design/icons";
-
-export function Actions() {
+import {
+  Button,
+  ButtonCounter,
+  ButtonGroup,
+  ButtonGroupItem,
+  IconButton,
+  MenuButton,
+} from "@edux-design/buttons";
+import { Close, Warning } from "@edux-design/icons";
+
+export function Actions({ menuOpen, setMenuOpen }) {
   return (
     <div className="flex gap-4">
       <Button size="small">Save</Button>
@@ -39,55 +47,67 @@ export function Actions() {
       <Button isDanger disabled>
         Delete
       </Button>
-      <IconButton icon={<Close />} aria-label="Close dialog" />
-      <MenuButton caret={<Chevron />} onClick={() => null}>
+      <IconButton icon={<Close aria-hidden="true" />} aria-label="Close dialog" />
+      <MenuButton
+        aria-expanded={menuOpen}
+        aria-controls="actions-menu"
+        onClick={() => setMenuOpen((prev) => !prev)}
+      >
         Options
       </MenuButton>
+      <ButtonCounter defaultValue={2} min={1} aria-label="Quantity" />
     </div>
   );
 }
-```
-
-### ButtonGroup
-
-```jsx
-import React from "react";
-import { ButtonGroup } from "@edux-design/buttons";
-import { Warning } from "@edux-design/icons";
 
 export function SegmentedFilter() {
   const [value, setValue] = React.useState("inbox");
 
   return (
-    <ButtonGroup
-      value={value}
-      onChange={(nextValue) => setValue(nextValue)}
-      options={[
-        { value: "inbox", label: "Label (11)" },
-        { value: "drafts", label: "Label (11)" },
-        {
-          value: "alerts",
-          label: "Label",
-          endAdornment: <Warning className="h-4 w-4 text-warning-600" />,
-        },
-      ]}
-    />
+    <ButtonGroup value={value} onChange={(nextValue) => setValue(nextValue)}>
+      <ButtonGroupItem value="inbox">Inbox (11)</ButtonGroupItem>
+      <ButtonGroupItem value="drafts">Drafts (11)</ButtonGroupItem>
+      <ButtonGroupItem
+        value="alerts"
+        endAdornment={<Warning className="h-4 w-4 text-warning-600" />}
+      >
+        Alerts
+      </ButtonGroupItem>
+    </ButtonGroup>
   );
 }
 ```
 
-Provide `options` as strings or objects (`{ value, label, startAdornment, endAdornment, disabled }`). The active pill animates over the newly selected option and the group behaves like an accessible radiogroup (arrow keys + home/end). Use `isStretched` when the control should fill the parent width.
+### Accessibility notes
+
+- `IconButton` requires an accessible name via `aria-label` or `aria-labelledby`.
+- `MenuButton` renders a native `<button>` and defaults `aria-haspopup` to `"menu"`.
+- `ButtonGroup` uses radiogroup semantics with roving `tabIndex` and supports arrow keys plus home/end.
+- `ButtonCounter` exposes its value through a labelled output in display mode and a native `spinbutton` in editable mode.
 
 ### Key props
 
-| Component     | Important props |
-| ------------- | --------------- |
-| `Button`      | `size="small"|"medium"|"large"`, `isSecondary`, `isDanger`, `isBare`, `isStretched`, `disabled` |
-| `IconButton`  | `icon`, `size`, `isBare`, `isDanger`, `disabled` |
-| `MenuButton`  | Accepts all `Button` props plus caret slot and ARIA attributes for menu triggers |
-| `ButtonGroup` | `options`, `value` / `defaultValue`, `onChange`, `size`, `isStretched`, per-option `startAdornment` / `endAdornment`, `disabled` |
+| Component | Important props |
+| --------- | --------------- |
+| `Button` | `size="small"|"medium"|"large"`, `isSecondary`, `isDanger`, `isBare`, `isStretched`, `disabled` |
+| `IconButton` | `icon`, `size`, `isBare`, `isDanger`, `disabled`, `aria-label` / `aria-labelledby` |
+| `MenuButton` | Native button props, `size`, `caret`, `aria-expanded`, `aria-controls` |
+| `ButtonGroup` | `value` / `defaultValue`, `onChange`, `size`, `isStretched`, per-option `startAdornment` / `endAdornment`, `disabled` |
+| `ButtonCounter` | `value` / `defaultValue`, `min`, `max`, `step`, `isEditable`, `inputProps` |
+
+Buttons warn in development if you pass conflicting variant booleans so you know which style wins. `IconButton` also warns when it is missing an accessible name.
 
-Buttons warn in development if you pass conflicting variant booleans so you know which style wins.
+### Shared control sizes
+
+Button components map their public size names to the semantic control-size contract from `@edux-design/tokens`:
+
+| Public size | Token utility | Computed size |
+| --- | --- | --- |
+| `small` | `control-sm` | `36px` |
+| `medium` | `control-md` | `44px` |
+| `large` | `control-lg` | `56px` |
+
+`Button` uses the shared height, `IconButton` and ButtonCounter controls use the shared square size, and `MenuButton` uses the shared minimum height. Component-specific content widths remain owned by their component.
 
 ---
 
@@ -99,12 +119,4 @@ pnpm --filter @edux-design/buttons check-types
 pnpm --filter @edux-design/buttons build
 ```
 
-Stories live under `src/demo` (e.g. `Button.stories.jsx`, `ButtonGroup.stories.jsx`) for quick visual verification.
-
----
-
-## Notes
-
-- Variants map directly to the design tokens defined in `@edux-design/tokens`.
-- Hover/focus styles are already applied; avoid overriding unless you have a matching token.
-- If you need new variants (ghost, link, destructive-secondary, etc.), add them in `Button.jsx` and update the stories + README accordingly.
+Stories live under `src/demo` (for example `Button.stories.jsx` and `ButtonGroup.stories.jsx`) for quick visual verification.

package/dist/chevron-EVM4GL6D.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5858 12L9.29289 7.70711C8.90237 7.31658 8.90237 6.68342 9.29289 6.29289C9.68342 5.90237 10.3166 5.90237 10.7071 6.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071C8.90237 17.3166 8.90237 16.6834 9.29289 16.2929L13.5858 12Z" fill="currentColor"/>
+</svg>

package/dist/chunk-M47FNL4P.mjs

@@ -0,0 +1,10 @@
+// src/elements/Button.jsx
+import React from "react";
+function Button() {
+  return /* @__PURE__ */ React.createElement("div", { className: "border-2 border-primary-700" }, "Button");
+}
+var Button_default = Button;
+
+export {
+  Button_default
+};

package/dist/elements/Button.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/elements/Button.jsx
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+module.exports = __toCommonJS(Button_exports);
+var import_react = __toESM(require("react"));
+function Button() {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "border-2 border-primary-700" }, "Button");
+}
+var Button_default = Button;

package/dist/elements/Button.mjs

@@ -0,0 +1,6 @@
+import {
+  Button_default
+} from "../chunk-M47FNL4P.mjs";
+export {
+  Button_default as default
+};

package/dist/index.d.mts

@@ -0,0 +1,244 @@
+import * as react from 'react';
+
+/**
+ * Props for the IconButton component.
+ *
+ * Extends all native HTML `<button>` attributes and accepts an icon prop.
+ * Designed for circular icon-only buttons that follow the same
+ * design-system patterns as the regular Button.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   icon: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   disabled?: boolean,
+ *   className?: string
+ * }} IconButtonProps
+ */
+/**
+ * IconButton component.
+ *
+ * Provides a circular button used for icon-only actions, matching
+ * the design-system variants and states of the main Button component.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <IconButton icon={<XIcon />} aria-label="Close" />
+ * <IconButton icon={<EditIcon />} isSecondary aria-label="Edit" />
+ * <IconButton icon={<TrashIcon />} isDanger disabled aria-label="Delete" />
+ * ```
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the IconButton component.
+ *
+ * Extends all native HTML `<button>` attributes and accepts an icon prop.
+ * Designed for circular icon-only buttons that follow the same
+ * design-system patterns as the regular Button.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ */
+type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   className?: string
+ * }} ButtonProps
+ */
+/**
+ * Button component.
+ *
+ * Provides design-system styled button with support for
+ * multiple visual variants, sizing, and states.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <Button size="small">Save</Button>
+ * <Button isSecondary>Cancel</Button>
+ * <Button isDanger disabled>Delete</Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ */
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * Props for the MenuButton component.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   caret?: React.ReactNode,
+ *   size?: "small"|"medium",
+ *   className?: string,
+ * }} MenuButtonProps
+ */
+/**
+ * MenuButton component.
+ *
+ * Provides a styled button intended for menu triggers.
+ * Consumers should pass `aria-expanded`, `aria-controls`, and any
+ * custom labeling they need. `aria-haspopup="menu"` is applied by default.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
+ *   Options
+ * </MenuButton>
+ * ```
+ */
+declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the MenuButton component.
+ */
+type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    caret?: React.ReactNode;
+    size?: "small" | "medium";
+    className?: string;
+};
+
+/**
+ * @typedef {Object} ButtonGroupOption
+ * @property {React.ReactNode} [label] - Main label for the option.
+ * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
+ * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
+ * @property {React.ReactNode} [endAdornment] - Optional trailing element.
+ * @property {string|number} [value] - Unique value used for selection.
+ * @property {boolean} [disabled] - Whether the option is disabled.
+ */
+/**
+ * Segmented button group with animated active state.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: string|number,
+ *   defaultValue?: string|number,
+ *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
+ *   size?: "small"|"medium"|"large",
+ *   isStretched?: boolean,
+ * }} ButtonGroupProps
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function ButtonGroupItem(_props: any): any;
+declare namespace ButtonGroupItem {
+    let displayName: string;
+}
+
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ */
+type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    isEditable?: boolean;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+    decrementIcon?: React.ReactNode;
+    incrementIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    className?: string;
+};
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };