@ttoss/react-wizard 0.4.8 → 0.4.10

package/dist/index.cjs

@@ -0,0 +1,511 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+      key = keys[i];
+      if (!__hasOwnProp.call(to, key) && key !== except) {
+        __defProp(to, key, {
+          get: (k => from[k]).bind(null, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+      }
+    }
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+
+//#endregion
+let _ttoss_react_i18n = require("@ttoss/react-i18n");
+let _ttoss_ui = require("@ttoss/ui");
+let react = require("react");
+let react$1 = __toESM(react, 1);
+react = __toESM(react);
+let _chakra_ui_react = require("@chakra-ui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/Wizard.styles.ts
+const gradientFlow = (0, _ttoss_ui.keyframes)({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+const getAccentGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start}, ${start})`;
+};
+const getPrimaryGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.secondary?.default || start}, ${start})`;
+};
+const getVariantStyles = (variantType = "spotlight-accent") => {
+  const variants = {
+    "spotlight-accent": {
+      accentColor: "action.background.accent.default",
+      accentTextColor: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      primaryButtonVariant: "accent",
+      gradientBackground: getAccentGradientBackground
+    },
+    "spotlight-primary": {
+      accentColor: "action.background.primary.default",
+      accentTextColor: "display.text.accent.default",
+      borderColor: "display.border.muted.default",
+      primaryButtonVariant: "primary",
+      gradientBackground: getPrimaryGradientBackground
+    },
+    primary: {
+      accentColor: "action.background.primary.default",
+      accentTextColor: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      primaryButtonVariant: "primary"
+    },
+    secondary: {
+      accentColor: "action.background.secondary.default",
+      accentTextColor: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      primaryButtonVariant: "secondary"
+    },
+    accent: {
+      accentColor: "action.background.accent.default",
+      accentTextColor: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      primaryButtonVariant: "accent"
+    }
+  };
+  return variants[variantType] ?? variants["spotlight-accent"];
+};
+const getWizardShellSx = (variant = "spotlight-accent") => {
+  return {
+    width: "100%",
+    minHeight: "300px",
+    border: "1px solid",
+    borderColor: getVariantStyles(variant).borderColor,
+    borderRadius: "8px",
+    overflow: "hidden"
+  };
+};
+const getWizardStepListSx = ({
+  layout,
+  variant = "spotlight-accent"
+}) => {
+  const isHorizontal = layout === "top" || layout === "bottom";
+  const isSpotlight = variant.startsWith("spotlight-");
+  const variantStyles = getVariantStyles(variant);
+  return {
+    position: "relative",
+    padding: "6",
+    backgroundColor: variantStyles.accentColor,
+    ...(isSpotlight ? {
+      background: variantStyles.gradientBackground,
+      backgroundSize: "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`
+    } : {}),
+    ...(isHorizontal ? {
+      width: "100%"
+    } : {
+      minWidth: "200px"
+    })
+  };
+};
+const getWizardStepIndicatorSx = ({
+  status,
+  variant = "spotlight-accent",
+  isClickable
+}) => {
+  const variantStyles = getVariantStyles(variant);
+  const isCompleted = status === "completed";
+  const isUpcoming = status === "upcoming";
+  return {
+    borderColor: variantStyles.accentTextColor,
+    backgroundColor: isCompleted ? variantStyles.accentTextColor : "transparent",
+    color: isCompleted ? variantStyles.accentColor : variantStyles.accentTextColor,
+    opacity: isUpcoming ? .4 : 1,
+    transition: "all 0.2s ease",
+    ...(isClickable ? {
+      _hover: {
+        opacity: 1
+      }
+    } : {})
+  };
+};
+const getWizardStepSeparatorSx = ({
+  isCompleted,
+  variant = "spotlight-accent"
+}) => {
+  return {
+    backgroundColor: getVariantStyles(variant).accentTextColor,
+    opacity: isCompleted ? 1 : .4
+  };
+};
+const getWizardStepTitleSx = ({
+  status,
+  variant = "spotlight-accent"
+}) => {
+  return {
+    color: getVariantStyles(variant).accentTextColor,
+    textAlign: "center",
+    fontWeight: status === "active" ? "bold" : "normal",
+    opacity: status === "upcoming" ? .4 : 1
+  };
+};
+const getWizardStepDescriptionSx = ({
+  status,
+  variant = "spotlight-accent"
+}) => {
+  return {
+    color: getVariantStyles(variant).accentTextColor,
+    textAlign: "center",
+    opacity: status === "upcoming" ? .4 : 1
+  };
+};
+const WizardStepDescriptionFlexSx = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const WizardStepTextWrapperSx = {
+  textAlign: "center"
+};
+const getWizardPrimaryButtonVariant = (variant = "spotlight-accent") => {
+  return getVariantStyles(variant).primaryButtonVariant;
+};
+
+//#endregion
+//#region src/WizardContext.ts
+const WizardContext = react$1.createContext(null);
+/**
+* Hook to access the wizard context from within step content.
+*/
+const useWizard = () => {
+  const context = react$1.useContext(WizardContext);
+  if (!context) throw new Error("useWizard must be used within a Wizard component.");
+  return context;
+};
+
+//#endregion
+//#region src/WizardStepList.tsx
+const WizardStepList = ({
+  steps,
+  currentStep,
+  layout,
+  variant,
+  allowStepClick,
+  getStepStatus,
+  onStepClick
+}) => {
+  const isHorizontal = layout === "top" || layout === "bottom";
+  const orientation = isHorizontal ? "horizontal" : "vertical";
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+    role: "navigation",
+    "aria-label": "Wizard steps",
+    "data-variant": variant,
+    sx: getWizardStepListSx({
+      layout,
+      variant
+    }),
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Root, {
+      step: currentStep,
+      count: steps.length,
+      orientation,
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.List, {
+        children: steps.map((step, index) => {
+          const status = getStepStatus({
+            stepIndex: index
+          });
+          const isClickable = allowStepClick && status === "completed" && index !== currentStep;
+          return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_chakra_ui_react.Steps.Item, {
+            index,
+            children: [/* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+              sx: {
+                flexDirection: isHorizontal ? "column" : "row",
+                alignItems: "center",
+                gap: "2"
+              },
+              children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Box, {
+                role: "button",
+                tabIndex: isClickable ? 0 : -1,
+                onClick: () => {
+                  if (isClickable) onStepClick({
+                    stepIndex: index
+                  });
+                },
+                onKeyDown: e => {
+                  if (isClickable && (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    onStepClick({
+                      stepIndex: index
+                    });
+                  }
+                },
+                "aria-current": status === "active" ? "step" : void 0,
+                sx: {
+                  cursor: isClickable ? "pointer" : "default"
+                },
+                children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Indicator, {
+                  css: getWizardStepIndicatorSx({
+                    status,
+                    variant,
+                    isClickable
+                  }),
+                  children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Status, {
+                    complete: "✓",
+                    incomplete: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Number, {})
+                  })
+                })
+              }), (step.title || step.description) && /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Box, {
+                sx: WizardStepTextWrapperSx,
+                children: [step.title && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Title, {
+                  css: getWizardStepTitleSx({
+                    status,
+                    variant
+                  }),
+                  children: step.title
+                }), step.description && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+                  sx: WizardStepDescriptionFlexSx,
+                  children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Description, {
+                    css: getWizardStepDescriptionSx({
+                      status,
+                      variant
+                    }),
+                    children: step.description
+                  })
+                })]
+              })]
+            }), index < steps.length - 1 && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_chakra_ui_react.Steps.Separator, {
+              css: getWizardStepSeparatorSx({
+                isCompleted: index < currentStep,
+                variant
+              })
+            })]
+          }, index);
+        })
+      })
+    })
+  });
+};
+
+//#endregion
+//#region src/Wizard.tsx
+const messages = (0, _ttoss_react_i18n.defineMessages)({
+  previous: {
+    defaultMessage: "Previous",
+    description: "Label for the previous step button in the wizard."
+  },
+  next: {
+    defaultMessage: "Next",
+    description: "Label for the next step button in the wizard."
+  },
+  finish: {
+    defaultMessage: "Finish",
+    description: "Label for the finish button on the last wizard step."
+  },
+  cancel: {
+    defaultMessage: "Cancel",
+    description: "Label for the cancel button in the wizard."
+  }
+});
+const getFlexDirection = layout => {
+  switch (layout) {
+    case "top":
+      return "column";
+    case "bottom":
+      return "column-reverse";
+    case "left":
+      return "row";
+    case "right":
+      return "row-reverse";
+  }
+};
+/**
+* Renders a multi-step wizard with step navigation, localized action labels,
+* and support for completion, cancellation, and step changes.
+*
+* @param props - Wizard configuration and step content.
+* @param props.steps - The ordered steps displayed in the wizard.
+* @param props.onComplete - Called when the user finishes the last step.
+* @param props.onCancel - Called when the user cancels the wizard.
+* @param props.onStepChange - Called when the current step changes.
+*/
+const Wizard = ({
+  steps,
+  layout = "top",
+  variant = "spotlight-accent",
+  onComplete,
+  onCancel,
+  onStepChange,
+  initialStep = 0,
+  allowStepClick = true,
+  labels
+}) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const [currentStep, setCurrentStep] = react.useState(initialStep);
+  const stepValidationRef = react.useRef(null);
+  const totalSteps = steps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const buttonLabels = react.useMemo(() => {
+    return {
+      previous: labels?.previous ?? intl.formatMessage(messages.previous),
+      next: labels?.next ?? intl.formatMessage(messages.next),
+      finish: labels?.finish ?? intl.formatMessage(messages.finish),
+      cancel: labels?.cancel ?? intl.formatMessage(messages.cancel)
+    };
+  }, [intl, labels]);
+  const getStepStatus = react.useCallback(({
+    stepIndex
+  }) => {
+    if (stepIndex < currentStep) return "completed";
+    if (stepIndex === currentStep) return "active";
+    return "upcoming";
+  }, [currentStep]);
+  const goToNext = react.useCallback(async () => {
+    const step = steps[currentStep];
+    if (stepValidationRef.current) {
+      if (!(await stepValidationRef.current())) return;
+    }
+    if (step.onNext) {
+      if (!(await step.onNext())) return;
+    }
+    if (isLastStep) onComplete?.();else {
+      const nextStep = currentStep + 1;
+      stepValidationRef.current = null;
+      setCurrentStep(nextStep);
+      onStepChange?.({
+        stepIndex: nextStep
+      });
+    }
+  }, [currentStep, steps, isLastStep, onComplete, onStepChange]);
+  const goToPrevious = react.useCallback(() => {
+    if (!isFirstStep) {
+      const prevStep = currentStep - 1;
+      stepValidationRef.current = null;
+      setCurrentStep(prevStep);
+      onStepChange?.({
+        stepIndex: prevStep
+      });
+    }
+  }, [currentStep, isFirstStep, onStepChange]);
+  const goToStep = react.useCallback(({
+    stepIndex
+  }) => {
+    if (stepIndex >= 0 && stepIndex < totalSteps && stepIndex <= currentStep) {
+      stepValidationRef.current = null;
+      setCurrentStep(stepIndex);
+      onStepChange?.({
+        stepIndex
+      });
+    }
+  }, [currentStep, totalSteps, onStepChange]);
+  const setStepValidation = react.useCallback(validate => {
+    stepValidationRef.current = validate;
+  }, []);
+  const contextValue = react.useMemo(() => {
+    return {
+      currentStep,
+      totalSteps,
+      goToNext,
+      goToPrevious,
+      goToStep,
+      isFirstStep,
+      isLastStep,
+      getStepStatus,
+      setStepValidation
+    };
+  }, [currentStep, totalSteps, goToNext, goToPrevious, goToStep, isFirstStep, isLastStep, getStepStatus, setStepValidation]);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(WizardContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+      "data-variant": variant,
+      sx: {
+        flexDirection: getFlexDirection(layout),
+        ...getWizardShellSx(variant)
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(WizardStepList, {
+        steps,
+        currentStep,
+        layout,
+        variant,
+        allowStepClick,
+        getStepStatus,
+        onStepClick: goToStep
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+        sx: {
+          flexDirection: "column",
+          flex: 1,
+          padding: "6"
+        },
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Box, {
+          sx: {
+            flex: 1,
+            marginBottom: "4"
+          },
+          children: steps[currentStep].content
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "3"
+          },
+          children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+            sx: {
+              gap: "3"
+            },
+            children: onCancel && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+              variant: "secondary",
+              onClick: onCancel,
+              "aria-label": buttonLabels.cancel,
+              children: buttonLabels.cancel
+            })
+          }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+            sx: {
+              gap: "3"
+            },
+            children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+              variant: "secondary",
+              onClick: goToPrevious,
+              disabled: isFirstStep,
+              "aria-label": buttonLabels.previous,
+              children: buttonLabels.previous
+            }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+              variant: getWizardPrimaryButtonVariant(variant),
+              onClick: goToNext,
+              "aria-label": isLastStep ? buttonLabels.finish : buttonLabels.next,
+              children: isLastStep ? buttonLabels.finish : buttonLabels.next
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+};
+Wizard.displayName = "Wizard";
+
+//#endregion
+exports.Wizard = Wizard;
+exports.useWizard = useWizard;