@shoplflow/base 0.46.5 → 0.46.6

package/dist/index.cjs

@@ -6136,7 +6136,7 @@ var getEachMonthAreaStyle = (props) => {
         right: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${exports.colorTokens.primary100};
       }
     `;
@@ -6149,7 +6149,7 @@ var getEachMonthAreaStyle = (props) => {
         left: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${exports.colorTokens.primary100};
       }
     `;
@@ -6169,9 +6169,9 @@ var getEachMonthAreaStyle = (props) => {
 var MonthContainer = styled6__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
+  width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  max-width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  gap: ${({ sizeVar }) => sizeVar === "S" ? "8px" : "16px"};
   padding: 16px 24px 24px;
 `;
 var MonthArea = styled6__default.default.div`
@@ -6201,6 +6201,7 @@ var EachMonthDate = styled6__default.default.div`
   cursor: pointer;
   position: absolute;
   z-index: 10;
+  flex-shrink: 0;
 
   ${(props) => getEachDateStyle(props)}
 `;
@@ -6210,7 +6211,8 @@ var MonthDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleMonth
+  onlySingleMonth,
+  sizeVar = "M"
 }) => {
   const [currentDate, setCurrentDate] = React3.useState(initStartDate || /* @__PURE__ */ new Date());
   const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = React3.useState(
@@ -6274,7 +6276,7 @@ var MonthDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", sizeVar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       YearStepper_default,
       {
@@ -6769,7 +6771,7 @@ var WeekDatepicker = ({
 exports.WeekDatepicker = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-exports.DATEPICKERS_VERSION = "2.0.0";
+exports.DATEPICKERS_VERSION = "2.0.1";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;

package/dist/index.d.cts

@@ -1556,6 +1556,10 @@ type MonthDatepickerProps = {
      * 하나의 월만 선택 여부
      */
     onlySingleMonth?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type MonthDatepickerStyleType = {
     inRange: boolean;
@@ -1564,7 +1568,11 @@ type MonthDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * MonthDatepicker 컴포넌트
+ * @version 2.1
+ */
+declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, sizeVar, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type AnnualDatepickerProps = {
     currentYear?: number;
@@ -1643,7 +1651,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.0";
+declare const DATEPICKERS_VERSION = "2.0.1";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.d.ts

@@ -1556,6 +1556,10 @@ type MonthDatepickerProps = {
      * 하나의 월만 선택 여부
      */
     onlySingleMonth?: boolean;
+    /**
+     * 사이즈 - 기본값: M
+     */
+    sizeVar?: 'S' | 'M';
 };
 type MonthDatepickerStyleType = {
     inRange: boolean;
@@ -1564,7 +1568,11 @@ type MonthDatepickerStyleType = {
     disabled: boolean;
 };
 
-declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * MonthDatepicker 컴포넌트
+ * @version 2.1
+ */
+declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, sizeVar, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type AnnualDatepickerProps = {
     currentYear?: number;
@@ -1643,7 +1651,7 @@ type YearSelectProps = {
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const DATEPICKERS_VERSION = "2.0.0";
+declare const DATEPICKERS_VERSION = "2.0.1";
 
 declare const NumberComboboxSizeVariants: {
     readonly S: "S";

package/dist/index.js

@@ -6109,7 +6109,7 @@ var getEachMonthAreaStyle = (props) => {
         right: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${colorTokens.primary100};
       }
     `;
@@ -6122,7 +6122,7 @@ var getEachMonthAreaStyle = (props) => {
         left: 0;
         top: 0;
         bottom: 0;
-        width: 48px;
+        width: 50%;
         background: ${colorTokens.primary100};
       }
     `;
@@ -6142,9 +6142,9 @@ var getEachMonthAreaStyle = (props) => {
 var MonthContainer = styled6.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
+  width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  max-width: ${({ sizeVar }) => sizeVar === "S" ? "280px" : "400px"};
+  gap: ${({ sizeVar }) => sizeVar === "S" ? "8px" : "16px"};
   padding: 16px 24px 24px;
 `;
 var MonthArea = styled6.div`
@@ -6174,6 +6174,7 @@ var EachMonthDate = styled6.div`
   cursor: pointer;
   position: absolute;
   z-index: 10;
+  flex-shrink: 0;
 
   ${(props) => getEachDateStyle(props)}
 `;
@@ -6183,7 +6184,8 @@ var MonthDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleMonth
+  onlySingleMonth,
+  sizeVar = "M"
 }) => {
   const [currentDate, setCurrentDate] = useState(initStartDate || /* @__PURE__ */ new Date());
   const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = useState(
@@ -6247,7 +6249,7 @@ var MonthDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", children: [
+  return /* @__PURE__ */ jsxs(MonthContainer, { "data-shoplflow": "MonthDatepicker", sizeVar, children: [
     /* @__PURE__ */ jsx(
       YearStepper_default,
       {
@@ -6742,7 +6744,7 @@ var WeekDatepicker = ({
 var WeekDatepicker_default = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-var DATEPICKERS_VERSION = "2.0.0";
+var DATEPICKERS_VERSION = "2.0.1";
 var StyledNumberCombobox = styled6.div``;
 var IconWrapper2 = styled6(motion.div)`
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.5",
+  "version": "0.46.6",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -86,9 +86,9 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
+    "@shoplflow/hada-assets": "^0.1.10",
     "@shoplflow/shopl-assets": "^0.12.37",
-    "@shoplflow/utils": "^0.8.0",
-    "@shoplflow/hada-assets": "^0.1.10"
+    "@shoplflow/utils": "^0.8.0"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {