chore: wip

* feat:stepper component

* chore: wip

* chore: wip

* chore: remove scss

* fix: remove unused package

* chore: wip

* chore: wip

* chore: wip

* chore: wip

* chore: wip

* fix: bun conflict

* fix: remove bun fille due to conflict

* chore: wip

* chore: wip

* chore: wip

* chore: readme enhancement

* chore: wip

* chore: release v0.61.21

* chore: wip

* chore: wip

* chore: release v0.61.22

* chore: release v0.61.23

* chore: wip

* chore: wip

* chore: release v0.61.24

* chore: wip

* chore: wip

---------

Co-authored-by: chrisbbreuer <chrisbreuer93@gmail.com>
Co-authored-by: glennmichael123 <gtorregosa@gmail.com>

Author: 3 people

storage/framework/core/components/stepper/README.md

@@ -1,24 +1,52 @@
-# Stacks
+# Stacks Stepper
 
-The official bun-create template for the Stacks framework.
+The *Stepper* component is a versatile & customizable component for creating multi-step processes in your application. It allows users to navigate through a sequence of steps, providing a visual indicator of their progress. This is oftentimes used to build to welcome the user into your application.
 
 ## ☘️ Features
 
-- wip
+- Customizable steps
+- Linear and non-linear stepper modes
+- Step validation
+- Configurable labels and icons
+- Callback events for step changes
+- Lightweight
 
 ## 🤖 Usage
 
 ```bash
-bun create stacks my-project
+bun install -d @stacksjs/stepper
 ```
 
-Now, you can get started using Stacks:
+```ts
+
+// App.vue
+import { Stepper } from '@stacksjs/stepper'
+
+const steps = ref(5)
+const step  = ref(1)
+
+const stepper = ref(null)
+
+<Stepper ref='stepper' :steps="steps" v-model='step' />
+
+
+<template v-if="step === 1">
+  <div> </div>
+</template>
+
+<template v-if="step === 2">
+  <div> </div>
+</template>
 
-```js
-// wip
 ```
 
-Learn more in the docs.
+To view the full documentation, please visit [stacksjs.org/docs/components/stepper](stacksjs.org/docs/components/stepper).
+
+## 🧪 Testing
+
+```bash
+bun test
+```
 
 ## 📈 Changelog
 
@@ -36,7 +64,16 @@ For help, discussion about best practices, or any other conversation that would
 
 For casual chit-chat with others using this package:
 
-[Join the Stacks Discord](https://discord.gg/stacksjs)
+[Join the Stacks Discord Server](https://discord.gg/stacksjs)
+
+## 🙏🏼 Credits
+
+Many thanks to the following core technologies & people who have contributed to this package:
+
+- [Collect.js](https://github.com/ecrmnn/collect.js)
+- [Laravel](https://laravel.com/)
+- [Chris Breuer](https://github.com/chrisbbreuer)
+- [All Contributors](../../contributors)
 
 ## 📄 License
 

storage/framework/core/components/stepper/package.json

@@ -59,6 +59,7 @@
     "@stacksjs/alias": "workspace:*",
     "@stacksjs/development": "workspace:*",
     "@types/clean-css": "^4.2.11",
+    "unocss": "^0.60.4",
     "@vue/tsconfig": "^0.5.1",
     "clean-css": "^5.3.3",
     "unplugin-icons": "^0.19.0"

storage/framework/core/components/stepper/src/components/Stepper.vue

@@ -235,3 +235,5 @@ defineExpose({
     </step>
   </div>
 </template>
+
+<style scoped></style>

storage/framework/core/components/stepper/src/components/index.ts

@@ -1 +1,4 @@
+import 'uno.css';
+import '@unocss/reset/tailwind.css';
+
 export { default as Stepper } from './Stepper.vue'

storage/framework/core/components/stepper/src/index.ts

@@ -1,12 +1,3 @@
-import type { App, Plugin } from 'vue'
 import { Stepper } from './components'
 
-const plugin: Plugin = {
-  install(app: App) {
-    app.component('Stepper', Stepper)
-  },
-}
-
 export { Stepper }
-
-export default plugin

storage/framework/core/components/stepper/src/main.ts

@@ -2,8 +2,6 @@ import { createHead } from '@vueuse/head'
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import '@unocss/reset/tailwind.css'
-import 'uno.css'
 import highlight from './plugins/highlight'
 
 const app = createApp(App)

storage/framework/core/components/stepper/vite.config.ts

@@ -8,6 +8,8 @@ import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import type { UserConfig } from 'vite'
 import { defineConfig } from 'vite'
+import presetWind from '@unocss/preset-wind'
+import { presetUno, presetAttributify, presetIcons } from 'unocss'
 
 function minify(code: string) {
   const cleanCssInstance = new CleanCSS({})
@@ -20,7 +22,14 @@ export default defineConfig(({ command, mode }) => {
     Vue({
       include: /\.(stx|vue|md)($|\?)/,
     }),
-    UnoCSS(),
+    UnoCSS({
+      presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons(),
+        presetWind()
+      ]
+    }),
     Components({
       extensions: ['stx', 'vue', 'md'],
       include: /\.(stx|vue|md)($|\?)/,

storage/framework/core/raycast/package.json

@@ -20,7 +20,7 @@
     }
   ],
   "scripts": {
-    "build": "ray build -e dist",
+    "build": "echo 'wip'",
     "dev": "ray develop",
     "fix-lint": "ray lint --fix",
     "lint": "ray lint",