mimir-ui-kit 1.13.6 → 1.14.0

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

@@ -1,2 +1,2 @@
 export { RadioGroup } from './RadioGroup';
-export type { TRadioOption, TRadioGroupProps } from './RadioGroup';
+export type { TRadioOption } from './RadioGroup';

package/dist/components/Slider/NavigationButtons/NavigationButtons.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { N } from "../../../NavigationButtons-DuOoqaPo.js";
+import { N } from "../../../NavigationButtons-B8tMfqrg.js";
 import "../../MergedButton/MergedButton.js";
 export {
   N as NavigationButtons

package/dist/components/Slider/NavigationButtons/index.js

@@ -1,4 +1,4 @@
-import { N } from "../../../NavigationButtons-DuOoqaPo.js";
+import { N } from "../../../NavigationButtons-B8tMfqrg.js";
 export {
   N as NavigationButtons
 };

package/dist/components/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as classNames } from "../../index-CweZ_OcN.js";
 import { useRef, useState, useCallback } from "react";
-import { g as getDocument, S as Swiper, N as NavigationButtons, a as SwiperSlide } from "../../NavigationButtons-DuOoqaPo.js";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { g as getDocument, S as Swiper, N as NavigationButtons, a as SwiperSlide } from "../../NavigationButtons-B8tMfqrg.js";
 import { ProgressBar } from "./ProgressBar/ProgressBar.js";
 import { AppImage } from "../Image/Image.js";
 import '../../assets/Slider.css';function Autoplay(_ref) {
@@ -300,14 +300,14 @@ import '../../assets/Slider.css';function Autoplay(_ref) {
     resume
   });
 }
-const swiper = "_swiper_n7qq2_3";
-const slide = "_slide_n7qq2_9";
-const link = "_link_n7qq2_16";
-const image = "_image_n7qq2_22";
-const navigation = "_navigation_n7qq2_29";
-const pagination = "_pagination_n7qq2_39";
-const slides = "_slides_n7qq2_54";
-const separator = "_separator_n7qq2_60";
+const swiper = "_swiper_1jb8j_3";
+const slide = "_slide_1jb8j_9";
+const link = "_link_1jb8j_16";
+const image = "_image_1jb8j_22";
+const navigation = "_navigation_1jb8j_29";
+const pagination = "_pagination_1jb8j_39";
+const slides = "_slides_1jb8j_54";
+const separator = "_separator_1jb8j_60";
 const cls = {
   swiper,
   slide,

package/dist/components/Tag/Tag.d.ts

@@ -1,41 +1,79 @@
-import { ReactNode } from 'react';
+import { EStepsPrimaryColor, EStepsSecondaryColor } from './constants';
+import { TCommonStepsProps } from './types';
 
-export type TProps = {
+export type TProps = TCommonStepsProps & {
     /**
      * Класс, применяемый к корневому элементу
      */
     rootClassName?: string;
     /**
-     * Класс, применяемый к контентному элементу
+     * Класс, применяемый к шагам
      */
-    innerClassName?: string;
+    stepClassName?: string;
     /**
-     * Класс, применяемый к контентному элементу
+     * Количество шагов.
      */
-    size?: string;
+    quantity: number;
     /**
-     * Класс, применяемый к корневому элемент
+     * Текущий шаг
      */
-    children?: ReactNode;
+    current?: number;
     /**
-     * Класс, применяемый к корневому элемент
+     * Есть ли возможность переключать шаги по клику
      */
-    disabled?: boolean;
+    editable?: boolean;
     /**
-     * Определяет какой тип элемента будет создан, по умолчанию - button
+     * Обработчик клика на шаг
      */
-    elementType?: 'button' | 'div';
+    onClick?: (step: number) => void;
     /**
-     * Цвет фона, при outline и текста
+     * Отключено / включено взаимодействие с шагами
      */
-    backgroundColor?: string;
+    disabled?: boolean;
     /**
-     * Цвет текста (если не outline)
+     * Цвет пройденных шагов
      */
-    color?: string;
+    primaryColor?: EStepsPrimaryColor;
     /**
-     * Определяет должен быть тег в стилистике outline или нет
+     * Цвет оставшихся шагов
      */
-    outline?: boolean;
+    secondaryColor?: EStepsSecondaryColor;
 };
-export declare const Tag: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к шагам
+     */
+    stepClassName?: string;
+    /**
+     * Количество шагов.
+     */
+    quantity: number;
+    /**
+     * Текущий шаг
+     */
+    current?: number;
+    /**
+     * Есть ли возможность переключать шаги по клику
+     */
+    editable?: boolean;
+    /**
+     * Обработчик клика на шаг
+     */
+    onClick?: (step: number) => void;
+    /**
+     * Отключено / включено взаимодействие с шагами
+     */
+    disabled?: boolean;
+    /**
+     * Цвет пройденных шагов
+     */
+    primaryColor?: EStepsPrimaryColor;
+    /**
+     * Цвет оставшихся шагов
+     */
+    secondaryColor?: EStepsSecondaryColor;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tag/Tag.js

@@ -1,54 +1,99 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { forwardRef } from "react";
-import { ETagSize, ETagType } from "./constants.js";
-import '../../assets/Tag.css';const container = "_container_1f2sk_2";
-const disabled = "_disabled_1f2sk_24";
-const inner = "_inner_1f2sk_29";
-const M = "_M_1f2sk_37";
-const S = "_S_1f2sk_41";
-const XS = "_XS_1f2sk_49";
+import { forwardRef, useId, useState, useRef, useEffect } from "react";
+import { ZERO_STEP, EStepsSize, EStepsPrimaryColor, ID_SEPARATOR, EStepsColorType, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
+import { Icon } from "../../icons/Icon.js";
+import '../../assets/Steps.css';const container = "_container_j31xr_2";
+const step = "_step_j31xr_6";
+const editable = "_editable_j31xr_9";
+const PRIMARY = "_PRIMARY_j31xr_12";
+const GRAY = "_GRAY_j31xr_12";
+const CITRINE = "_CITRINE_j31xr_15";
+const SAPPHIRE = "_SAPPHIRE_j31xr_18";
+const SECONDARY = "_SECONDARY_j31xr_21";
+const WHITE = "_WHITE_j31xr_21";
+const LIGHT_SAPPHIRE = "_LIGHT_SAPPHIRE_j31xr_24";
+const LIGHT_GRAY = "_LIGHT_GRAY_j31xr_27";
+const disabled = "_disabled_j31xr_27";
 const cls = {
   container,
-  disabled,
-  inner,
-  M,
-  S,
-  XS
+  step,
+  editable,
+  PRIMARY,
+  GRAY,
+  CITRINE,
+  SAPPHIRE,
+  SECONDARY,
+  WHITE,
+  LIGHT_SAPPHIRE,
+  LIGHT_GRAY,
+  disabled
 };
-const Tag = forwardRef(
+const Steps = forwardRef(
   (props, ref) => {
     const {
       rootClassName,
-      innerClassName,
-      children,
-      size = ETagSize.M,
+      stepClassName,
+      quantity,
+      current = ZERO_STEP,
+      editable: editable2 = false,
+      size = EStepsSize.M,
+      onClick,
       disabled: disabled2 = false,
-      elementType = ETagType.BUTTON,
-      backgroundColor = "",
-      color = "",
-      outline = false,
-      ...otherProps
+      primaryColor = EStepsPrimaryColor.CITRINE,
+      secondaryColor = EStepsPrimaryColor.GRAY
     } = props;
-    const Element = elementType === ETagType.BUTTON ? ETagType.BUTTON : ETagType.DIV;
-    return /* @__PURE__ */ jsx(
-      Element,
-      {
-        className: classNames(cls.container, cls[size], rootClassName, {
-          [cls.disabled]: disabled2
-        }),
-        ref,
-        style: {
-          backgroundColor: outline ? "transparent" : backgroundColor,
-          borderColor: backgroundColor,
-          color: outline ? backgroundColor : color
-        },
-        ...otherProps,
-        children: /* @__PURE__ */ jsx("span", { className: classNames(cls.inner, innerClassName), children })
+    const idPrefix = useId();
+    const [step2, setStep] = useState(current);
+    const [hoveredStep, setHoveredStep] = useState(null);
+    const stepWasChangedRef = useRef(null);
+    useEffect(() => {
+      setStep(current);
+    }, [current]);
+    const handleClick = (idx) => {
+      const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
+      stepWasChangedRef.current = true;
+      setStep(clickedStep !== step2 ? clickedStep : ZERO_STEP);
+    };
+    useEffect(() => {
+      if (stepWasChangedRef.current === true) {
+        onClick && onClick(step2);
+        stepWasChangedRef.current = false;
       }
-    );
+    }, [onClick, step2]);
+    const handleMouseEnter = (evt) => {
+      const hoveredIdx = Number(evt.currentTarget.id.split(ID_SEPARATOR)[1]);
+      setHoveredStep(hoveredIdx);
+    };
+    const handleMouseLeave = () => {
+      setHoveredStep(null);
+    };
+    const buttons = Array.from({ length: quantity }, (_, idx) => {
+      const isPrimary = idx + DIFF_BETWEEN_STEP_AND_INDEX <= (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
+      const isSecondary = idx + DIFF_BETWEEN_STEP_AND_INDEX > (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          id: `${idPrefix}${ID_SEPARATOR}${idx}`,
+          className: classNames(cls.step, cls[size], stepClassName, {
+            [cls.editable]: editable2 && !disabled2,
+            [cls.disabled]: disabled2 || !editable2 && idx + 1 > step2,
+            [cls[EStepsColorType.PRIMARY]]: isPrimary,
+            [cls[EStepsColorType.SECONDARY]]: isSecondary,
+            [cls[primaryColor]]: isPrimary,
+            [cls[secondaryColor]]: isSecondary
+          }),
+          onClick: () => handleClick(idx),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx(Icon, { iconName: "Step", ...StepSize[size] })
+        },
+        idx
+      );
+    });
+    return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
   }
 );
 export {
-  Tag
+  Steps
 };

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

@@ -1,9 +1,41 @@
-export declare enum ETagSize {
+export declare const ZERO_STEP = 0;
+export declare const DIFF_BETWEEN_STEP_AND_INDEX = 1;
+export declare const ID_SEPARATOR = "-//-";
+export declare enum EStepsSize {
     XS = "XS",
     S = "S",
-    M = "M"
+    M = "M",
+    L = "L"
 }
-export declare enum ETagType {
-    DIV = "div",
-    BUTTON = "button"
+export declare const StepSize: {
+    XS: {
+        width: number;
+        height: number;
+    };
+    S: {
+        width: number;
+        height: number;
+    };
+    M: {
+        width: number;
+        height: number;
+    };
+    L: {
+        width: number;
+        height: number;
+    };
+};
+export declare enum EStepsColorType {
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY"
+}
+export declare enum EStepsPrimaryColor {
+    GRAY = "GRAY",
+    CITRINE = "CITRINE",
+    SAPPHIRE = "SAPPHIRE"
+}
+export declare enum EStepsSecondaryColor {
+    LIGHT_GRAY = "LIGHT_GRAY",
+    LIGHT_SAPPHIRE = "LIGHT_SAPPHIRE",
+    WHITE = "WHITE"
 }

package/dist/components/Tag/constants.js

@@ -1,15 +1,55 @@
-var ETagSize = /* @__PURE__ */ ((ETagSize2) => {
-  ETagSize2["XS"] = "XS";
-  ETagSize2["S"] = "S";
-  ETagSize2["M"] = "M";
-  return ETagSize2;
-})(ETagSize || {});
-var ETagType = /* @__PURE__ */ ((ETagType2) => {
-  ETagType2["DIV"] = "div";
-  ETagType2["BUTTON"] = "button";
-  return ETagType2;
-})(ETagType || {});
+const ZERO_STEP = 0;
+const DIFF_BETWEEN_STEP_AND_INDEX = 1;
+const ID_SEPARATOR = "-//-";
+var EStepsSize = /* @__PURE__ */ ((EStepsSize2) => {
+  EStepsSize2["XS"] = "XS";
+  EStepsSize2["S"] = "S";
+  EStepsSize2["M"] = "M";
+  EStepsSize2["L"] = "L";
+  return EStepsSize2;
+})(EStepsSize || {});
+const StepSize = {
+  XS: {
+    width: 19,
+    height: 8
+  },
+  S: {
+    width: 36,
+    height: 12
+  },
+  M: {
+    width: 48,
+    height: 21
+  },
+  L: {
+    width: 64,
+    height: 28
+  }
+};
+var EStepsColorType = /* @__PURE__ */ ((EStepsColorType2) => {
+  EStepsColorType2["PRIMARY"] = "PRIMARY";
+  EStepsColorType2["SECONDARY"] = "SECONDARY";
+  return EStepsColorType2;
+})(EStepsColorType || {});
+var EStepsPrimaryColor = /* @__PURE__ */ ((EStepsPrimaryColor2) => {
+  EStepsPrimaryColor2["GRAY"] = "GRAY";
+  EStepsPrimaryColor2["CITRINE"] = "CITRINE";
+  EStepsPrimaryColor2["SAPPHIRE"] = "SAPPHIRE";
+  return EStepsPrimaryColor2;
+})(EStepsPrimaryColor || {});
+var EStepsSecondaryColor = /* @__PURE__ */ ((EStepsSecondaryColor2) => {
+  EStepsSecondaryColor2["LIGHT_GRAY"] = "LIGHT_GRAY";
+  EStepsSecondaryColor2["LIGHT_SAPPHIRE"] = "LIGHT_SAPPHIRE";
+  EStepsSecondaryColor2["WHITE"] = "WHITE";
+  return EStepsSecondaryColor2;
+})(EStepsSecondaryColor || {});
 export {
-  ETagSize,
-  ETagType
+  DIFF_BETWEEN_STEP_AND_INDEX,
+  EStepsColorType,
+  EStepsPrimaryColor,
+  EStepsSecondaryColor,
+  EStepsSize,
+  ID_SEPARATOR,
+  StepSize,
+  ZERO_STEP
 };

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

@@ -1,2 +1,3 @@
-export { Tag } from './Tag';
-export { ETagSize, ETagType } from './constants';
+export { Steps } from './Tag';
+export { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from './constants';
+export type { TCommonStepsProps } from './types';

package/dist/components/Tag/index.js

@@ -1,7 +1,8 @@
-import { Tag } from "./Tag.js";
-import { ETagSize, ETagType } from "./constants.js";
+import { Steps } from "./Tag.js";
+import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./constants.js";
 export {
-  ETagSize,
-  ETagType,
-  Tag
+  EStepsPrimaryColor,
+  EStepsSecondaryColor,
+  EStepsSize,
+  Steps
 };

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

@@ -0,0 +1,6 @@
+import { EStepsSize } from './constants';
+
+export type TSize = `${EStepsSize}` | EStepsSize;
+export type TCommonStepsProps = {
+    size?: TSize;
+};

package/dist/components/index.d.ts

@@ -6,26 +6,12 @@ export type { TInputPasswordProps } from './InputPassword';
 export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } from './InputPhoneNumber';
 export { OtpInput } from './OtpInput';
 export { RadioGroup } from './RadioGroup';
-export type { TRadioOption, TRadioGroupProps } from './RadioGroup';
-export { DatePicker } from './DatePicker';
-export type { TDatePickerProps, TDatePickerValue } from './DatePicker';
+export type { TRadioOption } from './RadioGroup';
 export { MergedButton } from './MergedButton';
 export { EMergedButtonVariantRound } from './MergedButton';
 export type { TButtonPropsWithoutStyles } from './MergedButton';
 export { Image } from './Image';
 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 { Vote, EVoteSize, type TCommonVoteProps } from './Vote';
-export { SelectSearch, ESelectSearchSize } from './SelectSearch';
-export type { TSelectSearchItem, TSelectSearchProps } from './SelectSearch';
-export { Switch } from './Switch';
-export type { TSwitchProps } from './Switch';
-export { Tag, ETagSize, ETagType } from './Tag';
-export { Timer } from './Timer';
-export { Accordion, AccordionItem, EAccordionSize } from './Accordion';
-export type { TAccordionProps, TAccordionItemProps } from './Accordion';
-export { TabTrail, ETabTrailSize } from './TabTrail';
-export type { TTabTrailProps, TCategoryTab } from './TabTrail';

package/dist/components/index.js

@@ -7,51 +7,27 @@ import { InputPhoneNumber } from "./InputPhoneNumber/InputPhoneNumber.js";
 import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./InputPhoneNumber/utils.js";
 import { OtpInput } from "./OtpInput/OtpInput.js";
 import { RadioGroup } from "./RadioGroup/RadioGroup.js";
-import { DatePicker } from "./DatePicker/DatePicker.js";
 import { MergedButton } from "./MergedButton/MergedButton.js";
 import { EMergedButtonVariantRound } from "./MergedButton/constants.js";
 import { AppImage } from "./Image/Image.js";
 import { Loader } from "./Loader/Loader.js";
 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 { Vote } from "./Vote/Vote.js";
 import { EVoteSize } from "./Vote/constants.js";
-import { SelectSearch } from "./SelectSearch/SelectSearch.js";
-import { ESelectSearchSize } from "./SelectSearch/constants.js";
-import { Switch } from "./Switch/Switch.js";
-import { Tag } from "./Tag/Tag.js";
-import { ETagSize, ETagType } from "./Tag/constants.js";
-import { Timer } from "./Timer/Timer.js";
-import { Accordion } from "./Accordion/Accordion.js";
-import { EAccordionSize } from "./Accordion/constants.js";
-import { AccordionItem } from "./Accordion/AccordionItem/AccordionItem.js";
-import { TabTrail } from "./TabTrail/TabTrail.js";
-import { ETabTrailSize } from "./TabTrail/constants.js";
 export {
-  Accordion,
-  AccordionItem,
   Button,
-  DatePicker,
-  Drawer,
-  EAccordionSize,
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
   EButtonVariantRound,
-  EDrawerPosition,
   EInputSize,
   EInputVariant,
   EMergedButtonVariantRound,
-  ESelectSearchSize,
   EStepsPrimaryColor,
   EStepsSecondaryColor,
   EStepsSize,
-  ETabTrailSize,
-  ETagSize,
-  ETagType,
   EVoteSize,
   AppImage as Image,
   Input,
@@ -61,13 +37,8 @@ export {
   MergedButton,
   OtpInput,
   RadioGroup,
-  SelectSearch,
   Slider,
   Steps,
-  Switch,
-  TabTrail,
-  Tag,
-  Timer,
   Vote,
   getMaskedInputPhoneValue,
   getUnmaskedInputValue

package/dist/hooks/index.d.ts

@@ -1,4 +1 @@
 export { useMediaQuery, EMediaQuery } from './useMediaQuery';
-export { useLockBodyScroll } from './useLockBodyScroll';
-export { useInterval } from './useInterval';
-export { useTimer } from './useTimer';

package/dist/hooks/index.js

@@ -1,12 +1,6 @@
 import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./useMediaQuery/constants.js";
-import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
-import { useInterval } from "./useInterval/useInterval.js";
-import { useTimer } from "./useTimer/index.js";
 export {
   EMediaQuery,
-  useInterval,
-  useLockBodyScroll,
-  useMediaQuery,
-  useTimer
+  useMediaQuery
 };

package/dist/icons/Icon.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
-import { i as icons } from "../index-Cxiikb7g.js";
+import { i as icons } from "../index-_ACzPKPw.js";
 const Icon = ({ iconName, ...props }) => {
   const Component = icons[iconName];
   if (!Component) {

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

@@ -1,4 +1,3 @@
-export declare const Close12px: import('react').LazyExoticComponent<(props: import('react').SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export declare const Accept16px: import('react').LazyExoticComponent<(props: import('react').SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export declare const Acts16px: import('react').LazyExoticComponent<(props: import('react').SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export declare const Acts16pxF: import('react').LazyExoticComponent<(props: import('react').SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;