chore: update

apps/www/__registry__/index.ts

@@ -1000,7 +1000,7 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["stepper"],
+      registryDependencies: ["stepper","form","select","input","button","toast"],
       component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperForm.vue"],
     },
@@ -2471,7 +2471,7 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["stepper"],
+      registryDependencies: ["stepper","form","select","input","button","toast"],
       component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
     },

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

@@ -1,25 +1,46 @@
 <script setup lang="ts">
 import { Check, Circle, Dot } from 'lucide-vue-next'
-
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { ref } from 'vue'
+import { computed, h, nextTick, 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, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
 import { Input } from '@/lib/registry/default/ui/input'
 import { Button } from '@/lib/registry/default/ui/button'
+import { toast } from '@/lib/registry/default/ui/toast'
 
 const formSchema = [
   z.object({
-    username: z.string().min(2).max(50),
+    fullName: z.string(),
+    email: z.string().email(),
   }),
   z.object({
     password: z.string().min(2).max(50),
+    confirmPassword: z.string(),
+  }).refine(
+    (values) => {
+      return values.password === values.confirmPassword
+    },
+    {
+      message: 'Passwords must match!',
+      path: ['confirmPassword'],
+    },
+  ),
+  z.object({
+    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),
   }),
 ]
 
 const stepIndex = ref(1)
-
 const steps = [
   {
     step: 1,
@@ -28,19 +49,54 @@ const steps = [
   },
   {
     step: 2,
-    title: 'Company details',
+    title: 'Your password',
-    description: 'A few details about your company',
+    description: 'Choose a password',
   },
   {
     step: 3,
-    title: 'Invite your team',
+    title: 'Your Favorite Drink',
-    description: 'Start collaborating with your team',
+    description: 'Choose a drink',
   },
 ]
+
+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:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
 </script>
 
 <template>
-  <Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex - 1]) || undefined">
+  <Form
+    v-slot="{ meta, values, validate }"
+    as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
+  >
+    <form
+      @submit="(e) => {
+        e.preventDefault()
+        nextTick(() => {
+          validate()
+        })
+
+        if (stepIndex === steps.length) {
+          onSubmit(values)
+        }
+      }"
+    >
       <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
         <StepperItem
           v-for="step in steps"
@@ -59,7 +115,9 @@ const steps = [
               :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']"
+              :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
+                       state !== 'completed' && !meta.valid && 'pointer-events-none',
+              ]"
             >
               <Check v-if="state === 'completed'" class="size-5" />
               <Circle v-if="state === 'active'" />
@@ -84,20 +142,24 @@ const steps = [
         </StepperItem>
       </Stepper>
 
-    {{ meta.valid }}
+      <div class="flex flex-col gap-4 mt-4">
-
-    {{ stepIndex.toString() || 'a' }}
-
         <template v-if="stepIndex === 1">
-      <FormField v-slot="{ componentField }" name="username">
+          <FormField v-slot="{ componentField }" name="fullName">
             <FormItem>
-          <FormLabel>Username</FormLabel>
+              <FormLabel>Full Name</FormLabel>
               <FormControl>
-            <Input type="text" placeholder="shadcn" v-bind="componentField" />
+                <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>
-          <FormDescription>
-            This is your public display name.
-          </FormDescription>
               <FormMessage />
             </FormItem>
           </FormField>
@@ -113,14 +175,64 @@ const steps = [
               <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">
-      <h1>BRUH</h1>
+          <FormField v-slot="{ componentField }" name="favoriteDrink">
-    </template>
+            <FormItem>
+              <FormLabel>Drink</FormLabel>
 
-    <Button type="submit">
+              <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
           </Button>
+        </div>
+      </div>
+    </form>
   </Form>
 </template>

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

@@ -49,6 +49,7 @@ const steps = [{
       </StepperTrigger>
       <StepperSeparator
         v-if="item.step !== steps[steps.length - 1].step"
+        class="w-full h-px"
       />
     </StepperItem>
   </Stepper>

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

@@ -1,25 +1,46 @@
 <script setup lang="ts">
-import { Check, Circle, Dot } from 'lucide-vue-next'
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
-
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { ref } from 'vue'
+import { computed, h, nextTick, ref } from 'vue'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { get, set } from '@vueuse/core'
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
-import { Input } from '@/lib/registry/default/ui/input'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { toast } from '@/lib/registry/new-york/ui/toast'
 
 const formSchema = [
   z.object({
-    username: z.string().min(2).max(50),
+    fullName: z.string(),
+    email: z.string().email(),
   }),
   z.object({
     password: z.string().min(2).max(50),
+    confirmPassword: z.string(),
+  }).refine(
+    (values) => {
+      return values.password === values.confirmPassword
+    },
+    {
+      message: 'Passwords must match!',
+      path: ['confirmPassword'],
+    },
+  ),
+  z.object({
+    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),
   }),
 ]
 
 const stepIndex = ref(1)
-
 const steps = [
   {
     step: 1,
@@ -28,19 +49,54 @@ const steps = [
   },
   {
     step: 2,
-    title: 'Company details',
+    title: 'Your password',
-    description: 'A few details about your company',
+    description: 'Choose a password',
   },
   {
     step: 3,
-    title: 'Invite your team',
+    title: 'Your Favorite Drink',
-    description: 'Start collaborating with your team',
+    description: 'Choose a drink',
   },
 ]
+
+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:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
 </script>
 
 <template>
-  <Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex]) || undefined">
+  <Form
+    v-slot="{ meta, values, validate }"
+    as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
+  >
+    <form
+      @submit="(e) => {
+        e.preventDefault()
+        nextTick(() => {
+          validate()
+        })
+
+        if (stepIndex === steps.length) {
+          onSubmit(values)
+        }
+      }"
+    >
       <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
         <StepperItem
           v-for="step in steps"
@@ -59,11 +115,13 @@ const steps = [
               :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']"
+              :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
+                       state !== 'completed' && !meta.valid && 'pointer-events-none',
+              ]"
             >
-            <Check v-if="state === 'completed'" class="size-5" />
+              <CheckIcon v-if="state === 'completed'" class="size-5" />
-            <Circle v-if="state === 'active'" />
+              <CircleIcon v-if="state === 'active'" />
-            <Dot v-if="state === 'inactive'" />
+              <DotIcon v-if="state === 'inactive'" />
             </Button>
           </StepperTrigger>
 
@@ -84,20 +142,24 @@ const steps = [
         </StepperItem>
       </Stepper>
 
-    {{ meta.valid }}
+      <div class="flex flex-col gap-4 mt-4">
-
-    {{ stepIndex.toString() || 'a' }}
-
         <template v-if="stepIndex === 1">
-      <FormField v-slot="{ componentField }" name="username">
+          <FormField v-slot="{ componentField }" name="fullName">
             <FormItem>
-          <FormLabel>Username</FormLabel>
+              <FormLabel>Full Name</FormLabel>
               <FormControl>
-            <Input type="text" placeholder="shadcn" v-bind="componentField" />
+                <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>
-          <FormDescription>
-            This is your public display name.
-          </FormDescription>
               <FormMessage />
             </FormItem>
           </FormField>
@@ -113,14 +175,64 @@ const steps = [
               <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">
-      <h1>BRUH</h1>
+          <FormField v-slot="{ componentField }" name="favoriteDrink">
-    </template>
+            <FormItem>
+              <FormLabel>Drink</FormLabel>
 
-    <Button type="submit">
+              <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
           </Button>
+        </div>
+      </div>
+    </form>
   </Form>
 </template>

apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
   <StepperIndicator
     v-bind="forwarded"
     :class="cn(
-      'inline-flex items-center justify-center rounded-full text-white w-8 h-8',
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
       // Disabled
       'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
       // Active

apps/www/src/public/registry/styles/new-york/stepper.json

@@ -15,7 +15,7 @@
     },
     {
       "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-white w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
     },
     {
       "name": "StepperItem.vue",