@shoplflow/base 0.46.17 → 0.46.18

package/dist/index.cjs

@@ -5459,7 +5459,7 @@ var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
     &__day-names {
       width: 100%;
       height: 18px;
-      margin: 8px 0 0;
+      margin: 8px 0 8px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -5860,8 +5860,7 @@ var Header = styled6__default.default.div`
   gap: 8px;
 `;
 var Month = styled6__default.default.p`
-  font-size: 18px;
-  color: ${exports.colorTokens.neutral700};
+  display: flex;
   cursor: pointer;
 `;
 var DatePickerWrapper = styled6__default.default.div`
@@ -6013,6 +6012,7 @@ var YearStepper = ({
   changeYear,
   minDate,
   maxDate,
+  sizeVar = "M",
   className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
@@ -6029,10 +6029,17 @@ var YearStepper = ({
       exports.IconButton,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: decreaseYear,
         disabled: prevYearButtonDisabled || date.getFullYear() === startYear,
-        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, sizeVar: "XS", color: prevYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Icon,
+          {
+            iconSource: sizeVar === "S" ? ShoplAssets.LeftArrowXsmallIcon : ShoplAssets.LeftArrowIcon,
+            color: prevYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement: "bottom", middlewares: [core.flip(), core.shift({ padding: 5 })], children: [
@@ -6044,7 +6051,7 @@ var YearStepper = ({
             event.stopPropagation();
             setIsOpen((prev) => !prev);
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "title1_700", children: `${date.getFullYear()}` })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}` })
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6066,10 +6073,17 @@ var YearStepper = ({
       exports.IconButton,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: increaseYear,
         disabled: nextYearButtonDisabled || date.getFullYear() === endYear,
-        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, sizeVar: "XS", color: nextYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Icon,
+          {
+            iconSource: sizeVar === "S" ? ShoplAssets.RightArrowXsmallIcon : ShoplAssets.RightArrowIcon,
+            color: nextYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     )
   ] });
@@ -6697,42 +6711,98 @@ var getEachWeekAreaStyle = (props) => {
     `;
   }
 };
+var getWeekContainerStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      width: 280px;
+      max-width: 280px;
+      gap: 8px;
+      padding: 16px;
+    `;
+  }
+  return react$1.css`
+    width: 400px;
+    max-width: 400px;
+    gap: 16px;
+    padding: 16px 24px 24px;
+  `;
+};
+var getWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      grid-row-gap: 0;
+      background-color: ${exports.colorTokens.neutral100};
+    `;
+  }
+  return react$1.css`
+    grid-row-gap: 8px;
+    background-color: ${exports.colorTokens.neutral0};
+  `;
+};
+var getEachWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      height: 32px;
+    `;
+  }
+  return react$1.css`
+    height: 48px;
+  `;
+};
+var getEachWeekDateStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      width: 100%;
+      height: 32px;
+      font-size: 12px;
+      line-height: 16px;
+      border-radius: 0;
+    `;
+  }
+  return react$1.css`
+    width: 48px;
+    height: 48px;
+    font-size: 14px;
+    line-height: 48px;
+    border-radius: 50%;
+  `;
+};
 var WeekContainer = styled6__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
-  padding: 16px 24px 24px;
+
+  ${({ sizeVar }) => getWeekContainerStyleBySizeVar(sizeVar)}
 `;
 var WeekArea = styled6__default.default.div`
   width: 100%;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  grid-row-gap: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  ${({ sizeVar }) => getWeekAreaStyleBySizeVar(sizeVar)}
 `;
 var EachWeekArea = styled6__default.default.div`
   width: 100%;
-  height: 48px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
+  ${({ sizeVar }) => getEachWeekAreaStyleBySizeVar(sizeVar)}
   ${(props) => getEachWeekAreaStyle(props)}
 `;
 var EachWeekDate = styled6__default.default.div`
-  width: 48px;
-  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
-  font-size: 14px;
-  line-height: 48px;
   padding: 0;
-  border-radius: 50%;
   cursor: pointer;
   position: absolute;
   z-index: 10;
 
+  ${({ sizeVar }) => getEachWeekDateStyleBySizeVar(sizeVar)}
   ${(props) => getEachDateStyle3(props)}
 `;
 function getWeeksInYear(year) {
@@ -6757,7 +6827,8 @@ var WeekDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleWeek
+  onlySingleWeek,
+  sizeVar = "M"
 }) => {
   const year = initStartDate ? dateFns.getISOWeekYear(initStartDate) : dateFns.getISOWeekYear(/* @__PURE__ */ new Date());
   const [currentDate, setCurrentDate] = React.useState(new Date(year, 5, 5));
@@ -6824,10 +6895,11 @@ var WeekDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(WeekContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(WeekContainer, { sizeVar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       YearStepper_default,
       {
+        sizeVar,
         date: currentDate,
         decreaseYear: () => {
           setCurrentDate(new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate()));
@@ -6844,7 +6916,7 @@ var WeekDatepicker = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(WeekArea, { children: Years.map((each, index) => {
+    /* @__PURE__ */ jsxRuntime.jsx(WeekArea, { sizeVar, children: Years.map((each, index) => {
       const currentYear = currentDate.getFullYear();
       const currentWeek = Number(each);
       const isStart = currentYear === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[1]) && currentWeek === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[0]);
@@ -6901,6 +6973,7 @@ var WeekDatepicker = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         EachWeekArea,
         {
+          sizeVar,
           inRange,
           isStart,
           isReady,
@@ -6912,7 +6985,7 @@ var WeekDatepicker = ({
             }
             clickWeek(Number(each), currentDate.getFullYear());
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(EachWeekDate, { inRange, isStart, isEnd, disabled, children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(EachWeekDate, { sizeVar, inRange, isStart, isEnd, disabled, children: [
             "W",
             each
           ] })

package/dist/index.d.cts

@@ -1581,6 +1581,10 @@ type WeekDatepickerProps = {
      * 하나의 주만 선택 여부
      */
     onlySingleWeek?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type WeekDatepickerStyleType = {
     inRange: boolean;
@@ -1589,7 +1593,7 @@ type WeekDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, sizeVar, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type YearSelectProps = {
     optionList: Array<{

package/dist/index.d.ts

@@ -1581,6 +1581,10 @@ type WeekDatepickerProps = {
      * 하나의 주만 선택 여부
      */
     onlySingleWeek?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type WeekDatepickerStyleType = {
     inRange: boolean;
@@ -1589,7 +1593,7 @@ type WeekDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, sizeVar, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type YearSelectProps = {
     optionList: Array<{

package/dist/index.js

@@ -11,7 +11,7 @@ import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DeleteIcon, DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
+import { DeleteIcon, DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon, LeftArrowXsmallIcon, RightArrowXsmallIcon } from '@shoplflow/shopl-assets';
 import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import DatePicker2 from 'react-datepicker';
@@ -5432,7 +5432,7 @@ var SmallStyledDayDatepickerWrapper = styled6.div`
     &__day-names {
       width: 100%;
       height: 18px;
-      margin: 8px 0 0;
+      margin: 8px 0 8px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -5833,8 +5833,7 @@ var Header = styled6.div`
   gap: 8px;
 `;
 var Month = styled6.p`
-  font-size: 18px;
-  color: ${colorTokens.neutral700};
+  display: flex;
   cursor: pointer;
 `;
 var DatePickerWrapper = styled6.div`
@@ -5986,6 +5985,7 @@ var YearStepper = ({
   changeYear,
   minDate,
   maxDate,
+  sizeVar = "M",
   className
 }) => {
   const [isOpen, setIsOpen] = useOutsideClick({
@@ -6002,10 +6002,17 @@ var YearStepper = ({
       IconButton_default,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: decreaseYear,
         disabled: prevYearButtonDisabled || date.getFullYear() === startYear,
-        children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, sizeVar: "XS", color: prevYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsx(
+          Icon_default,
+          {
+            iconSource: sizeVar === "S" ? LeftArrowXsmallIcon : LeftArrowIcon,
+            color: prevYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxs(Popper_default, { placement: "bottom", middlewares: [flip(), shift({ padding: 5 })], children: [
@@ -6017,7 +6024,7 @@ var YearStepper = ({
             event.stopPropagation();
             setIsOpen((prev) => !prev);
           },
-          children: /* @__PURE__ */ jsx(Text_default, { typography: "title1_700", children: `${date.getFullYear()}` })
+          children: /* @__PURE__ */ jsx(Text_default, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}` })
         }
       ) }),
       /* @__PURE__ */ jsx(Popper_default.Portal, { children: /* @__PURE__ */ jsx(
@@ -6039,10 +6046,17 @@ var YearStepper = ({
       IconButton_default,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: increaseYear,
         disabled: nextYearButtonDisabled || date.getFullYear() === endYear,
-        children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, sizeVar: "XS", color: nextYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsx(
+          Icon_default,
+          {
+            iconSource: sizeVar === "S" ? RightArrowXsmallIcon : RightArrowIcon,
+            color: nextYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     )
   ] });
@@ -6670,42 +6684,98 @@ var getEachWeekAreaStyle = (props) => {
     `;
   }
 };
+var getWeekContainerStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return css`
+      width: 280px;
+      max-width: 280px;
+      gap: 8px;
+      padding: 16px;
+    `;
+  }
+  return css`
+    width: 400px;
+    max-width: 400px;
+    gap: 16px;
+    padding: 16px 24px 24px;
+  `;
+};
+var getWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return css`
+      grid-row-gap: 0;
+      background-color: ${colorTokens.neutral100};
+    `;
+  }
+  return css`
+    grid-row-gap: 8px;
+    background-color: ${colorTokens.neutral0};
+  `;
+};
+var getEachWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return css`
+      height: 32px;
+    `;
+  }
+  return css`
+    height: 48px;
+  `;
+};
+var getEachWeekDateStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return css`
+      width: 100%;
+      height: 32px;
+      font-size: 12px;
+      line-height: 16px;
+      border-radius: 0;
+    `;
+  }
+  return css`
+    width: 48px;
+    height: 48px;
+    font-size: 14px;
+    line-height: 48px;
+    border-radius: 50%;
+  `;
+};
 var WeekContainer = styled6.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
-  padding: 16px 24px 24px;
+
+  ${({ sizeVar }) => getWeekContainerStyleBySizeVar(sizeVar)}
 `;
 var WeekArea = styled6.div`
   width: 100%;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  grid-row-gap: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  ${({ sizeVar }) => getWeekAreaStyleBySizeVar(sizeVar)}
 `;
 var EachWeekArea = styled6.div`
   width: 100%;
-  height: 48px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
+  ${({ sizeVar }) => getEachWeekAreaStyleBySizeVar(sizeVar)}
   ${(props) => getEachWeekAreaStyle(props)}
 `;
 var EachWeekDate = styled6.div`
-  width: 48px;
-  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
-  font-size: 14px;
-  line-height: 48px;
   padding: 0;
-  border-radius: 50%;
   cursor: pointer;
   position: absolute;
   z-index: 10;
 
+  ${({ sizeVar }) => getEachWeekDateStyleBySizeVar(sizeVar)}
   ${(props) => getEachDateStyle3(props)}
 `;
 function getWeeksInYear(year) {
@@ -6730,7 +6800,8 @@ var WeekDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleWeek
+  onlySingleWeek,
+  sizeVar = "M"
 }) => {
   const year = initStartDate ? getISOWeekYear(initStartDate) : getISOWeekYear(/* @__PURE__ */ new Date());
   const [currentDate, setCurrentDate] = useState(new Date(year, 5, 5));
@@ -6797,10 +6868,11 @@ var WeekDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(WeekContainer, { children: [
+  return /* @__PURE__ */ jsxs(WeekContainer, { sizeVar, children: [
     /* @__PURE__ */ jsx(
       YearStepper_default,
       {
+        sizeVar,
         date: currentDate,
         decreaseYear: () => {
           setCurrentDate(new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate()));
@@ -6817,7 +6889,7 @@ var WeekDatepicker = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(WeekArea, { children: Years.map((each, index) => {
+    /* @__PURE__ */ jsx(WeekArea, { sizeVar, children: Years.map((each, index) => {
       const currentYear = currentDate.getFullYear();
       const currentWeek = Number(each);
       const isStart = currentYear === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[1]) && currentWeek === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[0]);
@@ -6874,6 +6946,7 @@ var WeekDatepicker = ({
       return /* @__PURE__ */ jsx(
         EachWeekArea,
         {
+          sizeVar,
           inRange,
           isStart,
           isReady,
@@ -6885,7 +6958,7 @@ var WeekDatepicker = ({
             }
             clickWeek(Number(each), currentDate.getFullYear());
           },
-          children: /* @__PURE__ */ jsxs(EachWeekDate, { inRange, isStart, isEnd, disabled, children: [
+          children: /* @__PURE__ */ jsxs(EachWeekDate, { sizeVar, inRange, isStart, isEnd, disabled, children: [
             "W",
             each
           ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.17",
+  "version": "0.46.18",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {