Merge branch 'dev' into refactor/cli-templates

apps/www/.vitepress/theme/components/theming/utils/data.ts

@@ -32,11 +32,11 @@ export const allColors: Color[] = [
   'violet',
 ]
 
-interface Payment {
-  status: string
-  email: string
-  amount: number
-}
+// interface Payment {
+//   status: string
+//   email: string
+//   amount: number
+// }
 
 interface TeamMember {
   name: string

apps/www/package.json

@@ -24,7 +24,7 @@
     "@unovis/ts": "^1.4.1",
     "@unovis/vue": "^1.4.1",
     "@vee-validate/zod": "^4.13.1",
-    "@vueuse/core": "^10.10.0",
+    "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
@@ -33,12 +33,12 @@
     "embla-carousel-vue": "^8.1.5",
     "lucide-vue-next": "^0.383.0",
     "magic-string": "^0.30.10",
-    "radix-vue": "^1.8.3",
+    "radix-vue": "^1.8.4",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vaul-vue": "^0.1.2",
-    "vee-validate": "4.12.6",
-    "vue": "^3.4.27",
+    "vaul-vue": "^0.2.0",
+    "vee-validate": "4.13.1",
+    "vue": "^3.4.29",
     "vue-sonner": "^1.1.2",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.23.8"
@@ -53,25 +53,25 @@
     "@iconify-json/simple-icons": "^1.1.104",
     "@iconify-json/tabler": "^1.1.113",
     "@iconify/vue": "^4.1.2",
-    "@oxc-parser/wasm": "^0.13.5",
-    "@shikijs/transformers": "^1.6.3",
+    "@oxc-parser/wasm": "^0.14.0",
+    "@shikijs/transformers": "^1.7.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-core": "^3.4.27",
-    "@vue/compiler-dom": "^3.4.27",
+    "@vue/compiler-core": "^3.4.29",
+    "@vue/compiler-dom": "^3.4.29",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
     "fast-glob": "^3.3.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.7",
-    "shiki": "^1.6.3",
+    "shiki": "^1.7.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
-    "tsx": "^4.15.0",
+    "tsx": "^4.15.6",
     "typescript": "^5.4.5",
     "unplugin-icons": "^0.19.0",
     "vitepress": "^1.2.3",

apps/www/src/content/docs/components/separator.md

@@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
 </script>
 
 <template>
-  <Separator />
+  <Separator label="Or" />
 </template>
 ```

apps/www/src/content/docs/installation/vite.md

@@ -45,12 +45,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
   #### `vite.config`
 
   ```typescript {5,6,9-13}
-  import path from "path"
-  import { defineConfig } from "vite"
-  import vue from "@vitejs/plugin-vue"
+  import path from 'node:path'
+  import { defineConfig } from 'vite'
+  import vue from '@vitejs/plugin-vue'
 
-  import tailwind from "tailwindcss"
-  import autoprefixer from "autoprefixer"
+  import tailwind from 'tailwindcss'
+  import autoprefixer from 'autoprefixer'
 
   export default defineConfig({
     css: {
@@ -61,7 +61,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
     plugins: [vue()],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "./src"),
+        '@': path.resolve(__dirname, './src'),
       },
     },
   })
@@ -116,12 +116,12 @@ npm i -D @types/node
 ```
 
 ```typescript {15-19}
-import path from "path"
-import vue from "@vitejs/plugin-vue"
-import { defineConfig } from "vite"
+import path from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
-import tailwind from "tailwindcss"
-import autoprefixer from "autoprefixer"
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
 
 export default defineConfig({
   css: {
@@ -132,7 +132,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      '@': path.resolve(__dirname, './src'),
     },
   },
 })
@@ -160,7 +160,7 @@ Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
-Where is your global CSS file? › › src/index.css
+Where is your global CSS file? › › src/assets/index.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components

apps/www/src/examples/forms/components/NotificationsForm.vue

@@ -33,7 +33,7 @@ const { handleSubmit } = useForm({
   },
 })
 
-const onSubmit = handleSubmit((values, { resetForm }) => {
+const onSubmit = handleSubmit((values) => {
   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))),

apps/www/src/lib/registry/default/example/ComboboxPopover.vue

@@ -60,7 +60,7 @@ const statuses: Status[] = [
 ]
 
 const open = ref(false)
-const value = ref<typeof statuses[number]>()
+// const value = ref<typeof statuses[number]>()
 
 const selectedStatus = ref<Status>()
 </script>

apps/www/src/lib/registry/default/example/SeparatorDemo.vue

@@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/default/ui/separator'
         An open-source UI component library.
       </p>
     </div>
-    <Separator class="my-4" />
+    <Separator class="my-4" label="Or" />
     <div class="flex h-5 items-center space-x-4 text-sm">
       <div>Blog</div>
       <Separator orientation="vertical" />

apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue

@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput data-slot="input" :class="cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')" />
 </template>

apps/www/src/lib/registry/default/ui/separator/Separator.vue

@@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,6 +17,19 @@ const delegatedProps = computed(() => {
 <template>
   <Separator
     v-bind="delegatedProps"
-    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
-  />
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
 </template>

apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue

@@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
         An open-source UI component library.
       </p>
     </div>
-    <Separator class="my-4" />
+    <Separator class="my-4" label="Or" />
     <div class="flex h-5 items-center space-x-4 text-sm">
       <div>Blog</div>
       <Separator orientation="vertical" />

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue

@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput data-slot="input" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
 </template>

apps/www/src/lib/registry/new-york/ui/separator/Separator.vue

@@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,6 +17,22 @@ const delegatedProps = computed(() => {
 <template>
   <Separator
     v-bind="delegatedProps"
-    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
-  />
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
 </template>

apps/www/src/public/registry/styles/default/number-field.json

@@ -11,19 +11,19 @@
     },
     {
       "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { 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  <NumberFieldDecrement v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { 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  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { 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  <NumberFieldIncrement v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { 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  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput data-slot=\"input\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')\" />\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/default/separator.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
     },
     {
       "name": "index.ts",