sellmate-design-system-react 9.0.0-beta.67 → 9.0.0-beta.69

package/dist/index.cjs

@@ -4310,6 +4310,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
 });
 function SFooter({
   bg = "white",
+  size = "md",
   left,
   button,
   children,
@@ -4346,7 +4347,7 @@ function SFooter({
           SButton,
           {
             ...button,
-            size: "md",
+            size,
             color: button.color ?? "primary",
             label: button.label ?? "\uD655\uC778"
           }
@@ -4355,7 +4356,16 @@ function SFooter({
     }
   );
 }
-var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false, footerLeft, button, footerClassName, className, children, ...rest }, ref) {
+var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({
+  bordered = false,
+  footerLeft,
+  button,
+  footerSize = "md",
+  footerClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
   const hasFooter = footerLeft != null || button != null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4373,6 +4383,7 @@ var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false,
           SFooter,
           {
             bg: "grey",
+            size: footerSize,
             left: footerLeft,
             button,
             className: cn("px-(--sys-space-panel-padding-default)", footerClassName)
@@ -7660,6 +7671,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
     background,
     footerLeft,
     button,
+    footerSize = "md",
     footerClassName,
     className,
     children,
@@ -7696,6 +7708,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
             SFooter,
             {
               bg: "grey",
+              size: footerSize,
               left: footerLeft,
               button,
               className: cn("px-(--cmp-sectionHeaderCard-header-paddingX)", footerClassName)
@@ -8275,16 +8288,8 @@ var CONTEXT_ALERT_SURFACE = {
     border: "var(--cmp-contextAlert-discovery-border)"
   }
 };
-var CONTEXT_ALERT_DEFAULT_ICON = "notificationOutline";
 var CONTEXT_ALERT_ICON_COLOR = "var(--sys-color-fg-tertiary)";
-var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({
-  intent = "default",
-  messages = [],
-  icon = CONTEXT_ALERT_DEFAULT_ICON,
-  action: action2,
-  className,
-  style
-}, ref) {
+var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({ intent = "default", messages = [], icon, iconColor, action: action2, className, style }, ref) {
   const surface = CONTEXT_ALERT_SURFACE[intent];
   const vars = {
     "--ca-bg": surface.bg,
@@ -8304,12 +8309,12 @@ var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({
       ),
       style: { ...vars, ...style },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
           SIcon,
           {
             name: icon,
             size: "var(--cmp-contextAlert-icon)",
-            color: CONTEXT_ALERT_ICON_COLOR,
+            color: iconColor || CONTEXT_ALERT_ICON_COLOR,
             className: "shrink-0"
           }
         ),
@@ -14004,7 +14009,8 @@ function layoutCalendarBoard({
   cells,
   events,
   rowCapacity,
-  blockedDates
+  blockedDates,
+  focusedEventId
 }) {
   const count = cells.length;
   const weekCount = Math.ceil(count / 7);
@@ -14012,6 +14018,7 @@ function layoutCalendarBoard({
   const eventsByCell = Array.from({ length: count }, () => []);
   const hiddenCountByCell = new Array(count).fill(0);
   const moreLaneByWeek = new Array(weekCount).fill(-1);
+  const moreReplacedByCell = new Array(count).fill(false);
   const runs = [];
   events.forEach((event, order) => {
     const start = event.date;
@@ -14069,9 +14076,15 @@ function layoutCalendarBoard({
     const week = Math.floor(run.startIndex / 7);
     const moreLane = moreLaneByWeek[week];
     const limit = moreLane < 0 ? rowCapacity : moreLane;
-    if (run.lane >= limit) {
-      for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
-      continue;
+    let lane = run.lane;
+    if (lane >= limit) {
+      const focused = focusedEventId != null && run.event.id === focusedEventId && moreLane >= 0;
+      if (!focused) {
+        for (let i = run.startIndex; i <= run.endIndex; i++) hiddenCountByCell[i] += 1;
+        continue;
+      }
+      lane = moreLane;
+      for (let i = run.startIndex; i <= run.endIndex; i++) moreReplacedByCell[i] = true;
     }
     const { event } = run;
     segmentsByCell[run.startIndex].push({
@@ -14079,12 +14092,18 @@ function layoutCalendarBoard({
       key: `${event.id ?? `${event.date}-${run.order}`}-${run.startIndex}`,
       startIndex: run.startIndex,
       span: run.endIndex - run.startIndex + 1,
-      lane: run.lane,
+      lane,
       startsHere: cells[run.startIndex].date === event.date,
       endsHere: cells[run.endIndex].date === eventEndDate(event)
     });
   }
-  return { segmentsByCell, eventsByCell, hiddenCountByCell, moreLaneByWeek };
+  return {
+    segmentsByCell,
+    eventsByCell,
+    hiddenCountByCell,
+    moreLaneByWeek,
+    moreReplacedByCell
+  };
 }
 
 // src/components/SCalendarBoard/calendarBoard.config.ts
@@ -14114,6 +14133,7 @@ var CALENDAR_BOARD_EVENT_PRESETS = {
   white: { bg: BG("white"), dot: "grey" }
 };
 var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
+var CALENDAR_BOARD_DIM_OPACITY = 0.4;
 var CALENDAR_BOARD_DAY_COLORS = [
   "default",
   "danger",
@@ -14133,6 +14153,7 @@ function CalendarEventButton({
   onSelect,
   flatStart = false,
   flatEnd = false,
+  dimmed = false,
   className,
   style
 }) {
@@ -14160,7 +14181,11 @@ function CalendarEventButton({
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style: { ...style, "--ceb-bg": preset.bg },
+      style: {
+        ...style,
+        "--ceb-bg": preset.bg,
+        ...dimmed && { opacity: CALENDAR_BOARD_DIM_OPACITY }
+      },
       onClick: (e) => {
         if (disabled) return;
         onSelect?.(event, e);
@@ -14204,7 +14229,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", dimmed = false, onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -14217,7 +14242,7 @@ var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreB
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
-      style,
+      style: dimmed ? { ...style, opacity: CALENDAR_BOARD_DIM_OPACITY } : style,
       onClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -14252,6 +14277,8 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   body,
   hiddenCount,
   moreLane,
+  moreReplaced,
+  focusedEventId,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -14259,6 +14286,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
   onOpenEvents,
   ...rest
 }, ref) {
+  const focusing = focusedEventId != null;
   const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
@@ -14320,6 +14348,7 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
             event: segment.event,
             flatStart: !segment.startsHere,
             flatEnd: !segment.endsHere,
+            dimmed: focusing && segment.event.id !== focusedEventId,
             className: "absolute z-10",
             style: {
               top: laneTop(segment.lane),
@@ -14333,11 +14362,12 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
           },
           segment.key
         )),
-        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        body == null && hiddenCount > 0 && moreLane >= 0 && !moreReplaced && /* @__PURE__ */ jsxRuntime.jsx(
           CalendarMoreButton,
           {
             count: hiddenCount,
             label: moreLabel,
+            dimmed: focusing,
             className: "absolute z-10",
             style: {
               top: laneTop(moreLane),
@@ -14435,6 +14465,7 @@ function SCalendarBoard({
   events,
   dayColors,
   dayContent,
+  focusedEventId,
   onEventClick,
   onMoreClick,
   todayLabel = "\uC624\uB298",
@@ -14485,8 +14516,14 @@ function SCalendarBoard({
     const blockedDates = new Set(
       cells.filter((cell) => dayContent?.[cell.date] != null).map((cell) => cell.date)
     );
-    return layoutCalendarBoard({ cells, events: events ?? [], rowCapacity, blockedDates });
-  }, [cells, events, rowCapacity, dayContent]);
+    return layoutCalendarBoard({
+      cells,
+      events: events ?? [],
+      rowCapacity,
+      blockedDates,
+      focusedEventId
+    });
+  }, [cells, events, rowCapacity, dayContent, focusedEventId]);
   const openIndex = openDate == null ? -1 : cells.findIndex((cell) => cell.date === openDate);
   const openEvents = openIndex < 0 ? [] : layout.eventsByCell[openIndex];
   react.useLayoutEffect(() => {
@@ -14647,6 +14684,8 @@ function SCalendarBoard({
                         body: content,
                         hiddenCount: layout.hiddenCountByCell[index],
                         moreLane: layout.moreLaneByWeek[Math.floor(index / 7)],
+                        moreReplaced: layout.moreReplacedByCell[index],
+                        focusedEventId,
                         isOpen: openDate === cell.date,
                         moreLabel,
                         onDaySelect: (date) => onValueChange?.(date, list),
@@ -27530,7 +27569,6 @@ exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
 exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
 exports.CHIP_COLORS = CHIP_COLORS;
 exports.COLOR_KEYS = COLOR_KEYS;
-exports.CONTEXT_ALERT_DEFAULT_ICON = CONTEXT_ALERT_DEFAULT_ICON;
 exports.CONTEXT_ALERT_ICON_COLOR = CONTEXT_ALERT_ICON_COLOR;
 exports.CONTEXT_ALERT_INTENTS = CONTEXT_ALERT_INTENTS;
 exports.CONTEXT_ALERT_SURFACE = CONTEXT_ALERT_SURFACE;