sellmate-design-system-react 5.0.1 → 6.0.0

package/dist/index.js

@@ -4720,6 +4720,11 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
   ] });
 });
 var STooltip2 = /* @__PURE__ */ withDisplayName(STooltipImpl, "STooltip");
+var BODY_PADDING_CLASS = {
+  default: "p-(--sys-space-panel-padding-default)",
+  wide: "p-(--sys-space-panel-padding-wide)",
+  none: ""
+};
 var topBorderColorClass = {
   default: "bg-(--cmp-sectionHeaderCard-topBorder-color-default)",
   accent: "bg-(--cmp-sectionHeaderCard-topBorder-color-accent)"
@@ -4729,8 +4734,8 @@ var titleSizeClass = {
   sm: "typo-heading-sm"
 };
 var SSectionHeaderCardBodyImpl = /* @__PURE__ */ forwardRef(
-  function SSectionHeaderCardBody({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className, ...rest, children });
+  function SSectionHeaderCardBody({ padding = "default", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], className), ...rest, children });
   }
 );
 var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
@@ -6387,7 +6392,7 @@ var DEFAULT_MAIN_BUTTON = {
 function SConfirmModal({
   open,
   onOpenChange,
-  persistent,
+  persistent = false,
   type = "positive",
   modalTitle = "",
   titleClass,
@@ -7128,6 +7133,8 @@ var SModal = {
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader;
 var SLayoutContext = /* @__PURE__ */ createContext(null);
+var SLAYOUT_MIN_WIDTH = 1366;
+var SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
 function useSLayout() {
   const ctx = useContext(SLayoutContext);
   if (!ctx) throw new Error("useSLayout \uC740 <SLayout> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
@@ -7173,6 +7180,10 @@ var SLayout = /* @__PURE__ */ forwardRef(function SLayout2({
     [type, effectiveHeader, useRail, currentFolded, setFolded, registerNav]
   );
   const isFullHeader = effectiveHeader === "full";
+  const minWidthStyle = {
+    containerType: "inline-size",
+    [SLAYOUT_MIN_WIDTH_VAR]: `${SLAYOUT_MIN_WIDTH}px`
+  };
   const frameStyle = isFullHeader ? {
     // 자식이 좌표가 아니라 이름으로 자리를 잡게 한다 — 열·행이 늘어도 자식을 고칠 일이 없다.
     gridTemplateAreas: '"header header" "nav page"',
@@ -7193,7 +7204,7 @@ var SLayout = /* @__PURE__ */ forwardRef(function SLayout2({
         isFullHeader ? "grid" : "flex flex-row",
         className
       ),
-      style: { ...frameStyle, ...style },
+      style: { ...minWidthStyle, ...frameStyle, ...style },
       ...rest,
       children
     }
@@ -7817,12 +7828,13 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     }
   );
 });
+var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
   frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
   screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
-var SPage = /* @__PURE__ */ forwardRef(function SPage2({ background = "frame", className, style, children, ...rest }, ref) {
+var SPage = /* @__PURE__ */ forwardRef(function SPage2({ background = "frame", scrollEndSpacing = true, className, style, children, ...rest }, ref) {
   const layout = useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
   return /* @__PURE__ */ jsx(
@@ -7830,14 +7842,17 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({ background = "frame", c
     {
       ref,
       className: cn(
-        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding)]",
+        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        // 스크롤 끝 여백은 아직 전용 토큰이 없어 스케일 값을 직접 쓴다.
+        // component.pageBody.padding.scrollEnd 가 들어오면 var() 참조로 바꾼다.
+        scrollEndSpacing && "pb-sd-80",
         SCROLLBAR_CLASS,
         BACKGROUND_CLASS[background],
         className
       ),
       style: { ...gridStyle, ...style },
       ...rest,
-      children
+      children: /* @__PURE__ */ jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
 });
@@ -8095,15 +8110,15 @@ var STEPPER_SIZE_CONFIG = {
   }
 };
 var STEPPER_LAYOUT = {
-  containerGap: V2("container-gap"),
+  containerGap: V2("horizontal-gap"),
   itemGap: V2("item-gap"),
-  dashWidth: V2("dash-width"),
+  dashWidth: V2("horizontal-dash-width"),
   sequenceRadius: V2("sequence-radius"),
   sequenceBorderWidth: V2("sequence-border-width"),
   sequenceIcon: V2("sequence-icon")
 };
 var STEPPER_COLORS = {
-  dash: V2("dash-color"),
+  dash: V2("horizontal-dash-color"),
   sequenceBorder: {
     active: V2("sequence-border-active"),
     default: V2("sequence-border-default"),
@@ -8120,7 +8135,8 @@ var STEPPER_COLORS = {
   },
   text: {
     active: V2("text-active"),
-    default: V2("text-default")
+    default: V2("text-default"),
+    completed: V2("text-completed")
   }
 };
 function getItemValue(item, index) {
@@ -8160,7 +8176,7 @@ function SStepper({
         const state2 = getState(index);
         const itemStyle = {
           gap: STEPPER_LAYOUT.itemGap,
-          color: state2 === "active" ? STEPPER_COLORS.text.active : STEPPER_COLORS.text.default,
+          color: STEPPER_COLORS.text[state2],
           fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
         };
         const sequenceStyle = {
@@ -8171,7 +8187,7 @@ function SStepper({
           borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
           borderColor: STEPPER_COLORS.sequenceBorder[state2],
           background: STEPPER_COLORS.sequenceBg[state2],
-          color: state2 === "completed" ? STEPPER_COLORS.text.default : STEPPER_COLORS.sequenceText[state2]
+          color: state2 === "completed" ? STEPPER_COLORS.text.completed : STEPPER_COLORS.sequenceText[state2]
         };
         const content = /* @__PURE__ */ jsxs(
           "span",
@@ -10577,10 +10593,10 @@ function SCalendar({
             )
           ] }),
           /* @__PURE__ */ jsx(
-            "span",
+            SDivider,
             {
-              className: "h-[16px] w-px bg-[var(--cmp-datepicker-calendar-header-divider)]",
-              "aria-hidden": true
+              vertical: true,
+              className: "h-[var(--cmp-datepicker-calendar-header-divider-height)] self-center"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
@@ -10671,13 +10687,7 @@ function SCalendar({
           );
         }) }),
         legend.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-header-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsx(SDivider, {}),
           /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] text-[11px] leading-[18px]", children: legend.map((item) => /* @__PURE__ */ jsxs(
             "span",
             {
@@ -11122,23 +11132,11 @@ function RangeCalendar({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
           renderPanel(y, m, true),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsx(SDivider, { vertical: true }),
           renderPanel(nextMonthYM.year, nextMonthYM.month, false)
         ] }),
         useTimePicker && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-range-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsx(SDivider, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
             renderTimeSection("start", start, "\uBD80\uD130"),
             renderTimeSection("end", end, "\uAE4C\uC9C0")
@@ -13773,6 +13771,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map