chore: fix StepperForm and NumberFieldForm examples (#711)

update deps

apps/www/package.json

@@ -20,31 +20,31 @@
     "@internationalized/date": "^3.5.5",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@tanstack/vue-table": "^8.19.3",
+    "@tanstack/vue-table": "^8.20.4",
     "@unovis/ts": "^1.4.3",
     "@unovis/vue": "^1.4.3",
     "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.1.7",
+    "embla-carousel-autoplay": "^8.1.8",
-    "embla-carousel-vue": "^8.1.7",
+    "embla-carousel-vue": "^8.1.8",
-    "lucide-vue-next": "^0.416.0",
+    "lucide-vue-next": "^0.427.0",
-    "magic-string": "^0.30.10",
+    "magic-string": "^0.30.11",
     "radix-vue": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
-    "vue": "^3.4.34",
+    "vue": "^3.4.37",
     "vue-sonner": "^1.1.4",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "catalog:"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.24.8",
+    "@babel/traverse": "^7.25.3",
     "@iconify-json/gravity-ui": "^1.1.3",
     "@iconify-json/lucide": "^1.1.198",
     "@iconify-json/ph": "^1.1.13",
@@ -54,27 +54,27 @@
     "@iconify-json/tabler": "^1.1.116",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.11.1",
+    "@shikijs/transformers": "^1.12.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
-    "@vitejs/plugin-vue": "^5.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-core": "^3.4.34",
+    "@vue/compiler-core": "^3.4.37",
-    "@vue/compiler-dom": "^3.4.34",
+    "@vue/compiler-dom": "^3.4.37",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "fast-glob": "^3.3.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.11.1",
+    "shiki": "^1.12.1",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
-    "tsx": "^4.16.2",
+    "tsx": "^4.17.0",
     "typescript": "^5.5.3",
-    "unplugin-icons": "^0.19.0",
+    "unplugin-icons": "^0.19.2",
-    "vitepress": "^1.3.1",
+    "vitepress": "^1.3.2",
     "vue-component-meta": "^2.0.29",
     "vue-tsc": "^2.0.29"
   }

apps/www/src/lib/registry/default/example/NumberFieldForm.vue

@@ -43,7 +43,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField name="payment">
+    <FormField v-slot="{ value }" name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
@@ -55,6 +55,7 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
+          :model-value="value"
           @update:model-value="(v) => {
             if (v) {
               setFieldValue('payment', v)

apps/www/src/lib/registry/default/example/StepperForm.vue

@@ -2,8 +2,7 @@
 import { Check, Circle, Dot } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { computed, h, ref } from 'vue'
+import { h, ref } from 'vue'
-import { get, set } from '@vueuse/core'
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
 import {
@@ -59,19 +58,6 @@ const steps = [
   },
 ]
 
-const canGoNext = computed(() => stepIndex.value < steps.length)
-const canGoBack = computed(() => stepIndex.value > 1)
-function goNext() {
-  if (get(canGoNext)) {
-    set(stepIndex, stepIndex.value + 1)
-  }
-}
-function goBack() {
-  if (get(canGoBack)) {
-    set(stepIndex, stepIndex.value - 1)
-  }
-}
-
 function onSubmit(values: any) {
   toast({
     title: 'You submitted the following values:',
@@ -85,151 +71,153 @@ function onSubmit(values: any) {
     v-slot="{ meta, values, validate }"
     as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
   >
-    <form
+    <Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
-      @submit="(e) => {
+      <form
-        e.preventDefault()
+        @submit="(e) => {
-        validate()
+          e.preventDefault()
+          validate()
 
-        if (stepIndex === steps.length) {
+          if (stepIndex === steps.length && meta.valid) {
-          onSubmit(values)
+            onSubmit(values)
-        }
+          }
-      }"
+        }"
-    >
+      >
-      <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
+        <div class="flex w-full flex-start gap-2">
-        <StepperItem
+          <StepperItem
-          v-for="step in steps"
+            v-for="step in steps"
-          :key="step.step"
+            :key="step.step"
-          v-slot="{ state }"
+            v-slot="{ state }"
-          class="relative flex w-full flex-col items-center justify-center"
+            class="relative flex w-full flex-col items-center justify-center"
-          :step="step.step"
+            :step="step.step"
-        >
-          <StepperSeparator
-            v-if="step.step !== steps[steps.length - 1].step"
-            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
-          />
-
-          <StepperTrigger as-child>
-            <Button
-              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
-              size="icon"
-              class="z-10 rounded-full shrink-0"
-              :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
-              :disabled="state !== 'completed' && !meta.valid"
-            >
-              <Check v-if="state === 'completed'" class="size-5" />
-              <Circle v-if="state === 'active'" />
-              <Dot v-if="state === 'inactive'" />
-            </Button>
-          </StepperTrigger>
-
-          <div class="mt-5 flex flex-col items-center text-center">
-            <StepperTitle
-              :class="[state === 'active' && 'text-primary']"
-              class="text-sm font-semibold transition lg:text-base"
-            >
-              {{ step.title }}
-            </StepperTitle>
-            <StepperDescription
-              :class="[state === 'active' && 'text-primary']"
-              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
-            >
-              {{ step.description }}
-            </StepperDescription>
-          </div>
-        </StepperItem>
-      </Stepper>
-
-      <div class="flex flex-col gap-4 mt-4">
-        <template v-if="stepIndex === 1">
-          <FormField v-slot="{ componentField }" name="fullName">
-            <FormItem>
-              <FormLabel>Full Name</FormLabel>
-              <FormControl>
-                <Input type="text" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="email">
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input type="email " v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-
-        <template v-if="stepIndex === 2">
-          <FormField v-slot="{ componentField }" name="password">
-            <FormItem>
-              <FormLabel>Password</FormLabel>
-              <FormControl>
-                <Input type="password" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="confirmPassword">
-            <FormItem>
-              <FormLabel>Confirm Password</FormLabel>
-              <FormControl>
-                <Input type="password" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-
-        <template v-if="stepIndex === 3">
-          <FormField v-slot="{ componentField }" name="favoriteDrink">
-            <FormItem>
-              <FormLabel>Drink</FormLabel>
-
-              <Select v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a drink" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="coffee">
-                      Coffe
-                    </SelectItem>
-                    <SelectItem value="tea">
-                      Tea
-                    </SelectItem>
-                    <SelectItem value="soda">
-                      Soda
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-      </div>
-
-      <div class="flex items-center justify-between mt-4">
-        <Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
-          Back
-        </Button>
-        <div class="flex items-center gap-3">
-          <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="!canGoNext" size="sm" @click="meta.valid && goNext()">
-            Next
-          </Button>
-          <Button
-            v-if="stepIndex === 3" size="sm" type="submit"
           >
-            Submit
+            <StepperSeparator
-          </Button>
+              v-if="step.step !== steps[steps.length - 1].step"
+              class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
+            />
+
+            <StepperTrigger as-child>
+              <Button
+                :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
+                size="icon"
+                class="z-10 rounded-full shrink-0"
+                :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
+                :disabled="state !== 'completed' && !meta.valid"
+              >
+                <Check v-if="state === 'completed'" class="size-5" />
+                <Circle v-if="state === 'active'" />
+                <Dot v-if="state === 'inactive'" />
+              </Button>
+            </StepperTrigger>
+
+            <div class="mt-5 flex flex-col items-center text-center">
+              <StepperTitle
+                :class="[state === 'active' && 'text-primary']"
+                class="text-sm font-semibold transition lg:text-base"
+              >
+                {{ step.title }}
+              </StepperTitle>
+              <StepperDescription
+                :class="[state === 'active' && 'text-primary']"
+                class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
+              >
+                {{ step.description }}
+              </StepperDescription>
+            </div>
+          </StepperItem>
         </div>
-      </div>
+
-    </form>
+        <div class="flex flex-col gap-4 mt-4">
+          <template v-if="stepIndex === 1">
+            <FormField v-slot="{ componentField }" name="fullName">
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input type="text" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="email">
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email " v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+
+          <template v-if="stepIndex === 2">
+            <FormField v-slot="{ componentField }" name="password">
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="confirmPassword">
+              <FormItem>
+                <FormLabel>Confirm Password</FormLabel>
+                <FormControl>
+                  <Input type="password" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+
+          <template v-if="stepIndex === 3">
+            <FormField v-slot="{ componentField }" name="favoriteDrink">
+              <FormItem>
+                <FormLabel>Drink</FormLabel>
+
+                <Select v-bind="componentField">
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a drink" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="coffee">
+                        Coffe
+                      </SelectItem>
+                      <SelectItem value="tea">
+                        Tea
+                      </SelectItem>
+                      <SelectItem value="soda">
+                        Soda
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+        </div>
+
+        <div class="flex items-center justify-between mt-4">
+          <Button :disabled="isPrevDisabled" variant="outline" size="sm" @click="prevStep()">
+            Back
+          </Button>
+          <div class="flex items-center gap-3">
+            <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
+              Next
+            </Button>
+            <Button
+              v-if="stepIndex === 3" size="sm" type="submit"
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Stepper>
   </Form>
 </template>

apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue

@@ -43,7 +43,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField name="payment">
+    <FormField v-slot="{ value }" name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
@@ -55,6 +55,7 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
+          :model-value="value"
           @update:model-value="(v) => {
             if (v) {
               setFieldValue('payment', v)

apps/www/src/lib/registry/new-york/example/StepperForm.vue

@@ -2,8 +2,7 @@
 import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { computed, h, ref } from 'vue'
+import { h, ref } from 'vue'
-import { get, set } from '@vueuse/core'
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
 import {
@@ -59,19 +58,6 @@ const steps = [
   },
 ]
 
-const canGoNext = computed(() => stepIndex.value < steps.length)
-const canGoBack = computed(() => stepIndex.value > 1)
-function goNext() {
-  if (get(canGoNext)) {
-    set(stepIndex, stepIndex.value + 1)
-  }
-}
-function goBack() {
-  if (get(canGoBack)) {
-    set(stepIndex, stepIndex.value - 1)
-  }
-}
-
 function onSubmit(values: any) {
   toast({
     title: 'You submitted the following values:',
@@ -85,151 +71,153 @@ function onSubmit(values: any) {
     v-slot="{ meta, values, validate }"
     as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
   >
-    <form
+    <Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
-      @submit="(e) => {
+      <form
-        e.preventDefault()
+        @submit="(e) => {
-        validate()
+          e.preventDefault()
+          validate()
 
-        if (stepIndex === steps.length) {
+          if (stepIndex === steps.length && meta.valid) {
-          onSubmit(values)
+            onSubmit(values)
-        }
+          }
-      }"
+        }"
-    >
+      >
-      <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
+        <div class="flex w-full flex-start gap-2">
-        <StepperItem
+          <StepperItem
-          v-for="step in steps"
+            v-for="step in steps"
-          :key="step.step"
+            :key="step.step"
-          v-slot="{ state }"
+            v-slot="{ state }"
-          class="relative flex w-full flex-col items-center justify-center"
+            class="relative flex w-full flex-col items-center justify-center"
-          :step="step.step"
+            :step="step.step"
-        >
-          <StepperSeparator
-            v-if="step.step !== steps[steps.length - 1].step"
-            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
-          />
-
-          <StepperTrigger as-child>
-            <Button
-              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
-              size="icon"
-              class="z-10 rounded-full shrink-0"
-              :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
-              :disabled="state !== 'completed' && !meta.valid"
-            >
-              <CheckIcon v-if="state === 'completed'" class="size-5" />
-              <CircleIcon v-if="state === 'active'" />
-              <DotIcon v-if="state === 'inactive'" />
-            </Button>
-          </StepperTrigger>
-
-          <div class="mt-5 flex flex-col items-center text-center">
-            <StepperTitle
-              :class="[state === 'active' && 'text-primary']"
-              class="text-sm font-semibold transition lg:text-base"
-            >
-              {{ step.title }}
-            </StepperTitle>
-            <StepperDescription
-              :class="[state === 'active' && 'text-primary']"
-              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
-            >
-              {{ step.description }}
-            </StepperDescription>
-          </div>
-        </StepperItem>
-      </Stepper>
-
-      <div class="flex flex-col gap-4 mt-4">
-        <template v-if="stepIndex === 1">
-          <FormField v-slot="{ componentField }" name="fullName">
-            <FormItem>
-              <FormLabel>Full Name</FormLabel>
-              <FormControl>
-                <Input type="text" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="email">
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input type="email " v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-
-        <template v-if="stepIndex === 2">
-          <FormField v-slot="{ componentField }" name="password">
-            <FormItem>
-              <FormLabel>Password</FormLabel>
-              <FormControl>
-                <Input type="password" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="confirmPassword">
-            <FormItem>
-              <FormLabel>Confirm Password</FormLabel>
-              <FormControl>
-                <Input type="password" v-bind="componentField" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-
-        <template v-if="stepIndex === 3">
-          <FormField v-slot="{ componentField }" name="favoriteDrink">
-            <FormItem>
-              <FormLabel>Drink</FormLabel>
-
-              <Select v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a drink" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="coffee">
-                      Coffe
-                    </SelectItem>
-                    <SelectItem value="tea">
-                      Tea
-                    </SelectItem>
-                    <SelectItem value="soda">
-                      Soda
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </template>
-      </div>
-
-      <div class="flex items-center justify-between mt-4">
-        <Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
-          Back
-        </Button>
-        <div class="flex items-center gap-3">
-          <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="!canGoNext" size="sm" @click="meta.valid && goNext()">
-            Next
-          </Button>
-          <Button
-            v-if="stepIndex === 3" size="sm" type="submit"
           >
-            Submit
+            <StepperSeparator
-          </Button>
+              v-if="step.step !== steps[steps.length - 1].step"
+              class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
+            />
+
+            <StepperTrigger as-child>
+              <Button
+                :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
+                size="icon"
+                class="z-10 rounded-full shrink-0"
+                :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
+                :disabled="state !== 'completed' && !meta.valid"
+              >
+                <CheckIcon v-if="state === 'completed'" class="size-5" />
+                <CircleIcon v-if="state === 'active'" />
+                <DotIcon v-if="state === 'inactive'" />
+              </Button>
+            </StepperTrigger>
+
+            <div class="mt-5 flex flex-col items-center text-center">
+              <StepperTitle
+                :class="[state === 'active' && 'text-primary']"
+                class="text-sm font-semibold transition lg:text-base"
+              >
+                {{ step.title }}
+              </StepperTitle>
+              <StepperDescription
+                :class="[state === 'active' && 'text-primary']"
+                class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
+              >
+                {{ step.description }}
+              </StepperDescription>
+            </div>
+          </StepperItem>
         </div>
-      </div>
+
-    </form>
+        <div class="flex flex-col gap-4 mt-4">
+          <template v-if="stepIndex === 1">
+            <FormField v-slot="{ componentField }" name="fullName">
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input type="text" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="email">
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email " v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+
+          <template v-if="stepIndex === 2">
+            <FormField v-slot="{ componentField }" name="password">
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="confirmPassword">
+              <FormItem>
+                <FormLabel>Confirm Password</FormLabel>
+                <FormControl>
+                  <Input type="password" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+
+          <template v-if="stepIndex === 3">
+            <FormField v-slot="{ componentField }" name="favoriteDrink">
+              <FormItem>
+                <FormLabel>Drink</FormLabel>
+
+                <Select v-bind="componentField">
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a drink" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="coffee">
+                        Coffe
+                      </SelectItem>
+                      <SelectItem value="tea">
+                        Tea
+                      </SelectItem>
+                      <SelectItem value="soda">
+                        Soda
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </template>
+        </div>
+
+        <div class="flex items-center justify-between mt-4">
+          <Button :disabled="isPrevDisabled" variant="outline" size="sm" @click="prevStep()">
+            Back
+          </Button>
+          <div class="flex items-center gap-3">
+            <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
+              Next
+            </Button>
+            <Button
+              v-if="stepIndex === 3" size="sm" type="submit"
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Stepper>
   </Form>
 </template>

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.10.5",
   "private": true,
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.7.0",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -31,17 +31,17 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.23.2",
+    "@antfu/eslint-config": "^2.25.1",
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@vitest/ui": "^2.0.4",
+    "@vitest/ui": "^2.0.5",
-    "bumpp": "^9.4.1",
+    "bumpp": "^9.5.1",
-    "eslint": "^9.7.0",
+    "eslint": "^9.9.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.16.1",
+    "taze": "^0.16.5",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.4"
+    "vitest": "^2.0.5"
   },
   "commitlint": {
     "extends": [
@@ -50,10 +50,10 @@
   },
   "pnpm": {
     "overrides": {
-      "hasown": "npm:@nolyfill/hasown@^1",
+      "hasown": "npm:@nolyfill/hasown@^1.0.29",
-      "is-core-module": "npm:@nolyfill/is-core-module@^1",
+      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
-      "isarray": "npm:@nolyfill/isarray@^1",
+      "isarray": "npm:@nolyfill/isarray@^1.0.29",
-      "typedarray": "npm:@nolyfill/typedarray@^1"
+      "typedarray": "npm:@nolyfill/typedarray@^1.0.29"
     }
   },
   "simple-git-hooks": {

packages/cli/package.json

@@ -50,8 +50,8 @@
     "vitest": "*"
   },
   "dependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.25.2",
-    "@babel/parser": "^7.24.8",
+    "@babel/parser": "^7.25.3",
     "@vue/compiler-sfc": "^3.4",
     "c12": "^1.11.1",
     "commander": "^12.1.0",
@@ -61,7 +61,7 @@
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.5",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.10",
+    "magic-string": "^0.30.11",
     "nypm": "^0.3.9",
     "ofetch": "^1.3.4",
     "ora": "^8.0.1",
@@ -79,11 +79,11 @@
     "@types/diff": "^5.2.1",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.2.3",
+    "tsup": "^8.2.4",
-    "type-fest": "^4.23.0",
+    "type-fest": "^4.24.0",
     "typescript": "^5.5.3",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

packages/module/package.json

@@ -38,15 +38,15 @@
     "@nuxt/kit": "^3.12.4",
     "@oxc-parser/wasm": "catalog:",
     "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/module-builder": "^0.8.2",
     "@nuxt/schema": "^3.12.4",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.0",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
     "nuxt": "^3.12.4"
   }
 }

pnpm-workspace.yaml

@@ -2,6 +2,6 @@ packages:
   - apps/*
   - packages/*
 catalog:
-  '@oxc-parser/wasm': ^0.22.0
+  '@oxc-parser/wasm': ^0.24.2
-  radix-vue: ^1.9.2
+  radix-vue: ^1.9.4
   zod: ^3.23.8