@sfxcode/nuxt-ui-formkit 1.2.1 → 1.2.2

package/dist/runtime/composables/useFormKitForm.d.ts

@@ -0,0 +1,11 @@
+import type { ErrorMessages } from '@formkit/core';
+export declare function useFormKitForm(id: string): {
+    submit: (handler?: () => unknown | Promise<unknown>) => void;
+    reset: (resetTo?: unknown) => void;
+    setErrors: (localErrors: ErrorMessages, childErrors?: ErrorMessages) => void;
+    clearErrors: (clearChildren?: boolean) => void;
+    isValid: import("vue").ComputedRef<boolean>;
+    isSubmitted: import("vue").ComputedRef<boolean>;
+    hasErrors: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").Ref<boolean, boolean>;
+};

package/dist/runtime/composables/useFormKitForm.js

@@ -0,0 +1,38 @@
+import { clearErrors, reset, setErrors, submitForm } from "@formkit/core";
+import { useFormKitContextById } from "@formkit/vue";
+import { computed, ref } from "vue";
+export function useFormKitForm(id) {
+  const context = useFormKitContextById(id);
+  const isLoading = ref(false);
+  const isValid = computed(() => context.value?.state.valid ?? false);
+  const isSubmitted = computed(() => context.value?.state.submitted ?? false);
+  const hasErrors = computed(() => context.value?.state.errors ?? false);
+  function submit(handler) {
+    submitForm(id);
+    if (!handler)
+      return;
+    isLoading.value = true;
+    void Promise.resolve(handler()).finally(() => {
+      isLoading.value = false;
+    });
+  }
+  function resetForm(resetTo) {
+    reset(id, resetTo);
+  }
+  function setFormErrors(localErrors, childErrors) {
+    setErrors(id, localErrors, childErrors);
+  }
+  function clearFormErrors(clearChildren) {
+    clearErrors(id, clearChildren);
+  }
+  return {
+    submit,
+    reset: resetForm,
+    setErrors: setFormErrors,
+    clearErrors: clearFormErrors,
+    isValid,
+    isSubmitted,
+    hasErrors,
+    isLoading
+  };
+}

package/dist/runtime/composables/useFormKitMultiStep.d.ts

@@ -0,0 +1,5 @@
+import type { FormKitNode } from '@formkit/core';
+export declare function useFormKitMultiStep(): {
+    addMultiStepHandler: (node: FormKitNode) => void;
+    addStepHandler: (node: FormKitNode) => void;
+};

package/dist/runtime/composables/useFormKitMultiStep.js

@@ -0,0 +1,65 @@
+import { ref, watchEffect } from "vue";
+export function useFormKitMultiStep() {
+  function buildTabItems(node) {
+    const steps = Array.isArray(node.props.steps) ? node.props.steps : [];
+    const validStepIcon = typeof node.props.validStepIcon === "string" ? node.props.validStepIcon : "i-lucide-check";
+    const allowIncomplete = node.props.allowIncomplete !== false;
+    const activeIndex = steps.findIndex((step) => step.node?.name === node.props.activeStep);
+    const activeStepInvalid = activeIndex >= 0 && steps[activeIndex]?.isValid === false;
+    return steps.map((step, index) => {
+      const totalErrorCount = (step.errorCount ?? 0) + (step.blockingCount ?? 0);
+      const item = {
+        label: step.stepName,
+        value: step.node?.name,
+        // Jumping ahead to a step you haven't visited yet while the current
+        // step is invalid would just be silently blocked by the addon's own
+        // `isTargetStepAllowed` gating on click - disable it proactively
+        // instead so it's not clickable-but-inert. Steps already visited
+        // (including the active one) stay enabled, matching the addon's own
+        // "moving backward is always allowed" rule.
+        disabled: !allowIncomplete && !step.hasBeenVisited && index > activeIndex && activeStepInvalid
+      };
+      const isActive = index === activeIndex;
+      if (step.showStepErrors && totalErrorCount > 0)
+        item.badge = { label: totalErrorCount, color: "error", variant: isActive ? "solid" : void 0 };
+      else if (step.isValid && step.hasBeenVisited)
+        item.badge = { icon: validStepIcon, color: "success", variant: isActive ? "solid" : void 0 };
+      return item;
+    });
+  }
+  function addMultiStepHandler(node) {
+    const structuralVersion = ref(0);
+    const bumpStructuralVersion = () => {
+      structuralVersion.value++;
+    };
+    node.on("child", bumpStructuralVersion);
+    node.on("childRemoved", bumpStructuralVersion);
+    node.on("prop:steps", bumpStructuralVersion);
+    node.on("prop:activeStep", bumpStructuralVersion);
+    node.on("created", () => {
+      if (!node.context)
+        return;
+      watchEffect(() => {
+        void structuralVersion.value;
+        if (node.context)
+          node.context.tabItems = buildTabItems(node);
+      });
+      node.context.handleTabChange = (value) => {
+        node.goTo(value);
+      };
+    });
+  }
+  function addStepHandler(node) {
+    node.on("created", () => {
+      if (!node.context)
+        return;
+      node.context.internalStepActionsClass = node.context.stepActionsClass ? `formkit-step-actions ${node.context.stepActionsClass}` : "formkit-step-actions flex gap-2 pt-2";
+      watchEffect(() => {
+        const allowIncomplete = node.parent?.props.allowIncomplete !== false;
+        if (node.context)
+          node.context.nextDisabled = !allowIncomplete && node.context.isValid === false;
+      });
+    });
+  }
+  return { addMultiStepHandler, addStepHandler };
+}

package/dist/runtime/composables/useFormKitRepeater.d.ts

@@ -0,0 +1,4 @@
+import type { FormKitNode } from '@formkit/core';
+export declare function useFormKitRepeater(): {
+    addRepeaterHandler: (node: FormKitNode) => void;
+};

package/dist/runtime/composables/useFormKitRepeater.js

@@ -0,0 +1,138 @@
+export function useFormKitRepeater() {
+  function addRepeaterHandler(node) {
+    const swapElements = (array, index1, index2) => {
+      const [element] = array.splice(index1, 1);
+      if (element !== void 0) {
+        array.splice(index2, 0, element);
+      }
+      return array;
+    };
+    const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    const syncOuterValue = (value) => {
+      node.input(value, false);
+    };
+    node.on("created", () => {
+      if (node.context) {
+        let dragStartIndex = null;
+        let dragOverIndex = null;
+        const newItem = node.context.newItem || {};
+        node.context.listName = node.name;
+        node.context.renderButtons = !node.context.hideButtonGroup;
+        node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
+        node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
+        node.context.renderMoveButtons = !node.context.hideMoveButtons;
+        node.context.draggable = !!node.context.draggable;
+        node.context.renderDragHandle = !!node.context.displayDragHandle;
+        node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
+        node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
+        node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
+        node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
+        node.context.internalListId = `formkit-items-${uuid}`;
+        node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
+        node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
+        node.context.repeaterValidation = [["length", node.context.minItems, node.context.maxItems]];
+        node.context.getListItemClass = (index) => {
+          if (dragOverIndex === index && dragStartIndex !== index)
+            return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+          return node.context?.internalListItemClass?.toString() ?? "";
+        };
+        node.context.getListItemId = (index) => {
+          return `formkit-item-${index}-${uuid}`;
+        };
+        node.context.insertNode = (parentNode) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            const newArray = [{ ...newItem }, ...parentNode.value];
+            parentNode.input(newArray, false);
+            syncOuterValue(newArray);
+          }
+        };
+        node.context.removeNode = (parentNode, index) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            const newArray = parentNode._value.filter((_, i) => i !== index);
+            parentNode.input(newArray, false);
+            syncOuterValue(newArray);
+          }
+        };
+        node.context.addNode = (parentNode, index) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            const array = parentNode.value;
+            array.splice(index + 1, 0, { ...newItem });
+            parentNode.input(array, false);
+            syncOuterValue(array);
+          }
+        };
+        node.context.cloneNode = (parentNode, index) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            const item = parentNode.value[index];
+            const array = parentNode.value;
+            array.splice(index + 1, 0, { ...item });
+            parentNode.input(array, false);
+            syncOuterValue(array);
+          }
+        };
+        node.context.moveNodeUp = (parentNode, index) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            if (index > 0) {
+              const newArray = swapElements(parentNode.value, index - 1, index);
+              parentNode.input(newArray, false);
+              syncOuterValue(newArray);
+            }
+          }
+        };
+        node.context.moveNodeDown = (parentNode, index) => () => {
+          if (parentNode && Array.isArray(parentNode._value)) {
+            if (index < parentNode.value.length - 1) {
+              const newArray = swapElements(parentNode.value, index, index + 1);
+              parentNode.input(newArray, false);
+              syncOuterValue(newArray);
+            }
+          }
+        };
+        node.context.dragNodeStart = (_parentNode, index) => (event) => {
+          dragStartIndex = index;
+          if (event?.dataTransfer) {
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", String(index));
+          }
+        };
+        node.context.dragNodeOver = (targetIndex) => (event) => {
+          event?.preventDefault();
+          dragOverIndex = targetIndex;
+          if (event?.dataTransfer)
+            event.dataTransfer.dropEffect = "move";
+        };
+        node.context.dragNodeLeave = (targetIndex) => () => {
+          if (dragOverIndex === targetIndex)
+            dragOverIndex = null;
+        };
+        node.context.dropNode = (parentNode, targetIndex) => (event) => {
+          event?.preventDefault();
+          if (!parentNode || !Array.isArray(parentNode._value)) {
+            dragOverIndex = null;
+            return;
+          }
+          const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
+          const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
+          if (sourceIndex === null || sourceIndex === targetIndex) {
+            dragOverIndex = null;
+            return;
+          }
+          if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
+            dragOverIndex = null;
+            return;
+          }
+          const newArray = swapElements(parentNode.value, sourceIndex, targetIndex);
+          parentNode.input(newArray, false);
+          syncOuterValue(newArray);
+          dragStartIndex = null;
+          dragOverIndex = null;
+        };
+        node.context.dragNodeEnd = () => {
+          dragStartIndex = null;
+          dragOverIndex = null;
+        };
+      }
+    });
+  }
+  return { addRepeaterHandler };
+}

package/dist/runtime/formkit/createNuxtUiFormkitConfig.d.ts

@@ -0,0 +1,19 @@
+import type { DefaultConfigOptions } from '@formkit/vue';
+export interface CreateNuxtUiFormkitConfigOptions {
+    /**
+     * Registers `createMultiStepPlugin()` so `nuxtUIMultiStep`/`nuxtUIStep`
+     * actually work. The input type registrations themselves are always
+     * included below regardless of this flag - they're inert for forms that
+     * don't use them, but the plugin has real runtime behavior (it hooks
+     * every node to check its type), so it's opt-in.
+     */
+    multiStep?: boolean;
+}
+/**
+ * Assembles the `inputs`/`plugins` this module needs into a plain object a
+ * consumer spreads into their own `defaultConfig({ ...createNuxtUiFormkitConfig(), ... })`
+ * call inside `formkit.config.ts` - it doesn't call `defaultConfig` itself,
+ * so it stays composable with whatever else that config already does
+ * (locales, `iconLoader`, other plugins like `createAutoAnimatePlugin`).
+ */
+export declare function createNuxtUiFormkitConfig(options?: CreateNuxtUiFormkitConfigOptions): Pick<DefaultConfigOptions, 'inputs' | 'plugins'>;

package/dist/runtime/formkit/createNuxtUiFormkitConfig.js

@@ -0,0 +1,12 @@
+import { createMultiStepPlugin } from "@formkit/addons";
+import { nuxtUIInputs, nuxtUIOutputs } from "./definitions/index.js";
+import { addNuxtAsteriskPlugin } from "./plugins/index.js";
+export function createNuxtUiFormkitConfig(options = {}) {
+  const plugins = [addNuxtAsteriskPlugin];
+  if (options.multiStep)
+    plugins.push(createMultiStepPlugin());
+  return {
+    inputs: { ...nuxtUIInputs, ...nuxtUIOutputs },
+    plugins
+  };
+}

package/dist/runtime/formkit/createNuxtUiFormkitConfig.mjs

@@ -0,0 +1,12 @@
+import { createMultiStepPlugin } from "@formkit/addons";
+import { nuxtUIInputs, nuxtUIOutputs } from "./definitions/index.mjs";
+import { addNuxtAsteriskPlugin } from "./plugins/index.mjs";
+export function createNuxtUiFormkitConfig(options = {}) {
+  const plugins = [addNuxtAsteriskPlugin];
+  if (options.multiStep)
+    plugins.push(createMultiStepPlugin());
+  return {
+    inputs: { ...nuxtUIInputs, ...nuxtUIOutputs },
+    plugins
+  };
+}

package/dist/runtime/formkit/definitions/index.d.ts

@@ -1,4 +1,5 @@
 export * from './input.js';
+export * from './multiStep.js';
 export * from './output.js';
 export declare const nuxtUIInputs: {
     nuxtUICalendar: import("@formkit/core").FormKitTypeDefinition;
@@ -14,11 +15,13 @@ export declare const nuxtUIInputs: {
     nuxtUIInputTags: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIInputTime: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIListbox: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIMultiStep: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIPinInput: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRadioGroup: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISelect: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISelectMenu: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISlider: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIStep: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISwitch: import("@formkit/core").FormKitTypeDefinition;
     nuxtUITextarea: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRepeater: import("@formkit/core").FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/index.js

@@ -1,7 +1,9 @@
 import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.js";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
 import { nuxtUIRepeaterDefinition } from "./repeater.js";
 export * from "./input.js";
+export * from "./multiStep.js";
 export * from "./output.js";
 export const nuxtUIInputs = {
   nuxtUICalendar: nuxtUICalendarDefinition,
@@ -17,11 +19,13 @@ export const nuxtUIInputs = {
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
   nuxtUIListbox: nuxtUIListboxDefinition,
+  nuxtUIMultiStep: nuxtUIMultiStepDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
+  nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition

package/dist/runtime/formkit/definitions/index.mjs

@@ -1,7 +1,9 @@
 import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.mjs";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
 import { nuxtUIRepeaterDefinition } from "./repeater.mjs";
 export * from "./input.mjs";
+export * from "./multiStep.mjs";
 export * from "./output.mjs";
 export const nuxtUIInputs = {
   nuxtUICalendar: nuxtUICalendarDefinition,
@@ -17,11 +19,13 @@ export const nuxtUIInputs = {
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
   nuxtUIListbox: nuxtUIListboxDefinition,
+  nuxtUIMultiStep: nuxtUIMultiStepDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
+  nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition

package/dist/runtime/formkit/definitions/multiStep.d.ts

@@ -0,0 +1,3 @@
+import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const nuxtUIStepDefinition: FormKitTypeDefinition;
+export declare const nuxtUIMultiStepDefinition: FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/multiStep.js

@@ -0,0 +1,90 @@
+import { disablesChildren } from "@formkit/inputs";
+import { createInput } from "@formkit/vue";
+import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep.js";
+import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
+const { addElement, addComponent } = useFormKitSchema();
+const { addMultiStepHandler, addStepHandler } = useFormKitMultiStep();
+function addStepActionButton(label, onClick, bindAttrs, render, variant, disabled) {
+  return addElement("div", [
+    addComponent("UButton", { label, onClick, variant, disabled, ui: "$ui" }, true, { bind: bindAttrs })
+  ], {}, render);
+}
+export const nuxtUIStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", "$slots.default", { class: "formkit-step-inner" }),
+    addElement("div", [
+      addStepActionButton(
+        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        "$handlers.previous",
+        "$previousAttrs",
+        "$isFirstStep === false",
+        "outline"
+      ),
+      addStepActionButton(
+        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        "$handlers.next",
+        "$nextAttrs",
+        "$isLastStep === false || $stepIndex === 0",
+        void 0,
+        "$nextDisabled"
+      )
+    ], { class: "$internalStepActionsClass" })
+  ], {
+    "id": "$id",
+    "role": "tabpanel",
+    "aria-labelledby": '$node.parent.props.id + "_tab_" + $stepIndex'
+  }, true),
+  {
+    // The core node `type` (input|list|group) - not to be confused with
+    // `forceTypeProp` below, which is what makes `@formkit/addons`' own
+    // `createMultiStepPlugin` recognize this node as a `step`.
+    type: "group",
+    forceTypeProp: "step",
+    family: "NuxtUIInput",
+    props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
+    features: [disablesChildren, addStepHandler]
+  },
+  {
+    // `createInput()` always wraps the given schema in FormKit's standard
+    // outer/wrapper/label/inner/help/messages chrome (`useSchema()`) - the
+    // `hidden` attr on our own inner div (above) only hid *that* div, while
+    // the auto-generated `label` section (which renders whenever `$label`
+    // is set - and every step needs a `label` prop so `stepName` has
+    // something better than the raw step name to show in the tab strip)
+    // is a *sibling* of it, one level up, and stayed visible regardless -
+    // every inactive step's label text leaked into the page between the
+    // active step's "Next" button and the form's own submit button. Move
+    // `hidden` to the actual outermost element instead, and suppress the
+    // redundant label section entirely (a wizard step isn't a labeled
+    // field - its `label` prop only feeds the tab strip's text).
+    outer: {
+      attrs: {
+        hidden: "$isActiveStep === false || undefined"
+      }
+    },
+    label: {
+      if: "false"
+    }
+  }
+);
+export const nuxtUIMultiStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", [
+      addComponent("UTabs", {
+        "items": "$tabItems",
+        "modelValue": "$activeStep",
+        "content": false,
+        "onUpdate:modelValue": "$handleTabChange",
+        "ui": "$ui"
+      })
+    ], { class: "formkit-multi-step-tabs" }),
+    addElement("div", "$slots.default", { class: "formkit-multi-step-steps" })
+  ], { id: "$id" }, true),
+  {
+    type: "group",
+    forceTypeProp: "multi-step",
+    family: "NuxtUIInput",
+    props: ["allowIncomplete", "tabStyle", "hideProgressLabels", "validStepIcon", "beforeStepChange", "ui"],
+    features: [disablesChildren, addMultiStepHandler]
+  }
+);

package/dist/runtime/formkit/definitions/multiStep.mjs

@@ -0,0 +1,90 @@
+import { disablesChildren } from "@formkit/inputs";
+import { createInput } from "@formkit/vue";
+import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep";
+import { useFormKitSchema } from "../../composables/useFormKitSchema";
+const { addElement, addComponent } = useFormKitSchema();
+const { addMultiStepHandler, addStepHandler } = useFormKitMultiStep();
+function addStepActionButton(label, onClick, bindAttrs, render, variant, disabled) {
+  return addElement("div", [
+    addComponent("UButton", { label, onClick, variant, disabled, ui: "$ui" }, true, { bind: bindAttrs })
+  ], {}, render);
+}
+export const nuxtUIStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", "$slots.default", { class: "formkit-step-inner" }),
+    addElement("div", [
+      addStepActionButton(
+        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        "$handlers.previous",
+        "$previousAttrs",
+        "$isFirstStep === false",
+        "outline"
+      ),
+      addStepActionButton(
+        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        "$handlers.next",
+        "$nextAttrs",
+        "$isLastStep === false || $stepIndex === 0",
+        void 0,
+        "$nextDisabled"
+      )
+    ], { class: "$internalStepActionsClass" })
+  ], {
+    "id": "$id",
+    "role": "tabpanel",
+    "aria-labelledby": '$node.parent.props.id + "_tab_" + $stepIndex'
+  }, true),
+  {
+    // The core node `type` (input|list|group) - not to be confused with
+    // `forceTypeProp` below, which is what makes `@formkit/addons`' own
+    // `createMultiStepPlugin` recognize this node as a `step`.
+    type: "group",
+    forceTypeProp: "step",
+    family: "NuxtUIInput",
+    props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
+    features: [disablesChildren, addStepHandler]
+  },
+  {
+    // `createInput()` always wraps the given schema in FormKit's standard
+    // outer/wrapper/label/inner/help/messages chrome (`useSchema()`) - the
+    // `hidden` attr on our own inner div (above) only hid *that* div, while
+    // the auto-generated `label` section (which renders whenever `$label`
+    // is set - and every step needs a `label` prop so `stepName` has
+    // something better than the raw step name to show in the tab strip)
+    // is a *sibling* of it, one level up, and stayed visible regardless -
+    // every inactive step's label text leaked into the page between the
+    // active step's "Next" button and the form's own submit button. Move
+    // `hidden` to the actual outermost element instead, and suppress the
+    // redundant label section entirely (a wizard step isn't a labeled
+    // field - its `label` prop only feeds the tab strip's text).
+    outer: {
+      attrs: {
+        hidden: "$isActiveStep === false || undefined"
+      }
+    },
+    label: {
+      if: "false"
+    }
+  }
+);
+export const nuxtUIMultiStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", [
+      addComponent("UTabs", {
+        "items": "$tabItems",
+        "modelValue": "$activeStep",
+        "content": false,
+        "onUpdate:modelValue": "$handleTabChange",
+        "ui": "$ui"
+      })
+    ], { class: "formkit-multi-step-tabs" }),
+    addElement("div", "$slots.default", { class: "formkit-multi-step-steps" })
+  ], { id: "$id" }, true),
+  {
+    type: "group",
+    forceTypeProp: "multi-step",
+    family: "NuxtUIInput",
+    props: ["allowIncomplete", "tabStyle", "hideProgressLabels", "validStepIcon", "beforeStepChange", "ui"],
+    features: [disablesChildren, addMultiStepHandler]
+  }
+);