feat(Stepper): new component

docs/components/content/examples/StepperExampleBasic.vue

@@ -0,0 +1,14 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2',
+  disabled: true
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" />
+</template>

docs/components/content/examples/StepperExampleChange.vue

@@ -0,0 +1,19 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UStepper :items="items" @change="onChange" />
+</template>

docs/components/content/examples/StepperExampleCustomIcons.vue

@@ -0,0 +1,18 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper
+    :items="items"
+    completed-icon="i-heroicons-check-circle"
+    active-icon="i-heroicons-stop-circle-solid"
+    pending-icon="i-heroicons-information-circle"
+  />
+</template>

docs/components/content/examples/StepperExampleHideDivider.vue

@@ -0,0 +1,13 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" :display-divider="false" />
+</template>

docs/components/content/examples/StepperExampleIndex.vue

@@ -0,0 +1,13 @@
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2'
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" :default-index="2" />
+</template>

docs/content/5.navigation/5.stepper.md

@@ -0,0 +1,138 @@
+---
+description: Layout indicator for the steps in a workflow.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Stepper.vue
+navigation:
+  badge: New
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Stepper component. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `disabled` - Determines whether the item is disabled or not.
+
+::component-example
+#default
+:stepper-example-basic{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [{
+  label: 'Step1'
+}, {
+  label: 'Step2',
+  disabled: true
+}, {
+  label: 'Step3'
+}]
+</script>
+
+<template>
+  <UStepper :items="items" />
+</template>
+```
+::
+
+### Default index
+
+You can set the default index of the stepper by setting the `default-index` prop.
+
+::component-example
+#default
+:stepper-example-index{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper :items="items" :default-index="2" />
+</template>
+```
+::
+
+### Custom icons
+
+You can set the custom icons of the stepper by setting the `completed-icon`, `active-icon` and `pending-icon` props.
+
+::component-example
+#default
+:stepper-example-custom-icons{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper
+    :items="items"
+    completed-icon="i-heroicons-check-circle"
+    active-icon="i-heroicons-stop-circle-solid"
+    pending-icon="i-heroicons-information-circle"
+  />
+</template>
+```
+::
+
+### Hide divider
+
+You can hide the divider of the stepper by setting the `display-divider` prop to `false`.
+
+::component-example
+#default
+:stepper-example-hide-divider{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+</script>
+
+<template>
+  <UStepper :items="items" :display-divider="false" />
+</template>
+```
+::
+
+### Listen to changes
+
+You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
+
+::component-example
+#default
+:stepper-example-change{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UStepper :items="items" @change="onChange" />
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/plugins/ui.ts

@@ -3,8 +3,9 @@ import colors from '#tailwind-config/theme/colors'
 
 export default defineNuxtPlugin({
   enforce: 'post',
-  setup () {
+  setup (nuxtApp) {
     const appConfig = useAppConfig()
+    const head = nuxtApp.vueApp._context.provides.usehead
 
     const root = computed(() => {
       const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
@@ -32,7 +33,7 @@ export default defineNuxtPlugin({
       appConfig.ui.gray = window.localStorage.getItem('nuxt-ui-gray') || appConfig.ui.gray
     }
     if (process.server) {
-      useHead({
+      head.push({
         script: [
           {
             innerHTML: `

src/runtime/app.config.ts

@@ -872,6 +872,27 @@ const tabs = {
   }
 }
 
+const stepper = {
+  base: 'flex items-center justify-center w-full text-center',
+  list: {
+    base: 'flex md:w-full items-center justify-center',
+    step: {
+      base: 'flex gap-2 items-center',
+      active: 'text-gray-900 dark:text-white',
+      inactive: 'text-gray-500 dark:text-gray-400',
+      padding: 'px-3',
+      size: 'text-sm',
+      font: 'font-medium',
+      divider: 'w-full h-px bg-gray-200 dark:bg-gray-800',
+      leading: {
+        wrapper: 'font-xl w-5 flex justify-center items-center',
+        icon: 'w-5 h-5',
+        size: 'xs'
+      }
+    }
+  }
+}
+
 // Overlays
 
 const modal = {
@@ -1094,6 +1115,7 @@ export default {
     commandPalette,
     pagination,
     tabs,
+    stepper,
     modal,
     slideover,
     popover,

src/runtime/components/forms/Radio.vue

@@ -2,7 +2,6 @@
   <div :class="wrapperClass">
     <div class="flex items-center h-5">
       <input
-        :id="`${name}-${value}`"
         v-model="pick"
         :name="name"
         :required="required"