From 6757908fe1580d05ddd2f9741c9f95042c2370e4 Mon Sep 17 00:00:00 2001
From: Eduard Predescu <eduard.florin.predescu@gmail.com>
Date: Mon, 22 Jul 2024 08:13:10 +0300
Subject: [PATCH] feat(Stepper): implement stepper (#669)

---
 .editorconfig                                 | 12 ++++
 apps/www/.vitepress/theme/config/docs.ts      |  5 ++
 apps/www/__registry__/index.ts                | 14 +++++
 .../src/content/docs/components/stepper.md    | 50 +++++++++++++++++
 .../registry/default/example/StepperDemo.vue  | 55 +++++++++++++++++++
 .../registry/default/ui/stepper/Stepper.vue   | 30 ++++++++++
 .../default/ui/stepper/StepperDescription.vue | 23 ++++++++
 .../default/ui/stepper/StepperIndicator.vue   | 35 ++++++++++++
 .../default/ui/stepper/StepperItem.vue        | 26 +++++++++
 .../default/ui/stepper/StepperSeparator.vue   | 31 +++++++++++
 .../default/ui/stepper/StepperTitle.vue       | 23 ++++++++
 .../default/ui/stepper/StepperTrigger.vue     | 26 +++++++++
 .../lib/registry/default/ui/stepper/index.ts  |  7 +++
 .../registry/new-york/example/StepperDemo.vue | 55 +++++++++++++++++++
 .../registry/new-york/ui/stepper/Stepper.vue  | 30 ++++++++++
 .../ui/stepper/StepperDescription.vue         | 23 ++++++++
 .../new-york/ui/stepper/StepperIndicator.vue  | 35 ++++++++++++
 .../new-york/ui/stepper/StepperItem.vue       | 26 +++++++++
 .../new-york/ui/stepper/StepperSeparator.vue  | 31 +++++++++++
 .../new-york/ui/stepper/StepperTitle.vue      | 23 ++++++++
 .../new-york/ui/stepper/StepperTrigger.vue    | 26 +++++++++
 .../lib/registry/new-york/ui/stepper/index.ts |  7 +++
 apps/www/src/public/registry/index.json       | 18 ++++++
 .../registry/styles/default/stepper.json      | 42 ++++++++++++++
 .../registry/styles/new-york/stepper.json     | 42 ++++++++++++++
 25 files changed, 695 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 apps/www/src/content/docs/components/stepper.md
 create mode 100644 apps/www/src/lib/registry/default/example/StepperDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/stepper/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/StepperDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/stepper/index.ts
 create mode 100644 apps/www/src/public/registry/styles/default/stepper.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/stepper.json

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..64d3d6a0
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
\ No newline at end of file
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 698dcc4b..b18a57d6 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -321,6 +321,11 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/sonner',
           items: [],
         },
+        {
+          title: 'Stepper',
+          href: '/docs/components/stepper',
+          label: 'New',
+        },
         {
           title: 'Switch',
           href: '/docs/components/switch',
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 3475d2ce..41a34aa4 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -990,6 +990,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
     },
+    "StepperDemo": {
+      name: "StepperDemo",
+      type: "components:example",
+      registryDependencies: ["stepper"],
+      component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/StepperDemo.vue"],
+    },
     "SwitchDemo": {
       name: "SwitchDemo",
       type: "components:example",
@@ -2433,6 +2440,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
     },
+    "StepperDemo": {
+      name: "StepperDemo",
+      type: "components:example",
+      registryDependencies: ["stepper"],
+      component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/StepperDemo.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
new file mode 100644
index 00000000..e0c75a8b
--- /dev/null
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -0,0 +1,50 @@
+---
+title: Stepper
+description: A set of steps that are used to indicate progress through a multi-step process.
+source: apps/www/src/lib/registry/default/ui/stepper
+primitive: https://www.radix-vue.com/components/stepper.html
+---
+
+<ComponentPreview name="StepperDemo" />
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add stepper
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Stepper,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '@/components/ui/stepper'
+</script>
+
+<template>
+  <Stepper>
+    <StepperItem :step="1" linear>
+      <StepperTrigger>
+        <StepperIndicator>1</StepperIndicator>
+        <StepperTitle>Step 1</StepperTitle>
+        <StepperDescription>This is the first step</StepperDescription>
+      </StepperTrigger>
+      <StepperSeparator />
+    </StepperItem>
+    <StepperItem :step="2">
+      <StepperTrigger>
+        <StepperIndicator>2</StepperIndicator>
+        <StepperTitle>Step 2</StepperTitle>
+        <StepperDescription>This is the second step</StepperDescription>
+      </StepperTrigger>
+    </StepperItem>
+  </Stepper>
+</template>
+```
diff --git a/apps/www/src/lib/registry/default/example/StepperDemo.vue b/apps/www/src/lib/registry/default/example/StepperDemo.vue
new file mode 100644
index 00000000..fcfb2116
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/StepperDemo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+
+const steps = [{
+  step: 1,
+  title: 'Address',
+  description: 'Add your address here',
+  icon: BookUser,
+}, {
+  step: 2,
+  title: 'Shipping',
+  description: 'Set your preferred shipping method',
+  icon: Truck,
+}, {
+  step: 3,
+  title: 'Payment',
+  description: 'Add any payment information you have',
+  icon: CreditCard,
+}, {
+  step: 4,
+  title: 'Checkout',
+  description: 'Confirm your order',
+  icon: Check,
+}]
+</script>
+
+<template>
+  <Stepper>
+    <StepperItem
+      v-for="item in steps"
+      :key="item.step"
+      class="basis-1/4"
+      :step="item.step"
+    >
+      <StepperTrigger>
+        <StepperIndicator>
+          <component :is="item.icon" class="w-4 h-4" />
+        </StepperIndicator>
+        <div class="flex flex-col">
+          <StepperTitle>
+            {{ item.title }}
+          </StepperTitle>
+          <StepperDescription>
+            {{ item.description }}
+          </StepperDescription>
+        </div>
+      </StepperTrigger>
+      <StepperSeparator
+        v-if="item.step !== steps[steps.length - 1].step"
+      />
+    </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
new file mode 100644
index 00000000..6287623a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    :class="cn(
+      'flex gap-2 p-1',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot />
+  </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
new file mode 100644
index 00000000..af9133eb
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperDescriptionProps } from 'radix-vue'
+import { StepperDescription, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot />
+  </StepperDescription>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
new file mode 100644
index 00000000..d7ca7e5f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperIndicatorProps } from 'radix-vue'
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-white w-10 h-10',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</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
new file mode 100644
index 00000000..aebdb294
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperItemProps } from 'radix-vue'
+import { StepperItem, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot />
+  </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
new file mode 100644
index 00000000..6246b026
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperSeparatorProps } from 'radix-vue'
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'w-full h-[1px] bg-border',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent-foreground',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
new file mode 100644
index 00000000..5ba5f7e1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperTitleProps } from 'radix-vue'
+import { StepperTitle, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
new file mode 100644
index 00000000..46f920b5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperTriggerProps } from 'radix-vue'
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/stepper/index.ts b/apps/www/src/lib/registry/default/ui/stepper/index.ts
new file mode 100644
index 00000000..6bb2d607
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/StepperDemo.vue b/apps/www/src/lib/registry/new-york/example/StepperDemo.vue
new file mode 100644
index 00000000..32012a44
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/StepperDemo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
+
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+
+const steps = [{
+  step: 1,
+  title: 'Address',
+  description: 'Add your address here',
+  icon: BookUser,
+}, {
+  step: 2,
+  title: 'Shipping',
+  description: 'Set your preferred shipping method',
+  icon: Truck,
+}, {
+  step: 3,
+  title: 'Payment',
+  description: 'Add any payment information you have',
+  icon: CreditCard,
+}, {
+  step: 4,
+  title: 'Checkout',
+  description: 'Confirm your order',
+  icon: Check,
+}]
+</script>
+
+<template>
+  <Stepper>
+    <StepperItem
+      v-for="item in steps"
+      :key="item.step"
+      class="basis-1/4"
+      :step="item.step"
+    >
+      <StepperTrigger>
+        <StepperIndicator>
+          <component :is="item.icon" class="w-4 h-4" />
+        </StepperIndicator>
+        <div class="flex flex-col">
+          <StepperTitle>
+            {{ item.title }}
+          </StepperTitle>
+          <StepperDescription>
+            {{ item.description }}
+          </StepperDescription>
+        </div>
+      </StepperTrigger>
+      <StepperSeparator
+        v-if="item.step !== steps[steps.length - 1].step"
+      />
+    </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
new file mode 100644
index 00000000..fcd120e6
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    :class="cn(
+      'flex gap-1 p-0.5',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot />
+  </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
new file mode 100644
index 00000000..af9133eb
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperDescriptionProps } from 'radix-vue'
+import { StepperDescription, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot />
+  </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
new file mode 100644
index 00000000..b60ed6ed
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperIndicatorProps } from 'radix-vue'
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-white w-8 h-8',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</template>
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
new file mode 100644
index 00000000..b5a49c07
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperItemProps } from 'radix-vue'
+import { StepperItem, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot />
+  </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
new file mode 100644
index 00000000..8391ceae
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperSeparatorProps } from 'radix-vue'
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'w-full h-[1px] bg-border',
+      // Disabled
+      'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
new file mode 100644
index 00000000..5ba5f7e1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperTitleProps } from 'radix-vue'
+import { StepperTitle, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
new file mode 100644
index 00000000..04b6a5b8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import type { StepperTriggerProps } from 'radix-vue'
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/index.ts b/apps/www/src/lib/registry/new-york/ui/stepper/index.ts
new file mode 100644
index 00000000..6bb2d607
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 91874765..dea4cc2c 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -779,6 +779,24 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "stepper",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/stepper/Stepper.vue",
+      "ui/stepper/StepperDescription.vue",
+      "ui/stepper/StepperIndicator.vue",
+      "ui/stepper/StepperItem.vue",
+      "ui/stepper/StepperSeparator.vue",
+      "ui/stepper/StepperTitle.vue",
+      "ui/stepper/StepperTrigger.vue",
+      "ui/stepper/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "switch",
     "dependencies": [],
diff --git a/apps/www/src/public/registry/styles/default/stepper.json b/apps/www/src/public/registry/styles/default/stepper.json
new file mode 100644
index 00000000..890847a9
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/stepper.json
@@ -0,0 +1,42 @@
+{
+  "name": "stepper",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "StepperTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTitleProps & { 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  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
+    },
+    {
+      "name": "StepperTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTriggerProps & { 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  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/stepper.json b/apps/www/src/public/registry/styles/new-york/stepper.json
new file mode 100644
index 00000000..36468484
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/stepper.json
@@ -0,0 +1,42 @@
+{
+  "name": "stepper",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "StepperTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTitleProps & { 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  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
+    },
+    {
+      "name": "StepperTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTriggerProps & { 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  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}