@wix/patterns 1.413.0 → 1.415.0

package/dist/cjs/components/SetupWidget/SetupStepRow.js

@@ -0,0 +1,243 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupStepRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _SetupStepIcon = require("./SetupStepIcon");
+var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepRow.tsx";
+/**
+ * Desktop step row. Recreated from the existing Setup widget:
+ * - completed → green check, struck-through title, optional completed CTA
+ * - disabled → muted bullet + disabled CTA (permission-denied)
+ * - in-progress → "In progress" badge next to the title
+ * - focused → blue surface, bold title, primary CTA
+ * - hoverable rows tint blue on hover (handled in Stylable)
+ */
+const SetupStepRow = ({
+  step,
+  isFocused,
+  expanded,
+  onActivate,
+  renderStepContent
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const isInProgress = step.status === 'in-progress';
+  const isCompleted = step.status === 'completed';
+  const isDisabled = step.status === 'disabled';
+  const isInlineExpanded = expanded && step.expansionMode === 'inline';
+  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
+  // Completed steps stay actionable when they carry a completed CTA (G2).
+  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+  const clickable = !isCompleted && !isDisabled || showCompletedCta;
+  const hoverable = !isFocused && !isCompleted && !isDisabled;
+  const handleClick = clickable ? onActivate : undefined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": `setup-step-${step.id}`,
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.row, {
+      focused: isFocused,
+      hoverable,
+      clickable
+    }),
+    onClick: handleClick,
+    onKeyDown: clickable ? event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onActivate();
+      }
+    } : undefined,
+    role: clickable ? 'button' : undefined,
+    tabIndex: clickable ? 0 : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 58,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "space-between",
+    verticalAlign: "middle",
+    width: "100%",
+    minHeight: "30px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 82,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    minHeight: "24px",
+    verticalAlign: "middle",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 88,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
+    status: step.status,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 89,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    paddingLeft: "SP2",
+    paddingRight: "SP2",
+    verticalAlign: "middle",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 90,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    dataHook: `setup-step-title-${step.id}`,
+    size: "small",
+    skin: isDisabled ? 'disabled' : 'standard',
+    weight: isFocused ? 'bold' : 'thin',
+    secondary: isCompleted,
+    light: isCompleted,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 13
+    }
+  }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 30
+    }
+  }, step.title) : step.title), isInProgress && !isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "2px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 107,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
+    size: "tiny",
+    skin: "urgent",
+    type: "transparent",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 108,
+      columnNumber: 17
+    }
+  }, t('cairo.setupWidget.step.inProgress'))))), showCta && (() => {
+    const ctaNode = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      verticalAlign: "middle",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 118,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+      dataHook: `setup-step-cta-${step.id}`,
+      size: "small",
+      priority: !isDisabled && !isFocused ? 'secondary' : 'primary',
+      disabled: isDisabled,
+      ellipsis: false,
+      onClick: event => {
+        event.stopPropagation();
+        onActivate();
+      },
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 119,
+        columnNumber: 17
+      }
+    }, step.ctaLabel));
+
+    // Disabled steps explain why the CTA is disabled (G5).
+    return isDisabled ? /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+      dataHook: `setup-step-disabled-tooltip-${step.id}`,
+      content: step.disabledTooltip ??
+      // Translation-key id stays `lockedTooltip` until the
+      // Translation Center key is renamed (TC follow-up to T2).
+      t('cairo.setupWidget.step.lockedTooltip'),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 137,
+        columnNumber: 15
+      }
+    }, ctaNode) : ctaNode;
+  })(), showCompletedCta && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    marginRight: "SP2",
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.completedCta),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 153,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+    dataHook: `setup-step-cta-${step.id}`,
+    size: "small",
+    onClick: event => {
+      event.stopPropagation();
+      onActivate();
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 13
+    }
+  }, step.completedCtaLabel))), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: `setup-step-content-${step.id}`,
+    direction: "vertical",
+    paddingLeft: "SP5",
+    paddingRight: "SP1",
+    paddingBottom: "SP1",
+    marginTop: "SP2",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 172,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginBottom: "SP2",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 180,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 181,
+      columnNumber: 13
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: event => event.stopPropagation(),
+    onKeyDown: event => event.stopPropagation(),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 186,
+      columnNumber: 11
+    }
+  }, renderStepContent == null ? void 0 : renderStepContent(step))));
+};
+exports.SetupStepRow = SetupStepRow;
+//# sourceMappingURL=SetupStepRow.js.map

package/dist/cjs/components/SetupWidget/SetupStepRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepRow","step","isFocused","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInlineExpanded","expansionMode","showCta","ctaLabel","showCompletedCta","completedCtaLabel","clickable","hoverable","handleClick","undefined","default","createElement","id","className","st","classes","row","focused","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","__self","__source","fileName","lineNumber","columnNumber","Box","align","verticalAlign","width","minHeight","SetupStepIcon","paddingLeft","paddingRight","gap","Text","dataHook","size","skin","weight","secondary","light","title","marginTop","Badge","type","ctaNode","Button","priority","disabled","ellipsis","stopPropagation","Tooltip","content","disabledTooltip","marginRight","completedCta","TextButton","direction","paddingBottom","marginBottom","Divider","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepRow.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Text,\n  Button,\n  TextButton,\n  Badge,\n  Divider,\n  Tooltip,\n} from '@wix/design-system';\nimport { SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { SetupStepIcon } from './SetupStepIcon';\nimport { st, classes } from './SetupWidget.st.css.js';\n\nexport interface SetupStepRowProps {\n  step: SetupWidgetStep;\n  /** Highlighted + bold row (the recommended (primary) or expanded step). */\n  isFocused: boolean;\n  /** Inline content is shown below the row. */\n  expanded: boolean;\n  onActivate: () => void;\n  /** Supplies the inline-expansion content (render prop on the widget). */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Desktop step row. Recreated from the existing Setup widget:\n * - completed → green check, struck-through title, optional completed CTA\n * - disabled → muted bullet + disabled CTA (permission-denied)\n * - in-progress → \"In progress\" badge next to the title\n * - focused → blue surface, bold title, primary CTA\n * - hoverable rows tint blue on hover (handled in Stylable)\n */\nexport const SetupStepRow = ({\n  step,\n  isFocused,\n  expanded,\n  onActivate,\n  renderStepContent,\n}: SetupStepRowProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const isInProgress = step.status === 'in-progress';\n  const isCompleted = step.status === 'completed';\n  const isDisabled = step.status === 'disabled';\n  const isInlineExpanded = expanded && step.expansionMode === 'inline';\n\n  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;\n  // Completed steps stay actionable when they carry a completed CTA (G2).\n  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;\n  const clickable = (!isCompleted && !isDisabled) || showCompletedCta;\n  const hoverable = !isFocused && !isCompleted && !isDisabled;\n\n  const handleClick = clickable ? onActivate : undefined;\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      className={st(classes.row, {\n        focused: isFocused,\n        hoverable,\n        clickable,\n      })}\n      onClick={handleClick}\n      onKeyDown={\n        clickable\n          ? (event: React.KeyboardEvent) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onActivate();\n              }\n            }\n          : undefined\n      }\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n    >\n      {/* Reserve the CTA button's height (small button = 30px) so rows keep a\n          stable height whether or not they render a CTA — otherwise completed\n          rows (which drop the CTA) would shrink and the widget would reflow. */}\n      <Box\n        align=\"space-between\"\n        verticalAlign=\"middle\"\n        width=\"100%\"\n        minHeight=\"30px\"\n      >\n        <Box minHeight=\"24px\" verticalAlign=\"middle\">\n          <SetupStepIcon status={step.status} />\n          <Box\n            paddingLeft=\"SP2\"\n            paddingRight=\"SP2\"\n            verticalAlign=\"middle\"\n            gap=\"SP1\"\n          >\n            <Text\n              dataHook={`setup-step-title-${step.id}`}\n              size=\"small\"\n              skin={isDisabled ? 'disabled' : 'standard'}\n              weight={isFocused ? 'bold' : 'thin'}\n              secondary={isCompleted}\n              light={isCompleted}\n            >\n              {isCompleted ? <del>{step.title}</del> : step.title}\n            </Text>\n            {isInProgress && !isInlineExpanded && (\n              <Box marginTop=\"2px\">\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            )}\n          </Box>\n        </Box>\n        {showCta &&\n          (() => {\n            const ctaNode = (\n              <Box verticalAlign=\"middle\">\n                <Button\n                  dataHook={`setup-step-cta-${step.id}`}\n                  size=\"small\"\n                  priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}\n                  disabled={isDisabled}\n                  ellipsis={false}\n                  onClick={(event: React.MouseEvent) => {\n                    event.stopPropagation();\n                    onActivate();\n                  }}\n                >\n                  {step.ctaLabel}\n                </Button>\n              </Box>\n            );\n\n            // Disabled steps explain why the CTA is disabled (G5).\n            return isDisabled ? (\n              <Tooltip\n                dataHook={`setup-step-disabled-tooltip-${step.id}`}\n                content={\n                  step.disabledTooltip ??\n                  // Translation-key id stays `lockedTooltip` until the\n                  // Translation Center key is renamed (TC follow-up to T2).\n                  t('cairo.setupWidget.step.lockedTooltip')\n                }\n              >\n                {ctaNode}\n              </Tooltip>\n            ) : (\n              ctaNode\n            );\n          })()}\n        {showCompletedCta && (\n          <Box\n            verticalAlign=\"middle\"\n            marginRight=\"SP2\"\n            className={st(classes.completedCta)}\n          >\n            <TextButton\n              dataHook={`setup-step-cta-${step.id}`}\n              size=\"small\"\n              onClick={(event: React.MouseEvent) => {\n                event.stopPropagation();\n                onActivate();\n              }}\n            >\n              {step.completedCtaLabel}\n            </TextButton>\n          </Box>\n        )}\n      </Box>\n      {isInlineExpanded && (\n        <Box\n          dataHook={`setup-step-content-${step.id}`}\n          direction=\"vertical\"\n          paddingLeft=\"SP5\"\n          paddingRight=\"SP1\"\n          paddingBottom=\"SP1\"\n          marginTop=\"SP2\"\n        >\n          <Box marginBottom=\"SP2\">\n            <Divider />\n          </Box>\n          {/* Stop clicks/keys inside the consumer widget from bubbling to the\n              row's toggle handler — otherwise interacting with the content\n              (e.g. an input) would collapse the card. */}\n          <div\n            onClick={(event) => event.stopPropagation()}\n            onKeyDown={(event) => event.stopPropagation()}\n          >\n            {renderStepContent?.(step)}\n          </div>\n        </Box>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidget.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupWidget = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _CardContainer = require("../CardContainer");
+var _useIsMobile = require("../../hooks/useIsMobile");
+var _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
+var _SetupWidgetHeader = require("./SetupWidgetHeader");
+var _SetupStepRow = require("./SetupStepRow");
+var _SetupStepCard = require("./SetupStepCard");
+var _SetupStepGroup = require("./SetupStepGroup");
+var _AllCompleteState = require("./AllCompleteState");
+var _SetupWidgetSkeleton = require("./SetupWidgetSkeleton");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidget.tsx";
+// Fires `onView` once when the wrapped step scrolls into view. Only mounted
+// when the consumer passes `onStepView`, so view tracking adds no DOM/observer
+// overhead otherwise.
+const StepViewTracker = ({
+  stepId,
+  onView,
+  children
+}) => {
+  const {
+    elementRef
+  } = (0, _useIntersectionObserver.useIntersectionObserver)(onView);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: elementRef,
+    "data-hook": `setup-step-view-${stepId}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 5
+    }
+  }, children);
+};
+const _SetupWidget = ({
+  state,
+  renderStepContent,
+  onStepClick,
+  onCompletedStepClick,
+  onStepView,
+  onAllCompleteClick,
+  renderError,
+  dataHook
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const isMobile = (0, _useIsMobile.useIsMobile)();
+  const {
+    status
+  } = state._loadTask.status;
+  const activateStep = step => {
+    // Completed steps fire their own action (never expand) — distinct from the
+    // active/navigate `onStepClick`.
+    if (step.status === 'completed') {
+      onCompletedStepClick == null || onCompletedStepClick(step);
+      return;
+    }
+    if (step.expansionMode === 'inline') {
+      state._toggleStep(step.id);
+    } else {
+      onStepClick == null || onStepClick(step);
+    }
+  };
+
+  // Children of an aggregated group are leaf steps — they never toggle/expand;
+  // completed children fire the completed action, the rest navigate.
+  const activateChild = child => {
+    if (child.status === 'completed') {
+      onCompletedStepClick == null || onCompletedStepClick(child);
+    } else {
+      onStepClick == null || onStepClick(child);
+    }
+  };
+  const renderLeaf = (step, isChild = false) => {
+    const expanded = !isChild && step.expansionMode === 'inline' && state._expandedStepId === step.id;
+    const onActivate = () => isChild ? activateChild(step) : activateStep(step);
+    return isMobile ? /*#__PURE__*/_react.default.createElement(_SetupStepCard.SetupStepCard, {
+      key: step.id,
+      step: step,
+      isPrimary: !isChild && step.id === state._primaryStepId,
+      expanded: expanded,
+      onActivate: onActivate,
+      renderStepContent: renderStepContent,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 128,
+        columnNumber: 7
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_SetupStepRow.SetupStepRow, {
+      key: step.id,
+      step: step,
+      isFocused: !isChild && (step.id === state._primaryStepId || expanded),
+      expanded: expanded,
+      onActivate: onActivate,
+      renderStepContent: renderStepContent,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 137,
+        columnNumber: 7
+      }
+    });
+  };
+
+  // All-complete is a distinct success surface with its own card.
+  if (status === 'success' && state._isAllComplete) {
+    return /*#__PURE__*/_react.default.createElement(_AllCompleteState.AllCompleteState, {
+      dataHook: dataHook,
+      onCtaClick: onAllCompleteClick,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 151,
+        columnNumber: 7
+      }
+    });
+  }
+
+  // Built-in loading skeleton, shaped like the widget (desktop card / mobile
+  // bare) so there's no layout jump when data resolves.
+  if (status === 'idle' || status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_SetupWidgetSkeleton.SetupWidgetSkeleton, {
+      isMobile: isMobile,
+      dataHook: dataHook,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 158,
+        columnNumber: 12
+      }
+    });
+  }
+
+  // Consumer-supplied error UI fully replaces the default error card.
+  if (status === 'error' && renderError) {
+    var _state$_loadTask$erro;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderError({
+      retry: () => state._retry(),
+      error: (_state$_loadTask$erro = state._loadTask.errorStatus) == null ? void 0 : _state$_loadTask$erro.error
+    }));
+  }
+  const header = /*#__PURE__*/_react.default.createElement(_SetupWidgetHeader.SetupWidgetHeader, {
+    title: state._title,
+    completedCount: state._completedCount,
+    totalCount: state._totalCount,
+    progressPercentage: state._progressPercentage,
+    isMobile: isMobile,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 174,
+      columnNumber: 5
+    }
+  });
+  const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    gap: isMobile ? 'SP3' : 'SP1',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 184,
+      columnNumber: 5
+    }
+  }, state.steps.map(step => {
+    var _step$steps;
+    const node = (_step$steps = step.steps) != null && _step$steps.length ? /*#__PURE__*/_react.default.createElement(_SetupStepGroup.SetupStepGroup, {
+      step: step,
+      isMobile: isMobile,
+      expanded: state._expandedStepId === step.id,
+      isPrimary: step.id === state._primaryStepId,
+      onToggle: () => state._toggleStep(step.id),
+      renderChild: child => renderLeaf(child, true),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 187,
+        columnNumber: 11
+      }
+    }) : renderLeaf(step);
+    return onStepView ? /*#__PURE__*/_react.default.createElement(StepViewTracker, {
+      key: step.id,
+      stepId: step.id,
+      onView: () => onStepView(step),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 200,
+        columnNumber: 11
+      }
+    }, node) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: step.id,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 208,
+        columnNumber: 11
+      }
+    }, node);
+  }));
+  const body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header, list);
+
+  // Mobile success renders bare — no outer card (matches the mobile design;
+  // the consumer composes the surrounding page). Loading / error still flow
+  // through CardContainer so the widget owns those states everywhere.
+  if (isMobile && status === 'success') {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      dataHook: dataHook,
+      direction: "vertical",
+      gap: "SP3",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 226,
+        columnNumber: 7
+      }
+    }, body);
+  }
+  return /*#__PURE__*/_react.default.createElement(_CardContainer.CardContainer, {
+    dataHook: dataHook,
+    status: status,
+    errorState: {
+      dataHook: 'error-state',
+      title: t('cairo.setupWidget.error.title'),
+      subtitle: t('cairo.setupWidget.error.subtitle'),
+      action: {
+        text: t('cairo.setupWidget.error.cta'),
+        onClick: () => state._retry()
+      }
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 233,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    padding: "SP6",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 246,
+      columnNumber: 7
+    }
+  }, body));
+};
+const SetupWidget = exports.SetupWidget = (0, _mobxReactLite.observer)(_SetupWidget);
+//# sourceMappingURL=SetupWidget.js.map

package/dist/cjs/components/SetupWidget/SetupWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_CardContainer","_useIsMobile","_useIntersectionObserver","_SetupWidgetHeader","_SetupStepRow","_SetupStepCard","_SetupStepGroup","_AllCompleteState","_SetupWidgetSkeleton","_jsxFileName","StepViewTracker","stepId","onView","children","elementRef","useIntersectionObserver","default","createElement","ref","__self","__source","fileName","lineNumber","columnNumber","_SetupWidget","state","renderStepContent","onStepClick","onCompletedStepClick","onStepView","onAllCompleteClick","renderError","dataHook","translate","t","useWixPatternsContainer","isMobile","useIsMobile","status","_loadTask","activateStep","step","expansionMode","_toggleStep","id","activateChild","child","renderLeaf","isChild","expanded","_expandedStepId","onActivate","SetupStepCard","key","isPrimary","_primaryStepId","SetupStepRow","isFocused","_isAllComplete","AllCompleteState","onCtaClick","SetupWidgetSkeleton","_state$_loadTask$erro","Fragment","retry","_retry","error","errorStatus","header","SetupWidgetHeader","title","_title","completedCount","_completedCount","totalCount","_totalCount","progressPercentage","_progressPercentage","list","Box","direction","gap","steps","map","_step$steps","node","length","SetupStepGroup","onToggle","renderChild","body","CardContainer","errorState","subtitle","action","text","onClick","padding","SetupWidget","exports","observer"],"sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box } from '@wix/design-system';\nimport { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CardContainer } from '../CardContainer';\nimport { useIsMobile } from '../../hooks/useIsMobile';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { SetupWidgetHeader } from './SetupWidgetHeader';\nimport { SetupStepRow } from './SetupStepRow';\nimport { SetupStepCard } from './SetupStepCard';\nimport { SetupStepGroup } from './SetupStepGroup';\nimport { AllCompleteState } from './AllCompleteState';\nimport { SetupWidgetSkeleton } from './SetupWidgetSkeleton';\n\nexport interface SetupWidgetProps {\n  /**\n   * A Setup widget state instance created with `useSetupWidget`. The widget\n   * owns loading / error / refetch; the state exposes the steps and a public\n   * API to change a step's status.\n   */\n  state: SetupWidgetState;\n  /**\n   * Inline-expansion content for a step, supplied at render time (the data does\n   * not carry it). Returned for the currently-expanded inline step.\n   */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Fired when a `navigate` step (or its CTA) is activated. */\n  onStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired when a *completed* step's CTA (or row) is activated — a distinct\n   * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,\n   * which targets the step's separate `completedCta`).\n   */\n  onCompletedStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired once when a step (or group) scrolls into view — for the consumer to\n   * report view telemetry (BI/dealer). The widget itself stays\n   * telemetry-agnostic. Click telemetry hooks into `onStepClick` /\n   * `onCompletedStepClick`.\n   */\n  onStepView?: (step: SetupWidgetStep) => void;\n  /** Fired when the \"all complete\" celebratory CTA is clicked. */\n  onAllCompleteClick?: () => void;\n  /**\n   * Replaces the default error UI when the initial load fails. Receives a\n   * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a\n   * standard error card with a \"Try again\" retry is shown.\n   */\n  renderError?: (params: {\n    retry: () => void;\n    error: unknown;\n  }) => React.ReactNode;\n  /** Applies a data-hook attribute for tests. */\n  dataHook?: string;\n}\n\n// Fires `onView` once when the wrapped step scrolls into view. Only mounted\n// when the consumer passes `onStepView`, so view tracking adds no DOM/observer\n// overhead otherwise.\nconst StepViewTracker = ({\n  stepId,\n  onView,\n  children,\n}: {\n  stepId: string;\n  onView: () => void;\n  children: React.ReactNode;\n}) => {\n  const { elementRef } = useIntersectionObserver(onView);\n  return (\n    <div\n      ref={elementRef as React.RefObject<HTMLDivElement>}\n      data-hook={`setup-step-view-${stepId}`}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst _SetupWidget = ({\n  state,\n  renderStepContent,\n  onStepClick,\n  onCompletedStepClick,\n  onStepView,\n  onAllCompleteClick,\n  renderError,\n  dataHook,\n}: SetupWidgetProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const isMobile = useIsMobile();\n  const { status } = state._loadTask.status;\n\n  const activateStep = (step: SetupWidgetStep) => {\n    // Completed steps fire their own action (never expand) — distinct from the\n    // active/navigate `onStepClick`.\n    if (step.status === 'completed') {\n      onCompletedStepClick?.(step);\n      return;\n    }\n    if (step.expansionMode === 'inline') {\n      state._toggleStep(step.id);\n    } else {\n      onStepClick?.(step);\n    }\n  };\n\n  // Children of an aggregated group are leaf steps — they never toggle/expand;\n  // completed children fire the completed action, the rest navigate.\n  const activateChild = (child: SetupWidgetStep) => {\n    if (child.status === 'completed') {\n      onCompletedStepClick?.(child);\n    } else {\n      onStepClick?.(child);\n    }\n  };\n\n  const renderLeaf = (step: SetupWidgetStep, isChild = false) => {\n    const expanded =\n      !isChild &&\n      step.expansionMode === 'inline' &&\n      state._expandedStepId === step.id;\n    const onActivate = () =>\n      isChild ? activateChild(step) : activateStep(step);\n\n    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={!isChild && step.id === state._primaryStepId}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={!isChild && (step.id === state._primaryStepId || expanded)}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    );\n  };\n\n  // All-complete is a distinct success surface with its own card.\n  if (status === 'success' && state._isAllComplete) {\n    return (\n      <AllCompleteState dataHook={dataHook} onCtaClick={onAllCompleteClick} />\n    );\n  }\n\n  // Built-in loading skeleton, shaped like the widget (desktop card / mobile\n  // bare) so there's no layout jump when data resolves.\n  if (status === 'idle' || status === 'loading') {\n    return <SetupWidgetSkeleton isMobile={isMobile} dataHook={dataHook} />;\n  }\n\n  // Consumer-supplied error UI fully replaces the default error card.\n  if (status === 'error' && renderError) {\n    return (\n      <>\n        {renderError({\n          retry: () => state._retry(),\n          error: state._loadTask.errorStatus?.error,\n        })}\n      </>\n    );\n  }\n\n  const header = (\n    <SetupWidgetHeader\n      title={state._title}\n      completedCount={state._completedCount}\n      totalCount={state._totalCount}\n      progressPercentage={state._progressPercentage}\n      isMobile={isMobile}\n    />\n  );\n\n  const list = (\n    <Box direction=\"vertical\" gap={isMobile ? 'SP3' : 'SP1'}>\n      {state.steps.map((step) => {\n        const node = step.steps?.length ? (\n          <SetupStepGroup\n            step={step}\n            isMobile={isMobile}\n            expanded={state._expandedStepId === step.id}\n            isPrimary={step.id === state._primaryStepId}\n            onToggle={() => state._toggleStep(step.id)}\n            renderChild={(child) => renderLeaf(child, true)}\n          />\n        ) : (\n          renderLeaf(step)\n        );\n\n        return onStepView ? (\n          <StepViewTracker\n            key={step.id}\n            stepId={step.id}\n            onView={() => onStepView(step)}\n          >\n            {node}\n          </StepViewTracker>\n        ) : (\n          <React.Fragment key={step.id}>{node}</React.Fragment>\n        );\n      })}\n    </Box>\n  );\n\n  const body = (\n    <>\n      {header}\n      {list}\n    </>\n  );\n\n  // Mobile success renders bare — no outer card (matches the mobile design;\n  // the consumer composes the surrounding page). Loading / error still flow\n  // through CardContainer so the widget owns those states everywhere.\n  if (isMobile && status === 'success') {\n    return (\n      <Box dataHook={dataHook} direction=\"vertical\" gap=\"SP3\">\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <CardContainer\n      dataHook={dataHook}\n      status={status}\n      errorState={{\n        dataHook: 'error-state',\n        title: t('cairo.setupWidget.error.title'),\n        subtitle: t('cairo.setupWidget.error.subtitle'),\n        action: {\n          text: t('cairo.setupWidget.error.cta'),\n          onClick: () => state._retry(),\n        },\n      }}\n    >\n      <Box direction=\"vertical\" padding=\"SP6\">\n        {body}\n      </Box>\n    </CardContainer>\n  );\n};\n\nexport const SetupWidget = observer(_SetupWidget);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidget.st.css

@@ -0,0 +1,95 @@
+@property st-global(--wds-color-border-dark-secondary);
+@property st-global(--wds-color-border-standard-primary);
+@property st-global(--wds-color-border-standard-secondary);
+@property st-global(--wds-color-fill-standard-tertiary);
+@property st-global(--wds-color-fill-standard-tertiary-hover);
+@property st-global(--wsr-color-D60);
+@property st-global(--wsr-color-D80);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-B60);
+@property st-global(--wds-space-100);
+@property st-global(--wds-border-radius-200);
+@property st-global(--wds-border-radius-400);
+
+.root {}
+
+/* ---------------------------------------------------------------------------
+ * Desktop step row — bordered card with hover/focus tinting. Hover only
+ * applies to rows that are actually interactive (not focused / completed /
+ * locked), gated by the `hoverable` state.
+ *
+ * Every var() carries the WDS fallback chain — semantic --wds token →
+ * legacy --wsr token → hard-coded value — so the widget renders correctly
+ * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * ------------------------------------------------------------------------- */
+.row {
+  -st-states: focused, hoverable, clickable;
+
+  display: flex;
+  flex-direction: column;
+  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
+   * inner gaps for a consistent 6px rhythm */
+  padding: var(--wds-space-100, 6px);
+  border-radius: var(--wds-border-radius-200, 4px);
+  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
+  overflow: clip;
+}
+
+.row:clickable {
+  cursor: pointer;
+}
+
+.row:hoverable:hover {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+}
+
+.row:focused {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+}
+
+/* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the
+ * existing Setup widget. It still occupies space so the row height is stable. */
+.completedCta {
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.row:hover .completedCta,
+.row:focus-within .completedCta {
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+ * Mobile step card — shadowed card; the focused (primary) card gets a soft
+ * blue surface so the screen has one clear next-action target.
+ * ------------------------------------------------------------------------- */
+.card {
+  -st-states: primary, clickable;
+
+  display: block;
+  width: 100%;
+  border: none;
+  border-radius: var(--wds-border-radius-400, 8px);
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  box-shadow: 0 0 6px 0 rgba(0, 6, 36, 0.1), 0 2px 4px 0 rgba(0, 6, 36, 0.05);
+  overflow: clip;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.card:primary {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+}
+
+.card:clickable {
+  cursor: pointer;
+}