mimir-ui-kit 1.3.0 → 1.3.2

package/dist/components/Input/Input.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useEffect } from "react";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { EInputVariant } from "./constants.js";
+import '../../assets/Input.css';const label = "_label_1wv6m_5";
+const input = "_input_1wv6m_2";
+const s = "_s_1wv6m_61";
+const m = "_m_1wv6m_73";
+const l = "_l_1wv6m_5";
+const success = "_success_1wv6m_124";
+const alarm = "_alarm_1wv6m_142";
+const error = "_error_1wv6m_160";
+const disabled = "_disabled_1wv6m_178";
+const cls = {
+  "input-wrapper": "_input-wrapper_1wv6m_2",
+  label,
+  "active-label": "_active-label_1wv6m_18",
+  input,
+  s,
+  m,
+  l,
+  "default-gray": "_default-gray_1wv6m_97",
+  "default-white": "_default-white_1wv6m_109",
+  success,
+  alarm,
+  error,
+  disabled,
+  "has-label": "_has-label_1wv6m_196"
+};
+const Input = memo(
+  forwardRef(
+    (props, ref) => {
+      const {
+        value,
+        className,
+        wrapperClassName,
+        variant = EInputVariant.DefaultGray,
+        type = "text",
+        autofocus,
+        readonly,
+        id,
+        onFocus,
+        onBlur,
+        label: label2,
+        disabled: disabled2,
+        size = "m",
+        ...otherProps
+      } = props;
+      const [isFocused, setIsFocused] = useState(autofocus);
+      useEffect(() => {
+        if (autofocus) {
+          setIsFocused(true);
+        }
+      }, [autofocus]);
+      const handleBlur = (event) => {
+        const currentValue = event.currentTarget.value;
+        onBlur == null ? void 0 : onBlur(event);
+        if (currentValue) {
+          return;
+        }
+        setIsFocused(false);
+      };
+      const handleFocus = (event) => {
+        if (readonly) {
+          return;
+        }
+        setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
+      };
+      const mods = {
+        [cls.readonly]: disabled2 || readonly,
+        [cls.focused]: isFocused,
+        [cls.disabled]: disabled2 || readonly,
+        [cls["has-label"]]: !!label2
+      };
+      const labelClassNames = classNames(
+        cls.label,
+        {
+          [cls["active-label"]]: isFocused || value
+        },
+        className,
+        cls[size]
+      );
+      const inputClassNames = classNames(cls.input, mods, className, [
+        cls[variant],
+        cls[size]
+      ]);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(
+            cls["input-wrapper"],
+            cls[variant],
+            wrapperClassName
+          ),
+          children: [
+            label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type,
+                id,
+                className: inputClassNames,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                readOnly: readonly,
+                value,
+                ...otherProps
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+Input.displayName = "Input";
+export {
+  Input
+};

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

@@ -0,0 +1,12 @@
+export declare enum EInputVariant {
+    Alarm = "alarm",
+    Success = "success",
+    Error = "error",
+    DefaultGray = "default-gray",
+    DefaultWhite = "default-white"
+}
+export declare enum EInputSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}

package/dist/components/Input/constants.js

@@ -0,0 +1,18 @@
+var EInputVariant = /* @__PURE__ */ ((EInputVariant2) => {
+  EInputVariant2["Alarm"] = "alarm";
+  EInputVariant2["Success"] = "success";
+  EInputVariant2["Error"] = "error";
+  EInputVariant2["DefaultGray"] = "default-gray";
+  EInputVariant2["DefaultWhite"] = "default-white";
+  return EInputVariant2;
+})(EInputVariant || {});
+var EInputSize = /* @__PURE__ */ ((EInputSize2) => {
+  EInputSize2["S"] = "s";
+  EInputSize2["M"] = "m";
+  EInputSize2["L"] = "l";
+  return EInputSize2;
+})(EInputSize || {});
+export {
+  EInputSize,
+  EInputVariant
+};

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

@@ -0,0 +1,3 @@
+export { Input, type TProps as TInputProps } from './Input';
+export type { TSize, TVariant } from './types';
+export { EInputSize, EInputVariant } from './constants';

package/dist/components/Input/index.js

@@ -0,0 +1,7 @@
+import { Input } from "./Input.js";
+import { EInputSize, EInputVariant } from "./constants.js";
+export {
+  EInputSize,
+  EInputVariant,
+  Input
+};

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

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+import { EInputSize, EInputVariant } from './constants';
+
+export type TSize = `${EInputSize}` | EInputSize;
+export type TVariant = `${EInputVariant}` | EInputVariant;
+export type TCommonCompoundInputProps = {
+    size?: TSize;
+    variant?: TVariant;
+    className?: string;
+};
+export type TInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size' | 'placeholder'>;

package/dist/components/Input/types.js

@@ -0,0 +1 @@
+

package/dist/components/InputPassword/InputPassword.d.ts

@@ -0,0 +1,12 @@
+import { TInputProps } from '../Input';
+
+export type TProps = TInputProps;
+export declare const InputPassword: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & {
+    size?: import('../Input').TSize;
+    variant?: import('../Input').TVariant;
+    className?: string;
+    wrapperClassName?: string;
+    label?: import('react').ReactNode;
+    autofocus?: boolean;
+    readonly?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/InputPassword/InputPassword.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState } from "react";
+import { Input } from "../Input/Input.js";
+import { Button } from "../Button/Button.js";
+import { Icon } from "../../icons/Icon.js";
+import '../../assets/InputPassword.css';const input = "_input_mam1g_2";
+const wrapper = "_wrapper_mam1g_6";
+const button = "_button_mam1g_17";
+const cls = {
+  input,
+  wrapper,
+  "input-wrapper": "_input-wrapper_mam1g_13",
+  "button-wrapper": "_button-wrapper_mam1g_17",
+  button
+};
+const InputPassword = memo(
+  forwardRef(
+    ({ size, ...props }, ref) => {
+      const [showPassword, setShowPassword] = useState(false);
+      const handleClick = () => setShowPassword(!showPassword);
+      return /* @__PURE__ */ jsxs("div", { className: cls.wrapper, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            className: cls.input,
+            wrapperClassName: cls["input-wrapper"],
+            size,
+            type: showPassword ? "text" : "password",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            clear: true,
+            type: "button",
+            className: cls.button,
+            onClick: handleClick,
+            children: /* @__PURE__ */ jsx(Icon, { iconName: "Eye24px" })
+          }
+        ) })
+      ] });
+    }
+  )
+);
+InputPassword.displayName = "InputPassword";
+export {
+  InputPassword
+};

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

@@ -0,0 +1,2 @@
+export { InputPassword } from './InputPassword';
+export type { TProps as TInputPasswordProps } from './InputPassword';

package/dist/components/InputPassword/index.js

@@ -0,0 +1,4 @@
+import { InputPassword } from "./InputPassword.js";
+export {
+  InputPassword
+};

package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts

@@ -0,0 +1,12 @@
+export type ImperativeHandle = Partial<HTMLInputElement> & {
+    getPhoneNumber: () => string;
+};
+export declare const InputPhoneNumber: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & {
+    size?: import('../Input').TSize;
+    variant?: import('../Input').TVariant;
+    className?: string;
+    wrapperClassName?: string;
+    label?: import('react').ReactNode;
+    autofocus?: boolean;
+    readonly?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/InputPhoneNumber/InputPhoneNumber.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
+import { Input } from "../Input/Input.js";
+import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
+const InputPhoneNumber = memo(
+  forwardRef(
+    ({ value = "", onChange, ...props }, ref) => {
+      const [phone, setPhone] = useState(
+        () => getMaskedInputPhoneValue(value)
+      );
+      const handleChange = useCallback(
+        (event) => {
+          const maskedValue = getMaskedInputPhoneValue(event.target.value);
+          setPhone(maskedValue);
+          onChange == null ? void 0 : onChange({
+            ...event,
+            target: {
+              ...event.target,
+              value: getUnmaskedInputValue(maskedValue)
+            }
+          });
+        },
+        [onChange]
+      );
+      useImperativeHandle(
+        ref,
+        () => ({
+          getPhoneNumber: () => getUnmaskedInputValue(phone)
+        })
+      );
+      return /* @__PURE__ */ jsx(Input, { ref, value: phone, onChange: handleChange, ...props });
+    }
+  )
+);
+InputPhoneNumber.displayName = "InputPhoneNumber";
+export {
+  InputPhoneNumber
+};

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

@@ -0,0 +1,2 @@
+export { InputPhoneNumber } from './InputPhoneNumber';
+export { getMaskedInputPhoneValue, getUnmaskedInputValue } from './utils';

package/dist/components/InputPhoneNumber/index.js

@@ -0,0 +1,7 @@
+import { InputPhoneNumber } from "./InputPhoneNumber.js";
+import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
+export {
+  InputPhoneNumber,
+  getMaskedInputPhoneValue,
+  getUnmaskedInputValue
+};

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

@@ -0,0 +1,2 @@
+export declare const getMaskedInputPhoneValue: (value: string) => string;
+export declare const getUnmaskedInputValue: (value: string) => string;

package/dist/components/InputPhoneNumber/utils.js

@@ -0,0 +1,26 @@
+const getMaskedInputPhoneValue = (value) => {
+  const rawValue = value.replace(/\D/g, "");
+  let formattedValue = "+7 ";
+  if (rawValue.startsWith("7")) {
+    formattedValue += "(" + rawValue.substring(1, 4);
+  } else {
+    formattedValue += rawValue.substring(0, 3);
+  }
+  if (rawValue.length > 4) {
+    formattedValue += ") " + rawValue.substring(4, 7);
+  }
+  if (rawValue.length > 7) {
+    formattedValue += "-" + rawValue.substring(7, 9);
+  }
+  if (rawValue.length > 9) {
+    formattedValue += "-" + rawValue.substring(9, 11);
+  }
+  return formattedValue;
+};
+const getUnmaskedInputValue = (value) => {
+  return value.replace(/\D/g, "");
+};
+export {
+  getMaskedInputPhoneValue,
+  getUnmaskedInputValue
+};

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1 @@
+export declare const Loader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import '../../assets/Loader.css';const loader = "_loader_eco13_2";
+const circle = "_circle_eco13_11";
+const animate = "_animate_eco13_1";
+const cls = {
+  loader,
+  circle,
+  animate
+};
+const Loader = () => {
+  return /* @__PURE__ */ jsxs("div", { className: cls.loader, children: [
+    /* @__PURE__ */ jsx("span", { className: cls.circle }),
+    /* @__PURE__ */ jsx("span", { className: cls.circle })
+  ] });
+};
+export {
+  Loader
+};

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

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

package/dist/components/Loader/index.js

@@ -0,0 +1,4 @@
+import { Loader } from "./Loader.js";
+export {
+  Loader
+};

package/dist/components/MergedButton/MergedButton.d.ts

@@ -0,0 +1,17 @@
+import { TButtonProps } from '../Button';
+import { EMergedButtonVariantRound } from './constants';
+
+export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form'> & {
+    variant?: `${EMergedButtonVariantRound}` | EMergedButtonVariantRound;
+};
+type TProps = {
+    /**
+     * Массив кнопок,  который отрисуется в контейнере
+     * */
+    buttons: TButtonPropsWithoutStyles[];
+};
+/**
+ * Компонент объединенных кнопок, с округлением у первой и последней кнопки, а так же с другими variant, нежели у обычного Button.
+ */
+export declare const MergedButton: import('react').MemoExoticComponent<({ buttons }: TProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/MergedButton/MergedButton.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { Button } from "../Button/Button.js";
+import { EMergedButtonVariantRound } from "./constants.js";
+import '../../assets/MergedButton.css';const buttons = "_buttons_h653f_2";
+const button = "_button_h653f_2";
+const gray = "_gray_h653f_27";
+const white = "_white_h653f_35";
+const transparent = "_transparent_h653f_42";
+const cls = {
+  buttons,
+  button,
+  gray,
+  white,
+  transparent,
+  "is-icon": "_is-icon_h653f_51"
+};
+const MergedButton = memo(({ buttons: buttons2 }) => {
+  return /* @__PURE__ */ jsx("div", { className: cls.buttons, children: buttons2.map(
+    ({ variant = EMergedButtonVariantRound.White, disabled, ...button2 }, index) => {
+      const buttonProps = {
+        ...button2,
+        isIconButton: button2.isIconButton ?? false,
+        iconName: button2.isIconButton ? button2.iconName : void 0,
+        leftIcon: button2.isIconButton ? void 0 : button2.leftIcon,
+        rightIcon: button2.isIconButton ? void 0 : button2.rightIcon
+      };
+      const className = classNames(
+        cls.button,
+        cls.clear,
+        {
+          [cls[variant]]: !disabled,
+          [cls.disabled]: disabled,
+          [cls["is-icon"]]: button2.isIconButton
+        },
+        button2.className
+      );
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          clear: true,
+          disabled,
+          className,
+          ...buttonProps
+        },
+        index
+      );
+    }
+  ) });
+});
+MergedButton.displayName = "MergedButton";
+export {
+  MergedButton
+};

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

@@ -0,0 +1,5 @@
+export declare enum EMergedButtonVariantRound {
+    Transparent = "transparent",
+    Gray = "gray",
+    White = "white"
+}

package/dist/components/MergedButton/constants.js

@@ -0,0 +1,9 @@
+var EMergedButtonVariantRound = /* @__PURE__ */ ((EMergedButtonVariantRound2) => {
+  EMergedButtonVariantRound2["Transparent"] = "transparent";
+  EMergedButtonVariantRound2["Gray"] = "gray";
+  EMergedButtonVariantRound2["White"] = "white";
+  return EMergedButtonVariantRound2;
+})(EMergedButtonVariantRound || {});
+export {
+  EMergedButtonVariantRound
+};

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

@@ -0,0 +1,2 @@
+export { MergedButton, type TButtonPropsWithoutStyles } from './MergedButton';
+export { EMergedButtonVariantRound } from './constants';

package/dist/components/MergedButton/index.js

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

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,23 @@
+import { TInputProps } from '../Input';
+
+/**
+ * Компонент ввода одноразового пароля (OTP).
+ *
+ * Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
+ * Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
+ */
+export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "onChange" | "label"> & {
+    value?: string;
+    /**
+     * Количество полей ввода.
+     */
+    valueLength?: number;
+    /**
+     * Функция, для изменения значения поля ввода.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Флаг, показывающий нужно ли отображать разделитель между вводами.
+     */
+    needSeparator?: boolean;
+} & import('react').RefAttributes<unknown>>;

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, Fragment } from "react";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { Input } from "../Input/Input.js";
+import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
+import { useOTPInput } from "./hooks.js";
+import '../../assets/OtpInput.css';const otp = "_otp_xwv60_3";
+const input = "_input_xwv60_15";
+const separator = "_separator_xwv60_29";
+const cls = {
+  otp,
+  "input-wrapper": "_input-wrapper_xwv60_15",
+  input,
+  separator
+};
+const OtpInput = forwardRef(
+  ({
+    value = "",
+    valueLength = DEFAULT_VALUE_LENGTH,
+    needSeparator = true,
+    onChange,
+    className,
+    ...props
+  }, ref) => {
+    const {
+      data: { inputRefs, valueItems },
+      handlers: { handleChange, handleFocus, handleKeyDown, handlePaste }
+    } = useOTPInput({
+      onChange,
+      value,
+      valueLength
+    });
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        var _a;
+        (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
+      }
+    }));
+    return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp, className), children: valueItems.map((digit, idx) => {
+      const nextIndex = idx + 1;
+      const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: (el) => inputRefs.current[idx] = el,
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            pattern: "\\d{1}",
+            maxLength: 1,
+            value: digit,
+            className: cls.input,
+            wrapperClassName: cls["input-wrapper"],
+            onChange: (e) => handleChange(e, idx),
+            onKeyDown: (e) => handleKeyDown(e, idx),
+            onFocus: (e) => handleFocus(e, idx),
+            onPaste: handlePaste,
+            ...props
+          }
+        ),
+        showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
+      ] }, idx);
+    }) });
+  }
+);
+OtpInput.displayName = "OtpInput";
+export {
+  OtpInput
+};

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

@@ -0,0 +1,3 @@
+export declare const RE_DIGIT: RegExp;
+export declare const DEFAULT_VALUE_LENGTH = 6;
+export declare const ITEMS_PER_SEPARATOR = 3;

package/dist/components/OtpInput/constants.js

@@ -0,0 +1,8 @@
+const RE_DIGIT = new RegExp(/^\d+$/);
+const DEFAULT_VALUE_LENGTH = 6;
+const ITEMS_PER_SEPARATOR = 3;
+export {
+  DEFAULT_VALUE_LENGTH,
+  ITEMS_PER_SEPARATOR,
+  RE_DIGIT
+};

package/dist/components/OtpInput/hooks.d.ts

@@ -0,0 +1,20 @@
+import { ChangeEvent, KeyboardEvent, ClipboardEvent, FocusEvent } from 'react';
+
+type TUseOTPInput = {
+    value?: string;
+    valueLength?: number;
+    onChange?: (value: string) => void;
+};
+export declare const useOTPInput: ({ value, valueLength, onChange }: TUseOTPInput) => {
+    handlers: {
+        handleChange: (e: ChangeEvent<HTMLInputElement>, index: number) => void;
+        handleFocus: (e: FocusEvent<HTMLInputElement>, index: number) => void;
+        handleKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
+        handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    };
+    data: {
+        valueItems: string[];
+        inputRefs: import('react').MutableRefObject<(HTMLInputElement | null)[]>;
+    };
+};
+export {};