@wow-two-beta/ui 0.0.17 → 0.0.18

package/dist/{chunk-ILYL6ROC.js → chunk-3P7DZCDS.js}

@@ -1,8 +1,8 @@
 import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FFQENBTW.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-2VAZKEQD.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-DSA7L7PD.js';
 import { Tag } from './chunk-ZCA365IX.js';
-import { useControlled } from './chunk-4P2TFUVW.js';
 import { tv, dataAttr } from './chunk-BMBIZLO4.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
 import { Icon } from './chunk-TDX22OWF.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-NC2CBGX2.js';
 import { composeRefs } from './chunk-DN7WBRIV.js';
@@ -4240,7 +4240,259 @@ Editable.Preview = EditablePreview;
 Editable.Input = EditableInput;
 Editable.Submit = EditableSubmit;
 Editable.Cancel = EditableCancel;
+var WizardContext = createContext(null);
+function useWizard() {
+  const ctx = useContext(WizardContext);
+  if (!ctx) throw new Error("useWizard must be used inside <Wizard>");
+  return ctx;
+}
+var Wizard = forwardRef(function Wizard2({
+  currentStep: currentStepProp,
+  defaultCurrentStep,
+  onStepChange,
+  onComplete,
+  canGoBack = true,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const stepFromChildren = childArray.filter(
+    (c) => c.type.displayName === "WizardStep"
+  ).map((c) => {
+    const props = c.props;
+    return {
+      id: props.id,
+      label: props.label,
+      optional: props.optional,
+      final: props.final
+    };
+  });
+  const [steps, setSteps] = useState(stepFromChildren);
+  const validatorsRef = useState(() => /* @__PURE__ */ new Map())[0];
+  const initialStep = stepFromChildren[0]?.id ?? "";
+  const [currentStepId, setCurrentStepId] = useControlled({
+    controlled: currentStepProp,
+    default: defaultCurrentStep ?? initialStep,
+    onChange: onStepChange
+  });
+  const [visited, setVisited] = useState(() => /* @__PURE__ */ new Set([initialStep]));
+  const [isPending, setIsPending] = useState(false);
+  const currentIndex = steps.findIndex((s) => s.id === currentStepId);
+  const currentStep = steps[currentIndex];
+  const registerStep = useCallback((info) => {
+    setSteps((prev) => {
+      const idx = prev.findIndex((s) => s.id === info.id);
+      if (idx >= 0) {
+        const next2 = prev.slice();
+        next2[idx] = info;
+        return next2;
+      }
+      return [...prev, info];
+    });
+  }, []);
+  const unregisterStep = useCallback((id) => {
+    setSteps((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const registerValidator = useCallback(
+    (id, validator) => {
+      validatorsRef.set(id, validator);
+    },
+    [validatorsRef]
+  );
+  const unregisterValidator = useCallback(
+    (id) => {
+      validatorsRef.delete(id);
+    },
+    [validatorsRef]
+  );
+  const goTo = useCallback(
+    (idOrIndex) => {
+      const target = typeof idOrIndex === "number" ? steps[idOrIndex]?.id : idOrIndex;
+      if (!target) return;
+      setCurrentStepId(target);
+      setVisited((prev) => /* @__PURE__ */ new Set([...prev, target]));
+    },
+    [steps, setCurrentStepId]
+  );
+  const next = useCallback(async () => {
+    if (!currentStep || isPending) return;
+    const validator = validatorsRef.get(currentStep.id);
+    if (validator) {
+      setIsPending(true);
+      try {
+        const ok = await validator();
+        if (!ok) return;
+      } finally {
+        setIsPending(false);
+      }
+    }
+    if (currentStep.final) {
+      setIsPending(true);
+      try {
+        await onComplete?.();
+      } finally {
+        setIsPending(false);
+      }
+      return;
+    }
+    const nextStep = steps[currentIndex + 1];
+    if (nextStep) goTo(nextStep.id);
+  }, [currentStep, currentIndex, steps, isPending, onComplete, validatorsRef, goTo]);
+  const back = useCallback(() => {
+    if (!canGoBack) return;
+    const prev = steps[currentIndex - 1];
+    if (prev) goTo(prev.id);
+  }, [canGoBack, currentIndex, steps, goTo]);
+  const ctx = useMemo(
+    () => ({
+      steps,
+      currentIndex,
+      currentStep,
+      goTo,
+      next,
+      back,
+      canGoBack,
+      visited,
+      registerStep,
+      unregisterStep,
+      registerValidator,
+      unregisterValidator,
+      isPending
+    }),
+    [
+      steps,
+      currentIndex,
+      currentStep,
+      goTo,
+      next,
+      back,
+      canGoBack,
+      visited,
+      registerStep,
+      unregisterStep,
+      registerValidator,
+      unregisterValidator,
+      isPending
+    ]
+  );
+  return /* @__PURE__ */ jsx(WizardContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...rest, children }) });
+});
+var WizardSteps = forwardRef(
+  function WizardSteps2({ className, ...rest }, ref) {
+    const ctx = useWizard();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": "Wizard steps",
+        className: cn("flex items-center gap-2 overflow-x-auto", className),
+        ...rest,
+        children: ctx.steps.map((step, i) => {
+          const isCurrent = ctx.currentIndex === i;
+          const wasVisited = ctx.visited.has(step.id);
+          const canJump = ctx.canGoBack && wasVisited;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isCurrent,
+              "aria-disabled": !canJump || void 0,
+              onClick: () => canJump && ctx.goTo(step.id),
+              className: cn(
+                "flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                isCurrent ? "bg-primary text-primary-foreground" : wasVisited ? "bg-muted text-foreground hover:bg-muted/70" : "text-muted-foreground",
+                !canJump && "cursor-default"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "grid h-5 w-5 place-items-center rounded-full bg-background/20 text-[10px]", children: i + 1 }),
+                step.label ?? step.id,
+                step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] opacity-70", children: "(optional)" })
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    );
+  }
+);
+var WizardStep = forwardRef(function WizardStep2({ id, label, validate, optional, final, className, children, ...rest }, ref) {
+  const ctx = useWizard();
+  const isCurrent = ctx.currentStep?.id === id;
+  useMemo(() => {
+    ctx.registerStep({ id, label, optional, final });
+    return id;
+  }, [id, label, optional, final]);
+  useMemo(() => {
+    if (validate) ctx.registerValidator(id, validate);
+    else ctx.unregisterValidator(id);
+    return validate;
+  }, [id, validate]);
+  if (!isCurrent) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      "aria-labelledby": `wizard-step-${id}`,
+      className: cn("flex flex-col gap-3", className),
+      ...rest,
+      children
+    }
+  );
+});
+WizardStep.displayName = "WizardStep";
+var WizardFooter = forwardRef(
+  function WizardFooter2({
+    prevLabel = "Back",
+    nextLabel = "Next",
+    submitLabel = "Finish",
+    showPrev = true,
+    className,
+    ...rest
+  }, ref) {
+    const ctx = useWizard();
+    const isFirst = ctx.currentIndex === 0;
+    const isFinal = ctx.currentStep?.final ?? false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("mt-2 flex items-center justify-between gap-3", className),
+        ...rest,
+        children: [
+          showPrev && !isFirst && ctx.canGoBack ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: ctx.back,
+              disabled: ctx.isPending,
+              className: "inline-flex h-9 items-center rounded-md border border-border bg-background px-4 text-sm font-medium hover:bg-muted disabled:opacity-50",
+              children: prevLabel
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: ctx.next,
+              disabled: ctx.isPending,
+              className: "inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+              children: ctx.isPending ? "\u2026" : isFinal ? submitLabel : nextLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Wizard.Steps = WizardSteps;
+Wizard.Step = WizardStep;
+Wizard.Footer = WizardFooter;
 
-export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
-//# sourceMappingURL=chunk-ILYL6ROC.js.map
-//# sourceMappingURL=chunk-ILYL6ROC.js.map
+export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, useWizard };
+//# sourceMappingURL=chunk-3P7DZCDS.js.map
+//# sourceMappingURL=chunk-3P7DZCDS.js.map