@edux-design/buttons 0.1.3 → 0.2.0

package/dist/index.js

@@ -0,0 +1,850 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  ButtonCounter: () => ButtonCounter,
+  ButtonGroup: () => ButtonGroup,
+  ButtonGroupItem: () => ButtonGroupItem,
+  IconButton: () => IconButton,
+  MenuButton: () => MenuButton
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/IconButton.jsx
+var import_react = __toESM(require("react"));
+var import_utils = require("@edux-design/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(
+  ({
+    icon,
+    size = "medium",
+    isSecondary,
+    isDanger,
+    isBare,
+    disabled,
+    className,
+    ...props
+  }, ref) => {
+    let variant = "primary";
+    if (isBare) variant = "bare";
+    if (isSecondary) variant = "secondary";
+    if (isDanger) variant = "danger";
+    if (disabled) variant = "disabled";
+    if (process.env.NODE_ENV !== "production") {
+      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+      if (count > 1) {
+        console.warn(
+          "[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: "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",
+      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);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        role: "button",
+        type: "button",
+        "aria-disabled": disabled,
+        disabled,
+        className: STYLES,
+        ref,
+        ...props,
+        children: icon
+      }
+    );
+  }
+);
+
+// src/elements/Button.jsx
+var import_react2 = __toESM(require("react"));
+var import_utils2 = require("@edux-design/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(
+  ({
+    children,
+    startIcon,
+    endIcon,
+    size = "medium",
+    isSecondary,
+    isDanger,
+    isBare,
+    isStretched,
+    disabled,
+    className,
+    ...props
+  }, ref) => {
+    let variant = "primary";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
+    if (process.env.NODE_ENV !== "production") {
+      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
+        console.warn(
+          "[Button]: Multiple variant props passed. Using the highest priority only."
+        );
+      }
+    }
+    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 = {
+      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",
+      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]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        role: "button",
+        type: "button",
+        "aria-disabled": disabled,
+        disabled,
+        className: STYLES,
+        ref,
+        ...props,
+        children: [
+          startIcon,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }) : null,
+          endIcon
+        ]
+      }
+    );
+  }
+);
+
+// src/elements/MenuButton.jsx
+var import_react3 = __toESM(require("react"));
+var import_utils3 = require("@edux-design/utils");
+
+// ../icons/dist/index.mjs
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M13.586 12 9.293 7.707a1 1 0 0 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var Chevron_default = SvgChevron;
+
+// src/elements/MenuButton.jsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+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",
+    {
+      ...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, {}) })
+      ]
+    }
+  );
+});
+
+// src/elements/ButtonGroup.jsx
+var import_react4 = __toESM(require("react"));
+var import_utils4 = require("@edux-design/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SIZE_STYLES = {
+  small: {
+    button: "text-xs px-12 py-6 rounded-md "
+  },
+  medium: {
+    button: "text-sm px-12 py-6 rounded-md "
+  },
+  large: {
+    button: "text-base px-12 py-6 rounded-md"
+  }
+};
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser ? import_react4.useLayoutEffect : import_react4.useEffect;
+var ButtonGroup = (0, import_react4.forwardRef)(function ButtonGroup2({
+  value,
+  defaultValue,
+  onChange,
+  size = "medium",
+  isStretched = false,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const normalizedOptions = (0, import_react4.useMemo)(() => {
+    const childItems = (0, import_utils4.filterChildrenByDisplayName)(children, "ButtonGroupItem");
+    return childItems.map((child, index) => {
+      const props = child.props || {};
+      const hasValue = props.value !== void 0;
+      const safeValue = hasValue && props.value !== null ? props.value : index;
+      return {
+        ...props,
+        label: props.label ?? props.children ?? `Option ${index + 1}`,
+        value: safeValue
+      };
+    });
+  }, [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_react4.useState)(initialValue);
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value : internalValue;
+  (0, import_react4.useEffect)(() => {
+    if (!isControlled && defaultValue !== void 0) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  (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_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_react4.useCallback)(
+    (node) => {
+      containerRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const registerButtonRef = (0, import_react4.useCallback)((optionValue) => {
+    return (node) => {
+      if (!buttonRefs.current) return;
+      if (node) {
+        buttonRefs.current.set(optionValue, node);
+      } else {
+        buttonRefs.current.delete(optionValue);
+      }
+    };
+  }, []);
+  const updateIndicator = (0, import_react4.useCallback)(() => {
+    const container = containerRef.current;
+    const target = buttonRefs.current.get(selectedValue);
+    if (!container || !target) {
+      if (indicatorRef.current.width !== 0) {
+        indicatorRef.current = { width: 0, height: 0, x: 0, y: 0 };
+        setIndicator(indicatorRef.current);
+      }
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const next = {
+      width: targetRect.width,
+      height: targetRect.height,
+      x: targetRect.left - containerRect.left,
+      y: targetRect.top - containerRect.top
+    };
+    const prev = indicatorRef.current;
+    if (prev.width !== next.width || prev.height !== next.height || prev.x !== next.x || prev.y !== next.y) {
+      indicatorRef.current = next;
+      setIndicator(next);
+    }
+  }, [selectedValue]);
+  useIsomorphicLayoutEffect(() => {
+    updateIndicator();
+  }, [updateIndicator, normalizedOptions.length, size]);
+  (0, import_react4.useEffect)(() => {
+    if (!isBrowser) return;
+    const handleResize = () => updateIndicator();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator]);
+  (0, import_react4.useEffect)(() => {
+    if (!isBrowser) return;
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      updateIndicator();
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [updateIndicator]);
+  const focusOption = (0, import_react4.useCallback)((option) => {
+    const node = buttonRefs.current.get(option.value);
+    if (node) {
+      node.focus();
+    }
+  }, []);
+  const handleSelect = (0, import_react4.useCallback)(
+    (option) => {
+      if (option.disabled || option.value === selectedValue) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalValue(option.value);
+      }
+      if (typeof onChange === "function") {
+        onChange(option.value, option);
+      }
+    },
+    [isControlled, onChange, selectedValue]
+  );
+  const getNextEnabledIndex = (0, import_react4.useCallback)(
+    (startIndex, direction) => {
+      if (!normalizedOptions.length) return -1;
+      let nextIndex = startIndex;
+      for (let i = 0; i < normalizedOptions.length; i += 1) {
+        nextIndex = (nextIndex + direction + normalizedOptions.length) % normalizedOptions.length;
+        if (!normalizedOptions[nextIndex].disabled) {
+          return nextIndex;
+        }
+      }
+      return startIndex;
+    },
+    [normalizedOptions]
+  );
+  const findFirstEnabledIndex = (0, import_react4.useCallback)(() => {
+    return normalizedOptions.findIndex((option) => !option.disabled);
+  }, [normalizedOptions]);
+  const findLastEnabledIndex = (0, import_react4.useCallback)(() => {
+    for (let i = normalizedOptions.length - 1; i >= 0; i -= 1) {
+      if (!normalizedOptions[i].disabled) {
+        return i;
+      }
+    }
+    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-control-md rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    isStretched ? "w-full" : "w-auto",
+    className
+  );
+  const trackClasses = (0, import_utils4.cx)(
+    "relative isolate flex w-full items-center gap-8",
+    !isStretched && "w-auto"
+  );
+  const buttonBaseClasses = (0, import_utils4.cx)(
+    "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"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ...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)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (0, import_utils4.cx)(
+              "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, ${indicator.y - 4}px)`
+            }
+          }
+        ),
+        normalizedOptions.map((option, index) => {
+          const isActive = option.value === selectedValue;
+          const handleKeyDown = (event) => {
+            if (option.disabled) return;
+            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+              event.preventDefault();
+              const nextIndex = getNextEnabledIndex(index, 1);
+              const nextOption = normalizedOptions[nextIndex];
+              if (nextOption && nextOption !== option) {
+                focusOption(nextOption);
+                handleSelect(nextOption);
+              }
+            } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+              event.preventDefault();
+              const prevIndex = getNextEnabledIndex(index, -1);
+              const prevOption = normalizedOptions[prevIndex];
+              if (prevOption && prevOption !== option) {
+                focusOption(prevOption);
+                handleSelect(prevOption);
+              }
+            } else if (event.key === "Home") {
+              event.preventDefault();
+              const firstIndex = findFirstEnabledIndex();
+              const firstOption = firstIndex >= 0 ? normalizedOptions[firstIndex] : void 0;
+              if (firstOption && firstOption !== option) {
+                focusOption(firstOption);
+                handleSelect(firstOption);
+              }
+            } else if (event.key === "End") {
+              event.preventDefault();
+              const lastIndex = findLastEnabledIndex();
+              const lastOption = lastIndex >= 0 ? normalizedOptions[lastIndex] : void 0;
+              if (lastOption && lastOption !== option) {
+                focusOption(lastOption);
+                handleSelect(lastOption);
+              }
+            }
+          };
+          const buttonClasses = (0, import_utils4.cx)(
+            buttonBaseClasses,
+            option.disabled ? "cursor-not-allowed text-fg-inactive opacity-60" : "cursor-pointer text-fg-subtle hover:text-fg-base",
+            isActive && "text-fg-primary-emphasis",
+            !isActive && "hover:bg-bg-minimal-5 active:bg-bg-inactive"
+          );
+          const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
+          const endAdornment = option.endAdornment ?? option.endIcon;
+          const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "button",
+            {
+              ref: registerButtonRef(option.value),
+              type: "button",
+              role: "radio",
+              "aria-checked": isActive,
+              tabIndex: option.disabled ? -1 : index === activeTabStopIndex ? 0 : -1,
+              disabled: option.disabled,
+              className: buttonClasses,
+              onClick: () => handleSelect(option),
+              onKeyDown: handleKeyDown,
+              "data-state": isActive ? "active" : "inactive",
+              children: [
+                hasStartAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "flex items-center text-current",
+                    children: option.startAdornment
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
+                hasEndAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "flex items-center text-current",
+                    children: endAdornment
+                  }
+                )
+              ]
+            },
+            String(option.value)
+          );
+        })
+      ] })
+    }
+  );
+});
+
+// src/elements/ButtonGroupItem.jsx
+var import_react5 = __toESM(require("react"));
+function ButtonGroupItem(_props) {
+  return null;
+}
+ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/elements/ButtonCounter.jsx
+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_react6.forwardRef)(function ButtonCounter2({
+  value,
+  defaultValue = 1,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  children,
+  size = "medium",
+  isSecondary,
+  isDanger,
+  isBare,
+  isStretched,
+  disabled,
+  isEditable = false,
+  inputProps,
+  decrementIcon,
+  incrementIcon,
+  startIcon,
+  endIcon,
+  decrementButtonProps,
+  incrementButtonProps,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  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_react6.useCallback)(
+    (next) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      if (!isControlled) setInternalValue(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    [isControlled, max, min, onChange]
+  );
+  const decrementDisabled = !!disabled || !Number.isFinite(clampedValue) || clampedValue - step < min;
+  const incrementDisabled = !!disabled || !Number.isFinite(clampedValue) || clampedValue + step > max;
+  let variant = "primary";
+  if (disabled) {
+    variant = "disabled";
+  } else if (isDanger && isBare) {
+    variant = "dangerBare";
+  } else if (isDanger) {
+    variant = "danger";
+  } else if (isSecondary) {
+    variant = "secondary";
+  } else if (isBare) {
+    variant = "bare";
+  }
+  if (process.env.NODE_ENV !== "production") {
+    const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+    const hasAllowedCombo = isDanger && isBare && count === 2;
+    if (count > 1 && !hasAllowedCombo) {
+      console.warn(
+        "[ButtonCounter]: Multiple variant props passed. Using the highest priority only."
+      );
+    }
+    if (step <= 0) {
+      console.warn("[ButtonCounter]: step should be > 0.");
+    }
+  }
+  const CONTROL_SIZES = {
+    small: {
+      button: "size-control-sm text-sm",
+      display: "h-control-sm min-w-[48px] px-12 text-sm"
+    },
+    medium: {
+      button: "size-control-md text-base",
+      display: "h-control-md min-w-[56px] px-12 text-base"
+    },
+    large: {
+      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";
+  const defaultsDisplay = "flex items-center justify-center text-bold tracking-normal";
+  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"
+    },
+    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",
+      display: "border-y-2 border-x-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis"
+    },
+    bare: {
+      button: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      display: "bg-bg-base text-fg-primary-emphasis"
+    },
+    dangerBare: {
+      button: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
+      display: "bg-bg-base text-fg-danger-emphasis"
+    },
+    danger: {
+      button: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
+      display: "border-y-2 border-x-2 border-border-danger-emphasis bg-bg-danger-base text-white"
+    },
+    disabled: {
+      button: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed",
+      display: "border-y-2 border-x-2 border-border-subtle bg-bg-inactive text-fg-inactive"
+    }
+  };
+  const sizeStyles = CONTROL_SIZES[size] ?? CONTROL_SIZES.medium;
+  const variantStyles = variants[variant] ?? variants.primary;
+  const leftButtonStyles = (0, import_utils5.cx)(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-l-lg",
+    "relative z-10",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null
+  );
+  const rightButtonStyles = (0, import_utils5.cx)(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-r-lg",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null
+  );
+  const displayStyles = (0, import_utils5.cx)(
+    defaultsDisplay,
+    sizeStyles.display,
+    "relative z-0",
+    variantStyles.display,
+    isStretched ? "flex-1" : null
+  );
+  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 [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_react6.useCallback)(() => {
+    const trimmed = String(draftValue).trim();
+    if (trimmed === "") {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+    const next = Number(trimmed);
+    if (!Number.isFinite(next)) {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+    commitValue(next);
+  }, [clampedValue, commitValue, draftValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_utils5.cx)("inline-flex items-stretch", width, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            ...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)(
+              leftButtonStyles,
+              decrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
+              decrementButtonProps == null ? void 0 : decrementButtonProps.className
+            ),
+            onClick: (event) => {
+              var _a;
+              (_a = decrementButtonProps == null ? void 0 : decrementButtonProps.onClick) == null ? void 0 : _a.call(decrementButtonProps, event);
+              if (event.defaultPrevented) return;
+              commitValue(clampedValue - step);
+            },
+            children: effectiveDecrementIcon
+          }
+        ),
+        isEditable && children == null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            ...inputProps,
+            ref: inputRef,
+            type: "number",
+            inputMode: "numeric",
+            id: valueElementId,
+            disabled: !!disabled,
+            "aria-label": valueAriaLabel,
+            className: (0, import_utils5.cx)(
+              displayStyles,
+              "w-[44px] 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
+            ),
+            value: draftValue,
+            onChange: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, 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);
+              if (event.defaultPrevented) return;
+              setIsEditing(true);
+            },
+            onBlur: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onBlur) == null ? void 0 : _a.call(inputProps, 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);
+              if (event.defaultPrevented) return;
+              if (event.key === "Enter") {
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                setDraftValue(String(clampedValue));
+                event.currentTarget.blur();
+              }
+            }
+          }
+        ) : /* @__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)(
+              rightButtonStyles,
+              incrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
+              incrementButtonProps == null ? void 0 : incrementButtonProps.className
+            ),
+            onClick: (event) => {
+              var _a;
+              (_a = incrementButtonProps == null ? void 0 : incrementButtonProps.onClick) == null ? void 0 : _a.call(incrementButtonProps, event);
+              if (event.defaultPrevented) return;
+              commitValue(clampedValue + step);
+            },
+            children: effectiveIncrementIcon
+          }
+        )
+      ]
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonCounter,
+  ButtonGroup,
+  ButtonGroupItem,
+  IconButton,
+  MenuButton
+});