ekm-ui 0.4.69 → 0.4.71

package/dist/table-result-block.js

@@ -3,7 +3,7 @@ import './chunk-NF5KDPMG.js';
 import './chunk-YZ2YZSNQ.js';
 import './chunk-GVNUAH45.js';
 import './chunk-JAR3LP2K.js';
-import './chunk-EK5I26TX.js';
+import './chunk-WL2NTX3A.js';
 import './chunk-22RUXGYW.js';
 import './chunk-LQKVFBLU.js';
 import './chunk-HVNLAQA6.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.4.69",
+  "version": "0.4.71",
   "sideEffects": [
     "**/*.css"
   ],

package/src/pagination/pagination.tsx

@@ -101,143 +101,144 @@ export function Pagination({
               </svg>
             </button>
           </div>
-          <div id="rowsPerPageSection" className="hidden items-center space-x-3 md:flex">
-            <label
-              htmlFor="rows"
-              className="text-sm font-normal text-gray-500 dark:text-gray-400 mb-0"
-            >
-              Rows per page
-            </label>
-            <select
-              id="rows"
-              className="block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-              onChange={(e) => onChange(1, Number(e.target.value))}
-              value={pageSize}
-            >
-              <option value={10}>10</option>
-              <option value={25}>25</option>
-              <option value={50}>50</option>
-              <option value={100}>100</option>
-            </select>
-            <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
+          <div className="hidden items-center w-full justify-between md:flex">
+            <div id="showingSection" className="text-sm font-normal text-gray-500 dark:text-gray-400">
               {!loading && (
-                <>
-                  <span className="font-semibold text-gray-900 dark:text-white">
-                    Showing <>{total === 0 ? 0 : from}</> to <>{to}</>
-                  </span>{" "}
-                  of{" "}
-                  <span className="font-semibold text-gray-900 dark:text-white">
+                <span className="text-gray-500 dark:text-white">
+                    Showing <span className="text-gray-900 font-semibold">{`${total === 0 ? 0 : from} - ${to}`}</span>{" "}of{" "}
+                  <span className="text-gray-900 font-semibold">
                     {total}
                   </span>
-                </>
+                </span>
               )}
-            </span>
-          </div>
-          <ul className="hidden items-stretch -space-x-px md:inline-flex">
-            <li>
-              <button
-                id="btnPrevious"
-                disabled={current === 1}
-                className={clsx(
-                  current === 1 && "cursor-not-allowed",
-                  "ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-                )}
-                onClick={() => onChange(current - 1, pageSize)}
-              >
-                <span className="sr-only">Previous</span>
-                <svg
-                  className="h-5 w-5"
-                  aria-hidden="true"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
+            </div>
+            <ul className="hidden items-stretch -space-x-px md:inline-flex">
+              <li>
+                <button
+                  id="btnPrevious"
+                  disabled={current === 1}
+                  className={clsx(
+                    current === 1 && "cursor-not-allowed",
+                    "ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                  )}
+                  onClick={() => onChange(current - 1, pageSize)}
                 >
-                  <path
-                    fillRule="evenodd"
-                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-              </button>
-            </li>
-            {showJumpPrev && (
-              <>
-                <li>
+                  <span className="sr-only">Previous</span>
+                  <svg
+                    className="h-5 w-5"
+                    aria-hidden="true"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                </button>
+              </li>
+              {showJumpPrev && (
+                <>
+                  <li>
+                    <button
+                      id="btnPage1"
+                      className={clsx(
+                        current === 1 && "cursor-not-allowed",
+                        "flex items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                      )}
+                      onClick={() => onChange(1, pageSize)}
+                    >
+                      1
+                    </button>
+                  </li>
+                  <li className="flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
+                    ...
+                  </li>
+                </>
+              )}
+              {pages.map((page) => (
+                <li key={page}>
                   <button
-                    id="btnPage1"
+                    id={`btnPage${page}`}
+                    onClick={() => onChange(page, pageSize)}
                     className={clsx(
-                      current === 1 && "cursor-not-allowed",
-                      "flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                      "hidden items-center justify-center border px-[8px] lg:px-3 py-2 text-sm leading-tight",
+                      page === current
+                        ? "md:flex z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white st-pageCurrent"
+                        : "lg:flex border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                     )}
-                    onClick={() => onChange(1, pageSize)}
                   >
-                    1
+                    {page}
                   </button>
                 </li>
-                <li className="flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
-                  ...
-                </li>
-              </>
-            )}
-            {pages.map((page) => (
-              <li key={page}>
+              ))}
+              {showJumpNext && (
+                <>
+                  <li className="flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
+                    ...
+                  </li>
+                  <li>
+                    <button
+                      id="btnLast"
+                      className="flex items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                      onClick={() => onChange(totalPages, pageSize)}
+                    >
+                      {totalPages}
+                    </button>
+                  </li>
+                </>
+              )}
+              <li>
                 <button
-                  id={`btnPage${page}`}
-                  onClick={() => onChange(page, pageSize)}
+                  id="btnNext"
+                  disabled={current === totalPages}
+                  onClick={() => onChange(current + 1, pageSize)}
                   className={clsx(
-                    "flex items-center justify-center border px-3 py-2 text-sm leading-tight",
-                    page === current
-                      ? "z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white st-pageCurrent"
-                      : "border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                    current === totalPages && "cursor-not-allowed",
+                    "flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                   )}
                 >
-                  {page}
+                  <span className="sr-only">Next</span>
+                  <svg
+                    className="h-5 w-5"
+                    aria-hidden="true"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
                 </button>
               </li>
-            ))}
-            {showJumpNext && (
-              <>
-                <li className="flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
-                  ...
-                </li>
-                <li>
-                  <button
-                    id="btnLast"
-                    className="flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-                    onClick={() => onChange(totalPages, pageSize)}
-                  >
-                    {totalPages}
-                  </button>
-                </li>
-              </>
-            )}
-            <li>
-              <button
-                id="btnNext"
-                disabled={current === totalPages}
-                onClick={() => onChange(current + 1, pageSize)}
-                className={clsx(
-                  current === totalPages && "cursor-not-allowed",
-                  "flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-                )}
+            </ul>
+            <div id="rowsPerPageSection" className="flex items-center space-x-3">
+              <label
+                htmlFor="rows"
+                className="text-sm font-normal text-gray-500 dark:text-gray-400 mb-0"
               >
-                <span className="sr-only">Next</span>
-                <svg
-                  className="h-5 w-5"
-                  aria-hidden="true"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-              </button>
-            </li>
-          </ul>
+                Show
+              </label>
+              <select
+                id="rows"
+                className="block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                onChange={(e) => onChange(1, Number(e.target.value))}
+                value={pageSize}
+              >
+                <option value={10}>10</option>
+                <option value={25}>25</option>
+                <option value={50}>50</option>
+                <option value={100}>100</option>
+              </select>
+              
+            </div>
+          
+          </div>
         </nav>
       </div>
     </div>

package/dist/chunk-EK5I26TX.js

@@ -1,9 +0,0 @@
-import s from 'clsx';
-import { useMemo } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-function b(t,d=0){return [...Array(t).keys()].map(r=>r+d)}function k({pageSize:t,total:d,current:r,onChange:l,loading:h}){let y=Math.min((r-1)*t+1,d),p=Math.min(y+t-1,d),a=Math.ceil(d/t),v=useMemo(()=>a>5&&r>=4,[a,r]),x=useMemo(()=>a>5&&r<a-3,[a,r]),n=[];return a<=5?n=b(a,1):x?n=b(5,Math.max(r-2,1)):n=b(5,a-4),jsx("div",{id:"paginationControl",className:"w-full",children:jsx("div",{className:"relative overflow-hidden rounded-b-lg bg-white  dark:bg-gray-800",children:jsxs("nav",{className:" flex flex-wrap items-start justify-between gap-x-4 gap-y-2 md:items-center","aria-label":"Table navigation",children:[jsxs("div",{className:"flex w-full justify-between md:hidden",children:[jsxs("button",{id:"btnPreviousM",disabled:r===1,className:s(r===1&&"cursor-not-allowed","ml-0 flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),onClick:()=>l(r-1,t),children:[jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"})}),jsx("span",{className:"leading-none",children:"Previous"})]}),jsxs("button",{id:"btnNextM",disabled:r===a,className:s(r===a&&"cursor-not-allowed","flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),onClick:()=>l(r+1,t),children:[jsx("span",{children:"Next"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})]})]}),jsxs("div",{id:"rowsPerPageSection",className:"hidden items-center space-x-3 md:flex",children:[jsx("label",{htmlFor:"rows",className:"text-sm font-normal text-gray-500 dark:text-gray-400 mb-0",children:"Rows per page"}),jsxs("select",{id:"rows",className:"block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",onChange:i=>l(1,Number(i.target.value)),value:t,children:[jsx("option",{value:10,children:"10"}),jsx("option",{value:25,children:"25"}),jsx("option",{value:50,children:"50"}),jsx("option",{value:100,children:"100"})]}),jsx("span",{className:"text-sm font-normal text-gray-500 dark:text-gray-400",children:!h&&jsxs(Fragment,{children:[jsxs("span",{className:"font-semibold text-gray-900 dark:text-white",children:["Showing ",jsx(Fragment,{children:d===0?0:y})," to ",jsx(Fragment,{children:p})]})," ","of"," ",jsx("span",{className:"font-semibold text-gray-900 dark:text-white",children:d})]})})]}),jsxs("ul",{className:"hidden items-stretch -space-x-px md:inline-flex",children:[jsx("li",{children:jsxs("button",{id:"btnPrevious",disabled:r===1,className:s(r===1&&"cursor-not-allowed","ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),onClick:()=>l(r-1,t),children:[jsx("span",{className:"sr-only",children:"Previous"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"})})]})}),v&&jsxs(Fragment,{children:[jsx("li",{children:jsx("button",{id:"btnPage1",className:s(r===1&&"cursor-not-allowed","flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),onClick:()=>l(1,t),children:"1"})}),jsx("li",{className:"flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",children:"..."})]}),n.map(i=>jsx("li",{children:jsx("button",{id:`btnPage${i}`,onClick:()=>l(i,t),className:s("flex items-center justify-center border px-3 py-2 text-sm leading-tight",i===r?"z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white st-pageCurrent":"border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),children:i})},i)),x&&jsxs(Fragment,{children:[jsx("li",{className:"flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",children:"..."}),jsx("li",{children:jsx("button",{id:"btnLast",className:"flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",onClick:()=>l(a,t),children:a})})]}),jsx("li",{children:jsxs("button",{id:"btnNext",disabled:r===a,onClick:()=>l(r+1,t),className:s(r===a&&"cursor-not-allowed","flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"),children:[jsx("span",{className:"sr-only",children:"Next"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})]})})]})]})})})}
-
-export { k as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-EK5I26TX.js.map

package/dist/chunk-EK5I26TX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pagination/pagination.tsx"],"names":["clsx","useMemo","Fragment","jsx","jsxs","range","size","startAt","i","Pagination","pageSize","total","current","onChange","loading","from","to","totalPages","showJumpPrev","showJumpNext","pages","e","page"],"mappings":"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","sourcesContent":["import clsx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport type PaginationProps = {\n  pageSize: number;\n  total: number;\n  current: number;\n  onChange: (page: number, pageSize: number) => void;\n  loading?: boolean;\n};\n\nfunction range(size: number, startAt = 0): number[] {\n  return [...Array(size).keys()].map((i) => i + startAt);\n}\n\nexport function Pagination({\n  pageSize,\n  total,\n  current,\n  onChange,\n  loading,\n}: PaginationProps) {\n  // Calculate the values that are displayed\n  const from = Math.min((current - 1) * pageSize + 1, total);\n  const to = Math.min(from + pageSize - 1, total);\n  const totalPages = Math.ceil(total / pageSize);\n\n  const showJumpPrev = useMemo(() => {\n    return totalPages > 5 && current >= 4;\n  }, [totalPages, current]);\n\n  const showJumpNext = useMemo(() => {\n    return totalPages > 5 && current < totalPages - 3;\n  }, [totalPages, current]);\n\n  let pages: number[] = [];\n\n  if (totalPages <= 5) {\n    pages = range(totalPages, 1);\n  } else if (showJumpNext) {\n    pages = range(5, Math.max(current - 2, 1));\n  } else {\n    pages = range(5, totalPages - 4);\n  }\n\n  return (\n    <div id=\"paginationControl\" className=\"w-full\">\n      <div className=\"relative overflow-hidden rounded-b-lg bg-white  dark:bg-gray-800\">\n        <nav\n          className=\" flex flex-wrap items-start justify-between gap-x-4 gap-y-2 md:items-center\"\n          aria-label=\"Table navigation\"\n        >\n          <div className=\"flex w-full justify-between md:hidden\">\n            <button\n              id=\"btnPreviousM\"\n              disabled={current === 1}\n              className={clsx(\n                current === 1 && \"cursor-not-allowed\",\n                \"ml-0 flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n              )}\n              onClick={() => onChange(current - 1, pageSize)}\n            >\n              <svg\n                className=\"h-5 w-5\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\"\n                ></path>\n              </svg>\n              <span className=\"leading-none\">Previous</span>\n            </button>\n\n            <button\n              id=\"btnNextM\"\n              disabled={current === totalPages}\n              className={clsx(\n                current === totalPages && \"cursor-not-allowed\",\n                \"flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n              )}\n              onClick={() => onChange(current + 1, pageSize)}\n            >\n              <span>Next</span>\n              <svg\n                className=\"h-5 w-5\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                  clipRule=\"evenodd\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n          <div id=\"rowsPerPageSection\" className=\"hidden items-center space-x-3 md:flex\">\n            <label\n              htmlFor=\"rows\"\n              className=\"text-sm font-normal text-gray-500 dark:text-gray-400 mb-0\"\n            >\n              Rows per page\n            </label>\n            <select\n              id=\"rows\"\n              className=\"block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500\"\n              onChange={(e) => onChange(1, Number(e.target.value))}\n              value={pageSize}\n            >\n              <option value={10}>10</option>\n              <option value={25}>25</option>\n              <option value={50}>50</option>\n              <option value={100}>100</option>\n            </select>\n            <span className=\"text-sm font-normal text-gray-500 dark:text-gray-400\">\n              {!loading && (\n                <>\n                  <span className=\"font-semibold text-gray-900 dark:text-white\">\n                    Showing <>{total === 0 ? 0 : from}</> to <>{to}</>\n                  </span>{\" \"}\n                  of{\" \"}\n                  <span className=\"font-semibold text-gray-900 dark:text-white\">\n                    {total}\n                  </span>\n                </>\n              )}\n            </span>\n          </div>\n          <ul className=\"hidden items-stretch -space-x-px md:inline-flex\">\n            <li>\n              <button\n                id=\"btnPrevious\"\n                disabled={current === 1}\n                className={clsx(\n                  current === 1 && \"cursor-not-allowed\",\n                  \"ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-3 py-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n                )}\n                onClick={() => onChange(current - 1, pageSize)}\n              >\n                <span className=\"sr-only\">Previous</span>\n                <svg\n                  className=\"h-5 w-5\"\n                  aria-hidden=\"true\"\n                  fill=\"currentColor\"\n                  viewBox=\"0 0 20 20\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                    clipRule=\"evenodd\"\n                  ></path>\n                </svg>\n              </button>\n            </li>\n            {showJumpPrev && (\n              <>\n                <li>\n                  <button\n                    id=\"btnPage1\"\n                    className={clsx(\n                      current === 1 && \"cursor-not-allowed\",\n                      \"flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n                    )}\n                    onClick={() => onChange(1, pageSize)}\n                  >\n                    1\n                  </button>\n                </li>\n                <li className=\"flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\">\n                  ...\n                </li>\n              </>\n            )}\n            {pages.map((page) => (\n              <li key={page}>\n                <button\n                  id={`btnPage${page}`}\n                  onClick={() => onChange(page, pageSize)}\n                  className={clsx(\n                    \"flex items-center justify-center border px-3 py-2 text-sm leading-tight\",\n                    page === current\n                      ? \"z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white st-pageCurrent\"\n                      : \"border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n                  )}\n                >\n                  {page}\n                </button>\n              </li>\n            ))}\n            {showJumpNext && (\n              <>\n                <li className=\"flex cursor-default items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\">\n                  ...\n                </li>\n                <li>\n                  <button\n                    id=\"btnLast\"\n                    className=\"flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n                    onClick={() => onChange(totalPages, pageSize)}\n                  >\n                    {totalPages}\n                  </button>\n                </li>\n              </>\n            )}\n            <li>\n              <button\n                id=\"btnNext\"\n                disabled={current === totalPages}\n                onClick={() => onChange(current + 1, pageSize)}\n                className={clsx(\n                  current === totalPages && \"cursor-not-allowed\",\n                  \"flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-3 py-1.5 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white\"\n                )}\n              >\n                <span className=\"sr-only\">Next</span>\n                <svg\n                  className=\"h-5 w-5\"\n                  aria-hidden=\"true\"\n                  fill=\"currentColor\"\n                  viewBox=\"0 0 20 20\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                    clipRule=\"evenodd\"\n                  ></path>\n                </svg>\n              </button>\n            </li>\n          </ul>\n        </nav>\n      </div>\n    </div>\n  );\n}\n"]}