mimir-ui-kit 1.3.1 → 1.4.0

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 {};

package/dist/components/OtpInput/hooks.js

@@ -0,0 +1,139 @@
+import { useRef, useMemo, useCallback } from "react";
+import { RE_DIGIT } from "./constants.js";
+const useOTPInput = ({
+  value = "",
+  valueLength = 6,
+  onChange
+}) => {
+  const inputRefs = useRef([]);
+  const valueItems = useMemo(() => {
+    const valueArray = value.split("");
+    const items = [];
+    for (let i = 0; i < valueLength; i++) {
+      const char = valueArray[i];
+      if (RE_DIGIT.test(char)) {
+        items.push(char);
+      } else {
+        items.push("");
+      }
+    }
+    return items;
+  }, [value, valueLength]);
+  const handleFocusToNextInput = useCallback(
+    (index) => {
+      var _a;
+      if (index < valueLength - 1) {
+        (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
+      }
+    },
+    [valueLength]
+  );
+  const handleFocusToPrevInput = useCallback((index) => {
+    var _a;
+    if (index > 0) {
+      (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
+    }
+  }, []);
+  const handleChange = useCallback(
+    (e, index) => {
+      const target = e.target;
+      let targetValue = target.value.trim();
+      const isTargetValueDigit = RE_DIGIT.test(targetValue);
+      if (!isTargetValueDigit && targetValue !== "") {
+        return;
+      }
+      const nextInputEl = inputRefs.current[index + 1];
+      if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
+        return;
+      }
+      targetValue = isTargetValueDigit ? targetValue.trim() : " ";
+      const targetValueLength = targetValue.length;
+      if (targetValueLength === 1) {
+        const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
+        onChange == null ? void 0 : onChange(newValue.trim());
+        if (isTargetValueDigit) {
+          handleFocusToNextInput(index);
+        }
+      } else if (targetValueLength === valueLength) {
+        onChange == null ? void 0 : onChange(targetValue.trim());
+        target.blur();
+      }
+    },
+    [handleFocusToNextInput, onChange, value, valueLength]
+  );
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      const { key } = e;
+      const target = e.target;
+      switch (key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          e.preventDefault();
+          return handleFocusToNextInput(index);
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          e.preventDefault();
+          return handleFocusToPrevInput(index);
+        }
+      }
+      const targetValue = target.value.trim();
+      target.setSelectionRange(0, targetValue.length);
+      if (e.key !== "Backspace" || targetValue !== "") {
+        return;
+      }
+      const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
+      onChange == null ? void 0 : onChange(newValue.trim());
+      handleFocusToPrevInput(index);
+    },
+    [handleFocusToNextInput, handleFocusToPrevInput, onChange, value]
+  );
+  const handleFocus = useCallback(
+    (e, index) => {
+      const target = e.target;
+      const prevInputEl = inputRefs.current[index - 1];
+      if (prevInputEl && prevInputEl.value === "") {
+        prevInputEl.focus();
+      }
+      target.setSelectionRange(0, target.value.length);
+    },
+    []
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      e.preventDefault();
+      const pasteData = e.clipboardData.getData("text");
+      if (RE_DIGIT.test(pasteData)) {
+        const pastedValue = pasteData.slice(0, valueLength);
+        const newValue = pastedValue.padEnd(valueLength, " ");
+        onChange == null ? void 0 : onChange(newValue.trim());
+      }
+    },
+    [onChange, valueLength]
+  );
+  return useMemo(
+    () => ({
+      handlers: {
+        handleChange,
+        handleFocus,
+        handleKeyDown,
+        handlePaste
+      },
+      data: {
+        valueItems,
+        inputRefs
+      }
+    }),
+    [
+      handleChange,
+      handleFocus,
+      handleKeyDown,
+      handlePaste,
+      valueItems,
+      inputRefs
+    ]
+  );
+};
+export {
+  useOTPInput
+};

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

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

package/dist/components/OtpInput/index.js

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

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+type TProps = {
+    element?: HTMLElement;
+};
+export declare const Portal: ({ element, children }: PropsWithChildren<TProps>) => import('react').ReactPortal;
+export {};

package/dist/components/Portal/Portal.js

@@ -0,0 +1,10 @@
+import { createPortal } from "react-dom";
+const Portal = ({
+  element = document.body,
+  children
+}) => {
+  return createPortal(children, element);
+};
+export {
+  Portal
+};

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

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

package/dist/components/Portal/index.js

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

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

@@ -0,0 +1,30 @@
+import { RadioGroupProps } from '@headlessui/react';
+
+export interface TRadioOption {
+    value: string;
+    label: string;
+}
+/**
+ * Свойства компонента RadioGroup.
+ */
+export type TProps = Omit<RadioGroupProps, 'value'> & {
+    /**
+     * Массив опций для радиогруппы.
+     * Каждая опция должна содержать значение и метку.
+     */
+    options: TRadioOption[];
+    /**
+     * Выбранное значение опции.
+     * Может быть необязательным, если нет выбранного значения.
+     */
+    value?: TRadioOption['value'];
+    /**
+     * Текст метки, отображаемой над радиогруппой.
+     * Может быть необязательным.
+     */
+    label?: string;
+};
+/**
+ * Компонент RadioGroup для выбора одной опции из нескольких.
+ */
+export declare function RadioGroup({ options, value, onChange, label, ...props }: TProps): import("react/jsx-runtime").JSX.Element;