mimir-ui-kit 1.17.3 → 1.19.0

package/dist/components/TabTrail/TabTrail.js

@@ -4,8 +4,7 @@ import * as React from "react";
 import React__default, { useRef, useState, createContext, useReducer, useMemo, useId, useContext, forwardRef, useEffect } from "react";
 import { ETabTrailSize } from "./constants.js";
 import { TabButtons } from "./TabButtons/TabButtons.js";
-import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import { NotificationBadge } from "../NotificationBadge/NotificationBadge.js";
 import { n, M, W, s as s$3, y, o, H, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, a as u, u as u$1, c as o$1, t } from "../../keyboard-B256ZoM-.js";
 import { w } from "../../use-active-press-B6yeSopF.js";
 import { T as T$1 } from "../../use-resolve-button-type-B6LE6gU3.js";
@@ -200,18 +199,18 @@ function He(e, r) {
   return !s2 && ((g = n$1.unmount) == null || g) && !((R = n$1.static) != null && R) ? React__default.createElement(T, { "aria-hidden": "true", ...m2 }) : H({ ourProps: m2, theirProps: n$1, slot: b2, defaultTag: Ge, features: Ue, visible: s2, name: "Tabs.Panel" });
 }
 let we = W(ve), Oe = W(Se), Ne = W(Ie), ke = W(Me), Be = W(He), st = Object.assign(we, { Group: Oe, List: Ne, Panels: ke, Panel: Be });
-const container = "_container_y23cb_2";
-const group = "_group_y23cb_6";
-const tab = "_tab_y23cb_15";
-const list = "_list_y23cb_30";
-const tabs = "_tabs_y23cb_41";
-const buttons = "_buttons_y23cb_45";
-const m = "_m_y23cb_52";
-const s = "_s_y23cb_57";
+const container = "_container_5jk4g_2";
+const group = "_group_5jk4g_6";
+const tab = "_tab_5jk4g_16";
+const list = "_list_5jk4g_51";
+const tabs = "_tabs_5jk4g_62";
+const buttons = "_buttons_5jk4g_68";
+const m = "_m_5jk4g_75";
+const s = "_s_5jk4g_82";
 const cls = {
   container,
   group,
-  "group-inner": "_group-inner_y23cb_10",
+  "group-inner": "_group-inner_5jk4g_10",
   tab,
   list,
   tabs,
@@ -220,10 +219,9 @@ const cls = {
   s
 };
 const TabTrail = forwardRef(
-  ({ categories, size = ETabTrailSize.M }, ref) => {
+  ({ categories, size = ETabTrailSize.M, showButtons = true, className }, ref) => {
     const [activeIndex, setActiveIndex] = useState(0);
     const tabListRef = useRef(null);
-    const isTablet = useMediaQuery(EMediaQuery.S);
     const handleNext = () => {
       setActiveIndex((prevIndex) => (prevIndex + 1) % categories.length);
     };
@@ -249,21 +247,24 @@ const TabTrail = forwardRef(
       Oe,
       {
         ref,
-        className: classNames(cls.group, cls[size]),
+        className: classNames(cls.group, cls[size], className),
         selectedIndex: activeIndex,
         onChange: setActiveIndex,
         children: [
           /* @__PURE__ */ jsxs("div", { className: cls["group-inner"], children: [
-            /* @__PURE__ */ jsx(Ne, { ref: tabListRef, className: cls.list, children: /* @__PURE__ */ jsx("div", { className: cls.tabs, children: categories.map(({ name }, index) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Ne, { ref: tabListRef, className: cls.list, children: /* @__PURE__ */ jsx("div", { className: cls.tabs, children: categories.map(({ name, notificationCount }, index) => /* @__PURE__ */ jsxs(
               st,
               {
                 className: `${cls.tab} ${activeIndex === index ? 'data-active="true"' : ""}`,
                 "data-active": activeIndex === index,
-                children: name
+                children: [
+                  name,
+                  notificationCount && /* @__PURE__ */ jsx(NotificationBadge, { count: notificationCount, size: "m" })
+                ]
               },
               name
             )) }) }),
-            !isTablet && /* @__PURE__ */ jsx("div", { className: cls.buttons, children: /* @__PURE__ */ jsx(
+            showButtons && /* @__PURE__ */ jsx("div", { className: cls.buttons, children: /* @__PURE__ */ jsx(
               TabButtons,
               {
                 handlePrevTab: handlePrev,

package/dist/components/TextArea/TextArea.js

@@ -5,7 +5,7 @@ import { useAutoResizeTextArea } from "./hooks.js";
 import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
-import { c as cls } from "../../Input-D-FCB1FU.js";
+import { c as cls } from "../../Input-BFFPzelg.js";
 import { EInputVariant } from "../Input/constants.js";
 import '../../assets/TextArea.css';const textarea = "_textarea_46c4k_2";
 const s = "_s_46c4k_6";
@@ -62,7 +62,6 @@ const TextArea = memo(
         id,
         onFocus,
         onBlur,
-        onChange,
         label,
         withClearButton,
         disabled,
@@ -105,10 +104,11 @@ const TextArea = memo(
         }
       };
       const handleChange = (event) => {
+        var _a;
         const targetValue = event.target.value;
         setWithValue(!!targetValue);
         handleResize();
-        onChange == null ? void 0 : onChange(event);
+        (_a = otherProps == null ? void 0 : otherProps.onChange) == null ? void 0 : _a.call(otherProps, event);
       };
       const currentLeftAddon = renderAddon(leftAddon);
       const currentRightAddon = renderAddon(rightAddon);

package/dist/components/Vote/Vote.d.ts

@@ -1,5 +1,5 @@
 import { TCommonVoteProps } from './types';
-import { EStepsPrimaryColor, EStepsSecondaryColor } from '../Steps/constants';
+import { TStepsZone } from '../Steps/types.ts';
 
 export type TProps = TCommonVoteProps & {
     /**
@@ -47,17 +47,20 @@ export type TProps = TCommonVoteProps & {
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Зоны для рахделения шагов по цветам
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет круга шага с баллом, если оценка не установлена и шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
     /**
-     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     * Цвет текста в круге с баллом
      */
-    needChangeFirstHalfColor?: boolean;
+    scoreTextColor?: {
+        unselected: string;
+        selected: string;
+    };
 };
 export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
     /**
@@ -105,15 +108,18 @@ export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVote
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Зоны для рахделения шагов по цветам
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет круга шага с баллом, если оценка не установлена и шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
     /**
-     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     * Цвет текста в круге с баллом
      */
-    needChangeFirstHalfColor?: boolean;
+    scoreTextColor?: {
+        unselected: string;
+        selected: string;
+    };
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Vote/Vote.js

@@ -1,32 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useState, useEffect } from "react";
-import { DEFAULT_TITLE, EVoteSize, SCORE_TO_QUANTITY_THRESHOLD, ZERO_VALUE } from "./constants.js";
-import { ZERO_STEP, EStepsPrimaryColor, EStepsSecondaryColor } from "../Steps/constants.js";
+import { DEFAULT_TITLE, EVoteSize, ZERO_VALUE } from "./constants.js";
 import { Steps } from "../Steps/Steps.js";
-import '../../assets/Vote.css';const container = "_container_4roqw_2";
-const title = "_title_4roqw_9";
-const score = "_score_4roqw_16";
-const zero = "_zero_4roqw_29";
-const LIGHT_GRAY = "_LIGHT_GRAY_4roqw_29";
-const WHITE = "_WHITE_4roqw_32";
-const LIGHT_SAPPHIRE = "_LIGHT_SAPPHIRE_4roqw_36";
-const GRAY = "_GRAY_4roqw_39";
-const CITRINE = "_CITRINE_4roqw_42";
-const SAPPHIRE = "_SAPPHIRE_4roqw_45";
+import { ZERO_STEP } from "../Steps/constants.js";
+import '../../assets/Vote.css';const container = "_container_1akd9_2";
+const title = "_title_1akd9_9";
+const score = "_score_1akd9_16";
 const cls = {
   container,
   title,
-  score,
-  zero,
-  LIGHT_GRAY,
-  WHITE,
-  LIGHT_SAPPHIRE,
-  GRAY,
-  CITRINE,
-  SAPPHIRE
+  score
 };
 const Vote = forwardRef((props, ref) => {
+  var _a;
   const {
     rootClassName,
     titleClassName,
@@ -40,12 +27,14 @@ const Vote = forwardRef((props, ref) => {
     size = EVoteSize.M,
     onClick,
     disabled = false,
-    primaryColor = EStepsPrimaryColor.CITRINE,
-    secondaryColor = EStepsSecondaryColor.WHITE,
-    needChangeFirstHalfColor = false
+    zones = [{ color: "#ff0000", to: quantity }],
+    unselectedColor = "#ffffff",
+    scoreTextColor = {
+      unselected: "#000000",
+      selected: "#ffffff"
+    }
   } = props;
   const [score2, setScore] = useState(current);
-  const [color, setColor] = useState(primaryColor);
   const isZeroStep = score2 === ZERO_STEP;
   useEffect(() => {
     setScore(current);
@@ -54,46 +43,36 @@ const Vote = forwardRef((props, ref) => {
     setScore(step);
     onClick && onClick(step);
   };
-  useEffect(() => {
-    if (!needChangeFirstHalfColor) return;
-    setColor(
-      score2 / quantity <= SCORE_TO_QUANTITY_THRESHOLD ? EStepsPrimaryColor.GRAY : primaryColor
-    );
-  }, [score2, primaryColor, needChangeFirstHalfColor, quantity]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(cls.container, rootClassName, cls[color]),
-      ref,
-      children: [
-        !withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(cls.score, scoreClassName, cls[secondaryColor], {
-              [cls.zero]: isZeroStep
-            }),
-            children: isZeroStep ? ZERO_VALUE : score2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Steps,
-          {
-            rootClassName: stepsRootClassName,
-            stepClassName: stepsStepClassName,
-            quantity,
-            size,
-            current: score2,
-            editable: true,
-            disabled,
-            onClick: handleStepsClick,
-            primaryColor: color,
-            secondaryColor
-          }
-        )
-      ]
-    }
-  );
+  const backgroundColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) || unselectedColor;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(cls.container, rootClassName), ref, children: [
+    !withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(cls.score, scoreClassName),
+        style: {
+          backgroundColor,
+          color: isZeroStep ? scoreTextColor.unselected : scoreTextColor.selected
+        },
+        children: isZeroStep ? ZERO_VALUE : score2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Steps,
+      {
+        rootClassName: stepsRootClassName,
+        stepClassName: stepsStepClassName,
+        quantity,
+        size,
+        current: score2,
+        editable: true,
+        disabled,
+        onClick: handleStepsClick,
+        zones,
+        unselectedColor
+      }
+    )
+  ] });
 });
 export {
   Vote

package/dist/components/index.d.ts

@@ -19,7 +19,7 @@ export { Loader } from './Loader';
 export { Slider } from './Slider';
 export { Drawer } from './Drawer';
 export { EDrawerPosition } from './Drawer';
-export { Steps, EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize, type TCommonStepsProps } from './Steps';
+export { Steps, EStepsSize, EStepColor, type TCommonStepsProps } from './Steps';
 export { Vote, EVoteSize, type TCommonVoteProps } from './Vote';
 export { SelectSearch, ESelectSearchSize } from './SelectSearch';
 export type { TSelectSearchProps, TSelectOption } from './SelectSearch';
@@ -38,3 +38,6 @@ export type { TUploaderPhotos, TOnChangePhotosUpdate } from './UploaderPhotos';
 export { Uploader } from './Uploader';
 export type { TUploadValue, TFileItem } from './Uploader';
 export { ELinkSize, ELinkVariant, Link } from './AnchorLink';
+export { NotificationBadge } from './NotificationBadge';
+export type { TNotificationBadgeProps } from './NotificationBadge';
+export { ENotificationBadgeSize } from './NotificationBadge';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { Button } from "./Button/Button.js";
 import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
-import { I } from "../Input-D-FCB1FU.js";
+import { I } from "../Input-BFFPzelg.js";
 import { EInputSize, EInputVariant } from "./Input/constants.js";
 import { TextArea } from "./TextArea/TextArea.js";
 import { InputPassword } from "./InputPassword/InputPassword.js";
@@ -17,7 +17,7 @@ import { Slider } from "./Slider/Slider.js";
 import { Drawer } from "./Drawer/Drawer.js";
 import { EDrawerPosition } from "./Drawer/constants.js";
 import { Steps } from "./Steps/Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./Steps/constants.js";
+import { EStepColor, EStepsSize } from "./Steps/constants.js";
 import { Vote } from "./Vote/Vote.js";
 import { EVoteSize } from "./Vote/constants.js";
 import { SelectSearch } from "./SelectSearch/SelectSearch.js";
@@ -39,6 +39,8 @@ import { UploaderPhotos } from "./UploaderPhotos/UploaderPhotos.js";
 import { Uploader } from "./Uploader/Uploader.js";
 import { Link } from "./AnchorLink/AnchorLink.js";
 import { ELinkSize, ELinkVariant } from "./AnchorLink/constants.js";
+import { NotificationBadge } from "./NotificationBadge/NotificationBadge.js";
+import { ENotificationBadgeSize } from "./NotificationBadge/constants.js";
 export {
   Accordion,
   AccordionItem,
@@ -57,9 +59,9 @@ export {
   ELinkSize,
   ELinkVariant,
   EMergedButtonVariantRound,
+  ENotificationBadgeSize,
   ESelectSearchSize,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ETabTrailSize,
   ETagSize,
@@ -74,6 +76,7 @@ export {
   Link,
   Loader,
   MergedButton,
+  NotificationBadge,
   OtpInput,
   Pagination,
   RadioGroup,

package/dist/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
-import { EMediaQuery } from './constants';
+import { EMediaQuery, EMinMediaQuery } from './constants';
 
 /**
  * @name useMediaQuery
@@ -11,4 +11,4 @@ import { EMediaQuery } from './constants';
  * @example
  * const matches = useMediaQuery('(max-width: 768px)');
  */
-export declare const useMediaQuery: (query: EMediaQuery | `${EMediaQuery}`) => boolean;
+export declare const useMediaQuery: (query: EMediaQuery | `${EMediaQuery}` | EMinMediaQuery | `${EMinMediaQuery}`) => boolean;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Button } from "./components/Button/Button.js";
 import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
-import { I } from "./Input-D-FCB1FU.js";
+import { I } from "./Input-BFFPzelg.js";
 import { EInputSize, EInputVariant } from "./components/Input/constants.js";
 import { TextArea } from "./components/TextArea/TextArea.js";
 import { InputPassword } from "./components/InputPassword/InputPassword.js";
@@ -17,7 +17,7 @@ import { Slider } from "./components/Slider/Slider.js";
 import { Drawer } from "./components/Drawer/Drawer.js";
 import { EDrawerPosition } from "./components/Drawer/constants.js";
 import { Steps } from "./components/Steps/Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./components/Steps/constants.js";
+import { EStepColor, EStepsSize } from "./components/Steps/constants.js";
 import { Vote } from "./components/Vote/Vote.js";
 import { EVoteSize } from "./components/Vote/constants.js";
 import { SelectSearch } from "./components/SelectSearch/SelectSearch.js";
@@ -39,6 +39,8 @@ import { UploaderPhotos } from "./components/UploaderPhotos/UploaderPhotos.js";
 import { Uploader } from "./components/Uploader/Uploader.js";
 import { Link } from "./components/AnchorLink/AnchorLink.js";
 import { ELinkSize, ELinkVariant } from "./components/AnchorLink/constants.js";
+import { NotificationBadge } from "./components/NotificationBadge/NotificationBadge.js";
+import { ENotificationBadgeSize } from "./components/NotificationBadge/constants.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
@@ -68,9 +70,9 @@ import './assets/index.css';export {
   EMediaQuery,
   EMergedButtonVariantRound,
   EMinMediaQuery,
+  ENotificationBadgeSize,
   ESelectSearchSize,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ETabTrailSize,
   ETagSize,
@@ -86,6 +88,7 @@ import './assets/index.css';export {
   Link,
   Loader,
   MergedButton,
+  NotificationBadge,
   OtpInput,
   Pagination,
   RadioGroup,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.17.3",
+  "version": "1.19.0",
   "type": "module",
   "exports": {
     ".": {