@edux-design/buttons 0.1.4 → 0.3.0

package/dist/index.mjs

@@ -25,21 +25,29 @@ var IconButton = forwardRef(
           "[IconButton]: Multiple variant props passed. Using the highest priority only."
         );
       }
+      const hasAccessibleName = Boolean(
+        props["aria-label"] || props["aria-labelledby"]
+      );
+      if (!hasAccessibleName) {
+        console.warn(
+          "[IconButton]: Provide an accessible name with aria-label or aria-labelledby."
+        );
+      }
     }
     const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
-    const sizes = {
-      small: "h-[36px] w-[36px] text-sm",
-      medium: "h-[44px] w-[44px] text-base",
-      large: "h-[56px] w-[56px] text-lg"
+    const sizes2 = {
+      small: "size-control-sm text-sm",
+      medium: "size-control-md text-base",
+      large: "size-control-lg text-lg"
     };
     const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed"
     };
-    const STYLES = cx(defaults, sizes[size], variants[variant], className);
+    const STYLES = cx(defaults, sizes2[size], variants[variant], className);
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -97,21 +105,21 @@ var Button = forwardRef2(
     }
     const defaults = "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
     const fonts = "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
-    const sizes = {
+    const sizes2 = {
       small: "h-control-sm py-8 px-16 rounded-lg text-sm",
       medium: "h-control-md py-8 px-16 rounded-lg text-base",
       large: "h-control-lg py-8 px-16 rounded-lg text-lg"
     };
     const width = isStretched ? "w-full" : "w-fit-content";
     const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
       dangerBare: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
     };
-    const STYLES = cx2(defaults, sizes[size], width, fonts, variants[variant]);
+    const STYLES = cx2(defaults, sizes2[size], width, fonts, variants[variant]);
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -133,17 +141,11 @@ var Button = forwardRef2(
 );
 
 // src/elements/MenuButton.jsx
-import React4 from "react";
-
-// src/util/MenuButtonContext.jsx
-import React3, { createContext, useContext } from "react";
-var MenuButtonContext = createContext();
-
-// src/elements/MenuButton.jsx
+import React3, { forwardRef as forwardRef3 } from "react";
 import { cx as cx3 } from "@edux-design/utils";
 
 // ../icons/dist/index.mjs
-import { jsxs as jsxs2, jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var SvgChevron = (props) => /* @__PURE__ */ jsx3(
   "svg",
   {
@@ -168,23 +170,42 @@ var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = cx3(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+var MenuButton = forwardRef3(function MenuButton2({
+  children,
+  caret,
+  size = "medium",
+  className,
+  type = "button",
+  "aria-haspopup": ariaHasPopup = "menu",
+  ...props
+}, ref) {
+  const styles = cx3(
+    "inline-flex items-center justify-center gap-8 rounded-lg border-2 border-border-primary-base bg-bg-base px-16 text-fg-primary-emphasis transition-all duration-300 ease-in-out outline-none focus:shadow-focus focus-visible:shadow-focus disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-bg-inactive disabled:text-fg-inactive",
     {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === void 0
+      "min-h-control-sm text-sm": size === "small",
+      "min-h-control-md text-base": size === "medium"
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      "aria-haspopup": ariaHasPopup,
+      className: styles,
+      children: [
+        children ? /* @__PURE__ */ jsx4("span", { children }) : null,
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "flex items-center text-current", children: caret ?? /* @__PURE__ */ jsx4(Chevron_default, {}) })
+      ]
     }
   );
-  return /* @__PURE__ */ jsxs3(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ jsx4("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ jsx4(Chevron_default, {})
-  ] });
-}
+});
 
 // src/elements/ButtonGroup.jsx
-import React5, {
-  forwardRef as forwardRef3,
+import React4, {
+  forwardRef as forwardRef4,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -207,7 +228,7 @@ var SIZE_STYLES = {
 };
 var isBrowser = typeof window !== "undefined";
 var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-var ButtonGroup = forwardRef3(function ButtonGroup2({
+var ButtonGroup = forwardRef4(function ButtonGroup2({
   value,
   defaultValue,
   onChange,
@@ -365,8 +386,15 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
     return -1;
   }, [normalizedOptions]);
   const indicatorVisible = indicator.width > 0 && indicator.height > 0;
+  const selectedIndex = normalizedOptions.findIndex(
+    (option) => option.value === selectedValue && !option.disabled
+  );
+  const firstEnabledIndex = normalizedOptions.findIndex(
+    (option) => !option.disabled
+  );
+  const activeTabStopIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
   const rootClasses = cx4(
-    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    "inline-flex h-control-md rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
     isStretched ? "w-full" : "w-auto",
     className
   );
@@ -375,7 +403,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
     !isStretched && "w-auto"
   );
   const buttonBaseClasses = cx4(
-    "relative z-10 h-[36px] inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
+    "relative z-10 h-control-sm inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
     sizeStyles.button,
     isStretched ? "flex-1" : "w-auto"
   );
@@ -385,6 +413,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
       ...rest,
       ref: setContainerRef,
       role: "radiogroup",
+      "aria-orientation": "horizontal",
       className: rootClasses,
       children: /* @__PURE__ */ jsxs4("div", { className: trackClasses, children: [
         /* @__PURE__ */ jsx5(
@@ -392,13 +421,13 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
           {
             "aria-hidden": "true",
             className: cx4(
-              "pointer-events-none h-[44px] absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
+              "pointer-events-none h-control-md absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
               !indicatorVisible && "opacity-0"
             ),
             style: {
               width: indicator.width || void 0,
               height: indicator.height || void 0,
-              transform: `translate(${indicator.x - 4}px`
+              transform: `translate(${indicator.x - 4}px, ${indicator.y - 4}px)`
             }
           }
         ),
@@ -456,6 +485,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
               type: "button",
               role: "radio",
               "aria-checked": isActive,
+              tabIndex: option.disabled ? -1 : index === activeTabStopIndex ? 0 : -1,
               disabled: option.disabled,
               className: buttonClasses,
               onClick: () => handleSelect(option),
@@ -490,24 +520,25 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
 });
 
 // src/elements/ButtonGroupItem.jsx
-import React6 from "react";
+import React5 from "react";
 function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/elements/ButtonCounter.jsx
-import React7, {
-  forwardRef as forwardRef4,
+import React6, {
+  forwardRef as forwardRef5,
   useCallback as useCallback2,
   useEffect as useEffect2,
+  useId,
   useMemo as useMemo2,
   useRef as useRef2,
   useState as useState2
 } from "react";
 import { cx as cx5 } from "@edux-design/utils";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var ButtonCounter = forwardRef4(function ButtonCounter2({
+var ButtonCounter = forwardRef5(function ButtonCounter2({
   value,
   defaultValue = 1,
   onChange,
@@ -530,6 +561,7 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   decrementButtonProps,
   incrementButtonProps,
   className,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) {
   const isControlled = value !== void 0;
@@ -543,7 +575,7 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
     (next) => {
       const clamped = Math.min(max, Math.max(min, next));
       if (!isControlled) setInternalValue(clamped);
-      onChange == null ? void 0 : onChange(clamped);
+      onChange?.(clamped);
     },
     [isControlled, max, min, onChange]
   );
@@ -575,16 +607,16 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   }
   const CONTROL_SIZES = {
     small: {
-      button: "h-[36px] w-[36px] text-sm",
-      display: "h-[36px] min-w-[48px] px-12 text-sm"
+      button: "size-control-sm text-sm",
+      display: "h-control-sm min-w-48 px-12 text-sm"
     },
     medium: {
-      button: "h-[44px] w-[44px] text-base",
-      display: "h-[44px] min-w-[56px] px-12 text-base"
+      button: "size-control-md text-base",
+      display: "h-control-md min-w-56 px-12 text-base"
     },
     large: {
-      button: "h-[56px] w-[56px] text-lg",
-      display: "h-[56px] min-w-[72px] px-16 text-lg"
+      button: "size-control-lg text-lg",
+      display: "h-control-lg min-w-72 px-16 text-lg"
     }
   };
   const defaultsButton = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
@@ -592,8 +624,8 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   const width = isStretched ? "w-full" : "w-fit-content";
   const variants = {
     primary: {
-      button: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
-      display: "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white"
+      button: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      display: "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert"
     },
     secondary: {
       button: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
@@ -642,6 +674,9 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   );
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+  const generatedValueId = useId();
+  const valueElementId = inputProps?.id ?? generatedValueId;
+  const valueAriaLabel = inputProps?.["aria-label"] ?? ariaLabel ?? "Value";
   const [draftValue, setDraftValue] = useState2(String(clampedValue));
   const [isEditing, setIsEditing] = useState2(false);
   const inputRef = useRef2(null);
@@ -674,17 +709,17 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
           {
             ...decrementButtonProps,
             type: "button",
-            "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-label": decrementButtonProps?.["aria-label"] ?? "Decrease",
+            "aria-controls": valueElementId,
             "aria-disabled": decrementDisabled,
             disabled: decrementDisabled,
             className: cx5(
               leftButtonStyles,
               decrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
-              decrementButtonProps == null ? void 0 : decrementButtonProps.className
+              decrementButtonProps?.className
             ),
             onClick: (event) => {
-              var _a;
-              (_a = decrementButtonProps == null ? void 0 : decrementButtonProps.onClick) == null ? void 0 : _a.call(decrementButtonProps, event);
+              decrementButtonProps?.onClick?.(event);
               if (event.defaultPrevented) return;
               commitValue(clampedValue - step);
             },
@@ -698,38 +733,35 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
             ref: inputRef,
             type: "number",
             inputMode: "numeric",
+            id: valueElementId,
             disabled: !!disabled,
-            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            "aria-label": valueAriaLabel,
             className: cx5(
               displayStyles,
-              "w-[44px] text-center outline-none bg-transparent text-fg-base",
+              "w-control-md text-center outline-none bg-transparent text-fg-base",
               "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0",
               "focus:shadow-focus focus-visible:shadow-focus focus:z-15 focus-within:z-15",
-              inputProps == null ? void 0 : inputProps.className
+              inputProps?.className
             ),
             value: draftValue,
             onChange: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onChange?.(event);
               if (event.defaultPrevented) return;
               setDraftValue(event.target.value);
             },
             onFocus: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onFocus) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onFocus?.(event);
               if (event.defaultPrevented) return;
               setIsEditing(true);
             },
             onBlur: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onBlur) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onBlur?.(event);
               if (event.defaultPrevented) return;
               setIsEditing(false);
               commitDraft();
             },
             onKeyDown: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onKeyDown?.(event);
               if (event.defaultPrevented) return;
               if (event.key === "Enter") {
                 event.currentTarget.blur();
@@ -740,23 +772,33 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
               }
             }
           }
-        ) : /* @__PURE__ */ jsx6("div", { className: cx5(displayStyles, "select-none"), children: children ?? clampedValue }),
+        ) : /* @__PURE__ */ jsx6(
+          "output",
+          {
+            id: valueElementId,
+            "aria-label": valueAriaLabel,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: cx5(displayStyles, "select-none"),
+            children: children ?? clampedValue
+          }
+        ),
         /* @__PURE__ */ jsx6(
           "button",
           {
             ...incrementButtonProps,
             type: "button",
-            "aria-label": (incrementButtonProps == null ? void 0 : incrementButtonProps["aria-label"]) ?? "Increase",
+            "aria-label": incrementButtonProps?.["aria-label"] ?? "Increase",
+            "aria-controls": valueElementId,
             "aria-disabled": incrementDisabled,
             disabled: incrementDisabled,
             className: cx5(
               rightButtonStyles,
               incrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
-              incrementButtonProps == null ? void 0 : incrementButtonProps.className
+              incrementButtonProps?.className
             ),
             onClick: (event) => {
-              var _a;
-              (_a = incrementButtonProps == null ? void 0 : incrementButtonProps.onClick) == null ? void 0 : _a.call(incrementButtonProps, event);
+              incrementButtonProps?.onClick?.(event);
               if (event.defaultPrevented) return;
               commitValue(clampedValue + step);
             },
@@ -767,11 +809,279 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
     }
   );
 });
+
+// src/elements/Toolbar.tsx
+import {
+  forwardRef as forwardRef6,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useRef as useRef3
+} from "react";
+import { cx as cx6 } from "@edux-design/utils";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function toolbarButtons(root) {
+  return Array.from(
+    root.querySelectorAll("[data-edux-toolbar-button]")
+  ).filter((button) => {
+    if (button.closest("[data-edux-toolbar]") !== root) return false;
+    if (button.disabled || button.getAttribute("aria-disabled") === "true")
+      return false;
+    for (let node = button; node; node = node.parentElement) {
+      if (node.hidden || node.hasAttribute("inert") || node.getAttribute("aria-hidden") === "true")
+        return false;
+      const styles = node.ownerDocument.defaultView?.getComputedStyle(node);
+      if (styles?.display === "none" || styles?.visibility === "hidden")
+        return false;
+      if (node === root) break;
+    }
+    return true;
+  });
+}
+var Toolbar = forwardRef6(
+  function Toolbar2({
+    keyboardNavigation = "native",
+    orientation = "horizontal",
+    loop = true,
+    className,
+    children,
+    onKeyDown,
+    onFocusCapture,
+    ...props
+  }, forwardedRef) {
+    const rootRef = useRef3(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const lastFocused = useRef3(null);
+    const originalTabIndexes = useRef3(
+      /* @__PURE__ */ new Map()
+    );
+    function syncTabStops() {
+      const root = rootRef.current;
+      if (!root || keyboardNavigation !== "roving") return;
+      const buttons = toolbarButtons(root);
+      const active = buttons.includes(lastFocused.current) ? lastFocused.current : buttons[0];
+      root.querySelectorAll("[data-edux-toolbar-button]").forEach((button) => {
+        const nextTabIndex = button === active ? 0 : -1;
+        if (button.closest("[data-edux-toolbar]") !== root) return;
+        if (!originalTabIndexes.current.has(button))
+          originalTabIndexes.current.set(
+            button,
+            button.getAttribute("tabindex")
+          );
+        if (button.tabIndex !== nextTabIndex) button.tabIndex = nextTabIndex;
+      });
+      lastFocused.current = active ?? null;
+    }
+    useEffect3(() => {
+      const root = rootRef.current;
+      if (!root || keyboardNavigation !== "roving") return;
+      syncTabStops();
+      const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(syncTabStops);
+      observer?.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: [
+          "disabled",
+          "aria-disabled",
+          "hidden",
+          "inert",
+          "aria-hidden",
+          "class",
+          "style",
+          "tabindex"
+        ]
+      });
+      return () => {
+        observer?.disconnect();
+        originalTabIndexes.current.forEach((value, button) => {
+          if (value === null) button.removeAttribute("tabindex");
+          else button.setAttribute("tabindex", value);
+        });
+        originalTabIndexes.current.clear();
+      };
+    }, [keyboardNavigation]);
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ...props,
+        ref: rootRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        "data-edux-toolbar": "",
+        className: cx6(
+          "flex min-w-0 flex-wrap gap-8",
+          orientation === "vertical" ? "flex-col items-start" : "items-center",
+          className
+        ),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          const target = event.target;
+          if (target instanceof HTMLButtonElement && target.closest("[data-edux-toolbar]") === event.currentTarget) {
+            if (toolbarButtons(event.currentTarget).includes(target))
+              lastFocused.current = target;
+            syncTabStops();
+          }
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (keyboardNavigation !== "roving" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+          const root = event.currentTarget;
+          const target = event.target;
+          if (!(target instanceof HTMLButtonElement) || target.closest("[data-edux-toolbar]") !== root)
+            return;
+          const buttons = toolbarButtons(root);
+          const index = buttons.indexOf(target);
+          if (index === -1) return;
+          let next;
+          if (event.key === "Home") next = 0;
+          else if (event.key === "End") next = buttons.length - 1;
+          else {
+            const directionValue = root.ownerDocument.defaultView?.getComputedStyle(root).direction || root.closest("[dir]")?.getAttribute("dir");
+            const rtl = directionValue === "rtl";
+            const forward = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+            const backward = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+            if (event.key !== forward && event.key !== backward) return;
+            const direction = event.key === forward ? 1 : -1;
+            next = loop ? (index + direction + buttons.length) % buttons.length : Math.max(0, Math.min(buttons.length - 1, index + direction));
+          }
+          event.preventDefault();
+          buttons[next]?.focus();
+        },
+        children
+      }
+    );
+  }
+);
+var ToolbarGroup = forwardRef6(
+  function ToolbarGroup2({ orientation = "horizontal", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ...props,
+        ref,
+        role: "group",
+        className: cx6(
+          "inline-flex gap-4",
+          orientation === "vertical" ? "flex-col" : "flex-wrap items-center",
+          className
+        )
+      }
+    );
+  }
+);
+var ToolbarSeparator = forwardRef6(function ToolbarSeparator2({ orientation = "vertical", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cx6(
+        "shrink-0 border-border-subtle",
+        orientation === "vertical" ? "h-control-sm border-l" : "w-full border-t",
+        className
+      )
+    }
+  );
+});
+
+// src/elements/ToolbarButton.tsx
+import { forwardRef as forwardRef7, useState as useState3 } from "react";
+import { cx as cx7 } from "@edux-design/utils";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizes = {
+  small: "h-control-sm min-w-control-sm text-sm",
+  medium: "h-control-md min-w-control-md text-base",
+  large: "h-control-lg min-w-control-lg text-lg"
+};
+var ToolbarButton = forwardRef7(
+  function ToolbarButton2({
+    active = false,
+    size = "small",
+    variant = "neutral",
+    icon,
+    iconOnly = false,
+    children,
+    className,
+    type = "button",
+    onClick,
+    ...props
+  }, ref) {
+    const pressed = active || props["aria-pressed"] === true || props["aria-pressed"] === "true" || props["aria-pressed"] === "mixed";
+    const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
+    const colours = {
+      neutral: pressed ? "border-border-primary-base bg-bg-primary-subtle text-fg-primary-emphasis" : "border-transparent bg-transparent text-fg-base hover:bg-bg-minimal active:bg-bg-inactive",
+      primary: pressed ? "border-border-primary-emphasis bg-bg-primary-subtle text-fg-primary-emphasis" : "border-transparent bg-transparent text-fg-primary-emphasis hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
+      danger: pressed ? "border-border-danger-emphasis bg-bg-danger-subtle text-fg-danger-emphasis" : "border-transparent bg-transparent text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle"
+    };
+    return /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        "aria-pressed": active ? true : void 0,
+        ...props,
+        ref,
+        type,
+        "data-edux-toolbar-button": "",
+        "data-state": pressed ? "on" : "off",
+        className: cx7(
+          "inline-flex shrink-0 items-center justify-center gap-8 whitespace-nowrap rounded-md border-2 font-semibold cursor-pointer outline-none transition-colors duration-150 motion-reduce:transition-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+          sizes[size],
+          iconOnly ? "aspect-square p-0" : "px-8",
+          disabled ? "border-border-subtle bg-bg-inactive text-fg-inactive" : colours[variant],
+          className
+        ),
+        onClick: (event) => {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx8(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex shrink-0 items-center",
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+var ToolbarToggleButton = forwardRef7(function ToolbarToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, ...props }, ref) {
+  const [internalPressed, setInternalPressed] = useState3(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /* @__PURE__ */ jsx8(
+    ToolbarButton,
+    {
+      ...props,
+      ref,
+      "aria-pressed": isPressed,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (pressed === void 0) setInternalPressed(!isPressed);
+        onPressedChange?.(!isPressed, event);
+      }
+    }
+  );
+});
 export {
   Button,
   ButtonCounter,
   ButtonGroup,
   ButtonGroupItem,
   IconButton,
-  MenuButton
+  MenuButton,
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarToggleButton
 };