@datability/8ui 0.1.17 → 0.1.19

package/dist/components/Blackdrop/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import './index.scss';
 var Blackdrop = function (_a) {
     var children = _a.children, open = _a.open;
-    return (React.createElement("div", { className: "DBui-blackdrop", "aria-hidden": !open }, children));
+    return (React.createElement("div", { className: "DBui-blackdrop", "data-hidden": !open }, children));
 };
 export default Blackdrop;
 //# sourceMappingURL=index.js.map

package/dist/components/Blackdrop/index.scss

@@ -9,7 +9,7 @@
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
 
-  &[aria-hidden='true'] {
+  &[data-hidden='true'] {
     opacity: 0;
     visibility: hidden;
   }

package/dist/components/Button/index.js

@@ -4,13 +4,13 @@ import React from 'react';
 // Include in project
 import './index.scss';
 var Button = function (_a) {
-    var name = _a.name, _b = _a.type, type = _b === void 0 ? 'button' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, StartIcon = _a.startIcon, EndIcon = _a.endIcon, className = _a.className, style = _a.style;
-    return (React.createElement("button", { type: type, className: "DBui-button ".concat(className ? className : ''), onClick: onClick && onClick, disabled: disabled, style: style ? style : {} },
+    var name = _a.name, _b = _a.type, type = _b === void 0 ? 'button' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, StartIcon = _a.startIcon, EndIcon = _a.endIcon, className = _a.className, style = _a.style, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
+    return (React.createElement("button", { type: type, className: "DBui-button ".concat(className ? className : ''), onClick: onClick && onClick, disabled: isLoading || disabled, style: style ? style : {} }, isLoading ? (React.createElement("div", { className: "DBui-loaderSpinButton" })) : (React.createElement(React.Fragment, null,
         StartIcon && typeof StartIcon === 'string' && React.createElement("img", { src: StartIcon, alt: "startIcon" }),
         StartIcon && typeof StartIcon !== 'string' && React.createElement(StartIcon, { alt: "startIcon" }),
         name,
         EndIcon && typeof EndIcon === 'string' && React.createElement("img", { src: EndIcon, alt: "endIcon" }),
-        EndIcon && typeof EndIcon !== 'string' && React.createElement(EndIcon, { alt: "endIcon" })));
+        EndIcon && typeof EndIcon !== 'string' && React.createElement(EndIcon, { alt: "endIcon" })))));
 };
 export default Button;
 //# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,MAAM,GAA0B,UAAC,EAStC;QARC,IAAI,UAAA,EACJ,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACI,SAAS,eAAA,EACX,OAAO,aAAA,EAChB,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,sBAAe,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QAExB,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,WAAW,GAAG;QACrF,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,GAAG;QAC3E,IAAI;QACJ,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,6BAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,GAAG;QAC7E,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,oBAAC,OAAO,IAAC,GAAG,EAAC,SAAS,GAAG,CAC7D,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,MAAM,GAA0B,UAAC,EAUtC;QATC,IAAI,UAAA,EACJ,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACI,SAAS,eAAA,EACX,OAAO,aAAA,EAChB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA;IAEjB,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,sBAAe,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAExB,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAC,uBAAuB,GAAG,CAC1C,CAAC,CAAC,CAAC,CACF;QACG,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,WAAW,GAAG;QACrF,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,GAAG;QAC3E,IAAI;QACJ,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,6BAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,GAAG;QAC7E,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,oBAAC,OAAO,IAAC,GAAG,EAAC,SAAS,GAAG,CACnE,CACJ,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/Button/index.scss

@@ -19,4 +19,22 @@
     cursor: not-allowed;
     opacity: 0.5;
   }
+  
+  .DBui-loaderSpinButton {
+    width: 30px;
+    height: 30px;
+    border: 3px solid #aaaaae;
+    border-bottom-color: #FFFFFF;
+    border-radius: 50%;
+    animation: rotation 1s linear infinite;
+
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
 }

package/dist/components/Button/index.type.d.ts

@@ -8,4 +8,5 @@ export type PropsButton = {
     endIcon?: string | ElementType;
     className?: string;
     style?: CSSProperties;
+    isLoading?: boolean;
 };

package/dist/components/Chip/index.js

@@ -6,13 +6,13 @@ import closedSVG from '../assets/closed.svg';
 import './index.scss';
 var Chip = function (_a) {
     var label = _a.label, onDelete = _a.onDelete, onClick = _a.onClick, Icon = _a.icon, className = _a.className, style = _a.style;
-    return (React.createElement("div", { className: "DBui-chip ".concat(className ? className : ''), style: style ? style : {}, "aria-checked": Boolean(onClick), onClick: onClick && onClick },
+    return (React.createElement("div", { className: "DBui-chip ".concat(className ? className : ''), style: style ? style : {}, "data-checked": Boolean(onClick), onClick: onClick && onClick },
         label,
-        onDelete && !Icon && (React.createElement("img", { src: closedSVG, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        !onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        !onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete }))));
+        onDelete && !Icon && (React.createElement("img", { src: closedSVG, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        !onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        !onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete }))));
 };
 export default Chip;
 //# sourceMappingURL=index.js.map

package/dist/components/Chip/index.scss

@@ -8,7 +8,7 @@
   background-color: #618aea;
   gap: 0.5em;
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     cursor: pointer;
 
     &:hover {
@@ -20,7 +20,7 @@
     width: 20px;
     height: 20px;
 
-    &[aria-checked='true'] {
+    &[data-checked='true'] {
       cursor: pointer;
       
       &:hover {

package/dist/components/Input/InputAutoComplete/index.js

@@ -41,7 +41,7 @@ var InputAutoComplete = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement(Menu, { disabled: disabled, trigger: function () {
                 var _a;
-                return (React.createElement("div", { className: "DBui-wrapInputAutoComplete", "aria-invalid": isInvalid, "aria-disabled": disabled },
+                return (React.createElement("div", { className: "DBui-wrapInputAutoComplete", "data-invalid": isInvalid, "data-disabled": disabled },
                     isMultiple &&
                         getIn(values, name).map(function (data, index) {
                             var selected = options.find(function (e) { return e.value === data; });
@@ -55,7 +55,7 @@ var InputAutoComplete = function (_a) {
                     React.createElement("input", { className: "DBui-inputAutoComplete", type: "text", placeholder: !((_a = getIn(values, name)) === null || _a === void 0 ? void 0 : _a.length) ? placeholder : '', disabled: disabled, name: name, value: isMultiple ? searchText : getIn(values, name)[0] || '', onChange: function (e) { return handleChange(e.target.value); } })));
             } }, suggestions.map(function (data, index) {
             var isChecked = Boolean(getIn(values, name).find(function (ele) { return ele === data.value; }));
-            return (React.createElement("p", { key: index, className: "DBui-menuItemInputAutoComplete", onClick: function () { return !isChecked && handleClickSelectOption(data.value); }, "aria-checked": isChecked }, data.label));
+            return (React.createElement("p", { key: index, className: "DBui-menuItemInputAutoComplete", onClick: function () { return !isChecked && handleClickSelectOption(data.value); }, "data-checked": isChecked }, data.label));
         }))));
 };
 export default InputAutoComplete;

package/dist/components/Input/InputAutoComplete/index.scss

@@ -9,7 +9,7 @@
   gap: 0.3em;
   height: 36px;
 
-  &[aria-disabled='true'] {
+  &[data-disabled='true'] {
     @extend .DBui-disabled;
   }
 
@@ -46,7 +46,7 @@
     background-color: #FAFAFA;
   }
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     background-color: #6F5EE0;
     color: #FFFFFF;
   }

package/dist/components/Input/InputBase/index.js

@@ -10,13 +10,13 @@ var InputBase = function (_a) {
     var styleDiv = {
         width: !fullWidth ? 'fit-content' : '100%'
     };
-    return (React.createElement("div", { className: "DBui-inputBase", style: styleDiv, "aria-invalid": isInvalid },
+    return (React.createElement("div", { className: "DBui-inputBase", style: styleDiv, "data-invalid": isInvalid },
         label && (React.createElement("p", { className: "DBui-inputLabel" },
             React.createElement("small", null, label),
             " ",
-            React.createElement("span", { className: "DBui-ariaInvalid" }, require && '*'))),
+            React.createElement("span", { className: "DBui-dataInvalid" }, require && '*'))),
         children,
-        getIn(touched, name) && getIn(errors, name) && (React.createElement("p", { className: "DBui-ariaInvalid" },
+        getIn(touched, name) && getIn(errors, name) && (React.createElement("p", { className: "DBui-dataInvalid" },
             React.createElement("small", null, getIn(errors, name))))));
 };
 export default InputBase;

package/dist/components/Input/InputBase/index.scss

@@ -2,13 +2,13 @@
     display: flex;
     flex-direction: column;
 
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
         .DBui-inputLabel {
             color: #EB5757;
         }
     }
 
-    .DBui-ariaInvalid {
+    .DBui-dataInvalid {
         color: #EB5757;
     }
 }

package/dist/components/Input/InputBasic/index.js

@@ -10,7 +10,7 @@ var Input = function (_a) {
     var _f = useFormikContext(), values = _f.values, touched = _f.touched, errors = _f.errors, handleChange = _f.handleChange;
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("input", { className: "DBui-inputBasic", type: type, placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "aria-invalid": isInvalid })));
+        React.createElement("input", { className: "DBui-inputBasic", type: type, placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "data-invalid": isInvalid })));
 };
 export default Input;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/InputCheckbox/index.js

@@ -12,7 +12,7 @@ var InputCheckbox = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputCheckboxList" }, options.map(function (data, index) { return (React.createElement("div", { key: index, className: "DBui-wrapInputCheckbox" },
             React.createElement("input", { className: "DBui-inputCheckbox", type: "checkbox", disabled: disabled, value: data.value, onChange: handleChange, name: name, checked: getIn(values, name).includes(data.value) }),
-            React.createElement("p", { className: "DBui-labelCheckbox", "aria-invalid": isInvalid },
+            React.createElement("p", { className: "DBui-labelCheckbox", "data-invalid": isInvalid },
                 React.createElement("small", null, data.label)))); }))));
 };
 export default InputCheckbox;

package/dist/components/Input/InputCheckbox/index.scss

@@ -11,7 +11,7 @@
         gap: 0.3em;
 
         .DBui-labelCheckbox {
-            &[aria-invalid='true'] {
+            &[data-invalid='true'] {
                 color: #EB5757;
             }
         }

package/dist/components/Input/InputDateRangePicker/index.js

@@ -13,7 +13,7 @@ var InputDateRangePicker = function (_a) {
     var _f = getIn(values, name), startDate = _f[0], endDate = _f[1];
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("div", { className: "react-datepicler-custom", "aria-invalid": isInvalid },
+        React.createElement("div", { className: "react-datepicler-custom", "data-invalid": isInvalid },
             React.createElement(DatePicker, { selectsRange: true, startDate: startDate, endDate: endDate, onChange: function (update) {
                     setFieldValue(name, update);
                 }, disabled: disabled, placeholderText: placeholder }))));

package/dist/components/Input/InputDateRangePicker/index.scss

@@ -22,7 +22,7 @@
 }
 
 .react-datepicler-custom {
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
 
         input {
             border: 1px solid #EB5757;

package/dist/components/Input/InputNumber/index.js

@@ -43,7 +43,7 @@ var InputNumber = function (_a) {
         }
     };
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("input", { className: "DBui-inputNumber", type: "text", placeholder: placeholder, disabled: disabled, value: showValue, onChange: handleChange, name: name, pattern: "[0-9]*\\.?[0-9]*", "aria-invalid": isInvalid })));
+        React.createElement("input", { className: "DBui-inputNumber", type: "text", placeholder: placeholder, disabled: disabled, value: showValue, onChange: handleChange, name: name, pattern: "[0-9]*\\.?[0-9]*", "data-invalid": isInvalid })));
 };
 export default InputNumber;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/InputPassword/index.js

@@ -14,7 +14,7 @@ var InputPassword = function (_a) {
     var _f = useState(false), isShow = _f[0], setIsShow = _f[1];
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputPassword" },
-            React.createElement("input", { className: "DBui-inputPassword", type: isShow ? 'text' : 'password', placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "aria-invalid": isInvalid }),
+            React.createElement("input", { className: "DBui-inputPassword", type: isShow ? 'text' : 'password', placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "data-invalid": isInvalid }),
             React.createElement("img", { className: "DBui-inputPasswordIcon", src: isShow ? visibilitySVG : visibilityOffSVG, onClick: function () { return setIsShow(!isShow); } }))));
 };
 export default InputPassword;

package/dist/components/Input/InputRadio/index.js

@@ -12,7 +12,7 @@ var InputRadio = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputRadioList" }, options.map(function (data, index) { return (React.createElement("div", { key: index, className: "DBui-wrapInputRadio" },
             React.createElement("input", { className: "DBui-inputRadio", type: "radio", disabled: disabled, value: data.value, onChange: handleChange, name: name, checked: getIn(values, name) === data.value }),
-            React.createElement("p", { className: "DBui-labelRadio", "aria-invalid": isInvalid },
+            React.createElement("p", { className: "DBui-labelRadio", "data-invalid": isInvalid },
                 React.createElement("small", null, data.label)))); }))));
 };
 export default InputRadio;

package/dist/components/Input/InputRadio/index.scss

@@ -11,7 +11,7 @@
         gap: 0.3em;
 
         .DBui-labelRadio {
-            &[aria-invalid='true'] {
+            &[data-invalid='true'] {
                 color: #EB5757;
             }
         }

package/dist/components/Input/InputSelect/index.js

@@ -26,15 +26,15 @@ var InputSelect = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement(Menu, { disabled: disabled, trigger: function (_a) {
                 var isOpen = _a.isOpen;
-                return (React.createElement("div", { className: "DBui-wrapperInputSelect", "aria-invalid": isInvalid, "aria-disabled": disabled },
+                return (React.createElement("div", { className: "DBui-wrapperInputSelect", "data-invalid": isInvalid, "data-disabled": disabled },
                     React.createElement("div", { className: "DBui-wrapperLabelInputSelect" },
                         (selected === null || selected === void 0 ? void 0 : selected.label) ? (React.createElement("p", { className: "DBui-wrapperLabel" },
                             React.createElement("small", null, selected === null || selected === void 0 ? void 0 : selected.label))) : (React.createElement("p", { className: "DBui-placeholder" },
                             React.createElement("small", null, placeholder))),
-                        React.createElement("img", { src: closedSVG, className: "DBui-clearIconInputSelect", onClick: handleCleaState, "aria-hidden": !Boolean(getIn(values, name)) || disabled || notShowClearValue || isHideClearIcon })),
-                    React.createElement("img", { src: expandArrowSVG, className: "DBui-arrowIconInputSelect", "aria-checked": disabled ? true : !isOpen })));
+                        React.createElement("img", { src: closedSVG, className: "DBui-clearIconInputSelect", onClick: handleCleaState, "data-hidden": !Boolean(getIn(values, name)) || disabled || notShowClearValue || isHideClearIcon })),
+                    React.createElement("img", { src: expandArrowSVG, className: "DBui-arrowIconInputSelect", "data-checked": disabled ? true : !isOpen })));
             } }, options.map(function (data, index) {
-            return (React.createElement("p", { key: index, className: "DBui-menuItemInputSelect", onClick: function () { return handleClick(data.value); }, "aria-checked": (selected === null || selected === void 0 ? void 0 : selected.value) === data.value }, data.label));
+            return (React.createElement("p", { key: index, className: "DBui-menuItemInputSelect", onClick: function () { return handleClick(data.value); }, "data-checked": (selected === null || selected === void 0 ? void 0 : selected.value) === data.value }, data.label));
         }))));
 };
 export default InputSelect;

package/dist/components/Input/InputSelect/index.scss

@@ -12,11 +12,11 @@
   color: #000000;
   display: flex;
 
-  &[aria-invalid='true'] {
+  &[data-invalid='true'] {
     border: 1px solid #eb5757;
   }
 
-  &[aria-disabled='true'] {
+  &[data-disabled='true'] {
     @extend .DBui-disabled;
   }
 
@@ -41,7 +41,7 @@
     .DBui-clearIconInputSelect {
       width: 20px;
 
-      &[aria-hidden='true'] {
+      &[data-hidden='true'] {
         display: none !important;
       }
 
@@ -58,7 +58,7 @@
     transform: translateY(-50%);
     transition: transform 0.2s;
 
-    &[aria-checked='false'] {
+    &[data-checked='false'] {
       transform: rotate(180deg) translateY(50%);
     }
   }
@@ -74,7 +74,7 @@
     background-color: #fafafa;
   }
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     background-color: #6f5ee0;
     color: #ffffff;
   }

package/dist/components/Input/InputTextarea/index.js

@@ -10,7 +10,7 @@ var InputTextarea = function (_a) {
     var _g = useFormikContext(), values = _g.values, touched = _g.touched, errors = _g.errors, handleChange = _g.handleChange;
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("textarea", { className: "DBui-inputTextarea", placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, rows: rows, cols: cols, "aria-invalid": isInvalid })));
+        React.createElement("textarea", { className: "DBui-inputTextarea", placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, rows: rows, cols: cols, "data-invalid": isInvalid })));
 };
 export default InputTextarea;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/extend.scss

@@ -13,7 +13,7 @@
     background-color: #FFFFFF;
     color: #000000;
 
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
         border: 1px solid #EB5757;
     }
 }

package/dist/components/InputNonContext/InputSwitch/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsInputNonContextSwitch } from './index.type';
+declare const InputNonContextSwitch: React.FC<PropsInputNonContextSwitch>;
+export default InputNonContextSwitch;

package/dist/components/InputNonContext/InputSwitch/index.js

@@ -0,0 +1,19 @@
+// Lib
+import React from 'react';
+// Images
+// Include in project
+import './index.scss';
+var InputNonContextSwitch = function (_a) {
+    var value = _a.value, onChange = _a.onChange, checked = _a.checked, disabled = _a.disabled;
+    return (React.createElement("div", { className: "DBui-wrapInputList", "data-disabled": disabled },
+        React.createElement("label", { className: "DBui-switch" },
+            React.createElement("span", { className: "DBui-minus" }),
+            React.createElement("span", { className: "DBui-miniCircle" }),
+            React.createElement("input", { type: "checkbox", checked: Boolean(checked), onChange: function (e) {
+                    e.stopPropagation();
+                    onChange === null || onChange === void 0 ? void 0 : onChange();
+                }, disabled: disabled, value: value }),
+            React.createElement("span", { className: "DBui-slider" }))));
+};
+export default InputNonContextSwitch;
+//# sourceMappingURL=index.js.map

package/dist/components/InputNonContext/InputSwitch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/InputNonContext/InputSwitch/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,qBAAqB,GAAyC,UAAC,EAKpE;QAJC,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA;IAER,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB,mBAAgB,QAAQ;QACzD,+BAAO,SAAS,EAAC,aAAa;YAC5B,8BAAM,SAAS,EAAC,YAAY,GAAQ;YACpC,8BAAM,SAAS,EAAC,iBAAiB,GAAQ;YACzC,+BACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EACzB,QAAQ,EAAE,UAAC,CAAC;oBACV,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;gBACd,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ;YACF,8BAAM,SAAS,EAAC,aAAa,GAAQ,CAC/B,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/components/InputNonContext/InputSwitch/index.scss

@@ -0,0 +1,84 @@
+.DBui-switch {
+    position: relative;
+    display: inline-block;
+    width: 51px;
+    height: 28px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .DBui-minus {
+        position: absolute;
+        height: 9px;
+        width: 1px;
+        left: 18px;
+        bottom: 9px;
+        background-color: #1C1C1E;
+        z-index: 1;
+        border-radius: 999px;
+    }
+
+    .DBui-miniCircle {
+        position: absolute;
+        border-radius: 100%;
+        height: 7px;
+        width: 7px;
+        right: 11px;
+        bottom: 10px;
+        box-shadow: 0 0 0px 1px #000000;
+        z-index: 1;
+    }
+
+    .DBui-slider {
+        border-radius: 34px;
+
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #AAAAAA;
+        -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+
+        &:before {
+            border-radius: 50%;
+            z-index: 2;
+
+            position: absolute;
+            content: '';
+            height: 20px;
+            width: 20px;
+            left: 4px;
+            bottom: 4px;
+            background-color: #1C1C1E;
+            box-shadow: 0px 0.31px 10px 0px #00000004;
+            -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+            transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        }
+    }
+
+    input:checked+.DBui-slider {
+        background-color: #6F5EE0;
+    }
+
+    input:checked+.DBui-slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+    }
+
+    .DBui-wrapInputList {
+        display: flex;
+        flex-direction: row;
+
+        &[data-disabled='true'] {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+}

package/dist/components/InputNonContext/InputSwitch/index.type.d.ts

@@ -0,0 +1,6 @@
+export type PropsInputNonContextSwitch = {
+    disabled?: boolean;
+    onChange: () => void;
+    checked: boolean;
+    value: string;
+};

package/dist/components/InputNonContext/InputSwitch/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/InputNonContext/InputSwitch/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../../src/components/InputNonContext/InputSwitch/index.type.tsx"],"names":[],"mappings":""}

package/dist/components/Menu/index.js

@@ -145,8 +145,8 @@ var Menu = function (_a) {
     return (React.createElement("div", { ref: menuRef },
         React.createElement("div", { onClick: handleToggle, className: "cursor", ref: triggerRef }, trigger({ isOpen: isOpen })),
         mounted &&
-            createPortal(React.createElement("div", { className: "DBui-wrapperMenuItem", "aria-hidden": !(isOpen && !disabled), style: menuStyle, ref: menuItemRef }, children), document.getElementById('root') || document.getElementById('__next')),
-        !mounted && (React.createElement("div", { className: "DBui-wrapperMenuItem", "aria-hidden": true, style: menuStyle, ref: menuItemRef }, children))));
+            createPortal(React.createElement("div", { className: "DBui-wrapperMenuItem", "data-hidden": !(isOpen && !disabled), style: menuStyle, ref: menuItemRef }, children), document.getElementById('root') || document.getElementById('__next')),
+        !mounted && (React.createElement("div", { className: "DBui-wrapperMenuItem", "data-hidden": true, style: menuStyle, ref: menuItemRef }, children))));
 };
 export default Menu;
 //# sourceMappingURL=index.js.map

package/dist/components/Menu/index.scss

@@ -13,7 +13,7 @@
   overflow-y: scroll;
   overflow-x: hidden;
 
-  &[aria-hidden='true'] {
+  &[data-hidden='true'] {
     visibility: hidden;
   }
 }

package/dist/components/Modal/index.js

@@ -53,9 +53,9 @@ var Modal = function (_a) {
             var modalElements = document.querySelectorAll('.DBui-modalBase');
             // Convert NodeList to an array to use filter method
             var modalArray = Array.from(modalElements);
-            // Filter the array based on aria-hidden attribute
+            // Filter the array based on data-hidden attribute
             var showModals = modalArray.filter(function (modal) {
-                return modal.getAttribute('aria-hidden') === 'false';
+                return modal.getAttribute('data-hidden') === 'false';
             });
             var topLayerShowModal = showModals[showModals.length - 1];
             // Check if the pressed key is the Escape key
@@ -73,7 +73,7 @@ var Modal = function (_a) {
         };
     }, [open]);
     return (React.createElement(Blackdrop, { open: open },
-        React.createElement("div", { className: "DBui-modalBase DBui-modalContent", "aria-hidden": !open, style: styleWidth, ref: modalRef, id: id },
+        React.createElement("div", { className: "DBui-modalBase DBui-modalContent", "data-hidden": !open, style: styleWidth, ref: modalRef, id: id },
             React.createElement("img", { src: closedSVG, alt: "", className: "DBui-close", onClick: onClose }),
             React.createElement("div", null, children))));
 };

package/dist/components/index.d.ts

@@ -27,6 +27,8 @@ export { default as InputSelect } from './Input/InputSelect';
 export type { PropsInputSelect } from './Input/InputSelect/index.type';
 export { default as InputAutoComplete } from './Input/InputAutoComplete';
 export type { PropsInputAutoComplete } from './Input/InputAutoComplete/index.type';
+export { default as InputSwitch } from './InputNonContext/InputSwitch';
+export type { PropsInputNonContextSwitch } from './InputNonContext/InputSwitch/index.type';
 export type TValueOption = string | number;
 export type TOption = {
     label: string;

package/dist/components/index.js

@@ -13,6 +13,7 @@ export { default as InputCheckbox } from './Input/InputCheckbox';
 export { default as InputTextarea } from './Input/InputTextarea';
 export { default as InputSelect } from './Input/InputSelect';
 export { default as InputAutoComplete } from './Input/InputAutoComplete';
+export { default as InputSwitch } from './InputNonContext/InputSwitch';
 // Context
 export { DBuiContext, DBuiProvider } from './context';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAG5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA,CAAC,mCAAmC;AAGtF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAGxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA,CAAC,+BAA+B;AAGxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA,CAAC,kCAAkC;AAG7E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAUxE,UAAU;AACV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAG5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA,CAAC,mCAAmC;AAGtF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAGxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA,CAAC,+BAA+B;AAGxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA,CAAC,kCAAkC;AAG7E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAGxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAUtE,UAAU;AACV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datability/8ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "",
   "main": "dist/components/index.js",
   "types": "dist/components/index.d.ts",
@@ -8,7 +8,7 @@
   "license": "ISC",
   "keywords": [],
   "scripts": {
-    "start": "PORT=4000 react-scripts start",
+    "start": "react-scripts start",
     "cp-svg": "copyfiles -u 1 src/components/**/*.svg dist/",
     "cp-scss": "copyfiles -u 1 src/components/**/*.scss dist/",
     "cp-scss-2": "copyfiles -u 1 src/components/**/**/*.scss dist/",