sellmate-design-system-react 7.0.0 → 7.1.0

package/dist/components/SStepper/README.md

@@ -11,20 +11,37 @@
 | `items` | `SStepperItem[]` | — | 단계 목록 |
 | `value?` | `string` | — | 현재 활성 단계 value |
 | `size?` | `SStepperSize` | `'sm'` | 크기 |
+| `vertical?` | `boolean` | `false` | 세로형 여부 |
+| `clickable?` | `boolean` | — | 단계 클릭 가능 여부. 미지정 시 가로형=false, 세로형=true |
 | `ariaLabel?` | `string` | `'진행 단계'` | 접근성 레이블 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string, item: SStepperItem, index: number) => void` | 단계 선택 시 호출 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `showItemTooltip` | `() => void` | error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. |
+| `hideItemTooltip` | `() => void` | 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. |
+
 ## Dependencies
 
 ### Depends on
 
 - [SIcon](../SIcon)
+- [STooltip](../STooltip)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SStepper --> SIcon
+  SStepper --> STooltip
   style SStepper fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SStepper/SStepper.d.ts

@@ -7,10 +7,30 @@ export interface SStepperProps {
     value?: string;
     /** 크기 */
     size?: SStepperSize;
+    /** 세로형 여부 */
+    vertical?: boolean;
+    /** 단계 클릭 가능 여부. 미지정 시 가로형=false, 세로형=true */
+    clickable?: boolean;
+    /** 단계 선택 시 호출 */
+    onValueChange?: (value: string, item: SStepperItem, index: number) => void;
     /** 접근성 레이블 */
     ariaLabel?: string;
     className?: string;
     style?: CSSProperties;
 }
+/**
+ * ref 로 노출되는 커스텀 툴팁 제어 API. 세로형 전용 — items 중 error 가 true 인 첫 번째
+ * 아이템의 텍스트+뱃지 영역에 표시된다.
+ *
+ * 지금은 대상(첫 번째 error 아이템 하나)·문구·스타일이 hover 툴팁(ERROR_TOOLTIP_MESSAGE, danger)과
+ * 동일하게 고정되어 있다 — 열고 닫는 타이밍만 소비자가 제어한다. 대상 아이템을 지정하거나
+ * content·type 을 커스터마이즈하는 기능은 필요해지면 추가한다(지금은 만들지 않음).
+ */
+export interface SStepperHandle {
+    /** error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. */
+    showItemTooltip: () => void;
+    /** 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. */
+    hideItemTooltip: () => void;
+}
 /** SStepper — sd-stepper 포팅. 단계 진행 상태 표시 전용. */
-export declare function SStepper({ items, value, size, ariaLabel, className, style, }: SStepperProps): import("react").JSX.Element;
+export declare const SStepper: import("react").ForwardRefExoticComponent<SStepperProps & import("react").RefAttributes<SStepperHandle>>;

package/dist/components/SStepper/index.d.ts

@@ -1,2 +1,2 @@
-export { SStepper, type SStepperProps } from './SStepper';
+export { SStepper, type SStepperHandle, type SStepperProps } from './SStepper';
 export { STEPPER_SIZES, type SStepperItem, type SStepperSize } from './stepper.config';

package/dist/components/SStepper/stepper.config.d.ts

@@ -3,6 +3,9 @@ export type SStepperSize = (typeof STEPPER_SIZES)[number];
 export type SStepperItem = {
     label: string;
     value?: string;
+    group?: string;
+    completed?: boolean;
+    error?: boolean;
 };
 export declare const STEPPER_SIZE_CONFIG: Record<SStepperSize, {
     sequenceSize: string;
@@ -34,6 +37,7 @@ export declare const STEPPER_COLORS: {
     sequenceText: {
         active: string;
         default: string;
+        completed: string;
     };
     text: {
         active: string;
@@ -41,3 +45,39 @@ export declare const STEPPER_COLORS: {
         completed: string;
     };
 };
+export declare const STEPPER_HORIZONTAL_COMPLETED_COLORS: {
+    sequenceBorder: string;
+    sequenceBg: string;
+    sequenceIcon: string;
+    text: string;
+};
+export declare const STEPPER_VERTICAL_LAYOUT: {
+    width: string;
+    itemGap: string;
+    itemPaddingX: string;
+    itemPaddingY: string;
+    titlePaddingTop: string;
+    titlePaddingBottom: string;
+    titleFontSize: string;
+    titleLineHeight: string;
+    accentStripeWidth: string;
+    accentStripeColor: string;
+};
+export declare const STEPPER_VERTICAL_COLORS: {
+    itemBg: {
+        default: string;
+        hover: string;
+        selected: string;
+    };
+    titleText: string;
+    textDefault: string;
+    textCompleted: string;
+    sequenceBorderActive: string;
+    sequenceBgActive: string;
+    sequenceTextActive: string;
+    sequenceTextDefault: string;
+    sequenceBorderCompleted: string;
+    sequenceBgCompleted: string;
+    sequenceIconCompleted: string;
+    errorBadge: string;
+};

package/dist/index.cjs

@@ -8121,6 +8121,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"),
@@ -8150,16 +8151,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"),
@@ -8167,27 +8169,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__ */ react.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] = react.useState(null);
+  const [tooltipHoverValue, setTooltipHoverValue] = react.useState(null);
+  const [customTooltipOpen, setCustomTooltipOpen] = react.useState(false);
+  const [verticalAccentStripeStyle, setVerticalAccentStripeStyle] = react.useState({
+    height: 0,
+    opacity: 0,
+    transform: "translateY(0px)"
+  });
+  const verticalItemRefs = react.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] = react.useState(activeIndex);
+  const firstErrorIndex = items.findIndex((item) => item.error === true);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      showItemTooltip: () => setCustomTooltipOpen(true),
+      hideItemTooltip: () => setCustomTooltipOpen(false)
+    }),
+    []
+  );
+  react.useLayoutEffect(() => {
+    setVisitedMaxIndex((current) => Math.max(current, activeIndex));
+  }, [activeIndex]);
+  react.useLayoutEffect(() => {
+    setCustomTooltipOpen(false);
+  }, [activeIndex]);
+  react.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__ */ jsxRuntime.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__ */ 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: showsCheckIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+        ]
+      }
+    );
+  };
+  const renderClickableStepContent = (item, index, isVertical = false) => {
+    const isDisabled = !isWithinClickableIndex(index);
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex w-full flex-col items-start",
+                children: [
+                  group.group && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      STooltip2,
+                      {
+                        trigger: "none",
+                        open: showTooltip,
+                        content: ERROR_TOOLTIP_MESSAGE,
+                        tooltipType: "danger",
+                        placement: "right",
+                        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
@@ -8201,43 +8604,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__ */ 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 })
-            ]
-          }
-        );
+        const state2 = getState(item, index);
+        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item, index) }) : renderStepContent(item, index);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -8276,7 +8644,7 @@ function SStepper({
       })
     }
   );
-}
+});
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {