feat(Stepper): implement stepper component

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>

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>

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>

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>

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>

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>

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>

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>

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'

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>

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>

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>

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>

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>

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>

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>

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>

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'