josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/cjs/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.module.scss

@@ -0,0 +1,151 @@
+@property --angle {
+  sintax: "<angle>";
+  inherits: false;
+  initial-value: 270deg;
+}
+
+@property --color-default {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --color-selected {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: #e3f3e3;
+}
+
+@property --percentage-default {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --percentage-selected {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+.calendar-scrollable-section {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  border-bottom: 1px solid #ebebeb;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .days-grid {
+    width: 100%;
+    .days-row {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .day-cell {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% / 7);
+        aspect-ratio: 1 / 1;
+
+        .day {
+          position: relative;
+          --angle: 270deg;
+          --color-default: #f3f3f3;
+          --color-selected: #b7d4b6;
+          --percentage-default: 100%;
+          --percentage-selected: 0%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: calc(100% - 8px);
+          height: calc(100% - 8px);
+          margin: 0px;
+          border-radius: 1000px;
+          overflow: hidden;
+          user-select: none;
+          transition: all 0.5s ease-in-out;
+          cursor: pointer;
+          p {
+            z-index: 2;
+            margin: 0px;
+          }
+
+          .background {
+            z-index: 1;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            transform: rotate(var(--angle));
+            transition: all 0.5s ease-in-out;
+            .first-half {
+              width: var(--percentage-default);
+              height: 100%;
+              background-color: var(--color-default);
+              transition: all 0.3s ease-in-out;
+            }
+            .second-half {
+              width: var(--percentage-selected);
+              height: 100%;
+              background-color: var(--color-selected);
+              transition: all 0.3s ease-in-out;
+            }
+          }
+          &.today {
+            outline: solid 2px #787878;
+          }
+          &.in-month {
+            color: var(--medium-gray, #787878);
+          }
+          &.not-in-month {
+            opacity: 0.35;
+          }
+          &.selected {
+            --percentage-default: 0%;
+            --percentage-selected: 100%;
+          }
+          &.check-in {
+            --angle: 405deg;
+            --color-default: #f3f3f3;
+            --percentage-default: 50%;
+            --percentage-selected: 50%;
+          }
+          &.check-out {
+            --angle: 225deg;
+            --color-default: #f3f3f3;
+            --percentage-default: 50%;
+            --percentage-selected: 50%;
+          }
+          &.not-selectable {
+            cursor: not-allowed;
+          }
+          &.out-of-selection {
+            opacity: 0.1;
+            cursor: not-allowed;
+          }
+        }
+        .cross-line {
+          z-index: 2;
+          position: absolute;
+          width: 120%;
+          height: 3px;
+          background-color: #bbb;
+          transform: rotate(-45deg);
+          display: none;
+        }
+        &.crossed {
+          .cross-line {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/cjs/components/ExportToExcelButton/ExportToExcelButton.css

@@ -0,0 +1,31 @@
+.export-to-excel-button {
+  position: relative;
+  width: 220px;
+  height: 48px;
+  opacity: 1;
+  cursor: pointer;
+  padding: 14px;
+  text-align: center;
+  text-decoration: none;
+  touch-action: manipulation;
+  font-size: 16px;
+  letter-spacing: normal;
+  color: rgb(255, 255, 255);
+  font-weight: 700;
+  border-radius: 4px;
+  border: none;
+  background: green;
+  box-shadow: none;
+  transition: all 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin: auto;
+}
+.export-to-excel-button:hover {
+  background: rgb(0, 170, 0);
+}
+
+.export-to-excel-button:disabled {
+  background: rgb(216, 216, 216);
+}

package/dist/{components → cjs/components}/ExportToExcelButton/ExportToExcelButton.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./ExportToExcelButton.css";
-import { ExportToExcelButtonPropsType } from "./types";
-declare const ExportToExcelButton: ({ customButtonText, customClass, fileName, headers, data, onAfterExport, disabled, }: ExportToExcelButtonPropsType) => React.JSX.Element;
-export default ExportToExcelButton;
+import React from "react";
+import "./ExportToExcelButton.css";
+import { ExportToExcelButtonPropsType } from "./types";
+declare const ExportToExcelButton: ({ customButtonText, customClass, fileName, headers, data, onAfterExport, disabled, }: ExportToExcelButtonPropsType) => React.JSX.Element;
+export default ExportToExcelButton;

package/dist/cjs/components/ExportToExcelButton/ExportToExcelButton.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ownFunctions = __importStar(require("./ExportToExcelButtonOwnFunctions"));
+require("./ExportToExcelButton.css");
+//Iconos
+const ri_1 = require("react-icons/ri");
+const ExportToExcelButton = ({ customButtonText = "Export to Excel", customClass, fileName = "untitled", headers, data, onAfterExport, disabled, }) => {
+    return (react_1.default.createElement("button", { disabled: disabled, className: customClass ? customClass : "export-to-excel-button", onClick: () => {
+            ownFunctions.downloadExcel(fileName, data, headers);
+            if (onAfterExport !== undefined) {
+                onAfterExport();
+            }
+        } },
+        customButtonText,
+        " ",
+        react_1.default.createElement(ri_1.RiFileExcel2Fill, null)));
+};
+exports.default = ExportToExcelButton;

package/dist/{components → cjs/components}/ExportToExcelButton/ExportToExcelButtonOwnFunctions.d.ts

@@ -1,6 +1,6 @@
-import { DataObjectXlsxType } from "./types";
-export declare function downloadExcel(fileName: string, data: {
-    [key: string]: DataObjectXlsxType[][];
-} | undefined, headers: {
-    [key: string]: DataObjectXlsxType[];
-} | undefined): void;
+import { DataObjectXlsxType } from "./types";
+export declare function downloadExcel(fileName: string, data: {
+    [key: string]: DataObjectXlsxType[][];
+} | undefined, headers: {
+    [key: string]: DataObjectXlsxType[];
+} | undefined): void;

package/dist/cjs/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadExcel = void 0;
+//Librerias de terceros
+const XLSX = __importStar(require("xlsx-js-style"));
+function styleObjectParser(styleObject) {
+    let restultantStyleObject = {
+        v: styleObject.value,
+        s: {},
+    };
+    if (styleObject.allign)
+        restultantStyleObject.s.alignment = Object.assign({}, styleObject.allign);
+    if (styleObject.fontSize)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { sz: styleObject.fontSize });
+    if (styleObject.fontColor)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { color: { rgb: styleObject.fontColor } });
+    if (styleObject.bold)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { bold: styleObject.bold });
+    if (styleObject.backgroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { bgColor: { rgb: styleObject.backgroundColor } });
+    if (styleObject.foregroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { fgColor: { rgb: styleObject.foregroundColor } });
+    if (styleObject.borders)
+        restultantStyleObject.s.border = Object.assign({}, styleObject.borders);
+    return restultantStyleObject;
+}
+function downloadExcel(fileName, data, headers) {
+    if (data !== undefined) {
+        const workbook = XLSX.utils.book_new();
+        for (const sheetName in data) {
+            if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
+                let dataXlsxJs = [];
+                if (headers !== undefined &&
+                    Object.prototype.hasOwnProperty.call(headers, sheetName)) {
+                    dataXlsxJs = [
+                        headers[sheetName].map((header) => styleObjectParser(header)),
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                else {
+                    dataXlsxJs = [
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
+                XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+            }
+        }
+        XLSX.writeFile(workbook, `${fileName}.xlsx`);
+    }
+}
+exports.downloadExcel = downloadExcel;

package/dist/cjs/components/ExportToExcelButton/types.d.ts

@@ -0,0 +1,44 @@
+export interface ExportToExcelButtonPropsType {
+  customButtonText?: string;
+  customClass?: string;
+  fileName?: string;
+  headers?: { [key: string]: DataObjectXlsxType[] };
+  data?: { [key: string]: DataObjectXlsxType[][] };
+  onAfterExport?: Function;
+  disabled?: boolean;
+}
+
+export interface StyleObjectXlsxType {
+  allign?: {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+  };
+  fontSize?: number;
+  fontColor?: string;
+  bold?: boolean;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  borders?: {
+    top?: { style: BorderStyleType; color: string };
+    bottom?: { style: BorderStyleType; color: string };
+    left?: { style: BorderStyleType; color: string };
+    right?: { style: BorderStyleType; color: string };
+  };
+}
+export interface DataObjectXlsxType extends StyleObjectXlsxType {
+  value: string | number;
+}
+
+type BorderStyleType =
+  | "dashDotDot"
+  | "dashDot"
+  | "dashed"
+  | "dotted"
+  | "hair"
+  | "mediumDashDotDot"
+  | "mediumDashDot"
+  | "mediumDashed"
+  | "medium"
+  | "slantDashDot"
+  | "thick"
+  | "thin";

package/dist/{components → cjs/components}/InputBoxWithConfirmation/InputBoxWithConfirmation.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-type InputBoxWithConfirmationPropsType = {
-    onConfirmAction: (inputCurrentValue: string) => void;
-    inputType?: "text" | "number";
-    minimumValue?: HTMLInputElement["min"];
-    maximumValue?: HTMLInputElement["max"];
-    maxLength?: HTMLInputElement["maxLength"];
-    placeholder?: HTMLInputElement["placeholder"];
-    divWrapperCustomStyle?: React.CSSProperties;
-    inputBoxCustomStyle?: React.CSSProperties;
-    defaultValue?: string | number;
-    overrideCurrentValue?: string | number | null;
-    showConfirmationButton?: boolean;
-    disabled?: boolean;
-};
-declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, maxLength, placeholder, divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }: InputBoxWithConfirmationPropsType) => React.JSX.Element;
-export default InputBoxWithConfirmation;
+import React from "react";
+type InputBoxWithConfirmationPropsType = {
+    onConfirmAction: (inputCurrentValue: string) => void;
+    inputType?: "text" | "number";
+    minimumValue?: HTMLInputElement["min"];
+    maximumValue?: HTMLInputElement["max"];
+    maxLength?: HTMLInputElement["maxLength"];
+    placeholder?: HTMLInputElement["placeholder"];
+    divWrapperCustomStyle?: React.CSSProperties;
+    inputBoxCustomStyle?: React.CSSProperties;
+    defaultValue?: string | number;
+    overrideCurrentValue?: string | number | null;
+    showConfirmationButton?: boolean;
+    disabled?: boolean;
+};
+declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, maxLength, placeholder, divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }: InputBoxWithConfirmationPropsType) => React.JSX.Element;
+export default InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -0,0 +1,137 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const InputBoxWithConfirmation_module_scss_1 = __importDefault(require("./InputBoxWithConfirmation.module.scss"));
+//Hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+//Icons
+const bs_1 = require("react-icons/bs");
+const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", maxLength, placeholder = "", divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }) => {
+    //Refs
+    const inputRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    //States
+    const [cachedValue, setCachedValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    //Functions
+    const currentValueValueValidated = () => {
+        if (!currentValue) {
+            return cachedValue;
+        }
+        if (inputType === "number") {
+            let numericValue = Number(currentValue);
+            if (minimumValue !== "" && numericValue < Number(minimumValue)) {
+                numericValue = Number(minimumValue);
+            }
+            else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
+                numericValue = Number(maximumValue);
+            }
+            return String(numericValue);
+        }
+        else {
+            return currentValue;
+        }
+    };
+    const onConfirmActionHandler = () => {
+        setCurrentValue(currentValueValueValidated());
+        if (currentValueValueValidated()) {
+            onConfirmAction(currentValueValueValidated());
+            setCachedValue(currentValueValueValidated());
+        }
+    };
+    //Hooks
+    (0, useOutsideClick_1.default)(containerRef, () => {
+        if (focused) {
+            if (showConfirmationButton) {
+                setCurrentValue(cachedValue);
+            }
+            else {
+                onConfirmActionHandler();
+            }
+            setFocused(false);
+        }
+    });
+    //Effects
+    (0, react_1.useEffect)(() => {
+        if (overrideCurrentValue !== undefined) {
+            setCurrentValue(String(overrideCurrentValue));
+            setCachedValue(String(overrideCurrentValue));
+        }
+        else if (overrideCurrentValue === null) {
+            setCurrentValue("");
+            setCachedValue("");
+        }
+    }, [overrideCurrentValue]);
+    return (react_1.default.createElement("div", { ref: containerRef, style: divWrapperCustomStyle, className: `${InputBoxWithConfirmation_module_scss_1.default["div-wrapper"]} ${focused ? InputBoxWithConfirmation_module_scss_1.default["focused"] : ""}` },
+        react_1.default.createElement("input", { ref: inputRef, disabled: disabled, className: InputBoxWithConfirmation_module_scss_1.default["input-box-with-confirmation"], type: inputType, style: Object.assign({ width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, inputBoxCustomStyle), min: minimumValue, max: maximumValue, maxLength: maxLength, placeholder: placeholder, value: focused ? currentValue : cachedValue, onChange: (event) => {
+                let value = event.target.value;
+                if (maxLength && value.length > maxLength) {
+                    value = value.slice(0, maxLength);
+                }
+                setCurrentValue(value);
+            }, onFocus: (event) => {
+                setCachedValue(event.target.value);
+                setCurrentValue(event.target.value);
+                setFocused(true);
+            }, onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Tab") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Escape") {
+                    setCurrentValue(cachedValue);
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+            } }),
+        !disabled && showConfirmationButton && (react_1.default.createElement(react_1.Fragment, null, focused ? (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
+                onConfirmActionHandler();
+                setFocused(false);
+            } },
+            react_1.default.createElement(bs_1.BsCheckLg, null))) : (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            } },
+            react_1.default.createElement(bs_1.BsPencil, null)))))));
+};
+exports.default = InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.module.scss

@@ -0,0 +1,52 @@
+.div-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px rgb(184, 184, 184);
+  background-color: rgb(250, 250, 250);
+  border-radius: 8px;
+  transition: border 0.3s;
+  &.focused {
+    border-color: #218dec;
+  }
+  .input-box-with-confirmation {
+    box-sizing: border-box;
+    padding: 10px 2ch;
+    min-width: 10ch;
+    text-align: center;
+    border: none;
+    background-color: transparent;
+    font-size: 16px;
+    font-weight: 600;
+    color: dimgray;
+    transition: all 0.2s;
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+  .button-for-input-box-with-confirmation {
+    position: absolute;
+    right: 0px;
+    background-color: transparent;
+    color: rgb(158, 158, 158);
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      background-color: rgb(241, 241, 241);
+      color: var(--primary-color);
+    }
+  }
+}
+

package/dist/{components → cjs/components}/IntegerControl/IntegerControl.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-type IntegerControlProps = {
-    onChange: (value: number) => void;
-    defaultValue?: number;
-    minimumValue?: number;
-    maximumValue?: number;
-    customStyle?: React.CSSProperties;
-};
-declare const IntegerControl: ({ onChange, defaultValue, minimumValue, maximumValue, customStyle, }: IntegerControlProps) => React.JSX.Element;
-export default IntegerControl;
+import React from "react";
+type IntegerControlProps = {
+    onChange: (value: number) => void;
+    defaultValue?: number;
+    minimumValue?: number;
+    maximumValue?: number;
+    customStyle?: React.CSSProperties;
+};
+declare const IntegerControl: ({ onChange, defaultValue, minimumValue, maximumValue, customStyle, }: IntegerControlProps) => React.JSX.Element;
+export default IntegerControl;

package/dist/cjs/components/IntegerControl/IntegerControl.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const IntegerControl_module_scss_1 = __importDefault(require("./IntegerControl.module.scss"));
+//icons
+const ai_1 = require("react-icons/ai");
+const IntegerControl = ({ onChange = () => { }, defaultValue = 0, minimumValue, maximumValue, customStyle, }) => {
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue);
+    return (react_1.default.createElement("div", { className: `${IntegerControl_module_scss_1.default["integer-control"]} ${currentValue === defaultValue ? IntegerControl_module_scss_1.default["default"] : ""}`, style: customStyle },
+        react_1.default.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue - 1);
+                onChange(currentValue - 1);
+            } },
+            react_1.default.createElement(ai_1.AiFillMinusCircle, null)),
+        react_1.default.createElement("input", { onChange: (event) => {
+                const numericValue = Number(event.target.value);
+                setCurrentValue(numericValue);
+                onChange(numericValue);
+            }, value: currentValue, type: "number", defaultValue: String(defaultValue), min: String(minimumValue), max: String(maximumValue), style: { width: currentValue.toString().length + 1 + "ch" } }),
+        react_1.default.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue + 1);
+                onChange(currentValue + 1);
+            } },
+            react_1.default.createElement(ai_1.AiFillPlusCircle, null))));
+};
+exports.default = IntegerControl;