@mci-ui/mci-ui 0.0.83 → 0.0.85

package/dist/shared/ui/mciInput/MciInput.js

@@ -0,0 +1,225 @@
+import { jsxs as f, jsx as s, Fragment as $ } from "react/jsx-runtime";
+import { EyeClosed as q, Eye as z } from "@solar-icons/react";
+import { forwardRef as ee, useState as w, useMemo as m } from "react";
+import te from "../../../assets/icons/close.svg.js";
+import { cn as t } from "../../lib/utils.js";
+import { getInputSizes as se, getInputStateStyles as ne, getInputIconColor as le, getInputRightPaddingClass as ae } from "./mci-input.utils.js";
+const re = ee(
+  ({
+    label: j,
+    placeholder: B,
+    type: b = "text",
+    icon: r,
+    rightIcon: a,
+    iconPosition: i = "left",
+    size: e = "base",
+    error: c,
+    disabled: p = !1,
+    required: v = !1,
+    value: N,
+    onChange: M,
+    onFocus: V,
+    onBlur: E,
+    className: P,
+    name: C,
+    maxLength: h = 250,
+    onClear: _,
+    showClearButton: D = !1,
+    step: A,
+    autoComplete: G = "off"
+  }, H) => {
+    const [k, F] = w(!1), [J, I] = w(""), [S, K] = w(!1), W = N ?? J, o = b === "password", x = D && !!W && !p, y = r && i === "left", g = r && i === "right" || a || o, L = g || x, R = m(() => {
+      let l = 0;
+      return x && (l += 1), o ? (l += 1, a && (l += 1), l) : (a && (l += 1), r && i === "right" && (l += 1), l);
+    }, [x, o, a, r, i]), O = () => {
+      F(!0), V?.();
+    }, Q = () => {
+      F(!1), E?.();
+    }, T = (l) => {
+      let d = l.target.value;
+      b === "number" && h && d.length > h && (d = d.slice(0, h), l.target.value = d), N === void 0 && I(d), M?.(l);
+    }, U = () => K((l) => !l), X = () => {
+      N === void 0 && I(""), _?.();
+    }, n = m(
+      () => se(!!y, !!g),
+      [y, g]
+    ), Y = m(() => ne(c), [c]), u = m(
+      () => le(p, c, k),
+      [c, k, p]
+    ), Z = m(
+      () => ae(e, R),
+      [e, R]
+    );
+    return /* @__PURE__ */ f("div", { className: t("w-full", P), children: [
+      j && /* @__PURE__ */ f(
+        "label",
+        {
+          htmlFor: C,
+          className: t(
+            "mb-2 block text-base font-medium",
+            c ? "text-red-600" : "text-slate-700",
+            n[e].labelFont
+          ),
+          children: [
+            j,
+            v && /* @__PURE__ */ s("span", { className: "text-extra-small text-red-600 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ f("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: H,
+            name: C,
+            type: o && S ? "text" : b,
+            value: W,
+            onChange: T,
+            onFocus: O,
+            onBlur: Q,
+            disabled: p,
+            required: v,
+            autoComplete: G,
+            placeholder: B,
+            step: A,
+            className: t(
+              "w-full border bg-white font-normal transition-all duration-300 ease-in-out outline-none",
+              e === "base" ? "rounded-xl" : "rounded-lg",
+              "disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
+              "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+              n[e].input,
+              n[e].padding,
+              Z,
+              Y
+            ),
+            maxLength: h
+          }
+        ),
+        y && /* @__PURE__ */ s(
+          "div",
+          {
+            className: t(
+              "absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
+              "transition-all duration-300",
+              n[e].leftIcon,
+              u
+            ),
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                className: t("flex items-center justify-center", n[e].iconWrapper),
+                children: /* @__PURE__ */ s("span", { className: t("flex items-center justify-center", n[e].icon), children: r })
+              }
+            )
+          }
+        ),
+        L && /* @__PURE__ */ f(
+          "div",
+          {
+            className: t(
+              "absolute top-1/2 flex -translate-y-1/2 items-center justify-center gap-2",
+              "transition-all duration-300",
+              n[e].rightIcon
+            ),
+            children: [
+              x && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: X,
+                  className: t(
+                    "flex items-center justify-center",
+                    n[e].iconWrapper,
+                    "text-slate-base hover:text-black"
+                  ),
+                  style: { cursor: "pointer" },
+                  children: /* @__PURE__ */ s("span", { className: t("flex items-center justify-center", n[e].icon), children: /* @__PURE__ */ s(te, { className: t("h-full w-full") }) })
+                }
+              ),
+              a && !o && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: t("flex items-center justify-center", n[e].iconWrapper),
+                  children: /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: t(
+                        "flex items-center justify-center",
+                        n[e].icon,
+                        u
+                      ),
+                      children: a
+                    }
+                  )
+                }
+              ),
+              o && /* @__PURE__ */ f($, { children: [
+                a && /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: t(
+                      "flex items-center justify-center",
+                      n[e].iconWrapper
+                    ),
+                    children: /* @__PURE__ */ s(
+                      "span",
+                      {
+                        className: t(
+                          "flex items-center justify-center",
+                          n[e].icon,
+                          u
+                        ),
+                        children: a
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: U,
+                    className: t(
+                      "flex items-center justify-center",
+                      n[e].iconWrapper,
+                      u
+                    ),
+                    children: /* @__PURE__ */ s(
+                      "span",
+                      {
+                        className: t("flex items-center justify-center cursor-pointer", n[e].icon),
+                        children: S ? /* @__PURE__ */ s(q, { weight: "Linear", className: t("h-full w-full") }) : /* @__PURE__ */ s(z, { weight: "Linear", className: t("h-full w-full") })
+                      }
+                    )
+                  }
+                )
+              ] }),
+              r && i === "right" && !o && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: t("flex items-center justify-center", n[e].iconWrapper),
+                  children: /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: t(
+                        "flex items-center justify-center",
+                        n[e].icon,
+                        u
+                      ),
+                      children: r
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      c && /* @__PURE__ */ s("p", { className: "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal text-red-600", children: c })
+    ] });
+  }
+);
+re.displayName = "MciInput";
+export {
+  re as default
+};

package/dist/shared/ui/mciInput/mci-input.utils.js

@@ -0,0 +1,49 @@
+const p = {
+  sm: {
+    input: "h-9 text-sm",
+    icon: "w-4 h-4",
+    leftIcon: "left-2",
+    rightIcon: "right-2",
+    labelFont: "text-sm",
+    iconWrapper: "h-4"
+  },
+  md: {
+    input: "h-10 text-sm",
+    icon: "w-4 h-4",
+    leftIcon: "left-2",
+    rightIcon: "right-2",
+    labelFont: "text-base",
+    iconWrapper: "h-4"
+  },
+  base: {
+    input: "h-12 text-base",
+    icon: "w-5 h-5",
+    leftIcon: "left-3",
+    rightIcon: "right-3",
+    labelFont: "text-base",
+    iconWrapper: "h-5"
+  }
+};
+function u(e, r) {
+  const t = (n) => n === "sm" ? e && r ? "pl-7 pr-7" : e ? "pl-7 pr-2" : r ? "pl-2 pr-7" : "px-2" : n === "md" ? e && r ? "pl-8 pr-8" : e ? "pl-8 pr-2" : r ? "pl-2 pr-8" : "px-4" : e && r ? "pl-9 pr-9" : e ? "pl-9 pr-3" : r ? "pl-3 pr-9" : "px-4";
+  return {
+    sm: { ...p.sm, padding: t("sm") },
+    md: { ...p.md, padding: t("md") },
+    base: { ...p.base, padding: t("base") }
+  };
+}
+function i(e) {
+  return e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+}
+function f(e, r, t) {
+  return e ? "text-slate-400" : r ? "text-red-600" : t ? "text-black" : "text-slate-400";
+}
+function d(e, r) {
+  return r <= 0 ? "" : e === "sm" ? r >= 3 ? "pr-14" : r === 2 ? "pr-11" : "pr-7" : e === "md" ? r >= 3 ? "pr-16" : r === 2 ? "pr-12" : "pr-8" : r >= 3 ? "pr-20" : r === 2 ? "pr-16" : "pr-10";
+}
+export {
+  f as getInputIconColor,
+  d as getInputRightPaddingClass,
+  u as getInputSizes,
+  i as getInputStateStyles
+};

package/dist/shared/ui/mciLoader/MciLoader.js

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+import a from "../../../assets/icons/loaderIcon.svg.js";
+function d({
+  className: o,
+  size: e = 150,
+  iconClassName: t,
+  isLoading: i = !1,
+  isFullPage: n = !0,
+  variant: u = "yellow"
+}) {
+  return i ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "z-[99px] flex flex-col items-center justify-center transition-all duration-300",
+        n ? "fixed inset-0 backdrop-blur-[2px]" : "absolute inset-0 w-full h-full rounded-[inherit]",
+        o
+      ),
+      children: /* @__PURE__ */ r(
+        a,
+        {
+          width: e,
+          height: e,
+          className: l(
+            "animate-spin",
+            !t && (u === "blue" ? "text-blue-600" : "text-yellow-500"),
+            t
+          ),
+          style: { fill: "currentColor", stroke: "currentColor" }
+        }
+      )
+    }
+  ) : null;
+}
+export {
+  d as default
+};

package/dist/shared/ui/mciPagination/MciPagination.js

@@ -0,0 +1,135 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { AltArrowDown as k, AltArrowLeft as j, MenuDots as M, AltArrowRight as L } from "@solar-icons/react";
+import { useMemo as z } from "react";
+import { cn as r } from "../../lib/utils.js";
+import { createPageRange as E } from "./mci-pagination.utils.js";
+const I = {
+  medium: "h-9 text-sm",
+  large: "h-10 text-base"
+}, S = {
+  yellow: {
+    active: "bg-yellow-500 text-white border-yellow-500",
+    inactive: "bg-slate-100 border-slate-200 text-black hover:bg-slate-200",
+    disabled: "text-slate-400 border-slate-200",
+    arrow: "text-black"
+  },
+  blue: {
+    active: "bg-blue-600 text-white border-blue-600",
+    inactive: "bg-slate-100 border-slate-200 text-black hover:bg-slate-200",
+    disabled: "text-slate-400 border-slate-300",
+    arrow: "text-black"
+  }
+};
+function G({
+  totalItems: o,
+  currentPage: m,
+  perPage: c,
+  onPageChange: d,
+  onPerPageChange: u,
+  siblingCount: h = 1,
+  perPageOptions: v = [10, 30, 50, 100],
+  showPerPage: g = !0,
+  variant: N = "yellow",
+  size: f = "large",
+  paginationClassName: y
+}) {
+  const w = Number.isFinite(o) && o > 0 ? o : 0, x = Number.isFinite(c) && c > 0 ? c : 10, a = Math.max(1, Number.isFinite(m) ? m : 1), i = Math.ceil(w / x), A = z(() => E(a, h, i), [a, h, i]), s = I[f], l = S[N ?? "yellow"];
+  return i <= 1 || w === 0 ? null : /* @__PURE__ */ n("div", { className: r(
+    "flex items-center justify-between gap-4 w-full",
+    y
+  ), children: [
+    g && u && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: "whitespace-nowrap text-extra-small text-slate-base font-normal",
+          children: "Строк на странице:"
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          "select",
+          {
+            value: x,
+            onChange: (t) => u(Number(t.target.value)),
+            className: r(
+              "appearance-none bg-white border border-slate-200 rounded-lg pl-3 pr-8 text-base text-black font-medium focus:outline-none cursor-pointer",
+              f === "large" ? "h-10" : "h-9"
+            ),
+            "aria-label": "Количество строк на странице",
+            children: v.map((t) => /* @__PURE__ */ e("option", { value: t, children: t }, t))
+          }
+        ),
+        /* @__PURE__ */ e(
+          k,
+          {
+            className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400",
+            weight: "Linear",
+            size: 20
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n("nav", { "aria-label": "Пагинация", className: "flex items-center gap-1 shrink-0 whitespace-nowrap", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => d(a - 1),
+          disabled: a === 1,
+          "aria-label": "Предыдущая страница",
+          className: r(
+            "flex items-center justify-center rounded-lg border transition-all bg-slate-100 min-w-10",
+            s,
+            a === 1 ? r("cursor-not-allowed opacity-50", l.disabled) : r("hover:cursor-pointer", l.arrow, "border-slate-200")
+          ),
+          children: /* @__PURE__ */ e(j, { weight: "Linear", size: 20 })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: A.map((t, p) => {
+        if (t === "...")
+          return /* @__PURE__ */ e(
+            "span",
+            {
+              className: r("flex items-center justify-center text-black font-medium min-w-10", s),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(M, { weight: "Bold", size: 20 })
+            },
+            p
+          );
+        const b = t === a;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => d(t),
+            "aria-label": `Страница ${t}${b ? ", текущая" : ""}`,
+            "aria-current": b ? "page" : void 0,
+            className: r(
+              "flex items-center justify-center rounded-lg border font-medium transition-all hover:cursor-pointer min-w-10 px-2",
+              s,
+              b ? l.active : l.inactive
+            ),
+            children: t
+          },
+          p
+        );
+      }) }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => d(a + 1),
+          disabled: a === i,
+          "aria-label": "Следующая страница",
+          className: r(
+            "flex items-center justify-center rounded-lg border transition-all bg-slate-100 min-w-10",
+            s,
+            a === i ? r("cursor-not-allowed opacity-50", l.disabled) : r("hover:cursor-pointer", l.arrow, "border-slate-200")
+          ),
+          children: /* @__PURE__ */ e(L, { size: 20, weight: "Linear" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  G as default
+};

package/dist/shared/ui/mciPagination/mci-pagination.utils.js

@@ -0,0 +1,12 @@
+function m(n, i, r) {
+  const h = [], u = i * 2 + 5;
+  if (r <= u)
+    return Array.from({ length: r }, (f, c) => c + 1);
+  const p = Math.max(n - i, 2), e = Math.min(n + i, r - 1);
+  h.push(1), p > 2 && h.push("...");
+  for (let f = p; f <= e; f += 1) h.push(f);
+  return e < r - 1 && h.push("..."), r > 1 && h.push(r), h;
+}
+export {
+  m as createPageRange
+};

package/dist/shared/ui/mciPhone/MciPhone.js

@@ -0,0 +1,83 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { forwardRef as B, useState as E, useMemo as h } from "react";
+import { cn as s } from "../../lib/utils.js";
+import { Phone as I } from "@solar-icons/react";
+import { PHONE_SIZES as L, getPhoneStateStyles as V, getPhoneIconColor as k, formatPhoneValue as z } from "./mci-phone.utils.js";
+const H = B(
+  ({
+    label: d,
+    placeholder: p = "+998 (__) ___ __ __",
+    size: r = "base",
+    error: e,
+    disabled: a = !1,
+    required: x = !1,
+    value: l = "",
+    onChange: o,
+    onFocus: g,
+    onBlur: b,
+    className: N,
+    name: P,
+    showIcon: m = !1
+  }, _) => {
+    const [i, u] = E(!1), y = (C) => {
+      const f = C.target.value;
+      if (f.length < 5) {
+        o?.("+998");
+        return;
+      }
+      const M = z(f);
+      o?.(M);
+    }, S = () => {
+      u(!0), (!l || l === "") && o?.("+998"), g?.();
+    }, w = () => {
+      u(!1), b?.();
+    }, t = L[r], F = m ? t.iconPadding : t.defaultPadding, j = h(() => V(e), [e]), v = h(
+      () => k(a, e, i),
+      [e, i, a]
+    );
+    return /* @__PURE__ */ c("div", { className: s("w-full", N), children: [
+      d && /* @__PURE__ */ c("label", { className: s(
+        "mb-2 block font-medium transition-colors duration-200",
+        e ? "text-red-600" : i ? "text-blue-600" : "text-slate-700",
+        t.labelFont
+      ), children: [
+        d,
+        x && /* @__PURE__ */ n("span", { className: "text-red-600 ml-1", children: "*" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
+        m && /* @__PURE__ */ n("div", { className: s(
+          "absolute top-1/2 flex -translate-y-1/2 items-center justify-center transition-all duration-300",
+          t.iconLeft,
+          v
+        ), children: /* @__PURE__ */ n("div", { className: s("flex items-center justify-center", t.iconWrapper), children: /* @__PURE__ */ n(I, { className: s(t.iconSize), weight: "Linear" }) }) }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: _,
+            name: P,
+            type: "tel",
+            value: l,
+            onChange: y,
+            onFocus: S,
+            onBlur: w,
+            disabled: a,
+            placeholder: p,
+            className: s(
+              "w-full border bg-white font-normal transition-all duration-300 outline-none",
+              r === "base" ? "rounded-xl" : "rounded-lg",
+              "disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed",
+              t.input,
+              F,
+              j
+            )
+          }
+        )
+      ] }),
+      e && /* @__PURE__ */ n("p", { className: "mt-2 animate-slide-up text-sm font-normal text-red-600", children: e })
+    ] });
+  }
+);
+H.displayName = "MciPhone";
+export {
+  H as default
+};

package/dist/shared/ui/mciPhone/mci-phone.utils.js

@@ -0,0 +1,47 @@
+const r = {
+  sm: {
+    input: "h-9 text-sm",
+    iconPadding: "pl-8 pr-2",
+    defaultPadding: "px-2",
+    iconSize: "w-4 h-4",
+    iconLeft: "left-2",
+    labelFont: "text-sm",
+    iconWrapper: "h-4"
+  },
+  md: {
+    input: "h-10 text-sm",
+    iconPadding: "pl-10 pr-4",
+    defaultPadding: "px-4",
+    iconSize: "w-4 h-4",
+    iconLeft: "left-3",
+    labelFont: "text-base",
+    iconWrapper: "h-4"
+  },
+  base: {
+    input: "h-12 text-base",
+    iconPadding: "pl-11 pr-4",
+    defaultPadding: "px-4",
+    iconSize: "w-5 h-5",
+    iconLeft: "left-3",
+    labelFont: "text-base",
+    iconWrapper: "h-5"
+  }
+};
+function i(n) {
+  let e = n.replace(/\D/g, "");
+  e.startsWith("998") || (e = `998${e}`), e = e.substring(0, 12);
+  let t = "+998";
+  return e.length > 3 && (t += ` (${e.substring(3, 5)}`), e.length > 5 && (t += `) ${e.substring(5, 8)}`), e.length > 8 && (t += ` ${e.substring(8, 10)}`), e.length > 10 && (t += ` ${e.substring(10, 12)}`), t;
+}
+function o(n) {
+  return n ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600";
+}
+function l(n, e, t) {
+  return n ? "text-slate-400" : e ? "text-red-600" : t ? "text-black" : "text-slate-400";
+}
+export {
+  r as PHONE_SIZES,
+  i as formatPhoneValue,
+  l as getPhoneIconColor,
+  o as getPhoneStateStyles
+};