mimir-ui-kit 1.32.3 → 1.33.1

package/dist/assets/Avatar.css

@@ -0,0 +1 @@
+._avatar_58dyx_2{position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-height);-o-object-fit:cover;object-fit:cover;border-radius:50%}._avatar_58dyx_2 image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}._s_58dyx_19{--avatar-width: 32px;--avatar-height: 32px}._m_58dyx_24{--avatar-width: 40px;--avatar-height: 40px}._l_58dyx_29{--avatar-width: 48px;--avatar-height: 48px}._default_58dyx_34{background-color:var(--black-5)}

package/dist/assets/NotificationBadge.css

@@ -1 +1 @@
-._notification-badge_1rrs6_2{position:relative;display:flex;align-items:center;justify-content:center;width:var(--width-notification-badge);height:var(--height-notification-badge);color:var(--white);font-size:var(--size-text-notification-badge);background-color:var(--citrine-100);border-radius:50%}._notification-badge-absolute_1rrs6_14{position:absolute}._m_1rrs6_18{--size-text-notification-badge: var(--size-text-m);--width-notification-badge: 24px;--height-notification-badge: 24px}._s_1rrs6_24{--height-notification-badge: 16px;--width-notification-badge: 16px;--size-text-notification-badge: var(--size-text-s)}
+._notification-badge_2ldj3_2{position:relative;display:flex;align-items:center;justify-content:center;width:var(--width-notification-badge);height:var(--height-notification-badge);color:var(--white);font-size:var(--size-text-notification-badge);background-color:var(--citrine-100);border-radius:50%}._notification-badge-absolute_2ldj3_14{position:absolute}._m_2ldj3_18{--size-text-notification-badge: var(--size-text-m);--width-notification-badge: 24px;--height-notification-badge: 24px}._s_2ldj3_24{--height-notification-badge: 16px;--width-notification-badge: 16px;--size-text-notification-badge: var(--size-text-xs)}

package/dist/assets/styles.css

@@ -1 +1 @@
-._input_fbbrm_2{padding-right:var(--space-3xl)}._input-wrapper_fbbrm_6{flex:1}._date-wrapper_fbbrm_10{position:relative;width:100%}._date-wrapper_fbbrm_10 ._inputBorderControl_fbbrm_14{border:transparent}._date-wrapper_fbbrm_10:hover ._input-wrapper_fbbrm_6{background-color:var(--input-bg-color-hover)}._date-wrapper_fbbrm_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_fbbrm_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 label,[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_fbbrm_38 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_fbbrm_44{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_fbbrm_44._active_fbbrm_50{border-bottom:1px solid var(--citrine-100)}._button-wrapper_fbbrm_38{position:absolute;top:0;right:0;z-index:2;display:flex;justify-content:center;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_fbbrm_38{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_fbbrm_72{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_fbbrm_78{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_fbbrm_78 ._h_fbbrm_101{display:flex;width:100%;color:var(--black-100)}._calendar-block_fbbrm_78 ._b_fbbrm_38{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_fbbrm_78 ._d_fbbrm_10{display:flex;flex:1;gap:4px;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer}._calendar-block_fbbrm_78 ._m_fbbrm_122,._calendar-block_fbbrm_78 ._a_fbbrm_50,._calendar-block_fbbrm_78 ._prev_fbbrm_124{width:auto;height:48px;overflow:hidden}._calendar-block_fbbrm_78 ._m_fbbrm_122{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_fbbrm_78 ._m_fbbrm_122 b{font-weight:var(--font-weight-text-regular)}._calendar-block_fbbrm_78 ._orange_fbbrm_140{color:var(--citrine-100)}._calendar-block_fbbrm_78 ._a_fbbrm_50{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._a_fbbrm_50 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_fbbrm_78 ._a_fbbrm_50 b:hover{background:var(--black-10)}._calendar-block_fbbrm_78 ._a_fbbrm_50 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_fbbrm_78 ._current_fbbrm_165{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._monthGrid_fbbrm_170{display:grid;grid-template-columns:repeat(3,1fr)}
+._input_1i5h3_2{padding-right:var(--space-3xl)}._input-wrapper_1i5h3_6{flex:1}._date-wrapper_1i5h3_10{position:relative;width:100%}._date-wrapper_1i5h3_10 ._inputBorderControl_1i5h3_14{border:transparent}._date-wrapper_1i5h3_10:hover ._input-wrapper_1i5h3_6{background-color:var(--input-bg-color-hover)}._date-wrapper_1i5h3_10:before{position:absolute;top:0;right:45px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._date-wrapper_1i5h3_10._editable_1i5h3_27:before{display:none}._date-wrapper_1i5h3_10 svg{cursor:pointer}[data-disabled=true] ._date-wrapper_1i5h3_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_1i5h3_10 ._input-wrapper_1i5h3_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_1i5h3_10 ._input-wrapper_1i5h3_6 label,[data-disabled=true] ._date-wrapper_1i5h3_10 ._input-wrapper_1i5h3_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_1i5h3_44 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_1i5h3_50{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1i5h3_50._active_1i5h3_56{border-bottom:1px solid var(--citrine-100)}._button-wrapper_1i5h3_44{position:absolute;top:0;right:0;z-index:2;display:flex;justify-content:center;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1i5h3_44{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1i5h3_78{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1i5h3_84{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1i5h3_84 ._h_1i5h3_107{display:flex;width:100%;color:var(--black-100)}._calendar-block_1i5h3_84 ._b_1i5h3_44{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1i5h3_84 ._d_1i5h3_10{display:flex;flex:1;gap:4px;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer}._calendar-block_1i5h3_84 ._m_1i5h3_128,._calendar-block_1i5h3_84 ._a_1i5h3_56,._calendar-block_1i5h3_84 ._prev_1i5h3_130{width:auto;height:48px;overflow:hidden}._calendar-block_1i5h3_84 ._m_1i5h3_128{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1i5h3_84 ._m_1i5h3_128 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1i5h3_84 ._orange_1i5h3_146{color:var(--citrine-100)}._calendar-block_1i5h3_84 ._a_1i5h3_56{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_1i5h3_84 ._a_1i5h3_56 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1i5h3_84 ._a_1i5h3_56 b:hover{background:var(--black-10)}._calendar-block_1i5h3_84 ._a_1i5h3_56 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1i5h3_84 ._current_1i5h3_171{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_1i5h3_84 ._monthGrid_1i5h3_176{display:grid;grid-template-columns:repeat(3,1fr)}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { TAvatarProps } from './types';
+
+export declare const Avatar: import('react').MemoExoticComponent<({ size, className, notificationsCount, src, alt }: TAvatarProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { memo } from "react";
+import { EAvatarSize } from "./constants.js";
+import { Icon } from "../../icons/Icon.js";
+import { AppImage } from "../Image/Image.js";
+import { NotificationBadge } from "../NotificationBadge/NotificationBadge.js";
+import '../../assets/Avatar.css';const avatar = "_avatar_58dyx_2";
+const s = "_s_58dyx_19";
+const m = "_m_58dyx_24";
+const l = "_l_58dyx_29";
+const cls = {
+  avatar,
+  s,
+  m,
+  l,
+  "default": "_default_58dyx_34"
+};
+const Avatar = memo(
+  ({
+    size = EAvatarSize.M,
+    className,
+    notificationsCount = 0,
+    src,
+    alt = "User avatar"
+  }) => {
+    const notificationPosition = size === EAvatarSize.S || size === EAvatarSize.M ? { top: "8px", left: "-8px" } : { top: "12px", left: "-12px" };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(cls.avatar, cls[size], className, {
+          [cls.default]: !src
+        }),
+        children: [
+          src ? /* @__PURE__ */ jsx(AppImage, { src, alt, className: cls.image }) : /* @__PURE__ */ jsx(Icon, { iconName: "User16px" }),
+          !!notificationsCount && /* @__PURE__ */ jsx(
+            NotificationBadge,
+            {
+              count: notificationsCount,
+              position: notificationPosition,
+              size: size === EAvatarSize.S ? "s" : "m",
+              absolute: true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar
+};

package/dist/components/Avatar/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum EAvatarSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}

package/dist/components/Avatar/constants.js

@@ -0,0 +1,9 @@
+var EAvatarSize = /* @__PURE__ */ ((EAvatarSize2) => {
+  EAvatarSize2["S"] = "s";
+  EAvatarSize2["M"] = "m";
+  EAvatarSize2["L"] = "l";
+  return EAvatarSize2;
+})(EAvatarSize || {});
+export {
+  EAvatarSize
+};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { EAvatarSize } from './constants';
+export type { TAvatarProps, TAvatarSize } from './types';

package/dist/components/Avatar/index.js

@@ -0,0 +1,6 @@
+import { Avatar } from "./Avatar.js";
+import { EAvatarSize } from "./constants.js";
+export {
+  Avatar,
+  EAvatarSize
+};

package/dist/components/Avatar/types.d.ts

@@ -0,0 +1,10 @@
+import { EAvatarSize } from './constants';
+
+export type TAvatarSize = `${EAvatarSize}` | EAvatarSize;
+export type TAvatarProps = {
+    size?: TAvatarSize;
+    className?: string;
+    notificationsCount?: number;
+    src?: string;
+    alt?: string;
+};

package/dist/components/DatePicker/DatePicker.d.ts

@@ -2,35 +2,44 @@ import { TInputProps } from '../Input';
 
 export type DatePicker = {
     /**
-     * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
+     * Функция обратного вызова при изменении значения даты
      */
     onChangeValue?: (e: TDatePickerValue) => void;
     /**
-     * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта ошибки,
+     * Функция обратного вызова при возникновении ошибки валидации
      */
     onError?: (e: TDatePickerOnError) => void;
-    /** функция=callback, передает новое значение даты,
+    /**
+     * Функция обратного вызова при потере фокуса компонентом
      */
     onBlur?: (e: Date) => void;
     /**
-    * функция ограничения выбора даты
-    (до какой даты выбор не доступен)
-    */
+     *  Функция ограничения выбора даты (до какой даты выбор не доступен)
+     */
     before?: Date | string;
     /**
-     * значение из стейта (data)
+     * Значение даты из стейта (data)
      */
     value?: string;
     /**
-     * значение типа модально окна календаря
+     * Значение типа модального окна календаря
      */
     type?: 'days' | 'months' | 'years';
+    /**
+     * Флаг отключения компонента
+     */
     disabled?: boolean;
+    /**
+     * Флаг наличия ошибки
+     */
     error?: boolean;
     /**
-     * необязательное значение для немедленной валидации
+     * Флаг немедленной валидации при вводе
      */
     validateImmediately?: boolean;
+    /**
+     * Флаг разрешения ручного ввода даты
+     */
     editable?: boolean;
 } & TInputProps;
 export type TDatePickerValue = {
@@ -43,34 +52,43 @@ export type TDatePickerOnError = {
 };
 export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
     /**
-     * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
+     * Функция обратного вызова при изменении значения даты
      */
     onChangeValue?: (e: TDatePickerValue) => void;
     /**
-     * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта ошибки,
+     * Функция обратного вызова при возникновении ошибки валидации
      */
     onError?: (e: TDatePickerOnError) => void;
-    /** функция=callback, передает новое значение даты,
+    /**
+     * Функция обратного вызова при потере фокуса компонентом
      */
     onBlur?: (e: Date) => void;
     /**
-    * функция ограничения выбора даты
-    (до какой даты выбор не доступен)
-    */
+     *  Функция ограничения выбора даты (до какой даты выбор не доступен)
+     */
     before?: Date | string;
     /**
-     * значение из стейта (data)
+     * Значение даты из стейта (data)
      */
     value?: string;
     /**
-     * значение типа модально окна календаря
+     * Значение типа модального окна календаря
      */
     type?: "days" | "months" | "years";
+    /**
+     * Флаг отключения компонента
+     */
     disabled?: boolean;
+    /**
+     * Флаг наличия ошибки
+     */
     error?: boolean;
     /**
-     * необязательное значение для немедленной валидации
+     * Флаг немедленной валидации при вводе
      */
     validateImmediately?: boolean;
+    /**
+     * Флаг разрешения ручного ввода даты
+     */
     editable?: boolean;
 } & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/DatePicker/DatePicker.js

@@ -3,12 +3,16 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, forwardRef, useState, useEffect } from "react";
 import { DatePickerModal } from "./DatePickerModal.js";
 import { MonthPickerModal } from "./MonthPickerModal.js";
-import { c as cls } from "../../styles.module-Ugsf0AOb.js";
+import { c as cls } from "../../styles.module-7wzJYhR3.js";
+import { formatDatePart, getFullYear } from "./utils.js";
 import { YearPickerModal } from "./YearPickerModal.js";
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { I as Input } from "../../Input-ChCIy5oY.js";
 import { EInputVariant } from "../Input/constants.js";
+const MAX_DAY = 31;
+const MAX_MONTH = 12;
+const DATE_LENGTH = 8;
 const DatePicker = memo(
   forwardRef(
     ({
@@ -24,6 +28,7 @@ const DatePicker = memo(
       validateImmediately,
       variant,
       disabled = false,
+      editable = false,
       ...props
     }, ref) => {
       const [isActive, setActive] = useState(false);
@@ -32,6 +37,7 @@ const DatePicker = memo(
         value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
       );
       const [isError, setError] = useState(error);
+      const [inputValue, setInputValue] = useState("");
       useEffect(() => {
         setError(error);
       }, [error]);
@@ -40,6 +46,13 @@ const DatePicker = memo(
           value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
         );
       }, [value]);
+      useEffect(() => {
+        if (date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime())) {
+          setInputValue(formating.Date(date, "dd/mm/yy"));
+        } else {
+          setInputValue("");
+        }
+      }, [date]);
       const milliseconds = value && new Date(value).getTime;
       useEffect(() => {
         if (validateImmediately) {
@@ -88,6 +101,28 @@ const DatePicker = memo(
         onChangeValue == null ? void 0 : onChangeValue({ value: sendDate, name });
         onBlur == null ? void 0 : onBlur(sendDate);
       };
+      const handleInputChange = (e) => {
+        if (editable) {
+          const newValue = e.target.value.replace(/[^\d]/g, "");
+          const [day, month, year] = [
+            formatDatePart(newValue.substring(0, 2), MAX_DAY),
+            formatDatePart(newValue.substring(2, 4), MAX_MONTH),
+            newValue.substring(4, 6)
+          ];
+          const formattedValue = [day, month, year].filter(Boolean).join("/");
+          setInputValue(formattedValue);
+          if (formattedValue.length === DATE_LENGTH) {
+            const fullYear = getFullYear(year);
+            const newDate = /* @__PURE__ */ new Date(
+              `${fullYear}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
+            );
+            if (!isNaN(newDate.getTime())) {
+              setDate(newDate);
+              onChangeValue == null ? void 0 : onChangeValue({ value: newDate, name });
+            }
+          }
+        }
+      };
       const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
       const InputClassNames = classNames(cls.input, cls.inputBorderControl);
       return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
@@ -95,7 +130,9 @@ const DatePicker = memo(
           "div",
           {
             "data-error": isError,
-            className: cls["date-wrapper"],
+            className: classNames(cls["date-wrapper"], {
+              [cls.editable]: editable
+            }),
             onClick: onOpen,
             children: /* @__PURE__ */ jsx(
               Input,
@@ -106,7 +143,8 @@ const DatePicker = memo(
                 size,
                 type: "text",
                 variant: isError ? EInputVariant.Error : variant,
-                value: date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime()) ? formating.Date(date, "dd/mm/yy") : "",
+                value: inputValue,
+                onChange: handleInputChange,
                 rightAddon: {
                   addonType: "icon",
                   addonContent: isActive ? "DropdownArrowUp24px" : "DropdownArrowDown24px"

package/dist/components/DatePicker/DatePickerModal.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { week } from "./constants.js";
-import { c as cls } from "../../styles.module-Ugsf0AOb.js";
+import { c as cls } from "../../styles.module-7wzJYhR3.js";
 import { Icon } from "../../icons/Icon.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";

package/dist/components/DatePicker/MonthPickerModal.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { months } from "./constants.js";
-import { c as cls } from "../../styles.module-Ugsf0AOb.js";
+import { c as cls } from "../../styles.module-7wzJYhR3.js";
 import { Icon } from "../../icons/Icon.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";

package/dist/components/DatePicker/YearPickerModal.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { c as cls } from "../../styles.module-Ugsf0AOb.js";
+import { c as cls } from "../../styles.module-7wzJYhR3.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
 function YearPickerModal({

package/dist/components/DatePicker/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const formatDatePart: (value: string, max: number) => string;
+export declare const getFullYear: (year: string) => number;

package/dist/components/DatePicker/utils.js

@@ -0,0 +1,16 @@
+const YEAR_OFFSET = 20;
+const CENTURY = 100;
+const formatDatePart = (value, max) => {
+  const num = parseInt(value);
+  return num > max ? max.toString() : value;
+};
+const getFullYear = (year) => {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const currentCentury = Math.floor(currentYear / CENTURY) * CENTURY;
+  const fullYear = parseInt(year) + currentCentury;
+  return fullYear > currentYear + YEAR_OFFSET ? fullYear - CENTURY : fullYear;
+};
+export {
+  formatDatePart,
+  getFullYear
+};

package/dist/components/Drawer/Drawer.d.ts

@@ -5,7 +5,7 @@ type TProps = {
     /**
      * Обязательный заголовок.
      */
-    title: string;
+    title: string | ReactNode;
     /**
      * Флаг отвечачающий за показ/скрытие.
      */

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { ENotificationBadgeSize } from "./constants.js";
-import '../../assets/NotificationBadge.css';const m = "_m_1rrs6_18";
-const s = "_s_1rrs6_24";
+import '../../assets/NotificationBadge.css';const m = "_m_2ldj3_18";
+const s = "_s_2ldj3_24";
 const cls = {
-  "notification-badge": "_notification-badge_1rrs6_2",
-  "notification-badge-absolute": "_notification-badge-absolute_1rrs6_14",
+  "notification-badge": "_notification-badge_2ldj3_2",
+  "notification-badge-absolute": "_notification-badge-absolute_2ldj3_14",
   m,
   s
 };

package/dist/components/index.d.ts

@@ -54,3 +54,5 @@ export { ELabelPositions } from './Switcher';
 export type { TSwitcherProps } from './Switcher';
 export { TwinSwitcher } from './TwinSwitcher';
 export { ESkeletonVariant, SkeletonBrick, SkeletonCircle, SkeletonText } from './Skeleton';
+export { Avatar, EAvatarSize } from './Avatar';
+export type { TAvatarProps, TAvatarSize } from './Avatar';

package/dist/components/index.js

@@ -56,15 +56,19 @@ import { SkeletonBrick } from "./Skeleton/SkeletonBrick/SkeletonBrick.js";
 import { SkeletonText } from "./Skeleton/SkeletonText/SkeletonText.js";
 import { SkeletonCircle } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
 import { ESkeletonVariant } from "./Skeleton/constants.js";
+import { Avatar } from "./Avatar/Avatar.js";
+import { EAvatarSize } from "./Avatar/constants.js";
 export {
   Accordion,
   AccordionItem,
+  Avatar,
   Button,
   CheckboxMimir,
   Chip,
   DatePicker,
   Drawer,
   EAccordionSize,
+  EAvatarSize,
   EButtonForm,
   EButtonSize,
   EButtonVariantBorderless,

package/dist/icons/Icon.js

@@ -6,7 +6,7 @@ const Icon = ({ iconName, ...props }) => {
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...props, "data-testid": iconName }) });
 };
 export {
   Icon

package/dist/index.js

@@ -56,6 +56,8 @@ import { SkeletonBrick } from "./components/Skeleton/SkeletonBrick/SkeletonBrick
 import { SkeletonText } from "./components/Skeleton/SkeletonText/SkeletonText.js";
 import { SkeletonCircle } from "./components/Skeleton/SkeletonCircle/SkeletonCircle.js";
 import { ESkeletonVariant } from "./components/Skeleton/constants.js";
+import { Avatar } from "./components/Avatar/Avatar.js";
+import { EAvatarSize } from "./components/Avatar/constants.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
@@ -70,12 +72,14 @@ import { parseDate } from "./utils/formating/Date.js";
 import './assets/index.css';export {
   Accordion,
   AccordionItem,
+  Avatar,
   Button,
   CheckboxMimir,
   Chip,
   DatePicker,
   Drawer,
   EAccordionSize,
+  EAvatarSize,
   EButtonForm,
   EButtonSize,
   EButtonVariantBorderless,

package/dist/styles.module-7wzJYhR3.js

@@ -0,0 +1,40 @@
+import './assets/styles.css';const input = "_input_1i5h3_2";
+const inputBorderControl = "_inputBorderControl_1i5h3_14";
+const editable = "_editable_1i5h3_27";
+const wrapper = "_wrapper_1i5h3_50";
+const active = "_active_1i5h3_56";
+const button = "_button_1i5h3_44";
+const h = "_h_1i5h3_107";
+const b = "_b_1i5h3_44";
+const d = "_d_1i5h3_10";
+const m = "_m_1i5h3_128";
+const a = "_a_1i5h3_56";
+const prev = "_prev_1i5h3_130";
+const orange = "_orange_1i5h3_146";
+const current = "_current_1i5h3_171";
+const monthGrid = "_monthGrid_1i5h3_176";
+const cls = {
+  input,
+  "input-wrapper": "_input-wrapper_1i5h3_6",
+  "date-wrapper": "_date-wrapper_1i5h3_10",
+  inputBorderControl,
+  editable,
+  "button-wrapper": "_button-wrapper_1i5h3_44",
+  wrapper,
+  active,
+  button,
+  "field-overlow": "_field-overlow_1i5h3_78",
+  "calendar-block": "_calendar-block_1i5h3_84",
+  h,
+  b,
+  d,
+  m,
+  a,
+  prev,
+  orange,
+  current,
+  monthGrid
+};
+export {
+  cls as c
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.32.3",
+  "version": "1.33.1",
   "type": "module",
   "exports": {
     ".": {
@@ -37,6 +37,10 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "ts:check": "tsc -b",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "lint:prettier": "npx prettier . --write",
     "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
@@ -62,6 +66,8 @@
     "@svgr/cli": "^8.1.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -81,6 +87,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "10.3.10",
     "husky": "^9.0.11",
+    "jsdom": "^25.0.0",
     "lint-staged": "^15.2.7",
     "p-limit": "^6.1.0",
     "postcss-preset-env": "^9.6.0",
@@ -101,7 +108,8 @@
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "@headlessui/react": "^2.1.2",

package/dist/components/Button/types.js

@@ -1 +0,0 @@
-

package/dist/components/GosZnak/types.js

@@ -1 +0,0 @@
-

package/dist/components/Input/types.js

@@ -1 +0,0 @@
-

package/dist/components/InputRangeSlider/types.js

@@ -1 +0,0 @@
-

package/dist/components/NotificationBadge/types.js

@@ -1 +0,0 @@
-

package/dist/components/Pagination/types.js

@@ -1 +0,0 @@
-

package/dist/components/SelectSearch/types.js

@@ -1 +0,0 @@
-

package/dist/components/Steps/types.js

@@ -1 +0,0 @@
-

package/dist/components/Switcher/types.js

@@ -1 +0,0 @@
-

package/dist/components/Tag/types.js

@@ -1 +0,0 @@
-

package/dist/components/TextArea/types.js

@@ -1 +0,0 @@
-

package/dist/components/Toasts/types.js

@@ -1 +0,0 @@
-

package/dist/components/UniversalUploader/types.js

@@ -1 +0,0 @@
-

package/dist/components/Vote/types.js

@@ -1 +0,0 @@
-

package/dist/icons/components/types.js

@@ -1 +0,0 @@
-

package/dist/styles.module-Ugsf0AOb.js

@@ -1,38 +0,0 @@
-import './assets/styles.css';const input = "_input_fbbrm_2";
-const inputBorderControl = "_inputBorderControl_fbbrm_14";
-const wrapper = "_wrapper_fbbrm_44";
-const active = "_active_fbbrm_50";
-const button = "_button_fbbrm_38";
-const h = "_h_fbbrm_101";
-const b = "_b_fbbrm_38";
-const d = "_d_fbbrm_10";
-const m = "_m_fbbrm_122";
-const a = "_a_fbbrm_50";
-const prev = "_prev_fbbrm_124";
-const orange = "_orange_fbbrm_140";
-const current = "_current_fbbrm_165";
-const monthGrid = "_monthGrid_fbbrm_170";
-const cls = {
-  input,
-  "input-wrapper": "_input-wrapper_fbbrm_6",
-  "date-wrapper": "_date-wrapper_fbbrm_10",
-  inputBorderControl,
-  "button-wrapper": "_button-wrapper_fbbrm_38",
-  wrapper,
-  active,
-  button,
-  "field-overlow": "_field-overlow_fbbrm_72",
-  "calendar-block": "_calendar-block_fbbrm_78",
-  h,
-  b,
-  d,
-  m,
-  a,
-  prev,
-  orange,
-  current,
-  monthGrid
-};
-export {
-  cls as c
-};