@shoplflow/base 0.41.5 → 0.41.7

package/dist/index.cjs

@@ -4598,17 +4598,29 @@ var PaginationWrapper = styled6__default.default.div`
   align-items: center;
   width: 100%;
   justify-content: space-between;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      justify-content: space-between;
+    }
+  }
 `;
 var StyledPagination = styled6__default.default.nav`
   display: flex;
   align-items: center;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      margin-left: auto;
+    }
+  }
 `;
 var PageItem = styled6__default.default.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 32px;
-  height: 32px;
+  width: ${({ sizeVar }) => sizeVar === "XS" ? "24px" : "32px"};
+  height: ${({ sizeVar }) => sizeVar === "XS" ? "24px" : "32px"};
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
   background-color: ${({ isActive }) => isActive ? exports.colorTokens.neutral300 : exports.colorTokens.neutral0};
   cursor: pointer;
@@ -4616,6 +4628,12 @@ var PageItem = styled6__default.default.button`
   &:hover {
     background-color: ${({ isActive }) => isActive ? exports.colorTokens.neutral300 : exports.colorTokens.neutral100};
   }
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
 `;
 var Ellipsis = styled6__default.default.div`
   display: flex;
@@ -4623,6 +4641,19 @@ var Ellipsis = styled6__default.default.div`
   align-items: center;
   width: 32px;
   height: 32px;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
+`;
+var RightSourceWrapper = styled6__default.default.div`
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
 `;
 var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
   const { selectedItem, handleToggleSelect } = utils.useSelect("SINGLE", data, {
@@ -4664,7 +4695,8 @@ var Pagination = (_a) => {
     gotoPage,
     leftSource,
     rightSource,
-    totalCount
+    totalCount,
+    sizeVar = "S"
   } = _b, rest = __objRest(_b, [
     "currentPage",
     "pageCount",
@@ -4675,35 +4707,42 @@ var Pagination = (_a) => {
     "gotoPage",
     "leftSource",
     "rightSource",
-    "totalCount"
+    "totalCount",
+    "sizeVar"
   ]);
+  const domain = exports.getDomain();
+  const isHadaDomain = domain === "hada";
+  const responsiveClassName = isHadaDomain ? "hada-responsive" : "";
+  const isXSSize = sizeVar === "XS";
   const pageTotalCount = totalCount != null ? totalCount : Math.ceil(itemsTotalCount / Number(pageSize));
   const showLeftEllipsis = currentPage > pageCount - 1;
   const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
   const canPreviousPage = currentPage > 0;
   const canNextPage = currentPage < pageTotalCount - 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, __spreadProps(__spreadValues({}, rest), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, __spreadProps(__spreadValues({ className: responsiveClassName }, rest), { children: [
     leftSource ? leftSource : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
+      !isXSSize && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
       [...Array(pageTotalCount)].splice(0, pageCount).map(
         (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsxRuntime.jsx(
           PageItem,
           {
+            sizeVar,
+            className: responsiveClassName,
             isActive: currentPage === idx + Math.floor(currentPage / pageCount) * pageCount,
             onClick: () => gotoPage(idx + Math.floor(currentPage / pageCount) * pageCount),
-            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
+            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: sizeVar === "XS" ? "caption_700" : "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
           },
           idx
         )
       ),
-      showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.EndPageIcon, color: "neutral400", sizeVar: "S" }) })
+      showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      !isXSSize && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.EndPageIcon, color: "neutral400", sizeVar: "S" }) })
     ] }),
-    rightSource ? rightSource : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+    rightSource ? /* @__PURE__ */ jsxRuntime.jsx(RightSourceWrapper, { className: responsiveClassName, children: rightSource }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
   ] }));
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;

package/dist/index.d.cts

@@ -1333,6 +1333,11 @@ interface PaginationOptionProps extends LeftAndRightNodeProps {
      * 내부 로직을 사용하지 않고, 외부에서 totalCount를 받을 수 있습니다
      */
     totalCount?: number;
+    /**
+     * 페이지네이션 크기
+     * @default: 'S'
+     */
+    sizeVar?: 'S' | 'XS';
     previousPage: () => void;
     nextPage: () => void;
     gotoPage: (updater: ((pageIndex: number) => number) | number) => void;
@@ -1351,7 +1356,7 @@ interface PaginationSizeSelectorProps {
 }
 
 declare const Pagination: {
-    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, totalCount, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, totalCount, sizeVar, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
     SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.d.ts

@@ -1333,6 +1333,11 @@ interface PaginationOptionProps extends LeftAndRightNodeProps {
      * 내부 로직을 사용하지 않고, 외부에서 totalCount를 받을 수 있습니다
      */
     totalCount?: number;
+    /**
+     * 페이지네이션 크기
+     * @default: 'S'
+     */
+    sizeVar?: 'S' | 'XS';
     previousPage: () => void;
     nextPage: () => void;
     gotoPage: (updater: ((pageIndex: number) => number) | number) => void;
@@ -1351,7 +1356,7 @@ interface PaginationSizeSelectorProps {
 }
 
 declare const Pagination: {
-    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, totalCount, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, totalCount, sizeVar, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
     SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.js

@@ -4571,17 +4571,29 @@ var PaginationWrapper = styled6.div`
   align-items: center;
   width: 100%;
   justify-content: space-between;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      justify-content: space-between;
+    }
+  }
 `;
 var StyledPagination = styled6.nav`
   display: flex;
   align-items: center;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      margin-left: auto;
+    }
+  }
 `;
 var PageItem = styled6.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 32px;
-  height: 32px;
+  width: ${({ sizeVar }) => sizeVar === "XS" ? "24px" : "32px"};
+  height: ${({ sizeVar }) => sizeVar === "XS" ? "24px" : "32px"};
   border-radius: ${borderRadiusTokens.borderRadius08};
   background-color: ${({ isActive }) => isActive ? colorTokens.neutral300 : colorTokens.neutral0};
   cursor: pointer;
@@ -4589,6 +4601,12 @@ var PageItem = styled6.button`
   &:hover {
     background-color: ${({ isActive }) => isActive ? colorTokens.neutral300 : colorTokens.neutral100};
   }
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
 `;
 var Ellipsis = styled6.div`
   display: flex;
@@ -4596,6 +4614,19 @@ var Ellipsis = styled6.div`
   align-items: center;
   width: 32px;
   height: 32px;
+
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
+`;
+var RightSourceWrapper = styled6.div`
+  &.hada-responsive {
+    @media (max-width: 720px) {
+      display: none;
+    }
+  }
 `;
 var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
   const { selectedItem, handleToggleSelect } = useSelect("SINGLE", data, {
@@ -4637,7 +4668,8 @@ var Pagination = (_a) => {
     gotoPage,
     leftSource,
     rightSource,
-    totalCount
+    totalCount,
+    sizeVar = "S"
   } = _b, rest = __objRest(_b, [
     "currentPage",
     "pageCount",
@@ -4648,35 +4680,42 @@ var Pagination = (_a) => {
     "gotoPage",
     "leftSource",
     "rightSource",
-    "totalCount"
+    "totalCount",
+    "sizeVar"
   ]);
+  const domain = getDomain();
+  const isHadaDomain = domain === "hada";
+  const responsiveClassName = isHadaDomain ? "hada-responsive" : "";
+  const isXSSize = sizeVar === "XS";
   const pageTotalCount = totalCount != null ? totalCount : Math.ceil(itemsTotalCount / Number(pageSize));
   const showLeftEllipsis = currentPage > pageCount - 1;
   const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
   const canPreviousPage = currentPage > 0;
   const canNextPage = currentPage < pageTotalCount - 1;
-  return /* @__PURE__ */ jsxs(PaginationWrapper, __spreadProps(__spreadValues({}, rest), { children: [
+  return /* @__PURE__ */ jsxs(PaginationWrapper, __spreadProps(__spreadValues({ className: responsiveClassName }, rest), { children: [
     leftSource ? leftSource : /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
-      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
-      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
+    /* @__PURE__ */ jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
+      !isXSSize && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
       [...Array(pageTotalCount)].splice(0, pageCount).map(
         (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsx(
           PageItem,
           {
+            sizeVar,
+            className: responsiveClassName,
             isActive: currentPage === idx + Math.floor(currentPage / pageCount) * pageCount,
             onClick: () => gotoPage(idx + Math.floor(currentPage / pageCount) * pageCount),
-            children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
+            children: /* @__PURE__ */ jsx(Text_default, { typography: sizeVar === "XS" ? "caption_700" : "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
           },
           idx
         )
       ),
-      showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
-      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: EndPageIcon, color: "neutral400", sizeVar: "S" }) })
+      showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      !isXSSize && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: EndPageIcon, color: "neutral400", sizeVar: "S" }) })
     ] }),
-    rightSource ? rightSource : /* @__PURE__ */ jsx("div", {})
+    rightSource ? /* @__PURE__ */ jsx(RightSourceWrapper, { className: responsiveClassName, children: rightSource }) : /* @__PURE__ */ jsx("div", {})
   ] }));
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.41.5",
+  "version": "0.41.7",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.6",
-    "@shoplflow/shopl-assets": "^0.12.19",
+    "@shoplflow/shopl-assets": "^0.12.20",
     "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {