indicator-ui 0.0.152 → 0.0.154

package/dist/index.js

@@ -3034,7 +3034,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"checkbox":"Checkbox-module__checkbox___GSei6","textBlock":"Checkbox-module__textBlock___lgsN_","text":"Checkbox-module__text___bgxrk","indeterminate":"Checkbox-module__indeterminate___rVkUe","supportingText":"Checkbox-module__supportingText___BR8D6","disabled":"Checkbox-module__disabled___haSYz","error":"Checkbox-module__error___YOn5a","widthFill":"Checkbox-module__widthFill___EHcfi","heightFill":"Checkbox-module__heightFill___uqjBX","widthHug":"Checkbox-module__widthHug___N5weH","heightHug":"Checkbox-module__heightHug___SK_mI"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"checkbox":"Checkbox-module__checkbox___GSei6","textBlock":"Checkbox-module__textBlock___lgsN_","text":"Checkbox-module__text___bgxrk","textBold":"Checkbox-module__textBold___dlrM9","supportingText":"Checkbox-module__supportingText___BR8D6","hover":"Checkbox-module__hover___B2BYJ","focus":"Checkbox-module__focus___OeuC2","disabled":"Checkbox-module__disabled___haSYz","error":"Checkbox-module__error___YOn5a","widthFill":"Checkbox-module__widthFill___EHcfi","heightFill":"Checkbox-module__heightFill___uqjBX","widthHug":"Checkbox-module__widthHug___N5weH","heightHug":"Checkbox-module__heightHug___SK_mI"});
 
 /***/ }),
 
@@ -3130,7 +3130,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"datePickerMain":"DatePickerMain-module__datePickerMain___G7IMt","header":"DatePickerMain-module__header___XeOZO","item":"DatePickerMain-module__item___UNZyP","main":"DatePickerMain-module__main___i975m","meta":"DatePickerMain-module__meta___XqHRG","month":"DatePickerMain-module__month___lyaBg","year":"DatePickerMain-module__year___fXQLm","grid":"DatePickerMain-module__grid___SXNOt"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"datePickerMain":"DatePickerMain-module__datePickerMain___G7IMt","header":"DatePickerMain-module__header___XeOZO","item":"DatePickerMain-module__item___UNZyP","meta":"DatePickerMain-module__meta___XqHRG","month":"DatePickerMain-module__month___lyaBg","year":"DatePickerMain-module__year___fXQLm","main":"DatePickerMain-module__main___i975m","grid":"DatePickerMain-module__grid___SXNOt"});
 
 /***/ }),
 
@@ -3402,7 +3402,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggle":"Toggle-module__toggle___v6vwY","textBlock":"Toggle-module__textBlock___KUwlm","text":"Toggle-module__text___i2f7B","description":"Toggle-module__description___hvDOL","disabled":"Toggle-module__disabled___ME0Wv","widthFill":"Toggle-module__widthFill___JEbCX","heightFill":"Toggle-module__heightFill___yalwe","widthHug":"Toggle-module__widthHug___EL72F","heightHug":"Toggle-module__heightHug___fFSTL"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggle":"Toggle-module__toggle___v6vwY","textBlock":"Toggle-module__textBlock___KUwlm","text":"Toggle-module__text___i2f7B","description":"Toggle-module__description___hvDOL","hover":"Toggle-module__hover___Ws4WL","active":"Toggle-module__active___Skxl4","disabled":"Toggle-module__disabled___ME0Wv","widthFill":"Toggle-module__widthFill___JEbCX","heightFill":"Toggle-module__heightFill___yalwe","widthHug":"Toggle-module__widthHug___EL72F","heightHug":"Toggle-module__heightHug___fFSTL"});
 
 /***/ }),
 
@@ -7773,15 +7773,24 @@ __webpack_require__.r(__webpack_exports__);
 
 function Checkbox({ checked = false, type = 'checkbox', error = false, subtype = false, disabled = false, text, supportingText, indeterminate = false, onClick, width = 'fill', height = 'hug', className = _styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle, }) {
     const [isHover, setIsHover] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", { onClick: onClick, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.checkbox, {
+    const [isFocused, setIsFocused] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
+    const clickHandler = () => {
+        if (onClick)
+            onClick();
+        setIsFocused(false);
+    };
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", { onClick: clickHandler, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.checkbox, {
             [className?.error]: error,
             [className?.disabled]: disabled,
             [className?.widthFill]: width === 'fill',
             [className?.widthHug]: width === 'hug',
             [className?.heightFill]: height === 'fill',
             [className?.heightHug]: height === 'hug',
-        }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.CheckboxMark, { type: type, indeterminate: indeterminate, disabled: disabled, error: error, checked: checked, isButton: false, hover: isHover, relation: subtype }), text &&
-                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.textBlock, { [className?.indeterminate]: indeterminate }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: className?.text, children: text }), supportingText && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: className?.supportingText, children: supportingText })] })] }));
+        }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.CheckboxMark, { type: type, indeterminate: indeterminate, disabled: disabled, error: error, checked: checked, isButton: false, hover: isHover || isFocused, relation: subtype }), text &&
+                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.textBlock, {
+                        [className?.hover]: isHover,
+                        [className?.focus]: isFocused,
+                    }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.text, { [className?.textBold]: indeterminate || subtype }), children: text }), supportingText && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: className?.supportingText, children: supportingText })] })] }));
 }
 
 
@@ -8348,7 +8357,7 @@ function DatePickerMain({ chosenStart, chosenEnd, markFun, infoFun, target, onCl
     const getMainDates = () => {
         return setActiveIntervalDays(getDates(target));
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.datePickerMain, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.header, children: weekDays.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.item, children: item }, idx)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.main, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.meta, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.month, children: getMonth() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.year, children: getYear() })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.grid, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateGrid__WEBPACK_IMPORTED_MODULE_3__.DateGrid, { grid: getMainDates(), onClickDate: onClickDate, onScrollDown: onScrollDown, onScrollUp: onScrollUp }) })] })] }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.datePickerMain, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.meta, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.month, children: getMonth() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.year, children: getYear() })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.header, children: weekDays.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.item, children: item }, idx)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.main, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_1__.DatePickerMainStyle.grid, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateGrid__WEBPACK_IMPORTED_MODULE_3__.DateGrid, { grid: getMainDates(), onClickDate: onClickDate, onScrollDown: onScrollDown, onScrollUp: onScrollUp }) }) })] }));
 }
 
 
@@ -9735,7 +9744,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const FlexField = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({ value, type, onChange, onFocus, name, onBlur, onClick, mask = /.*/, required = false, disabled = false, isError = false, placeholder, notInput = false, icon, help, dropdown, userPic, textSupport, dropdownState = false, offFocus = false, button, unmask, blocks, pattern, onDropdownClick, buttonState = 'gray', onButtonClick,
+const FlexField = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({ value, type, onChange, onFocus, name, onBlur, onClick, mask = /.*/, required = false, disabled = false, isError = false, placeholder, notInput = false, icon, help, dropdown, userPic, textSupport, dropdownState = false, offFocus = false, button, unmask, blocks, pattern, onDropdownClick, buttonState = 'gray', onButtonClick, additionStyles,
 // className = FlexFieldStyle,
  }, ref) => {
     const [isFocus, setIsFocus] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
@@ -9823,7 +9832,7 @@ const FlexField = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({ value, ty
             [_styles__WEBPACK_IMPORTED_MODULE_5__.FlexFieldStyle.disabled]: disabled,
             [_styles__WEBPACK_IMPORTED_MODULE_5__.FlexFieldStyle.focus]: isFocus && !offFocus,
             [_styles__WEBPACK_IMPORTED_MODULE_5__.FlexFieldStyle.pointer]: !!onClick,
-        }), children: [getIcon(), getTextSupport(), getUserPic(), getInput(), getHelp(), getDropdown(), getButton()] }));
+        }, additionStyles), children: [getIcon(), getTextSupport(), getUserPic(), getInput(), getHelp(), getDropdown(), getButton()] }));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FlexField);
 
@@ -10038,8 +10047,9 @@ function InputField({ type, offWrapper, ...props }) {
         switch (type) {
             case 'select':
                 return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InputFields__WEBPACK_IMPORTED_MODULE_1__.SelectField, { ...props });
+            case 'checkbox':
             case 'radio':
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InputFields__WEBPACK_IMPORTED_MODULE_1__.RadioField, { ...props });
+                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InputFields__WEBPACK_IMPORTED_MODULE_1__.RadioField, { ...props, type: type });
             case 'switcher':
                 return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InputFields__WEBPACK_IMPORTED_MODULE_1__.SwitcherField, { ...props });
             case 'textarea':
@@ -10145,7 +10155,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function RadioField({ value, onChange, options = [], required = false, multiple = true, disabled = false, width = 'hug', }) {
+function RadioField({ value, onChange, options = [], required = false, multiple = true, disabled = false, width = 'hug', type = 'checkbox', }) {
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
         if (required && options[0] && (value === undefined || Array.isArray(value) && value.length === 0)) {
             onChange && onChange(options[0].value);
@@ -10197,7 +10207,7 @@ function RadioField({ value, onChange, options = [], required = false, multiple
             return JSON.stringify(value) === JSON.stringify(option.value);
         }
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: options.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_RadioFieldItem__WEBPACK_IMPORTED_MODULE_2__["default"], { option: item, onClick: () => handleChange(item), active: isActive(item), disabled: disabled, width: width }, idx)) }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: options.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_RadioFieldItem__WEBPACK_IMPORTED_MODULE_2__["default"], { option: item, type: type, onClick: () => handleChange(item), active: isActive(item), disabled: disabled, width: width }, idx)) }));
 }
 
 
@@ -10221,11 +10231,11 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function RadioFieldItem({ option, onClick, active = false, disabled = false, width = 'hug', }) {
+function RadioFieldItem({ type = "radio", option, onClick, active = false, disabled = false, width = 'hug', }) {
     if (option.component) {
         return react__WEBPACK_IMPORTED_MODULE_1___default().cloneElement(option.component, { onClick: onClick, active: active, disabled: disabled });
     }
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Checkbox, { type: 'radio', text: option.label, onClick: onClick, disabled: disabled, width: width, checked: active });
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Checkbox, { type: type, text: option.label, supportingText: option.description, onClick: onClick, disabled: disabled, width: width, checked: active });
 }
 
 
@@ -12361,7 +12371,10 @@ function Toggle({ active = false, disabled = false, onClick, text, description,
             [_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.heightHug]: height === 'hug',
             [_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.disabled]: disabled,
         }, additionStyle), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.ToggleBase, { active: active, hover: isHover, size: 'medium', isButton: false, disabled: disabled }), text &&
-                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.textBlock, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.text, children: text }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.description, children: description })] })] }));
+                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.textBlock, {
+                        [_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.hover]: isHover,
+                        [_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.active]: active,
+                    }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.text, children: text }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle?.description, children: description })] })] }));
 }