sellmate-design-system-react 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -5272,9 +5272,24 @@ var SGnb = react.forwardRef(function SGnb2({
             onMouseEnter: () => setHoveredKey(item.value),
             onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
             children: [
-              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: M.depth1Icon, color: C.itemIcon, className: "shrink-0" }),
+              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: item.icon,
+                  size: M.depth1Icon,
+                  color: isSelected ? C.itemColorActive : C.itemIcon,
+                  className: "shrink-0"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex flex-no-wrap items-center", children: [
-                depth > 1 && iconBranch ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[20px] h-[24px] flex items-center justify-center mr-[8px]", children: "-" }) : null,
+                depth > 1 && iconBranch ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-[20px] flex items-center justify-center mr-[8px]",
+                    style: { height: M.itemLineHeight },
+                    children: "-"
+                  }
+                ) : null,
                 item.label
               ] }),
               item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5333,10 +5348,11 @@ var SGnb = react.forwardRef(function SGnb2({
   }, [layout, railHasLeaf, showMenu]);
   const railFolded = folded && header === "fix";
   const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : bodyWidth;
+  const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
   const rootStyle = {
     width: rootWidth,
     transition: `width ${GNB_FOLD_MS}ms ease-out`,
-    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg, borderRight: rightBorder },
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
@@ -5503,6 +5519,8 @@ var SGnb = react.forwardRef(function SGnb2({
                     paddingTop: M.bodyPaddingY,
                     paddingBottom: M.bodyPaddingY,
                     backgroundColor: C.panelBg,
+                    // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                    borderRight: header === "full" ? rightBorder : void 0,
                     pointerEvents: "auto"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
@@ -5759,6 +5777,169 @@ function SPagination({
     }
   );
 }
+
+// src/components/SStepper/stepper.config.ts
+var STEPPER_SIZES = ["sm", "lg"];
+var V2 = (path) => `var(--cmp-stepper-${path})`;
+var STEPPER_SIZE_CONFIG = {
+  sm: {
+    sequenceSize: V2("sm-sequence-size"),
+    fontSize: "12px",
+    lineHeight: "20px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  },
+  lg: {
+    sequenceSize: V2("lg-sequence-size"),
+    fontSize: "14px",
+    lineHeight: "24px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  }
+};
+var STEPPER_LAYOUT = {
+  containerGap: V2("container-gap"),
+  itemGap: V2("item-gap"),
+  dashWidth: V2("dash-width"),
+  sequenceRadius: V2("sequence-radius"),
+  sequenceBorderWidth: V2("sequence-border-witdh"),
+  sequenceIcon: V2("sequence-icon")
+};
+var STEPPER_COLORS = {
+  dash: V2("dash-color"),
+  sequenceBorder: {
+    active: V2("sequence-border-active"),
+    default: V2("sequence-border-default"),
+    completed: V2("sequence-border-completed")
+  },
+  sequenceBg: {
+    active: V2("sequence-bg-active"),
+    default: V2("sequence-bg-default"),
+    completed: V2("sequence-bg-completed")
+  },
+  sequenceText: {
+    active: V2("sequence-text-active"),
+    default: V2("sequence-text-default")
+  },
+  text: {
+    active: V2("text-active"),
+    default: V2("text-default")
+  }
+};
+function getItemValue(item, index) {
+  return item.value ?? String(index + 1);
+}
+function SStepper({
+  items,
+  value,
+  size = "sm",
+  ariaLabel = "\uC9C4\uD589 \uB2E8\uACC4",
+  className,
+  style
+}) {
+  const config = STEPPER_SIZE_CONFIG[size];
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item, index) => getItemValue(item, index) === value)
+  );
+  const getState = (index) => {
+    if (index < activeIndex) return "completed";
+    if (index === activeIndex) return "active";
+    return "default";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center", className),
+      style: {
+        gap: STEPPER_LAYOUT.containerGap,
+        fontSize: config.fontSize,
+        lineHeight: config.lineHeight,
+        ...style
+      },
+      children: items.map((item, index) => {
+        const state2 = getState(index);
+        const itemStyle = {
+          gap: STEPPER_LAYOUT.itemGap,
+          color: state2 === "active" ? STEPPER_COLORS.text.active : STEPPER_COLORS.text.default,
+          fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
+        };
+        const sequenceStyle = {
+          width: config.sequenceSize,
+          height: config.sequenceSize,
+          flexBasis: config.sequenceSize,
+          borderRadius: STEPPER_LAYOUT.sequenceRadius,
+          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]
+        };
+        const content = /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            role: "listitem",
+            "aria-current": state2 === "active" ? "step" : void 0,
+            className: "inline-flex items-center whitespace-nowrap",
+            style: itemStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
+                  style: sequenceStyle,
+                  children: state2 === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          }
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "inline-flex items-center",
+            style: { gap: STEPPER_LAYOUT.containerGap },
+            children: [
+              content,
+              index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "inline-flex h-px shrink-0 items-center",
+                  style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "1",
+                      viewBox: "0 0 20 1",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "line",
+                        {
+                          y1: "0.5",
+                          x2: "20",
+                          y2: "0.5",
+                          stroke: "#888888",
+                          strokeDasharray: "4 4"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          getItemValue(item, index)
+        );
+      })
+    }
+  );
+}
 function SCheckbox({
   value = false,
   val,
@@ -10196,15 +10377,15 @@ var SBarcodeInput = react.forwardRef(
 );
 
 // src/components/STimePicker/timepicker.config.ts
-var V2 = (path) => `var(--cmp-timepicker-${path})`;
+var V3 = (path) => `var(--cmp-timepicker-${path})`;
 var TIMEPICKER_SIZES = ["sm", "md"];
 var TIMEPICKER_SIZE_CONFIG = {
   sm: {
-    height: V2("sm-height"),
-    paddingX: V2("sm-paddingX"),
-    gap: V2("sm-gap"),
-    icon: V2("sm-icon"),
-    radius: V2("sm-radius"),
+    height: V3("sm-height"),
+    paddingX: V3("sm-paddingX"),
+    gap: V3("sm-gap"),
+    icon: V3("sm-icon"),
+    radius: V3("sm-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 12,
     lineHeight: 20,
@@ -10212,11 +10393,11 @@ var TIMEPICKER_SIZE_CONFIG = {
     fieldMinWidth: 128
   },
   md: {
-    height: V2("md-height"),
-    paddingX: V2("md-paddingX"),
-    gap: V2("md-gap"),
-    icon: V2("md-icon"),
-    radius: V2("md-radius"),
+    height: V3("md-height"),
+    paddingX: V3("md-paddingX"),
+    gap: V3("md-gap"),
+    icon: V3("md-icon"),
+    radius: V3("md-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 14,
     lineHeight: 24,
@@ -11099,7 +11280,9 @@ exports.SRadio = SRadio;
 exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
 exports.SSelect = SSelect;
+exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
+exports.STEPPER_SIZES = STEPPER_SIZES;
 exports.STable = STable;
 exports.STabs = STabs;
 exports.STag = STag;