shad-m 1.0.0

package/dist/common/interactive/otp-dialog/utils.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const maskPhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) return "";
+  const cleanPhone = phoneNumber.replace(/[^\d]/g, "");
+  if (cleanPhone.length >= 10) {
+    return cleanPhone.replace(/(\d{4})(\d+)(\d{3})/, "$1***$3");
+  } else if (cleanPhone.length >= 7) {
+    return cleanPhone.replace(/(\d{3})(\d+)(\d{2})/, "$1***$3");
+  }
+  return phoneNumber;
+};
+const normalizeErrorMessage = (err) => {
+  const errorMessage = err?.message || err?.meta?.message || "";
+  if (errorMessage.toLowerCase().includes("invalid") || errorMessage.toLowerCase().includes("wrong") || errorMessage.toLowerCase().includes("expired")) {
+    return "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+  }
+  return errorMessage || "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra";
+};
+
+exports.maskPhoneNumber = maskPhoneNumber;
+exports.normalizeErrorMessage = normalizeErrorMessage;
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/common/interactive/otp-dialog/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/utils.ts"],"names":[],"mappings":";;AASO,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAiC;AAC/D,EAAA,IAAI,CAAC,aAAa,OAAO,EAAA;AAGzB,EAAA,MAAM,UAAA,GAAa,WAAA,CAAY,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEnD,EAAA,IAAI,UAAA,CAAW,UAAU,EAAA,EAAI;AAE3B,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AAEjC,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,WAAA;AACT;AAQO,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAAqB;AACzD,EAAA,MAAM,YAAA,GAAe,GAAA,EAAK,OAAA,IAAW,GAAA,EAAK,MAAM,OAAA,IAAW,EAAA;AAG3D,EAAA,IACE,aAAa,WAAA,EAAY,CAAE,QAAA,CAAS,SAAS,KAC7C,YAAA,CAAa,WAAA,EAAY,CAAE,QAAA,CAAS,OAAO,CAAA,IAC3C,YAAA,CAAa,aAAY,CAAE,QAAA,CAAS,SAAS,CAAA,EAC7C;AACA,IAAA,OAAO,6DAAA;AAAA,EACT;AAGA,EAAA,OAAO,YAAA,IAAgB,uCAAA;AACzB","file":"utils.js","sourcesContent":["/**\n * OTP Dialog Utilities\n */\n\n/**\n * Mask phone number for display\n * @param phoneNumber - Phone number to mask\n * @returns Masked phone number (e.g., \"0987***222\")\n */\nexport const maskPhoneNumber = (phoneNumber?: string): string => {\n  if (!phoneNumber) return '';\n\n  // Handle different phone number formats\n  const cleanPhone = phoneNumber.replace(/[^\\d]/g, '');\n\n  if (cleanPhone.length >= 10) {\n    // For 10+ digit numbers: show first 4 and last 3 digits\n    return cleanPhone.replace(/(\\d{4})(\\d+)(\\d{3})/, '$1***$3');\n  } else if (cleanPhone.length >= 7) {\n    // For 7-9 digit numbers: show first 3 and last 2 digits\n    return cleanPhone.replace(/(\\d{3})(\\d+)(\\d{2})/, '$1***$3');\n  }\n\n  return phoneNumber; // Return as-is if too short\n};\n\n/**\n * Normalize error messages for better UX\n * Converts various error messages to user-friendly Vietnamese\n * @param err - Error object\n * @returns Normalized error message\n */\nexport const normalizeErrorMessage = (err: any): string => {\n  const errorMessage = err?.message || err?.meta?.message || '';\n\n  // Check for OTP validation errors\n  if (\n    errorMessage.toLowerCase().includes('invalid') ||\n    errorMessage.toLowerCase().includes('wrong') ||\n    errorMessage.toLowerCase().includes('expired')\n  ) {\n    return 'Mã OTP không đúng hoặc hết hạn';\n  }\n\n  // Default messages\n  return errorMessage || 'Đã có lỗi xảy ra';\n};\n"]}

package/dist/common/interactive/otp-dialog/utils.mjs

@@ -0,0 +1,21 @@
+const maskPhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) return "";
+  const cleanPhone = phoneNumber.replace(/[^\d]/g, "");
+  if (cleanPhone.length >= 10) {
+    return cleanPhone.replace(/(\d{4})(\d+)(\d{3})/, "$1***$3");
+  } else if (cleanPhone.length >= 7) {
+    return cleanPhone.replace(/(\d{3})(\d+)(\d{2})/, "$1***$3");
+  }
+  return phoneNumber;
+};
+const normalizeErrorMessage = (err) => {
+  const errorMessage = err?.message || err?.meta?.message || "";
+  if (errorMessage.toLowerCase().includes("invalid") || errorMessage.toLowerCase().includes("wrong") || errorMessage.toLowerCase().includes("expired")) {
+    return "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+  }
+  return errorMessage || "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra";
+};
+
+export { maskPhoneNumber, normalizeErrorMessage };
+//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.mjs.map

package/dist/common/interactive/otp-dialog/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/utils.ts"],"names":[],"mappings":"AASO,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAiC;AAC/D,EAAA,IAAI,CAAC,aAAa,OAAO,EAAA;AAGzB,EAAA,MAAM,UAAA,GAAa,WAAA,CAAY,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEnD,EAAA,IAAI,UAAA,CAAW,UAAU,EAAA,EAAI;AAE3B,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AAEjC,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,WAAA;AACT;AAQO,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAAqB;AACzD,EAAA,MAAM,YAAA,GAAe,GAAA,EAAK,OAAA,IAAW,GAAA,EAAK,MAAM,OAAA,IAAW,EAAA;AAG3D,EAAA,IACE,aAAa,WAAA,EAAY,CAAE,QAAA,CAAS,SAAS,KAC7C,YAAA,CAAa,WAAA,EAAY,CAAE,QAAA,CAAS,OAAO,CAAA,IAC3C,YAAA,CAAa,aAAY,CAAE,QAAA,CAAS,SAAS,CAAA,EAC7C;AACA,IAAA,OAAO,6DAAA;AAAA,EACT;AAGA,EAAA,OAAO,YAAA,IAAgB,uCAAA;AACzB","file":"utils.mjs","sourcesContent":["/**\n * OTP Dialog Utilities\n */\n\n/**\n * Mask phone number for display\n * @param phoneNumber - Phone number to mask\n * @returns Masked phone number (e.g., \"0987***222\")\n */\nexport const maskPhoneNumber = (phoneNumber?: string): string => {\n  if (!phoneNumber) return '';\n\n  // Handle different phone number formats\n  const cleanPhone = phoneNumber.replace(/[^\\d]/g, '');\n\n  if (cleanPhone.length >= 10) {\n    // For 10+ digit numbers: show first 4 and last 3 digits\n    return cleanPhone.replace(/(\\d{4})(\\d+)(\\d{3})/, '$1***$3');\n  } else if (cleanPhone.length >= 7) {\n    // For 7-9 digit numbers: show first 3 and last 2 digits\n    return cleanPhone.replace(/(\\d{3})(\\d+)(\\d{2})/, '$1***$3');\n  }\n\n  return phoneNumber; // Return as-is if too short\n};\n\n/**\n * Normalize error messages for better UX\n * Converts various error messages to user-friendly Vietnamese\n * @param err - Error object\n * @returns Normalized error message\n */\nexport const normalizeErrorMessage = (err: any): string => {\n  const errorMessage = err?.message || err?.meta?.message || '';\n\n  // Check for OTP validation errors\n  if (\n    errorMessage.toLowerCase().includes('invalid') ||\n    errorMessage.toLowerCase().includes('wrong') ||\n    errorMessage.toLowerCase().includes('expired')\n  ) {\n    return 'Mã OTP không đúng hoặc hết hạn';\n  }\n\n  // Default messages\n  return errorMessage || 'Đã có lỗi xảy ra';\n};\n"]}

package/dist/common/interactive/pagination/PaginationSkeleton.d.ts

@@ -0,0 +1,6 @@
+interface PaginationSkeletonProps {
+    className?: string;
+}
+export declare function PaginationSkeleton({ className }: PaginationSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PaginationSkeleton.d.ts.map

package/dist/common/interactive/pagination/PaginationSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/common/interactive/pagination/PaginationSkeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAsDxE"}

package/dist/common/interactive/pagination/PaginationSkeleton.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var skeleton = require('../../../components/skeleton');
+var utils = require('../../../lib/utils');
+
+function PaginationSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-48" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 lg:hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-12" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-12" })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.PaginationSkeleton = PaginationSkeleton;
+//# sourceMappingURL=PaginationSkeleton.js.map
+//# sourceMappingURL=PaginationSkeleton.js.map

package/dist/common/interactive/pagination/PaginationSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/pagination/PaginationSkeleton.tsx"],"names":["jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;AAOO,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAU,EAA4B;AACzE,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,oEAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,iBAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAEb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,SAAA,EAAU,CAAA;AAAA,0BAG9BH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,WAAA,EAChC,CAAA;AAAA,0BAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,4BAC9BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,WAAA,EACjC,CAAA;AAAA,0BAGAD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,SAAA,EAChC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA,GACF;AAEJ","file":"PaginationSkeleton.js","sourcesContent":["import { Skeleton } from '../../../components/skeleton';\nimport { cn } from '../../../lib/utils';\n\ninterface PaginationSkeletonProps {\n  className?: string;\n}\n\nexport function PaginationSkeleton({ className }: PaginationSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between',\n        className,\n      )}\n    >\n      {/* Info text skeleton - hidden on mobile, shown on desktop */}\n      <div className=\"hidden lg:block\">\n        <Skeleton className=\"h-5 w-48\" />\n      </div>\n\n      {/* Pagination controls skeleton */}\n      <div className=\"flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3\">\n        {/* Previous button */}\n        <Skeleton className=\"h-9 w-9\" />\n\n        {/* Mobile: 3 page buttons + ellipsis */}\n        <div className=\"flex items-center gap-1 sm:gap-2 lg:hidden\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n        </div>\n\n        {/* Desktop: More page buttons */}\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n          <Skeleton className=\"h-9 w-10\" />\n        </div>\n\n        {/* Next button */}\n        <Skeleton className=\"h-9 w-9\" />\n      </div>\n\n      {/* Mobile: Page size selector skeleton */}\n      <div className=\"flex items-center justify-end gap-1 lg:hidden\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n\n      {/* Desktop: Page size selector skeleton */}\n      <div className=\"hidden shrink-0 items-center gap-1 lg:flex\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/common/interactive/pagination/PaginationSkeleton.mjs

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../components/skeleton';
+import { cn } from '../../../lib/utils';
+
+function PaginationSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-48" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2 lg:hidden", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-12" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-12" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PaginationSkeleton };
+//# sourceMappingURL=PaginationSkeleton.mjs.map
+//# sourceMappingURL=PaginationSkeleton.mjs.map

package/dist/common/interactive/pagination/PaginationSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/pagination/PaginationSkeleton.tsx"],"names":[],"mappings":";;;;AAOO,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAU,EAA4B;AACzE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oEAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,iBAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,SAAA,EAAU,CAAA;AAAA,0BAG9B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,WAAA,EAChC,CAAA;AAAA,0BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,4BAC9B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,WAAA,EACjC,CAAA;AAAA,0BAGA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,SAAA,EAChC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA,GACF;AAEJ","file":"PaginationSkeleton.mjs","sourcesContent":["import { Skeleton } from '../../../components/skeleton';\nimport { cn } from '../../../lib/utils';\n\ninterface PaginationSkeletonProps {\n  className?: string;\n}\n\nexport function PaginationSkeleton({ className }: PaginationSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between',\n        className,\n      )}\n    >\n      {/* Info text skeleton - hidden on mobile, shown on desktop */}\n      <div className=\"hidden lg:block\">\n        <Skeleton className=\"h-5 w-48\" />\n      </div>\n\n      {/* Pagination controls skeleton */}\n      <div className=\"flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3\">\n        {/* Previous button */}\n        <Skeleton className=\"h-9 w-9\" />\n\n        {/* Mobile: 3 page buttons + ellipsis */}\n        <div className=\"flex items-center gap-1 sm:gap-2 lg:hidden\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n        </div>\n\n        {/* Desktop: More page buttons */}\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n          <Skeleton className=\"h-9 w-10\" />\n        </div>\n\n        {/* Next button */}\n        <Skeleton className=\"h-9 w-9\" />\n      </div>\n\n      {/* Mobile: Page size selector skeleton */}\n      <div className=\"flex items-center justify-end gap-1 lg:hidden\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n\n      {/* Desktop: Page size selector skeleton */}\n      <div className=\"hidden shrink-0 items-center gap-1 lg:flex\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/common/interactive/pagination/index.d.ts

@@ -0,0 +1,14 @@
+export interface PaginationConfig {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+    loading?: boolean;
+    className?: string;
+    showInfo?: boolean;
+    showPageSizeSelector?: boolean;
+}
+export declare const Pagination: ({ current, pageSize, total, onChange, loading, className, showInfo, showPageSizeSelector, }: PaginationConfig) => import("react/jsx-runtime").JSX.Element;
+export { DOTS, usePagination } from './usePagination';
+export { PaginationSkeleton } from './PaginationSkeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/common/interactive/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/interactive/pagination/index.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,UAAU,GAAI,6FASxB,gBAAgB,4CAsPlB,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/common/interactive/pagination/index.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var button = require('../../../components/button');
+var pagination = require('../../../components/pagination');
+var utils = require('../../../lib/utils');
+var select = require('../select');
+var usePagination = require('./usePagination');
+var PaginationSkeleton = require('./PaginationSkeleton');
+
+const Pagination = ({
+  current = 1,
+  pageSize = 20,
+  total = 0,
+  onChange,
+  loading,
+  className,
+  showInfo = true,
+  showPageSizeSelector = true
+}) => {
+  const [paginationOptions, setPaginationOptions] = react.useState([
+    { value: "10", name: "10" },
+    { value: "20", name: "20" },
+    { value: "30", name: "30" },
+    { value: "50", name: "50" },
+    { value: "100", name: "100" }
+  ]);
+  react.useEffect(() => {
+    setPaginationOptions((prev) => {
+      const options = [...prev];
+      const pageSizeStr = String(pageSize);
+      const pageSizeExists = options.some((option) => option.value === pageSizeStr);
+      if (!pageSizeExists && pageSize) {
+        options.unshift({ value: pageSizeStr, name: pageSizeStr });
+      }
+      options.sort((a, b) => Number(a.value) - Number(b.value));
+      return options;
+    });
+  }, [pageSize]);
+  const totalPages = Math.ceil(total / pageSize);
+  const onPageChange = (page) => {
+    if (typeof page === "number" && page >= 1 && page <= totalPages && page !== current) {
+      onChange?.(page, pageSize);
+    }
+  };
+  const onNext = () => {
+    if (current < totalPages) {
+      onPageChange(current + 1);
+    }
+  };
+  const onPrevious = () => {
+    if (current > 1) {
+      onPageChange(current - 1);
+    }
+  };
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+  };
+  const startIndex = (current - 1) * pageSize + 1;
+  const endIndex = Math.min(current * pageSize, total);
+  const paginationRange = usePagination.usePagination({
+    current,
+    total,
+    pageSize,
+    siblingCount: 1
+    // Bạn có thể tùy chỉnh số trang hiển thị bên cạnh trang hiện tại
+  });
+  const mobilePaginationRange = react.useMemo(() => {
+    if (totalPages <= 3) {
+      return range(1, totalPages);
+    }
+    return [1, 2, 3, usePagination.DOTS];
+  }, [totalPages]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(PaginationSkeleton.PaginationSkeleton, { className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        showInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-t14m text-muted-foreground hidden text-nowrap lg:block", children: total > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "Hi\u1EC3n th\u1ECB ",
+          startIndex,
+          " - ",
+          endIndex,
+          " trong t\u1ED5ng s\u1ED1 ",
+          total
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Hi\u1EC3n th\u1ECB 0 - 0 trong t\u1ED5ng s\u1ED1 0" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(pagination.Pagination, { className: "w-full justify-center lg:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(pagination.PaginationContent, { className: "gap-1 sm:gap-2 lg:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "px-2",
+              onClick: (e) => {
+                e.preventDefault();
+                onPrevious();
+              },
+              disabled: current <= 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "text-ink-400s !size-4 sm:!size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "contents lg:hidden", children: mobilePaginationRange.map((pageNumber, index) => {
+            if (pageNumber === usePagination.DOTS) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                pagination.PaginationItem,
+                {
+                  className: "text-t14m text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationEllipsis, {})
+                },
+                `dots-mobile-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationItem, { className: "text-t14m text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size: "sm",
+                variant: pageNumber === current ? "soft-info" : "ghost",
+                className: utils.cn("text-t14m !min-w-[40px] border-none"),
+                onClick: (e) => {
+                  e.preventDefault();
+                  onPageChange(pageNumber);
+                },
+                loading: pageNumber === current ? loading : false,
+                children: !(loading && pageNumber === current) && pageNumber
+              }
+            ) }, pageNumber);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:contents", children: paginationRange.map((pageNumber, index) => {
+            if (pageNumber === usePagination.DOTS) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                pagination.PaginationItem,
+                {
+                  className: "text-t14m text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationEllipsis, {})
+                },
+                `dots-desktop-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationItem, { className: "text-t14m text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size: "sm",
+                variant: pageNumber === current ? "soft-info" : "ghost",
+                className: utils.cn("text-t14m !min-w-[40px] border-none"),
+                onClick: (e) => {
+                  e.preventDefault();
+                  onPageChange(pageNumber);
+                },
+                loading: pageNumber === current ? loading : false,
+                children: !(loading && pageNumber === current) && pageNumber
+              }
+            ) }, `desktop-${pageNumber}`);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "px-2",
+              onClick: (e) => {
+                e.preventDefault();
+                onNext();
+              },
+              disabled: current >= totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "text-ink-400s !size-4 sm:!size-6" })
+            }
+          )
+        ] }) }),
+        showPageSizeSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-t14m text-nowrap", children: "S\u1ED1 m\u1EE5c m\u1ED7i trang:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            select.Select,
+            {
+              value: [{ value: pageSize.toString(), name: pageSize.toString() }],
+              onValueChange: (values) => {
+                values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? "0", 10));
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isCustomMode: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-500", children: pageSize }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-blue-500" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectContentAutoLayout, { options: paginationOptions }) })
+              ]
+            }
+          )
+        ] }),
+        showPageSizeSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-t14m text-nowrap", children: "S\u1ED1 m\u1EE5c m\u1ED7i trang:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            select.Select,
+            {
+              value: [{ value: pageSize.toString(), name: pageSize.toString() }],
+              onValueChange: (values) => {
+                values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? "0", 10));
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isCustomMode: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-500", children: pageSize }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-blue-500" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { align: "end", side: "bottom", className: "ml-0 min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectContentAutoLayout, { options: paginationOptions }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+Object.defineProperty(exports, "DOTS", {
+  enumerable: true,
+  get: function () { return usePagination.DOTS; }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function () { return usePagination.usePagination; }
+});
+Object.defineProperty(exports, "PaginationSkeleton", {
+  enumerable: true,
+  get: function () { return PaginationSkeleton.PaginationSkeleton; }
+});
+exports.Pagination = Pagination;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/common/interactive/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/pagination/index.tsx"],"names":["useState","useEffect","usePagination","useMemo","DOTS","jsx","PaginationSkeleton","jsxs","cn","Fragment","PaginationContainer","PaginationContent","Button","ChevronLeftIcon","PaginationItem","PaginationEllipsis","ChevronRight","Select","SelectTrigger","ChevronDown","SelectBody","SelectContentAutoLayout"],"mappings":"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","file":"index.js","sourcesContent":["import { ChevronDown, ChevronLeftIcon, ChevronRight } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Button } from '../../../components/button';\nimport {\n  Pagination as PaginationContainer,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from '../../../components/pagination';\nimport { cn } from '../../../lib/utils';\nimport { Option, Select, SelectBody, SelectContentAutoLayout, SelectTrigger } from '../select';\nimport { DOTS, usePagination } from './usePagination';\nimport { PaginationSkeleton } from './PaginationSkeleton';\n\nexport interface PaginationConfig {\n  current?: number;\n  pageSize?: number;\n  total?: number;\n  onChange?: (page: number, pageSize: number) => void;\n  loading?: boolean;\n  className?: string;\n  showInfo?: boolean; // Option to show/hide \"Hiển thị 1 - 20 trong tổng số 177\"\n  showPageSizeSelector?: boolean; // Option to show/hide page size selector\n}\n\nexport const Pagination = ({\n  current = 1,\n  pageSize = 20,\n  total = 0,\n  onChange,\n  loading,\n  className,\n  showInfo = true,\n  showPageSizeSelector = true,\n}: PaginationConfig) => {\n  const [paginationOptions, setPaginationOptions] = useState<Option[]>([\n    { value: '10', name: '10' },\n    { value: '20', name: '20' },\n    { value: '30', name: '30' },\n    { value: '50', name: '50' },\n    { value: '100', name: '100' },\n  ]);\n\n  useEffect(() => {\n    setPaginationOptions((prev: Option[]) => {\n      const options: Option[] = [...prev];\n\n      // Convert pageSize to string for comparison\n      const pageSizeStr = String(pageSize);\n\n      // Check if current pageSize exists in options\n      const pageSizeExists = options.some((option) => option.value === pageSizeStr);\n\n      // If pageSize doesn't exist in options, add it at the beginning\n      if (!pageSizeExists && pageSize) {\n        options.unshift({ value: pageSizeStr, name: pageSizeStr });\n      }\n\n      options.sort((a, b) => Number(a.value) - Number(b.value));\n\n      return options;\n    });\n  }, [pageSize]);\n\n  const totalPages = Math.ceil(total / pageSize);\n\n  const onPageChange = (page: number | string) => {\n    // Đảm bảo page là một số và nằm trong giới hạn cho phép\n    if (typeof page === 'number' && page >= 1 && page <= totalPages && page !== current) {\n      onChange?.(page, pageSize);\n    }\n  };\n\n  const onNext = () => {\n    if (current < totalPages) {\n      onPageChange(current + 1);\n    }\n  };\n\n  const onPrevious = () => {\n    if (current > 1) {\n      onPageChange(current - 1);\n    }\n  };\n\n  // Helper function to create range\n  const range = (start: number, end: number) => {\n    const length = end - start + 1;\n    return Array.from({ length }, (_, idx) => idx + start);\n  };\n\n  // Calculate display range\n  const startIndex = (current - 1) * pageSize + 1;\n  const endIndex = Math.min(current * pageSize, total);\n\n  const paginationRange = usePagination({\n    current: current,\n    total,\n    pageSize,\n    siblingCount: 1, // Bạn có thể tùy chỉnh số trang hiển thị bên cạnh trang hiện tại\n  });\n\n  // Mobile pagination range: only show first 3 pages + ...\n  const mobilePaginationRange = useMemo(() => {\n    if (totalPages <= 3) {\n      return range(1, totalPages);\n    }\n    return [1, 2, 3, DOTS];\n  }, [totalPages]);\n\n  // Show skeleton when loading\n  if (loading) {\n    return <PaginationSkeleton className={className} />;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between',\n        className,\n      )}\n    >\n      {/* Info text - hidden on mobile, shown on desktop */}\n      {showInfo && (\n        <div className=\"text-t14m text-muted-foreground hidden text-nowrap lg:block\">\n          {total > 0 ? (\n            <>\n              Hiển thị {startIndex} - {endIndex} trong tổng số {total}\n            </>\n          ) : (\n            <>Hiển thị 0 - 0 trong tổng số 0</>\n          )}\n        </div>\n      )}\n\n      {/* Pagination controls */}\n      <PaginationContainer className=\"w-full justify-center lg:flex-1\">\n        <PaginationContent className=\"gap-1 sm:gap-2 lg:gap-3\">\n          {/* Nút Previous */}\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"px-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              onPrevious();\n            }}\n            disabled={current <= 1}\n          >\n            <ChevronLeftIcon className=\"text-ink-400s !size-4 sm:!size-6\" />\n          </Button>\n\n          {/* Mobile: Simple pagination (first 3 pages + ...) */}\n          <div className=\"contents lg:hidden\">\n            {mobilePaginationRange.map((pageNumber, index) => {\n              if (pageNumber === DOTS) {\n                return (\n                  <PaginationItem\n                    key={`dots-mobile-${index}`}\n                    className=\"text-t14m text-foreground\"\n                  >\n                    <PaginationEllipsis />\n                  </PaginationItem>\n                );\n              }\n\n              return (\n                <PaginationItem key={pageNumber} className=\"text-t14m text-foreground\">\n                  <Button\n                    size=\"sm\"\n                    variant={pageNumber === current ? 'soft-info' : 'ghost'}\n                    className={cn('text-t14m !min-w-[40px] border-none')}\n                    onClick={(e) => {\n                      e.preventDefault();\n                      onPageChange(pageNumber);\n                    }}\n                    loading={pageNumber === current ? loading : false}\n                  >\n                    {!(loading && pageNumber === current) && pageNumber}\n                  </Button>\n                </PaginationItem>\n              );\n            })}\n          </div>\n\n          {/* Desktop: Full pagination */}\n          <div className=\"hidden lg:contents\">\n            {paginationRange.map((pageNumber, index) => {\n              if (pageNumber === DOTS) {\n                return (\n                  <PaginationItem\n                    key={`dots-desktop-${index}`}\n                    className=\"text-t14m text-foreground\"\n                  >\n                    <PaginationEllipsis />\n                  </PaginationItem>\n                );\n              }\n\n              return (\n                <PaginationItem key={`desktop-${pageNumber}`} className=\"text-t14m text-foreground\">\n                  <Button\n                    size=\"sm\"\n                    variant={pageNumber === current ? 'soft-info' : 'ghost'}\n                    className={cn('text-t14m !min-w-[40px] border-none')}\n                    onClick={(e) => {\n                      e.preventDefault();\n                      onPageChange(pageNumber);\n                    }}\n                    loading={pageNumber === current ? loading : false}\n                  >\n                    {!(loading && pageNumber === current) && pageNumber}\n                  </Button>\n                </PaginationItem>\n              );\n            })}\n          </div>\n\n          {/* Nút Next */}\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"px-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              onNext();\n            }}\n            disabled={current >= totalPages}\n          >\n            <ChevronRight className=\"text-ink-400s !size-4 sm:!size-6\" />\n          </Button>\n        </PaginationContent>\n      </PaginationContainer>\n\n      {/* Mobile: Page size selector on top */}\n      {showPageSizeSelector && (\n        <div className=\"flex items-center justify-end gap-1 lg:hidden\">\n          <p className=\"text-muted-foreground text-t14m text-nowrap\">Số mục mỗi trang:</p>\n          <Select\n            value={[{ value: pageSize.toString(), name: pageSize.toString() }]}\n            onValueChange={(values) => {\n              values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? '0', 10));\n            }}\n          >\n            <SelectTrigger isCustomMode asChild>\n              <div className=\"flex cursor-pointer items-center gap-1\">\n                <span className=\"text-sm font-medium text-blue-500\">{pageSize}</span>\n                <ChevronDown className=\"h-4 w-4 text-blue-500\" />\n              </div>\n            </SelectTrigger>\n            <SelectBody align=\"end\">\n              <SelectContentAutoLayout options={paginationOptions} />\n            </SelectBody>\n          </Select>\n        </div>\n      )}\n      {/* Desktop: Page size selector on the right */}\n      {showPageSizeSelector && (\n        <div className=\"hidden shrink-0 items-center gap-1 lg:flex\">\n          <p className=\"text-muted-foreground text-t14m text-nowrap\">Số mục mỗi trang:</p>\n          <Select\n            value={[{ value: pageSize.toString(), name: pageSize.toString() }]}\n            onValueChange={(values) => {\n              values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? '0', 10));\n            }}\n          >\n            <SelectTrigger isCustomMode asChild>\n              <div className=\"flex cursor-pointer items-center gap-1\">\n                <span className=\"text-sm font-medium text-blue-500\">{pageSize}</span>\n                <ChevronDown className=\"h-4 w-4 text-blue-500\" />\n              </div>\n            </SelectTrigger>\n            <SelectBody align=\"end\" side=\"bottom\" className=\"ml-0 min-w-[120px]\">\n              <SelectContentAutoLayout options={paginationOptions} />\n            </SelectBody>\n          </Select>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Export usePagination hook and DOTS constant for external use\nexport { DOTS, usePagination } from './usePagination';\nexport { PaginationSkeleton } from './PaginationSkeleton';\n"]}