@ttoss/react-wizard 0.4.7 → 0.4.9

package/dist/esm/index.js

@@ -1,483 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-
-// src/Wizard.tsx
-import { defineMessages, useI18n } from "@ttoss/react-i18n";
-import { Box as Box2, Button, Flex as Flex2 } from "@ttoss/ui";
-import * as React3 from "react";
-
-// src/Wizard.styles.ts
-import { keyframes } from "@ttoss/ui";
-var gradientFlow = 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
-import * as React2 from "react";
-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
-import { Steps } from "@chakra-ui/react";
-import { Box, Flex } from "@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(Flex, {
-    role: "navigation",
-    "aria-label": "Wizard steps",
-    "data-variant": variant,
-    sx: getWizardStepListSx({
-      layout,
-      variant
-    })
-  }, /* @__PURE__ */React.createElement(Steps.Root, {
-    step: currentStep,
-    count: steps.length,
-    orientation
-  }, /* @__PURE__ */React.createElement(Steps.List, null, steps.map((step, index) => {
-    const status = getStepStatus({
-      stepIndex: index
-    });
-    const isClickable = allowStepClick && status === "completed" && index !== currentStep;
-    return /* @__PURE__ */React.createElement(Steps.Item, {
-      key: index,
-      index
-    }, /* @__PURE__ */React.createElement(Flex, {
-      sx: {
-        flexDirection: isHorizontal ? "column" : "row",
-        alignItems: "center",
-        gap: "2"
-      }
-    }, /* @__PURE__ */React.createElement(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(Steps.Indicator, {
-      css: getWizardStepIndicatorSx({
-        status,
-        variant,
-        isClickable
-      })
-    }, /* @__PURE__ */React.createElement(Steps.Status, {
-      complete: "\u2713",
-      incomplete: /* @__PURE__ */React.createElement(Steps.Number, null)
-    }))), (step.title || step.description) && /* @__PURE__ */React.createElement(Box, {
-      sx: WizardStepTextWrapperSx
-    }, step.title && /* @__PURE__ */React.createElement(Steps.Title, {
-      css: getWizardStepTitleSx({
-        status,
-        variant
-      })
-    }, step.title), step.description && /* @__PURE__ */React.createElement(Flex, {
-      sx: WizardStepDescriptionFlexSx
-    }, /* @__PURE__ */React.createElement(Steps.Description, {
-      css: getWizardStepDescriptionSx({
-        status,
-        variant
-      })
-    }, step.description)))), index < steps.length - 1 && /* @__PURE__ */React.createElement(Steps.Separator, {
-      css: getWizardStepSeparatorSx({
-        isCompleted: index < currentStep,
-        variant
-      })
-    }));
-  }))));
-}, "WizardStepList");
-
-// src/Wizard.tsx
-var 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"
-    }]
-  }
-});
-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
-  } = 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(Flex2, {
-    "data-variant": variant,
-    sx: {
-      flexDirection: getFlexDirection(layout),
-      ...getWizardShellSx(variant)
-    }
-  }, /* @__PURE__ */React3.createElement(WizardStepList, {
-    steps,
-    currentStep,
-    layout,
-    variant,
-    allowStepClick,
-    getStepStatus,
-    onStepClick: goToStep
-  }), /* @__PURE__ */React3.createElement(Flex2, {
-    sx: {
-      flexDirection: "column",
-      flex: 1,
-      padding: "6"
-    }
-  }, /* @__PURE__ */React3.createElement(Box2, {
-    sx: {
-      flex: 1,
-      marginBottom: "4"
-    }
-  }, steps[currentStep].content), /* @__PURE__ */React3.createElement(Flex2, {
-    sx: {
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: "3"
-    }
-  }, /* @__PURE__ */React3.createElement(Flex2, {
-    sx: {
-      gap: "3"
-    }
-  }, onCancel && /* @__PURE__ */React3.createElement(Button, {
-    variant: "secondary",
-    onClick: onCancel,
-    "aria-label": buttonLabels.cancel
-  }, buttonLabels.cancel)), /* @__PURE__ */React3.createElement(Flex2, {
-    sx: {
-      gap: "3"
-    }
-  }, /* @__PURE__ */React3.createElement(Button, {
-    variant: "secondary",
-    onClick: goToPrevious,
-    disabled: isFirstStep,
-    "aria-label": buttonLabels.previous
-  }, buttonLabels.previous), /* @__PURE__ */React3.createElement(Button, {
-    variant: getWizardPrimaryButtonVariant(variant),
-    onClick: goToNext,
-    "aria-label": isLastStep ? buttonLabels.finish : buttonLabels.next
-  }, isLastStep ? buttonLabels.finish : buttonLabels.next))))));
-}, "Wizard");
-Wizard.displayName = "Wizard";
-export { Wizard, useWizard };

package/dist/index.d.ts

@@ -1,158 +0,0 @@
-import * as React from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type WizardVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary' | 'secondary' | 'accent';
-
-/**
- * Position of the step list relative to the wizard content.
- */
-type WizardLayout = 'top' | 'right' | 'bottom' | 'left';
-/**
- * Status of a wizard step.
- */
-type WizardStepStatus = 'completed' | 'active' | 'upcoming';
-/**
- * Definition of a single wizard step.
- */
-interface WizardStep {
-    /**
-     * Title displayed in the step list.
-     */
-    title: string;
-    /**
-     * Optional description displayed below the title in the step list.
-     */
-    description?: string;
-    /**
-     * The content rendered when this step is active.
-     */
-    content: React.ReactNode;
-    /**
-     * Called when the user clicks "Next". If it returns false or
-     * a Promise that resolves to false, the wizard will not advance.
-     */
-    onNext?: () => boolean | Promise<boolean>;
-}
-/**
- * Props for the Wizard component.
- */
-interface WizardProps {
-    /**
-     * Array of steps to display in the wizard.
-     */
-    steps: WizardStep[];
-    /**
-     * Position of the step list. Defaults to 'top'.
-     */
-    layout?: WizardLayout;
-    /**
-     * Visual variant for the wizard shell, step accents, and primary action.
-     * @default 'spotlight-accent'
-     */
-    variant?: WizardVariant;
-    /**
-     * Called when the wizard completes (user clicks "Finish" on the last step).
-     */
-    onComplete?: () => void;
-    /**
-     * Called when the user clicks "Cancel".
-     * If not provided, the Cancel button is not rendered.
-     */
-    onCancel?: () => void;
-    /**
-     * Called whenever the active step changes.
-     */
-    onStepChange?: (params: {
-        stepIndex: number;
-    }) => void;
-    /**
-     * The initially active step index. Defaults to 0.
-     */
-    initialStep?: number;
-    /**
-     * Allow clicking on completed steps to navigate back.
-     * Defaults to true.
-     */
-    allowStepClick?: boolean;
-    /**
-     * Optional custom labels for the navigation buttons.
-     */
-    labels?: Partial<WizardLabels>;
-}
-/**
- * Customizable labels used by the wizard navigation buttons.
- */
-interface WizardLabels {
-    previous: string;
-    next: string;
-    finish: string;
-    cancel: string;
-}
-/**
- * Context value exposed by WizardProvider.
- */
-interface WizardContextValue {
-    /**
-     * Current active step index.
-     */
-    currentStep: number;
-    /**
-     * Total number of steps.
-     */
-    totalSteps: number;
-    /**
-     * Navigate to the next step.
-     */
-    goToNext: () => Promise<void>;
-    /**
-     * Navigate to the previous step.
-     */
-    goToPrevious: () => void;
-    /**
-     * Navigate to a specific step (only if it's completed or active).
-     */
-    goToStep: (params: {
-        stepIndex: number;
-    }) => void;
-    /**
-     * Whether the wizard is on the first step.
-     */
-    isFirstStep: boolean;
-    /**
-     * Whether the wizard is on the last step.
-     */
-    isLastStep: boolean;
-    /**
-     * Get the status of a step by index.
-     */
-    getStepStatus: (params: {
-        stepIndex: number;
-    }) => WizardStepStatus;
-    /**
-     * Register a validation function for the current step.
-     * This allows step content components to provide their own validation logic.
-     */
-    setStepValidation: (validate: () => boolean | Promise<boolean>) => void;
-}
-
-/**
- * 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.
- */
-declare const Wizard: {
-    ({ steps, layout, variant, onComplete, onCancel, onStepChange, initialStep, allowStepClick, labels, }: WizardProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * Hook to access the wizard context from within step content.
- */
-declare const useWizard: () => WizardContextValue;
-
-export { Wizard, type WizardContextValue, type WizardLabels, type WizardLayout, type WizardProps, type WizardStep, type WizardStepStatus, type WizardVariant, useWizard };