Merge branch 'dev' into fix/tanstack-table

apps/www/__registry__/index.ts

@@ -1060,6 +1060,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/TabsDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TabsDemo.vue"],
     },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      type: "components:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      component: () => import("../src/lib/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/TabsVerticalDemo.vue"],
+    },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
       type: "components:example",
@@ -2552,6 +2559,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TabsDemo.vue"],
     },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      type: "components:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      component: () => import("../src/lib/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/TabsVerticalDemo.vue"],
+    },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
       type: "components:example",

apps/www/package.json

@@ -20,18 +20,18 @@
     "@internationalized/date": "^3.5.5",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@tanstack/vue-table": "^8.20.4",
+    "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
     "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-vue": "^8.2.0",
-    "lucide-vue-next": "^0.428.0",
+    "lucide-vue-next": "^0.436.0",
     "magic-string": "^0.30.11",
     "radix-vue": "catalog:",
     "tailwindcss-animate": "^1.0.7",
@@ -39,12 +39,12 @@
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
     "vue": "^3.4.38",
-    "vue-sonner": "^1.1.4",
+    "vue-sonner": "^1.1.5",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "catalog:"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.25.3",
+    "@babel/traverse": "^7.25.6",
     "@iconify-json/gravity-ui": "^1.1.3",
     "@iconify-json/lucide": "^1.1.198",
     "@iconify-json/ph": "^1.1.13",
@@ -54,10 +54,10 @@
     "@iconify-json/tabler": "^1.1.116",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.14.1",
+    "@shikijs/transformers": "^1.15.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.16.2",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/compiler-core": "^3.4.38",
     "@vue/compiler-dom": "^3.4.38",
@@ -68,14 +68,14 @@
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.14.1",
+    "shiki": "^1.15.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.10",
-    "tsx": "^4.17.0",
+    "tsx": "^4.19.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "unplugin-icons": "^0.19.2",
-    "vitepress": "^1.3.3",
+    "vitepress": "^1.3.4",
-    "vue-component-meta": "^2.0.29",
+    "vue-component-meta": "^2.1.2",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.2"
   }
 }

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

@@ -39,3 +39,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
   </Tabs>
 </template>
 ```
+
+## Examples
+
+### Vertical
+
+<ComponentPreview name="TabsVerticalDemo" />

apps/www/src/content/docs/dark-mode/nuxt.md

@@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
 
 <Steps>
 
-### Install Dependencies
+<!-- ### Install Dependencies
 
 ```bash
 npm install -D @nuxtjs/color-mode
@@ -25,19 +25,21 @@ export default defineNuxtConfig({
     classSuffix: ''
   }
 })
-```
+``` -->
-
-Optional, to include icons for theme button.
-```bash
-npm install -D @iconify/vue @iconify-json/radix-icons
-```
 
 ### Add a mode toggle
 
 Place a mode toggle on your site to toggle between light and dark mode.
 
+The `@nuxtjs/color-mode` module is automatically installed and configured during the installation of the `shadcn-nuxt` module, so you literally have nothing to do.
+
 We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
 
+Optional, to include icons for theme button.
+```bash
+npm install -D @iconify/vue @iconify-json/radix-icons
+```
+
 ```vue
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'

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

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <Carousel class="relative w-full max-w-xs">
+  <Carousel v-slot="{ canScrollNext }" class="relative w-full max-w-xs">
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">
         <div class="p-1">
@@ -17,6 +17,6 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
       </CarouselItem>
     </CarouselContent>
     <CarouselPrevious />
-    <CarouselNext />
+    <CarouselNext v-if="canScrollNext" />
   </Carousel>
 </template>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/default/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]" orientation="vertical">
+    <TabsList class="grid w-full grid-cols-1">
+      <TabsTrigger value="account">
+        Accounts
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here. Click save when you're done.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="name">Name</Label>
+            <Input id="name" default-value="Pedro Duarte" />
+          </div>
+          <div class="space-y-1">
+            <Label for="username">Username</Label>
+            <Input id="username" default-value="@peduarte" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div class="space-y-1">
+            <Label for="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save password</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+  </Tabs>
+</template>

apps/www/src/lib/registry/default/ui/carousel/Carousel.vue

@@ -9,9 +9,17 @@ const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const carouselArgs = useProvideCarousel(props, emits)
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
 
-defineExpose(carouselArgs)
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
 
 function onKeyDown(event: KeyboardEvent) {
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
@@ -19,14 +27,14 @@ function onKeyDown(event: KeyboardEvent) {
 
   if (event.key === prevKey) {
     event.preventDefault()
-    carouselArgs.scrollPrev()
+    scrollPrev()
 
     return
   }
 
   if (event.key === nextKey) {
     event.preventDefault()
-    carouselArgs.scrollNext()
+    scrollNext()
   }
 }
 </script>
@@ -39,6 +47,6 @@ function onKeyDown(event: KeyboardEvent) {
     tabindex="0"
     @keydown="onKeyDown"
   >
-    <slot v-bind="carouselArgs" />
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
   </div>
 </template>

apps/www/src/lib/registry/default/ui/tabs/TabsList.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   <TabsList
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >

apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue

@@ -22,6 +22,8 @@ const forwardedProps = useForwardProps(delegatedProps)
       props.class,
     )"
   >
-    <slot />
+    <span class="truncate">
+      <slot />
+    </span>
   </TabsTrigger>
 </template>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]" orientation="vertical">
+    <TabsList class="grid w-full grid-cols-1">
+      <TabsTrigger value="account">
+        Account
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here. Click save when you're done.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="name">Name</Label>
+            <Input id="name" default-value="Pedro Duarte" />
+          </div>
+          <div class="space-y-1">
+            <Label for="username">Username</Label>
+            <Input id="username" default-value="@peduarte" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div class="space-y-1">
+            <Label for="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save password</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+  </Tabs>
+</template>

apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue

@@ -9,9 +9,17 @@ const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const carouselArgs = useProvideCarousel(props, emits)
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
 
-defineExpose(carouselArgs)
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
 
 function onKeyDown(event: KeyboardEvent) {
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
@@ -19,14 +27,14 @@ function onKeyDown(event: KeyboardEvent) {
 
   if (event.key === prevKey) {
     event.preventDefault()
-    carouselArgs.scrollPrev()
+    scrollPrev()
 
     return
   }
 
   if (event.key === nextKey) {
     event.preventDefault()
-    carouselArgs.scrollNext()
+    scrollNext()
   }
 }
 </script>
@@ -39,6 +47,6 @@ function onKeyDown(event: KeyboardEvent) {
     tabindex="0"
     @keydown="onKeyDown"
   >
-    <slot v-bind="carouselArgs" />
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   <TabsList
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >

apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue

@@ -22,6 +22,8 @@ const forwardedProps = useForwardProps(delegatedProps)
       props.class,
     )"
   >
-    <slot />
+    <span class="truncate">
+      <slot />
+    </span>
   </TabsTrigger>
 </template>

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

@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",

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

@@ -15,11 +15,11 @@
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/new-york/carousel.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",

apps/www/src/public/registry/styles/new-york/tabs.json

@@ -15,11 +15,11 @@
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.10.5",
   "private": true,
-  "packageManager": "pnpm@9.7.1",
+  "packageManager": "pnpm@9.9.0",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -31,16 +31,16 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.26.0",
+    "@antfu/eslint-config": "^3.0.0",
-    "@commitlint/cli": "^19.4.0",
+    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/config-conventional": "^19.4.1",
     "@vitest/ui": "^2.0.5",
-    "bumpp": "^9.5.1",
+    "bumpp": "^9.5.2",
-    "eslint": "^9.9.0",
+    "eslint": "^9.9.1",
     "lint-staged": "^15.2.9",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.16.6",
+    "taze": "^0.16.7",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "vitest": "^2.0.5"
   },
   "commitlint": {

packages/module/src/module.ts

@@ -1,7 +1,7 @@
 import { readFileSync, readdirSync } from 'node:fs'
 import { join } from 'node:path'
 import { parseSync } from '@oxc-parser/wasm'
-import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, useLogger } from '@nuxt/kit'
+import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, installModule, useLogger } from '@nuxt/kit'
 import { UTILS } from '../../cli/src/utils/templates'
 
 // TODO: add test to make sure all registry is being parse correctly
@@ -59,6 +59,14 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
+    // Installs the `@nuxtjs/color-mode` module.
+
+    await installModule('@nuxtjs/color-mode', {
+      colorMode: {
+        classSuffix: '',
+      },
+    })
+
     // Manually scan `componentsDir` for components and register them for auto imports
     try {
       readdirSync(resolve(COMPONENT_DIR_PATH))
@@ -73,7 +81,7 @@ export default defineNuxtModule<ModuleOptions>({
 
             const exportedKeys: string[] = ast.program.body
               .filter(node => node.type === 'ExportNamedDeclaration')
-            // @ts-expect-error parse return any
+              // @ts-expect-error parse return any
               .flatMap(node => node.specifiers.map(specifier => specifier.exported.name))
               .filter((key: string) => /^[A-Z]/.test(key))
 

pnpm-workspace.yaml

@@ -2,6 +2,6 @@ packages:
   - apps/*
   - packages/*
 catalog:
-  '@oxc-parser/wasm': ^0.24.2
+  '@oxc-parser/wasm': ^0.25.0
-  radix-vue: ^1.9.4
+  radix-vue: ^1.9.5
   zod: ^3.23.8