@edux-design/buttons 0.2.0 → 0.3.0

package/dist/index.js

@@ -34,7 +34,12 @@ __export(index_exports, {
   ButtonGroup: () => ButtonGroup,
   ButtonGroupItem: () => ButtonGroupItem,
   IconButton: () => IconButton,
-  MenuButton: () => MenuButton
+  MenuButton: () => MenuButton,
+  Toolbar: () => Toolbar,
+  ToolbarButton: () => ToolbarButton,
+  ToolbarGroup: () => ToolbarGroup,
+  ToolbarSeparator: () => ToolbarSeparator,
+  ToolbarToggleButton: () => ToolbarToggleButton
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -75,19 +80,19 @@ var IconButton = (0, import_react.forwardRef)(
       }
     }
     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 = {
+    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 = (0, import_utils.cx)(defaults, sizes[size], variants[variant], className);
+    const STYLES = (0, import_utils.cx)(defaults, sizes2[size], variants[variant], className);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -145,21 +150,21 @@ var Button = (0, import_react2.forwardRef)(
     }
     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 = (0, import_utils2.cx)(defaults, sizes[size], width, fonts, variants[variant]);
+    const STYLES = (0, import_utils2.cx)(defaults, sizes2[size], width, fonts, variants[variant]);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
@@ -599,7 +604,7 @@ var ButtonCounter = (0, import_react6.forwardRef)(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]
   );
@@ -632,15 +637,15 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
   const CONTROL_SIZES = {
     small: {
       button: "size-control-sm text-sm",
-      display: "h-control-sm min-w-[48px] px-12 text-sm"
+      display: "h-control-sm min-w-48 px-12 text-sm"
     },
     medium: {
       button: "size-control-md text-base",
-      display: "h-control-md min-w-[56px] px-12 text-base"
+      display: "h-control-md min-w-56 px-12 text-base"
     },
     large: {
       button: "size-control-lg text-lg",
-      display: "h-control-lg min-w-[72px] px-16 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";
@@ -648,8 +653,8 @@ var ButtonCounter = (0, import_react6.forwardRef)(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",
@@ -699,8 +704,8 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
   const generatedValueId = (0, import_react6.useId)();
-  const valueElementId = (inputProps == null ? void 0 : inputProps.id) ?? generatedValueId;
-  const valueAriaLabel = (inputProps == null ? void 0 : inputProps["aria-label"]) ?? ariaLabel ?? "Value";
+  const valueElementId = inputProps?.id ?? generatedValueId;
+  const valueAriaLabel = inputProps?.["aria-label"] ?? ariaLabel ?? "Value";
   const [draftValue, setDraftValue] = (0, import_react6.useState)(String(clampedValue));
   const [isEditing, setIsEditing] = (0, import_react6.useState)(false);
   const inputRef = (0, import_react6.useRef)(null);
@@ -733,18 +738,17 @@ var ButtonCounter = (0, import_react6.forwardRef)(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: (0, import_utils5.cx)(
               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);
             },
@@ -763,34 +767,30 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
             "aria-label": valueAriaLabel,
             className: (0, import_utils5.cx)(
               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();
@@ -817,18 +817,17 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
           {
             ...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: (0, import_utils5.cx)(
               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);
             },
@@ -839,6 +838,264 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
     }
   );
 });
+
+// src/elements/Toolbar.tsx
+var import_react7 = require("react");
+var import_utils6 = require("@edux-design/utils");
+var import_jsx_runtime7 = require("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 = (0, import_react7.forwardRef)(
+  function Toolbar2({
+    keyboardNavigation = "native",
+    orientation = "horizontal",
+    loop = true,
+    className,
+    children,
+    onKeyDown,
+    onFocusCapture,
+    ...props
+  }, forwardedRef) {
+    const rootRef = (0, import_react7.useRef)(null);
+    (0, import_react7.useImperativeHandle)(forwardedRef, () => rootRef.current);
+    const lastFocused = (0, import_react7.useRef)(null);
+    const originalTabIndexes = (0, import_react7.useRef)(
+      /* @__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;
+    }
+    (0, import_react7.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ...props,
+        ref: rootRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        "data-edux-toolbar": "",
+        className: (0, import_utils6.cx)(
+          "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 = (0, import_react7.forwardRef)(
+  function ToolbarGroup2({ orientation = "horizontal", className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ...props,
+        ref,
+        role: "group",
+        className: (0, import_utils6.cx)(
+          "inline-flex gap-4",
+          orientation === "vertical" ? "flex-col" : "flex-wrap items-center",
+          className
+        )
+      }
+    );
+  }
+);
+var ToolbarSeparator = (0, import_react7.forwardRef)(function ToolbarSeparator2({ orientation = "vertical", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: (0, import_utils6.cx)(
+        "shrink-0 border-border-subtle",
+        orientation === "vertical" ? "h-control-sm border-l" : "w-full border-t",
+        className
+      )
+    }
+  );
+});
+
+// src/elements/ToolbarButton.tsx
+var import_react8 = require("react");
+var import_utils7 = require("@edux-design/utils");
+var import_jsx_runtime8 = require("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 = (0, import_react8.forwardRef)(
+  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__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        "aria-pressed": active ? true : void 0,
+        ...props,
+        ref,
+        type,
+        "data-edux-toolbar-button": "",
+        "data-state": pressed ? "on" : "off",
+        className: (0, import_utils7.cx)(
+          "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__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex shrink-0 items-center",
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+var ToolbarToggleButton = (0, import_react8.forwardRef)(function ToolbarToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, ...props }, ref) {
+  const [internalPressed, setInternalPressed] = (0, import_react8.useState)(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ToolbarButton,
+    {
+      ...props,
+      ref,
+      "aria-pressed": isPressed,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (pressed === void 0) setInternalPressed(!isPressed);
+        onPressedChange?.(!isPressed, event);
+      }
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -846,5 +1103,10 @@ var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
   ButtonGroup,
   ButtonGroupItem,
   IconButton,
-  MenuButton
+  MenuButton,
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarToggleButton
 });