@edux-design/buttons 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @edux-design/buttons
 
+## 0.1.2
+
+### Patch Changes
+
+- Button Counter
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -161,4 +161,70 @@ declare namespace ButtonGroupItem {
     let displayName: string;
 }
 
-export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ */
+type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    isEditable?: boolean;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+    decrementIcon?: React.ReactNode;
+    incrementIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    className?: string;
+};
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.d.ts

@@ -161,4 +161,70 @@ declare namespace ButtonGroupItem {
     let displayName: string;
 }
 
-export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ */
+type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    isEditable?: boolean;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+    decrementIcon?: React.ReactNode;
+    incrementIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    className?: string;
+};
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  ButtonCounter: () => ButtonCounter,
   ButtonGroup: () => ButtonGroup,
   ButtonGroupItem: () => ButtonGroupItem,
   IconButton: () => IconButton,
@@ -526,9 +527,275 @@ function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/elements/ButtonCounter.jsx
+var import_react7 = __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({
+  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,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  const clampedValue = (0, import_react7.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)(
+    (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: "h-[36px] w-[36px] text-sm",
+      display: "h-[36px] 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"
+    },
+    large: {
+      button: "h-[56px] w-[56px] text-lg",
+      display: "h-[56px] 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-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      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 [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)(() => {
+    if (isEditing) return;
+    setDraftValue(String(clampedValue));
+  }, [clampedValue, isEditing]);
+  const commitDraft = (0, import_react7.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-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",
+            disabled: !!disabled,
+            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            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)("div", { 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-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,

package/dist/index.mjs

@@ -495,8 +495,281 @@ function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/elements/ButtonCounter.jsx
+import React7, {
+  forwardRef as forwardRef4,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  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({
+  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,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  const clampedValue = useMemo2(() => {
+    const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
+    return Math.min(max, Math.max(min, safe));
+  }, [currentValue, defaultValue, max, min]);
+  const commitValue = useCallback2(
+    (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: "h-[36px] w-[36px] text-sm",
+      display: "h-[36px] 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"
+    },
+    large: {
+      button: "h-[56px] w-[56px] text-lg",
+      display: "h-[56px] 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-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      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 = cx5(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-l-lg",
+    "relative z-10",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null
+  );
+  const rightButtonStyles = cx5(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-r-lg",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null
+  );
+  const displayStyles = cx5(
+    defaultsDisplay,
+    sizeStyles.display,
+    "relative z-0",
+    variantStyles.display,
+    isStretched ? "flex-1" : null
+  );
+  const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
+  const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+  const [draftValue, setDraftValue] = useState2(String(clampedValue));
+  const [isEditing, setIsEditing] = useState2(false);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (isEditing) return;
+    setDraftValue(String(clampedValue));
+  }, [clampedValue, isEditing]);
+  const commitDraft = useCallback2(() => {
+    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__ */ jsxs5(
+    "div",
+    {
+      ref,
+      className: cx5("inline-flex items-stretch", width, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            ...decrementButtonProps,
+            type: "button",
+            "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-disabled": decrementDisabled,
+            disabled: decrementDisabled,
+            className: cx5(
+              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__ */ jsx6(
+          "input",
+          {
+            ...inputProps,
+            ref: inputRef,
+            type: "number",
+            inputMode: "numeric",
+            disabled: !!disabled,
+            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            className: cx5(
+              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__ */ jsx6("div", { 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-disabled": incrementDisabled,
+            disabled: incrementDisabled,
+            className: cx5(
+              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
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   Button,
+  ButtonCounter,
   ButtonGroup,
   ButtonGroupItem,
   IconButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/demo/ButtonCounter.stories.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { ButtonCounter } from "./../index";
+
+export default {
+  title: "Components/Button",
+  component: ButtonCounter,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isSecondary: { control: "boolean" },
+    isDanger: { control: "boolean" },
+    isBare: { control: "boolean" },
+    isStretched: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isEditable: { control: "boolean" },
+    inputProps: { control: false },
+    defaultValue: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    value: { control: false },
+    onChange: { control: false },
+    decrementIcon: { control: false },
+    incrementIcon: { control: false },
+    decrementButtonProps: { control: false },
+    incrementButtonProps: { control: false },
+    children: { control: false },
+  },
+};
+
+const Template = (args) => <ButtonCounter {...args} />;
+
+export const PrimaryCounter = Template.bind({});
+PrimaryCounter.args = {
+  defaultValue: 1,
+  size: "medium",
+};
+
+export const EditableCounter = Template.bind({});
+EditableCounter.args = {
+  defaultValue: 1,
+  isEditable: true,
+};
+
+export const SecondaryCounter = Template.bind({});
+SecondaryCounter.args = {
+  defaultValue: 1,
+  isSecondary: true,
+};
+
+export const DangerCounter = Template.bind({});
+DangerCounter.args = {
+  defaultValue: 1,
+  isDanger: true,
+};
+
+export const BareCounter = Template.bind({});
+BareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+};
+
+export const DangerBareCounter = Template.bind({});
+DangerBareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+  isDanger: true,
+};
+
+export const DisabledCounter = Template.bind({});
+DisabledCounter.args = {
+  defaultValue: 1,
+  disabled: true,
+};
+
+export const SmallCounter = Template.bind({});
+SmallCounter.args = {
+  defaultValue: 1,
+  size: "small",
+};
+
+export const LargeCounter = Template.bind({});
+LargeCounter.args = {
+  defaultValue: 1,
+  size: "large",
+};
+
+export const StretchedCounter = Template.bind({});
+StretchedCounter.args = {
+  defaultValue: 1,
+  isStretched: true,
+};
+
+export const WithBoundsCounter = Template.bind({});
+WithBoundsCounter.args = {
+  defaultValue: 2,
+  min: 0,
+  max: 3,
+};

package/src/elements/ButtonCounter.jsx

@@ -0,0 +1,341 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "@edux-design/utils";
+
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+export const ButtonCounter = forwardRef(function ButtonCounter(
+  {
+    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,
+    ...rest
+  },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+
+  const clampedValue = useMemo(() => {
+    const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
+    return Math.min(max, Math.max(min, safe));
+  }, [currentValue, defaultValue, max, min]);
+
+  const commitValue = useCallback(
+    (next) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      if (!isControlled) setInternalValue(clamped);
+      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: "h-[36px] w-[36px] text-sm",
+      display: "h-[36px] 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",
+    },
+    large: {
+      button: "h-[56px] w-[56px] text-lg",
+      display: "h-[56px] 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-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      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 = cx(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-l-lg",
+    "relative z-10",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null,
+  );
+
+  const rightButtonStyles = cx(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-r-lg",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null,
+  );
+
+  const displayStyles = cx(
+    defaultsDisplay,
+    sizeStyles.display,
+    "relative z-0",
+    variantStyles.display,
+    isStretched ? "flex-1" : null,
+  );
+
+  const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
+  const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+
+  const [draftValue, setDraftValue] = useState(String(clampedValue));
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (isEditing) return;
+    setDraftValue(String(clampedValue));
+  }, [clampedValue, isEditing]);
+
+  const commitDraft = 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 (
+    <div
+      ref={ref}
+      className={cx("inline-flex items-stretch", width, className)}
+      {...rest}
+    >
+      <button
+        {...decrementButtonProps}
+        type="button"
+        aria-label={decrementButtonProps?.["aria-label"] ?? "Decrease"}
+        aria-disabled={decrementDisabled}
+        disabled={decrementDisabled}
+        className={cx(
+          leftButtonStyles,
+          decrementDisabled && variant !== "disabled"
+            ? variants.disabled.button
+            : null,
+          decrementButtonProps?.className,
+        )}
+        onClick={(event) => {
+          decrementButtonProps?.onClick?.(event);
+          if (event.defaultPrevented) return;
+          commitValue(clampedValue - step);
+        }}
+      >
+        {effectiveDecrementIcon}
+      </button>
+
+      {isEditable && children == null ? (
+        <input
+          {...inputProps}
+          ref={inputRef}
+          type="number"
+          inputMode="numeric"
+          disabled={!!disabled}
+          aria-label={inputProps?.["aria-label"] ?? "Value"}
+          className={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?.className,
+          )}
+          value={draftValue}
+          onChange={(event) => {
+            inputProps?.onChange?.(event);
+            if (event.defaultPrevented) return;
+            setDraftValue(event.target.value);
+          }}
+          onFocus={(event) => {
+            inputProps?.onFocus?.(event);
+            if (event.defaultPrevented) return;
+            setIsEditing(true);
+          }}
+          onBlur={(event) => {
+            inputProps?.onBlur?.(event);
+            if (event.defaultPrevented) return;
+            setIsEditing(false);
+            commitDraft();
+          }}
+          onKeyDown={(event) => {
+            inputProps?.onKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            if (event.key === "Enter") {
+              event.currentTarget.blur();
+            }
+            if (event.key === "Escape") {
+              setDraftValue(String(clampedValue));
+              event.currentTarget.blur();
+            }
+          }}
+        />
+      ) : (
+        <div className={cx(displayStyles, "select-none")}>
+          {children ?? clampedValue}
+        </div>
+      )}
+
+      <button
+        {...incrementButtonProps}
+        type="button"
+        aria-label={incrementButtonProps?.["aria-label"] ?? "Increase"}
+        aria-disabled={incrementDisabled}
+        disabled={incrementDisabled}
+        className={cx(
+          rightButtonStyles,
+          incrementDisabled && variant !== "disabled"
+            ? variants.disabled.button
+            : null,
+          incrementButtonProps?.className,
+        )}
+        onClick={(event) => {
+          incrementButtonProps?.onClick?.(event);
+          if (event.defaultPrevented) return;
+          commitValue(clampedValue + step);
+        }}
+      >
+        {effectiveIncrementIcon}
+      </button>
+    </div>
+  );
+});

package/src/elements/ButtonCounter.test.jsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ButtonCounter } from "./ButtonCounter";
+
+describe("ButtonCounter", () => {
+  it("renders defaultValue", () => {
+    render(<ButtonCounter defaultValue={5} />);
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("increments and decrements", () => {
+    render(<ButtonCounter defaultValue={1} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Increase" }));
+    expect(screen.getByText("2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Decrease" }));
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
+
+  it("renders an editable input when isEditable=true", () => {
+    const onChange = vi.fn();
+    render(<ButtonCounter defaultValue={3} isEditable onChange={onChange} />);
+
+    const input = screen.getByRole("spinbutton", { name: "Value" });
+    expect(input).toHaveValue(3);
+
+    fireEvent.change(input, { target: { value: "7" } });
+    fireEvent.blur(input);
+
+    expect(onChange).toHaveBeenCalledWith(7);
+    expect(screen.getByRole("spinbutton", { name: "Value" })).toHaveValue(7);
+  });
+
+  it("applies medium size by default", () => {
+    render(<ButtonCounter defaultValue={1} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0].className).toMatch(/h-\[44px\]/);
+    expect(buttons[1].className).toMatch(/h-\[44px\]/);
+  });
+
+  it("applies small and large sizes", () => {
+    const { rerender } = render(<ButtonCounter size="small" defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[36px\]/);
+
+    rerender(<ButtonCounter size="large" defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[56px\]/);
+  });
+
+  it("applies variants", () => {
+    const { rerender } = render(<ButtonCounter defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-primary-base/);
+
+    rerender(<ButtonCounter isSecondary defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-base/);
+
+    rerender(<ButtonCounter isDanger defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-danger-base/);
+
+    rerender(<ButtonCounter isDanger isBare defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/text-fg-danger-emphasis/);
+  });
+
+  it("applies disabled state", () => {
+    render(<ButtonCounter disabled defaultValue={1} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+    expect(buttons[0].className).toMatch(/bg-bg-inactive/);
+  });
+
+  it("uses stretched width when isStretched=true", () => {
+    const { container } = render(<ButtonCounter isStretched defaultValue={1} />);
+    expect(container.firstChild.className).toMatch(/w-full/);
+  });
+
+  it("logs a warning in dev mode if multiple variants are passed", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(<ButtonCounter isSecondary isDanger defaultValue={1} />);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "[ButtonCounter]: Multiple variant props passed. Using the highest priority only."
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it("does not warn for the danger bare combination", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(<ButtonCounter isDanger isBare defaultValue={1} />);
+
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
+});

package/src/index.js

@@ -3,3 +3,4 @@ export { Button } from "./elements/Button";
 export { MenuButton } from "./elements/MenuButton";
 export { ButtonGroup } from "./elements/ButtonGroup";
 export { ButtonGroupItem } from "./elements/ButtonGroupItem";
+export { ButtonCounter } from "./elements/ButtonCounter";