@ttoss/react-wizard 0.4.7 → 0.4.9

package/dist/index.js

@@ -1,517 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-"use strict";
-
-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 __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Wizard: () => Wizard,
-  useWizard: () => useWizard
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/Wizard.tsx
-var import_react_i18n = require("@ttoss/react-i18n");
-var import_ui3 = require("@ttoss/ui");
-var React3 = __toESM(require("react"), 1);
-
-// src/Wizard.styles.ts
-var import_ui = require("@ttoss/ui");
-var gradientFlow = (0, import_ui.keyframes)({
-  "0%": {
-    backgroundPosition: "0% 50%"
-  },
-  "50%": {
-    backgroundPosition: "100% 50%"
-  },
-  "100%": {
-    backgroundPosition: "0% 50%"
-  }
-});
-var getAccentGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getAccentGradientBackground");
-var getPrimaryGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.primary?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.secondary?.default || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getPrimaryGradientBackground");
-var getVariantStyles = /* @__PURE__ */__name((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"];
-}, "getVariantStyles");
-var getWizardShellSx = /* @__PURE__ */__name((variant = "spotlight-accent") => {
-  const variantStyles = getVariantStyles(variant);
-  return {
-    width: "100%",
-    minHeight: "300px",
-    border: "1px solid",
-    borderColor: variantStyles.borderColor,
-    borderRadius: "8px",
-    overflow: "hidden"
-  };
-}, "getWizardShellSx");
-var getWizardStepListSx = /* @__PURE__ */__name(({
-  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"
-    })
-  };
-}, "getWizardStepListSx");
-var getWizardStepIndicatorSx = /* @__PURE__ */__name(({
-  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 ? 0.4 : 1,
-    transition: "all 0.2s ease",
-    ...(isClickable ? {
-      _hover: {
-        opacity: 1
-      }
-    } : {})
-  };
-}, "getWizardStepIndicatorSx");
-var getWizardStepSeparatorSx = /* @__PURE__ */__name(({
-  isCompleted,
-  variant = "spotlight-accent"
-}) => {
-  const variantStyles = getVariantStyles(variant);
-  return {
-    backgroundColor: variantStyles.accentTextColor,
-    opacity: isCompleted ? 1 : 0.4
-  };
-}, "getWizardStepSeparatorSx");
-var getWizardStepTitleSx = /* @__PURE__ */__name(({
-  status,
-  variant = "spotlight-accent"
-}) => {
-  const variantStyles = getVariantStyles(variant);
-  return {
-    color: variantStyles.accentTextColor,
-    textAlign: "center",
-    fontWeight: status === "active" ? "bold" : "normal",
-    opacity: status === "upcoming" ? 0.4 : 1
-  };
-}, "getWizardStepTitleSx");
-var getWizardStepDescriptionSx = /* @__PURE__ */__name(({
-  status,
-  variant = "spotlight-accent"
-}) => {
-  const variantStyles = getVariantStyles(variant);
-  return {
-    color: variantStyles.accentTextColor,
-    textAlign: "center",
-    opacity: status === "upcoming" ? 0.4 : 1
-  };
-}, "getWizardStepDescriptionSx");
-var WizardStepDescriptionFlexSx = {
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "center"
-};
-var WizardStepTextWrapperSx = {
-  textAlign: "center"
-};
-var getWizardPrimaryButtonVariant = /* @__PURE__ */__name((variant = "spotlight-accent") => {
-  return getVariantStyles(variant).primaryButtonVariant;
-}, "getWizardPrimaryButtonVariant");
-
-// src/WizardContext.ts
-var React2 = __toESM(require("react"), 1);
-var WizardContext = React2.createContext(null);
-var useWizard = /* @__PURE__ */__name(() => {
-  const context = React2.useContext(WizardContext);
-  if (!context) {
-    throw new Error("useWizard must be used within a Wizard component.");
-  }
-  return context;
-}, "useWizard");
-
-// src/WizardStepList.tsx
-var import_react = require("@chakra-ui/react");
-var import_ui2 = require("@ttoss/ui");
-var WizardStepList = /* @__PURE__ */__name(({
-  steps,
-  currentStep,
-  layout,
-  variant,
-  allowStepClick,
-  getStepStatus,
-  onStepClick
-}) => {
-  const isHorizontal = layout === "top" || layout === "bottom";
-  const orientation = isHorizontal ? "horizontal" : "vertical";
-  return /* @__PURE__ */React.createElement(import_ui2.Flex, {
-    role: "navigation",
-    "aria-label": "Wizard steps",
-    "data-variant": variant,
-    sx: getWizardStepListSx({
-      layout,
-      variant
-    })
-  }, /* @__PURE__ */React.createElement(import_react.Steps.Root, {
-    step: currentStep,
-    count: steps.length,
-    orientation
-  }, /* @__PURE__ */React.createElement(import_react.Steps.List, null, steps.map((step, index) => {
-    const status = getStepStatus({
-      stepIndex: index
-    });
-    const isClickable = allowStepClick && status === "completed" && index !== currentStep;
-    return /* @__PURE__ */React.createElement(import_react.Steps.Item, {
-      key: index,
-      index
-    }, /* @__PURE__ */React.createElement(import_ui2.Flex, {
-      sx: {
-        flexDirection: isHorizontal ? "column" : "row",
-        alignItems: "center",
-        gap: "2"
-      }
-    }, /* @__PURE__ */React.createElement(import_ui2.Box, {
-      role: "button",
-      tabIndex: isClickable ? 0 : -1,
-      onClick: /* @__PURE__ */__name(() => {
-        if (isClickable) {
-          onStepClick({
-            stepIndex: index
-          });
-        }
-      }, "onClick"),
-      onKeyDown: /* @__PURE__ */__name(e => {
-        if (isClickable && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          onStepClick({
-            stepIndex: index
-          });
-        }
-      }, "onKeyDown"),
-      "aria-current": status === "active" ? "step" : void 0,
-      sx: {
-        cursor: isClickable ? "pointer" : "default"
-      }
-    }, /* @__PURE__ */React.createElement(import_react.Steps.Indicator, {
-      css: getWizardStepIndicatorSx({
-        status,
-        variant,
-        isClickable
-      })
-    }, /* @__PURE__ */React.createElement(import_react.Steps.Status, {
-      complete: "\u2713",
-      incomplete: /* @__PURE__ */React.createElement(import_react.Steps.Number, null)
-    }))), (step.title || step.description) && /* @__PURE__ */React.createElement(import_ui2.Box, {
-      sx: WizardStepTextWrapperSx
-    }, step.title && /* @__PURE__ */React.createElement(import_react.Steps.Title, {
-      css: getWizardStepTitleSx({
-        status,
-        variant
-      })
-    }, step.title), step.description && /* @__PURE__ */React.createElement(import_ui2.Flex, {
-      sx: WizardStepDescriptionFlexSx
-    }, /* @__PURE__ */React.createElement(import_react.Steps.Description, {
-      css: getWizardStepDescriptionSx({
-        status,
-        variant
-      })
-    }, step.description)))), index < steps.length - 1 && /* @__PURE__ */React.createElement(import_react.Steps.Separator, {
-      css: getWizardStepSeparatorSx({
-        isCompleted: index < currentStep,
-        variant
-      })
-    }));
-  }))));
-}, "WizardStepList");
-
-// src/Wizard.tsx
-var messages = (0, import_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."
-  }
-});
-var getFlexDirection = /* @__PURE__ */__name(layout => {
-  switch (layout) {
-    case "top":
-      return "column";
-    case "bottom":
-      return "column-reverse";
-    case "left":
-      return "row";
-    case "right":
-      return "row-reverse";
-  }
-}, "getFlexDirection");
-var Wizard = /* @__PURE__ */__name(({
-  steps,
-  layout = "top",
-  variant = "spotlight-accent",
-  onComplete,
-  onCancel,
-  onStepChange,
-  initialStep = 0,
-  allowStepClick = true,
-  labels
-}) => {
-  const {
-    intl
-  } = (0, import_react_i18n.useI18n)();
-  const [currentStep, setCurrentStep] = React3.useState(initialStep);
-  const stepValidationRef = React3.useRef(null);
-  const totalSteps = steps.length;
-  const isFirstStep = currentStep === 0;
-  const isLastStep = currentStep === totalSteps - 1;
-  const buttonLabels = React3.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 = React3.useCallback(({
-    stepIndex
-  }) => {
-    if (stepIndex < currentStep) {
-      return "completed";
-    }
-    if (stepIndex === currentStep) {
-      return "active";
-    }
-    return "upcoming";
-  }, [currentStep]);
-  const goToNext = React3.useCallback(async () => {
-    const step = steps[currentStep];
-    if (stepValidationRef.current) {
-      const canProceed = await stepValidationRef.current();
-      if (!canProceed) {
-        return;
-      }
-    }
-    if (step.onNext) {
-      const canProceed = await step.onNext();
-      if (!canProceed) {
-        return;
-      }
-    }
-    if (isLastStep) {
-      onComplete?.();
-    } else {
-      const nextStep = currentStep + 1;
-      stepValidationRef.current = null;
-      setCurrentStep(nextStep);
-      onStepChange?.({
-        stepIndex: nextStep
-      });
-    }
-  }, [currentStep, steps, isLastStep, onComplete, onStepChange]);
-  const goToPrevious = React3.useCallback(() => {
-    if (!isFirstStep) {
-      const prevStep = currentStep - 1;
-      stepValidationRef.current = null;
-      setCurrentStep(prevStep);
-      onStepChange?.({
-        stepIndex: prevStep
-      });
-    }
-  }, [currentStep, isFirstStep, onStepChange]);
-  const goToStep = React3.useCallback(({
-    stepIndex
-  }) => {
-    if (stepIndex >= 0 && stepIndex < totalSteps && stepIndex <= currentStep) {
-      stepValidationRef.current = null;
-      setCurrentStep(stepIndex);
-      onStepChange?.({
-        stepIndex
-      });
-    }
-  }, [currentStep, totalSteps, onStepChange]);
-  const setStepValidation = React3.useCallback(validate => {
-    stepValidationRef.current = validate;
-  }, []);
-  const contextValue = React3.useMemo(() => {
-    return {
-      currentStep,
-      totalSteps,
-      goToNext,
-      goToPrevious,
-      goToStep,
-      isFirstStep,
-      isLastStep,
-      getStepStatus,
-      setStepValidation
-    };
-  }, [currentStep, totalSteps, goToNext, goToPrevious, goToStep, isFirstStep, isLastStep, getStepStatus, setStepValidation]);
-  return /* @__PURE__ */React3.createElement(WizardContext.Provider, {
-    value: contextValue
-  }, /* @__PURE__ */React3.createElement(import_ui3.Flex, {
-    "data-variant": variant,
-    sx: {
-      flexDirection: getFlexDirection(layout),
-      ...getWizardShellSx(variant)
-    }
-  }, /* @__PURE__ */React3.createElement(WizardStepList, {
-    steps,
-    currentStep,
-    layout,
-    variant,
-    allowStepClick,
-    getStepStatus,
-    onStepClick: goToStep
-  }), /* @__PURE__ */React3.createElement(import_ui3.Flex, {
-    sx: {
-      flexDirection: "column",
-      flex: 1,
-      padding: "6"
-    }
-  }, /* @__PURE__ */React3.createElement(import_ui3.Box, {
-    sx: {
-      flex: 1,
-      marginBottom: "4"
-    }
-  }, steps[currentStep].content), /* @__PURE__ */React3.createElement(import_ui3.Flex, {
-    sx: {
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: "3"
-    }
-  }, /* @__PURE__ */React3.createElement(import_ui3.Flex, {
-    sx: {
-      gap: "3"
-    }
-  }, onCancel && /* @__PURE__ */React3.createElement(import_ui3.Button, {
-    variant: "secondary",
-    onClick: onCancel,
-    "aria-label": buttonLabels.cancel
-  }, buttonLabels.cancel)), /* @__PURE__ */React3.createElement(import_ui3.Flex, {
-    sx: {
-      gap: "3"
-    }
-  }, /* @__PURE__ */React3.createElement(import_ui3.Button, {
-    variant: "secondary",
-    onClick: goToPrevious,
-    disabled: isFirstStep,
-    "aria-label": buttonLabels.previous
-  }, buttonLabels.previous), /* @__PURE__ */React3.createElement(import_ui3.Button, {
-    variant: getWizardPrimaryButtonVariant(variant),
-    onClick: goToNext,
-    "aria-label": isLastStep ? buttonLabels.finish : buttonLabels.next
-  }, isLastStep ? buttonLabels.finish : buttonLabels.next))))));
-}, "Wizard");
-Wizard.displayName = "Wizard";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Wizard,
-  useWizard
-});