Merge branch 'dev' into fix/add-chart-ref-to-area-chart

.vscode/settings.json

@@ -10,6 +10,7 @@
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
+  "eslint.useFlatConfig": true,
   "eslint.rules.customizations": [
     { "rule": "style/*", "severity": "off" },
     { "rule": "format/*", "severity": "off" },

apps/www/__registry__/index.ts

@@ -752,13 +752,6 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
@@ -2202,13 +2195,6 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",

apps/www/package.json

@@ -19,63 +19,63 @@
     "@formkit/auto-animate": "^0.8.2",
     "@internationalized/date": "^3.5.4",
     "@radix-icons/vue": "^1.0.0",
-    "@stackblitz/sdk": "^1.10.0",
+    "@stackblitz/sdk": "^1.11.0",
-    "@tanstack/vue-table": "^8.17.3",
+    "@tanstack/vue-table": "^8.19.2",
-    "@unovis/ts": "^1.4.1",
+    "@unovis/ts": "^1.4.2",
-    "@unovis/vue": "^1.4.1",
+    "@unovis/vue": "^1.4.2",
-    "@vee-validate/zod": "^4.13.1",
+    "@vee-validate/zod": "^4.13.2",
     "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.1.5",
+    "embla-carousel-autoplay": "^8.1.6",
-    "embla-carousel-vue": "^8.1.5",
+    "embla-carousel-vue": "^8.1.6",
-    "lucide-vue-next": "^0.383.0",
+    "lucide-vue-next": "^0.400.0",
     "magic-string": "^0.30.10",
-    "radix-vue": "^1.8.4",
+    "radix-vue": "^1.9.0",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
-    "vee-validate": "4.13.1",
+    "vee-validate": "4.13.2",
-    "vue": "^3.4.29",
+    "vue": "^3.4.31",
-    "vue-sonner": "^1.1.2",
+    "vue-sonner": "^1.1.3",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/traverse": "^7.24.7",
     "@iconify-json/gravity-ui": "^1.1.3",
-    "@iconify-json/lucide": "^1.1.190",
+    "@iconify-json/lucide": "^1.1.198",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/radix-icons": "^1.1.14",
-    "@iconify-json/ri": "^1.1.20",
+    "@iconify-json/ri": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.104",
+    "@iconify-json/simple-icons": "^1.1.108",
-    "@iconify-json/tabler": "^1.1.113",
+    "@iconify-json/tabler": "^1.1.116",
     "@iconify/vue": "^4.1.2",
-    "@oxc-parser/wasm": "^0.14.0",
+    "@oxc-parser/wasm": "^0.17.1",
-    "@shikijs/transformers": "^1.7.0",
+    "@shikijs/transformers": "^1.10.3",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.4",
+    "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-core": "^3.4.29",
+    "@vue/compiler-core": "^3.4.31",
-    "@vue/compiler-dom": "^3.4.29",
+    "@vue/compiler-dom": "^3.4.31",
     "@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",
+    "rimraf": "^5.0.8",
-    "shiki": "^1.7.0",
+    "shiki": "^1.10.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
-    "tsx": "^4.15.6",
+    "tsx": "^4.16.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "unplugin-icons": "^0.19.0",
     "vitepress": "^1.2.3",
-    "vue-component-meta": "^2.0.21",
+    "vue-component-meta": "^2.0.26",
-    "vue-tsc": "^2.0.21"
+    "vue-tsc": "^2.0.26"
   }
 }

apps/www/src/content/docs/changelog.md

@@ -134,6 +134,6 @@ The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/)
 
 ### New Component - Carousel
 
-[`Carousel`](/docs/components/toggle-group.html) - A carousel with motion and swipe built using [Embla](https://www.embla-carousel.com/) library.
+[`Carousel`](/docs/components/carousel.html) - A carousel with motion and swipe built using [Embla](https://www.embla-carousel.com/) library.
 
 <ComponentPreview name="CarouselDemo" />

apps/www/src/content/docs/contribution.md

@@ -2,6 +2,15 @@
 title: Contribution
 description: Learn on how to contribute to shadcn/vue.
 ---
+<script setup lang="ts">
+import { Button } from "@/lib/registry/new-york/ui/button"
+
+const latestSyncCommitTag = "06cc0cdf3d080555d26abbe6639f2d7f6341ec73"
+
+const latestSyncCommitUrl = `https://github.com/shadcn-ui/ui/commit/${latestSyncCommitTag}`
+const diffUrl = `https://github.com/shadcn-ui/ui/compare/${latestSyncCommitTag}...main`
+</script>
+
 ## Introduction
 
 Thanks for your interest in contributing to shadcn-vue.com. We're happy to have you here.
@@ -326,6 +335,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.radix-vue.com/utilities/primitive.html#changing-as-value) property.
 
+## Updating with `shadcn/ui`
+
+`shadcn/vue` is an unofficial, community-led Vue port of `shadcn/ui`, as time goes by, they might get out of sync.
+
+As of today, we are in sync with this <a :href="latestSyncCommitUrl" target="_blank">commit</a> of `shadcn/ui`.
+
+Click on the following link to check if there are newer commits that we should be synced with.
+
+<div class="text-center">
+  <a :href="diffUrl" target="_blank">
+    <Button>
+      Check Diff
+    </Button>
+  </a>
+</div>
+
+1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version.
+2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
+
 ## Debugging
 Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects.
 

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,15 +72,46 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
+
-              Re-usable components built using Radix UI and Tailwind CSS.
+            <li>
-            </ListItem>
+              <NavigationMenuLink as-child>
-            <ListItem href="/docs/installation" title="Installation">
+                <a
-              How to install dependencies and structure your app.
+                  href="/docs"
-            </ListItem>
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-            <ListItem href="/docs/primitives/typography" title="Typography">
+                >
-              Styles for headings, paragraphs, lists...etc
+                  <div class="text-sm font-medium leading-none">Introduction</div>
-            </ListItem>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    How to install dependencies and structure your app.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Styles for headings, paragraphs, lists...etc
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
@@ -89,14 +119,19 @@ const components: { title: string, href: string, description: string }[] = [
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
+            <li v-for="component in components" :key="component.title">
-              v-for="component in components"
+              <NavigationMenuLink as-child>
-              :key="component.title"
+                <a
-              :title="component.title"
+                  :href="component.href"
-              :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-            >
+                >
-              {{ component.description }}
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
-            </ListItem>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    {{ component.description }}
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

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

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuLink,
-} from '@/lib/registry/default/ui/navigation-menu'
-
-defineProps<{ title?: string, href?: string }>()
-</script>
-
-<template>
-  <li>
-    <NavigationMenuLink as-child>
-      <a
-        :href="href"
-        :class="cn(
-          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-          $attrs.class ?? '',
-        )"
-      >
-        <div class="text-sm font-medium leading-none">{{ title }}</div>
-        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-          <slot />
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-</template>

apps/www/src/lib/registry/default/ui/form/useFormField.ts

@@ -6,19 +6,19 @@ export function useFormField() {
   const fieldContext = inject(FieldContextKey)
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
-  const fieldState = {
-    valid: useIsFieldValid(),
-    isDirty: useIsFieldDirty(),
-    isTouched: useIsFieldTouched(),
-    error: useFieldError(),
-  }
-
   if (!fieldContext)
     throw new Error('useFormField should be used within <FormField>')
 
   const { name } = fieldContext
   const id = fieldItemContext
 
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
   return {
     id,
     name,

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,15 +72,45 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
+            <li>
-              Re-usable components built using Radix UI and Tailwind CSS.
+              <NavigationMenuLink as-child>
-            </ListItem>
+                <a
-            <ListItem href="/docs/installation" title="Installation">
+                  href="/docs"
-              How to install dependencies and structure your app.
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-            </ListItem>
+                >
-            <ListItem href="/docs/primitives/typography" title="Typography">
+                  <div class="text-sm font-medium leading-none">Introduction</div>
-              Styles for headings, paragraphs, lists...etc
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            </ListItem>
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    How to install dependencies and structure your app.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Styles for headings, paragraphs, lists...etc
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
@@ -89,14 +118,19 @@ const components: { title: string, href: string, description: string }[] = [
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
+            <li v-for="component in components" :key="component.title">
-              v-for="component in components"
+              <NavigationMenuLink as-child>
-              :key="component.title"
+                <a
-              :title="component.title"
+                  :href="component.href"
-              :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-            >
+                >
-              {{ component.description }}
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
-            </ListItem>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    {{ component.description }}
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

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

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuLink,
-} from '@/lib/registry/new-york/ui/navigation-menu'
-
-defineProps<{ title?: string, href?: string }>()
-</script>
-
-<template>
-  <li>
-    <NavigationMenuLink as-child>
-      <a
-        :href="href"
-        :class="cn(
-          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-          $attrs.class ?? '',
-        )"
-      >
-        <div class="text-sm font-medium leading-none">{{ title }}</div>
-        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-          <slot />
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-</template>

apps/www/src/lib/registry/new-york/ui/form/useFormField.ts

@@ -5,12 +5,6 @@ import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
-  const fieldState = {
-    valid: useIsFieldValid(),
-    isDirty: useIsFieldDirty(),
-    isTouched: useIsFieldTouched(),
-    error: useFieldError(),
-  }
 
   if (!fieldContext)
     throw new Error('useFormField should be used within <FormField>')
@@ -18,6 +12,13 @@ export function useFormField() {
   const { name } = fieldContext
   const id = fieldItemContext
 
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
   return {
     id,
     name,

package.json

@@ -28,15 +28,15 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.21.1",
+    "@antfu/eslint-config": "^2.21.3",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@vitest/ui": "^1.6.0",
     "bumpp": "^9.4.1",
-    "eslint": "^9.5.0",
+    "eslint": "^9.6.0",
     "lint-staged": "^15.2.7",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.13.8",
+    "taze": "^0.14.2",
     "typescript": "^5.4.5",
     "vitest": "^1.6.0"
   },

packages/cli/package.json

@@ -59,16 +59,16 @@
     "detype": "npm:detypes@^0.8.0",
     "diff": "^5.2.0",
     "fs-extra": "^11.2.0",
-    "https-proxy-agent": "^7.0.4",
+    "https-proxy-agent": "^7.0.5",
     "lodash-es": "^4.17.21",
     "magic-string": "^0.30.10",
-    "nypm": "^0.3.8",
+    "nypm": "^0.3.9",
     "ofetch": "^1.3.4",
     "ora": "^8.0.1",
     "pathe": "^1.1.2",
-    "pkg-types": "^1.1.1",
+    "pkg-types": "^1.1.3",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.8.4",
+    "radix-vue": "^1.9.0",
     "semver": "^7.6.2",
     "ts-morph": "^22.0.0",
     "tsconfig-paths": "^4.2.0",
@@ -79,11 +79,11 @@
     "@types/diff": "^5.2.1",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.4",
+    "@types/node": "^20.14.10",
     "@types/prompts": "^2.4.9",
     "tsup": "^8.1.0",
-    "type-fest": "^4.20.1",
+    "type-fest": "^4.21.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

packages/module/package.json

@@ -35,18 +35,18 @@
     "release": "pnpm run prepack && pnpm publish && git push --follow-tags"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.2",
+    "@nuxt/kit": "^3.12.3",
-    "@oxc-parser/wasm": "^0.14.0",
+    "@oxc-parser/wasm": "^0.17.1",
     "class-variance-authority": "^0.7.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/module-builder": "^0.7.1",
+    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.2",
+    "@nuxt/schema": "^3.12.3",
     "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.4",
+    "@types/node": "^20.14.10",
-    "nuxt": "^3.12.2"
+    "nuxt": "^3.12.3"
   }
 }