@starasia/pagination 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# starasia pagination
+
+starasia pagination is a strict and customizable pagination component for web development projects, designed for simplicity and adherence to strict design guidelines.
+
+## Screenshots
+
+![App Screenshot](https://github.com/primaramadhaniputra/image/blob/main/IPagination.png)
+
+## Package instalation
+
+Instal package using pnpm
+
+```bash
+  pnpm add @starasia/pagination
+```
+
+Instal package using yarn
+
+```bash
+  yarn add @starasia/pagination
+```
+
+Instal package using npm
+
+```bash
+  npm i @starasia/pagination
+```
+
+## Usage/Examples (you can combine using icon package starasia)
+
+```javascript
+import React from "react";
+import {Pagination} from "@starasia/pagination";
+import ReactDOM from "react-dom/client";
+import {useState} from "react";
+
+const App = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  return (
+    <div>
+      <h1>Pagination Progress Component</h1>
+      <Pagination
+        currentPage={currentPage}
+        onPageChange={(e) => setCurrentPage(e)}
+        totalCount={100}
+      />
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
+
+
+```
+
+## Props @starasia/pagination
+
+#### Props that you can pass to <Pagination {...props} />
+
+| Prop Name    | Value                  | required |
+| :----------- | :--------------------- | :------- |
+| totalCount   | number                 | true     |
+| siblingCount | number                 | false    |
+| currentPage  | number                 | true     |
+| onPageChange | (page: number) => void | true     |

package/dist/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IPaginationProps } from "./types";
+export declare const Pagination: ({ onPageChange, totalCount, siblingCount, currentPage, size, }: IPaginationProps) => React.JSX.Element | null;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export * from "./types";

package/dist/pagination.es.js

@@ -0,0 +1,893 @@
+import Pa, { useMemo as vr } from "react";
+var ra = { exports: {} }, N = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Oa;
+function gr() {
+  if (Oa)
+    return N;
+  Oa = 1;
+  var m = Pa, c = Symbol.for("react.element"), w = Symbol.for("react.fragment"), v = Object.prototype.hasOwnProperty, f = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, T = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function S(E, u, y) {
+    var p, x = {}, R = null, j = null;
+    y !== void 0 && (R = "" + y), u.key !== void 0 && (R = "" + u.key), u.ref !== void 0 && (j = u.ref);
+    for (p in u)
+      v.call(u, p) && !T.hasOwnProperty(p) && (x[p] = u[p]);
+    if (E && E.defaultProps)
+      for (p in u = E.defaultProps, u)
+        x[p] === void 0 && (x[p] = u[p]);
+    return { $$typeof: c, type: E, key: R, ref: j, props: x, _owner: f.current };
+  }
+  return N.Fragment = w, N.jsx = S, N.jsxs = S, N;
+}
+var Y = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ja;
+function mr() {
+  return ja || (ja = 1, process.env.NODE_ENV !== "production" && function() {
+    var m = Pa, c = Symbol.for("react.element"), w = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), f = Symbol.for("react.strict_mode"), T = Symbol.for("react.profiler"), S = Symbol.for("react.provider"), E = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), ea = Symbol.iterator, ka = "@@iterator";
+    function Da(a) {
+      if (a === null || typeof a != "object")
+        return null;
+      var r = ea && a[ea] || a[ka];
+      return typeof r == "function" ? r : null;
+    }
+    var D = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function g(a) {
+      {
+        for (var r = arguments.length, e = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          e[n - 1] = arguments[n];
+        Aa("error", a, e);
+      }
+    }
+    function Aa(a, r, e) {
+      {
+        var n = D.ReactDebugCurrentFrame, o = n.getStackAddendum();
+        o !== "" && (r += "%s", e = e.concat([o]));
+        var s = e.map(function(i) {
+          return String(i);
+        });
+        s.unshift("Warning: " + r), Function.prototype.apply.call(console[a], console, s);
+      }
+    }
+    var Fa = !1, Ia = !1, $a = !1, Wa = !1, Na = !1, na;
+    na = Symbol.for("react.module.reference");
+    function Ya(a) {
+      return !!(typeof a == "string" || typeof a == "function" || a === v || a === T || Na || a === f || a === y || a === p || Wa || a === j || Fa || Ia || $a || typeof a == "object" && a !== null && (a.$$typeof === R || a.$$typeof === x || a.$$typeof === S || a.$$typeof === E || a.$$typeof === u || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      a.$$typeof === na || a.getModuleId !== void 0));
+    }
+    function Ma(a, r, e) {
+      var n = a.displayName;
+      if (n)
+        return n;
+      var o = r.displayName || r.name || "";
+      return o !== "" ? e + "(" + o + ")" : e;
+    }
+    function ta(a) {
+      return a.displayName || "Context";
+    }
+    function O(a) {
+      if (a == null)
+        return null;
+      if (typeof a.tag == "number" && g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof a == "function")
+        return a.displayName || a.name || null;
+      if (typeof a == "string")
+        return a;
+      switch (a) {
+        case v:
+          return "Fragment";
+        case w:
+          return "Portal";
+        case T:
+          return "Profiler";
+        case f:
+          return "StrictMode";
+        case y:
+          return "Suspense";
+        case p:
+          return "SuspenseList";
+      }
+      if (typeof a == "object")
+        switch (a.$$typeof) {
+          case E:
+            var r = a;
+            return ta(r) + ".Consumer";
+          case S:
+            var e = a;
+            return ta(e._context) + ".Provider";
+          case u:
+            return Ma(a, a.render, "ForwardRef");
+          case x:
+            var n = a.displayName || null;
+            return n !== null ? n : O(a.type) || "Memo";
+          case R: {
+            var o = a, s = o._payload, i = o._init;
+            try {
+              return O(i(s));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var C = Object.assign, I = 0, ia, oa, sa, ua, la, ca, fa;
+    function da() {
+    }
+    da.__reactDisabledLog = !0;
+    function La() {
+      {
+        if (I === 0) {
+          ia = console.log, oa = console.info, sa = console.warn, ua = console.error, la = console.group, ca = console.groupCollapsed, fa = console.groupEnd;
+          var a = {
+            configurable: !0,
+            enumerable: !0,
+            value: da,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: a,
+            log: a,
+            warn: a,
+            error: a,
+            group: a,
+            groupCollapsed: a,
+            groupEnd: a
+          });
+        }
+        I++;
+      }
+    }
+    function Ua() {
+      {
+        if (I--, I === 0) {
+          var a = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: C({}, a, {
+              value: ia
+            }),
+            info: C({}, a, {
+              value: oa
+            }),
+            warn: C({}, a, {
+              value: sa
+            }),
+            error: C({}, a, {
+              value: ua
+            }),
+            group: C({}, a, {
+              value: la
+            }),
+            groupCollapsed: C({}, a, {
+              value: ca
+            }),
+            groupEnd: C({}, a, {
+              value: fa
+            })
+          });
+        }
+        I < 0 && g("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var B = D.ReactCurrentDispatcher, J;
+    function L(a, r, e) {
+      {
+        if (J === void 0)
+          try {
+            throw Error();
+          } catch (o) {
+            var n = o.stack.trim().match(/\n( *(at )?)/);
+            J = n && n[1] || "";
+          }
+        return `
+` + J + a;
+      }
+    }
+    var K = !1, U;
+    {
+      var Va = typeof WeakMap == "function" ? WeakMap : Map;
+      U = new Va();
+    }
+    function pa(a, r) {
+      if (!a || K)
+        return "";
+      {
+        var e = U.get(a);
+        if (e !== void 0)
+          return e;
+      }
+      var n;
+      K = !0;
+      var o = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var s;
+      s = B.current, B.current = null, La();
+      try {
+        if (r) {
+          var i = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(i.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(i, []);
+            } catch (h) {
+              n = h;
+            }
+            Reflect.construct(a, [], i);
+          } else {
+            try {
+              i.call();
+            } catch (h) {
+              n = h;
+            }
+            a.call(i.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (h) {
+            n = h;
+          }
+          a();
+        }
+      } catch (h) {
+        if (h && n && typeof h.stack == "string") {
+          for (var t = h.stack.split(`
+`), b = n.stack.split(`
+`), l = t.length - 1, d = b.length - 1; l >= 1 && d >= 0 && t[l] !== b[d]; )
+            d--;
+          for (; l >= 1 && d >= 0; l--, d--)
+            if (t[l] !== b[d]) {
+              if (l !== 1 || d !== 1)
+                do
+                  if (l--, d--, d < 0 || t[l] !== b[d]) {
+                    var _ = `
+` + t[l].replace(" at new ", " at ");
+                    return a.displayName && _.includes("<anonymous>") && (_ = _.replace("<anonymous>", a.displayName)), typeof a == "function" && U.set(a, _), _;
+                  }
+                while (l >= 1 && d >= 0);
+              break;
+            }
+        }
+      } finally {
+        K = !1, B.current = s, Ua(), Error.prepareStackTrace = o;
+      }
+      var F = a ? a.displayName || a.name : "", P = F ? L(F) : "";
+      return typeof a == "function" && U.set(a, P), P;
+    }
+    function qa(a, r, e) {
+      return pa(a, !1);
+    }
+    function za(a) {
+      var r = a.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function V(a, r, e) {
+      if (a == null)
+        return "";
+      if (typeof a == "function")
+        return pa(a, za(a));
+      if (typeof a == "string")
+        return L(a);
+      switch (a) {
+        case y:
+          return L("Suspense");
+        case p:
+          return L("SuspenseList");
+      }
+      if (typeof a == "object")
+        switch (a.$$typeof) {
+          case u:
+            return qa(a.render);
+          case x:
+            return V(a.type, r, e);
+          case R: {
+            var n = a, o = n._payload, s = n._init;
+            try {
+              return V(s(o), r, e);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var $ = Object.prototype.hasOwnProperty, va = {}, ga = D.ReactDebugCurrentFrame;
+    function q(a) {
+      if (a) {
+        var r = a._owner, e = V(a.type, a._source, r ? r.type : null);
+        ga.setExtraStackFrame(e);
+      } else
+        ga.setExtraStackFrame(null);
+    }
+    function Ba(a, r, e, n, o) {
+      {
+        var s = Function.call.bind($);
+        for (var i in a)
+          if (s(a, i)) {
+            var t = void 0;
+            try {
+              if (typeof a[i] != "function") {
+                var b = Error((n || "React class") + ": " + e + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof a[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw b.name = "Invariant Violation", b;
+              }
+              t = a[i](r, i, n, e, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (l) {
+              t = l;
+            }
+            t && !(t instanceof Error) && (q(o), g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", e, i, typeof t), q(null)), t instanceof Error && !(t.message in va) && (va[t.message] = !0, q(o), g("Failed %s type: %s", e, t.message), q(null));
+          }
+      }
+    }
+    var Ja = Array.isArray;
+    function G(a) {
+      return Ja(a);
+    }
+    function Ka(a) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, e = r && a[Symbol.toStringTag] || a.constructor.name || "Object";
+        return e;
+      }
+    }
+    function Ga(a) {
+      try {
+        return ma(a), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function ma(a) {
+      return "" + a;
+    }
+    function ya(a) {
+      if (Ga(a))
+        return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ka(a)), ma(a);
+    }
+    var W = D.ReactCurrentOwner, Xa = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, ba, ha, X;
+    X = {};
+    function Ha(a) {
+      if ($.call(a, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(a, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return a.ref !== void 0;
+    }
+    function Za(a) {
+      if ($.call(a, "key")) {
+        var r = Object.getOwnPropertyDescriptor(a, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return a.key !== void 0;
+    }
+    function Qa(a, r) {
+      if (typeof a.ref == "string" && W.current && r && W.current.stateNode !== r) {
+        var e = O(W.current.type);
+        X[e] || (g('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', O(W.current.type), a.ref), X[e] = !0);
+      }
+    }
+    function ar(a, r) {
+      {
+        var e = function() {
+          ba || (ba = !0, g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        e.isReactWarning = !0, Object.defineProperty(a, "key", {
+          get: e,
+          configurable: !0
+        });
+      }
+    }
+    function rr(a, r) {
+      {
+        var e = function() {
+          ha || (ha = !0, g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        e.isReactWarning = !0, Object.defineProperty(a, "ref", {
+          get: e,
+          configurable: !0
+        });
+      }
+    }
+    var er = function(a, r, e, n, o, s, i) {
+      var t = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: c,
+        // Built-in properties that belong on the element
+        type: a,
+        key: r,
+        ref: e,
+        props: i,
+        // Record the component responsible for creating this element.
+        _owner: s
+      };
+      return t._store = {}, Object.defineProperty(t._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(t, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(t, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: o
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+    };
+    function nr(a, r, e, n, o) {
+      {
+        var s, i = {}, t = null, b = null;
+        e !== void 0 && (ya(e), t = "" + e), Za(r) && (ya(r.key), t = "" + r.key), Ha(r) && (b = r.ref, Qa(r, o));
+        for (s in r)
+          $.call(r, s) && !Xa.hasOwnProperty(s) && (i[s] = r[s]);
+        if (a && a.defaultProps) {
+          var l = a.defaultProps;
+          for (s in l)
+            i[s] === void 0 && (i[s] = l[s]);
+        }
+        if (t || b) {
+          var d = typeof a == "function" ? a.displayName || a.name || "Unknown" : a;
+          t && ar(i, d), b && rr(i, d);
+        }
+        return er(a, t, b, o, n, W.current, i);
+      }
+    }
+    var H = D.ReactCurrentOwner, Ra = D.ReactDebugCurrentFrame;
+    function A(a) {
+      if (a) {
+        var r = a._owner, e = V(a.type, a._source, r ? r.type : null);
+        Ra.setExtraStackFrame(e);
+      } else
+        Ra.setExtraStackFrame(null);
+    }
+    var Z;
+    Z = !1;
+    function Q(a) {
+      return typeof a == "object" && a !== null && a.$$typeof === c;
+    }
+    function Ea() {
+      {
+        if (H.current) {
+          var a = O(H.current.type);
+          if (a)
+            return `
+
+Check the render method of \`` + a + "`.";
+        }
+        return "";
+      }
+    }
+    function tr(a) {
+      {
+        if (a !== void 0) {
+          var r = a.fileName.replace(/^.*[\\\/]/, ""), e = a.lineNumber;
+          return `
+
+Check your code at ` + r + ":" + e + ".";
+        }
+        return "";
+      }
+    }
+    var _a = {};
+    function ir(a) {
+      {
+        var r = Ea();
+        if (!r) {
+          var e = typeof a == "string" ? a : a.displayName || a.name;
+          e && (r = `
+
+Check the top-level render call using <` + e + ">.");
+        }
+        return r;
+      }
+    }
+    function wa(a, r) {
+      {
+        if (!a._store || a._store.validated || a.key != null)
+          return;
+        a._store.validated = !0;
+        var e = ir(r);
+        if (_a[e])
+          return;
+        _a[e] = !0;
+        var n = "";
+        a && a._owner && a._owner !== H.current && (n = " It was passed a child from " + O(a._owner.type) + "."), A(a), g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', e, n), A(null);
+      }
+    }
+    function xa(a, r) {
+      {
+        if (typeof a != "object")
+          return;
+        if (G(a))
+          for (var e = 0; e < a.length; e++) {
+            var n = a[e];
+            Q(n) && wa(n, r);
+          }
+        else if (Q(a))
+          a._store && (a._store.validated = !0);
+        else if (a) {
+          var o = Da(a);
+          if (typeof o == "function" && o !== a.entries)
+            for (var s = o.call(a), i; !(i = s.next()).done; )
+              Q(i.value) && wa(i.value, r);
+        }
+      }
+    }
+    function or(a) {
+      {
+        var r = a.type;
+        if (r == null || typeof r == "string")
+          return;
+        var e;
+        if (typeof r == "function")
+          e = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === u || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === x))
+          e = r.propTypes;
+        else
+          return;
+        if (e) {
+          var n = O(r);
+          Ba(e, a.props, "prop", n, a);
+        } else if (r.PropTypes !== void 0 && !Z) {
+          Z = !0;
+          var o = O(r);
+          g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", o || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function sr(a) {
+      {
+        for (var r = Object.keys(a.props), e = 0; e < r.length; e++) {
+          var n = r[e];
+          if (n !== "children" && n !== "key") {
+            A(a), g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), A(null);
+            break;
+          }
+        }
+        a.ref !== null && (A(a), g("Invalid attribute `ref` supplied to `React.Fragment`."), A(null));
+      }
+    }
+    var Ta = {};
+    function Sa(a, r, e, n, o, s) {
+      {
+        var i = Ya(a);
+        if (!i) {
+          var t = "";
+          (a === void 0 || typeof a == "object" && a !== null && Object.keys(a).length === 0) && (t += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var b = tr(o);
+          b ? t += b : t += Ea();
+          var l;
+          a === null ? l = "null" : G(a) ? l = "array" : a !== void 0 && a.$$typeof === c ? (l = "<" + (O(a.type) || "Unknown") + " />", t = " Did you accidentally export a JSX literal instead of a component?") : l = typeof a, g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", l, t);
+        }
+        var d = nr(a, r, e, o, s);
+        if (d == null)
+          return d;
+        if (i) {
+          var _ = r.children;
+          if (_ !== void 0)
+            if (n)
+              if (G(_)) {
+                for (var F = 0; F < _.length; F++)
+                  xa(_[F], a);
+                Object.freeze && Object.freeze(_);
+              } else
+                g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              xa(_, a);
+        }
+        if ($.call(r, "key")) {
+          var P = O(a), h = Object.keys(r).filter(function(pr) {
+            return pr !== "key";
+          }), aa = h.length > 0 ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ta[P + aa]) {
+            var dr = h.length > 0 ? "{" + h.join(": ..., ") + ": ...}" : "{}";
+            g(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, aa, P, dr, P), Ta[P + aa] = !0;
+          }
+        }
+        return a === v ? sr(d) : or(d), d;
+      }
+    }
+    function ur(a, r, e) {
+      return Sa(a, r, e, !0);
+    }
+    function lr(a, r, e) {
+      return Sa(a, r, e, !1);
+    }
+    var cr = lr, fr = ur;
+    Y.Fragment = v, Y.jsx = cr, Y.jsxs = fr;
+  }()), Y;
+}
+process.env.NODE_ENV === "production" ? ra.exports = gr() : ra.exports = mr();
+var k = ra.exports;
+const yr = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+
+:root {
+  /* spacing */
+  --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
+  --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
+
+  /* color */
+  --starasia-ui-pagination-color-primary-gray: var(
+    --starasia-ui-color-gray-700,
+    #374151
+  );
+  --starasia-ui-pagination-color-secondary-gray: var(
+    --starasia-ui-color-gray-500,
+    #6b7280
+  );
+  --starasia-ui-pagination-color-tertiary-gray: var(
+    --starasia-ui-color-gray-300,
+    #d1d5db
+  );
+  --starasia-ui-pagination-color-quaternary-gray: var(
+    --starasia-ui-color-gray-100,
+    #f3f4f6
+  );
+  --starasia-ui-pagination-color-quinary-gray: var(
+    --starasia-ui-color-gray-50,
+    #f9fafb
+  );
+  /* blue color */
+  /* blue */
+  --starasia-ui-pagination-color-primary-blue: var(
+    --starasia-ui-color-blue-700,
+    #1d4ed8
+  );
+  --starasia-ui-pagination-color-secondary-blue: var(
+    --starasia-ui-color-blue-500,
+    #3b82f6
+  );
+  --starasia-ui-pagination-color-tertiary-blue: var(
+    --starasia-ui-color-blue-300,
+    #93c5fd
+  );
+  --starasia-ui-pagination-color-quaternary-blue: var(
+    --starasia-ui-color-blue-100,
+    #dbeafe
+  );
+  --starasia-ui-pagination-color-quinary-blue: var(
+    --starasia-ui-color-blue-50,
+    #eff6ff
+  );
+
+  /* border radius */
+  --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
+
+  /* font size */
+  --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
+  --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
+
+  /* font weight */
+  --starasia-ui-pagination-font-weight: var(
+    --starasia-ui-fontWeights-medium,
+    400
+  );
+
+  /* border widht */
+  --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
+}
+
+.starasia-pagination-container {
+  display: flex;
+  list-style-type: none;
+}
+
+.starasia-pagination-item {
+  padding: var(--starasia-ui-pagination-spacing-xs)
+    var(--starasia-ui-pagination-spacing-sm);
+  text-align: center;
+  margin: auto var(--starasia-ui-pagination-spacing-xs);
+  color: var(--starasia-ui-pagination-color-primary-gray);
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  border-radius: var(--starasia-ui-pagination-border-radius);
+  font-size: var(--starasia-ui-pagination-font-size-sm);
+  font-family: "Montserrat";
+  text-align: center;
+}
+
+.starasia-pagination-item.starasia-pagination-item-responsive {
+  margin: auto 0;
+  font-size: var(--starasia-ui-pagination-font-size-xs);
+  padding: var(--starasia-ui-pagination-spacing-xs)
+    var(--starasia-ui-pagination-spacing-sm);
+}
+
+.starasia-pagination-item.starasia-pagination-dots:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.starasia-pagination-item:hover {
+  background-color: var(--starasia-ui-pagination-color-quaternary-gray);
+  cursor: pointer;
+}
+
+.starasia-pagination-item.starasia-pagination-selected {
+  background-color: var(--starasia-ui-pagination-color-quinary-blue);
+  color: var(--starasia-ui-pagination-color-secondary-blue);
+  font-weight: var(--starasia-ui-pagination-font-weight);
+}
+
+.starasia-pagination-arrow::before {
+  position: relative;
+  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
+  content: "";
+  /* By using an em scale, the arrows will size with the font */
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-right: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-primary-gray);
+  border-top: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-primary-gray);
+}
+
+.starasia-pagination-arrow.starasia-pagination-left {
+  transform: rotate(-135deg) translateX(-25%);
+}
+
+.starasia-pagination-arrow.starasia-pagination-right {
+  transform: rotate(45deg);
+}
+
+.starasia-pagination-item.starasia-pagination-disabled {
+  pointer-events: none;
+}
+
+.starasia-pagination-item.starasia-pagination-disabled
+  .starasia-pagination-arrow::before {
+  border-right: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-tertiary-gray);
+  border-top: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-tertiary-gray);
+}
+.starasia-pagination-item.starasia-pagination-disabled:hover {
+  background-color: transparent;
+  cursor: default;
+}
+`, M = "...", z = (m, c) => {
+  let w = c - m + 1;
+  return Array.from({ length: w }, (v, f) => f + m);
+}, br = ({
+  totalCount: m,
+  // pageSize,
+  siblingCount: c = 1,
+  currentPage: w
+}) => vr(() => {
+  const f = m;
+  if (c + 5 >= f)
+    return z(1, f);
+  const S = Math.max(w - c, 1), E = Math.min(
+    w + c,
+    f
+  ), u = S > 2, y = E < f - 2, p = 1, x = f;
+  if (!u && y) {
+    let R = 3 + 2 * c;
+    return [...z(1, R), M, f];
+  }
+  if (u && !y) {
+    let R = 3 + 2 * c, j = z(
+      f - R + 1,
+      f
+    );
+    return [p, M, ...j];
+  }
+  if (u && y) {
+    let R = z(S, E);
+    return [p, M, ...R, M, x];
+  }
+}, [m, c, w]), Ca = "starasia-pagination-styles", hr = (m) => {
+  if (!document.getElementById(Ca)) {
+    const c = document.createElement("style");
+    c.id = Ca, c.textContent = m, document.head.appendChild(c);
+  }
+};
+hr(yr);
+const Er = ({
+  onPageChange: m,
+  totalCount: c,
+  siblingCount: w = 1,
+  currentPage: v,
+  size: f = "md"
+}) => {
+  const T = br({
+    currentPage: v,
+    totalCount: c,
+    siblingCount: w
+    // pageSize
+  });
+  if (v === 0 || T.length < 2)
+    return null;
+  const S = () => {
+    m(v + 1);
+  }, E = () => {
+    m(v - 1);
+  };
+  let u = T[T.length - 1];
+  return /* @__PURE__ */ k.jsxs("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
+    /* @__PURE__ */ k.jsx(
+      "li",
+      {
+        className: `starasia-pagination-item ${v === 1 ? "starasia-pagination-disabled" : null} ${f === "sm" ? "starasia-pagination-item-responsive" : ""}`,
+        onClick: E,
+        children: /* @__PURE__ */ k.jsx("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
+      }
+    ),
+    T.map((y, p) => y === M ? /* @__PURE__ */ k.jsx(
+      "li",
+      {
+        className: `starasia-pagination-item starasia-pagination-dots ${f === "sm" ? "starasia-pagination-item-responsive" : ""}`,
+        children: "…"
+      },
+      p
+    ) : /* @__PURE__ */ k.jsx(
+      "li",
+      {
+        className: `starasia-pagination-item ${y === v ? "starasia-pagination-selected" : null} ${f === "sm" ? "starasia-pagination-item-responsive" : ""}`,
+        onClick: () => m(Number(y)),
+        children: y
+      },
+      p
+    )),
+    /* @__PURE__ */ k.jsx(
+      "li",
+      {
+        className: `starasia-pagination-item ${v === u ? "starasia-pagination-disabled" : null} ${f === "sm" ? "starasia-pagination-item-responsive" : ""}`,
+        onClick: S,
+        children: /* @__PURE__ */ k.jsx(
+          "div",
+          {
+            className: "starasia-pagination-arrow starasia-pagination-right"
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  Er as Pagination
+};

package/dist/pagination.umd.js

@@ -0,0 +1,180 @@
+(function(j,P){typeof exports=="object"&&typeof module<"u"?P(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],P):(j=typeof globalThis<"u"?globalThis:j||self,P(j.Pagination={},j.React))})(this,function(j,P){"use strict";var K={exports:{}},$={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ta;function Da(){if(ta)return $;ta=1;var m=P,c=Symbol.for("react.element"),w=Symbol.for("react.fragment"),g=Object.prototype.hasOwnProperty,f=m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,T={key:!0,ref:!0,__self:!0,__source:!0};function S(E,u,y){var p,x={},R=null,k=null;y!==void 0&&(R=""+y),u.key!==void 0&&(R=""+u.key),u.ref!==void 0&&(k=u.ref);for(p in u)g.call(u,p)&&!T.hasOwnProperty(p)&&(x[p]=u[p]);if(E&&E.defaultProps)for(p in u=E.defaultProps,u)x[p]===void 0&&(x[p]=u[p]);return{$$typeof:c,type:E,key:R,ref:k,props:x,_owner:f.current}}return $.Fragment=w,$.jsx=S,$.jsxs=S,$}var N={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ia;function Aa(){return ia||(ia=1,process.env.NODE_ENV!=="production"&&function(){var m=P,c=Symbol.for("react.element"),w=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),T=Symbol.for("react.profiler"),S=Symbol.for("react.provider"),E=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),k=Symbol.for("react.offscreen"),sa=Symbol.iterator,$a="@@iterator";function Na(a){if(a===null||typeof a!="object")return null;var r=sa&&a[sa]||a[$a];return typeof r=="function"?r:null}var F=m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(a){{for(var r=arguments.length,e=new Array(r>1?r-1:0),n=1;n<r;n++)e[n-1]=arguments[n];Ya("error",a,e)}}function Ya(a,r,e){{var n=F.ReactDebugCurrentFrame,o=n.getStackAddendum();o!==""&&(r+="%s",e=e.concat([o]));var s=e.map(function(i){return String(i)});s.unshift("Warning: "+r),Function.prototype.apply.call(console[a],console,s)}}var Ma=!1,La=!1,Ua=!1,Va=!1,qa=!1,ua;ua=Symbol.for("react.module.reference");function za(a){return!!(typeof a=="string"||typeof a=="function"||a===g||a===T||qa||a===f||a===y||a===p||Va||a===k||Ma||La||Ua||typeof a=="object"&&a!==null&&(a.$$typeof===R||a.$$typeof===x||a.$$typeof===S||a.$$typeof===E||a.$$typeof===u||a.$$typeof===ua||a.getModuleId!==void 0))}function Ba(a,r,e){var n=a.displayName;if(n)return n;var o=r.displayName||r.name||"";return o!==""?e+"("+o+")":e}function la(a){return a.displayName||"Context"}function O(a){if(a==null)return null;if(typeof a.tag=="number"&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof a=="function")return a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case g:return"Fragment";case w:return"Portal";case T:return"Profiler";case f:return"StrictMode";case y:return"Suspense";case p:return"SuspenseList"}if(typeof a=="object")switch(a.$$typeof){case E:var r=a;return la(r)+".Consumer";case S:var e=a;return la(e._context)+".Provider";case u:return Ba(a,a.render,"ForwardRef");case x:var n=a.displayName||null;return n!==null?n:O(a.type)||"Memo";case R:{var o=a,s=o._payload,i=o._init;try{return O(i(s))}catch{return null}}}return null}var D=Object.assign,M=0,ca,fa,da,pa,ga,va,ma;function ya(){}ya.__reactDisabledLog=!0;function Ja(){{if(M===0){ca=console.log,fa=console.info,da=console.warn,pa=console.error,ga=console.group,va=console.groupCollapsed,ma=console.groupEnd;var a={configurable:!0,enumerable:!0,value:ya,writable:!0};Object.defineProperties(console,{info:a,log:a,warn:a,error:a,group:a,groupCollapsed:a,groupEnd:a})}M++}}function Ka(){{if(M--,M===0){var a={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:D({},a,{value:ca}),info:D({},a,{value:fa}),warn:D({},a,{value:da}),error:D({},a,{value:pa}),group:D({},a,{value:ga}),groupCollapsed:D({},a,{value:va}),groupEnd:D({},a,{value:ma})})}M<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var G=F.ReactCurrentDispatcher,X;function q(a,r,e){{if(X===void 0)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);X=n&&n[1]||""}return`
+`+X+a}}var H=!1,z;{var Ga=typeof WeakMap=="function"?WeakMap:Map;z=new Ga}function ba(a,r){if(!a||H)return"";{var e=z.get(a);if(e!==void 0)return e}var n;H=!0;var o=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var s;s=G.current,G.current=null,Ja();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(h){n=h}Reflect.construct(a,[],i)}else{try{i.call()}catch(h){n=h}a.call(i.prototype)}}else{try{throw Error()}catch(h){n=h}a()}}catch(h){if(h&&n&&typeof h.stack=="string"){for(var t=h.stack.split(`
+`),b=n.stack.split(`
+`),l=t.length-1,d=b.length-1;l>=1&&d>=0&&t[l]!==b[d];)d--;for(;l>=1&&d>=0;l--,d--)if(t[l]!==b[d]){if(l!==1||d!==1)do if(l--,d--,d<0||t[l]!==b[d]){var _=`
+`+t[l].replace(" at new "," at ");return a.displayName&&_.includes("<anonymous>")&&(_=_.replace("<anonymous>",a.displayName)),typeof a=="function"&&z.set(a,_),_}while(l>=1&&d>=0);break}}}finally{H=!1,G.current=s,Ka(),Error.prepareStackTrace=o}var W=a?a.displayName||a.name:"",A=W?q(W):"";return typeof a=="function"&&z.set(a,A),A}function Xa(a,r,e){return ba(a,!1)}function Ha(a){var r=a.prototype;return!!(r&&r.isReactComponent)}function B(a,r,e){if(a==null)return"";if(typeof a=="function")return ba(a,Ha(a));if(typeof a=="string")return q(a);switch(a){case y:return q("Suspense");case p:return q("SuspenseList")}if(typeof a=="object")switch(a.$$typeof){case u:return Xa(a.render);case x:return B(a.type,r,e);case R:{var n=a,o=n._payload,s=n._init;try{return B(s(o),r,e)}catch{}}}return""}var L=Object.prototype.hasOwnProperty,ha={},Ra=F.ReactDebugCurrentFrame;function J(a){if(a){var r=a._owner,e=B(a.type,a._source,r?r.type:null);Ra.setExtraStackFrame(e)}else Ra.setExtraStackFrame(null)}function Za(a,r,e,n,o){{var s=Function.call.bind(L);for(var i in a)if(s(a,i)){var t=void 0;try{if(typeof a[i]!="function"){var b=Error((n||"React class")+": "+e+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof a[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw b.name="Invariant Violation",b}t=a[i](r,i,n,e,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(l){t=l}t&&!(t instanceof Error)&&(J(o),v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",e,i,typeof t),J(null)),t instanceof Error&&!(t.message in ha)&&(ha[t.message]=!0,J(o),v("Failed %s type: %s",e,t.message),J(null))}}}var Qa=Array.isArray;function Z(a){return Qa(a)}function ar(a){{var r=typeof Symbol=="function"&&Symbol.toStringTag,e=r&&a[Symbol.toStringTag]||a.constructor.name||"Object";return e}}function rr(a){try{return Ea(a),!1}catch{return!0}}function Ea(a){return""+a}function _a(a){if(rr(a))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",ar(a)),Ea(a)}var U=F.ReactCurrentOwner,er={key:!0,ref:!0,__self:!0,__source:!0},wa,xa,Q;Q={};function nr(a){if(L.call(a,"ref")){var r=Object.getOwnPropertyDescriptor(a,"ref").get;if(r&&r.isReactWarning)return!1}return a.ref!==void 0}function tr(a){if(L.call(a,"key")){var r=Object.getOwnPropertyDescriptor(a,"key").get;if(r&&r.isReactWarning)return!1}return a.key!==void 0}function ir(a,r){if(typeof a.ref=="string"&&U.current&&r&&U.current.stateNode!==r){var e=O(U.current.type);Q[e]||(v('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',O(U.current.type),a.ref),Q[e]=!0)}}function or(a,r){{var e=function(){wa||(wa=!0,v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};e.isReactWarning=!0,Object.defineProperty(a,"key",{get:e,configurable:!0})}}function sr(a,r){{var e=function(){xa||(xa=!0,v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};e.isReactWarning=!0,Object.defineProperty(a,"ref",{get:e,configurable:!0})}}var ur=function(a,r,e,n,o,s,i){var t={$$typeof:c,type:a,key:r,ref:e,props:i,_owner:s};return t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(t,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(t,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t};function lr(a,r,e,n,o){{var s,i={},t=null,b=null;e!==void 0&&(_a(e),t=""+e),tr(r)&&(_a(r.key),t=""+r.key),nr(r)&&(b=r.ref,ir(r,o));for(s in r)L.call(r,s)&&!er.hasOwnProperty(s)&&(i[s]=r[s]);if(a&&a.defaultProps){var l=a.defaultProps;for(s in l)i[s]===void 0&&(i[s]=l[s])}if(t||b){var d=typeof a=="function"?a.displayName||a.name||"Unknown":a;t&&or(i,d),b&&sr(i,d)}return ur(a,t,b,o,n,U.current,i)}}var aa=F.ReactCurrentOwner,Ta=F.ReactDebugCurrentFrame;function I(a){if(a){var r=a._owner,e=B(a.type,a._source,r?r.type:null);Ta.setExtraStackFrame(e)}else Ta.setExtraStackFrame(null)}var ra;ra=!1;function ea(a){return typeof a=="object"&&a!==null&&a.$$typeof===c}function Sa(){{if(aa.current){var a=O(aa.current.type);if(a)return`
+
+Check the render method of \``+a+"`."}return""}}function cr(a){{if(a!==void 0){var r=a.fileName.replace(/^.*[\\\/]/,""),e=a.lineNumber;return`
+
+Check your code at `+r+":"+e+"."}return""}}var Oa={};function fr(a){{var r=Sa();if(!r){var e=typeof a=="string"?a:a.displayName||a.name;e&&(r=`
+
+Check the top-level render call using <`+e+">.")}return r}}function ja(a,r){{if(!a._store||a._store.validated||a.key!=null)return;a._store.validated=!0;var e=fr(r);if(Oa[e])return;Oa[e]=!0;var n="";a&&a._owner&&a._owner!==aa.current&&(n=" It was passed a child from "+O(a._owner.type)+"."),I(a),v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',e,n),I(null)}}function Pa(a,r){{if(typeof a!="object")return;if(Z(a))for(var e=0;e<a.length;e++){var n=a[e];ea(n)&&ja(n,r)}else if(ea(a))a._store&&(a._store.validated=!0);else if(a){var o=Na(a);if(typeof o=="function"&&o!==a.entries)for(var s=o.call(a),i;!(i=s.next()).done;)ea(i.value)&&ja(i.value,r)}}}function dr(a){{var r=a.type;if(r==null||typeof r=="string")return;var e;if(typeof r=="function")e=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===u||r.$$typeof===x))e=r.propTypes;else return;if(e){var n=O(r);Za(e,a.props,"prop",n,a)}else if(r.PropTypes!==void 0&&!ra){ra=!0;var o=O(r);v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function pr(a){{for(var r=Object.keys(a.props),e=0;e<r.length;e++){var n=r[e];if(n!=="children"&&n!=="key"){I(a),v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),I(null);break}}a.ref!==null&&(I(a),v("Invalid attribute `ref` supplied to `React.Fragment`."),I(null))}}var Ca={};function ka(a,r,e,n,o,s){{var i=za(a);if(!i){var t="";(a===void 0||typeof a=="object"&&a!==null&&Object.keys(a).length===0)&&(t+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var b=cr(o);b?t+=b:t+=Sa();var l;a===null?l="null":Z(a)?l="array":a!==void 0&&a.$$typeof===c?(l="<"+(O(a.type)||"Unknown")+" />",t=" Did you accidentally export a JSX literal instead of a component?"):l=typeof a,v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",l,t)}var d=lr(a,r,e,o,s);if(d==null)return d;if(i){var _=r.children;if(_!==void 0)if(n)if(Z(_)){for(var W=0;W<_.length;W++)Pa(_[W],a);Object.freeze&&Object.freeze(_)}else v("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Pa(_,a)}if(L.call(r,"key")){var A=O(a),h=Object.keys(r).filter(function(hr){return hr!=="key"}),na=h.length>0?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}";if(!Ca[A+na]){var br=h.length>0?"{"+h.join(": ..., ")+": ...}":"{}";v(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,na,A,br,A),Ca[A+na]=!0}}return a===g?pr(d):dr(d),d}}function gr(a,r,e){return ka(a,r,e,!0)}function vr(a,r,e){return ka(a,r,e,!1)}var mr=vr,yr=gr;N.Fragment=g,N.jsx=mr,N.jsxs=yr}()),N}process.env.NODE_ENV==="production"?K.exports=Da():K.exports=Aa();var C=K.exports;const Fa=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+
+:root {
+  /* spacing */
+  --starasia-ui-pagination-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
+  --starasia-ui-pagination-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
+
+  /* color */
+  --starasia-ui-pagination-color-primary-gray: var(
+    --starasia-ui-color-gray-700,
+    #374151
+  );
+  --starasia-ui-pagination-color-secondary-gray: var(
+    --starasia-ui-color-gray-500,
+    #6b7280
+  );
+  --starasia-ui-pagination-color-tertiary-gray: var(
+    --starasia-ui-color-gray-300,
+    #d1d5db
+  );
+  --starasia-ui-pagination-color-quaternary-gray: var(
+    --starasia-ui-color-gray-100,
+    #f3f4f6
+  );
+  --starasia-ui-pagination-color-quinary-gray: var(
+    --starasia-ui-color-gray-50,
+    #f9fafb
+  );
+  /* blue color */
+  /* blue */
+  --starasia-ui-pagination-color-primary-blue: var(
+    --starasia-ui-color-blue-700,
+    #1d4ed8
+  );
+  --starasia-ui-pagination-color-secondary-blue: var(
+    --starasia-ui-color-blue-500,
+    #3b82f6
+  );
+  --starasia-ui-pagination-color-tertiary-blue: var(
+    --starasia-ui-color-blue-300,
+    #93c5fd
+  );
+  --starasia-ui-pagination-color-quaternary-blue: var(
+    --starasia-ui-color-blue-100,
+    #dbeafe
+  );
+  --starasia-ui-pagination-color-quinary-blue: var(
+    --starasia-ui-color-blue-50,
+    #eff6ff
+  );
+
+  /* border radius */
+  --starasia-ui-pagination-border-radius: var(--starasia-ui-radii-base, 4px);
+
+  /* font size */
+  --starasia-ui-pagination-font-size-xs: var(--starasia-ui-fontSizes-sm, 12px);
+  --starasia-ui-pagination-font-size-sm: var(--starasia-ui-fontSizes-md, 14px);
+
+  /* font weight */
+  --starasia-ui-pagination-font-weight: var(
+    --starasia-ui-fontWeights-medium,
+    400
+  );
+
+  /* border widht */
+  --starasia-ui-pagination-border-width: var(--starasia-ui-border, 1px);
+}
+
+.starasia-pagination-container {
+  display: flex;
+  list-style-type: none;
+}
+
+.starasia-pagination-item {
+  padding: var(--starasia-ui-pagination-spacing-xs)
+    var(--starasia-ui-pagination-spacing-sm);
+  text-align: center;
+  margin: auto var(--starasia-ui-pagination-spacing-xs);
+  color: var(--starasia-ui-pagination-color-primary-gray);
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  border-radius: var(--starasia-ui-pagination-border-radius);
+  font-size: var(--starasia-ui-pagination-font-size-sm);
+  font-family: "Montserrat";
+  text-align: center;
+}
+
+.starasia-pagination-item.starasia-pagination-item-responsive {
+  margin: auto 0;
+  font-size: var(--starasia-ui-pagination-font-size-xs);
+  padding: var(--starasia-ui-pagination-spacing-xs)
+    var(--starasia-ui-pagination-spacing-sm);
+}
+
+.starasia-pagination-item.starasia-pagination-dots:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.starasia-pagination-item:hover {
+  background-color: var(--starasia-ui-pagination-color-quaternary-gray);
+  cursor: pointer;
+}
+
+.starasia-pagination-item.starasia-pagination-selected {
+  background-color: var(--starasia-ui-pagination-color-quinary-blue);
+  color: var(--starasia-ui-pagination-color-secondary-blue);
+  font-weight: var(--starasia-ui-pagination-font-weight);
+}
+
+.starasia-pagination-arrow::before {
+  position: relative;
+  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
+  content: "";
+  /* By using an em scale, the arrows will size with the font */
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-right: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-primary-gray);
+  border-top: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-primary-gray);
+}
+
+.starasia-pagination-arrow.starasia-pagination-left {
+  transform: rotate(-135deg) translateX(-25%);
+}
+
+.starasia-pagination-arrow.starasia-pagination-right {
+  transform: rotate(45deg);
+}
+
+.starasia-pagination-item.starasia-pagination-disabled {
+  pointer-events: none;
+}
+
+.starasia-pagination-item.starasia-pagination-disabled
+  .starasia-pagination-arrow::before {
+  border-right: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-tertiary-gray);
+  border-top: var(--starasia-ui-pagination-border-width) solid
+    var(--starasia-ui-pagination-color-tertiary-gray);
+}
+.starasia-pagination-item.starasia-pagination-disabled:hover {
+  background-color: transparent;
+  cursor: default;
+}
+`,Y="...",V=(m,c)=>{let w=c-m+1;return Array.from({length:w},(g,f)=>f+m)},Ia=({totalCount:m,siblingCount:c=1,currentPage:w})=>P.useMemo(()=>{const f=m;if(c+5>=f)return V(1,f);const S=Math.max(w-c,1),E=Math.min(w+c,f),u=S>2,y=E<f-2,p=1,x=f;if(!u&&y){let R=3+2*c;return[...V(1,R),Y,f]}if(u&&!y){let R=3+2*c,k=V(f-R+1,f);return[p,Y,...k]}if(u&&y){let R=V(S,E);return[p,Y,...R,Y,x]}},[m,c,w]),oa="starasia-pagination-styles";(m=>{if(!document.getElementById(oa)){const c=document.createElement("style");c.id=oa,c.textContent=m,document.head.appendChild(c)}})(Fa);const Wa=({onPageChange:m,totalCount:c,siblingCount:w=1,currentPage:g,size:f="md"})=>{const T=Ia({currentPage:g,totalCount:c,siblingCount:w});if(g===0||T.length<2)return null;const S=()=>{m(g+1)},E=()=>{m(g-1)};let u=T[T.length-1];return C.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[C.jsx("li",{className:`starasia-pagination-item ${g===1?"starasia-pagination-disabled":null} ${f==="sm"?"starasia-pagination-item-responsive":""}`,onClick:E,children:C.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),T.map((y,p)=>y===Y?C.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${f==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},p):C.jsx("li",{className:`starasia-pagination-item ${y===g?"starasia-pagination-selected":null} ${f==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>m(Number(y)),children:y},p)),C.jsx("li",{className:`starasia-pagination-item ${g===u?"starasia-pagination-disabled":null} ${f==="sm"?"starasia-pagination-item-responsive":""}`,onClick:S,children:C.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};j.Pagination=Wa,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export interface IPaginationProps {
+    totalCount: number;
+    siblingCount?: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    size?: "sm" | "md";
+}

package/dist/usePagination.d.ts

@@ -0,0 +1,8 @@
+export declare const DOTS = "...";
+interface IProps {
+    totalCount: number;
+    siblingCount?: number;
+    currentPage: number;
+}
+export declare const usePagination: ({ totalCount, siblingCount, currentPage, }: IProps) => (string | number)[] | undefined;
+export {};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@starasia/pagination",
+  "version": "1.0.0",
+  "description": "pagination component for starasia UI",
+  "author": "Prawito Hudoro",
+  "main": "dist/pagination.umd.js",
+  "module": "dist/pagination.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*.js",
+    "dist/*.d.ts",
+    "dist/*.map",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.16",
+    "@vitejs/plugin-react": "^4.2.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}