mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/components/MergedButton/MergedButton.js

@@ -1,45 +1,53 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as a } from "../../index-DIxK0V-G.js";
-import { memo as p } from "react";
-import { EMergedButtonVariantRound as _ } from "./constants.js";
-import { Button as g } from "../Button/Button.js";
-import '../../assets/MergedButton.css';const u = "_buttons_p8gim_2", d = "_gray_p8gim_28", l = "_white_p8gim_36", B = "_transparent_p8gim_44", o = {
-  buttons: u,
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { memo } from "react";
+import { EMergedButtonVariantRound } from "./constants.js";
+import { Button } from "../Button/Button.js";
+import '../../assets/MergedButton.css';const buttons = "_buttons_p8gim_2";
+const gray = "_gray_p8gim_28";
+const white = "_white_p8gim_36";
+const transparent = "_transparent_p8gim_44";
+const cls = {
+  buttons,
   "merged-button": "_merged-button_p8gim_6",
-  gray: d,
-  white: l,
-  transparent: B,
+  gray,
+  white,
+  transparent,
   "is-icon": "_is-icon_p8gim_53"
-}, I = p(({ buttons: i }) => /* @__PURE__ */ s("div", { className: o.buttons, children: i.map(
-  ({ variant: r = _.White, disabled: n, ...t }, e) => {
-    const c = {
-      ...t,
-      isIconButton: t.isIconButton ?? !1,
-      iconName: t.isIconButton ? t.iconName : void 0,
-      leftIcon: t.isIconButton ? void 0 : t.leftIcon,
-      rightIcon: t.isIconButton ? void 0 : t.rightIcon
-    }, m = a(
-      o["merged-button"],
-      {
-        [o[r]]: !n,
-        [o.disabled]: n,
-        [o["is-icon"]]: t.isIconButton
-      },
-      t.className
-    );
-    return /* @__PURE__ */ s(
-      g,
-      {
-        clear: !0,
-        disabled: n,
-        className: m,
-        ...c
-      },
-      e
-    );
-  }
-) }));
-I.displayName = "MergedButton";
+};
+const MergedButton = memo(({ buttons: buttons2 }) => {
+  return /* @__PURE__ */ jsx("div", { className: cls.buttons, children: buttons2.map(
+    ({ variant = EMergedButtonVariantRound.White, disabled, ...button }, index) => {
+      const buttonProps = {
+        ...button,
+        isIconButton: button.isIconButton ?? false,
+        iconName: button.isIconButton ? button.iconName : void 0,
+        leftIcon: button.isIconButton ? void 0 : button.leftIcon,
+        rightIcon: button.isIconButton ? void 0 : button.rightIcon
+      };
+      const className = classNames(
+        cls["merged-button"],
+        {
+          [cls[variant]]: !disabled,
+          [cls.disabled]: disabled,
+          [cls["is-icon"]]: button.isIconButton
+        },
+        button.className
+      );
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          clear: true,
+          disabled,
+          className,
+          ...buttonProps
+        },
+        index
+      );
+    }
+  ) });
+});
+MergedButton.displayName = "MergedButton";
 export {
-  I as MergedButton
+  MergedButton
 };

package/dist/components/MergedButton/constants.js

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

package/dist/components/MergedButton/index.js

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

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -1,35 +1,38 @@
-import { jsx as g } from "react/jsx-runtime";
-import { c as m } from "../../index-DIxK0V-G.js";
-import { ENotificationBadgeSize as _ } from "./constants.js";
-import '../../assets/NotificationBadge.css';const b = "_m_ugqfj_18", d = "_s_ugqfj_24", e = {
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { ENotificationBadgeSize } from "./constants.js";
+import '../../assets/NotificationBadge.css';const m = "_m_ugqfj_18";
+const s = "_s_ugqfj_24";
+const cls = {
   "notification-badge": "_notification-badge_ugqfj_2",
   "notification-badge-absolute": "_notification-badge-absolute_ugqfj_14",
-  m: b,
-  s: d
-}, j = ({
-  count: t,
-  position: a,
-  absolute: c,
-  size: f = _.M
-}) => /* @__PURE__ */ g(
+  m,
+  s
+};
+const NotificationBadge = ({
+  count,
+  position,
+  absolute,
+  size = ENotificationBadgeSize.M
+}) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: m(
-      e["notification-badge"],
+    className: classNames(
+      cls["notification-badge"],
       {
-        [e["notification-badge-absolute"]]: c
+        [cls["notification-badge-absolute"]]: absolute
       },
-      e[f]
+      cls[size]
     ),
     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
+      top: position == null ? void 0 : position.top,
+      right: position == null ? void 0 : position.right,
+      bottom: position == null ? void 0 : position.bottom,
+      left: position == null ? void 0 : position.left
     },
-    children: t
+    children: count
   }
 );
 export {
-  j as NotificationBadge
+  NotificationBadge
 };

package/dist/components/NotificationBadge/constants.js

@@ -1,4 +1,8 @@
-var m = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r))(m || {});
+var ENotificationBadgeSize = /* @__PURE__ */ ((ENotificationBadgeSize2) => {
+  ENotificationBadgeSize2["S"] = "s";
+  ENotificationBadgeSize2["M"] = "m";
+  return ENotificationBadgeSize2;
+})(ENotificationBadgeSize || {});
 export {
-  m as ENotificationBadgeSize
+  ENotificationBadgeSize
 };

package/dist/components/NotificationBadge/index.js

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

package/dist/components/OtpInput/OtpInput.js

@@ -1,64 +1,70 @@
-import { jsx as r, 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-BQldEv37.js";
-import '../../assets/OtpInput.css';const C = "_otp_1shq3_3", F = "_input_1shq3_14", L = "_separator_1shq3_28", n = {
-  otp: C,
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { I as Input } from "../../Input-DspsU5F4.js";
+import '../../assets/OtpInput.css';const otp = "_otp_1shq3_3";
+const input = "_input_1shq3_14";
+const separator = "_separator_1shq3_28";
+const cls = {
+  otp,
   "input-wrapper": "_input-wrapper_1shq3_14",
-  input: F,
-  separator: L
-}, O = P(
+  input,
+  separator
+};
+const OtpInput = forwardRef(
   ({
-    value: m = "",
-    valueLength: c = v,
-    needSeparator: l = !0,
-    onChange: i,
-    className: h,
-    ..._
-  }, f) => {
+    value = "",
+    valueLength = DEFAULT_VALUE_LENGTH,
+    needSeparator = true,
+    onChange,
+    className,
+    ...props
+  }, ref) => {
     const {
-      data: { inputRefs: o, valueItems: s },
-      handlers: { handleChange: d, handleFocus: I, handleKeyDown: w, handlePaste: N }
-    } = y({
-      onChange: i,
-      value: m,
-      valueLength: c
+      data: { inputRefs, valueItems },
+      handlers: { handleChange, handleFocus, handleKeyDown, handlePaste }
+    } = useOTPInput({
+      onChange,
+      value,
+      valueLength
     });
-    return R(f, () => ({
+    useImperativeHandle(ref, () => ({
       focus: () => {
-        var a;
-        (a = o.current[0]) == null || a.focus();
+        var _a;
+        (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
       }
-    })), /* @__PURE__ */ r("div", { className: u(n.otp, h), children: s.map((a, e) => {
-      const p = e + 1, E = l && p % q === 0 && p !== s.length;
-      return /* @__PURE__ */ g(T, { children: [
-        /* @__PURE__ */ r(
-          A,
+    }));
+    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: (t) => o.current[e] = t,
+            ref: (el) => inputRefs.current[idx] = el,
             type: "text",
             inputMode: "numeric",
             autoComplete: "one-time-code",
             pattern: "\\d{1}",
             maxLength: 1,
-            value: a,
-            className: n.input,
-            wrapperClassName: n["input-wrapper"],
-            onChange: (t) => d(t, e),
-            onKeyDown: (t) => w(t, e),
-            onFocus: (t) => I(t, e),
-            onPaste: N,
-            ..._
+            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
           }
         ),
-        E && /* @__PURE__ */ r("span", { className: u(n.separator) })
-      ] }, e);
+        showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
+      ] }, idx);
     }) });
   }
 );
-O.displayName = "OtpInput";
+OtpInput.displayName = "OtpInput";
 export {
-  O as OtpInput
+  OtpInput
 };

package/dist/components/OtpInput/constants.js

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

package/dist/components/OtpInput/hooks.js

@@ -1,102 +1,139 @@
-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
+import { useRef, useMemo, useCallback } from "react";
+import { RE_DIGIT } from "./constants.js";
+const useOTPInput = ({
+  value = "",
+  valueLength = 6,
+  onChange
 }) => {
-  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("");
+  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 t;
-  }, [i, u]), f = a(
-    (s) => {
-      var t;
-      s < u - 1 && ((t = o.current[s + 1]) == null || t.focus());
+    return items;
+  }, [value, valueLength]);
+  const handleFocusToNextInput = useCallback(
+    (index) => {
+      var _a;
+      if (index < valueLength - 1) {
+        (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.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 !== "")
+    [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 p = o.current[t + 1];
-      if (!l && p && p.value !== "")
+      }
+      const nextInputEl = inputRefs.current[index + 1];
+      if (!isTargetValueDigit && nextInputEl && nextInputEl.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());
+      }
+      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();
+      }
     },
-    [f, c, i, u]
-  ), V = a(
-    (s, t) => {
-      const { key: e } = s, r = s.target;
-      switch (e) {
+    [handleFocusToNextInput, onChange, value, valueLength]
+  );
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      const { key } = e;
+      const target = e.target;
+      switch (key) {
         case "ArrowRight":
-        case "ArrowDown":
-          return s.preventDefault(), f(t);
+        case "ArrowDown": {
+          e.preventDefault();
+          return handleFocusToNextInput(index);
+        }
         case "ArrowLeft":
-        case "ArrowUp":
-          return s.preventDefault(), m(t);
+        case "ArrowUp": {
+          e.preventDefault();
+          return handleFocusToPrevInput(index);
+        }
       }
-      const l = r.value.trim();
-      if (r.setSelectionRange(0, l.length), s.key !== "Backspace" || l !== "")
+      const targetValue = target.value.trim();
+      target.setSelectionRange(0, targetValue.length);
+      if (e.key !== "Backspace" || targetValue !== "") {
         return;
-      const p = `${i.substring(0, t - 1)} ${i.substring(t)}`;
-      c == null || c(p.trim()), m(t);
+      }
+      const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
+      onChange == null ? void 0 : onChange(newValue.trim());
+      handleFocusToPrevInput(index);
     },
-    [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);
+    [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);
     },
     []
-  ), 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());
+  );
+  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());
       }
     },
-    [c, u]
+    [onChange, valueLength]
   );
-  return A(
+  return useMemo(
     () => ({
       handlers: {
-        handleChange: D,
-        handleFocus: I,
-        handleKeyDown: V,
-        handlePaste: b
+        handleChange,
+        handleFocus,
+        handleKeyDown,
+        handlePaste
       },
       data: {
-        valueItems: w,
-        inputRefs: o
+        valueItems,
+        inputRefs
       }
     }),
     [
-      D,
-      I,
-      V,
-      b,
-      w,
-      o
+      handleChange,
+      handleFocus,
+      handleKeyDown,
+      handlePaste,
+      valueItems,
+      inputRefs
     ]
   );
 };
 export {
-  E as useOTPInput
+  useOTPInput
 };

package/dist/components/OtpInput/index.js

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