feat: initial support for button increment

examples/web/react/app.tsx

 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import { Button, ButtonSwitch, Info, Pair } from "./components";
+import {
+    Button,
+    ButtonIncrement,
+    ButtonSwitch,
+    Info,
+    Pair
+} from "./components";
 
 import "./app.css";
 
@@ -13,8 +19,13 @@ export const App = () => {
         <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />,
         <Pair key="matias" name={"Matias"} value={"3"} />,
         <Pair
-            key="button"
-            name={"Button"}
+            key="button-tobias"
+            name={"Button Increment"}
+            valueNode={<ButtonIncrement value={200} delta={100} />}
+        />,
+        <Pair
+            key="button-cpu"
+            name={"Button Switch"}
             valueNode={
                 <ButtonSwitch
                     options={["NEO", "CLASSIC"]}

examples/web/react/components/button-increment/button-increment.css

+.button-increment {
+    display: inline-block;
+}
+
+.button-increment > .value {
+    margin: 0px 8px 0px 8px;
+}

examples/web/react/components/button-increment/button-increment.tsx

+import React, { FC, useState } from "react";
+import Button from "../button/button";
+
+import "./button-increment.css";
+
+type ButtonIncrementProps = {
+    value: number;
+    delta?: number;
+    size?: string;
+    style?: string[];
+    onClick?: () => void;
+    onChange?: (value: number) => void;
+};
+
+export const ButtonIncrement: FC<ButtonIncrementProps> = ({
+    value,
+    delta = 1,
+    size = "medium",
+    style = ["simple", "border"],
+    onClick,
+    onChange
+}) => {
+    const [valueState, setValue] = useState(value);
+    const classes = () => ["button-increment", size, ...style].join(" ");
+    const _onClick = () => {
+        if (onClick) onClick();
+    };
+    const _onMinusClick = () => {
+        const valueNew = valueState - delta;
+        setValue(valueNew);
+        if (onChange) onChange(valueNew);
+    };
+    const _onPlusClick = () => {
+        const valueNew = valueState + delta;
+        setValue(valueNew);
+        if (onChange) onChange(valueNew);
+    };
+    return (
+        <span className={classes()} onClick={_onClick}>
+            <Button
+                text={"-"}
+                size={size}
+                style={["simple"]}
+                onClick={_onMinusClick}
+            />
+            <span className="value">{valueState}</span>
+            <Button
+                text={"+"}
+                size={size}
+                style={["simple"]}
+                onClick={_onPlusClick}
+            />
+        </span>
+    );
+};
+
+export default ButtonIncrement;

examples/web/react/components/index.ts

 export * from "./button/button";
+export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
 export * from "./info/info";
 export * from "./pair/pair";

examples/web/react/components/info/info.tsx

@@ -7,6 +7,17 @@ type InfoProps = {
     style?: string[];
 };
 
+/**
+ * Builds a new info component with the provided pairs components
+ * setting the style in accordance with the provided list of strings.
+ *
+ * An info component is responsible for the management of multiple
+ * key to "value" pairs.
+ *
+ * @param options The multiple options that are going to be used
+ * to build the info pairs.
+ * @returns The info component with the associated pairs.
+ */
 export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
     const classes = () => ["info", ...style].join(" ");
     return <dl className={classes()}>{pairs}</dl>;