@edux-design/buttons 0.1.4 → 0.3.0

package/CHANGELOG.md

@@ -1,16 +1,21 @@
 # @edux-design/buttons
 
-## 0.1.4
+## 0.3.0
 
-### Patch Changes
+### Minor Changes
 
-- Fix package publishing so built dist files are included in the npm tarballs.
+- Add toolbar controls, toggles, groups and separators with native attributes, labelled keyboard navigation and compact semantic control sizing.
 
-## 0.1.3
+  Correct primary Button, IconButton and ButtonCounter foregrounds in dark mode using the existing inverse foreground token; geometry and danger colours are unchanged.
 
-### Patch Changes
+  Retain native ButtonGroup props, refs and typed selection callbacks in generated declarations.
+
+## 0.2.0
+
+### 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.
+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.
+
+### 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,8 @@ 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.
-
----
+Stories live under `src/demo` (for example `Button.stories.jsx` and `ButtonGroup.stories.jsx`) for quick visual verification.
 
-## Notes
+## Additional components
 
-- 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.
+[Toolbar controls](./docs/toolbar.md).

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import React from 'react';
 
 /**
  * Props for the IconButton component.
@@ -8,6 +7,8 @@ import * as react from 'react';
  * 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",
@@ -30,8 +31,8 @@ import * as react from 'react';
  * @example
  * ```jsx
  * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
+ * <IconButton icon={<EditIcon />} isSecondary aria-label="Edit" />
+ * <IconButton icon={<TrashIcon />} isDanger disabled aria-label="Delete" />
  * ```
  */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -41,6 +42,8 @@ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & Reac
  * 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;
@@ -110,29 +113,40 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 /**
  * Props for the MenuButton component.
  *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   caret?: React.ReactNode,
+ *   size?: "small"|"medium",
+ *   className?: string,
+ * }} MenuButtonProps
  */
 /**
  * MenuButton component.
  *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
+ * 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.FC<MenuButtonProps>}
+ * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
  *
  * @example
  * ```jsx
- * <MenuButton size="small">Options</MenuButton>
+ * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
+ *   Options
+ * </MenuButton>
  * ```
  */
-declare function MenuButton({ children, size }: {
-    children: any;
-    size: any;
-}): react_jsx_runtime.JSX.Element;
+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
@@ -146,7 +160,7 @@ declare function MenuButton({ children, size }: {
 /**
  * Segmented button group with animated active state.
  *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ * @typedef {Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"|"defaultValue"> & {
  *   value?: string|number,
  *   defaultValue?: string|number,
  *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
@@ -154,7 +168,44 @@ declare function MenuButton({ children, size }: {
  *   isStretched?: boolean,
  * }} ButtonGroupProps
  */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ButtonGroupOption = {
+    /**
+     * - Main label for the option.
+     */
+    label?: React.ReactNode;
+    /**
+     * - Optional leading element (icon, badge, etc.).
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * - Optional trailing element (legacy alias).
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * - Optional trailing element.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * - Unique value used for selection.
+     */
+    value?: string | number;
+    /**
+     * - Whether the option is disabled.
+     */
+    disabled?: boolean;
+};
+/**
+ * Segmented button group with animated active state.
+ */
+type ButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, option: ButtonGroupOption) => void;
+    size?: "small" | "medium" | "large";
+    isStretched?: boolean;
+};
 
 declare function ButtonGroupItem(_props: any): any;
 declare namespace ButtonGroupItem {
@@ -227,4 +278,49 @@ type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Native Tab order is the default. Adopt roving arrow-key focus explicitly. */
+    keyboardNavigation?: "native" | "roving";
+    /** Arrow-key navigation follows this axis. It never activates an action. */
+    orientation?: "horizontal" | "vertical";
+    /** Whether arrow navigation wraps at the first and last enabled action. */
+    loop?: boolean;
+}
+/**
+ * A labelled action toolbar with native Tab order by default.
+ * Opt into roving navigation for one tab stop and arrow-key focus.
+ * Place ToolbarButton/ToolbarToggleButton children directly or in ToolbarGroup.
+ * Nested toolbars maintain independent focus. Editor command handling stays local.
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/** A labelled, non-selecting action group. Selection state belongs to its buttons. */
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The separator line's orientation, perpendicular to a horizontal toolbar by default. */
+    orientation?: "horizontal" | "vertical";
+}
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Compatibility visual state. Defaults aria-pressed to true; explicit native ARIA wins. */
+    active?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "neutral" | "primary" | "danger";
+    icon?: React.ReactNode;
+    /** Square geometry. Provide aria-label or aria-labelledby when there is no visible text. */
+    iconOnly?: boolean;
+}
+/** Compact native action button; compose a Tooltip around it when an explanation is needed. */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ToolbarToggleButtonProps extends Omit<ToolbarButtonProps, "aria-pressed" | "active"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** A controlled or uncontrolled independent toggle, with native button keyboard activation. */
+declare const ToolbarToggleButton: React.ForwardRefExoticComponent<ToolbarToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, ToolbarToggleButton, type ToolbarToggleButtonProps };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import React from 'react';
 
 /**
  * Props for the IconButton component.
@@ -8,6 +7,8 @@ import * as react from 'react';
  * 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",
@@ -30,8 +31,8 @@ import * as react from 'react';
  * @example
  * ```jsx
  * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
+ * <IconButton icon={<EditIcon />} isSecondary aria-label="Edit" />
+ * <IconButton icon={<TrashIcon />} isDanger disabled aria-label="Delete" />
  * ```
  */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -41,6 +42,8 @@ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & Reac
  * 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;
@@ -110,29 +113,40 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 /**
  * Props for the MenuButton component.
  *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   caret?: React.ReactNode,
+ *   size?: "small"|"medium",
+ *   className?: string,
+ * }} MenuButtonProps
  */
 /**
  * MenuButton component.
  *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
+ * 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.FC<MenuButtonProps>}
+ * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
  *
  * @example
  * ```jsx
- * <MenuButton size="small">Options</MenuButton>
+ * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
+ *   Options
+ * </MenuButton>
  * ```
  */
-declare function MenuButton({ children, size }: {
-    children: any;
-    size: any;
-}): react_jsx_runtime.JSX.Element;
+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
@@ -146,7 +160,7 @@ declare function MenuButton({ children, size }: {
 /**
  * Segmented button group with animated active state.
  *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ * @typedef {Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"|"defaultValue"> & {
  *   value?: string|number,
  *   defaultValue?: string|number,
  *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
@@ -154,7 +168,44 @@ declare function MenuButton({ children, size }: {
  *   isStretched?: boolean,
  * }} ButtonGroupProps
  */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ButtonGroupOption = {
+    /**
+     * - Main label for the option.
+     */
+    label?: React.ReactNode;
+    /**
+     * - Optional leading element (icon, badge, etc.).
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * - Optional trailing element (legacy alias).
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * - Optional trailing element.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * - Unique value used for selection.
+     */
+    value?: string | number;
+    /**
+     * - Whether the option is disabled.
+     */
+    disabled?: boolean;
+};
+/**
+ * Segmented button group with animated active state.
+ */
+type ButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, option: ButtonGroupOption) => void;
+    size?: "small" | "medium" | "large";
+    isStretched?: boolean;
+};
 
 declare function ButtonGroupItem(_props: any): any;
 declare namespace ButtonGroupItem {
@@ -227,4 +278,49 @@ type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Native Tab order is the default. Adopt roving arrow-key focus explicitly. */
+    keyboardNavigation?: "native" | "roving";
+    /** Arrow-key navigation follows this axis. It never activates an action. */
+    orientation?: "horizontal" | "vertical";
+    /** Whether arrow navigation wraps at the first and last enabled action. */
+    loop?: boolean;
+}
+/**
+ * A labelled action toolbar with native Tab order by default.
+ * Opt into roving navigation for one tab stop and arrow-key focus.
+ * Place ToolbarButton/ToolbarToggleButton children directly or in ToolbarGroup.
+ * Nested toolbars maintain independent focus. Editor command handling stays local.
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/** A labelled, non-selecting action group. Selection state belongs to its buttons. */
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The separator line's orientation, perpendicular to a horizontal toolbar by default. */
+    orientation?: "horizontal" | "vertical";
+}
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Compatibility visual state. Defaults aria-pressed to true; explicit native ARIA wins. */
+    active?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "neutral" | "primary" | "danger";
+    icon?: React.ReactNode;
+    /** Square geometry. Provide aria-label or aria-labelledby when there is no visible text. */
+    iconOnly?: boolean;
+}
+/** Compact native action button; compose a Tooltip around it when an explanation is needed. */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ToolbarToggleButtonProps extends Omit<ToolbarButtonProps, "aria-pressed" | "active"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** A controlled or uncontrolled independent toggle, with native button keyboard activation. */
+declare const ToolbarToggleButton: React.ForwardRefExoticComponent<ToolbarToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, ToolbarToggleButton, type ToolbarToggleButtonProps };