sellmate-design-system-react 9.0.0-beta.30 → 9.0.0-beta.31

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, useId, Children, cloneElement, useImperativeHandle, useLayoutEffect, Fragment as Fragment$1, isValidElement, useSyncExternalStore, Component } from 'react';
+import { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, useId, Children, cloneElement, useImperativeHandle, Fragment as Fragment$1, useLayoutEffect, isValidElement, useSyncExternalStore, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
@@ -9285,13 +9285,26 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     "topContent"
   ) : null;
   const systemMenuContext = useMemo(
-    () => ({ color, folded: false }),
+    () => ({ color, folded: false, placement: "panel" }),
     [color]
   );
   const systemFoldedContext = useMemo(
-    () => ({ color, folded: true }),
+    () => ({ color, folded: true, placement: "panel" }),
     [color]
   );
+  const systemTopContext = useMemo(
+    () => ({ color, folded: false, placement: "top" }),
+    [color]
+  );
+  const systemTopBox = header === "full" && system ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center",
+      style: { marginLeft: topContentBox ? H.topGap : "auto" },
+      children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemTopContext, children: system })
+    },
+    "system"
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9333,7 +9346,8 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
               launcherButton,
               foldButton,
               logoBox,
-              topContentBox
+              topContentBox,
+              systemTopBox
             ] })
           }
         ),
@@ -9413,7 +9427,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                             }
                           ),
                           menuFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: menuFooter }),
-                          system && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemMenuContext, children: system }) })
+                          !isFull && system && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemMenuContext, children: system }) })
                         ]
                       }
                     )
@@ -9450,6 +9464,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
 
 // src/components/SGnbSystem/gnbSystem.config.ts
 var GNB_SYSTEM_COLORS = ["light", "dark"];
+var GNB_SYSTEM_PLACEMENTS = ["panel", "top"];
 var panel = (p) => `var(--cmp-gnb-system-panel-${p})`;
 var domain = (p) => `var(--cmp-gnb-system-domainTag-${p})`;
 var item2 = (p) => `var(--cmp-gnb-system-item-${p})`;
@@ -9480,6 +9495,27 @@ var GNB_SYSTEM_COLOR_CONFIG = {
     alertHoverBg: void 0
   }
 };
+var GNB_SYSTEM_TOP_COLOR_CONFIG = {
+  light: {
+    item: "light",
+    divider: panel("divider-color-light"),
+    domainBg: domain("light-bg"),
+    domainText: domain("light-text"),
+    alertIcon: alert("icon-color-notification-light"),
+    alertCount: alert("count-color-light"),
+    alertHoverBg: alert("bg-notificationHover-light")
+  },
+  dark: {
+    item: "darker",
+    divider: panel("divider-color-darker"),
+    domainBg: domain("darker-bg"),
+    domainText: domain("darker-text"),
+    alertIcon: alert("icon-color-notification-dark"),
+    alertCount: alert("count-color-dark"),
+    // darker 면에는 알림 hover 배경 토큰이 없다 → 행 기본 hover 를 그대로 쓴다.
+    alertHoverBg: void 0
+  }
+};
 var GNB_SYSTEM_LAYOUT = {
   /** 펼친 패널의 안쪽 여백 */
   padding: "var(--cmp-gnb-system-project-padding)",
@@ -9592,6 +9628,7 @@ function SystemButton({
 var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
   color: colorProp,
   folded: foldedProp,
+  placement: placementProp,
   actions,
   domain: domain2,
   alert: alert2,
@@ -9603,8 +9640,18 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
 }, ref) {
   const gnb2 = useContext(SGnbSystemContext);
   const color = colorProp ?? gnb2?.color ?? "light";
-  const folded = foldedProp ?? gnb2?.folded ?? false;
+  const placement = placementProp ?? gnb2?.placement ?? "panel";
+  const isTop = placement === "top";
+  const folded = !isTop && (foldedProp ?? gnb2?.folded ?? false);
   const c = GNB_SYSTEM_COLOR_CONFIG[color];
+  const t = GNB_SYSTEM_TOP_COLOR_CONFIG[color];
+  const itemColor = isTop ? t.item : color;
+  const dividerColor = isTop ? t.divider : c.divider;
+  const domainBg = isTop ? t.domainBg : c.domainBg;
+  const domainText = isTop ? t.domainText : c.domainText;
+  const alertIconColor = isTop ? t.alertIcon : c.alertIcon;
+  const alertCountColor = isTop ? t.alertCount : c.alertCount;
+  const alertHoverBg = isTop ? t.alertHoverBg : c.alertHoverBg;
   const hasActions = (actions?.length ?? 0) > 0;
   const hasDomain = domain2 != null;
   const hasUserBlock = Boolean(alert2 || setting || account);
@@ -9615,20 +9662,109 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
   const alertButton = alert2 && /* @__PURE__ */ jsx(
     SystemButton,
     {
-      color,
+      color: itemColor,
       icon: notified ? "alert" : "bell",
-      label: folded ? void 0 : alertLabel,
+      label: folded || isTop ? void 0 : alertLabel,
       ariaLabel: alertLabel,
       paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-      iconColor: notified ? c.alertIcon : void 0,
-      hoverBg: notified ? c.alertHoverBg : void 0,
+      iconColor: notified ? alertIconColor : void 0,
+      hoverBg: notified ? alertHoverBg : void 0,
       count: folded ? void 0 : alertCount,
       dot: folded && notified,
-      accentColor: c.alertCount,
-      stretch: !folded,
+      accentColor: alertCountColor,
+      stretch: !folded && !isTop,
       onClick: alert2.onClick
     }
   );
+  const settingButton = setting && /* @__PURE__ */ jsx(
+    SystemButton,
+    {
+      color: itemColor,
+      icon: "setting",
+      label: isTop ? void 0 : settingLabel,
+      ariaLabel: settingLabel,
+      paddingX: GNB_SYSTEM_LAYOUT.settingPaddingX,
+      stretch: !isTop && !alert2,
+      onClick: setting.onClick
+    }
+  );
+  const accountButton = account && /* @__PURE__ */ jsx(
+    SSystemActionButton,
+    {
+      color: itemColor,
+      type: "account",
+      label: account.label,
+      onClick: account.onClick,
+      className: isTop ? "w-auto shrink-0" : void 0
+    }
+  );
+  const domainTag = hasDomain && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "typo-body-sm-medium box-border",
+        isTop ? "shrink-0 whitespace-nowrap" : "w-full truncate text-center"
+      ),
+      style: {
+        paddingInline: GNB_SYSTEM_LAYOUT.domainPaddingX,
+        paddingBlock: GNB_SYSTEM_LAYOUT.domainPaddingY,
+        borderRadius: GNB_SYSTEM_LAYOUT.domainRadius,
+        backgroundColor: domainBg,
+        color: domainText
+      },
+      children: domain2
+    }
+  );
+  if (isTop) {
+    const segments = [];
+    actions?.forEach(
+      ({ value, ...action2 }, index) => segments.push({
+        key: `action-${value ?? index}`,
+        node: /* @__PURE__ */ jsx(
+          SSystemActionButton,
+          {
+            color: itemColor,
+            className: "w-auto shrink-0",
+            ...action2
+          }
+        )
+      })
+    );
+    if (alertButton) segments.push({ key: "alert", node: alertButton });
+    if (settingButton) segments.push({ key: "setting", node: settingButton });
+    if (domainTag || accountButton) {
+      segments.push({
+        key: "user",
+        node: /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
+          domainTag,
+          accountButton
+        ] })
+      });
+    }
+    if (segments.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center", className),
+        style: { gap: GNB_SYSTEM_LAYOUT.gap, ...style },
+        "data-color": color,
+        "data-placement": "top",
+        ...rest,
+        children: segments.map(({ key, node }, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-sd-16 w-px shrink-0",
+              style: { backgroundColor: dividerColor },
+              "aria-hidden": true
+            }
+          ),
+          node
+        ] }, key))
+      }
+    );
+  }
   const panelStyle = {
     backgroundColor: c.bg,
     // 색에 따라 경계선이 없을 수 있다 — 배경 차이만으로 경계가 읽히는 dark 가 그렇다.
@@ -9645,6 +9781,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
         className: cn("box-border flex w-full flex-col", className),
         style: panelStyle,
         "data-color": color,
+        "data-placement": "panel",
         "data-folded": "",
         ...rest,
         children: [
@@ -9652,7 +9789,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
           account && /* @__PURE__ */ jsx(
             SystemButton,
             {
-              color,
+              color: itemColor,
               icon: "user",
               ariaLabel: account.label ?? "account",
               paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
@@ -9671,31 +9808,19 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
       className: cn("box-border flex w-full flex-col", className),
       style: { ...panelStyle, gap: GNB_SYSTEM_LAYOUT.gap },
       "data-color": color,
+      "data-placement": "panel",
       ...rest,
       children: [
         actions?.map(({ value, ...action2 }, index) => /* @__PURE__ */ jsx(
           SSystemActionButton,
           {
-            color,
+            color: itemColor,
             ...action2
           },
           value ?? index
         )),
-        hasActions && (hasDomain || hasUserBlock) && /* @__PURE__ */ jsx("div", { className: "h-px shrink-0", style: { backgroundColor: c.divider } }),
-        domain2 != null && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "typo-body-sm-medium box-border w-full truncate text-center",
-            style: {
-              paddingInline: GNB_SYSTEM_LAYOUT.domainPaddingX,
-              paddingBlock: GNB_SYSTEM_LAYOUT.domainPaddingY,
-              borderRadius: GNB_SYSTEM_LAYOUT.domainRadius,
-              backgroundColor: c.domainBg,
-              color: c.domainText
-            },
-            children: domain2
-          }
-        ),
+        hasActions && (hasDomain || hasUserBlock) && /* @__PURE__ */ jsx("div", { className: "h-px shrink-0", style: { backgroundColor: dividerColor } }),
+        domainTag,
         hasUserBlock && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           (alert2 || setting) && /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
             alertButton,
@@ -9703,32 +9828,13 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
               "span",
               {
                 className: "h-sd-16 w-px shrink-0",
-                style: { backgroundColor: c.divider },
+                style: { backgroundColor: dividerColor },
                 "aria-hidden": true
               }
             ),
-            setting && /* @__PURE__ */ jsx(
-              SystemButton,
-              {
-                color,
-                icon: "setting",
-                label: settingLabel,
-                ariaLabel: settingLabel,
-                paddingX: GNB_SYSTEM_LAYOUT.settingPaddingX,
-                stretch: !alert2,
-                onClick: setting.onClick
-              }
-            )
+            settingButton
           ] }),
-          account && /* @__PURE__ */ jsx(
-            SSystemActionButton,
-            {
-              color,
-              type: "account",
-              label: account.label,
-              onClick: account.onClick
-            }
-          )
+          accountButton
         ] })
       ]
     }
@@ -18018,8 +18124,16 @@ var createPeriodValue = (unit, maxRange) => ({
   unit,
   value: getDefaultPeriodInputValue(unit, maxRange)
 });
+var singleOptionValue = (field) => {
+  if (field.type !== "select" && field.type !== "select-multi") return void 0;
+  const options = field.options ?? [];
+  if (options.length !== 1 || options[0].disabled === true) return void 0;
+  return options[0].value;
+};
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
+  const only = singleOptionValue(field);
+  if (only !== void 0) return field.type === "select-multi" ? [only] : only;
   if (field.type === "datepicker-range") {
     if (!isInlineDateField(field) && !field.required) return void 0;
     const today = todayIso();
@@ -18118,7 +18232,7 @@ var displayValue = (field, value) => {
   if (field.type === "select-multi") {
     const values = toArrayValue(value);
     const selectableValues = (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value);
-    if (selectableValues.length > 0 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
+    if (selectableValues.length > 1 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
       return "\uC804\uCCB4";
     }
     return formatValueList(values.map((v) => optionLabel(field, v)));
@@ -21034,6 +21148,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, 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, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, 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, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, 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, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, 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, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, 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, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, 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, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map