mimir-ui-kit 1.15.2 → 1.17.0

package/dist/components/AnchorLink/AnchorLink.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef } from "react";
+import { ELinkSize, ELinkVariant } from "./constants.js";
+import { Icon } from "../../icons/Icon.js";
+import '../../assets/AnchorLink.css';const link = "_link_12t08_2";
+const sample = "_sample_12t08_19";
+const anchor = "_anchor_12t08_23";
+const disabled = "_disabled_12t08_27";
+const icon = "_icon_12t08_35";
+const xs = "_xs_12t08_44";
+const s = "_s_12t08_19";
+const m = "_m_12t08_56";
+const l = "_l_12t08_2";
+const cls = {
+  link,
+  sample,
+  anchor,
+  disabled,
+  icon,
+  xs,
+  s,
+  m,
+  l
+};
+const Link = forwardRef(
+  ({
+    leftIcon,
+    className,
+    size = ELinkSize.L,
+    variant = ELinkVariant.ANCHOR,
+    rightIcon,
+    disabled: disabled2,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: disabled2,
+        className: classNames(cls.link, className, cls[variant], cls[size], {
+          [cls.disabled]: disabled2
+        }),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...leftIcon,
+              className: classNames(cls.icon, leftIcon.className)
+            }
+          ),
+          props.children,
+          rightIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...rightIcon,
+              className: classNames(cls.icon, rightIcon.className)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Link
+};

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

@@ -0,0 +1,10 @@
+export declare enum ELinkSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l"
+}
+export declare enum ELinkVariant {
+    SAMPLE = "sample",
+    ANCHOR = "anchor"
+}

package/dist/components/AnchorLink/constants.js

@@ -0,0 +1,16 @@
+var ELinkSize = /* @__PURE__ */ ((ELinkSize2) => {
+  ELinkSize2["XS"] = "xs";
+  ELinkSize2["S"] = "s";
+  ELinkSize2["M"] = "m";
+  ELinkSize2["L"] = "l";
+  return ELinkSize2;
+})(ELinkSize || {});
+var ELinkVariant = /* @__PURE__ */ ((ELinkVariant2) => {
+  ELinkVariant2["SAMPLE"] = "sample";
+  ELinkVariant2["ANCHOR"] = "anchor";
+  return ELinkVariant2;
+})(ELinkVariant || {});
+export {
+  ELinkSize,
+  ELinkVariant
+};

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

@@ -0,0 +1,2 @@
+export { Link } from './AnchorLink';
+export { ELinkSize, ELinkVariant } from './constants';

package/dist/components/AnchorLink/index.js

@@ -0,0 +1,7 @@
+import { Link } from "./AnchorLink.js";
+import { ELinkSize, ELinkVariant } from "./constants.js";
+export {
+  ELinkSize,
+  ELinkVariant,
+  Link
+};

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

@@ -33,12 +33,4 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
      * значение из стейта (data)
      */
     value?: string;
-} & 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>>>;
+} & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/DatePicker/DatePicker.js

@@ -5,7 +5,7 @@ import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.j
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
-import { Input } from "../Input/Input.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
 const DatePicker = memo(
   forwardRef(
     ({ size, value, onChangeValue, name, before, ...props }, ref) => {

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { TInputProps, TSize, TVariant } from './types';
+import { TInputProps, TAddon, TIconAddon, TSize, TVariant } from './types';
 
-export type TProps = TInputProps & {
+export type TAdditionalProps = {
     /**
      * Размер ввода.
      */
@@ -30,34 +30,18 @@ export type TProps = TInputProps & {
      * Сделать ввод только для чтения.
      */
     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;
+    rightAddon?: TAddon;
     /**
-     *  Автоматически фокусировать ввод при монтировании.
+     * Дополнительный слот слева.
      */
-    autofocus?: boolean;
+    leftAddon?: TIconAddon;
     /**
-     * Сделать ввод только для чтения.
+     * Флаг, показывающий наличие кнопки очистки.
      */
-    readonly?: boolean;
-} & import('react').RefAttributes<HTMLInputElement>>>;
+    withClearButton?: boolean;
+};
+export type TProps = TInputProps & TAdditionalProps;
+export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/Input/Input.js

@@ -1,122 +1,11 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as classNames } from "../../index-CweZ_OcN.js";
-import { memo, forwardRef, useState, useEffect } from "react";
-import { EInputVariant } from "./constants.js";
-import '../../assets/Input.css';const label = "_label_1sn09_5";
-const input = "_input_1sn09_2";
-const s = "_s_1sn09_61";
-const m = "_m_1sn09_73";
-const l = "_l_1sn09_5";
-const success = "_success_1sn09_124";
-const alarm = "_alarm_1sn09_142";
-const error = "_error_1sn09_160";
-const disabled = "_disabled_1sn09_178";
-const cls = {
-  "input-wrapper": "_input-wrapper_1sn09_2",
-  label,
-  "active-label": "_active-label_1sn09_18",
-  input,
-  s,
-  m,
-  l,
-  "default-gray": "_default-gray_1sn09_97",
-  "default-white": "_default-white_1sn09_109",
-  success,
-  alarm,
-  error,
-  disabled,
-  "has-label": "_has-label_1sn09_198"
-};
-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,
-          [cls.disabled]: disabled2 || readonly
-        },
-        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: value || "",
-                ...otherProps
-              }
-            )
-          ]
-        }
-      );
-    }
-  )
-);
-Input.displayName = "Input";
+import "react/jsx-runtime";
+import "../../index-CweZ_OcN.js";
+import "react";
+import "./constants.js";
+import { I } from "../../Input-BFFPzelg.js";
+import "../../hooks/useMergeRefs/useMergeRefs.js";
+import "../../icons/Icon.js";
+import "../Button/Button.js";
 export {
-  Input
+  I as Input
 };

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

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

package/dist/components/Input/index.js

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

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

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { EInputSize, EInputVariant } from './constants';
+import { TIcon } from '../../icons';
 
 export type TSize = `${EInputSize}` | EInputSize;
 export type TVariant = `${EInputVariant}` | EInputVariant;
@@ -8,4 +9,14 @@ export type TCommonCompoundInputProps = {
     variant?: TVariant;
     className?: string;
 };
+type TTextAddon = {
+    addonType?: 'text';
+    addonContent?: string;
+};
+export type TIconAddon = {
+    addonType?: 'icon';
+    addonContent: TIcon;
+};
+export type TAddon = TTextAddon | TIconAddon;
 export type TInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size' | 'placeholder'>;
+export {};

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

@@ -1,12 +1,4 @@
 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>>>;
+export declare const InputPassword: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/InputPassword/InputPassword.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState } from "react";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
-import { Input } from "../Input/Input.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
 import '../../assets/InputPassword.css';const input = "_input_mam1g_2";
 const wrapper = "_wrapper_mam1g_6";
 const button = "_button_mam1g_17";

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

@@ -1,12 +1,4 @@
 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>>>;
+export declare const InputPhoneNumber: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/InputPhoneNumber/InputPhoneNumber.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
 import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
-import { Input } from "../Input/Input.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
 const InputPhoneNumber = memo(
   forwardRef(
     ({ value = "", onChange, ...props }, ref) => {

package/dist/components/OtpInput/OtpInput.js

@@ -3,13 +3,13 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useImperativeHandle, Fragment } from "react";
 import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
 import { useOTPInput } from "./hooks.js";
-import { Input } from "../Input/Input.js";
-import '../../assets/OtpInput.css';const otp = "_otp_1005h_3";
-const input = "_input_1005h_15";
-const separator = "_separator_1005h_29";
+import { I as Input } from "../../Input-BFFPzelg.js";
+import '../../assets/OtpInput.css';const otp = "_otp_196ev_3";
+const input = "_input_196ev_14";
+const separator = "_separator_196ev_28";
 const cls = {
   otp,
-  "input-wrapper": "_input-wrapper_1005h_15",
+  "input-wrapper": "_input-wrapper_196ev_14",
   input,
   separator
 };

package/dist/components/SelectSearch/SelectSearch.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
 import { ESelectSearchSize } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import { Input } from "../Input/Input.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
 import { EInputSize } from "../Input/constants.js";
 import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
 import * as ReactDOM from "react-dom";

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import { TTextAreaProps } from './types';
+import { TAdditionalProps } from '../Input';
+
+export type TProps = TAdditionalProps & TTextAreaProps;
+export declare const TextArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TAdditionalProps & TTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>>;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,209 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { memo, forwardRef, useState, useRef, useEffect } from "react";
+import { useAutoResizeTextArea } from "./hooks.js";
+import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { Icon } from "../../icons/Icon.js";
+import { Button } from "../Button/Button.js";
+import { c as cls } from "../../Input-BFFPzelg.js";
+import { EInputVariant } from "../Input/constants.js";
+import '../../assets/TextArea.css';const textarea = "_textarea_46c4k_2";
+const s = "_s_46c4k_6";
+const m = "_m_46c4k_11";
+const l = "_l_46c4k_16";
+const textareaCls = {
+  textarea,
+  s,
+  m,
+  l,
+  "has-label": "_has-label_46c4k_21"
+};
+const renderAddon = (addon) => {
+  var _a, _b;
+  if (!addon) {
+    return null;
+  }
+  switch (addon.addonType) {
+    case "icon": {
+      const is16px = (_a = addon.addonContent) == null ? void 0 : _a.includes("16px");
+      const is24px = (_b = addon.addonContent) == null ? void 0 : _b.includes("24px");
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          style: {
+            ["--icon-size"]: classNames({
+              "16px": is16px,
+              "24px": is24px
+            })
+          },
+          className: cls["addon-icon"],
+          iconName: addon.addonContent
+        }
+      );
+    }
+    case "text": {
+      return addon.addonContent;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+const TextArea = memo(
+  forwardRef(
+    (props, ref) => {
+      const {
+        value,
+        className,
+        wrapperClassName,
+        variant = EInputVariant.DefaultGray,
+        autofocus,
+        readonly,
+        id,
+        onFocus,
+        onBlur,
+        label,
+        withClearButton,
+        disabled,
+        rightAddon,
+        leftAddon,
+        size = "m",
+        ...otherProps
+      } = props;
+      const [isFocused, setIsFocused] = useState(autofocus);
+      const [withValue, setWithValue] = useState(!!value);
+      const inputRef = useRef(null);
+      const mergedInputRef = useMergeRefs(inputRef, ref);
+      useEffect(() => {
+        if (autofocus) {
+          setIsFocused(true);
+        }
+      }, [autofocus]);
+      const handleResize = useAutoResizeTextArea(inputRef.current);
+      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 handleClear = () => {
+        if (inputRef == null ? void 0 : inputRef.current) {
+          inputRef.current.value = "";
+          inputRef.current.focus();
+          setWithValue(false);
+          handleResize();
+        }
+      };
+      const handleChange = (event) => {
+        var _a;
+        const targetValue = event.target.value;
+        setWithValue(!!targetValue);
+        handleResize();
+        (_a = otherProps == null ? void 0 : otherProps.onChange) == null ? void 0 : _a.call(otherProps, event);
+      };
+      const currentLeftAddon = renderAddon(leftAddon);
+      const currentRightAddon = renderAddon(rightAddon);
+      const mods = {
+        [cls.readonly]: disabled || readonly,
+        [cls.focused]: isFocused || withValue,
+        [cls.disabled]: disabled || readonly,
+        [cls["has-left-slot"]]: !!currentLeftAddon,
+        [cls["has-right-slot"]]: !!currentRightAddon,
+        [textareaCls["has-label"]]: !!label
+      };
+      const labelClassNames = classNames(
+        cls.label,
+        {
+          [cls["active-label"]]: isFocused || value,
+          [cls.disabled]: disabled || readonly,
+          [cls["has-left-slot"]]: !!currentLeftAddon
+        },
+        className,
+        cls[size]
+      );
+      const inputClassNames = classNames(
+        textareaCls.textarea,
+        cls.input,
+        mods,
+        className,
+        [cls[variant], textareaCls[size], cls[size]]
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(
+            cls["input-wrapper"],
+            cls[variant],
+            textareaCls[size],
+            cls[size],
+            { [cls.focused]: isFocused || withValue },
+            wrapperClassName
+          ),
+          children: [
+            label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label }),
+            currentLeftAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["left-slot"], {
+                  [cls.focused]: isFocused,
+                  [cls["has-label"]]: !!label
+                }),
+                children: currentLeftAddon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: mergedInputRef,
+                id,
+                className: inputClassNames,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                readOnly: readonly,
+                value,
+                onChange: handleChange,
+                ...otherProps
+              }
+            ),
+            currentRightAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["right-slot"], {
+                  [cls.focused]: isFocused,
+                  [cls["has-label"]]: !!label
+                }),
+                children: currentRightAddon
+              }
+            ),
+            withClearButton && withValue && /* @__PURE__ */ jsx(
+              Button,
+              {
+                tabIndex: -1,
+                className: cls.clear,
+                isIconButton: true,
+                iconName: "Close16px",
+                size: "m-s",
+                clear: true,
+                variant: "secondary-gray",
+                onClick: handleClear
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+TextArea.displayName = "TextArea";
+export {
+  TextArea
+};

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

@@ -0,0 +1 @@
+export declare const useAutoResizeTextArea: (textArea: HTMLTextAreaElement | null) => () => void;

package/dist/components/TextArea/hooks.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+const useAutoResizeTextArea = (textArea) => {
+  return useCallback(() => {
+    if (textArea) {
+      textArea.style.height = "var(--textarea-height)";
+      const scrollHeight = textArea.scrollHeight;
+      textArea.style.height = `${scrollHeight}px`;
+    }
+  }, [textArea]);
+};
+export {
+  useAutoResizeTextArea
+};