@mci-ui/mci-ui 0.0.86 → 0.0.87

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

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

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

@@ -1,4 +1,4 @@
-const p = {
+const u = {
   sm: {
     input: "h-9 text-sm",
     icon: "w-4 h-4",
@@ -24,19 +24,19 @@ const p = {
     iconWrapper: "h-5"
   }
 };
-function u(e, r) {
+function p(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") }
+    sm: { ...u.sm, padding: t("sm") },
+    md: { ...u.md, padding: t("md") },
+    base: { ...u.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 i(e, r) {
+  return r ? e ? "border-red-500 hover:border-red-500 focus:border-red-500 focus:shadow-[0_0_0_2px_rgba(231,0,11,0.25)]" : "border-neutral-200 hover:border-neutral-100 focus:border-blue-500 focus:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]" : 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 f(e, r, t, n) {
+  return n ? e ? "text-neutral-100/50" : r ? "text-red-500" : t ? "text-white" : "text-neutral-100" : 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";
@@ -44,6 +44,6 @@ function d(e, r) {
 export {
   f as getInputIconColor,
   d as getInputRightPaddingClass,
-  u as getInputSizes,
+  p as getInputSizes,
   i as getInputStateStyles
 };

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

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