@x-plat/design-system 0.5.2 → 0.5.4

package/dist/components/Accordion/index.cjs

@@ -955,38 +955,45 @@ var clsx_default = clsx;
 
 // src/components/Accordion/Accordion.tsx
 var import_jsx_runtime295 = require("react/jsx-runtime");
-var AccordionItem = ({ item, isOpen, onToggle }) => {
-  const bodyRef = import_react.default.useRef(null);
-  const [height, setHeight] = import_react.default.useState(0);
-  import_react.default.useEffect(() => {
-    if (bodyRef.current) {
-      setHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isOpen, item.content]);
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
-      "button",
-      {
-        className: "accordion-header",
-        onClick: onToggle,
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "title", children: item.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "chevron", children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ChevronDownIcon_default, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
-      "div",
-      {
-        ref: bodyRef,
-        className: "accordion-body",
-        style: { maxHeight: isOpen ? height : 0 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "accordion-content", children: item.content })
+var AccordionItem = import_react.default.memo(
+  ({
+    item,
+    isOpen,
+    onToggle
+  }) => {
+    const bodyRef = import_react.default.useRef(null);
+    const [height, setHeight] = import_react.default.useState(0);
+    import_react.default.useEffect(() => {
+      if (bodyRef.current) {
+        setHeight(bodyRef.current.scrollHeight);
       }
-    )
-  ] });
-};
+    }, [isOpen, item.content]);
+    return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+        "button",
+        {
+          className: "accordion-header",
+          onClick: onToggle,
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "title", children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "chevron", children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ChevronDownIcon_default, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+        "div",
+        {
+          ref: bodyRef,
+          className: "accordion-body",
+          style: { maxHeight: isOpen ? height : 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "accordion-content", children: item.content })
+        }
+      )
+    ] });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
 var Accordion = (props) => {
   const { items } = props;
   const isMultiple = props.multiple === true;

package/dist/components/Accordion/index.css

@@ -1,5 +1,7 @@
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
+  contain: content;
+  width: 100%;
   border: 1px solid var(--semantic-border-default);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;

package/dist/components/Accordion/index.js

@@ -919,38 +919,45 @@ var clsx_default = clsx;
 
 // src/components/Accordion/Accordion.tsx
 import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
-var AccordionItem = ({ item, isOpen, onToggle }) => {
-  const bodyRef = React.useRef(null);
-  const [height, setHeight] = React.useState(0);
-  React.useEffect(() => {
-    if (bodyRef.current) {
-      setHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isOpen, item.content]);
-  return /* @__PURE__ */ jsxs189("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
-    /* @__PURE__ */ jsxs189(
-      "button",
-      {
-        className: "accordion-header",
-        onClick: onToggle,
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ jsx295("span", { className: "title", children: item.title }),
-          /* @__PURE__ */ jsx295("span", { className: "chevron", children: /* @__PURE__ */ jsx295(ChevronDownIcon_default, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx295(
-      "div",
-      {
-        ref: bodyRef,
-        className: "accordion-body",
-        style: { maxHeight: isOpen ? height : 0 },
-        children: /* @__PURE__ */ jsx295("div", { className: "accordion-content", children: item.content })
+var AccordionItem = React.memo(
+  ({
+    item,
+    isOpen,
+    onToggle
+  }) => {
+    const bodyRef = React.useRef(null);
+    const [height, setHeight] = React.useState(0);
+    React.useEffect(() => {
+      if (bodyRef.current) {
+        setHeight(bodyRef.current.scrollHeight);
       }
-    )
-  ] });
-};
+    }, [isOpen, item.content]);
+    return /* @__PURE__ */ jsxs189("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+      /* @__PURE__ */ jsxs189(
+        "button",
+        {
+          className: "accordion-header",
+          onClick: onToggle,
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ jsx295("span", { className: "title", children: item.title }),
+            /* @__PURE__ */ jsx295("span", { className: "chevron", children: /* @__PURE__ */ jsx295(ChevronDownIcon_default, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx295(
+        "div",
+        {
+          ref: bodyRef,
+          className: "accordion-body",
+          style: { maxHeight: isOpen ? height : 0 },
+          children: /* @__PURE__ */ jsx295("div", { className: "accordion-content", children: item.content })
+        }
+      )
+    ] });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
 var Accordion = (props) => {
   const { items } = props;
   const isMultiple = props.multiple === true;

package/dist/components/Alert/index.css

@@ -1,5 +1,6 @@
 /* src/components/Alert/alert.scss */
 .lib-xplat-alert {
+  width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;

package/dist/components/Breadcrumb/index.css

@@ -1,4 +1,7 @@
 /* src/components/Breadcrumb/breadcrumb.scss */
+.lib-xplat-breadcrumb {
+  width: 100%;
+}
 .lib-xplat-breadcrumb ol {
   display: flex;
   align-items: center;

package/dist/components/Button/index.css

@@ -1,5 +1,6 @@
 /* src/components/Button/button.scss */
 .lib-xplat-button {
+  width: 100%;
   border-radius: var(--spacing-radius-md);
   font-weight: 500;
   cursor: pointer;

package/dist/components/Calendar/index.cjs

@@ -1064,6 +1064,76 @@ var MONTH_LABELS = {
 
 // src/components/Calendar/Calendar.tsx
 var import_jsx_runtime295 = require("react/jsx-runtime");
+var DayCell = import_react2.default.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    dayEvents,
+    renderDay,
+    onSelect,
+    onEventClick
+  }) => {
+    if (renderDay) {
+      return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+        "div",
+        {
+          className: clsx_default(
+            "calendar-day",
+            !day.isCurrentMonth && "outside",
+            disabled && "disabled",
+            selected && "selected",
+            day.isToday && "today"
+          ),
+          onClick: () => {
+            if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+          },
+          children: renderDay(day, dayEvents)
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+      "div",
+      {
+        className: clsx_default(
+          "calendar-day",
+          !day.isCurrentMonth && "outside",
+          disabled && "disabled",
+          selected && "selected",
+          day.isToday && "today",
+          day.isSunday && "sunday",
+          day.isSaturday && "saturday"
+        ),
+        onClick: () => {
+          if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "calendar-day-number", children: day.day }),
+          dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "calendar-day-events", children: [
+            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+              "span",
+              {
+                className: "calendar-event-dot",
+                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                title: event.label,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onEventClick?.(event);
+                }
+              },
+              ei
+            )),
+            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("span", { className: "calendar-event-more", children: [
+              "+",
+              dayEvents.length - 3
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DayCell.displayName = "DayCell";
 var Calendar = (props) => {
   const {
     year: yearProp,
@@ -1149,12 +1219,28 @@ var Calendar = (props) => {
     setPickerMode("months");
     onMonthChange?.(y, month);
   };
-  const isDisabled = (date) => {
-    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
-    return false;
-  };
-  const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
+  const minTime = import_react2.default.useMemo(
+    () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
+    [minDate]
+  );
+  const maxTime = import_react2.default.useMemo(
+    () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
+    [maxDate]
+  );
+  const eventsMap = import_react2.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of events) {
+      const key = `${e.date.getFullYear()}-${e.date.getMonth()}-${e.date.getDate()}`;
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [events]);
+  const getEventsForDay = import_react2.default.useCallback(
+    (date) => eventsMap.get(`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`) ?? [],
+    [eventsMap]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
@@ -1208,64 +1294,19 @@ var Calendar = (props) => {
           )) }),
           /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "calendar-grid", children: days.map((day, idx) => {
             const dayEvents = getEventsForDay(day.date);
-            const disabled = isDisabled(day.date);
+            const t = day.date.getTime();
+            const disabled = t < minTime || t > maxTime;
             const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
-            if (renderDay) {
-              return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
-                "div",
-                {
-                  className: clsx_default(
-                    "calendar-day",
-                    !day.isCurrentMonth && "outside",
-                    disabled && "disabled",
-                    isSelected && "selected",
-                    day.isToday && "today"
-                  ),
-                  onClick: () => {
-                    if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                  },
-                  children: renderDay(day, dayEvents)
-                },
-                idx
-              );
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
-              "div",
+            return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+              DayCell,
               {
-                className: clsx_default(
-                  "calendar-day",
-                  !day.isCurrentMonth && "outside",
-                  disabled && "disabled",
-                  isSelected && "selected",
-                  day.isToday && "today",
-                  day.isSunday && "sunday",
-                  day.isSaturday && "saturday"
-                ),
-                onClick: () => {
-                  if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "calendar-day-number", children: day.day }),
-                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "calendar-day-events", children: [
-                    dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
-                      "span",
-                      {
-                        className: "calendar-event-dot",
-                        style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
-                        title: event.label,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onEventClick?.(event);
-                        }
-                      },
-                      ei
-                    )),
-                    dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("span", { className: "calendar-event-more", children: [
-                      "+",
-                      dayEvents.length - 3
-                    ] })
-                  ] })
-                ]
+                day,
+                disabled,
+                selected: isSelected,
+                dayEvents,
+                renderDay,
+                onSelect,
+                onEventClick
               },
               idx
             );

package/dist/components/Calendar/index.css

@@ -1,6 +1,8 @@
 /* src/components/Calendar/calendar.scss */
 .lib-xplat-calendar {
+  contain: content;
   width: 100%;
+  height: 100%;
   min-width: 200px;
   user-select: none;
   container-type: inline-size;

package/dist/components/Calendar/index.js

@@ -1025,6 +1025,76 @@ var MONTH_LABELS = {
 
 // src/components/Calendar/Calendar.tsx
 import { Fragment, jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
+var DayCell = React2.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    dayEvents,
+    renderDay,
+    onSelect,
+    onEventClick
+  }) => {
+    if (renderDay) {
+      return /* @__PURE__ */ jsx295(
+        "div",
+        {
+          className: clsx_default(
+            "calendar-day",
+            !day.isCurrentMonth && "outside",
+            disabled && "disabled",
+            selected && "selected",
+            day.isToday && "today"
+          ),
+          onClick: () => {
+            if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+          },
+          children: renderDay(day, dayEvents)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs189(
+      "div",
+      {
+        className: clsx_default(
+          "calendar-day",
+          !day.isCurrentMonth && "outside",
+          disabled && "disabled",
+          selected && "selected",
+          day.isToday && "today",
+          day.isSunday && "sunday",
+          day.isSaturday && "saturday"
+        ),
+        onClick: () => {
+          if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+        },
+        children: [
+          /* @__PURE__ */ jsx295("span", { className: "calendar-day-number", children: day.day }),
+          dayEvents.length > 0 && /* @__PURE__ */ jsxs189("div", { className: "calendar-day-events", children: [
+            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx295(
+              "span",
+              {
+                className: "calendar-event-dot",
+                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                title: event.label,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onEventClick?.(event);
+                }
+              },
+              ei
+            )),
+            dayEvents.length > 3 && /* @__PURE__ */ jsxs189("span", { className: "calendar-event-more", children: [
+              "+",
+              dayEvents.length - 3
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DayCell.displayName = "DayCell";
 var Calendar = (props) => {
   const {
     year: yearProp,
@@ -1110,12 +1180,28 @@ var Calendar = (props) => {
     setPickerMode("months");
     onMonthChange?.(y, month);
   };
-  const isDisabled = (date) => {
-    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
-    return false;
-  };
-  const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
+  const minTime = React2.useMemo(
+    () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
+    [minDate]
+  );
+  const maxTime = React2.useMemo(
+    () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
+    [maxDate]
+  );
+  const eventsMap = React2.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of events) {
+      const key = `${e.date.getFullYear()}-${e.date.getMonth()}-${e.date.getDate()}`;
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [events]);
+  const getEventsForDay = React2.useCallback(
+    (date) => eventsMap.get(`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`) ?? [],
+    [eventsMap]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
@@ -1169,64 +1255,19 @@ var Calendar = (props) => {
           )) }),
           /* @__PURE__ */ jsx295("div", { className: "calendar-grid", children: days.map((day, idx) => {
             const dayEvents = getEventsForDay(day.date);
-            const disabled = isDisabled(day.date);
+            const t = day.date.getTime();
+            const disabled = t < minTime || t > maxTime;
             const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
-            if (renderDay) {
-              return /* @__PURE__ */ jsx295(
-                "div",
-                {
-                  className: clsx_default(
-                    "calendar-day",
-                    !day.isCurrentMonth && "outside",
-                    disabled && "disabled",
-                    isSelected && "selected",
-                    day.isToday && "today"
-                  ),
-                  onClick: () => {
-                    if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                  },
-                  children: renderDay(day, dayEvents)
-                },
-                idx
-              );
-            }
-            return /* @__PURE__ */ jsxs189(
-              "div",
+            return /* @__PURE__ */ jsx295(
+              DayCell,
               {
-                className: clsx_default(
-                  "calendar-day",
-                  !day.isCurrentMonth && "outside",
-                  disabled && "disabled",
-                  isSelected && "selected",
-                  day.isToday && "today",
-                  day.isSunday && "sunday",
-                  day.isSaturday && "saturday"
-                ),
-                onClick: () => {
-                  if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                },
-                children: [
-                  /* @__PURE__ */ jsx295("span", { className: "calendar-day-number", children: day.day }),
-                  dayEvents.length > 0 && /* @__PURE__ */ jsxs189("div", { className: "calendar-day-events", children: [
-                    dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx295(
-                      "span",
-                      {
-                        className: "calendar-event-dot",
-                        style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
-                        title: event.label,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onEventClick?.(event);
-                        }
-                      },
-                      ei
-                    )),
-                    dayEvents.length > 3 && /* @__PURE__ */ jsxs189("span", { className: "calendar-event-more", children: [
-                      "+",
-                      dayEvents.length - 3
-                    ] })
-                  ] })
-                ]
+                day,
+                disabled,
+                selected: isSelected,
+                dayEvents,
+                renderDay,
+                onSelect,
+                onEventClick
               },
               idx
             );

package/dist/components/Card/index.css

@@ -1,10 +1,12 @@
 /* src/components/Card/card.scss */
 .lib-xplat-card {
+  contain: content;
+  width: 100%;
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  height: fit-content;
+  height: 100%;
   border-radius: var(--spacing-radius-xl);
   border: 1px solid var(--semantic-border-strong);
   background-color: var(--semantic-surface-neutral-default);

package/dist/components/CardTab/index.css

@@ -1,5 +1,6 @@
 /* src/components/CardTab/cardTab.scss */
 .lib-xplat-card-tab {
+  width: 100%;
   display: flex;
   flex-direction: column;
 }