mimir-ui-kit 1.3.0 → 1.3.2

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

@@ -0,0 +1,41 @@
+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",
+    L = "L"
+}
+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/Steps/constants.js

@@ -0,0 +1,55 @@
+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 {
+  DIFF_BETWEEN_STEP_AND_INDEX,
+  EStepsColorType,
+  EStepsPrimaryColor,
+  EStepsSecondaryColor,
+  EStepsSize,
+  ID_SEPARATOR,
+  StepSize,
+  ZERO_STEP
+};

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

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

package/dist/components/Steps/index.js

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

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

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

package/dist/components/Steps/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,119 @@
+import { TCommonVoteProps } from './types';
+import { EStepsPrimaryColor, EStepsSecondaryColor } from '../Steps/constants';
+
+export type TProps = TCommonVoteProps & {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к названию опроса
+     */
+    titleClassName?: string;
+    /**
+     * Класс, применяемый к поставленной оценке
+     */
+    scoreClassName?: string;
+    /**
+     * Класс, применяемый к корневому элементу шагов
+     */
+    stepsRootClassName?: string;
+    /**
+     * Класс, применяемый к шагам
+     */
+    stepsStepClassName?: string;
+    /**
+     * Название опроса
+     */
+    title?: string;
+    /**
+     * Флаг для отключения названия опроса
+     */
+    withoutTitle?: boolean;
+    /**
+     * Количество шагов.
+     */
+    quantity: number;
+    /**
+     * Текущий шаг
+     */
+    current?: number;
+    /**
+     * Обработчик установки оценки
+     */
+    onClick?: (step: number) => void;
+    /**
+     * Отключено / включено взаимодействие с шагами
+     */
+    disabled?: boolean;
+    /**
+     * Цвет пройденных шагов
+     */
+    primaryColor?: EStepsPrimaryColor;
+    /**
+     * Цвет оставшихся шагов
+     */
+    secondaryColor?: EStepsSecondaryColor;
+    /**
+     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     */
+    needChangeFirstHalfColor?: boolean;
+};
+export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к названию опроса
+     */
+    titleClassName?: string;
+    /**
+     * Класс, применяемый к поставленной оценке
+     */
+    scoreClassName?: string;
+    /**
+     * Класс, применяемый к корневому элементу шагов
+     */
+    stepsRootClassName?: string;
+    /**
+     * Класс, применяемый к шагам
+     */
+    stepsStepClassName?: string;
+    /**
+     * Название опроса
+     */
+    title?: string;
+    /**
+     * Флаг для отключения названия опроса
+     */
+    withoutTitle?: boolean;
+    /**
+     * Количество шагов.
+     */
+    quantity: number;
+    /**
+     * Текущий шаг
+     */
+    current?: number;
+    /**
+     * Обработчик установки оценки
+     */
+    onClick?: (step: number) => void;
+    /**
+     * Отключено / включено взаимодействие с шагами
+     */
+    disabled?: boolean;
+    /**
+     * Цвет пройденных шагов
+     */
+    primaryColor?: EStepsPrimaryColor;
+    /**
+     * Цвет оставшихся шагов
+     */
+    secondaryColor?: EStepsSecondaryColor;
+    /**
+     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     */
+    needChangeFirstHalfColor?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Vote/Vote.js

@@ -0,0 +1,100 @@
+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 { 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";
+const cls = {
+  container,
+  title,
+  score,
+  zero,
+  LIGHT_GRAY,
+  WHITE,
+  LIGHT_SAPPHIRE,
+  GRAY,
+  CITRINE,
+  SAPPHIRE
+};
+const Vote = forwardRef((props, ref) => {
+  const {
+    rootClassName,
+    titleClassName,
+    scoreClassName,
+    stepsRootClassName,
+    stepsStepClassName,
+    title: title2 = DEFAULT_TITLE,
+    withoutTitle = false,
+    quantity,
+    current = ZERO_STEP,
+    size = EVoteSize.M,
+    onClick,
+    disabled = false,
+    primaryColor = EStepsPrimaryColor.CITRINE,
+    secondaryColor = EStepsSecondaryColor.WHITE,
+    needChangeFirstHalfColor = false
+  } = props;
+  const [score2, setScore] = useState(current);
+  const [color, setColor] = useState(primaryColor);
+  const isZeroStep = score2 === ZERO_STEP;
+  useEffect(() => {
+    setScore(current);
+  }, [current]);
+  const handleStepsClick = (step) => {
+    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
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Vote
+};

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

@@ -0,0 +1,7 @@
+export declare const DEFAULT_TITLE = "\u0412\u0430\u0448\u0430 \u043E\u0446\u0435\u043D\u043A\u0430";
+export declare const SCORE_TO_QUANTITY_THRESHOLD = 0.5;
+export declare const ZERO_VALUE = "-";
+export declare enum EVoteSize {
+    M = "M",
+    L = "L"
+}

package/dist/components/Vote/constants.js

@@ -0,0 +1,15 @@
+import { EStepsSize } from "../Steps/constants.js";
+const DEFAULT_TITLE = "Ваша оценка";
+const SCORE_TO_QUANTITY_THRESHOLD = 0.5;
+const ZERO_VALUE = "-";
+var EVoteSize = ((EVoteSize2) => {
+  EVoteSize2[EVoteSize2["M"] = EStepsSize.M] = "M";
+  EVoteSize2[EVoteSize2["L"] = EStepsSize.L] = "L";
+  return EVoteSize2;
+})(EVoteSize || {});
+export {
+  DEFAULT_TITLE,
+  EVoteSize,
+  SCORE_TO_QUANTITY_THRESHOLD,
+  ZERO_VALUE
+};

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

@@ -0,0 +1,3 @@
+export { Vote } from './Vote';
+export { EVoteSize } from './constants';
+export type { TCommonVoteProps, TSize } from './types';

package/dist/components/Vote/index.js

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

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

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

package/dist/components/Vote/types.js

@@ -0,0 +1 @@
+

package/dist/components/index.d.ts

@@ -0,0 +1,17 @@
+export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, type TButtonProps } from './Button';
+export { Input, EInputSize, EInputVariant } from './Input';
+export type { TInputProps, TSize, TVariant } from './Input';
+export { InputPassword } from './InputPassword';
+export type { TInputPasswordProps } from './InputPassword';
+export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } from './InputPhoneNumber';
+export { OtpInput } from './OtpInput';
+export { RadioGroup } from './RadioGroup';
+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 { Steps, EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize, type TCommonStepsProps } from './Steps';
+export { Vote, EVoteSize, type TCommonVoteProps } from './Vote';

package/dist/components/index.js

@@ -0,0 +1,45 @@
+import { Button } from "./Button/Button.js";
+import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from "./Button/constants.js";
+import { Input } from "./Input/Input.js";
+import { EInputSize, EInputVariant } from "./Input/constants.js";
+import { InputPassword } from "./InputPassword/InputPassword.js";
+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 { 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 { 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";
+export {
+  Button,
+  EButtonForm,
+  EButtonSize,
+  EButtonVariantDefault,
+  EButtonVariantRound,
+  EInputSize,
+  EInputVariant,
+  EMergedButtonVariantRound,
+  EStepsPrimaryColor,
+  EStepsSecondaryColor,
+  EStepsSize,
+  EVoteSize,
+  AppImage as Image,
+  Input,
+  InputPassword,
+  InputPhoneNumber,
+  Loader,
+  MergedButton,
+  OtpInput,
+  RadioGroup,
+  Slider,
+  Steps,
+  Vote,
+  getMaskedInputPhoneValue,
+  getUnmaskedInputValue
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useMediaQuery, EMediaQuery } from './useMediaQuery';

package/dist/hooks/index.js

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

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

@@ -0,0 +1,10 @@
+export declare enum EMediaQuery {
+    XSS = "(max-width: 375px)",
+    XS = "(max-width: 600px)",
+    XS1 = "(max-width: 767px)",
+    S = "(max-width: 768px)",
+    M = "(max-width: 960px)",
+    L = "(max-width: 1280px)",
+    XL = "(max-width: 1440px)",
+    XXL = "(max-width: 1920px)"
+}

package/dist/hooks/useMediaQuery/constants.js

@@ -0,0 +1,14 @@
+var EMediaQuery = /* @__PURE__ */ ((EMediaQuery2) => {
+  EMediaQuery2["XSS"] = "(max-width: 375px)";
+  EMediaQuery2["XS"] = "(max-width: 600px)";
+  EMediaQuery2["XS1"] = "(max-width: 767px)";
+  EMediaQuery2["S"] = "(max-width: 768px)";
+  EMediaQuery2["M"] = "(max-width: 960px)";
+  EMediaQuery2["L"] = "(max-width: 1280px)";
+  EMediaQuery2["XL"] = "(max-width: 1440px)";
+  EMediaQuery2["XXL"] = "(max-width: 1920px)";
+  return EMediaQuery2;
+})(EMediaQuery || {});
+export {
+  EMediaQuery
+};

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

@@ -0,0 +1,2 @@
+export { useMediaQuery } from './useMediaQuery';
+export { EMediaQuery } from './constants';

package/dist/hooks/useMediaQuery/index.js

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

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

@@ -0,0 +1,14 @@
+import { EMediaQuery } from './constants';
+
+/**
+ * @name useMediaQuery
+ * @description - Hook that manages a media query
+ * @category Browser
+ *
+ * @param {string} query The media query string
+ * @returns {boolean} A boolean indicating if the media query matches
+ *
+ * @example
+ * const matches = useMediaQuery('(max-width: 768px)');
+ */
+export declare const useMediaQuery: (query: EMediaQuery | `${EMediaQuery}`) => boolean;

package/dist/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,19 @@
+import { useCallback, useSyncExternalStore } from "react";
+const getServerSnapshot = () => false;
+const useMediaQuery = (query) => {
+  const subscribe = useCallback(
+    (callback) => {
+      const matchMedia = window.matchMedia(query);
+      matchMedia.addEventListener("change", callback);
+      return () => {
+        matchMedia.removeEventListener("change", callback);
+      };
+    },
+    [query]
+  );
+  const getSnapshot = () => window.matchMedia(query).matches;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+export {
+  useMediaQuery
+};

package/dist/icons/Icon.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+import { TIcon } from './components/types';
+
+type TProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
+    iconName: TIcon;
+};
+export declare const Icon: ({ iconName, ...props }: TProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/icons/Icon.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { i as icons } from "../index-_ACzPKPw.js";
+const Icon = ({ iconName, ...props }) => {
+  const Component = icons[iconName];
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+};
+export {
+  Icon
+};

package/dist/icons/components/16px/Accept16px.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+
+declare const Accept16px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Accept16px;

package/dist/icons/components/16px/Accept16px.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const Accept16px = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16px",
+      height: "16px",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: 8, cy: 8, r: 7, fill: "#FF7900" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11.362 6.058l-4.35 4.354L4.85 8.248l.708-.707 1.453 1.456 3.644-3.646.707.707z",
+            fill: "#fff"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Accept16px as default
+};

package/dist/icons/components/16px/Acts16px.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+
+declare const Acts16px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Acts16px;

package/dist/icons/components/16px/Acts16px.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const Acts16px = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16px",
+      height: "16px",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 1a2 2 0 00-2 2v9a2 2 0 002 2h5v-1.5H4a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h6.172a.5.5 0 01.353.146l1.329 1.329a.5.5 0 01.146.353V7h1.5V4.328a2 2 0 00-.586-1.414l-1.328-1.328A2 2 0 0010.172 1H4z",
+            fill: "#000"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4.75 4.5a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM4.75 7.25a.75.75 0 01.75-.75H10A.75.75 0 0110 8H5.5a.75.75 0 01-.75-.75z",
+            fill: "#000"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.405 11.698a2.25 2.25 0 10-.707.707l1.948 1.949.708-.707-1.949-1.95zM10.75 10.5a.75.75 0 111.5 0 .75.75 0 01-1.5 0z",
+            fill: "#000"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Acts16px as default
+};

package/dist/icons/components/16px/Acts16pxF.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+
+declare const Acts16pxF: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Acts16pxF;