react-restyle-components 0.1.45 → 0.1.46

package/lib/cjs/core-components/atoms/form/form.test.js

@@ -1,54 +1,40 @@
 "use strict";
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
+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 react_2 = require("@testing-library/react");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const form_component_1 = require("./form.component");
-describe("Checkbox component", () => {
-  it("render checkbox correctly", () => {
-    const checkbox = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.CheckBox, null),
-    );
-    expect(checkbox).toMatchSnapshot();
-  });
+describe('Checkbox component', () => {
+    it('render checkbox correctly', () => {
+        const checkbox = (0, react_2.render)(react_1.default.createElement(form_component_1.CheckBox, null));
+        expect(checkbox).toMatchSnapshot();
+    });
 });
-describe("Input component", () => {
-  it("render input correctly", () => {
-    const inputComp = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.Input, {
-        type: "text",
-        value: "test",
-        onChange: (val) => jest.fn(),
-        onBlur: (value) => jest.fn(),
-        onKeyDown: (val) => jest.fn(),
-      }),
-    );
-    const input = inputComp.getByTestId("INPT");
-    react_2.fireEvent.change(input, { target: { value: "check" } });
-    user_event_1.default.type(input, "value");
-    react_2.fireEvent.blur(input);
-    react_2.fireEvent.keyDown(input, {
-      key: "Escape",
-      code: "Escape",
-      keyCode: 27,
-      charCode: 27,
+describe('Input component', () => {
+    it('render input correctly', () => {
+        const inputComp = (0, react_2.render)(react_1.default.createElement(form_component_1.Input, { type: "text", value: "test", onChange: (val) => jest.fn(), onBlur: (value) => jest.fn(), onKeyDown: (val) => jest.fn() }));
+        const input = inputComp.getByTestId('INPT');
+        react_2.fireEvent.change(input, { target: { value: 'check' } });
+        user_event_1.default.type(input, 'value');
+        react_2.fireEvent.blur(input);
+        react_2.fireEvent.keyDown(input, {
+            key: 'Escape',
+            code: 'Escape',
+            keyCode: 27,
+            charCode: 27,
+        });
+        react_2.fireEvent.keyPress(input, { key: 'Enter', keyCode: 13 });
+        expect(input).toMatchSnapshot();
     });
-    react_2.fireEvent.keyPress(input, { key: "Enter", keyCode: 13 });
-    expect(input).toMatchSnapshot();
-  });
 });
-describe("Toggle component", () => {
-  it("render toggle correctly", () => {
-    const toggle = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.Toggle, null),
-    );
-    expect(toggle).toMatchSnapshot();
-  });
+describe('Toggle component', () => {
+    it('render toggle correctly', () => {
+        const toggle = (0, react_2.render)(react_1.default.createElement(form_component_1.Toggle, null));
+        expect(toggle).toMatchSnapshot();
+    });
 });
 // describe('SelectOption component', () => {
 //   it('render selectOption correctly', () => {
@@ -61,13 +47,11 @@ describe("Toggle component", () => {
 //     expect(select).toMatchSnapshot();
 //   });
 // });
-describe("MultilineInput component", () => {
-  it("render multilineInput correctly", () => {
-    const multi = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.MultilineInput, null),
-    );
-    expect(multi).toMatchSnapshot();
-  });
+describe('MultilineInput component', () => {
+    it('render multilineInput correctly', () => {
+        const multi = (0, react_2.render)(react_1.default.createElement(form_component_1.MultilineInput, null));
+        expect(multi).toMatchSnapshot();
+    });
 });
 // describe('Clock component', () => {
 //   it('render clock correctly', () => {
@@ -77,23 +61,17 @@ describe("MultilineInput component", () => {
 //     expect(clock).toMatchSnapshot();
 //   });
 // });
-describe("Label component", () => {
-  it("render label correctly", () => {
-    const label = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.Label, {
-        htmlFor: "vsdvrf",
-      }),
-    );
-    expect(label).toMatchSnapshot();
-  });
+describe('Label component', () => {
+    it('render label correctly', () => {
+        const label = (0, react_2.render)(react_1.default.createElement(form_component_1.Label, { htmlFor: "vsdvrf" }));
+        expect(label).toMatchSnapshot();
+    });
 });
-describe("InputDate component", () => {
-  it("render inputDate correctly", () => {
-    const inputDate = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.InputDate, null),
-    );
-    expect(inputDate).toMatchSnapshot();
-  });
+describe('InputDate component', () => {
+    it('render inputDate correctly', () => {
+        const inputDate = (0, react_2.render)(react_1.default.createElement(form_component_1.InputDate, null));
+        expect(inputDate).toMatchSnapshot();
+    });
 });
 // describe('InputDateTime component', () => {
 //   it('render inputDateTime correctly', () => {
@@ -101,28 +79,22 @@ describe("InputDate component", () => {
 //     expect(inputDateTime).toMatchSnapshot();
 //   });
 // });
-describe("InputFile component", () => {
-  it("render inputFile correctly", () => {
-    const inputFile = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.InputFile, null),
-    );
-    expect(inputFile).toMatchSnapshot();
-  });
+describe('InputFile component', () => {
+    it('render inputFile correctly', () => {
+        const inputFile = (0, react_2.render)(react_1.default.createElement(form_component_1.InputFile, null));
+        expect(inputFile).toMatchSnapshot();
+    });
 });
-describe("InputRadio component", () => {
-  it("render inputRadio correctly", () => {
-    const inputRadio = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.InputRadio, null),
-    );
-    expect(inputRadio).toMatchSnapshot();
-  });
+describe('InputRadio component', () => {
+    it('render inputRadio correctly', () => {
+        const inputRadio = (0, react_2.render)(react_1.default.createElement(form_component_1.InputRadio, null));
+        expect(inputRadio).toMatchSnapshot();
+    });
 });
-describe("InputWrapper component", () => {
-  it("render inputWrapper correctly", () => {
-    const inputWrapper = (0, react_2.render)(
-      react_1.default.createElement(form_component_1.InputWrapper, null),
-    );
-    expect(inputWrapper).toMatchSnapshot();
-  });
+describe('InputWrapper component', () => {
+    it('render inputWrapper correctly', () => {
+        const inputWrapper = (0, react_2.render)(react_1.default.createElement(form_component_1.InputWrapper, null));
+        expect(inputWrapper).toMatchSnapshot();
+    });
 });
-//# sourceMappingURL=form.test.js.map
+//# sourceMappingURL=form.test.js.map

package/lib/cjs/core-components/atoms/icons/icons.component.js

@@ -1,46 +1,63 @@
 "use strict";
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
+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 });
 exports.Icon = void 0;
-const react_1 = __importDefault(require("react"));
-const Icon = ({
-  nameIcon,
-  propsIcon,
-  tooltip = "",
-  isDisable = false,
-  onClick,
-}) => {
-  try {
-    const iconProps = Object.assign(Object.assign({}, propsIcon), {
-      color: isDisable
-        ? "#808080"
-        : (propsIcon === null || propsIcon === void 0
-            ? void 0
-            : propsIcon.color) || "#ffffff",
-    });
-    const lib = nameIcon
-      .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
-      .split(" ")[0]
-      .toLocaleLowerCase();
-    // const ElementIcon: any = loadable(
-    //   () => import(`react-icons/${lib}/index.js`),
-    //   {
-    //     resolveComponent: (el) =>
-    //       el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
-    //   }
-    // );
-    return react_1.default.createElement("div", {
-      onClick: () => {
-        if (!isDisable) onClick && onClick();
-      },
-    });
-  } catch (error) {
-    return react_1.default.createElement(react_1.default.Fragment, null);
-  }
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const __1 = require("../..");
+const component_1 = __importDefault(require("@loadable/component"));
+let lib = 'md';
+const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
+    try {
+        const iconProps = Object.assign(Object.assign({}, propsIcon), { color: isDisable ? '#808080' : (propsIcon === null || propsIcon === void 0 ? void 0 : propsIcon.color) || '#ffffff' });
+        const lib = nameIcon
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')[0]
+            .toLocaleLowerCase();
+        // const fullLib = `react-icons/${lib}/index.js`;
+        const fullLib = `react-icons/md/index.js`;
+        let ElementIcon = (0, component_1.default)(() => { var _a; return _a = fullLib, Promise.resolve().then(() => __importStar(require(_a))); }, {
+            resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+        });
+        // ElementIcon = loadable(() => import(`react-icons/${lib}`), {
+        //   resolveComponent: (el) =>
+        //     el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+        // });
+        return (react_1.default.createElement("div", { onClick: () => {
+                if (!isDisable)
+                    onClick && onClick();
+            } }, !lodash_1.default.isEmpty(tooltip) ? (react_1.default.createElement(__1.Tooltip, { tooltipText: tooltip },
+            react_1.default.createElement(ElementIcon, Object.assign({}, iconProps)))) : (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading...") },
+            react_1.default.createElement(ElementIcon, Object.assign({}, iconProps))))));
+    }
+    catch (error) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
 };
 exports.Icon = Icon;
-//# sourceMappingURL=icons.component.js.map
+//# sourceMappingURL=icons.component.js.map

package/lib/cjs/core-components/atoms/icons/icons.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAcnB,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,GACG,EAAe,EAAE;IAC3B,IAAI;QACF,MAAM,SAAS,mCACV,SAAS,KACZ,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,SAAS,GAC7D,CAAC;QACF,MAAM,GAAG,GAAG,QAAQ;aACjB,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;aACtC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACb,iBAAiB,EAAE,CAAC;QACvB,qCAAqC;QACrC,iDAAiD;QACjD,MAAM;QACN,gCAAgC;QAChC,8EAA8E;QAC9E,MAAM;QACN,KAAK;QACL,OAAO,CACL,uCACE,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS;oBAAE,OAAO,IAAI,OAAO,EAAE,CAAC;YACvC,CAAC,GASG,CACP,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,6DAAK,CAAC;KACd;AACH,CAAC,CAAC;AAzCW,QAAA,IAAI,QAyCf"}
+{"version":3,"file":"icons.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AACtC,oDAAuB;AACvB,6BAA8B;AAC9B,oEAA2C;AAW3C,IAAI,GAAG,GAAG,IAAI,CAAC;AACR,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,GACG,EAAe,EAAE;IAC3B,IAAI;QACF,MAAM,SAAS,mCACV,SAAS,KACZ,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,SAAS,GAC7D,CAAC;QACF,MAAM,GAAG,GAAG,QAAQ;aACjB,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;aACtC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACb,iBAAiB,EAAE,CAAC;QACvB,iDAAiD;QACjD,MAAM,OAAO,GAAG,yBAAyB,CAAC;QAE1C,IAAI,WAAW,GAAQ,IAAA,mBAAQ,EAAC,GAAG,EAAE,uBAAQ,OAAO,4DAAC,EAAE;YACrD,gBAAgB,EAAE,CAAC,EAAE,EAAE,EAAE,CACvB,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SACvE,CAAC,CAAC;QACH,+DAA+D;QAC/D,8BAA8B;QAC9B,4EAA4E;QAC5E,MAAM;QAEN,OAAO,CACL,uCACE,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS;oBAAE,OAAO,IAAI,OAAO,EAAE,CAAC;YACvC,CAAC,IAEA,CAAC,gBAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACrB,8BAAC,WAAO,IAAC,WAAW,EAAE,OAAO;YAC3B,8BAAC,WAAW,oBAAK,SAAS,EAAI,CACtB,CACX,CAAC,CAAC,CAAC,CACF,8BAAC,gBAAQ,IAAC,QAAQ,EAAE,wDAAqB;YACvC,8BAAC,WAAW,oBAAK,SAAS,EAAI,CACrB,CACZ,CACG,CACP,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,6DAAK,CAAC;KACd;AACH,CAAC,CAAC;AAhDW,QAAA,IAAI,QAgDf"}

package/lib/cjs/core-components/atoms/icons/icons.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const icons_component_1 = require("./icons.component");
+const meta = {
+    title: 'Design System/Atoms/Icon',
+    component: icons_component_1.Icon,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { Icon } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        nameIcon: 'FaHistory',
+        propsIcon: {
+            color: '#000000',
+            size: 24,
+        },
+    },
+};
+//# sourceMappingURL=icons.stories.js.map

package/lib/cjs/core-components/atoms/icons/icons.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.stories.tsx"],"names":[],"mappings":";;;AAEA,uDAAuC;AAEvC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,sBAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,iBAAiB,EAAE,iDAAiD;KACrE;CACF,CAAC;AACF,kBAAe,IAAI,CAAC;AAGP,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,WAAW;QACrB,SAAS,EAAE;YACT,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,EAAE;SACT;KACF;CACF,CAAC"}

package/lib/cjs/core-components/atoms/icons/icons.test.js

@@ -0,0 +1,16 @@
+"use strict";
+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 _core_utils_1 = require("@core-utils");
+const icons_component_1 = require("./icons.component");
+it('render Icon correctly', () => {
+    const icon = (0, _core_utils_1.render)(react_1.default.createElement(icons_component_1.Icon, { nameIcon: "FaHistory", propsIcon: {
+            color: '#000000',
+            size: 24,
+        } }));
+    expect(icon).toMatchSnapshot();
+});
+//# sourceMappingURL=icons.test.js.map

package/lib/cjs/core-components/atoms/icons/icons.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.test.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,6CAAmC;AACnC,uDAAuC;AACvC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;IAC/B,MAAM,IAAI,GAAG,IAAA,oBAAM,EACjB,8BAAC,sBAAI,IACH,QAAQ,EAAC,WAAW,EACpB,SAAS,EAAE;YACT,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,EAAE;SACT,GACD,CACH,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}

package/lib/cjs/core-components/atoms/input/input-otp.component.js

@@ -1,131 +1,89 @@
 "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) {
+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);
+    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.InputOtp = void 0;
 /* eslint-disable no-console */
 const react_1 = __importStar(require("react"));
 require("./input-otp.styles.css");
-const InputOtp = ({ className, pin, onPinChanged }) => {
-  const pinLength = 6;
-  const Pin_Min_Value = 0;
-  const Pin_Max_Value = 9;
-  const BACKSPACE_Key = "Backspace";
-  const inputRefs = (0, react_1.useRef)([]);
-  (0, react_1.useEffect)(() => {
-    const ref = inputRefs.current[0];
-    if (ref) {
-      ref.focus();
-    }
-  }, []);
-  const changePinFocus = (pinIndex) => {
-    const ref = inputRefs.current[pinIndex];
-    if (ref) {
-      ref.focus();
-    }
-  };
-  const onChange = (event, index) => {
-    const value = event.target.value;
-    const pinNumber = Number(value.trim());
-    if (isNaN(pinNumber) || value.length === 0) {
-      return;
-    }
-    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
-      onPinChanged(pinNumber, index);
-      if (index < pinLength - 1) {
-        changePinFocus(index + 1);
-      }
-    }
-  };
-  const onKeyDown = (event, index) => {
-    console.log({ event, index });
-    const keyboardKeyCode = event.nativeEvent.code;
-    if (keyboardKeyCode != BACKSPACE_Key) return;
-    if (pin[index] === undefined) {
-      changePinFocus(index - 1);
-    } else {
-      onPinChanged(undefined, index);
-    }
-  };
-  return react_1.default.createElement(
-    "div",
-    { className: `${className} relative` },
-    react_1.default.createElement(
-      "div",
-      {
-        className:
-          "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8",
-      },
-      Array.from({ length: pinLength }, (_, index) =>
-        react_1.default.createElement("input", {
-          "data-testid": "onPinChanged",
-          className:
-            "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular",
-          onKeyDown: (event) => onKeyDown(event, index),
-          key: index,
-          onMouseUp: () => {
-            if (pin.join("").length <= 0) {
-              changePinFocus(0);
-            }
-          },
-          onClick: () => {
-            if (pin.join("").length <= 0) {
-              onPinChanged(undefined, 0);
-            }
-          },
-          ref: (el) => {
-            if (el) {
-              inputRefs.current[index] = el;
+const InputOtp = ({ className, pin, onPinChanged, }) => {
+    const pinLength = 6;
+    const Pin_Min_Value = 0;
+    const Pin_Max_Value = 9;
+    const BACKSPACE_Key = 'Backspace';
+    const inputRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        const ref = inputRefs.current[0];
+        if (ref) {
+            ref.focus();
+        }
+    }, []);
+    const changePinFocus = (pinIndex) => {
+        const ref = inputRefs.current[pinIndex];
+        if (ref) {
+            ref.focus();
+        }
+    };
+    const onChange = (event, index) => {
+        const value = event.target.value;
+        const pinNumber = Number(value.trim());
+        if (isNaN(pinNumber) || value.length === 0) {
+            return;
+        }
+        if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
+            onPinChanged(pinNumber, index);
+            if (index < pinLength - 1) {
+                changePinFocus(index + 1);
             }
-          },
-          onChange: (event) => onChange(event, index),
-          value: pin[index] || "",
-        }),
-      ),
-    ),
-  );
+        }
+    };
+    const onKeyDown = (event, index) => {
+        console.log({ event, index });
+        const keyboardKeyCode = event.nativeEvent.code;
+        if (keyboardKeyCode != BACKSPACE_Key)
+            return;
+        if (pin[index] === undefined) {
+            changePinFocus(index - 1);
+        }
+        else {
+            onPinChanged(undefined, index);
+        }
+    };
+    return (react_1.default.createElement("div", { className: `${className} relative` },
+        react_1.default.createElement("div", { className: "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8" }, Array.from({ length: pinLength }, (_, index) => (react_1.default.createElement("input", { "data-testid": "onPinChanged", className: "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular", onKeyDown: (event) => onKeyDown(event, index), key: index, onMouseUp: () => {
+                if (pin.join('').length <= 0) {
+                    changePinFocus(0);
+                }
+            }, onClick: () => {
+                if (pin.join('').length <= 0) {
+                    onPinChanged(undefined, 0);
+                }
+            }, ref: (el) => {
+                if (el) {
+                    inputRefs.current[index] = el;
+                }
+            }, onChange: (event) => onChange(event, index), value: pin[index] || '' }))))));
 };
 exports.InputOtp = InputOtp;
-//# sourceMappingURL=input-otp.component.js.map
+//# sourceMappingURL=input-otp.component.js.map