@edux-design/buttons 0.1.4 → 0.2.0

package/dist/index.js

@@ -65,12 +65,20 @@ var IconButton = (0, import_react.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"
+      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",
@@ -173,13 +181,7 @@ var Button = (0, import_react2.forwardRef)(
 );
 
 // src/elements/MenuButton.jsx
-var import_react4 = __toESM(require("react"));
-
-// src/util/MenuButtonContext.jsx
 var import_react3 = __toESM(require("react"));
-var MenuButtonContext = (0, import_react3.createContext)();
-
-// src/elements/MenuButton.jsx
 var import_utils3 = require("@edux-design/utils");
 
 // ../icons/dist/index.mjs
@@ -208,22 +210,41 @@ var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = (0, import_utils3.cx)(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+var MenuButton = (0, import_react3.forwardRef)(function MenuButton2({
+  children,
+  caret,
+  size = "medium",
+  className,
+  type = "button",
+  "aria-haspopup": ariaHasPopup = "menu",
+  ...props
+}, ref) {
+  const styles = (0, import_utils3.cx)(
+    "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",
+    {
+      "min-h-control-sm text-sm": size === "small",
+      "min-h-control-md text-base": size === "medium"
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
     {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === void 0
+      ...props,
+      ref,
+      type,
+      "aria-haspopup": ariaHasPopup,
+      className: styles,
+      children: [
+        children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "flex items-center text-current", children: caret ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron_default, {}) })
+      ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron_default, {})
-  ] });
-}
+});
 
 // src/elements/ButtonGroup.jsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_utils4 = require("@edux-design/utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SIZE_STYLES = {
@@ -238,8 +259,8 @@ var SIZE_STYLES = {
   }
 };
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? import_react5.useLayoutEffect : import_react5.useEffect;
-var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
+var useIsomorphicLayoutEffect = isBrowser ? import_react4.useLayoutEffect : import_react4.useEffect;
+var ButtonGroup = (0, import_react4.forwardRef)(function ButtonGroup2({
   value,
   defaultValue,
   onChange,
@@ -249,7 +270,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   children,
   ...rest
 }, forwardedRef) {
-  const normalizedOptions = (0, import_react5.useMemo)(() => {
+  const normalizedOptions = (0, import_react4.useMemo)(() => {
     const childItems = (0, import_utils4.filterChildrenByDisplayName)(children, "ButtonGroupItem");
     return childItems.map((child, index) => {
       const props = child.props || {};
@@ -264,30 +285,30 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   }, [children]);
   const sizeStyles = SIZE_STYLES[size] ?? SIZE_STYLES.medium;
   const initialValue = value ?? defaultValue ?? (normalizedOptions.length ? normalizedOptions[0].value : void 0);
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(initialValue);
+  const [internalValue, setInternalValue] = (0, import_react4.useState)(initialValue);
   const isControlled = value !== void 0;
   const selectedValue = isControlled ? value : internalValue;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isControlled && defaultValue !== void 0) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isControlled) return;
     if (normalizedOptions.length && !normalizedOptions.some((option) => option.value === internalValue)) {
       setInternalValue(normalizedOptions[0].value);
     }
   }, [internalValue, isControlled, normalizedOptions]);
-  const buttonRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const containerRef = (0, import_react5.useRef)(null);
-  const indicatorRef = (0, import_react5.useRef)({ width: 0, height: 0, x: 0, y: 0 });
-  const [indicator, setIndicator] = (0, import_react5.useState)({
+  const buttonRefs = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const containerRef = (0, import_react4.useRef)(null);
+  const indicatorRef = (0, import_react4.useRef)({ width: 0, height: 0, x: 0, y: 0 });
+  const [indicator, setIndicator] = (0, import_react4.useState)({
     width: 0,
     height: 0,
     x: 0,
     y: 0
   });
-  const setContainerRef = (0, import_react5.useCallback)(
+  const setContainerRef = (0, import_react4.useCallback)(
     (node) => {
       containerRef.current = node;
       if (typeof forwardedRef === "function") {
@@ -298,7 +319,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [forwardedRef]
   );
-  const registerButtonRef = (0, import_react5.useCallback)((optionValue) => {
+  const registerButtonRef = (0, import_react4.useCallback)((optionValue) => {
     return (node) => {
       if (!buttonRefs.current) return;
       if (node) {
@@ -308,7 +329,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
       }
     };
   }, []);
-  const updateIndicator = (0, import_react5.useCallback)(() => {
+  const updateIndicator = (0, import_react4.useCallback)(() => {
     const container = containerRef.current;
     const target = buttonRefs.current.get(selectedValue);
     if (!container || !target) {
@@ -335,13 +356,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   useIsomorphicLayoutEffect(() => {
     updateIndicator();
   }, [updateIndicator, normalizedOptions.length, size]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isBrowser) return;
     const handleResize = () => updateIndicator();
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [updateIndicator]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isBrowser) return;
     const node = containerRef.current;
     if (!node || typeof ResizeObserver === "undefined") return;
@@ -351,13 +372,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     observer.observe(node);
     return () => observer.disconnect();
   }, [updateIndicator]);
-  const focusOption = (0, import_react5.useCallback)((option) => {
+  const focusOption = (0, import_react4.useCallback)((option) => {
     const node = buttonRefs.current.get(option.value);
     if (node) {
       node.focus();
     }
   }, []);
-  const handleSelect = (0, import_react5.useCallback)(
+  const handleSelect = (0, import_react4.useCallback)(
     (option) => {
       if (option.disabled || option.value === selectedValue) {
         return;
@@ -371,7 +392,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [isControlled, onChange, selectedValue]
   );
-  const getNextEnabledIndex = (0, import_react5.useCallback)(
+  const getNextEnabledIndex = (0, import_react4.useCallback)(
     (startIndex, direction) => {
       if (!normalizedOptions.length) return -1;
       let nextIndex = startIndex;
@@ -385,10 +406,10 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [normalizedOptions]
   );
-  const findFirstEnabledIndex = (0, import_react5.useCallback)(() => {
+  const findFirstEnabledIndex = (0, import_react4.useCallback)(() => {
     return normalizedOptions.findIndex((option) => !option.disabled);
   }, [normalizedOptions]);
-  const findLastEnabledIndex = (0, import_react5.useCallback)(() => {
+  const findLastEnabledIndex = (0, import_react4.useCallback)(() => {
     for (let i = normalizedOptions.length - 1; i >= 0; i -= 1) {
       if (!normalizedOptions[i].disabled) {
         return i;
@@ -397,8 +418,15 @@ var ButtonGroup = (0, import_react5.forwardRef)(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 = (0, import_utils4.cx)(
-    "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
   );
@@ -407,7 +435,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     !isStretched && "w-auto"
   );
   const buttonBaseClasses = (0, import_utils4.cx)(
-    "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"
   );
@@ -417,6 +445,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
       ...rest,
       ref: setContainerRef,
       role: "radiogroup",
+      "aria-orientation": "horizontal",
       className: rootClasses,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: trackClasses, children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -424,13 +453,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
           {
             "aria-hidden": "true",
             className: (0, import_utils4.cx)(
-              "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)`
             }
           }
         ),
@@ -488,6 +517,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(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),
@@ -522,17 +552,17 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
 });
 
 // src/elements/ButtonGroupItem.jsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/elements/ButtonCounter.jsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_utils5 = require("@edux-design/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
+var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
   value,
   defaultValue = 1,
   onChange,
@@ -555,16 +585,17 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   decrementButtonProps,
   incrementButtonProps,
   className,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  const clampedValue = (0, import_react7.useMemo)(() => {
+  const clampedValue = (0, import_react6.useMemo)(() => {
     const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
     return Math.min(max, Math.max(min, safe));
   }, [currentValue, defaultValue, max, min]);
-  const commitValue = (0, import_react7.useCallback)(
+  const commitValue = (0, import_react6.useCallback)(
     (next) => {
       const clamped = Math.min(max, Math.max(min, next));
       if (!isControlled) setInternalValue(clamped);
@@ -600,16 +631,16 @@ var ButtonCounter = (0, import_react7.forwardRef)(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-[48px] 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-[56px] 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-[72px] 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";
@@ -667,14 +698,17 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   );
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
-  const [draftValue, setDraftValue] = (0, import_react7.useState)(String(clampedValue));
-  const [isEditing, setIsEditing] = (0, import_react7.useState)(false);
-  const inputRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  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 [draftValue, setDraftValue] = (0, import_react6.useState)(String(clampedValue));
+  const [isEditing, setIsEditing] = (0, import_react6.useState)(false);
+  const inputRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (isEditing) return;
     setDraftValue(String(clampedValue));
   }, [clampedValue, isEditing]);
-  const commitDraft = (0, import_react7.useCallback)(() => {
+  const commitDraft = (0, import_react6.useCallback)(() => {
     const trimmed = String(draftValue).trim();
     if (trimmed === "") {
       setDraftValue(String(clampedValue));
@@ -700,6 +734,7 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
             ...decrementButtonProps,
             type: "button",
             "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-controls": valueElementId,
             "aria-disabled": decrementDisabled,
             disabled: decrementDisabled,
             className: (0, import_utils5.cx)(
@@ -723,8 +758,9 @@ var ButtonCounter = (0, import_react7.forwardRef)(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: (0, import_utils5.cx)(
               displayStyles,
               "w-[44px] text-center outline-none bg-transparent text-fg-base",
@@ -765,13 +801,24 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
               }
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_utils5.cx)(displayStyles, "select-none"), children: children ?? clampedValue }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "output",
+          {
+            id: valueElementId,
+            "aria-label": valueAriaLabel,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: (0, import_utils5.cx)(displayStyles, "select-none"),
+            children: children ?? clampedValue
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             ...incrementButtonProps,
             type: "button",
             "aria-label": (incrementButtonProps == null ? void 0 : incrementButtonProps["aria-label"]) ?? "Increase",
+            "aria-controls": valueElementId,
             "aria-disabled": incrementDisabled,
             disabled: incrementDisabled,
             className: (0, import_utils5.cx)(