mimir-ui-kit 1.38.36 → 1.38.38

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,36 @@
+import { jsx as f } from "react/jsx-runtime";
+import { c as l } from "../../index-DIxK0V-G.js";
+import { ENotificationBadgeSize as m } from "./constants.js";
+import '../../assets/NotificationBadge.css';const b = "_l_jhn37_18", d = "_m_jhn37_24", g = "_s_jhn37_30", t = {
+  "notification-badge": "_notification-badge_jhn37_2",
+  "notification-badge-absolute": "_notification-badge-absolute_jhn37_14",
+  l: b,
+  m: d,
+  s: g
+}, n = ({
+  count: e,
+  position: a,
+  absolute: c,
+  size: _ = m.M
+}) => /* @__PURE__ */ f(
+  "div",
+  {
+    className: l(
+      t["notification-badge"],
+      {
+        [t["notification-badge-absolute"]]: c
+      },
+      t[_]
+    ),
+    style: {
+      top: a == null ? void 0 : a.top,
+      right: a == null ? void 0 : a.right,
+      bottom: a == null ? void 0 : a.bottom,
+      left: a == null ? void 0 : a.left
+    },
+    children: e
+  }
+);
+export {
+  n as NotificationBadge
+};

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

@@ -0,0 +1,5 @@
+export declare enum ENotificationBadgeSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}

package/dist/components/NotificationBadge/constants.js

@@ -0,0 +1,4 @@
+var l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {});
+export {
+  l as ENotificationBadgeSize
+};

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

@@ -0,0 +1,3 @@
+export { NotificationBadge } from './NotificationBadge';
+export type { TNotificationBadgeProps } from './types';
+export { ENotificationBadgeSize } from './constants';

package/dist/components/NotificationBadge/index.js

@@ -0,0 +1,6 @@
+import { NotificationBadge as t } from "./NotificationBadge.js";
+import { ENotificationBadgeSize as a } from "./constants.js";
+export {
+  a as ENotificationBadgeSize,
+  t as NotificationBadge
+};

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

@@ -0,0 +1,25 @@
+import { ENotificationBadgeSize } from './constants';
+
+export type TNotificationBadgeProps = {
+    /**
+     * Значение количества уведомлений.
+     */
+    count: number;
+    /**
+     * Позиция для абсолютного позиционирования.
+     */
+    position?: {
+        top?: string;
+        right?: string;
+        bottom?: string;
+        left?: string;
+    };
+    /**
+     * Абсолютное позиционирование.
+     */
+    absolute?: boolean;
+    /**
+     * Размер NotificationBadge.
+     */
+    size?: `${ENotificationBadgeSize}` | ENotificationBadgeSize;
+};

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 as n, jsxs as g } from "react/jsx-runtime";
+import { c as u } from "../../index-DIxK0V-G.js";
+import { forwardRef as P, useImperativeHandle as R, Fragment as T } from "react";
+import { ITEMS_PER_SEPARATOR as q, DEFAULT_VALUE_LENGTH as v } from "./constants.js";
+import { useOTPInput as y } from "./hooks.js";
+import { I as A } from "../../Input-DAmc_HxO.js";
+import '../../assets/OtpInput.css';const C = "_otp_1shq3_3", F = "_input_1shq3_14", L = "_separator_1shq3_28", r = {
+  otp: C,
+  "input-wrapper": "_input-wrapper_1shq3_14",
+  input: F,
+  separator: L
+}, O = P(
+  ({
+    value: m = "",
+    valueLength: c = v,
+    needSeparator: l = !0,
+    onChange: i,
+    className: h,
+    ..._
+  }, d) => {
+    const {
+      data: { inputRefs: s, valueItems: o },
+      handlers: { handleChange: f, handleFocus: I, handleKeyDown: w, handlePaste: N }
+    } = y({
+      onChange: i,
+      value: m,
+      valueLength: c
+    });
+    return R(d, () => ({
+      focus: () => {
+        var a;
+        (a = s.current[0]) == null || a.focus();
+      }
+    })), /* @__PURE__ */ n("div", { className: u(r.otp, h), children: o.map((a, e) => {
+      const p = e + 1, E = l && p % q === 0 && p !== o.length;
+      return /* @__PURE__ */ g(T, { children: [
+        /* @__PURE__ */ n(
+          A,
+          {
+            ref: (t) => s.current[e] = t,
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            pattern: "\\d{1}",
+            maxLength: 1,
+            value: a,
+            className: r.input,
+            wrapperClassName: r["input-wrapper"],
+            onChange: (t) => f(t, e),
+            onKeyDown: (t) => w(t, e),
+            onFocus: (t) => I(t, e),
+            onPaste: N,
+            ..._
+          }
+        ),
+        E && /* @__PURE__ */ n(
+          "span",
+          {
+            className: u(r.separator),
+            "data-testid": "separator"
+          }
+        )
+      ] }, e);
+    }) });
+  }
+);
+O.displayName = "OtpInput";
+export {
+  O as 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,6 @@
+const E = new RegExp(/^\d+$/), R = 6, T = 3;
+export {
+  R as DEFAULT_VALUE_LENGTH,
+  T as ITEMS_PER_SEPARATOR,
+  E as 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,102 @@
+import { useRef as d, useMemo as A, useCallback as a } from "react";
+import { RE_DIGIT as n } from "./constants.js";
+const E = ({
+  value: i = "",
+  valueLength: u = 6,
+  onChange: c
+}) => {
+  const o = d([]), w = A(() => {
+    const s = i.split(""), t = [];
+    for (let e = 0; e < u; e++) {
+      const r = s[e];
+      n.test(r) ? t.push(r) : t.push("");
+    }
+    return t;
+  }, [i, u]), f = a(
+    (s) => {
+      var t;
+      s < u - 1 && ((t = o.current[s + 1]) == null || t.focus());
+    },
+    [u]
+  ), m = a((s) => {
+    var t;
+    s > 0 && ((t = o.current[s - 1]) == null || t.focus());
+  }, []), D = a(
+    (s, t) => {
+      const e = s.target;
+      let r = e.value.trim();
+      const l = n.test(r);
+      if (!l && r !== "")
+        return;
+      const p = o.current[t + 1];
+      if (!l && p && p.value !== "")
+        return;
+      r = l ? r.trim() : " ";
+      const R = r.length;
+      if (R === 1) {
+        const T = i.substring(0, t) + r + i.substring(t + 1);
+        c == null || c(T.trim()), l && f(t);
+      } else R === u && (c == null || c(r.trim()), e.blur());
+    },
+    [f, c, i, u]
+  ), V = a(
+    (s, t) => {
+      const { key: e } = s, r = s.target;
+      switch (e) {
+        case "ArrowRight":
+        case "ArrowDown":
+          return s.preventDefault(), f(t);
+        case "ArrowLeft":
+        case "ArrowUp":
+          return s.preventDefault(), m(t);
+      }
+      const l = r.value.trim();
+      if (r.setSelectionRange(0, l.length), s.key !== "Backspace" || l !== "")
+        return;
+      const p = `${i.substring(0, t - 1)} ${i.substring(t)}`;
+      c == null || c(p.trim()), m(t);
+    },
+    [f, m, c, i]
+  ), I = a(
+    (s, t) => {
+      const e = s.target, r = o.current[t - 1];
+      r && r.value === "" && r.focus(), e.setSelectionRange(0, e.value.length);
+    },
+    []
+  ), b = a(
+    (s) => {
+      s.preventDefault();
+      const t = s.clipboardData.getData("text");
+      if (n.test(t)) {
+        const r = t.slice(0, u).padEnd(u, " ");
+        c == null || c(r.trim());
+      }
+    },
+    [c, u]
+  );
+  return A(
+    () => ({
+      handlers: {
+        handleChange: D,
+        handleFocus: I,
+        handleKeyDown: V,
+        handlePaste: b
+      },
+      data: {
+        valueItems: w,
+        inputRefs: o
+      }
+    }),
+    [
+      D,
+      I,
+      V,
+      b,
+      w,
+      o
+    ]
+  );
+};
+export {
+  E as 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 as o } from "./OtpInput.js";
+export {
+  o as OtpInput
+};

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,40 @@
+export type TBackProps = {
+    currentPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TNextProps = {
+    currentPageNumber: number;
+    lastPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TItemProps = {
+    currentPageNumber: number;
+    newPageNumber: number;
+    onClick: (pageNumber: number) => void;
+    setCurrentPage: (pageNumber: number) => void;
+};
+export type TProps = {
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    rootClassName?: string;
+    /**
+     * Выполнится при изменении страницы
+     */
+    onChange: (page: number) => void;
+    /**
+     * Всего элементов
+     */
+    total: number;
+    /**
+     * Элементов на странице
+     */
+    perPage?: number;
+    /**
+     * Текущая страница
+     */
+    currentPageNumber?: number;
+};
+export declare const Pagination: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,179 @@
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
+import { c as C } from "../../index-DIxK0V-G.js";
+import { forwardRef as N, useState as w, useEffect as v } from "react";
+import { FIRST_PAGE_NUMBER as u, DEFAULT_PER_PAGE as A } from "./constants.js";
+import { useWindowSize as x } from "../../hooks/useWindowSize/index.js";
+import { MergedButton as h } from "../MergedButton/MergedButton.js";
+import '../../assets/Pagination.css';const E = "_container_grwbf_3", j = "_ellipsis_grwbf_42", b = {
+  container: E,
+  "pagination-button": "_pagination-button_grwbf_18",
+  "is-active": "_is-active_grwbf_39",
+  ellipsis: j
+}, B = ({ currentPageNumber: t, onClick: n, setCurrentPage: o }) => /* @__PURE__ */ i(
+  h,
+  {
+    buttons: [
+      {
+        isIconButton: !0,
+        variant: "white",
+        onClick: () => {
+          t !== u && (o(t - 1), n(t - 1));
+        },
+        iconName: "ArrowLeft16px",
+        disabled: t === u,
+        "data-testid": "back-button"
+      }
+    ]
+  }
+), I = ({
+  currentPageNumber: t,
+  lastPageNumber: n,
+  onClick: o,
+  setCurrentPage: a
+}) => {
+  const s = t >= n;
+  return /* @__PURE__ */ i(
+    h,
+    {
+      buttons: [
+        {
+          isIconButton: !0,
+          variant: "white",
+          onClick: () => {
+            s || (a(t + 1), o(t + 1));
+          },
+          disabled: s,
+          iconName: "ArrowRight16px",
+          "data-testid": "next-button"
+        }
+      ]
+    }
+  );
+}, _ = () => /* @__PURE__ */ i(
+  h,
+  {
+    buttons: [
+      {
+        children: "...",
+        variant: "transparent",
+        className: C(b["pagination-button"], b.ellipsis)
+      }
+    ]
+  }
+), g = ({
+  currentPageNumber: t,
+  newPageNumber: n,
+  onClick: o,
+  setCurrentPage: a
+}) => {
+  const s = t === n, r = () => {
+    a(n), o(n);
+  }, e = n < 10 ? `0${n}` : n;
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      "data-testid": `pagination-button-${e}`,
+      type: "button",
+      onClick: r,
+      className: C(b["pagination-button"], {
+        [b["is-active"]]: s
+      }),
+      children: e
+    }
+  );
+}, R = ({
+  start: t,
+  end: n,
+  currentPageNumber: o,
+  onClick: a,
+  setCurrentPage: s
+}) => {
+  const r = [];
+  for (let e = t; e <= n; e++)
+    r.push(
+      /* @__PURE__ */ i(
+        g,
+        {
+          currentPageNumber: o,
+          setCurrentPage: s,
+          newPageNumber: e,
+          onClick: a
+        },
+        e
+      )
+    );
+  return r;
+}, U = N(
+  (t, n) => {
+    const {
+      rootClassName: o,
+      total: a,
+      perPage: s = A,
+      currentPageNumber: r = u,
+      onChange: e
+    } = t, [c, d] = w(r), l = Math.ceil(a / s), { width: k } = x(), m = k <= 650 ? 2 : 4;
+    let f = 0, p = 0;
+    return v(() => {
+      d(r);
+    }, [r]), c <= m ? (f = u, p = Math.min(
+      u + m,
+      l
+    )) : c > l - m ? (f = l - m, p = l) : (f = c - m / 2, p = c + m / 2), a <= s ? null : /* @__PURE__ */ P(
+      "nav",
+      {
+        "aria-label": "Постраничная навигация",
+        className: C(b.container, o),
+        ref: n,
+        children: [
+          /* @__PURE__ */ i(
+            B,
+            {
+              currentPageNumber: c,
+              onClick: e,
+              setCurrentPage: d
+            }
+          ),
+          f > u && /* @__PURE__ */ i(
+            g,
+            {
+              newPageNumber: u,
+              currentPageNumber: c,
+              onClick: e,
+              setCurrentPage: d
+            }
+          ),
+          f > u + 1 && /* @__PURE__ */ i(_, {}),
+          R({
+            start: f,
+            end: p,
+            currentPageNumber: c,
+            setCurrentPage: d,
+            onClick: e
+          }),
+          p < l - 1 && /* @__PURE__ */ i(_, {}),
+          p < l && /* @__PURE__ */ i(
+            g,
+            {
+              newPageNumber: l,
+              currentPageNumber: c,
+              setCurrentPage: d,
+              onClick: e
+            }
+          ),
+          /* @__PURE__ */ i(
+            I,
+            {
+              currentPageNumber: c,
+              setCurrentPage: d,
+              lastPageNumber: l,
+              onClick: e
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  U as Pagination
+};

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

@@ -0,0 +1,2 @@
+export declare const FIRST_PAGE_NUMBER = 1;
+export declare const DEFAULT_PER_PAGE = 5;

package/dist/components/Pagination/constants.js

@@ -0,0 +1,5 @@
+const E = 1, _ = 5;
+export {
+  _ as DEFAULT_PER_PAGE,
+  E as FIRST_PAGE_NUMBER
+};

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

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

package/dist/components/Pagination/index.js

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

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,8 @@
+import { createPortal as t } from "react-dom";
+const a = ({
+  element: o = document.body,
+  children: r
+}) => t(r, o);
+export {
+  a as 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 as t } from "./Portal.js";
+export {
+  t as Portal
+};

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

@@ -0,0 +1,71 @@
+import { RadioGroupProps } from '@headlessui/react';
+import { ReactNode } from 'react';
+
+export interface TRadioOption {
+    value: string;
+    label: ReactNode;
+}
+/**
+ * Свойства компонента RadioGroup.
+ */
+export type TRadioGroupProps = Omit<RadioGroupProps, 'value'> & {
+    /**
+     * Массив опций для радиогруппы.
+     * Каждая опция должна содержать значение и метку.
+     */
+    options: TRadioOption[];
+    /**
+     * Выбранное значение опции.
+     * Может быть необязательным, если нет выбранного значения.
+     */
+    value?: TRadioOption['value'];
+    /**
+     * Текст метки, отображаемой над радиогруппой.
+     * Может быть необязательным.
+     */
+    label?: string;
+    /**
+     * Дополнительный класснейм для элементов радиогруппы.
+     */
+    classNameRadioWrapper?: string;
+    /**
+     * Дополнительный класснейм для span радиогруппы.
+     */
+    classNameRadioSpan?: string;
+    /**
+     * Дополнительный класснейм для обертки контента радиогруппы.
+     */
+    classNameContentWrapper?: string;
+};
+/**
+ * Компонент RadioGroup для выбора одной опции из нескольких.
+ */
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "value"> & {
+    /**
+     * Массив опций для радиогруппы.
+     * Каждая опция должна содержать значение и метку.
+     */
+    options: TRadioOption[];
+    /**
+     * Выбранное значение опции.
+     * Может быть необязательным, если нет выбранного значения.
+     */
+    value?: TRadioOption["value"];
+    /**
+     * Текст метки, отображаемой над радиогруппой.
+     * Может быть необязательным.
+     */
+    label?: string;
+    /**
+     * Дополнительный класснейм для элементов радиогруппы.
+     */
+    classNameRadioWrapper?: string;
+    /**
+     * Дополнительный класснейм для span радиогруппы.
+     */
+    classNameRadioSpan?: string;
+    /**
+     * Дополнительный класснейм для обертки контента радиогруппы.
+     */
+    classNameContentWrapper?: string;
+} & import('react').RefAttributes<HTMLElement>>;