From dbb29de523d3a2ed0e5d90da833da24640159f89 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 25 Jul 2024 22:28:48 +0330
Subject: [PATCH] docs: add Stepper examples (#681)

---
 apps/www/__registry__/index.ts                |  42 ++++
 .../src/content/docs/components/stepper.md    |  16 +-
 .../registry/default/example/StepperDemo.vue  |   1 +
 .../registry/default/example/StepperForm.vue  | 238 ++++++++++++++++++
 .../default/example/StepperHorizental.vue     |  69 +++++
 .../default/example/StepperVertical.vue       |  71 ++++++
 .../registry/default/ui/stepper/Stepper.vue   |   5 +-
 .../default/ui/stepper/StepperDescription.vue |   4 +-
 .../default/ui/stepper/StepperItem.vue        |   5 +-
 .../default/ui/stepper/StepperSeparator.vue   |   2 +-
 .../registry/new-york/example/StepperDemo.vue |   1 +
 .../registry/new-york/example/StepperForm.vue | 238 ++++++++++++++++++
 .../new-york/example/StepperHorizental.vue    |  69 +++++
 .../new-york/example/StepperVertical.vue      |  71 ++++++
 .../registry/new-york/ui/stepper/Stepper.vue  |   5 +-
 .../ui/stepper/StepperDescription.vue         |   4 +-
 .../new-york/ui/stepper/StepperIndicator.vue  |   2 +-
 .../new-york/ui/stepper/StepperItem.vue       |   5 +-
 .../new-york/ui/stepper/StepperSeparator.vue  |   6 +-
 .../registry/styles/default/stepper.json      |  10 +-
 .../registry/styles/new-york/stepper.json     |  10 +-
 21 files changed, 846 insertions(+), 28 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/StepperForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/StepperHorizental.vue
 create mode 100644 apps/www/src/lib/registry/default/example/StepperVertical.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/StepperForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/StepperHorizental.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/StepperVertical.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 41a34aa4..2cf972ad 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -997,6 +997,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperDemo.vue"],
     },
+    "StepperForm": {
+      name: "StepperForm",
+      type: "components:example",
+      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"],
+    },
+    "StepperHorizental": {
+      name: "StepperHorizental",
+      type: "components:example",
+      registryDependencies: ["stepper","button"],
+      component: () => import("../src/lib/registry/default/example/StepperHorizental.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/StepperHorizental.vue"],
+    },
+    "StepperVertical": {
+      name: "StepperVertical",
+      type: "components:example",
+      registryDependencies: ["stepper","button"],
+      component: () => import("../src/lib/registry/default/example/StepperVertical.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/StepperVertical.vue"],
+    },
     "SwitchDemo": {
       name: "SwitchDemo",
       type: "components:example",
@@ -2447,6 +2468,27 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
     },
+    "StepperForm": {
+      name: "StepperForm",
+      type: "components:example",
+      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"],
+    },
+    "StepperHorizental": {
+      name: "StepperHorizental",
+      type: "components:example",
+      registryDependencies: ["stepper","button"],
+      component: () => import("../src/lib/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/StepperHorizental.vue"],
+    },
+    "StepperVertical": {
+      name: "StepperVertical",
+      type: "components:example",
+      registryDependencies: ["stepper","button"],
+      component: () => import("../src/lib/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/StepperVertical.vue"],
+    },
     "SwitchDemo": {
       name: "SwitchDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/stepper.md b/apps/www/src/content/docs/components/stepper.md
index e0c75a8b..af94d38f 100644
--- a/apps/www/src/content/docs/components/stepper.md
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -30,7 +30,7 @@ import {
 
 <template>
   <Stepper>
-    <StepperItem :step="1" linear>
+    <StepperItem :step="1">
       <StepperTrigger>
         <StepperIndicator>1</StepperIndicator>
         <StepperTitle>Step 1</StepperTitle>
@@ -48,3 +48,17 @@ import {
   </Stepper>
 </template>
 ```
+
+## Examples
+
+### Horizental
+
+<ComponentPreview name="StepperHorizental" />
+
+### Vertical
+
+<ComponentPreview name="StepperVertical" />
+
+### Form
+
+<ComponentPreview name="StepperForm" />
diff --git a/apps/www/src/lib/registry/default/example/StepperDemo.vue b/apps/www/src/lib/registry/default/example/StepperDemo.vue
index fcfb2116..cdb2bb90 100644
--- a/apps/www/src/lib/registry/default/example/StepperDemo.vue
+++ b/apps/www/src/lib/registry/default/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>
diff --git a/apps/www/src/lib/registry/default/example/StepperForm.vue b/apps/www/src/lib/registry/default/example/StepperForm.vue
new file mode 100644
index 00000000..d20a63e7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/StepperForm.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { Check, Circle, Dot } from 'lucide-vue-next'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+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, 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({
+    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,
+    title: 'Your details',
+    description: 'Provide your name and email',
+  },
+  {
+    step: 2,
+    title: 'Your password',
+    description: 'Choose a password',
+  },
+  {
+    step: 3,
+    title: 'Your Favorite Drink',
+    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, 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"
+          :key="step.step"
+          v-slot="{ state }"
+          class="relative flex w-full flex-col items-center justify-center"
+          :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',
+                       state !== 'completed' && !meta.valid && 'pointer-events-none',
+              ]"
+            >
+              <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
+          </Button>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/StepperHorizental.vue b/apps/www/src/lib/registry/default/example/StepperHorizental.vue
new file mode 100644
index 00000000..e450a6be
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/StepperHorizental.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Check, Circle, Dot } from 'lucide-vue-next'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Button } from '@/lib/registry/default/ui/button'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Your details',
+    description: 'Provide your name and email',
+  },
+  {
+    step: 2,
+    title: 'Company details',
+    description: 'A few details about your company',
+  },
+  {
+    step: 3,
+    title: 'Invite your team',
+    description: 'Start collaborating with your team',
+  },
+]
+</script>
+
+<template>
+  <Stepper class="flex w-full items-start gap-2">
+    <StepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      class="relative flex w-full flex-col items-center justify-center"
+      :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']"
+        >
+          <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>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/StepperVertical.vue b/apps/www/src/lib/registry/default/example/StepperVertical.vue
new file mode 100644
index 00000000..eb055cf3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/StepperVertical.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Check, Circle, Dot } from 'lucide-vue-next'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Button } from '@/lib/registry/default/ui/button'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Your details',
+    description:
+        'Provide your name and email address. We will use this information to create your account',
+  },
+  {
+    step: 2,
+    title: 'Company details',
+    description: 'A few details about your company will help us personalize your experience',
+  },
+  {
+    step: 3,
+    title: 'Invite your team',
+    description:
+        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',
+  },
+]
+</script>
+
+<template>
+  <Stepper orientation="vertical" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
+    <StepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      class="relative flex w-full items-start gap-6"
+      :step="step.step"
+    >
+      <StepperSeparator
+        v-if="step.step !== steps[steps.length - 1].step"
+        class="absolute left-[18px] top-[38px] block h-[105%] w-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']"
+        >
+          <Check v-if="state === 'completed'" class="size-5" />
+          <Circle v-if="state === 'active'" />
+          <Dot v-if="state === 'inactive'" />
+        </Button>
+      </StepperTrigger>
+
+      <div class="flex flex-col gap-1">
+        <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>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue b/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
index 6287623a..2b578c41 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
@@ -19,12 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <StepperRoot
+    v-slot="slotProps"
     :class="cn(
-      'flex gap-2 p-1',
+      'flex gap-2',
       props.class,
     )"
     v-bind="forwarded"
   >
-    <slot />
+    <slot v-bind="slotProps" />
   </StepperRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
index af9133eb..999ba1f5 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
-    <slot />
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
   </StepperDescription>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
index aebdb294..2c0fbee0 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
@@ -18,9 +18,10 @@ const forwarded = useForwardProps(delegatedProps)
 
 <template>
   <StepperItem
+    v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
   >
-    <slot />
+    <slot v-bind="slotProps" />
   </StepperItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
index 6246b026..879f7c70 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
   <StepperSeparator
     v-bind="forwarded"
     :class="cn(
-      'w-full h-[1px] bg-border',
+      'bg-muted',
       // Disabled
       'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
       // Completed
diff --git a/apps/www/src/lib/registry/new-york/example/StepperDemo.vue b/apps/www/src/lib/registry/new-york/example/StepperDemo.vue
index 32012a44..4ca231ce 100644
--- a/apps/www/src/lib/registry/new-york/example/StepperDemo.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/example/StepperForm.vue b/apps/www/src/lib/registry/new-york/example/StepperForm.vue
new file mode 100644
index 00000000..30f63b74
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/StepperForm.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { computed, h, nextTick, 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 {
+  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({
+    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,
+    title: 'Your details',
+    description: 'Provide your name and email',
+  },
+  {
+    step: 2,
+    title: 'Your password',
+    description: 'Choose a password',
+  },
+  {
+    step: 3,
+    title: 'Your Favorite Drink',
+    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, 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"
+          :key="step.step"
+          v-slot="{ state }"
+          class="relative flex w-full flex-col items-center justify-center"
+          :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',
+                       state !== 'completed' && !meta.valid && 'pointer-events-none',
+              ]"
+            >
+              <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
+          </Button>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/StepperHorizental.vue b/apps/www/src/lib/registry/new-york/example/StepperHorizental.vue
new file mode 100644
index 00000000..58019036
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/StepperHorizental.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Your details',
+    description: 'Provide your name and email',
+  },
+  {
+    step: 2,
+    title: 'Company details',
+    description: 'A few details about your company',
+  },
+  {
+    step: 3,
+    title: 'Invite your team',
+    description: 'Start collaborating with your team',
+  },
+]
+</script>
+
+<template>
+  <Stepper class="flex w-full items-start gap-2">
+    <StepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      class="relative flex w-full flex-col items-center justify-center"
+      :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']"
+        >
+          <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>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/StepperVertical.vue b/apps/www/src/lib/registry/new-york/example/StepperVertical.vue
new file mode 100644
index 00000000..b95935de
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/StepperVertical.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Your details',
+    description:
+        'Provide your name and email address. We will use this information to create your account',
+  },
+  {
+    step: 2,
+    title: 'Company details',
+    description: 'A few details about your company will help us personalize your experience',
+  },
+  {
+    step: 3,
+    title: 'Invite your team',
+    description:
+        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',
+  },
+]
+</script>
+
+<template>
+  <Stepper orientation="vertical" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
+    <StepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      class="relative flex w-full items-start gap-6"
+      :step="step.step"
+    >
+      <StepperSeparator
+        v-if="step.step !== steps[steps.length - 1].step"
+        class="absolute left-[18px] top-[38px] block h-[105%] w-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']"
+        >
+          <CheckIcon v-if="state === 'completed'" class="size-5" />
+          <CircleIcon v-if="state === 'active'" />
+          <DotIcon v-if="state === 'inactive'" />
+        </Button>
+      </StepperTrigger>
+
+      <div class="flex flex-col gap-1">
+        <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>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue b/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
index fcd120e6..2b578c41 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
@@ -19,12 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <StepperRoot
+    v-slot="slotProps"
     :class="cn(
-      'flex gap-1 p-0.5',
+      'flex gap-2',
       props.class,
     )"
     v-bind="forwarded"
   >
-    <slot />
+    <slot v-bind="slotProps" />
   </StepperRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
index af9133eb..999ba1f5 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
-    <slot />
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
   </StepperDescription>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
index b60ed6ed..55733fa1 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
+++ b/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
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
index b5a49c07..2c0fbee0 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
@@ -18,9 +18,10 @@ const forwarded = useForwardProps(delegatedProps)
 
 <template>
   <StepperItem
+    v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
   >
-    <slot />
+    <slot v-bind="slotProps" />
   </StepperItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
index 8391ceae..879f7c70 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
@@ -20,11 +20,11 @@ const forwarded = useForwardProps(delegatedProps)
   <StepperSeparator
     v-bind="forwarded"
     :class="cn(
-      'w-full h-[1px] bg-border',
+      'bg-muted',
       // Disabled
-      'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
       // Completed
-      'group-data-[state=completed]:bg-accent',
+      'group-data-[state=completed]:bg-accent-foreground',
       props.class,
     )"
   />
diff --git a/apps/www/src/public/registry/styles/default/stepper.json b/apps/www/src/public/registry/styles/default/stepper.json
index 890847a9..d69bb432 100644
--- a/apps/www/src/public/registry/styles/default/stepper.json
+++ b/apps/www/src/public/registry/styles/default/stepper.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    :class=\"cn(\n      'flex gap-2 p-1',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </StepperRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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  <StepperDescription v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot />\n  </StepperDescription>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
     },
     {
       "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-10 h-10',\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-10 h-10',\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",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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  <StepperItem\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot />\n  </StepperItem>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'w-full h-[1px] bg-border',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
     },
     {
       "name": "StepperTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/stepper.json b/apps/www/src/public/registry/styles/new-york/stepper.json
index 36468484..4924703d 100644
--- a/apps/www/src/public/registry/styles/new-york/stepper.json
+++ b/apps/www/src/public/registry/styles/new-york/stepper.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    :class=\"cn(\n      'flex gap-1 p-0.5',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </StepperRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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  <StepperDescription v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot />\n  </StepperDescription>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
     },
     {
       "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",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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  <StepperItem\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot />\n  </StepperItem>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'w-full h-[1px] bg-border',\n      // Disabled\n      'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent',\n      props.class,\n    )\"\n  />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
     },
     {
       "name": "StepperTitle.vue",