Merge remote-tracking branch 'origin/dev' into pr/romanhrynevych/269

.github/workflows/publish.yaml

@@ -11,14 +11,44 @@ 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
@@ -70,3 +100,58 @@ jobs:
           # Optional: Change the working directory
           workingDirectory: apps/www
           wranglerVersion: '3'
+
+      - name: Create PR comment
+        if: ${{ github.event_name == 'pull_request' || github.event_name == 'pull_request_target' }}
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ### ⚡ Successfully Cloudflare Pages deployed!
+            | Name | Link |
+            | :--- | :--- |
+            | <span aria-hidden="true">🔨</span> Latest commit | ${{ github.event.pull_request.head.sha || github.sha }} |
+            | <span aria-hidden="true">🔍</span> Latest deploy log | ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} |
+            | <span aria-hidden="true">😎</span> Deploy Preview Url | [${{ steps.cloudflare-pages-deploy.outputs.url }}](${{ steps.cloudflare-pages-deploy.outputs.url }}) |
+            | <span aria-hidden="true">🌳</span> Environment | ${{ steps.cloudflare-pages-deploy.outputs.environment }} |
+
+      - 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']
+            })
+
+  # Comment on PR from the fork
+  comment:
+    name: Comment
+    runs-on: ubuntu-latest
+
+    # pull_request_target opened event from forked repo
+    if: ${{
+      github.event_name == 'pull_request_target' &&
+      github.event.action == 'opened' &&
+      github.event.pull_request.head.repo.fork == true
+      }}
+
+    steps:
+      - name: Create PR comment
+        run: |
+          cat << EOF > comment.md
+          # ⚠️ \`🚀request-deploy\` label is required for deployment
+
+          This repository is a forked repository.
+          Due to security reasons, deployment from forked repositories does not happen automatically.
+
+          To request deployment, please add the \`🚀request-deploy\` label to this pull request.
+          (Only certain members have the ability to add labels.)
+          EOF
+
+          gh pr comment ${{ github.event.number }} -R ${{ github.repository }} -F comment.md
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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/__registry__/index.ts

@@ -716,6 +716,48 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleSmallDemo.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'],
+    },
     TooltipDemo: {
       name: 'TooltipDemo',
       type: 'components:example',
@@ -1558,6 +1600,48 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.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'],
+    },
     TooltipDemo: {
       name: 'TooltipDemo',
       type: 'components:example',

apps/www/package.json

@@ -54,12 +54,12 @@
     "@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.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",

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
 
@@ -280,4 +279,4 @@ import Autoplay from 'embla-carousel-autoplay'
 
 <ComponentPreview name="CarouselPlugin" />
 
-See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.

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/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">
+  <div class="w-full sm:w-auto">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+    <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,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel class="relative w-full max-w-xs">
-    <Carousel class="w-full max-w-xs">
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
-        <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
+  <Carousel
-    <Carousel
+    orientation="vertical"
-      orientation="vertical"
+    class="relative w-full max-w-xsw-full max-w-xs"
-      class="w-full max-w-xs"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent class="-mt-1 h-[200px]">
-      <CarouselContent class="-mt-1 h-[200px]">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex items-center justify-center p-6">
-              <CardContent class="flex items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -11,26 +11,24 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="relative w-full max-w-xs"
-      class="w-full max-w-xs"
+    :plugins="[plugin]"
-      :plugins="[plugin]"
+    @mouseenter="plugin.stop"
-      @mouseenter="plugin.stop"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+  >
-    >
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
-        <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="relative w-full max-w-sm"
-      class="w-full max-w-xs"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="relative w-full max-w-sm"
-      class="w-full max-w-sm"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent class="-ml-1">
-      <CarouselContent class="-ml-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-2xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </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/carousel/CarouselNext.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronRight } from 'lucide-vue-next'
+import { ArrowRight } from 'lucide-vue-next'
 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>
-      <ChevronRight class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronLeft } from 'lucide-vue-next'
+import { ArrowLeft } from 'lucide-vue-next'
 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>
-      <ChevronLeft class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>

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

@@ -13,6 +13,7 @@ const props = withDefaults(
   defineProps<SelectContentProps & { class?: string }>(), {
     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">
+  <div class="w-full sm:w-auto">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+    <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,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel class="relative w-full max-w-xs">
-    <Carousel class="w-full max-w-xs">
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
-        <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
+  <Carousel
-    <Carousel
+    orientation="vertical"
-      orientation="vertical"
+    class="relative w-full max-w-xs"
-      class="w-full max-w-xs"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent class="-mt-1 h-[200px]">
-      <CarouselContent class="-mt-1 h-[200px]">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex items-center justify-center p-6">
-              <CardContent class="flex items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -11,26 +11,24 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="relative w-full max-w-xs"
-      class="w-full max-w-xs"
+    :plugins="[plugin]"
-      :plugins="[plugin]"
+    @mouseenter="plugin.stop"
-      @mouseenter="plugin.stop"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+  >
-    >
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
-        <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="relative w-full max-w-xs"
-      class="w-full max-w-xs"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent>
-      <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </div>
 </template>

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

@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel
-    <Carousel
+    class="w-full max-w-sm"
-      class="w-full max-w-sm"
+    :opts="{
-      :opts="{
+      align: 'start',
-        align: 'start',
+    }"
-      }"
+  >
-    >
+    <CarouselContent class="-ml-1">
-      <CarouselContent class="-ml-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
-          <div class="p-1">
+          <Card>
-            <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
-              <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-2xl font-semibold">{{ index + 1 }}</span>
-                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
-              </CardContent>
+          </Card>
-            </Card>
+        </div>
-          </div>
+      </CarouselItem>
-        </CarouselItem>
+    </CarouselContent>
-      </CarouselContent>
+    <CarouselPrevious />
-      <CarouselPrevious />
+    <CarouselNext />
-      <CarouselNext />
+  </Carousel>
-    </Carousel>
-  </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/carousel/CarouselNext.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@radix-icons/vue'
+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>
-      <ChevronRightIcon 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 { ChevronLeftIcon } from '@radix-icons/vue'
+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>
-      <ChevronLeftIcon 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

@@ -13,6 +13,7 @@ const props = withDefaults(
   defineProps<SelectContentProps & { class?: string }>(), {
     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,19 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "toggle-group",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/toggle-group/ToggleGroup.vue",
+      "ui/toggle-group/ToggleGroupItem.vue",
+      "ui/toggle-group/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "tooltip",
     "dependencies": [],
@@ -625,4 +638,4 @@
     ],
     "type": "components:ui"
   }
-]
+]

apps/www/tsconfig.json

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

pnpm-lock.yaml

@@ -109,7 +109,7 @@ importers:
         version: 4.12.3(vue@3.4.8)
       vue:
         specifier: ^3.4.7
-        version: 3.4.8(typescript@5.2.2)
+        version: 3.4.8(typescript@5.3.3)
       vue-wrap-balancer:
         specifier: ^1.1.3
         version: 1.1.3(vue@3.4.8)
@@ -157,8 +157,8 @@ importers:
         specifier: ^4.5.0
         version: 4.5.0
       pathe:
-        specifier: ^1.1.1
+        specifier: ^1.1.2
-        version: 1.1.1
+        version: 1.1.2
       rimraf:
         specifier: ^5.0.5
         version: 5.0.5
@@ -172,8 +172,8 @@ importers:
         specifier: ^4.7.0
         version: 4.7.0
       typescript:
-        specifier: ^5.2.2
+        specifier: ^5.3.3
-        version: 5.2.2
+        version: 5.3.3
       unplugin-icons:
         specifier: ^0.17.1
         version: 0.17.1
@@ -182,10 +182,10 @@ importers:
         version: 4.5.0(@types/node@20.8.10)
       vitepress:
         specifier: ^1.0.0-rc.24
-        version: 1.0.0-rc.24(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.2.2)
+        version: 1.0.0-rc.24(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
       vue-tsc:
         specifier: ^1.8.27
-        version: 1.8.27(typescript@5.2.2)
+        version: 1.8.27(typescript@5.3.3)
 
   packages/cli:
     dependencies:
@@ -1223,13 +1223,13 @@ packages:
       '@types/node': 20.4.7
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.2.2)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.2.2)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.3.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
       ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -2386,7 +2386,7 @@ packages:
     resolution: {integrity: sha512-vxE3fNGgQEEu2nvMuR/g4Cu/CxPpQWjc3cwsk/KY3iTN4hLKL0lnBsi1GmQL1ITSsyib2f72h329j+D9S9esbg==}
     dependencies:
       '@iconify/types': 2.0.0
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /@iconify/types@2.0.0:
@@ -2412,7 +2412,7 @@ packages:
       vue: '>=3'
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: true
 
   /@ioredis/commands@1.2.0:
@@ -2577,7 +2577,7 @@ packages:
     dependencies:
       '@morev/utils': 2.8.1
       '@nuxt/kit': 3.7.4
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2749,7 +2749,7 @@ packages:
       execa: 7.2.0
       global-directory: 4.0.1
       magicast: 0.3.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       prompts: 2.4.2
       rc9: 2.1.1
@@ -2788,7 +2788,7 @@ packages:
       ofetch: 1.3.3
       ohash: 1.1.3
       pacote: 17.0.4
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
@@ -2830,11 +2830,11 @@ packages:
       eslint: ^8.48.0
     dependencies:
       '@rushstack/eslint-patch': 1.6.0
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
       eslint-plugin-vue: 9.17.0(eslint@8.56.0)
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2853,7 +2853,7 @@ packages:
       jiti: 1.20.0
       knitwork: 1.0.0
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.0.0
       semver: 7.5.4
@@ -2880,7 +2880,7 @@ packages:
       jiti: 1.21.0
       knitwork: 1.0.0
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.0.0
       semver: 7.5.4
@@ -2907,7 +2907,7 @@ packages:
       jiti: 1.21.0
       knitwork: 1.0.0
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.1.0
       semver: 7.5.4
@@ -2931,7 +2931,7 @@ packages:
       consola: 3.2.3
       mlly: 1.4.2
       nuxi: 3.10.0
-      pathe: 1.1.1
+      pathe: 1.1.2
       unbuild: 2.0.0(typescript@5.3.3)
     transitivePeerDependencies:
       - sass
@@ -2947,7 +2947,7 @@ packages:
       consola: 3.2.3
       defu: 6.1.2
       hookable: 5.5.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       postcss-import-resolver: 2.0.0
       std-env: 3.4.3
@@ -2967,7 +2967,7 @@ packages:
       consola: 3.2.3
       defu: 6.1.3
       hookable: 5.5.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       std-env: 3.4.3
       ufo: 1.3.2
@@ -2986,7 +2986,7 @@ packages:
       consola: 3.2.3
       defu: 6.1.3
       hookable: 5.5.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.1.0
       std-env: 3.5.0
@@ -3015,7 +3015,7 @@ packages:
       nanoid: 4.0.2
       ofetch: 1.3.3
       parse-git-config: 3.0.0
-      pathe: 1.1.1
+      pathe: 1.1.2
       rc9: 2.1.1
       std-env: 3.5.0
     transitivePeerDependencies:
@@ -3046,7 +3046,7 @@ packages:
       execa: 8.0.1
       get-port-please: 3.1.1
       ofetch: 1.3.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       ufo: 1.3.2
       vitest: 0.33.0
       vue: 3.4.8(typescript@5.3.3)
@@ -3084,7 +3084,7 @@ packages:
       magic-string: 0.30.5
       mlly: 1.4.2
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       postcss: 8.4.33
@@ -3327,7 +3327,7 @@ packages:
     peerDependencies:
       vue: '>= 3'
     dependencies:
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /@rollup/plugin-alias@5.1.0(rollup@3.29.3):
@@ -3776,7 +3776,7 @@ packages:
       vue: ^3.2.33
     dependencies:
       '@tanstack/table-core': 8.10.7
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /@tootallnate/once@2.0.0:
@@ -4303,7 +4303,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.2.2):
+  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-vntq452UHNltxsaaN+L9WyuMch8bMd9CqJ3zhzTPXXidwbf5mqqKCVXEuvRZUqLJSTLeWE65lQwyXsRGnXkCTA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4317,8 +4317,8 @@ packages:
       '@eslint-community/regexpp': 4.9.0
       '@typescript-eslint/parser': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/type-utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/type-utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/visitor-keys': 6.7.3
       debug: 4.3.4
       eslint: 8.56.0
@@ -4326,8 +4326,8 @@ packages:
       ignore: 5.2.4
       natural-compare: 1.4.0
       semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
+      ts-api-utils: 1.0.3(typescript@5.3.3)
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4410,7 +4410,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@6.7.3(eslint@8.56.0)(typescript@5.2.2):
+  /@typescript-eslint/type-utils@6.7.3(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-Fc68K0aTDrKIBvLnKTZ5Pf3MXK495YErrbHb1R6aTpfK5OdSFj0rVN7ib6Tx6ePrZ2gsjLqr0s98NG7l96KSQw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4420,12 +4420,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
+      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.56.0
-      ts-api-utils: 1.0.3(typescript@5.2.2)
+      ts-api-utils: 1.0.3(typescript@5.3.3)
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4542,7 +4542,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.7.3(eslint@8.56.0)(typescript@5.2.2):
+  /@typescript-eslint/utils@6.7.3(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-vzLkVder21GpWRrmSR9JxGZ5+ibIUSudXlW52qeKpzUEQhRSmyZiVDDj3crAth7+5tmN1ulvgKaCU2f/bPRCzg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4553,7 +4553,7 @@ packages:
       '@types/semver': 7.5.3
       '@typescript-eslint/scope-manager': 6.7.3
       '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
+      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.3.3)
       eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -4676,7 +4676,7 @@ packages:
       vue: ^3
     dependencies:
       '@unovis/ts': 1.2.3
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /@vee-validate/zod@4.12.3(vue@3.4.8):
@@ -4721,7 +4721,7 @@ packages:
       '@babel/plugin-transform-typescript': 7.22.15(@babel/core@7.23.0)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.0)
       vite: 4.5.0(@types/node@20.8.10)
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4750,7 +4750,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(@types/node@20.8.10)
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: true
 
   /@vitejs/plugin-vue@4.4.0(vite@4.5.0)(vue@3.4.8):
@@ -4761,7 +4761,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(@types/node@20.8.10)
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: true
 
   /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.4.8):
@@ -4796,7 +4796,7 @@ packages:
     dependencies:
       '@vitest/utils': 0.33.0
       p-limit: 4.0.0
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /@vitest/runner@0.34.6:
@@ -4804,14 +4804,14 @@ packages:
     dependencies:
       '@vitest/utils': 0.34.6
       p-limit: 4.0.0
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /@vitest/snapshot@0.33.0:
     resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==}
     dependencies:
       magic-string: 0.30.5
-      pathe: 1.1.1
+      pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
 
@@ -4819,7 +4819,7 @@ packages:
     resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
     dependencies:
       magic-string: 0.30.5
-      pathe: 1.1.1
+      pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
 
@@ -4844,7 +4844,7 @@ packages:
       fast-glob: 3.3.1
       fflate: 0.8.1
       flatted: 3.2.9
-      pathe: 1.1.1
+      pathe: 1.1.2
       picocolors: 1.0.0
       sirv: 2.0.3
       vitest: 0.34.6(@vitest/ui@0.34.5)
@@ -5083,7 +5083,7 @@ packages:
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
-  /@vue/language-core@1.8.27(typescript@5.2.2):
+  /@vue/language-core@1.8.27(typescript@5.3.3):
     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
     peerDependencies:
       typescript: '*'
@@ -5099,7 +5099,7 @@ packages:
       minimatch: 9.0.3
       muggle-string: 0.3.1
       path-browserify: 1.0.1
-      typescript: 5.2.2
+      typescript: 5.3.3
       vue-template-compiler: 2.7.14
     dev: true
 
@@ -5564,7 +5564,7 @@ packages:
     dependencies:
       '@babel/parser': 7.23.6
       '@rollup/pluginutils': 5.1.0(rollup@3.29.3)
-      pathe: 1.1.1
+      pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5575,7 +5575,7 @@ packages:
     dependencies:
       '@babel/parser': 7.23.6
       '@rollup/pluginutils': 5.0.4(rollup@3.29.3)
-      pathe: 1.1.1
+      pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5846,7 +5846,7 @@ packages:
       jiti: 1.20.0
       mlly: 1.4.2
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
@@ -5863,7 +5863,7 @@ packages:
       jiti: 1.21.0
       mlly: 1.4.2
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
@@ -5880,7 +5880,7 @@ packages:
       jiti: 1.21.0
       mlly: 1.4.2
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
@@ -6428,7 +6428,7 @@ packages:
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  /cosmiconfig-typescript-loader@4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.2.2):
+  /cosmiconfig-typescript-loader@4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.3.3):
     resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==}
     engines: {node: '>=v14.21.3'}
     peerDependencies:
@@ -6440,7 +6440,7 @@ packages:
       '@types/node': 20.4.7
       cosmiconfig: 8.3.6(typescript@5.2.2)
       ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
-      typescript: 5.2.2
+      typescript: 5.3.3
     dev: true
 
   /cosmiconfig@7.1.0:
@@ -7161,7 +7161,7 @@ packages:
       '@vuedx/template-ast-types': 0.7.1
       fast-glob: 3.3.1
       prettier: 2.8.8
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -7331,7 +7331,7 @@ packages:
     dependencies:
       embla-carousel: 8.0.0-rc19
       embla-carousel-reactive-utils: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /embla-carousel@8.0.0-rc19:
@@ -8129,7 +8129,7 @@ packages:
     dependencies:
       enhanced-resolve: 5.15.0
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       ufo: 1.3.2
     dev: true
 
@@ -8503,7 +8503,7 @@ packages:
       https-proxy-agent: 5.0.1
       mri: 1.2.0
       node-fetch-native: 1.4.0
-      pathe: 1.1.1
+      pathe: 1.1.2
       tar: 6.2.0
     transitivePeerDependencies:
       - supports-color
@@ -8517,7 +8517,7 @@ packages:
       https-proxy-agent: 7.0.2
       mri: 1.2.0
       node-fetch-native: 1.4.1
-      pathe: 1.1.1
+      pathe: 1.1.2
       tar: 6.2.0
     transitivePeerDependencies:
       - supports-color
@@ -8532,7 +8532,7 @@ packages:
       node-fetch-native: 1.6.1
       nypm: 0.3.4
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       tar: 6.2.0
     dev: true
 
@@ -9698,7 +9698,7 @@ packages:
       jiti: 1.21.0
       mlly: 1.4.2
       node-forge: 1.3.1
-      pathe: 1.1.1
+      pathe: 1.1.2
       std-env: 3.7.0
       ufo: 1.3.2
       untun: 0.1.2
@@ -9906,7 +9906,7 @@ packages:
     peerDependencies:
       vue: '>=3.0.1'
     dependencies:
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /lz-string@1.5.0:
@@ -10349,7 +10349,7 @@ packages:
       jiti: 1.21.0
       mlly: 1.4.2
       mri: 1.2.0
-      pathe: 1.1.1
+      pathe: 1.1.2
       postcss: 8.4.33
       postcss-nested: 6.0.1(postcss@8.4.33)
       typescript: 5.3.3
@@ -10359,7 +10359,7 @@ packages:
     resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
     dependencies:
       acorn: 8.11.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       ufo: 1.3.2
 
@@ -10500,7 +10500,7 @@ packages:
       ofetch: 1.3.3
       ohash: 1.1.3
       openapi-typescript: 6.7.1
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       pretty-bytes: 6.1.1
@@ -10862,7 +10862,7 @@ packages:
       nypm: 0.3.3
       ofetch: 1.3.3
       ohash: 1.1.3
-      pathe: 1.1.1
+      pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       radix3: 1.1.0
@@ -10926,7 +10926,7 @@ packages:
     dependencies:
       citty: 0.1.5
       execa: 8.0.1
-      pathe: 1.1.1
+      pathe: 1.1.2
       ufo: 1.3.2
     dev: true
 
@@ -10937,7 +10937,7 @@ packages:
     dependencies:
       citty: 0.1.5
       execa: 8.0.1
-      pathe: 1.1.1
+      pathe: 1.1.2
       ufo: 1.3.2
     dev: true
 
@@ -11367,8 +11367,8 @@ packages:
     resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
     engines: {node: '>=12'}
 
-  /pathe@1.1.1:
+  /pathe@1.1.2:
-    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
   /pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
@@ -11416,7 +11416,7 @@ packages:
     dependencies:
       jsonc-parser: 3.2.0
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
 
   /pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -13460,7 +13460,6 @@ packages:
     resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /ufo@1.3.0:
     resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
@@ -13499,7 +13498,7 @@ packages:
       magic-string: 0.30.5
       mkdist: 1.4.0(typescript@5.3.3)
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       pretty-bytes: 6.1.1
       rollup: 3.29.3
@@ -13554,7 +13553,7 @@ packages:
       defu: 6.1.4
       mime: 3.0.0
       node-fetch-native: 1.4.1
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /unenv@1.9.0:
@@ -13564,7 +13563,7 @@ packages:
       defu: 6.1.4
       mime: 3.0.0
       node-fetch-native: 1.6.1
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /unhead@1.8.8:
@@ -13589,7 +13588,7 @@ packages:
       local-pkg: 0.4.3
       magic-string: 0.30.3
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.0.0
       strip-literal: 1.3.0
@@ -13606,7 +13605,7 @@ packages:
       local-pkg: 0.5.0
       magic-string: 0.30.5
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.1.0
       strip-literal: 1.3.0
@@ -13625,7 +13624,7 @@ packages:
       local-pkg: 0.5.0
       magic-string: 0.30.5
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.2.0
       strip-literal: 1.3.0
@@ -13730,7 +13729,7 @@ packages:
       json5: 2.2.3
       local-pkg: 0.4.3
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       scule: 1.1.0
       unplugin: 1.5.1
       vue-router: 4.2.5(vue@3.4.8)
@@ -13831,7 +13830,7 @@ packages:
     dependencies:
       citty: 0.1.5
       consola: 3.2.3
-      pathe: 1.1.1
+      pathe: 1.1.2
     dev: true
 
   /untyped@1.4.0:
@@ -13936,7 +13935,7 @@ packages:
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
       vue-screen-utils: 1.0.0-beta.13(vue@3.4.8)
     dev: false
 
@@ -13969,7 +13968,7 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.5.1
       type-fest: 4.8.3
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /vite-node@0.33.0(@types/node@20.10.1):
@@ -13980,7 +13979,7 @@ packages:
       cac: 6.7.14
       debug: 4.3.4
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       picocolors: 1.0.0
       vite: 4.5.0(@types/node@20.10.1)
     transitivePeerDependencies:
@@ -14002,7 +14001,7 @@ packages:
       cac: 6.7.14
       debug: 4.3.4
       mlly: 1.4.2
-      pathe: 1.1.1
+      pathe: 1.1.2
       picocolors: 1.0.0
       vite: 4.5.0(@types/node@20.8.8)
     transitivePeerDependencies:
@@ -14273,7 +14272,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.24(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.2.2):
+  /vitepress@1.0.0-rc.24(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
     resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
     hasBin: true
     peerDependencies:
@@ -14298,7 +14297,7 @@ packages:
       postcss: 8.4.33
       shiki: 0.14.5
       vite: 4.5.0(@types/node@20.8.10)
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -14373,7 +14372,7 @@ packages:
       debug: 4.3.4
       local-pkg: 0.4.3
       magic-string: 0.30.5
-      pathe: 1.1.1
+      pathe: 1.1.2
       picocolors: 1.0.0
       std-env: 3.4.3
       strip-literal: 1.3.0
@@ -14439,7 +14438,7 @@ packages:
       debug: 4.3.4
       local-pkg: 0.4.3
       magic-string: 0.30.5
-      pathe: 1.1.1
+      pathe: 1.1.2
       picocolors: 1.0.0
       std-env: 3.4.3
       strip-literal: 1.3.0
@@ -14532,7 +14531,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -14588,7 +14587,7 @@ packages:
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /vue-template-compiler@2.7.14:
@@ -14598,16 +14597,16 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.27(typescript@5.2.2):
+  /vue-tsc@1.8.27(typescript@5.3.3):
     resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.27(typescript@5.2.2)
+      '@vue/language-core': 1.8.27(typescript@5.3.3)
       semver: 7.5.4
-      typescript: 5.2.2
+      typescript: 5.3.3
     dev: true
 
   /vue-wrap-balancer@1.1.3(vue@3.4.8):
@@ -14616,7 +14615,7 @@ packages:
       vue: ^3.3.0
     dependencies:
       nanoid: 3.3.6
-      vue: 3.4.8(typescript@5.2.2)
+      vue: 3.4.8(typescript@5.3.3)
     dev: false
 
   /vue@3.4.8(typescript@5.2.2):
@@ -14648,7 +14647,6 @@ packages:
       '@vue/server-renderer': 3.4.8(vue@3.4.8)
       '@vue/shared': 3.4.8
       typescript: 5.3.3
-    dev: true
 
   /walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}