@xsolla/xui-b2b-stepper 0.147.1

package/native/index.js

@@ -0,0 +1,942 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Stepper: () => Stepper
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Stepper.tsx
+var import_react4 = require("react");
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Spinner.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  testID
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native3.View,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/Stepper.tsx
+var import_xui_core = require("@xsolla/xui-core");
+
+// src/Step.tsx
+var import_react3 = require("react");
+
+// src/StepChip.tsx
+var import_react = require("react");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getChipBackground = (state, theme) => {
+  switch (state) {
+    case "current":
+      return theme.colors.background.brand.secondary;
+    case "loading":
+      return theme.colors.overlay.brand;
+    case "complete":
+      return theme.colors.background.success.secondary;
+    case "warning":
+      return theme.colors.background.warning.secondary;
+    case "alert":
+      return theme.colors.background.alert.secondary;
+    case "incomplete":
+    default:
+      return theme.colors.overlay.mono;
+  }
+};
+var StepChip = (0, import_react.memo)(
+  ({ state, stepNumber, sizing, theme }) => {
+    const numberColor = theme.colors.content.primary;
+    const bg = getChipBackground(state, theme);
+    const renderContent = () => {
+      switch (state) {
+        case "loading":
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Spinner,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.brand.primary,
+              strokeWidth: 2
+            }
+          );
+        case "complete":
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_xui_icons_base.Check,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.success.primary
+            }
+          );
+        case "warning":
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_xui_icons_base.InfoCr,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.warning.primary
+            }
+          );
+        case "alert":
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_xui_icons_base.Remove,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.alert.primary
+            }
+          );
+        case "current":
+        case "incomplete":
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Text,
+            {
+              color: numberColor,
+              fontSize: sizing.numberFontSize,
+              lineHeight: sizing.numberLineHeight,
+              fontWeight: "500",
+              textAlign: "center",
+              children: stepNumber
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Box,
+      {
+        width: sizing.chipSize,
+        height: sizing.chipSize,
+        borderRadius: sizing.chipRadius,
+        backgroundColor: bg,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        style: {
+          paddingTop: sizing.chipPaddingTop,
+          paddingBottom: sizing.chipPaddingBottom,
+          paddingLeft: sizing.chipPaddingX,
+          paddingRight: sizing.chipPaddingX
+        },
+        children: renderContent()
+      }
+    );
+  }
+);
+StepChip.displayName = "StepChip";
+
+// src/StepConnector.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StepConnector = (0, import_react2.memo)(
+  ({ direction, color, length }) => {
+    if (direction === "vertical") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Box,
+        {
+          style: {
+            width: 1,
+            height: length ?? 48,
+            backgroundColor: color,
+            flexShrink: 0
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Box,
+      {
+        style: {
+          height: 1,
+          flex: 1,
+          minWidth: length ?? 24,
+          backgroundColor: color,
+          alignSelf: "center"
+        }
+      }
+    );
+  }
+);
+StepConnector.displayName = "StepConnector";
+
+// src/Step.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ACTIVE_CARD_STATES = [
+  "current",
+  "loading",
+  "warning",
+  "alert"
+];
+var Step = ({
+  step,
+  stepNumber,
+  isLast,
+  isFirst,
+  direction,
+  simple = false,
+  overlapBottom = 0,
+  zIndex,
+  onClick,
+  sizing,
+  theme
+}) => {
+  const {
+    title,
+    description,
+    caption,
+    state = "incomplete",
+    disabled = false,
+    noClick = false
+  } = step;
+  const isHorizontal = direction === "horizontal";
+  const isActive = ACTIVE_CARD_STATES.includes(state);
+  const isCurrent = state === "current";
+  const isInteractive = !!onClick && !disabled && !noClick;
+  const handleClick = (0, import_react3.useCallback)(() => {
+    if (isInteractive) {
+      onClick({ number: stepNumber, step });
+    }
+  }, [isInteractive, onClick, stepNumber, step]);
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (event) => {
+      if (!isInteractive) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleClick();
+      } else if (event.key === " ") {
+        event.preventDefault();
+      }
+    },
+    [isInteractive, handleClick]
+  );
+  const handleKeyUp = (0, import_react3.useCallback)(
+    (event) => {
+      if (!isInteractive) return;
+      if (event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [isInteractive, handleClick]
+  );
+  const ariaLabel = (0, import_react3.useMemo)(() => {
+    const titleText = typeof title === "string" ? title : `Step ${stepNumber}`;
+    const descText = typeof description === "string" ? `, ${description}` : "";
+    return `Step ${stepNumber}: ${titleText}${descText}, ${state}`;
+  }, [stepNumber, title, description, state]);
+  const interactiveProps = isInteractive ? {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    style: { cursor: "pointer" }
+  } : {
+    "aria-disabled": disabled || noClick ? true : void 0
+  };
+  const textBlockSizing = isHorizontal ? { flex: 1, minWidth: 0 } : { width: sizing.contentWidth, flexShrink: 0 };
+  const textBlock = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      style: {
+        gap: sizing.contentGap,
+        minHeight: sizing.contentMinHeight,
+        ...textBlockSizing
+      },
+      children: [
+        caption !== null && (typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Text,
+          {
+            color: theme.colors.content.tertiary,
+            fontSize: sizing.captionFontSize,
+            lineHeight: sizing.captionLineHeight,
+            fontWeight: "400",
+            children: caption
+          }
+        ) : caption),
+        typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Text,
+          {
+            color: theme.colors.content.primary,
+            fontSize: sizing.titleFontSize,
+            lineHeight: sizing.titleLineHeight,
+            fontWeight: "500",
+            children: title
+          }
+        ) : title,
+        description !== null && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Text,
+          {
+            color: theme.colors.content.tertiary,
+            fontSize: sizing.descriptionFontSize,
+            lineHeight: sizing.descriptionLineHeight,
+            fontWeight: "400",
+            children: description
+          }
+        ) : description)
+      ]
+    }
+  );
+  if (simple) {
+    if (isHorizontal) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        Box,
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          flex: isLast ? void 0 : 1,
+          "data-testid": "step",
+          "data-step-state": state,
+          "aria-current": isCurrent ? "step" : void 0,
+          "aria-label": ariaLabel,
+          ...interactiveProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: isActive ? theme.colors.background.primary : void 0,
+                borderRadius: isActive ? sizing.simpleCardRadius : void 0,
+                style: {
+                  padding: sizing.simpleCardPadding,
+                  gap: sizing.simpleCardGap,
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  StepChip,
+                  {
+                    state,
+                    stepNumber,
+                    sizing,
+                    theme
+                  }
+                )
+              }
+            ),
+            !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                style: { flex: 1, minWidth: sizing.simpleHorizontalCellWidth },
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Box,
+                  {
+                    style: {
+                      flex: 1,
+                      height: 1,
+                      backgroundColor: theme.colors.border.secondary
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Box,
+      {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        "data-testid": "step",
+        "data-step-state": state,
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-label": ariaLabel,
+        ...interactiveProps,
+        style: {
+          ...isInteractive ? { cursor: "pointer" } : {},
+          gap: sizing.simpleItemGap
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Box,
+            {
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: isActive ? theme.colors.background.primary : void 0,
+              borderRadius: isActive ? sizing.simpleCardRadius : void 0,
+              style: {
+                padding: sizing.simpleCardPadding,
+                gap: sizing.simpleCardGap
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                StepChip,
+                {
+                  state,
+                  stepNumber,
+                  sizing,
+                  theme
+                }
+              )
+            }
+          ),
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Box,
+            {
+              style: {
+                marginLeft: sizing.simpleCardPadding + sizing.chipSize / 2 - 0.5
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                StepConnector,
+                {
+                  direction: "vertical",
+                  color: theme.colors.border.secondary,
+                  length: sizing.connectorCellHeight
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (isHorizontal) {
+    const cardBackground = isActive ? theme.colors.background.primary : void 0;
+    const cardWidth = isFirst ? sizing.horizontalFirstItemWidth : sizing.horizontalItemWidth;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1,
+        "data-testid": "step",
+        "data-step-state": state,
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-label": ariaLabel,
+        ...interactiveProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: cardBackground,
+              borderRadius: isActive ? sizing.activeCardRadiusHorizontal : void 0,
+              style: {
+                gap: sizing.activeCardGapHorizontal,
+                width: cardWidth,
+                flexShrink: 0,
+                paddingTop: sizing.activeCardPaddingYHorizontal,
+                paddingBottom: sizing.activeCardPaddingYHorizontal,
+                paddingLeft: sizing.activeCardPaddingLeftHorizontal,
+                paddingRight: 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "flex-start",
+                    style: {
+                      gap: sizing.itemGap,
+                      flex: 1,
+                      minWidth: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        StepChip,
+                        {
+                          state,
+                          stepNumber,
+                          sizing,
+                          theme
+                        }
+                      ),
+                      textBlock
+                    ]
+                  }
+                ),
+                !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    style: { flexShrink: 0 },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        Box,
+                        {
+                          style: {
+                            width: sizing.horizontalConnectorSegment,
+                            height: 1,
+                            backgroundColor: theme.colors.border.secondary
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        Box,
+                        {
+                          style: {
+                            width: sizing.horizontalConnectorGap,
+                            height: 1,
+                            backgroundColor: theme.colors.border.secondary
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            StepConnector,
+            {
+              direction: "horizontal",
+              color: theme.colors.border.secondary
+            }
+          )
+        ]
+      }
+    );
+  }
+  const innerConnectorOffset = sizing.activeCardPaddingX + sizing.chipSize / 2 - 0.5;
+  const verticalContainerStyle = {
+    ...interactiveProps.style,
+    marginBottom: overlapBottom ? -overlapBottom : void 0,
+    position: zIndex !== void 0 ? "relative" : void 0,
+    zIndex
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      "data-testid": "step",
+      "data-step-state": state,
+      "aria-current": isCurrent ? "step" : void 0,
+      "aria-label": ariaLabel,
+      ...interactiveProps,
+      style: verticalContainerStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: sizing.itemGap,
+            style: {
+              paddingTop: sizing.activeCardPaddingTop,
+              paddingLeft: sizing.activeCardPaddingX,
+              paddingRight: sizing.activeCardPaddingX,
+              paddingBottom: 0,
+              backgroundColor: isActive ? theme.colors.background.primary : void 0,
+              borderRadius: isActive ? sizing.activeCardRadiusVertical : void 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                Box,
+                {
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 8,
+                  style: { flexShrink: 0 },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      StepChip,
+                      {
+                        state,
+                        stepNumber,
+                        sizing,
+                        theme
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      Box,
+                      {
+                        style: { visibility: isLast ? "hidden" : "visible" },
+                        "aria-hidden": isLast ? "true" : void 0,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          StepConnector,
+                          {
+                            direction: "vertical",
+                            color: theme.colors.border.secondary,
+                            length: sizing.innerConnectorLength
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              textBlock
+            ]
+          }
+        ),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Box,
+          {
+            alignItems: "flex-start",
+            justifyContent: "flex-start",
+            style: {
+              height: sizing.connectorCellHeight,
+              width: sizing.connectorCellWidth,
+              paddingLeft: innerConnectorOffset,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              StepConnector,
+              {
+                direction: "vertical",
+                color: theme.colors.border.secondary,
+                length: sizing.connectorCellHeight
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+Step.displayName = "Step";
+
+// src/Stepper.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Stepper = (0, import_react4.forwardRef)(
+  ({
+    steps,
+    direction = "vertical",
+    surface = false,
+    simple = false,
+    onClick,
+    className,
+    "aria-label": ariaLabel,
+    themeMode,
+    themeProductContext,
+    ...rest
+  }, ref) => {
+    const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+    const sizing = theme.sizing.stepperB2b();
+    const isHorizontal = direction === "horizontal";
+    const isSurface = surface;
+    const defaultAriaLabel = `Stepper with ${steps.length} step${steps.length === 1 ? "" : "s"}`;
+    const surfaceBackground = isSurface ? `linear-gradient(0deg, ${theme.colors.overlay.mono} 0%, ${theme.colors.overlay.mono} 100%), ${theme.colors.background.secondary}` : void 0;
+    const useOverlap = !isHorizontal && !simple;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Box,
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel ?? defaultAriaLabel,
+        className,
+        flexDirection: isHorizontal ? "row" : "column",
+        alignItems: isHorizontal ? "flex-start" : "stretch",
+        borderRadius: isSurface ? sizing.surfaceRadius : void 0,
+        style: {
+          background: surfaceBackground,
+          padding: isSurface ? isHorizontal ? sizing.surfacePaddingHorizontal : sizing.surfacePaddingVertical : 0,
+          gap: isHorizontal ? sizing.horizontalItemGap : 0,
+          width: isHorizontal ? "100%" : void 0,
+          isolation: useOverlap ? "isolate" : void 0
+        },
+        ...rest,
+        children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Step,
+          {
+            step,
+            stepNumber: i + 1,
+            isFirst: i === 0,
+            isLast: i === steps.length - 1,
+            direction,
+            simple,
+            onClick,
+            sizing,
+            theme,
+            zIndex: useOverlap ? steps.length - i : void 0,
+            overlapBottom: useOverlap && i < steps.length - 1 ? 16 : 0
+          },
+          step.key ?? `stepper-${i}`
+        ))
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stepper
+});
+//# sourceMappingURL=index.js.map