@x-plat/design-system 0.4.3 → 0.4.5

package/dist/components/Card/index.css

@@ -2,9 +2,8 @@
 .lib-xplat-card {
   display: flex;
   flex-direction: column;
-  width: fit-content;
+  flex: 1;
   min-width: 0;
-  max-width: 100%;
   height: fit-content;
   border-radius: 1rem;
   border: 1px solid var(--xplat-neutral-400);

package/dist/components/DatePicker/index.cjs

@@ -1669,7 +1669,7 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
@@ -1744,6 +1744,7 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/RangePicker/index.tsx
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime302 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
@@ -1755,6 +1756,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
+  const [activeTab, setActiveTab] = import_react9.default.useState("start");
   const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
   const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
   const isDisabled = (date, type) => {
@@ -1861,8 +1863,31 @@ var RangePicker = (props) => {
         "--datepicker-active-color": `var(--${color})`
       },
       children: [
-        renderCalendar(startCal, "start"),
-        renderCalendar(endCal, "end")
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "datepicker-range-tabs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "start" && "active"),
+              onClick: () => setActiveTab("start"),
+              children: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "end" && "active"),
+              onClick: () => setActiveTab("end"),
+              children: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "datepicker-range-panels", children: [
+          renderCalendar(startCal, "start"),
+          renderCalendar(endCal, "end")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? renderCalendar(startCal, "start") : renderCalendar(endCal, "end") })
       ]
     }
   );
@@ -1874,7 +1899,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime303 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react9.default.useState(false);
+  const [isOpen, setIsOpen] = import_react10.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -1883,7 +1908,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react9.default.cloneElement(component, { onClick: handleClick }),
+    import_react10.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(

package/dist/components/DatePicker/index.css

@@ -249,9 +249,38 @@
   color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
 }
 .lib-xplat-datepicker.range {
+  display: flex;
+  flex-direction: column;
+}
+.lib-xplat-datepicker .datepicker-range-tabs {
+  display: none;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--xplat-neutral-200);
+}
+.lib-xplat-datepicker .datepicker-range-tab {
+  flex: 1;
+  padding: 0.5rem;
+  border: none;
+  background: none;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--xplat-neutral-400);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+.lib-xplat-datepicker .datepicker-range-tab.active {
+  color: var(--datepicker-active-color, var(--xplat-blue-500));
+  border-bottom-color: var(--datepicker-active-color, var(--xplat-blue-500));
+  font-weight: 600;
+}
+.lib-xplat-datepicker .datepicker-range-panels {
   display: flex;
   gap: 1.5rem;
 }
+.lib-xplat-datepicker .datepicker-range-mobile {
+  display: none;
+}
 .lib-xplat-datepicker .datepicker-range-panel {
   flex: 1;
   min-width: 200px;
@@ -264,6 +293,20 @@
   color: var(--xplat-neutral-500);
   margin-bottom: 0.5rem;
 }
+@media (max-width: 600px) {
+  .lib-xplat-datepicker .datepicker-range-tabs {
+    display: flex;
+  }
+  .lib-xplat-datepicker .datepicker-range-panels {
+    display: none;
+  }
+  .lib-xplat-datepicker .datepicker-range-mobile {
+    display: block;
+  }
+  .lib-xplat-datepicker .datepicker-range-panel {
+    min-width: unset;
+  }
+}
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }

package/dist/components/DatePicker/index.js

@@ -1630,7 +1630,7 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React8 from "react";
+import React9 from "react";
 
 // src/components/Button/Button.tsx
 import { jsx as jsx300 } from "react/jsx-runtime";
@@ -1705,6 +1705,7 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/RangePicker/index.tsx
+import React8 from "react";
 import { jsx as jsx302, jsxs as jsxs193 } from "react/jsx-runtime";
 var RangePicker = (props) => {
   const {
@@ -1716,6 +1717,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
+  const [activeTab, setActiveTab] = React8.useState("start");
   const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
   const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
   const isDisabled = (date, type) => {
@@ -1822,8 +1824,31 @@ var RangePicker = (props) => {
         "--datepicker-active-color": `var(--${color})`
       },
       children: [
-        renderCalendar(startCal, "start"),
-        renderCalendar(endCal, "end")
+        /* @__PURE__ */ jsxs193("div", { className: "datepicker-range-tabs", children: [
+          /* @__PURE__ */ jsx302(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "start" && "active"),
+              onClick: () => setActiveTab("start"),
+              children: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start"
+            }
+          ),
+          /* @__PURE__ */ jsx302(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-range-tab", activeTab === "end" && "active"),
+              onClick: () => setActiveTab("end"),
+              children: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs193("div", { className: "datepicker-range-panels", children: [
+          renderCalendar(startCal, "start"),
+          renderCalendar(endCal, "end")
+        ] }),
+        /* @__PURE__ */ jsx302("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? renderCalendar(startCal, "start") : renderCalendar(endCal, "end") })
       ]
     }
   );
@@ -1835,7 +1860,7 @@ var RangePicker_default = RangePicker;
 import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React8.useState(false);
+  const [isOpen, setIsOpen] = React9.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -1844,7 +1869,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-popup-datepicker", children: [
-    React8.cloneElement(component, { onClick: handleClick }),
+    React9.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ jsx303(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs194("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx303(

package/dist/components/PopOver/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-pop-over {
   position: relative;
   z-index: 10;
+  width: fit-content;
   cursor: pointer;
   user-select: none;
 }
@@ -9,6 +10,9 @@
   position: absolute;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
   opacity: 0;
   transform: scale(0.8);