@ttoss/react-wizard 0.4.8 → 0.4.10

package/dist/index.mjs

@@ -0,0 +1,490 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
+import { Box, Button, Flex, keyframes } from "@ttoss/ui";
+import * as React from "react";
+import { Steps } from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Wizard.styles.ts
+const gradientFlow = 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.createContext(null);
+/**
+* Hook to access the wizard context from within step content.
+*/
+const useWizard = () => {
+  const context = React.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__ */jsx(Flex, {
+    role: "navigation",
+    "aria-label": "Wizard steps",
+    "data-variant": variant,
+    sx: getWizardStepListSx({
+      layout,
+      variant
+    }),
+    children: /* @__PURE__ */jsx(Steps.Root, {
+      step: currentStep,
+      count: steps.length,
+      orientation,
+      children: /* @__PURE__ */jsx(Steps.List, {
+        children: steps.map((step, index) => {
+          const status = getStepStatus({
+            stepIndex: index
+          });
+          const isClickable = allowStepClick && status === "completed" && index !== currentStep;
+          return /* @__PURE__ */jsxs(Steps.Item, {
+            index,
+            children: [/* @__PURE__ */jsxs(Flex, {
+              sx: {
+                flexDirection: isHorizontal ? "column" : "row",
+                alignItems: "center",
+                gap: "2"
+              },
+              children: [/* @__PURE__ */jsx(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__ */jsx(Steps.Indicator, {
+                  css: getWizardStepIndicatorSx({
+                    status,
+                    variant,
+                    isClickable
+                  }),
+                  children: /* @__PURE__ */jsx(Steps.Status, {
+                    complete: "✓",
+                    incomplete: /* @__PURE__ */jsx(Steps.Number, {})
+                  })
+                })
+              }), (step.title || step.description) && /* @__PURE__ */jsxs(Box, {
+                sx: WizardStepTextWrapperSx,
+                children: [step.title && /* @__PURE__ */jsx(Steps.Title, {
+                  css: getWizardStepTitleSx({
+                    status,
+                    variant
+                  }),
+                  children: step.title
+                }), step.description && /* @__PURE__ */jsx(Flex, {
+                  sx: WizardStepDescriptionFlexSx,
+                  children: /* @__PURE__ */jsx(Steps.Description, {
+                    css: getWizardStepDescriptionSx({
+                      status,
+                      variant
+                    }),
+                    children: step.description
+                  })
+                })]
+              })]
+            }), index < steps.length - 1 && /* @__PURE__ */jsx(Steps.Separator, {
+              css: getWizardStepSeparatorSx({
+                isCompleted: index < currentStep,
+                variant
+              })
+            })]
+          }, index);
+        })
+      })
+    })
+  });
+};
+
+//#endregion
+//#region src/Wizard.tsx
+const messages = defineMessages({
+  previous: {
+    id: "60eH0J",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Previous"
+    }]
+  },
+  next: {
+    id: "FmaVut",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Next"
+    }]
+  },
+  finish: {
+    id: "5lZ8VT",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Finish"
+    }]
+  },
+  cancel: {
+    id: "6I9gjk",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  }
+});
+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
+  } = 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__ */jsx(WizardContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */jsxs(Flex, {
+      "data-variant": variant,
+      sx: {
+        flexDirection: getFlexDirection(layout),
+        ...getWizardShellSx(variant)
+      },
+      children: [/* @__PURE__ */jsx(WizardStepList, {
+        steps,
+        currentStep,
+        layout,
+        variant,
+        allowStepClick,
+        getStepStatus,
+        onStepClick: goToStep
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          flex: 1,
+          padding: "6"
+        },
+        children: [/* @__PURE__ */jsx(Box, {
+          sx: {
+            flex: 1,
+            marginBottom: "4"
+          },
+          children: steps[currentStep].content
+        }), /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "3"
+          },
+          children: [/* @__PURE__ */jsx(Flex, {
+            sx: {
+              gap: "3"
+            },
+            children: onCancel && /* @__PURE__ */jsx(Button, {
+              variant: "secondary",
+              onClick: onCancel,
+              "aria-label": buttonLabels.cancel,
+              children: buttonLabels.cancel
+            })
+          }), /* @__PURE__ */jsxs(Flex, {
+            sx: {
+              gap: "3"
+            },
+            children: [/* @__PURE__ */jsx(Button, {
+              variant: "secondary",
+              onClick: goToPrevious,
+              disabled: isFirstStep,
+              "aria-label": buttonLabels.previous,
+              children: buttonLabels.previous
+            }), /* @__PURE__ */jsx(Button, {
+              variant: getWizardPrimaryButtonVariant(variant),
+              onClick: goToNext,
+              "aria-label": isLastStep ? buttonLabels.finish : buttonLabels.next,
+              children: isLastStep ? buttonLabels.finish : buttonLabels.next
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+};
+Wizard.displayName = "Wizard";
+
+//#endregion
+export { Wizard, useWizard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-wizard",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "A React wizard component for guiding users through multi-step flows with configurable step list layouts.",
   "keywords": [
     "React",
@@ -23,8 +23,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -34,28 +34,28 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
     "jest": "^30.3.0",
-    "react": "^19.2.4",
-    "tsup": "^8.5.1",
-    "@ttoss/config": "^1.37.12",
-    "@ttoss/forms": "^0.43.24",
-    "@ttoss/i18n-cli": "^0.8.12",
-    "@ttoss/react-i18n": "^2.2.13",
-    "@ttoss/ui": "^6.9.19",
-    "@ttoss/test-utils": "^4.2.12"
+    "react": "^19.2.6",
+    "tsdown": "^0.22.0",
+    "@ttoss/config": "^1.37.13",
+    "@ttoss/forms": "^0.43.26",
+    "@ttoss/i18n-cli": "^0.8.13",
+    "@ttoss/react-i18n": "^2.2.15",
+    "@ttoss/ui": "^6.9.21",
+    "@ttoss/test-utils": "^4.2.13"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3",
     "react": ">=16.8.0",
     "react-icons": "^5",
-    "@ttoss/react-i18n": "^2.2.13",
-    "@ttoss/ui": "^6.9.19"
+    "@ttoss/react-i18n": "^2.2.15",
+    "@ttoss/ui": "^6.9.21"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "i18n": "ttoss-i18n",
     "test": "jest --projects tests/unit"
   }