@facter/ds-core 1.2.0 → 1.3.0

package/dist/index.js

@@ -67,7 +67,7 @@ var buttonVariants = classVarianceAuthority.cva(
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-primary/15 text-primary hover:bg-primary/25",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
@@ -6341,6 +6341,660 @@ var Kanban = {
   Column: KanbanColumn,
   Card: KanbanCard
 };
+var WizardContext = React48.createContext(void 0);
+function useWizardContext() {
+  const context = React48.useContext(WizardContext);
+  if (context === void 0) {
+    throw new Error("useWizardContext must be used within a Wizard component");
+  }
+  return context;
+}
+function useWizardContextOptional() {
+  return React48.useContext(WizardContext);
+}
+function WizardProvider({
+  children,
+  form,
+  steps,
+  initialStep = 0,
+  onStepChange,
+  validateOnNext = true,
+  allowJumpToStep = false
+}) {
+  const [completedSteps, setCompletedSteps] = React48.useState(/* @__PURE__ */ new Set());
+  const activeSteps = React48.useMemo(() => {
+    const formValues = form.getValues();
+    return steps.filter((step) => {
+      if (typeof step.isHidden === "function") {
+        return !step.isHidden(formValues);
+      }
+      return !step.isHidden;
+    });
+  }, [steps, form]);
+  const [currentStep, setCurrentStep] = React48.useState(() => {
+    return Math.min(Math.max(0, initialStep), activeSteps.length - 1);
+  });
+  const totalSteps = activeSteps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const progress = totalSteps > 0 ? Math.round((currentStep + 1) / totalSteps * 100) : 0;
+  const currentStepConfig = activeSteps[currentStep];
+  const getStepConfig = React48.useCallback(
+    (index) => activeSteps[index],
+    [activeSteps]
+  );
+  const getStepByName = React48.useCallback(
+    (name) => activeSteps.find((step) => step.name === name || step.id === name),
+    [activeSteps]
+  );
+  const getStepIndexByName = React48.useCallback(
+    (name) => activeSteps.findIndex((step) => step.name === name || step.id === name),
+    [activeSteps]
+  );
+  const isStepCompleted = React48.useCallback(
+    (index) => completedSteps.has(index),
+    [completedSteps]
+  );
+  const hasStepErrors = React48.useCallback(
+    (index) => {
+      const stepConfig = activeSteps[index];
+      if (!stepConfig?.fields) return false;
+      const errors = form.formState.errors;
+      return stepConfig.fields.some((field) => {
+        const fieldPath = field;
+        return fieldPath in errors;
+      });
+    },
+    [activeSteps, form.formState.errors]
+  );
+  const validateCurrentStep = React48.useCallback(async () => {
+    const stepConfig = currentStepConfig;
+    if (!stepConfig?.validationSchema) {
+      return true;
+    }
+    const formValues = form.getValues();
+    const result = await stepConfig.validationSchema.safeParseAsync(formValues);
+    if (!result.success) {
+      if (stepConfig.fields) {
+        await Promise.all(
+          stepConfig.fields.map((field) => form.trigger(field))
+        );
+      }
+      return false;
+    }
+    if (stepConfig.fields) {
+      stepConfig.fields.forEach((field) => {
+        form.clearErrors(field);
+      });
+    }
+    return true;
+  }, [currentStepConfig, form]);
+  const goToNextStep = React48.useCallback(async () => {
+    if (isLastStep) {
+      return false;
+    }
+    if (validateOnNext) {
+      const isValid = await validateCurrentStep();
+      if (!isValid) {
+        return false;
+      }
+    }
+    setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, currentStep]));
+    const nextStep = currentStep + 1;
+    setCurrentStep(nextStep);
+    onStepChange?.(nextStep, "next");
+    return true;
+  }, [isLastStep, validateOnNext, validateCurrentStep, currentStep, onStepChange]);
+  const goToPrevStep = React48.useCallback(() => {
+    if (isFirstStep) {
+      return;
+    }
+    const prevStep = currentStep - 1;
+    setCurrentStep(prevStep);
+    onStepChange?.(prevStep, "prev");
+  }, [isFirstStep, currentStep, onStepChange]);
+  const goToStep = React48.useCallback(
+    async (targetStep) => {
+      if (targetStep < 0 || targetStep >= totalSteps) {
+        return false;
+      }
+      if (!allowJumpToStep && targetStep > currentStep) {
+        for (let i = currentStep; i < targetStep; i++) {
+          if (!completedSteps.has(i)) {
+            return false;
+          }
+        }
+      }
+      if (targetStep < currentStep) {
+        setCurrentStep(targetStep);
+        onStepChange?.(targetStep, "jump");
+        return true;
+      }
+      if (validateOnNext && targetStep > currentStep) {
+        const isValid = await validateCurrentStep();
+        if (!isValid) {
+          return false;
+        }
+        setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, currentStep]));
+      }
+      setCurrentStep(targetStep);
+      onStepChange?.(targetStep, "jump");
+      return true;
+    },
+    [totalSteps, allowJumpToStep, currentStep, completedSteps, validateOnNext, validateCurrentStep, onStepChange]
+  );
+  const reset = React48.useCallback(() => {
+    setCurrentStep(Math.min(Math.max(0, initialStep), activeSteps.length - 1));
+    setCompletedSteps(/* @__PURE__ */ new Set());
+    form.reset();
+  }, [initialStep, activeSteps.length, form]);
+  const contextValue = React48.useMemo(
+    () => ({
+      // State
+      currentStep,
+      totalSteps,
+      activeSteps,
+      allSteps: steps,
+      // Computed
+      isFirstStep,
+      isLastStep,
+      progress,
+      // Navigation
+      goToNextStep,
+      goToPrevStep,
+      goToStep,
+      reset,
+      // Validation
+      validateCurrentStep,
+      isStepCompleted,
+      hasStepErrors,
+      // Form
+      form,
+      // Step info
+      currentStepConfig,
+      getStepConfig,
+      getStepByName,
+      getStepIndexByName,
+      // Settings
+      allowJumpToStep
+    }),
+    [
+      currentStep,
+      totalSteps,
+      activeSteps,
+      steps,
+      isFirstStep,
+      isLastStep,
+      progress,
+      goToNextStep,
+      goToPrevStep,
+      goToStep,
+      reset,
+      validateCurrentStep,
+      isStepCompleted,
+      hasStepErrors,
+      form,
+      currentStepConfig,
+      getStepConfig,
+      getStepByName,
+      getStepIndexByName,
+      allowJumpToStep
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.Provider, { value: contextValue, children });
+}
+var sizeConfig = {
+  sm: {
+    circle: "h-7 w-7 text-xs",
+    icon: "h-3.5 w-3.5",
+    label: "text-xs",
+    description: "text-xs",
+    gap: "gap-1.5"
+  },
+  md: {
+    circle: "h-9 w-9 text-sm",
+    icon: "h-4 w-4",
+    label: "text-sm",
+    description: "text-xs",
+    gap: "gap-2"
+  },
+  lg: {
+    circle: "h-11 w-11 text-base",
+    icon: "h-5 w-5",
+    label: "text-base",
+    description: "text-sm",
+    gap: "gap-2.5"
+  }
+};
+var stateStyles = {
+  completed: {
+    circle: "bg-green-500 text-white border-green-500",
+    label: "text-green-600 dark:text-green-400",
+    description: "text-muted-foreground"
+  },
+  current: {
+    circle: "bg-primary text-primary-foreground border-primary ring-4 ring-primary/20",
+    label: "text-primary font-semibold",
+    description: "text-muted-foreground"
+  },
+  pending: {
+    circle: "bg-background text-muted-foreground border-muted-foreground/30",
+    label: "text-muted-foreground",
+    description: "text-muted-foreground/60"
+  },
+  error: {
+    circle: "bg-destructive text-destructive-foreground border-destructive",
+    label: "text-destructive",
+    description: "text-destructive/60"
+  },
+  disabled: {
+    circle: "bg-muted text-muted-foreground/50 border-muted cursor-not-allowed",
+    label: "text-muted-foreground/50",
+    description: "text-muted-foreground/30"
+  }
+};
+function WizardStepIndicator({
+  step,
+  index,
+  state,
+  showNumber = false,
+  showDescription = false,
+  size = "md",
+  isClickable = false,
+  onClick
+}) {
+  const config = sizeConfig[size];
+  const styles = stateStyles[state];
+  const Icon2 = step.icon;
+  const renderCircleContent = () => {
+    if (state === "completed") {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: config.icon, strokeWidth: 3 });
+    }
+    if (state === "error") {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: config.icon });
+    }
+    if (Icon2 && !showNumber) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: config.icon });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center",
+        config.gap,
+        isClickable && "cursor-pointer group"
+      ),
+      onClick: isClickable ? onClick : void 0,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onKeyDown: isClickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      } : void 0,
+      "aria-current": state === "current" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded-full border-2 transition-all duration-200",
+              config.circle,
+              styles.circle,
+              isClickable && "group-hover:ring-4 group-hover:ring-primary/10"
+            ),
+            children: renderCircleContent()
+          }
+        ),
+        (step.label || showDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center max-w-[120px]", children: [
+          step.label && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "leading-tight transition-colors duration-200",
+                config.label,
+                styles.label
+              ),
+              children: step.label
+            }
+          ),
+          showDescription && step.description && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "leading-tight mt-0.5",
+                config.description,
+                styles.description
+              ),
+              children: step.description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function WizardStepConnector({
+  isCompleted = false,
+  variant = "horizontal",
+  className
+}) {
+  const isHorizontal = variant === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "transition-colors duration-300",
+        isHorizontal ? "flex-1 h-0.5 min-w-[24px] mx-2" : "w-0.5 min-h-[24px] my-2 ml-[18px]",
+        isCompleted ? "bg-green-500" : "bg-muted-foreground/20",
+        className
+      ),
+      "aria-hidden": "true"
+    }
+  );
+}
+function WizardSteps({
+  variant = "horizontal",
+  showDescription = false,
+  showNumbers = false,
+  size = "md",
+  className
+}) {
+  const {
+    activeSteps,
+    currentStep,
+    isStepCompleted,
+    hasStepErrors,
+    goToStep,
+    allowJumpToStep
+  } = useWizardContext();
+  const getStepState = (index) => {
+    const step = activeSteps[index];
+    if (step.isDisabled) {
+      return "disabled";
+    }
+    if (index === currentStep) {
+      return hasStepErrors(index) ? "error" : "current";
+    }
+    if (isStepCompleted(index)) {
+      return hasStepErrors(index) ? "error" : "completed";
+    }
+    return "pending";
+  };
+  const isStepClickable = (index) => {
+    if (index === currentStep) return false;
+    const step = activeSteps[index];
+    if (step.isDisabled) return false;
+    if (index < currentStep) return true;
+    if (allowJumpToStep && index > currentStep) {
+      for (let i = currentStep; i < index; i++) {
+        if (!isStepCompleted(i)) return false;
+      }
+      return true;
+    }
+    return false;
+  };
+  const handleStepClick = async (index) => {
+    if (isStepClickable(index)) {
+      await goToStep(index);
+    }
+  };
+  const isHorizontal = variant === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Progresso do formul\xE1rio",
+      className: cn(
+        "flex",
+        isHorizontal ? "flex-row items-center justify-center" : "flex-col items-start",
+        className
+      ),
+      children: activeSteps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex",
+            isHorizontal ? "flex-row items-center" : "flex-col",
+            index !== activeSteps.length - 1 && isHorizontal && "flex-1"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              WizardStepIndicator,
+              {
+                step,
+                index,
+                state: getStepState(index),
+                showNumber: showNumbers,
+                showDescription,
+                size,
+                isClickable: isStepClickable(index),
+                onClick: () => handleStepClick(index)
+              }
+            ),
+            index !== activeSteps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              WizardStepConnector,
+              {
+                isCompleted: isStepCompleted(index),
+                variant
+              }
+            )
+          ]
+        },
+        step.id
+      ))
+    }
+  );
+}
+function WizardContent({ children, className }) {
+  const { currentStepConfig } = useWizardContext();
+  let activePanel = null;
+  React48.Children.forEach(children, (child) => {
+    if (!React48.isValidElement(child)) return;
+    const panelProps = child.props;
+    if (panelProps.name === currentStepConfig?.name || panelProps.name === currentStepConfig?.id) {
+      activePanel = child;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex-1", className),
+      role: "tabpanel",
+      "aria-label": currentStepConfig?.label || currentStepConfig?.name,
+      children: activePanel
+    }
+  );
+}
+function WizardPanel({ name, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), "data-wizard-panel": name, children });
+}
+function WizardNavigation({
+  cancelLabel = "Cancelar",
+  prevLabel = "Voltar",
+  nextLabel = "Continuar",
+  submitLabel = "Finalizar",
+  loadingLabel = "Processando...",
+  onCancel,
+  showCancel,
+  submitDisabled = false,
+  className
+}) {
+  const {
+    isFirstStep,
+    isLastStep,
+    goToNextStep,
+    goToPrevStep,
+    form
+  } = useWizardContext();
+  const isSubmitting = form.formState.isSubmitting;
+  const shouldShowCancel = showCancel ?? isFirstStep;
+  const handleNext = React48.useCallback(async () => {
+    await goToNextStep();
+  }, [goToNextStep]);
+  const handlePrev = React48.useCallback(() => {
+    goToPrevStep();
+  }, [goToPrevStep]);
+  const handleCancel = React48.useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-3 pt-4 border-t border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: shouldShowCancel && onCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleCancel,
+            disabled: isSubmitting,
+            className: "w-full sm:w-auto",
+            children: cancelLabel
+          }
+        ) : !isFirstStep ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handlePrev,
+            disabled: isSubmitting,
+            className: "w-full sm:w-auto",
+            children: prevLabel
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          !isFirstStep && shouldShowCancel && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handlePrev,
+              disabled: isSubmitting,
+              children: prevLabel
+            }
+          ),
+          isLastStep ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "submit",
+              disabled: submitDisabled || isSubmitting,
+              className: "min-w-[120px]",
+              children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "spinner" }),
+                loadingLabel
+              ] }) : submitLabel
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              onClick: handleNext,
+              disabled: isSubmitting,
+              className: "min-w-[120px]",
+              children: nextLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function WizardProgress({
+  showPercentage = false,
+  showStepCount = false,
+  className
+}) {
+  const { progress, currentStep, totalSteps } = useWizardContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    (showPercentage || showStepCount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2 text-sm text-muted-foreground", children: [
+      showStepCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Etapa ",
+        currentStep + 1,
+        " de ",
+        totalSteps
+      ] }),
+      showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: !showStepCount ? "ml-auto" : "", children: [
+        progress,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-2 w-full bg-muted rounded-full overflow-hidden",
+        role: "progressbar",
+        "aria-valuenow": progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": `Progresso: ${progress}%`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full bg-primary transition-all duration-300 ease-out rounded-full",
+            style: { width: `${progress}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function WizardRoot({
+  children,
+  form,
+  steps,
+  initialStep,
+  onStepChange,
+  onComplete,
+  validateOnNext = true,
+  allowJumpToStep = false,
+  className
+}) {
+  const handleSubmit = async (data) => {
+    if (onComplete) {
+      await onComplete(data);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WizardProvider,
+    {
+      form,
+      steps,
+      initialStep,
+      onStepChange,
+      onComplete,
+      validateOnNext,
+      allowJumpToStep,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "form",
+        {
+          onSubmit: form.handleSubmit(handleSubmit),
+          className: cn("flex flex-col", className),
+          noValidate: true,
+          children
+        }
+      ) })
+    }
+  );
+}
+var Wizard = Object.assign(WizardRoot, {
+  /** Visual step indicators */
+  Steps: WizardSteps,
+  /** Container for step panels */
+  Content: WizardContent,
+  /** Individual step content panel */
+  Panel: WizardPanel,
+  /** Navigation buttons (prev, next, submit) */
+  Navigation: WizardNavigation,
+  /** Progress bar indicator */
+  Progress: WizardProgress
+});
 function Logo({
   width = 100,
   color = "currentColor",
@@ -6609,6 +7263,15 @@ exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;
 exports.Toaster = Toaster;
+exports.Wizard = Wizard;
+exports.WizardContent = WizardContent;
+exports.WizardNavigation = WizardNavigation;
+exports.WizardPanel = WizardPanel;
+exports.WizardProgress = WizardProgress;
+exports.WizardProvider = WizardProvider;
+exports.WizardStepConnector = WizardStepConnector;
+exports.WizardStepIndicator = WizardStepIndicator;
+exports.WizardSteps = WizardSteps;
 exports.cn = cn;
 exports.loader = loader;
 exports.toast = toast;
@@ -6635,5 +7298,7 @@ exports.useMediaQuery = useMediaQuery2;
 exports.useSidebar = useSidebar;
 exports.useSidebarOptional = useSidebarOptional;
 exports.useTheme = useTheme;
+exports.useWizardContext = useWizardContext;
+exports.useWizardContextOptional = useWizardContextOptional;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map