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

package/dist/index.js

@@ -4282,6 +4282,7 @@ var SButton = /* @__PURE__ */ forwardRef(function SButton2({
 });
 function SFooter({
   bg = "white",
+  size = "md",
   left,
   button,
   children,
@@ -4318,7 +4319,7 @@ function SFooter({
           SButton,
           {
             ...button,
-            size: "md",
+            size,
             color: button.color ?? "primary",
             label: button.label ?? "\uD655\uC778"
           }
@@ -4327,7 +4328,16 @@ function SFooter({
     }
   );
 }
-var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, footerLeft, button, footerClassName, className, children, ...rest }, ref) {
+var SCard = /* @__PURE__ */ forwardRef(function SCard2({
+  bordered = false,
+  footerLeft,
+  button,
+  footerSize = "md",
+  footerClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
   const hasFooter = footerLeft != null || button != null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -4345,6 +4355,7 @@ var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, foote
           SFooter,
           {
             bg: "grey",
+            size: footerSize,
             left: footerLeft,
             button,
             className: cn("px-(--sys-space-panel-padding-default)", footerClassName)
@@ -7632,6 +7643,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
     background,
     footerLeft,
     button,
+    footerSize = "md",
     footerClassName,
     className,
     children,
@@ -7668,6 +7680,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
             SFooter,
             {
               bg: "grey",
+              size: footerSize,
               left: footerLeft,
               button,
               className: cn("px-(--cmp-sectionHeaderCard-header-paddingX)", footerClassName)
@@ -8247,16 +8260,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__ */ forwardRef(function SContextAlert2({
-  intent = "default",
-  messages = [],
-  icon = CONTEXT_ALERT_DEFAULT_ICON,
-  action: action2,
-  className,
-  style
-}, ref) {
+var SContextAlert = /* @__PURE__ */ 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,
@@ -8276,12 +8281,12 @@ var SContextAlert = /* @__PURE__ */ forwardRef(function SContextAlert2({
       ),
       style: { ...vars, ...style },
       children: [
-        /* @__PURE__ */ jsx(
+        icon && /* @__PURE__ */ jsx(
           SIcon,
           {
             name: icon,
             size: "var(--cmp-contextAlert-icon)",
-            color: CONTEXT_ALERT_ICON_COLOR,
+            color: iconColor || CONTEXT_ALERT_ICON_COLOR,
             className: "shrink-0"
           }
         ),
@@ -13976,7 +13981,8 @@ function layoutCalendarBoard({
   cells,
   events,
   rowCapacity,
-  blockedDates
+  blockedDates,
+  focusedEventId
 }) {
   const count = cells.length;
   const weekCount = Math.ceil(count / 7);
@@ -13984,6 +13990,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;
@@ -14041,9 +14048,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({
@@ -14051,12 +14064,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
@@ -14086,6 +14105,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",
@@ -14105,6 +14125,7 @@ function CalendarEventButton({
   onSelect,
   flatStart = false,
   flatEnd = false,
+  dimmed = false,
   className,
   style
 }) {
@@ -14132,7 +14153,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);
@@ -14176,7 +14201,7 @@ function CalendarEventButton({
     }
   );
 }
-var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className, style }, ref) {
+var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", dimmed = false, onClick, className, style }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -14189,7 +14214,7 @@ var CalendarMoreButton = /* @__PURE__ */ forwardRef(function CalendarMoreButton2
         "bg-(--cmp-calendarBoard-moreButton-bg)",
         className
       ),
-      style,
+      style: dimmed ? { ...style, opacity: CALENDAR_BOARD_DIM_OPACITY } : style,
       onClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -14224,6 +14249,8 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   body,
   hiddenCount,
   moreLane,
+  moreReplaced,
+  focusedEventId,
   isOpen,
   moreLabel,
   onDaySelect,
@@ -14231,6 +14258,7 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
   onOpenEvents,
   ...rest
 }, ref) {
+  const focusing = focusedEventId != null;
   const hasEvents = dayEventCount > 0;
   const interactive = selectable || hasEvents;
   const activate = () => {
@@ -14292,6 +14320,7 @@ var CalendarDayCard = /* @__PURE__ */ 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),
@@ -14305,11 +14334,12 @@ var CalendarDayCard = /* @__PURE__ */ forwardRef(function CalendarDayCard2({
           },
           segment.key
         )),
-        body == null && hiddenCount > 0 && moreLane >= 0 && /* @__PURE__ */ jsx(
+        body == null && hiddenCount > 0 && moreLane >= 0 && !moreReplaced && /* @__PURE__ */ jsx(
           CalendarMoreButton,
           {
             count: hiddenCount,
             label: moreLabel,
+            dimmed: focusing,
             className: "absolute z-10",
             style: {
               top: laneTop(moreLane),
@@ -14407,6 +14437,7 @@ function SCalendarBoard({
   events,
   dayColors,
   dayContent,
+  focusedEventId,
   onEventClick,
   onMoreClick,
   todayLabel = "\uC624\uB298",
@@ -14457,8 +14488,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];
   useLayoutEffect(() => {
@@ -14619,6 +14656,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),
@@ -27479,6 +27518,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_DEFAULT_ICON, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map