Merge branch 'dev' of into refactor/use-class-prop

.github/workflows/publish.yaml

@@ -11,17 +11,50 @@ on:
       - dev
     paths:
       - 'apps/www/**'
+  pull_request_target:
+    types:
+      # When a created pull request from forked repo, it will be comment 'Should deploy to add label'
+      - opened
+      # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
+      - labeled
+    paths:
+      - 'apps/www/**'
+  # Allows you to run this workflow manually from the Actions tab
+  # eslint-disable-next-line yml/no-empty-mapping-value
+  workflow_dispatch:
+
+permissions:
+  # default contents: read & write (in forked repos, only read)
+  contents: write
+  # default deployments: read & write (in forked repos, only read)
+  deployments: write
+  # default pull-requests: read & write (in forked repos, only read)
+  pull-requests: write
 
 jobs:
   publish:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      deployments: write
     name: Publish to Cloudflare Pages
+    # push event in main branch
+    # workflow_dispatch event
+    # pull_request event from not forked repo
+    # pull_request_target event with label "🚀request-deploy" from forked repo
+    if: ${{
+      github.event_name == 'push' ||
+      github.event_name == 'workflow_dispatch' ||
+      (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false) ||
+      (github.event_name == 'pull_request_target' &&
+      github.event.action == 'labeled' &&
+      github.event.pull_request.head.repo.fork == true &&
+      contains(github.event.label.name, '🚀request-deploy'))
+      }}
+
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          fetch-depth: 0
 
       # Run a build step here
       - name: Setup Node.js environment
@@ -56,7 +89,7 @@ jobs:
 
       # Run a action to publish docs
       - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1.5.0
+        uses: zernonia/cloudflare-pages-action@v0.0.7
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
@@ -66,7 +99,20 @@ jobs:
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           # Optional: Switch what branch you are publishing to.
           # By default this will be the branch which triggered this workflow
-          # branch: main
+          branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }}
           # Optional: Change the working directory
           workingDirectory: apps/www
           wranglerVersion: '3'
+
+      - name: Remove label
+        if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }}
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.removeLabel({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: ['🚀request-deploy']
+            })

apps/www/.vitepress/config.mts

@@ -3,9 +3,17 @@ import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
+import { createCssVariablesTheme } from 'shikiji'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
+const cssVariables = createCssVariablesTheme({
+  name: 'css-variables',
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
+  fontStyle: true,
+})
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: siteConfig.name,
@@ -50,7 +58,7 @@ export default defineConfig({
 
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
-    theme: 'css-variables',
+    theme: cssVariables,
     config(md) {
       md.use(ComponentPreviewPlugin)
     },

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -52,7 +52,7 @@ const { style } = useConfigStore()
           </div>
         </div>
         <div
-          :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',

apps/www/.vitepress/theme/config/docs.ts

@@ -330,6 +330,11 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/toggle',
           items: [],
         },
+        {
+          title: 'Toggle Group',
+          href: '/docs/components/toggle-group',
+          items: [],
+        },
         {
           title: 'Tooltip',
           href: '/docs/components/tooltip',

apps/www/.vitepress/theme/styles/shiki.css

@@ -1,5 +1,5 @@
 :root {
-  --shiki-color-text: #EEEEEE;
+  --shiki-foreground: #EEEEEE;
   --shiki-color-background: #ffffff;
   --shiki-token-constant: #ffffff;
   --shiki-token-string: #ffffff88;

apps/www/__registry__/index.ts

@@ -359,6 +359,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DatePickerWithRange.vue'],
     },
+    DateTimePickerDemo: {
+      name: 'DateTimePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/DateTimePickerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DateTimePickerDemo.vue'],
+    },
     DialogCustomCloseButton: {
       name: 'DialogCustomCloseButton',
       type: 'components:example',
@@ -499,6 +506,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/RadioGroupForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/RadioGroupForm.vue'],
     },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/RangePickerWithSlot.vue'],
+    },
     ScrollAreaDemo: {
       name: 'ScrollAreaDemo',
       type: 'components:example',
@@ -681,6 +695,48 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
     },
+    ToggleGroupDemo: {
+      name: 'ToggleGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupDemo.vue'],
+    },
+    ToggleGroupDisabledDemo: {
+      name: 'ToggleGroupDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue'],
+    },
+    ToggleGroupLargeDemo: {
+      name: 'ToggleGroupLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupLargeDemo.vue'],
+    },
+    ToggleGroupOutlineDemo: {
+      name: 'ToggleGroupOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue'],
+    },
+    ToggleGroupSingleDemo: {
+      name: 'ToggleGroupSingleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupSingleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupSingleDemo.vue'],
+    },
+    ToggleGroupSmallDemo: {
+      name: 'ToggleGroupSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'],
+    },
     ToggleItalicDemo: {
       name: 'ToggleItalicDemo',
       type: 'components:example',
@@ -1194,6 +1250,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'],
     },
+    DateTimePickerDemo: {
+      name: 'DateTimePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/DateTimePickerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DateTimePickerDemo.vue'],
+    },
     DialogCustomCloseButton: {
       name: 'DialogCustomCloseButton',
       type: 'components:example',
@@ -1334,6 +1397,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/RadioGroupForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/RadioGroupForm.vue'],
     },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/RangePickerWithSlot.vue'],
+    },
     ScrollAreaDemo: {
       name: 'ScrollAreaDemo',
       type: 'components:example',
@@ -1516,6 +1586,48 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
     },
+    ToggleGroupDemo: {
+      name: 'ToggleGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupDemo.vue'],
+    },
+    ToggleGroupDisabledDemo: {
+      name: 'ToggleGroupDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue'],
+    },
+    ToggleGroupLargeDemo: {
+      name: 'ToggleGroupLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue'],
+    },
+    ToggleGroupOutlineDemo: {
+      name: 'ToggleGroupOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue'],
+    },
+    ToggleGroupSingleDemo: {
+      name: 'ToggleGroupSingleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue'],
+    },
+    ToggleGroupSmallDemo: {
+      name: 'ToggleGroupSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'],
+    },
     ToggleItalicDemo: {
       name: 'ToggleItalicDemo',
       type: 'components:example',

apps/www/package.json

@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "files": [
     "dist"
   ],
@@ -15,28 +15,28 @@
     "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.0",
+    "@formkit/auto-animate": "^0.8.1",
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.10.7",
-    "@unovis/ts": "^1.2.3",
-    "@unovis/vue": "1.3.0-beta.3",
-    "@vee-validate/zod": "^4.12.3",
-    "@vueuse/core": "^10.5.0",
+    "@tanstack/vue-table": "^8.11.6",
+    "@unovis/ts": "^1.3.1",
+    "@unovis/vue": "^1.3.1",
+    "@vee-validate/zod": "^4.12.4",
+    "@vueuse/core": "^10.7.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
     "embla-carousel": "8.0.0-rc19",
     "embla-carousel-autoplay": "8.0.0-rc19",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.2.5",
+    "radix-vue": "^1.3.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vee-validate": "4.12.3",
-    "vue": "^3.3.7",
+    "vee-validate": "4.12.4",
+    "vue": "^3.4.14",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
@@ -47,22 +47,23 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash.template": "^4.5.2",
     "@types/node": "^20.8.10",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-core": "^3.3.7",
-    "@vue/compiler-dom": "^3.3.7",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/compiler-core": "^3.4.14",
+    "@vue/compiler-dom": "^3.4.14",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
-    "pathe": "^1.1.1",
+    "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
-    "tailwind-merge": "^2.0.0",
-    "tailwindcss": "^3.3.5",
+    "shikiji": "^0.10.0-beta.2",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "^3.4.1",
     "tsx": "^4.7.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unplugin-icons": "^0.17.1",
-    "vite": "^4.5.0",
-    "vitepress": "^1.0.0-rc.24",
+    "vite": "^5.0.11",
+    "vitepress": "^1.0.0-rc.37",
     "vue-tsc": "^1.8.27"
   }
 }

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

@@ -5,7 +5,7 @@ description: Powered by amazing open source projects.
 
 ## About
 
-[shadcn-vue](https://shadcn-vuee.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
+[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
 
 ## Credits
 

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

@@ -56,5 +56,40 @@ import { Calendar } from '@/components/ui/calendar'
 </template>
 ```
 
-See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
+The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
 
+### Slots
+
+The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
+
+- `day-content`
+- `day-popover`
+- `dp-footer`
+- `footer`
+- `header-title-wrapper`
+- `header-title`
+- `header-prev-button`
+- `header-next-button`
+- `nav`
+- `nav-prev-button`
+- `nav-next-button`
+- `page`
+- `time-header`
+
+Example using the `day-content` slot:
+
+```vue
+<script setup lang="ts">
+import { Calendar } from '@/components/ui/calendar'
+</script>
+
+<template>
+  <Calendar>
+    <template #day-content="{ day, dayProps, dayEvents }">
+      <div v-bind="dayProps" v-on="dayEvents">
+        {{ day.label }}
+      </div>
+    </template>
+  </Calendar>
+</template>
+```

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

@@ -48,18 +48,6 @@ import {
 
 ## Examples
 
-### Orientation
-
-Use the `orientation` prop to set the orientation of the carousel.
-
-<ComponentPreview name="CarouselOrientation" />
-
-```vue
-<Carousel orientation="vertical | horizontal">
-  ...
-</Carousel>
-```
-
 ### Sizes
 
 To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
@@ -151,6 +139,17 @@ Responsive
 </template>
 ```
 
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="CarouselOrientation" />
+
+```vue
+<Carousel orientation="vertical | horizontal">
+  ...
+</Carousel>
+```
 
 ## Options
 

apps/www/src/content/docs/components/date-picker.md

@@ -64,10 +64,18 @@ const date = ref<Date>()
 
 <ComponentPreview name="DatePickerWithRange"  />
 
+### Date Time Picker
+
+<ComponentPreview name="DateTimePickerDemo"  />
+
 ### With Presets
 
 <ComponentPreview name="DatePickerWithPresets"  />
 
+### With Slot
+
+<ComponentPreview name="RangePickerWithSlot"  />
+
 ### Form
 
 <ComponentPreview name="DatePickerForm"  />

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

@@ -173,7 +173,7 @@ const formSchema = toTypedSchema(z.object({
 
 ### Define a form
 
-Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a from.
+Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a form.
 
 
 <TabPreview name="Composition" :names="['Composition', 'Component']">

apps/www/src/content/docs/components/toggle-group.md

@@ -0,0 +1,93 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+source: apps/www/src/lib/registry/default/ui/toggle-group
+primitive: https://www.radix-vue.com/components/toggle-group.html
+---
+
+<ComponentPreview name="ToggleGroupDemo" /> 
+
+## Installation
+
+<TabPreview name="CLI">
+<template #CLI>
+
+```bash
+npx shadcn-vue@latest add toggle-group
+```
+</template>
+
+<template #Manual>
+
+<Steps>
+
+### Install the following dependencies:
+
+```bash
+npm install radix-vue
+```
+
+### Copy and paste the following code into your project
+
+<<< @/lib/registry/default/ui/toggle-group/ToggleGroup.vue
+
+</Steps>
+
+</template>
+</TabPreview>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="single">
+    <ToggleGroupItem value="a">
+      A
+    </ToggleGroupItem>
+    <ToggleGroupItem value="b">
+      B
+    </ToggleGroupItem>
+    <ToggleGroupItem value="c">
+      C
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>
+```
+
+## Examples
+
+### Default 
+
+<ComponentPreview name="ToggleGroupDemo" /> 
+
+
+### Outline
+
+<ComponentPreview name="ToggleGroupOutlineDemo" /> 
+
+
+### Single
+
+<ComponentPreview name="ToggleGroupSingleDemo" />
+
+
+### Small
+
+<ComponentPreview name="ToggleGroupSmallDemo" />
+
+
+### Large
+
+<ComponentPreview name="ToggleGroupLargeDemo" />
+
+
+### Disabled
+
+<ComponentPreview name="ToggleGroupDisabledDemo" />
+
+
+

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

@@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts
 
 ### Add Tailwind and its configuration
 
-Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
 
-npx tailwindcss init -p
-```
+
+<TabsMarkdown>
+  <TabMarkdown title="vite.config.ts">
+
+  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
+
+  ```bash
+  npm install -D tailwindcss autoprefixer
+  ```
+
+  #### `vite.config`
+
+  ```typescript {5,6,10-14}
+  import path from "path"
+  import { defineConfig } from "vite"
+  import vue from "@vitejs/plugin-vue"
+
+  import tailwind from "tailwindcss"
+  import autoprefixer from "autoprefixer"
+
+  export default defineConfig({
+    plugins: [vue()],
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()],
+      },
+    },
+    resolve: {...}
+  })
+  ```
+
+  </TabMarkdown>
+
+
+  <TabMarkdown title="postcss.config.js">
+
+  ```bash
+  npm install -D tailwindcss autoprefixer postcss
+  ```
+
+  #### `postcss.config.js`
+
+  ```js
+  module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  ```
+
+  </TabMarkdown>
+</TabsMarkdown>
+
 
 ### Edit tsconfig.json
 
@@ -42,6 +92,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can
 
 Add the code below to the vite.config.ts so your app can resolve paths without error
 
+```bash
+# (so you can import "path" without error)
+npm i -D @types/node
+```
+
 ```typescript
 import path from "path"
 import vue from "@vitejs/plugin-vue"

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

@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+  <div class="w-full sm:w-auto">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">

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

@@ -4,8 +4,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel class="w-full max-w-xs">
+  <Carousel class="relative w-full max-w-xs">
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">
         <div class="p-1">
@@ -20,5 +19,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,10 +4,9 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
   <Carousel
     orientation="vertical"
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xsw-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -26,5 +25,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -11,9 +11,8 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
     @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
@@ -32,5 +31,4 @@ const plugin = Autoplay({
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-sm"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-sm"
+    class="relative w-full max-w-sm"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" mode="datetime" />
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+const date = ref({
+  start: new Date(2022, 0, 20),
+  end: addDays(new Date(2022, 0, 20), 20),
+})
+</script>
+
+<template>
+  <div :class="cn('grid gap-2', $attrs.class ?? '')">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="cn(
+            'w-[300px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+          )"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+
+          <span>
+            {{ date.start ? (
+              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
+              : format(date.start, 'LLL dd, y')
+            ) : 'Pick a date' }}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+        <Calendar
+          v-model.range="date"
+          mode="date"
+          :columns="2"
+        >
+          <template #footer>
+            <div class="w-full px-3 pb-3">
+              Entry time
+              <Calendar
+                v-model="date.start"
+                mode="time"
+                hide-time-header
+              />
+              Exit time
+              <Calendar
+                v-model="date.end"
+                mode="time"
+                hide-time-header
+              />
+            </div>
+          </template>
+        </Calendar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" disabled>
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" size="lg">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" variant="outline">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="single">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" size="sm">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

apps/www/src/lib/registry/default/example/index.ts

@@ -1 +0,0 @@
-export { default as AccordionDemo } from './AccordionDemo.vue'

apps/www/src/lib/registry/default/ui/calendar/Calendar.vue

@@ -3,7 +3,8 @@ import { useVModel } from '@vueuse/core'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -63,11 +64,21 @@ onMounted(async () => {
   if (modelValue.value instanceof Date && calendarRef.value)
     calendarRef.value.focusDate(modelValue.value)
 })
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
 </script>
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
         <ChevronLeft class="w-4 h-4" />
       </button>
@@ -85,7 +96,11 @@ onMounted(async () => {
       trim-weeks
       :transition="'none'"
       :columns="columns"
-    />
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </DatePicker>
   </div>
 </template>
 
@@ -242,4 +257,49 @@ onMounted(async () => {
 	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
 	transform: translateY(calc(-1 * var(--vc-slide-translate)));
 }
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
 </style>

apps/www/src/lib/registry/default/ui/calendar/index.ts

@@ -1 +1,22 @@
 export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}

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

@@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   <Button
     :disabled="!canScrollNext"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',

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

@@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
   <Button
     :disabled="!canScrollPrev"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',

apps/www/src/lib/registry/default/ui/select/SelectContent.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
     sideOffset: 4,
+    avoidCollisions: true,
   },
 )
 const emits = defineEmits<SelectContentEmits>()

apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import type { toggleVariants } from '@/lib/registry/default/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/lib/registry/default/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps.value)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

apps/www/src/lib/registry/default/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

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

@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+  <div class="w-full sm:w-auto">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">

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

@@ -4,8 +4,7 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel class="w-full max-w-xs">
+  <Carousel class="relative w-full max-w-xs">
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">
         <div class="p-1">
@@ -20,5 +19,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,10 +4,9 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
   <Carousel
     orientation="vertical"
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -26,5 +25,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -11,9 +11,8 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
     @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
@@ -32,5 +31,4 @@ const plugin = Autoplay({
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -4,7 +4,6 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
     class="w-full max-w-sm"
     :opts="{
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { ref } from 'vue'
+import { CalendarIcon } from '@radix-icons/vue'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" mode="datetime" />
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { ref } from 'vue'
+import { CalendarIcon } from '@radix-icons/vue'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref({
+  start: new Date(2022, 0, 20),
+  end: addDays(new Date(2022, 0, 20), 20),
+})
+</script>
+
+<template>
+  <div :class="cn('grid gap-2', $attrs.class ?? '')">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="cn(
+            'w-[300px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+          )"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+
+          <span>
+            {{ date.start ? (
+              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
+              : format(date.start, 'LLL dd, y')
+            ) : 'Pick a date' }}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+        <Calendar
+          v-model.range="date"
+          mode="date"
+          :columns="2"
+        >
+          <template #footer>
+            <div class="flex w-full mt-6 border-t border-accent pt-4">
+              <div class="w-1/2">
+                <strong>Entry time</strong>
+                <Calendar
+                  v-model="date.start"
+                  mode="time"
+                  hide-time-header
+                />
+              </div>
+              <div class="w-1/2">
+                <strong>Exit time</strong>
+                <Calendar
+                  v-model="date.end"
+                  mode="time"
+                  hide-time-header
+                />
+              </div>
+            </div>
+          </template>
+        </Calendar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" disabled>
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" size="lg">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" variant="outline">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="single">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from '@radix-icons/vue'
+
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+</script>
+
+<template>
+  <ToggleGroup type="multiple" size="sm">
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <FontBoldIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <FontItalicIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <UnderlineIcon class="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>

apps/www/src/lib/registry/new-york/example/index.ts

@@ -1 +0,0 @@
-export { default as AccordionDemo } from './AccordionDemo.vue'

apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue

@@ -2,9 +2,10 @@
 import { useVModel } from '@vueuse/core'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { computed, nextTick, onMounted, ref } from 'vue'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 
 /* Extracted from v-calendar */
@@ -63,16 +64,26 @@ onMounted(async () => {
   if (modelValue.value instanceof Date && calendarRef.value)
     calendarRef.value.focusDate(modelValue.value)
 })
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
 </script>
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeft class="w-4 h-4" />
+        <ChevronLeftIcon class="w-4 h-4" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRight class="w-4 h-4" />
+        <ChevronRightIcon class="w-4 h-4" />
       </button>
     </div>
 
@@ -85,7 +96,11 @@ onMounted(async () => {
       trim-weeks
       :transition="'none'"
       :columns="columns"
-    />
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </DatePicker>
   </div>
 </template>
 
@@ -242,4 +257,49 @@ onMounted(async () => {
 	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
 	transform: translateY(calc(-1 * var(--vc-slide-translate)));
 }
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
 </style>

apps/www/src/lib/registry/new-york/ui/calendar/index.ts

@@ -1 +1,22 @@
 export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowRight } from 'lucide-vue-next'
+import { ArrowRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   <Button
     :disabled="!canScrollNext"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ArrowRight class="h-4 w-4 text-current" />
+      <ArrowRightIcon class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowLeft } from 'lucide-vue-next'
+import { ArrowLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
   <Button
     :disabled="!canScrollPrev"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeft class="h-4 w-4 text-current" />
+      <ArrowLeftIcon class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>

apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
     sideOffset: 4,
+    avoidCollisions: true,
   },
 )
 const emits = defineEmits<SelectContentEmits>()

apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps.value)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

apps/www/src/lib/registry/new-york/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

apps/www/src/public/registry/index.json

@@ -610,6 +610,20 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "toggle-group",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle",
+      "utils"
+    ],
+    "files": [
+      "ui/toggle-group/ToggleGroup.vue",
+      "ui/toggle-group/ToggleGroupItem.vue",
+      "ui/toggle-group/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "tooltip",
     "dependencies": [],

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

@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"

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

@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/default/radio-group.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-foreground\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-current fill-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",

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

@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -35,7 +35,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",

apps/www/src/public/registry/styles/default/toggle-group.json

@@ -0,0 +1,23 @@
+{
+  "name": "toggle-group",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+    },
+    {
+      "name": "ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n            'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n            'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n            'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n            'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"

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

@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",

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

@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-0',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-0',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -35,7 +35,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",

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

@@ -0,0 +1,23 @@
+{
+  "name": "toggle-group",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+    },
+    {
+      "name": "ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

apps/www/src/public/schema.json

@@ -6,6 +6,10 @@
       "type": "string",
       "enum": ["default", "new-york"]
     },
+    "typescript": {
+      "type": "boolean",
+      "default": true
+    },
     "tailwind": {
       "type": "object",
       "properties": {
@@ -19,11 +23,17 @@
           "type": "string"
         },
         "cssVariables": {
-          "type": "boolean"
+          "type": "boolean",
+          "default": true
         }
       },
       "required": ["config", "css", "baseColor", "cssVariables"]
     },
+    "framework": {
+      "type": "string",
+      "enum": ["nuxt", "vite", "laravel", "astro"],
+      "default": "vite"
+    },
     "aliases": {
       "type": "object",
       "properties": {

apps/www/tsconfig.json

@@ -12,6 +12,6 @@
     "sourceMap": true,
     "outDir": "dist"
   },
-  "include": ["src", ".vitepress/**/*.vue", ".vitepress/**/*.mts", ".vitepress/**/*.vue", "src/lib/**/*"],
-  "exclude": ["node_modules", "./scripts/build-registry.ts"]
+  "include": ["src", ".vitepress/**/*.vue", "scripts/build-registry.ts", ".vitepress/**/*.mts", ".vitepress/**/*.vue", "src/lib/**/*"],
+  "exclude": ["node_modules"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-vue",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "private": true,
   "packageManager": "pnpm@8.10.2",
   "license": "MIT",

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -63,7 +63,7 @@
     "node-fetch": "^3.3.2",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.2.3",
+    "radix-vue": "^1.3.0",
     "recast": "^0.23.4",
     "rimraf": "^5.0.1",
     "ts-morph": "^19.0.0",

packages/cli/src/commands/init.ts

@@ -178,7 +178,7 @@ export async function promptForConfig(
   ])
 
   const config = rawConfigSchema.parse({
-    // $schema: 'https://ui.shadcn.com/schema.json',
+    $schema: 'https://shadcn-vue.com/schema.json',
     style: options.style,
     typescript: options.typescript,
     framework: options.framework,

packages/cli/src/utils/templates.ts

@@ -51,6 +51,7 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = `const animate = require("tailwind
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
+  safelist: ["dark"],
   <% if (framework === 'vite') { %>
   content: [
     './pages/**/*.{<%- extension %>,<%- extension %>x,vue}',

packages/cli/test/fixtures/nuxt/package.json

@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.2.3",
+    "radix-vue": "^1.3.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },

packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap

@@ -47,6 +47,7 @@ exports[`handle tailwind config template correctly 2`] = `
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: [\\"class\\"],
+  safelist: [\\"dark\\"],
   <% if (framework === 'vite') { %>
   content: [
     './pages/**/*.{<%- extension %>,<%- extension %>x,vue}',

packages/module/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-nuxt",
   "type": "module",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Add shadcn-vue module to Nuxt",
   "publishConfig": {
     "access": "public"
@@ -36,8 +36,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.8.2",
-    "recast": "^0.23.4",
-    "ts-morph": "^19.0.0"
+    "oxc-parser": "^0.2.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

packages/module/playground/components/ui/carousel/Carousel.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import emblaCarouselVue from 'embla-carousel-vue'
+import { useProvideCarousel } from './useCarousel'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const carouselArgs = useProvideCarousel(props, emits)
+
+defineExpose(carouselArgs)
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    carouselArgs.scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    carouselArgs.scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot v-bind="carouselArgs" />
+  </div>
+</template>

packages/module/playground/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

packages/module/playground/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

packages/module/playground/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute h-10 w-10 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>

packages/module/playground/components/ui/carousel/CarouselPrevious.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ChevronLeft } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute h-10 w-10 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>

packages/module/playground/components/ui/carousel/index.ts

@@ -0,0 +1,10 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { useCarousel } from './useCarousel'
+
+export type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'

packages/module/playground/components/ui/carousel/interface.ts

@@ -0,0 +1,20 @@
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel'
+import type { HTMLAttributes, Ref } from 'vue'
+
+export interface CarouselProps {
+  opts?: CarouselOptions | Ref<CarouselOptions>
+  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: CarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}

packages/module/playground/components/ui/carousel/useCarousel.ts

@@ -0,0 +1,57 @@
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+import type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
+import type { CarouselEmits, CarouselProps } from './interface'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts, orientation, plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(true)
+    const canScrollPrev = ref(true)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api.canScrollNext()
+      canScrollPrev.value = api.canScrollPrev()
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error('useCarousel must be used within a <Carousel />')
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }

packages/module/playground/package.json

@@ -11,8 +11,10 @@
     "@nuxtjs/tailwindcss": "^6.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "embla-carousel": "8.0.0-rc19",
+    "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.2.3",
+    "radix-vue": "^1.3.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },

packages/module/src/module.ts

@@ -1,8 +1,9 @@
 import { readFileSync, readdirSync } from 'node:fs'
 import { join } from 'node:path'
 import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
-import { parse } from 'recast'
+import oxc from 'oxc-parser'
 
+// TODO: add test to make sure all registry is being parse correctly
 // Module options TypeScript interface definition
 export interface ModuleOptions {
   /**
@@ -40,11 +41,16 @@ export default defineNuxtModule<ModuleOptions>({
     try {
       readdirSync(resolve(COMPONENT_DIR_PATH))
         .forEach(async (dir) => {
+          try {
             const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })
             const content = readFileSync(filePath, { encoding: 'utf8' })
-          const ast = parse(content)
+            const ast = oxc.parseSync(content, {
+              sourceType: 'module',
+              sourceFilename: filePath,
+            })
+            const program = JSON.parse(ast.program)
 
-          const exportedKeys: string[] = ast.program.body
+            const exportedKeys: string[] = program.body
             // @ts-expect-error parse return any
               .filter(node => node.type === 'ExportNamedDeclaration')
             // @ts-expect-error parse return any
@@ -58,6 +64,11 @@ export default defineNuxtModule<ModuleOptions>({
                 filePath: resolve(filePath),
               })
             })
+          }
+          catch (err) {
+            if (err instanceof Error)
+              console.warn('Module error: ', err.message)
+          }
         })
     }
     catch (err) {