mimir-ui-kit 1.3.1 → 1.4.0

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { EDrawerPosition } from "./constants.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { Button } from "../Button/Button.js";
+import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
+import { Portal } from "../Portal/Portal.js";
+import '../../assets/Drawer.css';const drawer = "_drawer_vy4rv_3";
+const content = "_content_vy4rv_17";
+const header = "_header_vy4rv_32";
+const title = "_title_vy4rv_40";
+const space = "_space_vy4rv_54";
+const inner = "_inner_vy4rv_65";
+const button = "_button_vy4rv_68";
+const footer = "_footer_vy4rv_73";
+const left = "_left_vy4rv_86";
+const right = "_right_vy4rv_90";
+const bottom = "_bottom_vy4rv_94";
+const opened = "_opened_vy4rv_103";
+const overlay = "_overlay_vy4rv_151";
+const cls = {
+  drawer,
+  content,
+  header,
+  title,
+  space,
+  inner,
+  button,
+  footer,
+  "footer-button": "_footer-button_vy4rv_82",
+  left,
+  right,
+  bottom,
+  opened,
+  "is-closing": "_is-closing_vy4rv_118",
+  overlay
+};
+const ANIMATION_DELAY = 300;
+const Drawer = ({
+  isOpen,
+  onClose,
+  title: title2,
+  className,
+  position = EDrawerPosition.RIGHT,
+  paddingRight = 8,
+  footer: footer2,
+  children
+}) => {
+  const [isClosing, setIsClosing] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
+  const timerRef = useRef();
+  const contentRef = useRef(null);
+  const isBottomPosition = position === EDrawerPosition.BOTTOM;
+  const isMobile = useMediaQuery(EMediaQuery.XS1);
+  useLockBodyScroll({
+    on: isBodyScrollLocked,
+    paddingRight
+  });
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      setIsClosing(true);
+      setIsBodyScrollLocked(false);
+      timerRef.current = setTimeout(() => {
+        onClose();
+        setIsClosing(false);
+      }, ANIMATION_DELAY);
+    }
+  }, [onClose]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    },
+    [handleClose]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      setIsBodyScrollLocked(true);
+      setIsMounted(true);
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      setIsMounted(false);
+      clearTimeout(timerRef.current);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+  const mods = {
+    [cls.opened]: isMounted,
+    [cls["is-closing"]]: isClosing
+  };
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": isOpen,
+        role: "dialog",
+        style: {
+          minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight : void 0
+        },
+        className: classNames(cls.drawer, cls[position], mods, className),
+        children: /* @__PURE__ */ jsxs("section", { className: classNames(cls.content, cls[position]), children: [
+          /* @__PURE__ */ jsxs("header", { className: cls.header, children: [
+            /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
+            /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: EButtonVariantDefault.SecondaryWhite,
+                isIconButton: true,
+                size: isMobile ? EButtonSize.S : EButtonSize.M,
+                iconName: "Close16px",
+                onClick: handleClose,
+                className: cls.button
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
+          /* @__PURE__ */ jsx("footer", { className: cls.footer, children: footer2 || /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: isMobile ? EButtonSize.M : EButtonSize.XXL,
+              full: isMobile,
+              onClick: handleClose,
+              className: cls["footer-button"],
+              children: "Закрыть"
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
+  ] });
+};
+export {
+  Drawer
+};

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

@@ -0,0 +1,5 @@
+export declare enum EDrawerPosition {
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}

package/dist/components/Drawer/constants.js

@@ -0,0 +1,9 @@
+var EDrawerPosition = /* @__PURE__ */ ((EDrawerPosition2) => {
+  EDrawerPosition2["LEFT"] = "left";
+  EDrawerPosition2["RIGHT"] = "right";
+  EDrawerPosition2["BOTTOM"] = "bottom";
+  return EDrawerPosition2;
+})(EDrawerPosition || {});
+export {
+  EDrawerPosition
+};

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

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

package/dist/components/Drawer/index.js

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

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement, ComponentProps } from 'react';
+
+type TProps = ComponentProps<'img'> & {
+    /**
+     * Дополнительный класс к компоненту
+     */
+    className?: string;
+    /**
+     * Компонент, который буде показываться, пока идет загрузка изображения
+     */
+    fallback?: ReactElement;
+    /**
+     * Компонент, который буде показываться, если произошла ошибка при загрузке изображения
+     */
+    errorFallback?: ReactElement;
+};
+/**
+ * Компонент для отображения изображения с возможность показа загрузки и ошибки
+ */
+export declare const AppImage: import('react').MemoExoticComponent<(props: TProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Image/Image.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useLayoutEffect } from "react";
+const AppImage = memo((props) => {
+  const {
+    className,
+    src,
+    alt = "image",
+    errorFallback,
+    fallback,
+    ...otherProps
+  } = props;
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  useLayoutEffect(() => {
+    const img = new Image();
+    img.src = src ?? "";
+    img.onload = () => {
+      setIsLoading(false);
+    };
+    img.onerror = () => {
+      setIsLoading(false);
+      setHasError(true);
+    };
+  }, [src]);
+  if (isLoading && fallback) {
+    return fallback;
+  }
+  if (hasError && errorFallback) {
+    return errorFallback;
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...otherProps,
+      style: {
+        display: "block",
+        filter: `${isLoading ? "blur(20px)" : ""}`,
+        transition: ".3s filter ease"
+      },
+      className,
+      loading: "lazy",
+      src,
+      alt
+    }
+  );
+});
+export {
+  AppImage
+};

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

@@ -0,0 +1 @@
+export { AppImage as Image } from './Image';

package/dist/components/Image/index.js

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

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

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { TInputProps, TSize, TVariant } from './types';
+
+export type TProps = TInputProps & {
+    /**
+     * Размер ввода.
+     */
+    size?: TSize;
+    /**
+     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     */
+    variant?: TVariant;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки поля ввода.
+     */
+    wrapperClassName?: string;
+    /**
+     * Текстовое описание поля ввода.
+     */
+    label?: ReactNode;
+    /**
+     *  Автоматически фокусировать ввод при монтировании.
+     */
+    autofocus?: boolean;
+    /**
+     * Сделать ввод только для чтения.
+     */
+    readonly?: boolean;
+};
+export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & {
+    /**
+     * Размер ввода.
+     */
+    size?: TSize;
+    /**
+     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     */
+    variant?: TVariant;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки поля ввода.
+     */
+    wrapperClassName?: string;
+    /**
+     * Текстовое описание поля ввода.
+     */
+    label?: ReactNode;
+    /**
+     *  Автоматически фокусировать ввод при монтировании.
+     */
+    autofocus?: boolean;
+    /**
+     * Сделать ввод только для чтения.
+     */
+    readonly?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>>;

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;