sellmate-design-system-react 7.0.0 → 7.1.0

package/dist/index.js

@@ -8093,6 +8093,7 @@ function SPagination({
 // src/components/SStepper/stepper.config.ts
 var STEPPER_SIZES = ["sm", "lg"];
 var V2 = (path) => `var(--cmp-stepper-${path})`;
+var VF = (path, fallback) => `var(--cmp-stepper-${path}, ${fallback})`;
 var STEPPER_SIZE_CONFIG = {
   sm: {
     sequenceSize: V2("sm-sequence-size"),
@@ -8122,16 +8123,17 @@ var STEPPER_COLORS = {
   sequenceBorder: {
     active: V2("sequence-border-active"),
     default: V2("sequence-border-default"),
-    completed: V2("sequence-border-completed")
+    completed: VF("sequence-border-completed", "#93C4FF")
   },
   sequenceBg: {
     active: V2("sequence-bg-active"),
     default: V2("sequence-bg-default"),
-    completed: V2("sequence-bg-completed")
+    completed: VF("sequence-bg-completed", "#EFF6FF")
   },
   sequenceText: {
     active: V2("sequence-text-active"),
-    default: V2("sequence-text-default")
+    default: V2("sequence-text-default"),
+    completed: VF("sequence-text-completed", "#0075FF")
   },
   text: {
     active: V2("text-active"),
@@ -8139,27 +8141,428 @@ var STEPPER_COLORS = {
     completed: V2("text-completed")
   }
 };
+var STEPPER_HORIZONTAL_COMPLETED_COLORS = {
+  sequenceBorder: STEPPER_COLORS.sequenceBorder.completed,
+  sequenceBg: STEPPER_COLORS.sequenceBg.completed,
+  sequenceIcon: STEPPER_COLORS.sequenceText.completed,
+  text: STEPPER_COLORS.text.completed
+};
+var STEPPER_VERTICAL_LAYOUT = {
+  width: VF("vertical-width", "240px"),
+  itemGap: VF("vertical-item-gap", "12px"),
+  itemPaddingX: VF("vertical-item-paddingX", "16px"),
+  itemPaddingY: VF("vertical-item-paddingY", "8px"),
+  titlePaddingTop: VF("vertical-title-paddingTop", "12px"),
+  titlePaddingBottom: VF("vertical-title-paddingBottom", "4px"),
+  titleFontSize: VF("vertical-title-font-size", "11px"),
+  titleLineHeight: VF("vertical-title-line-height", "18px"),
+  accentStripeWidth: VF("vertical-item-accentStripe-width", "2px"),
+  accentStripeColor: VF("vertical-item-accentStripe-color", "#64ABFF")
+};
+var STEPPER_VERTICAL_COLORS = {
+  itemBg: {
+    default: VF("vertical-item-bg-default", "#FFFFFF"),
+    hover: VF("vertical-item-bg-hover", "#F6F6F6"),
+    selected: VF("vertical-item-bg-selected", "#EFF6FF")
+  },
+  titleText: VF("vertical-title-text", "#004290"),
+  textDefault: STEPPER_COLORS.text.default,
+  textCompleted: STEPPER_COLORS.text.completed,
+  sequenceBorderActive: STEPPER_COLORS.sequenceBorder.active,
+  sequenceBgActive: STEPPER_COLORS.sequenceBg.active,
+  sequenceTextActive: STEPPER_COLORS.sequenceText.active,
+  sequenceTextDefault: STEPPER_COLORS.sequenceText.default,
+  sequenceBorderCompleted: VF("vertical-sequence-border-completed", "#93C4FF"),
+  sequenceBgCompleted: VF("vertical-sequence-bg-completed", "#EFF6FF"),
+  sequenceIconCompleted: VF("vertical-sequence-icon-completed", "#0075FF"),
+  errorBadge: "#FB4444"
+};
+var ERROR_TOOLTIP_MESSAGE = "\uD655\uC778\uC774 \uD544\uC694\uD55C \uD56D\uBAA9\uC774 \uC788\uC2B5\uB2C8\uB2E4.";
 function getItemValue(item, index) {
   return item.value ?? String(index + 1);
 }
-function SStepper({
+function groupAdjacentItems(items) {
+  return items.reduce(
+    (groups, item, index) => {
+      const currentGroup = item.group;
+      const previous = groups[groups.length - 1];
+      if (currentGroup && previous?.group === currentGroup) {
+        previous.items.push(item);
+        return groups;
+      }
+      groups.push({ group: currentGroup, startIndex: index, items: [item] });
+      return groups;
+    },
+    []
+  );
+}
+var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
   items,
   value,
   size = "sm",
+  vertical = false,
+  clickable,
+  onValueChange,
   ariaLabel = "\uC9C4\uD589 \uB2E8\uACC4",
   className,
   style
-}) {
+}, ref) {
   const config = STEPPER_SIZE_CONFIG[size];
+  const isClickable = clickable ?? vertical;
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [tooltipHoverValue, setTooltipHoverValue] = useState(null);
+  const [customTooltipOpen, setCustomTooltipOpen] = useState(false);
+  const [verticalAccentStripeStyle, setVerticalAccentStripeStyle] = useState({
+    height: 0,
+    opacity: 0,
+    transform: "translateY(0px)"
+  });
+  const verticalItemRefs = useRef([]);
   const activeIndex = Math.max(
     0,
     items.findIndex((item, index) => getItemValue(item, index) === value)
   );
-  const getState = (index) => {
-    if (index < activeIndex) return "completed";
+  const lastCompletedIndex = items.reduce(
+    (lastIndex, item, index) => item.completed === true ? index : lastIndex,
+    -1
+  );
+  const resolvedClickableIndex = lastCompletedIndex + 1;
+  const [visitedMaxIndex, setVisitedMaxIndex] = useState(activeIndex);
+  const firstErrorIndex = items.findIndex((item) => item.error === true);
+  useImperativeHandle(
+    ref,
+    () => ({
+      showItemTooltip: () => setCustomTooltipOpen(true),
+      hideItemTooltip: () => setCustomTooltipOpen(false)
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    setVisitedMaxIndex((current) => Math.max(current, activeIndex));
+  }, [activeIndex]);
+  useLayoutEffect(() => {
+    setCustomTooltipOpen(false);
+  }, [activeIndex]);
+  useLayoutEffect(() => {
+    if (!vertical) return;
+    const activeItem = verticalItemRefs.current[activeIndex];
+    if (!activeItem) {
+      setVerticalAccentStripeStyle((current) => ({ ...current, opacity: 0 }));
+      return;
+    }
+    setVerticalAccentStripeStyle({
+      height: activeItem.offsetHeight,
+      opacity: 1,
+      transform: `translateY(${activeItem.offsetTop}px)`
+    });
+  }, [activeIndex, vertical, items]);
+  const getState = (item, index) => {
     if (index === activeIndex) return "active";
+    if (item.completed != null) return item.completed ? "completed" : "default";
     return "default";
   };
+  const emitValueChange = (item, index) => {
+    onValueChange?.(getItemValue(item, index), item, index);
+  };
+  const isWithinClickableIndex = (index) => index <= resolvedClickableIndex;
+  const renderStepContent = (item, index, options = {}) => {
+    const { isVertical = false, roleListItem = true, hovered = false } = options;
+    const state2 = getState(item, index);
+    const isHorizontalCompleted = !isVertical && state2 === "completed";
+    const isVerticalCompleted = isVertical && state2 === "completed";
+    const isVerticalLastActive = isVertical && state2 === "default" && index === visitedMaxIndex;
+    const showsCheckIcon = state2 === "completed";
+    const itemColor = (() => {
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.text;
+      if (!isVertical) return STEPPER_COLORS.text[state2];
+      if (state2 === "active") return STEPPER_COLORS.text.active;
+      if (isVerticalCompleted) return STEPPER_VERTICAL_COLORS.textCompleted;
+      return STEPPER_VERTICAL_COLORS.textDefault;
+    })();
+    const sequenceBorderColor = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceBorderCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceBorderActive;
+      }
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceBorder;
+      return STEPPER_COLORS.sequenceBorder[state2];
+    })();
+    const sequenceBg = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceBgCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceBgActive;
+      }
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceBg;
+      return STEPPER_COLORS.sequenceBg[state2];
+    })();
+    const sequenceColor = (() => {
+      if (isVerticalCompleted) {
+        return STEPPER_VERTICAL_COLORS.sequenceIconCompleted;
+      }
+      if (isVertical && (state2 === "active" || isVerticalLastActive)) {
+        return STEPPER_VERTICAL_COLORS.sequenceTextActive;
+      }
+      if (isVertical) return STEPPER_VERTICAL_COLORS.sequenceTextDefault;
+      if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceIcon;
+      return STEPPER_COLORS.sequenceText[state2];
+    })();
+    const itemStyle = {
+      gap: STEPPER_LAYOUT.itemGap,
+      color: itemColor,
+      fontWeight: state2 === "active" || isVertical && hovered ? config.fontWeightActive : config.fontWeightDefault
+    };
+    const sequenceStyle = {
+      width: config.sequenceSize,
+      height: config.sequenceSize,
+      flexBasis: config.sequenceSize,
+      borderRadius: STEPPER_LAYOUT.sequenceRadius,
+      borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
+      borderColor: sequenceBorderColor,
+      background: sequenceBg,
+      color: sequenceColor
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: roleListItem ? "listitem" : void 0,
+        "aria-current": roleListItem && state2 === "active" ? "step" : void 0,
+        className: "inline-flex items-center whitespace-nowrap",
+        style: itemStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
+              style: sequenceStyle,
+              children: showsCheckIcon ? /* @__PURE__ */ jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  };
+  const renderClickableStepContent = (item, index, isVertical = false) => {
+    const isDisabled = !isWithinClickableIndex(index);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        className: cn(
+          "m-0 inline-flex w-full items-center border-0 bg-transparent p-0 text-left",
+          isDisabled ? "cursor-default" : "cursor-pointer"
+        ),
+        style: { font: "inherit", color: "inherit" },
+        onClick: () => {
+          if (!isDisabled) emitValueChange(item, index);
+        },
+        children: renderStepContent(item, index, { isVertical, roleListItem: false })
+      }
+    );
+  };
+  if (vertical) {
+    const groups = groupAdjacentItems(items);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "list",
+        "aria-label": ariaLabel,
+        className: cn("relative inline-flex flex-col items-start", className),
+        style: {
+          width: STEPPER_VERTICAL_LAYOUT.width,
+          fontSize: config.fontSize,
+          lineHeight: config.lineHeight,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-stepper-accent-stripe": "true",
+              className: "pointer-events-none absolute left-0 top-0 z-[1]",
+              style: {
+                width: STEPPER_VERTICAL_LAYOUT.accentStripeWidth,
+                background: STEPPER_VERTICAL_LAYOUT.accentStripeColor,
+                transition: "transform 160ms ease, height 160ms ease, opacity 120ms ease",
+                ...verticalAccentStripeStyle
+              }
+            }
+          ),
+          groups.map((group) => {
+            const groupKey = group.group ?? getItemValue(group.items[0], group.startIndex);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex w-full flex-col items-start",
+                children: [
+                  group.group && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex w-full items-center overflow-hidden",
+                      style: {
+                        gap: STEPPER_VERTICAL_LAYOUT.itemGap,
+                        paddingLeft: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                        paddingRight: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                        paddingTop: STEPPER_VERTICAL_LAYOUT.titlePaddingTop,
+                        paddingBottom: STEPPER_VERTICAL_LAYOUT.titlePaddingBottom,
+                        background: STEPPER_VERTICAL_COLORS.itemBg.default,
+                        color: STEPPER_VERTICAL_COLORS.titleText,
+                        fontSize: STEPPER_VERTICAL_LAYOUT.titleFontSize,
+                        lineHeight: STEPPER_VERTICAL_LAYOUT.titleLineHeight,
+                        fontWeight: 700
+                      },
+                      children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: group.group })
+                    }
+                  ),
+                  group.items.map((item, itemIndex) => {
+                    const index = group.startIndex + itemIndex;
+                    const state2 = getState(item, index);
+                    const itemValue = getItemValue(item, index);
+                    const canClickItem = isClickable && isWithinClickableIndex(index);
+                    const isDisabled = !canClickItem;
+                    const isHovered = hoveredIndex === index && canClickItem && state2 !== "active";
+                    const itemContainerStyle = {
+                      gap: STEPPER_VERTICAL_LAYOUT.itemGap,
+                      paddingLeft: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                      paddingRight: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
+                      paddingTop: STEPPER_VERTICAL_LAYOUT.itemPaddingY,
+                      paddingBottom: STEPPER_VERTICAL_LAYOUT.itemPaddingY,
+                      background: state2 === "active" ? STEPPER_VERTICAL_COLORS.itemBg.selected : isHovered ? STEPPER_VERTICAL_COLORS.itemBg.hover : STEPPER_VERTICAL_COLORS.itemBg.default
+                    };
+                    const handleMouseEnter = () => {
+                      if (canClickItem) setHoveredIndex(index);
+                    };
+                    const handleMouseLeave = () => {
+                      setHoveredIndex((current) => current === index ? null : current);
+                    };
+                    const stepContent = renderStepContent(item, index, {
+                      isVertical: true,
+                      roleListItem: false,
+                      hovered: isHovered
+                    });
+                    const errorBadge = item.error ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-stepper-error-badge": "true",
+                        className: "inline-flex shrink-0 overflow-hidden rounded-full",
+                        style: {
+                          width: 6,
+                          height: 6,
+                          background: STEPPER_VERTICAL_COLORS.errorBadge
+                        }
+                      }
+                    ) : null;
+                    const isTooltipHovered = tooltipHoverValue === itemValue;
+                    const isCustomTooltipOpen = customTooltipOpen && index === firstErrorIndex;
+                    const showTooltip = item.error === true && (isTooltipHovered || isCustomTooltipOpen);
+                    const handleTooltipMouseEnter = () => setTooltipHoverValue(itemValue);
+                    const handleTooltipMouseLeave = () => {
+                      setTooltipHoverValue((current) => current === itemValue ? null : current);
+                    };
+                    const labelBadge = /* @__PURE__ */ jsx(
+                      STooltip2,
+                      {
+                        trigger: "none",
+                        open: showTooltip,
+                        content: ERROR_TOOLTIP_MESSAGE,
+                        tooltipType: "danger",
+                        placement: "right",
+                        children: /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "relative z-[3] inline-flex items-center",
+                              isClickable && (isDisabled ? "cursor-default" : "cursor-pointer")
+                            ),
+                            style: { gap: STEPPER_VERTICAL_LAYOUT.itemGap },
+                            onMouseEnter: handleTooltipMouseEnter,
+                            onMouseLeave: handleTooltipMouseLeave,
+                            onClick: isClickable ? () => {
+                              if (!isDisabled) emitValueChange(item, index);
+                            } : void 0,
+                            children: [
+                              stepContent,
+                              errorBadge
+                            ]
+                          }
+                        )
+                      }
+                    );
+                    if (isClickable) {
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ref: (node) => {
+                            verticalItemRefs.current[index] = node;
+                          },
+                          role: "listitem",
+                          "aria-current": state2 === "active" ? "step" : void 0,
+                          className: cn(
+                            "relative flex w-full items-center overflow-hidden",
+                            isDisabled ? "cursor-default" : "cursor-pointer"
+                          ),
+                          onMouseEnter: handleMouseEnter,
+                          onMouseLeave: handleMouseLeave,
+                          style: itemContainerStyle,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                disabled: isDisabled,
+                                "aria-label": item.label,
+                                className: cn(
+                                  "absolute inset-0 z-[2] m-0 border-0 bg-transparent p-0 text-left outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent)",
+                                  isDisabled ? "cursor-default" : "cursor-pointer"
+                                ),
+                                onClick: () => {
+                                  if (!isDisabled) emitValueChange(item, index);
+                                }
+                              }
+                            ),
+                            labelBadge
+                          ]
+                        },
+                        itemValue
+                      );
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: (node) => {
+                          verticalItemRefs.current[index] = node;
+                        },
+                        role: "listitem",
+                        "aria-current": state2 === "active" ? "step" : void 0,
+                        className: cn(
+                          "relative flex w-full items-center overflow-hidden",
+                          isClickable && (canClickItem ? "cursor-pointer" : "cursor-default")
+                        ),
+                        onMouseEnter: handleMouseEnter,
+                        onMouseLeave: handleMouseLeave,
+                        style: itemContainerStyle,
+                        children: labelBadge
+                      },
+                      itemValue
+                    );
+                  })
+                ]
+              },
+              `${groupKey}-${group.startIndex}`
+            );
+          })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -8173,43 +8576,8 @@ function SStepper({
         ...style
       },
       children: items.map((item, index) => {
-        const state2 = getState(index);
-        const itemStyle = {
-          gap: STEPPER_LAYOUT.itemGap,
-          color: STEPPER_COLORS.text[state2],
-          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.completed : STEPPER_COLORS.sequenceText[state2]
-        };
-        const content = /* @__PURE__ */ jsxs(
-          "span",
-          {
-            role: "listitem",
-            "aria-current": state2 === "active" ? "step" : void 0,
-            className: "inline-flex items-center whitespace-nowrap",
-            style: itemStyle,
-            children: [
-              /* @__PURE__ */ 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__ */ jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: item.label })
-            ]
-          }
-        );
+        const state2 = getState(item, index);
+        const content = isClickable ? /* @__PURE__ */ jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item, index) }) : renderStepContent(item, index);
         return /* @__PURE__ */ jsxs(
           "span",
           {
@@ -8248,7 +8616,7 @@ function SStepper({
       })
     }
   );
-}
+});
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {