From f5369b59588dd3aa970fe8dae2210a152dfbe755 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 15:09:45 +0530
Subject: [PATCH 01/26] feat: create new carousel component with
 embala-carousel

---
 apps/www/package.json                         |  1 +
 .../registry/default/ui/carousel/Carousel.vue | 39 ++++++++++++++
 .../default/ui/carousel/CarouselContent.vue   | 21 ++++++++
 .../default/ui/carousel/CarouselItem.vue      | 20 +++++++
 .../default/ui/carousel/CarouselNext.vue      | 25 +++++++++
 .../default/ui/carousel/CarouselPrevious.vue  | 25 +++++++++
 .../lib/registry/default/ui/carousel/index.ts | 10 ++++
 .../registry/default/ui/carousel/interface.ts | 10 ++++
 .../default/ui/carousel/useCarousel.ts        | 54 +++++++++++++++++++
 pnpm-lock.yaml                                | 25 +++++++++
 10 files changed, 230 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/index.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/interface.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts

diff --git a/apps/www/package.json b/apps/www/package.json
index 4d799b547..34efd414c 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -27,6 +27,7 @@
     "clsx": "^2.0.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
+    "embla-carousel-vue": "8.0.0-rc17",
     "lucide-vue-next": "^0.276.0",
     "radix-vue": "^1.2.5",
     "tailwindcss-animate": "^1.0.7",
diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
new file mode 100644
index 000000000..56be52815
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
+import { useProvideCarousel } from './useCarousel'
+import type { CarouselProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<CarouselProps>(), {
+  orientation: 'horizontal',
+})
+
+const forwarded = useForwardPropsEmits(props)
+
+const { scrollNext, scrollPrev } = useProvideCarousel(props)
+
+function onKeyDown(event: KeyboardEvent) {
+  event.preventDefault()
+
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey)
+    scrollPrev()
+
+  else if (event.key === nextKey)
+    scrollNext()
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', $attrs.class ?? '')"
+    role="region"
+    aria-roledescription="carousel"
+    v-bind="forwarded"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
new file mode 100644
index 000000000..7d1414302
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          $attrs.class ?? '',
+        )"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
new file mode 100644
index 000000000..5ff44c574
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+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',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
new file mode 100644
index 000000000..ec03059a2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+
+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',
+      $attrs.class ?? '',
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <ChevronRightIcon class="h-4 w-4 text-white stroke-white" />
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 000000000..7a335f615
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+
+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',
+      $attrs.class ?? '',
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <ChevronLeftIcon class="h-4 w-4 text-white" />
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/src/lib/registry/default/ui/carousel/index.ts
new file mode 100644
index 000000000..339a2e6ea
--- /dev/null
+++ b/apps/www/src/lib/registry/default/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-vue'
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
new file mode 100644
index 000000000..328d90a57
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -0,0 +1,10 @@
+import {
+  type EmblaOptionsType as CarouselOptions,
+  type EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel-vue'
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  orientation?: 'horizontal' | 'vertical'
+}
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
new file mode 100644
index 000000000..84a2e1e95
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
@@ -0,0 +1,54 @@
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue, {
+  type EmblaCarouselType as CarouselApi,
+} from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+import type { CarouselProps } from './interface'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts, orientation, plugins,
+  }: CarouselProps) => {
+    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)
+    })
+
+    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 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4c910f45..30745cecc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      embla-carousel-vue:
+        specifier: 8.0.0-rc17
+        version: 8.0.0-rc17(vue@3.3.7)
       lucide-vue-next:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.3.7)
@@ -6895,6 +6898,28 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
+  /embla-carousel-reactive-utils@8.0.0-rc17(embla-carousel@8.0.0-rc17):
+    resolution: {integrity: sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==}
+    peerDependencies:
+      embla-carousel: 8.0.0-rc17
+    dependencies:
+      embla-carousel: 8.0.0-rc17
+    dev: false
+
+  /embla-carousel-vue@8.0.0-rc17(vue@3.3.7):
+    resolution: {integrity: sha512-+LHBImxj5Z8OhQHuBxbLhBNZ9cyS1UvXpCbPwlYvUllZ5XbzN08eFNiG7aBnOzxx2WzX2mc6tFzToN+HbO3QPg==}
+    peerDependencies:
+      vue: ^3.2.37
+    dependencies:
+      embla-carousel: 8.0.0-rc17
+      embla-carousel-reactive-utils: 8.0.0-rc17(embla-carousel@8.0.0-rc17)
+      vue: 3.3.7(typescript@5.2.2)
+    dev: false
+
+  /embla-carousel@8.0.0-rc17:
+    resolution: {integrity: sha512-evF49b88VOitvqFtlvhvKVSu96Y8A+QSFdhok87Bfm8R7OYuk95FT+o8+M1GQLi/EhGDUlT193HTVAR0Wt2neQ==}
+    dev: false
+
   /emoji-regex@10.2.1:
     resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
     dev: false

From 38e8a8eaf0c5e3647367a938e84c8a26a9da5ffd Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 15:12:29 +0530
Subject: [PATCH 02/26] feat: create demos for the carousel component

---
 apps/www/__registry__/index.ts                | 14 +++++++++
 .../registry/default/example/CarouselDemo.vue | 24 +++++++++++++++
 .../default/example/CarouselOrientation.vue   | 30 +++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselOrientation.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index b24d3aded..9dadf6175 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -184,6 +184,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardWithForm.vue'],
     },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
diff --git a/apps/www/src/lib/registry/default/example/CarouselDemo.vue b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
new file mode 100644
index 000000000..1fa4f1a33
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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">
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
new file mode 100644
index 000000000..7d19c06ef
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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"
+      :opts="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent class="-mt-1 h-[200px]">
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex items-center justify-center p-6">
+                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>

From 34ca4e34d83aa677c38b580b43cd05d8bf560e0e Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 15:13:10 +0530
Subject: [PATCH 03/26] feat: add the default carousel component to the docs

---
 .../src/content/docs/components/carousel.md   | 61 +++++++++++++++++++
 apps/www/src/public/registry/index.json       | 16 +++++
 2 files changed, 77 insertions(+)
 create mode 100644 apps/www/src/content/docs/components/carousel.md

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
new file mode 100644
index 000000000..40ef113b9
--- /dev/null
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -0,0 +1,61 @@
+---
+title: Carousel
+description: A carousel with motion and swipe built using Embla.
+source: apps/www/src/lib/registry/default/ui/carousel 
+primitive: https://www.embla-carousel.com/api
+---
+
+
+<ComponentPreview name="CarouselDemo"  /> 
+
+
+## About
+
+The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
+
+## Installation
+ 
+
+```bash
+npx shadcn-vue@latest add carousel
+``` 
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel'
+</script>
+
+<template>
+  <Carousel>
+    <CarouselContent>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+</template>
+```
+
+## Examples
+
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="CarouselOrientation" />
+
+```vue
+<Carousel orientation="vertical | horizontal">
+  ...
+</Carousel>
+```
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index ac75677fb..03efdce17 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -130,6 +130,22 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "carousel",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/carousel/Carousel.vue",
+      "ui/carousel/CarouselContent.vue",
+      "ui/carousel/CarouselItem.vue",
+      "ui/carousel/CarouselNext.vue",
+      "ui/carousel/CarouselPrev.vue",
+      "ui/carousel/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "checkbox",
     "dependencies": [],

From 963217bfa4be4ca2e0ddd320ea5637e9f5ad2664 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 16:25:43 +0530
Subject: [PATCH 04/26] feat: add new-york styling for carousels

---
 apps/www/__registry__/index.ts                | 14 +++++
 .../default/ui/carousel/CarouselNext.vue      |  4 +-
 .../default/ui/carousel/CarouselPrevious.vue  |  4 +-
 .../new-york/example/CarouselDemo.vue         | 24 +++++++++
 .../new-york/example/CarouselOrientation.vue  | 30 +++++++++++
 .../new-york/ui/carousel/Carousel.vue         | 39 ++++++++++++++
 .../new-york/ui/carousel/CarouselContent.vue  | 21 ++++++++
 .../new-york/ui/carousel/CarouselItem.vue     | 20 +++++++
 .../new-york/ui/carousel/CarouselNext.vue     | 25 +++++++++
 .../new-york/ui/carousel/CarouselPrevious.vue | 25 +++++++++
 .../registry/new-york/ui/carousel/index.ts    | 10 ++++
 .../new-york/ui/carousel/interface.ts         | 10 ++++
 .../new-york/ui/carousel/useCarousel.ts       | 54 +++++++++++++++++++
 13 files changed, 276 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 9dadf6175..ae2bf3737 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -991,6 +991,20 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CardWithForm.vue'],
     },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index ec03059a2..2c4c34b7d 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
@@ -20,6 +20,6 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     variant="outline"
     @click="scrollNext"
   >
-    <ChevronRightIcon class="h-4 w-4 text-white stroke-white" />
+    <ChevronRight class="h-4 w-4 text-white stroke-white" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 7a335f615..0e99d96b5 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
@@ -20,6 +20,6 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     variant="outline"
     @click="scrollPrev"
   >
-    <ChevronLeftIcon class="h-4 w-4 text-white" />
+    <ChevronLeft class="h-4 w-4 text-white" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
new file mode 100644
index 000000000..0b33bc755
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+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">
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
new file mode 100644
index 000000000..ab1cc66a7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+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"
+      :opts="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent class="-mt-1 h-[200px]">
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex items-center justify-center p-6">
+                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
new file mode 100644
index 000000000..56be52815
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
+import { useProvideCarousel } from './useCarousel'
+import type { CarouselProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<CarouselProps>(), {
+  orientation: 'horizontal',
+})
+
+const forwarded = useForwardPropsEmits(props)
+
+const { scrollNext, scrollPrev } = useProvideCarousel(props)
+
+function onKeyDown(event: KeyboardEvent) {
+  event.preventDefault()
+
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey)
+    scrollPrev()
+
+  else if (event.key === nextKey)
+    scrollNext()
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', $attrs.class ?? '')"
+    role="region"
+    aria-roledescription="carousel"
+    v-bind="forwarded"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
new file mode 100644
index 000000000..7d1414302
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          $attrs.class ?? '',
+        )"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
new file mode 100644
index 000000000..5ff44c574
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+
+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',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
new file mode 100644
index 000000000..37ca9f247
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+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',
+      $attrs.class ?? '',
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <ChevronRightIcon class="h-4 w-4 text-white stroke-white" />
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 000000000..91c8389b9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { useCarousel } from './useCarousel'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+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',
+      $attrs.class ?? '',
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <ChevronLeftIcon class="h-4 w-4 text-white" />
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
new file mode 100644
index 000000000..339a2e6ea
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/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-vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
new file mode 100644
index 000000000..328d90a57
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -0,0 +1,10 @@
+import {
+  type EmblaOptionsType as CarouselOptions,
+  type EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel-vue'
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  orientation?: 'horizontal' | 'vertical'
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
new file mode 100644
index 000000000..84a2e1e95
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
@@ -0,0 +1,54 @@
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue, {
+  type EmblaCarouselType as CarouselApi,
+} from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+import type { CarouselProps } from './interface'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts, orientation, plugins,
+  }: CarouselProps) => {
+    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)
+    })
+
+    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 }

From 9f860844a02cb27c40efc6dbebe7538e91731888 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 17:54:18 +0530
Subject: [PATCH 05/26] feat: add more examples for spacing, size and options

---
 apps/www/__registry__/index.ts                |  28 +++++
 .../src/content/docs/components/carousel.md   | 113 ++++++++++++++++++
 .../registry/default/example/CarouselSize.vue |  29 +++++
 .../default/example/CarouselSpacing.vue       |  29 +++++
 .../new-york/example/CarouselSize.vue         |  29 +++++
 .../new-york/example/CarouselSpacing.vue      |  29 +++++
 6 files changed, 257 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselSize.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselSpacing.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselSize.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index ae2bf3737..e53557cba 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -198,6 +198,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
     },
+    CarouselSize: {
+      name: 'CarouselSize',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselSize.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselSize.vue'],
+    },
+    CarouselSpacing: {
+      name: 'CarouselSpacing',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselSpacing.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
@@ -1005,6 +1019,20 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
     },
+    CarouselSize: {
+      name: 'CarouselSize',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselSize.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselSize.vue'],
+    },
+    CarouselSpacing: {
+      name: 'CarouselSpacing',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselSpacing.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 40ef113b9..73bfdeaa4 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -59,3 +59,116 @@ Use the `orientation` prop to set the orientation of the carousel.
   ...
 </Carousel>
 ```
+
+### Sizes
+
+To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
+
+<ComponentPreview name="CarouselSize" />
+
+
+Example
+
+```vue title="Example" showLineNumbers {4-6}
+// 33% of the carousel width.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem class="basis-1/3">...</CarouselItem>
+    <CarouselItem class="basis-1/3">...</CarouselItem>
+    <CarouselItem class="basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+
+Responsive
+
+```vue title="Responsive" showLineNumbers {4-6}
+// 50% on small screens and 33% on larger screens.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+### Spacing
+
+To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<CarouselItem />` and a negative `-ml-[VALUE]` on the `<CarouselContent />`.
+
+<Callout class="mt-6">
+
+**Why:** I tried to use the `gap` property or a `grid` layout on the `
+CarouselContent` but it required a lot of math and mental effort to get the
+spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
+use.
+<br/><br/>
+You can always adjust this in your own project if you need to.
+
+</Callout>
+
+<ComponentPreview name="CarouselSpacing" />
+
+Example
+
+```vue showLineNumbers /-ml-4/ /pl-4/
+<template>
+  <Carousel>
+    <CarouselContent class="-ml-4">
+      <CarouselItem class="pl-4">
+        ...
+      </CarouselItem>
+      <CarouselItem class="pl-4">
+        ...
+      </CarouselItem>
+      <CarouselItem class="pl-4">
+        ...
+      </CarouselItem>
+    </CarouselContent>
+  </Carousel>
+</template>
+```
+
+Responsive
+
+```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+<template>
+  <Carousel>
+    <CarouselContent class="-ml-2 md:-ml-4">
+      <CarouselItem class="pl-2 md:pl-4">
+        ...
+      </CarouselItem>
+      <CarouselItem class="pl-2 md:pl-4">
+        ...
+      </CarouselItem>
+      <CarouselItem class="pl-2 md:pl-4">
+        ...
+      </CarouselItem>
+    </CarouselContent>
+  </Carousel>
+</template>
+```
+
+
+## Options
+
+You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
+
+```vue showLineNumbers {3-6}
+<template>
+  <Carousel
+    :opts="{
+      align: 'start',
+      loop: true,
+    }"
+  >
+    <CarouselContent>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+    </CarouselContent>
+  </Carousel>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/example/CarouselSize.vue b/apps/www/src/lib/registry/default/example/CarouselSize.vue
new file mode 100644
index 000000000..127267848
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselSize.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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"
+      :opts="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
new file mode 100644
index 000000000..6d8ee4039
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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"
+      :opts="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent class="-ml-1">
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
new file mode 100644
index 000000000..596027743
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+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"
+      :opts="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
new file mode 100644
index 000000000..d7675c997
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+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="{
+        align: 'start',
+      }"
+    >
+      <CarouselContent class="-ml-1">
+        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>

From a09acece3ffc28cf9a05be4a87e2a8478d37b721 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 21:55:15 +0530
Subject: [PATCH 06/26] refactor: change ways to better pass the data to parent

---
 .../lib/registry/default/ui/carousel/Carousel.vue   | 13 +++++++------
 .../lib/registry/default/ui/carousel/interface.ts   | 11 ++++++++---
 .../lib/registry/default/ui/carousel/useCarousel.ts |  6 ++++--
 .../lib/registry/new-york/ui/carousel/Carousel.vue  | 13 +++++++------
 .../lib/registry/new-york/ui/carousel/interface.ts  | 11 ++++++++---
 .../registry/new-york/ui/carousel/useCarousel.ts    |  6 ++++--
 6 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index 56be52815..f83cc530d 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<CarouselProps>(), {
   orientation: 'horizontal',
 })
 
-const forwarded = useForwardPropsEmits(props)
+const emits = defineEmits<CarouselEmits>()
 
-const { scrollNext, scrollPrev } = useProvideCarousel(props)
+const forwarded = useForwardPropsEmits(props)
+const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
   event.preventDefault()
@@ -19,10 +20,10 @@ function onKeyDown(event: KeyboardEvent) {
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
   if (event.key === prevKey)
-    scrollPrev()
+    carouselArgs.scrollPrev()
 
   else if (event.key === nextKey)
-    scrollNext()
+    carouselArgs.scrollNext()
 }
 </script>
 
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
     v-bind="forwarded"
     @keydown="onKeyDown"
   >
-    <slot />
+    <slot v-bind="carouselArgs" />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 328d90a57..9b2281ff0 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -1,6 +1,7 @@
-import {
-  type EmblaOptionsType as CarouselOptions,
-  type EmblaPluginType as CarouselPlugin,
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel-vue'
 
 export interface CarouselProps {
@@ -8,3 +9,7 @@ export interface CarouselProps {
   plugins?: CarouselPlugin[]
   orientation?: 'horizontal' | 'vertical'
 }
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: CarouselApi): void
+}
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
index 84a2e1e95..643a9fd7e 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
@@ -3,12 +3,12 @@ import emblaCarouselVue, {
   type EmblaCarouselType as CarouselApi,
 } from 'embla-carousel-vue'
 import { onMounted, ref } from 'vue'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
   ({
     opts, orientation, plugins,
-  }: CarouselProps) => {
+  }: CarouselProps, emits: CarouselEmits) => {
     const [emblaNode, emblaApi] = emblaCarouselVue({
       ...opts,
       axis: orientation === 'horizontal' ? 'x' : 'y',
@@ -36,6 +36,8 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
       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 }
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index 56be52815..f83cc530d 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<CarouselProps>(), {
   orientation: 'horizontal',
 })
 
-const forwarded = useForwardPropsEmits(props)
+const emits = defineEmits<CarouselEmits>()
 
-const { scrollNext, scrollPrev } = useProvideCarousel(props)
+const forwarded = useForwardPropsEmits(props)
+const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
   event.preventDefault()
@@ -19,10 +20,10 @@ function onKeyDown(event: KeyboardEvent) {
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
   if (event.key === prevKey)
-    scrollPrev()
+    carouselArgs.scrollPrev()
 
   else if (event.key === nextKey)
-    scrollNext()
+    carouselArgs.scrollNext()
 }
 </script>
 
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
     v-bind="forwarded"
     @keydown="onKeyDown"
   >
-    <slot />
+    <slot v-bind="carouselArgs" />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 328d90a57..9b2281ff0 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -1,6 +1,7 @@
-import {
-  type EmblaOptionsType as CarouselOptions,
-  type EmblaPluginType as CarouselPlugin,
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel-vue'
 
 export interface CarouselProps {
@@ -8,3 +9,7 @@ export interface CarouselProps {
   plugins?: CarouselPlugin[]
   orientation?: 'horizontal' | 'vertical'
 }
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: CarouselApi): void
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
index 84a2e1e95..643a9fd7e 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
@@ -3,12 +3,12 @@ import emblaCarouselVue, {
   type EmblaCarouselType as CarouselApi,
 } from 'embla-carousel-vue'
 import { onMounted, ref } from 'vue'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
   ({
     opts, orientation, plugins,
-  }: CarouselProps) => {
+  }: CarouselProps, emits: CarouselEmits) => {
     const [emblaNode, emblaApi] = emblaCarouselVue({
       ...opts,
       axis: orientation === 'horizontal' ? 'x' : 'y',
@@ -36,6 +36,8 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
       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 }

From 43daeb3c879f08fcfa0113f0b4ebe4aff2b0a447 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 21:55:44 +0530
Subject: [PATCH 07/26] feat: add examples for carousel api handling

---
 apps/www/__registry__/index.ts                | 14 +++++
 .../src/content/docs/components/carousel.md   | 45 +++++++++++++++-
 .../registry/default/example/CarouselApi.vue  | 51 +++++++++++++++++++
 .../registry/new-york/example/CarouselApi.vue | 51 +++++++++++++++++++
 4 files changed, 160 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselApi.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselApi.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index e53557cba..be7d57fc9 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -184,6 +184,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardWithForm.vue'],
     },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselApi.vue'],
+    },
     CarouselDemo: {
       name: 'CarouselDemo',
       type: 'components:example',
@@ -1005,6 +1012,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CardWithForm.vue'],
     },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselApi.vue'],
+    },
     CarouselDemo: {
       name: 'CarouselDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 73bfdeaa4..d32afe9c1 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -171,4 +171,47 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
     </CarouselContent>
   </Carousel>
 </template>
-```
\ No newline at end of file
+```
+
+## API
+
+Use the `useCarousel` hook to get the instance of the API.
+
+<ComponentPreview name="CarouselApi" />
+
+## Events
+
+You can listen to events using the api instance from `useCarousel()`.
+
+```vue
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { useCarousel } from '@/components/ui/carousel'
+
+const api = ref<CarouselApi>()
+
+function setApi(val: CarouselApi) {
+  api.value = val
+}
+
+const stop = watch(api, (api) => {
+  if (!api)
+    return
+
+  // Watch only once or use watchOnce() in @vueuse/core
+  nextTick(() => stop())
+
+  api.on('select', () => {
+    // Do something on select.
+  })
+})
+</script>
+
+<template>
+  <Carousel @init-api="setApi">
+    ...
+  </Carousel>
+</template>
+```
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/src/lib/registry/default/example/CarouselApi.vue
new file mode 100644
index 000000000..0b25dc948
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselApi.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import type { CarouselApi } from '@/lib/registry/default/ui/carousel'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+const api = ref<CarouselApi>()
+const totalCount = ref(0)
+const current = ref(0)
+
+function setApi(val: CarouselApi) {
+  api.value = val
+}
+
+watchOnce(api, (api) => {
+  if (!api)
+    return
+
+  totalCount.value = api.scrollSnapList().length
+  current.value = api.selectedScrollSnap() + 1
+
+  api.on('select', () => {
+    current.value = api.selectedScrollSnap() + 1
+  })
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center space-x-2">
+    <Carousel class="w-full max-w-xs" @init-api="setApi">
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+
+    <div class="py-2 text-center text-sm text-muted-foreground">
+      Slide {{ current }} of {{ totalCount }}
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
new file mode 100644
index 000000000..cf3d838d8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import type { CarouselApi } from '@/lib/registry/new-york/ui/carousel'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
+
+const api = ref<CarouselApi>()
+const totalCount = ref(0)
+const current = ref(0)
+
+function setApi(val: CarouselApi) {
+  api.value = val
+}
+
+watchOnce(api, (api) => {
+  if (!api)
+    return
+
+  totalCount.value = api.scrollSnapList().length
+  current.value = api.selectedScrollSnap() + 1
+
+  api.on('select', () => {
+    current.value = api.selectedScrollSnap() + 1
+  })
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center space-x-2">
+    <Carousel class="w-full max-w-xs" @init-api="setApi">
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+
+    <div class="py-2 text-center text-sm text-muted-foreground">
+      Slide {{ current }} of {{ totalCount }}
+    </div>
+  </div>
+</template>

From 6ded40c5a9869c66dd526feaad2a7f2b3547a467 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 22:38:36 +0530
Subject: [PATCH 08/26] feat: add example for using embla plugin

---
 apps/www/__registry__/index.ts                | 14 +++++++
 apps/www/package.json                         |  1 +
 .../src/content/docs/components/carousel.md   | 27 +++++++++++++-
 .../default/example/CarouselPlugin.vue        | 37 +++++++++++++++++++
 .../new-york/example/CarouselPlugin.vue       | 37 +++++++++++++++++++
 pnpm-lock.yaml                                | 11 ++++++
 6 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselPlugin.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index be7d57fc9..1de2e1eff 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -205,6 +205,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
     },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselPlugin.vue'],
+    },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',
@@ -1033,6 +1040,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
     },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselPlugin.vue'],
+    },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',
diff --git a/apps/www/package.json b/apps/www/package.json
index 34efd414c..e829dd5f6 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -27,6 +27,7 @@
     "clsx": "^2.0.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
+    "embla-carousel-autoplay": "8.0.0-rc17",
     "embla-carousel-vue": "8.0.0-rc17",
     "lucide-vue-next": "^0.276.0",
     "radix-vue": "^1.2.5",
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index d32afe9c1..c2d724f4f 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -214,4 +214,29 @@ const stop = watch(api, (api) => {
 </template>
 ```
 
-See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
\ No newline at end of file
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```vue showLineNumbers {2,8-10}
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+</script>
+
+<template>
+  <Carousel
+    class="w-full max-w-xs"
+    :plugins="[Autoplay({
+      delay: 2000,
+    })]"
+  >
+    ...
+  </Carousel>
+</template>
+```
+
+<ComponentPreview name="CarouselPlugin" />
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
new file mode 100644
index 000000000..a95e4be19
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+import { ref } from 'vue'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+const plugin = ref(Autoplay({
+  delay: 2000,
+  stopOnMouseEnter: true,
+  stopOnInteraction: false,
+}))
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Carousel
+      class="w-full max-w-xs"
+      :plugins="[plugin]"
+      @mouseenter="plugin.stop"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
new file mode 100644
index 000000000..80c719206
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+import { ref } from 'vue'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
+
+const plugin = ref(Autoplay({
+  delay: 2000,
+  stopOnMouseEnter: true,
+  stopOnInteraction: false,
+}))
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Carousel
+      class="w-full max-w-xs"
+      :plugins="[plugin]"
+      @mouseenter="plugin.stop"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30745cecc..a658eda47 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      embla-carousel-autoplay:
+        specifier: 8.0.0-rc17
+        version: 8.0.0-rc17(embla-carousel@8.0.0-rc17)
       embla-carousel-vue:
         specifier: 8.0.0-rc17
         version: 8.0.0-rc17(vue@3.3.7)
@@ -6898,6 +6901,14 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
+  /embla-carousel-autoplay@8.0.0-rc17(embla-carousel@8.0.0-rc17):
+    resolution: {integrity: sha512-U8YweUZg2DJd3IXxTV3UsjFyJEsQuCHOBRyJxoJZ8r1L/SYbYnk7BbknH6N0yfgzeMn6pL27RPEf0vIz+JtFYw==}
+    peerDependencies:
+      embla-carousel: 8.0.0-rc17
+    dependencies:
+      embla-carousel: 8.0.0-rc17
+    dev: false
+
   /embla-carousel-reactive-utils@8.0.0-rc17(embla-carousel@8.0.0-rc17):
     resolution: {integrity: sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==}
     peerDependencies:

From 0ec5604b3164fa59fd2d6a639d2714a9124f988a Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 22:52:15 +0530
Subject: [PATCH 09/26] chore: add carousel component doc to the table of
 contents

---
 apps/www/.vitepress/theme/config/docs.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 52cddca37..b7f61e4eb 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -168,6 +168,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/card',
           items: [],
         },
+        {
+          title: 'Carousel',
+          href: '/docs/components/carousel',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Checkbox',
           href: '/docs/components/checkbox',

From b39ba5127b374a61773c1ea4e05d71696fbb3c51 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 14:33:01 +0530
Subject: [PATCH 10/26] feat: add focusability on carousel element

---
 .../registry/default/ui/carousel/Carousel.vue    | 16 +++++++++-------
 .../registry/new-york/ui/carousel/Carousel.vue   | 16 +++++++++-------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index f83cc530d..492a007af 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -10,20 +9,23 @@ const props = withDefaults(defineProps<CarouselProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const forwarded = useForwardPropsEmits(props)
 const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
-  event.preventDefault()
-
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
-  if (event.key === prevKey)
+  if (event.key === prevKey) {
+    event.preventDefault()
     carouselArgs.scrollPrev()
 
-  else if (event.key === nextKey)
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
     carouselArgs.scrollNext()
+  }
 }
 </script>
 
@@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
     :class="cn('relative', $attrs.class ?? '')"
     role="region"
     aria-roledescription="carousel"
-    v-bind="forwarded"
+    tabindex="0"
     @keydown="onKeyDown"
   >
     <slot v-bind="carouselArgs" />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index f83cc530d..492a007af 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -10,20 +9,23 @@ const props = withDefaults(defineProps<CarouselProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const forwarded = useForwardPropsEmits(props)
 const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
-  event.preventDefault()
-
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
-  if (event.key === prevKey)
+  if (event.key === prevKey) {
+    event.preventDefault()
     carouselArgs.scrollPrev()
 
-  else if (event.key === nextKey)
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
     carouselArgs.scrollNext()
+  }
 }
 </script>
 
@@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
     :class="cn('relative', $attrs.class ?? '')"
     role="region"
     aria-roledescription="carousel"
-    v-bind="forwarded"
+    tabindex="0"
     @keydown="onKeyDown"
   >
     <slot v-bind="carouselArgs" />

From 86da196930f6655b38607ffd5d7f6193968f05ab Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 14:42:58 +0530
Subject: [PATCH 11/26] fix: update docs

---
 apps/www/src/content/docs/components/carousel.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index c2d724f4f..6cba268c0 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -175,15 +175,15 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 ## API
 
-Use the `useCarousel` hook to get the instance of the API.
+Use the `@init-api` emit method on `<Carousel />` component to set the instance of the API.
 
 <ComponentPreview name="CarouselApi" />
 
 ## Events
 
-You can listen to events using the api instance from `useCarousel()`.
+You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<Carousel />` component
 
-```vue
+```vue showLineNumbers {5,7-9,25}
 <script setup>
 import { nextTick, ref, watch } from 'vue'
 import { useCarousel } from '@/components/ui/carousel'

From 9f31e86f3137deec34488ce4a9fc100401b92f95 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 14:53:42 +0530
Subject: [PATCH 12/26] chore: add docs for slot props

---
 apps/www/src/content/docs/components/carousel.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 6cba268c0..679b21e9c 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -216,6 +216,20 @@ const stop = watch(api, (api) => {
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
 
+## Slot Props
+
+You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `<Carousel v-slot="slotProps" />` component to extend the functionality.
+
+```vue showLineNumbers {2}
+<template>
+  <Carousel v-slot="{ canScrollNext, canScrollPrev }">
+    ...
+    <CarouselPrevious v-if="canScrollPrev" />
+    <CarouselNext v-if="canScrollNext" />
+  </Carousel>
+</template>
+```
+
 ## Plugins
 
 You can use the `plugins` prop to add plugins to the carousel.

From f3d4992b8f43332b4fca01ad5e3f153de6f106dd Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 15:35:28 +0530
Subject: [PATCH 13/26] feat: expose api for the parent component

---
 .../src/content/docs/components/carousel.md   | 22 +++++++++++++++++++
 .../registry/default/ui/carousel/Carousel.vue |  2 ++
 .../new-york/ui/carousel/Carousel.vue         |  2 ++
 3 files changed, 26 insertions(+)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 679b21e9c..83dc12c20 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -175,10 +175,32 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 ## API
 
+### Method 1
+
 Use the `@init-api` emit method on `<Carousel />` component to set the instance of the API.
 
 <ComponentPreview name="CarouselApi" />
 
+### Method 2
+
+You can access it through setting a template ref on the `<Carousel />` component.
+
+```vue showLineNumbers {2,5,9}
+<script setup>
+const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
+
+function accessApi() {
+  carouselContainerRef.value?.carouselApi.on('select', () => {})
+}
+</script>
+
+<template>
+  <Carousel ref="carouselContainerRef">
+    ...
+  </Carousel>
+</template>
+```
+
 ## Events
 
 You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<Carousel />` component
diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index 492a007af..969ae9693 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -11,6 +11,8 @@ 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'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index 492a007af..969ae9693 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -11,6 +11,8 @@ 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'

From 5a03b2fd1b1324845c58bf5436c676935292fb8e Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 15:35:58 +0530
Subject: [PATCH 14/26] chore: include missing filenames

---
 apps/www/src/public/registry/index.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 03efdce17..7534b79db 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -142,7 +142,9 @@
       "ui/carousel/CarouselItem.vue",
       "ui/carousel/CarouselNext.vue",
       "ui/carousel/CarouselPrev.vue",
-      "ui/carousel/index.ts"
+      "ui/carousel/index.ts",
+      "ui/carousel/interface.ts",
+      "ui/carousel/useCarousel.ts"
     ],
     "type": "components:ui"
   },

From 331ff889aa0553771912d43bde8ab52323d68297 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 6 Jan 2024 22:37:32 +0530
Subject: [PATCH 15/26] chore: update embla carousel dependency versions

---
 apps/www/package.json |   4 +-
 pnpm-lock.yaml        | 611 ++++++++++++++++++++++++++++++++----------
 2 files changed, 465 insertions(+), 150 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index e829dd5f6..3543e4494 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -27,8 +27,8 @@
     "clsx": "^2.0.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
-    "embla-carousel-autoplay": "8.0.0-rc17",
-    "embla-carousel-vue": "8.0.0-rc17",
+    "embla-carousel-autoplay": "8.0.0-rc18",
+    "embla-carousel-vue": "8.0.0-rc18",
     "lucide-vue-next": "^0.276.0",
     "radix-vue": "^1.2.5",
     "tailwindcss-animate": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a658eda47..bfb2f3fc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,11 +84,11 @@ importers:
         specifier: ^2.30.0
         version: 2.30.0
       embla-carousel-autoplay:
-        specifier: 8.0.0-rc17
-        version: 8.0.0-rc17(embla-carousel@8.0.0-rc17)
+        specifier: 8.0.0-rc18
+        version: 8.0.0-rc18(embla-carousel@8.0.0-rc18)
       embla-carousel-vue:
-        specifier: 8.0.0-rc17
-        version: 8.0.0-rc17(vue@3.3.7)
+        specifier: 8.0.0-rc18
+        version: 8.0.0-rc18(vue@3.3.7)
       lucide-vue-next:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.3.7)
@@ -149,7 +149,7 @@ importers:
         version: 0.4.0
       autoprefixer:
         specifier: ^10.4.16
-        version: 10.4.16(postcss@8.4.31)
+        version: 10.4.16(postcss@8.4.33)
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
@@ -179,7 +179,7 @@ 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.20.0)(@types/node@20.8.10)(postcss@8.4.31)(search-insights@2.8.3)(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.2.2)
       vue-tsc:
         specifier: ^1.8.25
         version: 1.8.25(typescript@5.2.2)
@@ -242,7 +242,7 @@ importers:
         version: 2.4.2
       radix-vue:
         specifier: ^1.2.3
-        version: 1.2.3(vue@3.3.9)
+        version: 1.2.3(vue@3.4.5)
       recast:
         specifier: ^0.23.4
         version: 0.23.4
@@ -304,25 +304,25 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: latest
-        version: 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.0)
+        version: 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.1)
       '@nuxt/eslint-config':
         specifier: ^0.2.0
-        version: 0.2.0(eslint@8.54.0)
+        version: 0.2.0(eslint@8.56.0)
       '@nuxt/module-builder':
         specifier: ^0.5.4
-        version: 0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.2.2)
+        version: 0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.3.3)
       '@nuxt/schema':
         specifier: ^3.8.2
         version: 3.8.2(rollup@3.29.3)
       '@nuxt/test-utils':
         specifier: ^3.8.1
-        version: 3.8.1(rollup@3.29.3)(vitest@0.33.0)(vue@3.3.9)
+        version: 3.8.1(rollup@3.29.3)(vitest@0.33.0)(vue@3.4.5)
       '@types/node':
         specifier: ^20.9.3
         version: 20.10.1
       nuxt:
         specifier: ^3.8.2
-        version: 3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vite@4.5.0)
+        version: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vite@4.5.1)
       vitest:
         specifier: ^0.33.0
         version: 0.33.0
@@ -334,47 +334,47 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.3):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.3)
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.3):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
-      search-insights: 2.8.3
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
+      search-insights: 2.13.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
+  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0):
     resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
-      '@algolia/client-search': 4.20.0
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
+      '@algolia/client-search': 4.22.0
       algoliasearch: 4.20.0
     dev: true
 
-  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
+  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0):
     resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/client-search': 4.20.0
+      '@algolia/client-search': 4.22.0
       algoliasearch: 4.20.0
     dev: true
 
@@ -388,6 +388,10 @@ packages:
     resolution: {integrity: sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==}
     dev: true
 
+  /@algolia/cache-common@4.22.0:
+    resolution: {integrity: sha512-TPwUMlIGPN16eW67qamNQUmxNiGHg/WBqWcrOoCddhqNTqGDPVqmgfaM85LPbt24t3r1z0zEz/tdsmuq3Q6oaA==}
+    dev: true
+
   /@algolia/cache-in-memory@4.20.0:
     resolution: {integrity: sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==}
     dependencies:
@@ -418,6 +422,13 @@ packages:
       '@algolia/transporter': 4.20.0
     dev: true
 
+  /@algolia/client-common@4.22.0:
+    resolution: {integrity: sha512-BlbkF4qXVWuwTmYxVWvqtatCR3lzXwxx628p1wj1Q7QP2+LsTmGt1DiUYRuy9jG7iMsnlExby6kRMOOlbhv2Ag==}
+    dependencies:
+      '@algolia/requester-common': 4.22.0
+      '@algolia/transporter': 4.22.0
+    dev: true
+
   /@algolia/client-personalization@4.20.0:
     resolution: {integrity: sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==}
     dependencies:
@@ -434,10 +445,22 @@ packages:
       '@algolia/transporter': 4.20.0
     dev: true
 
+  /@algolia/client-search@4.22.0:
+    resolution: {integrity: sha512-bn4qQiIdRPBGCwsNuuqB8rdHhGKKWIij9OqidM1UkQxnSG8yzxHdb7CujM30pvp5EnV7jTqDZRbxacbjYVW20Q==}
+    dependencies:
+      '@algolia/client-common': 4.22.0
+      '@algolia/requester-common': 4.22.0
+      '@algolia/transporter': 4.22.0
+    dev: true
+
   /@algolia/logger-common@4.20.0:
     resolution: {integrity: sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==}
     dev: true
 
+  /@algolia/logger-common@4.22.0:
+    resolution: {integrity: sha512-HMUQTID0ucxNCXs5d1eBJ5q/HuKg8rFVE/vOiLaM4Abfeq1YnTtGV3+rFEhOPWhRQxNDd+YHa4q864IMc0zHpQ==}
+    dev: true
+
   /@algolia/logger-console@4.20.0:
     resolution: {integrity: sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==}
     dependencies:
@@ -454,6 +477,10 @@ packages:
     resolution: {integrity: sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==}
     dev: true
 
+  /@algolia/requester-common@4.22.0:
+    resolution: {integrity: sha512-Y9cEH/cKjIIZgzvI1aI0ARdtR/xRrOR13g5psCxkdhpgRN0Vcorx+zePhmAa4jdQNqexpxtkUdcKYugBzMZJgQ==}
+    dev: true
+
   /@algolia/requester-node-http@4.20.0:
     resolution: {integrity: sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==}
     dependencies:
@@ -468,6 +495,14 @@ packages:
       '@algolia/requester-common': 4.20.0
     dev: true
 
+  /@algolia/transporter@4.22.0:
+    resolution: {integrity: sha512-ieO1k8x2o77GNvOoC+vAkFKppydQSVfbjM3YrSjLmgywiBejPTvU1R1nEvG59JIIUvtSLrZsLGPkd6vL14zopA==}
+    dependencies:
+      '@algolia/cache-common': 4.22.0
+      '@algolia/logger-common': 4.22.0
+      '@algolia/requester-common': 4.22.0
+    dev: true
+
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -896,6 +931,13 @@ packages:
     dependencies:
       '@babel/types': 7.23.5
 
+  /@babel/parser@7.23.6:
+    resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.6
+
   /@babel/plugin-proposal-decorators@7.23.5(@babel/core@7.23.5):
     resolution: {integrity: sha512-6IsY8jOeWibsengGlWIezp7cuZEFzNlAghFpzh9wiZwhQ42/hRcPnY/QV9HJoKTlujupinSlnQPiEy/u2C1ZfQ==}
     engines: {node: '>=6.9.0'}
@@ -1096,6 +1138,14 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  /@babel/types@7.23.6:
+    resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+
   /@cloudflare/kv-asset-handler@0.3.0:
     resolution: {integrity: sha512-9CB/MKf/wdvbfkUdfrj+OkEwZ5b7rws0eogJ4293h+7b6KX5toPwym+VQKmILafNB9YiehqY0DlNrDcDhdWHSQ==}
     dependencies:
@@ -1280,10 +1330,10 @@ packages:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.3):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.3)
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
       preact: 10.17.1
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1293,7 +1343,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.3):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -1310,11 +1360,11 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.3)
-      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
       '@docsearch/css': 3.5.2
       algoliasearch: 4.20.0
-      search-insights: 2.8.3
+      search-insights: 2.13.0
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -2011,16 +2061,21 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.54.0
+      eslint: 8.56.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@eslint-community/regexpp@4.10.0:
+    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
   /@eslint-community/regexpp@4.9.0:
     resolution: {integrity: sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -2043,13 +2098,30 @@ packages:
       - supports-color
     dev: true
 
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@eslint/js@8.53.0:
     resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@eslint/js@8.54.0:
-    resolution: {integrity: sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==}
+  /@eslint/js@8.56.0:
+    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -2085,11 +2157,11 @@ packages:
       - vue
     dev: false
 
-  /@floating-ui/vue@1.0.2(vue@3.3.9):
+  /@floating-ui/vue@1.0.2(vue@3.4.5):
     resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
     dependencies:
       '@floating-ui/dom': 1.5.3
-      vue-demi: 0.14.6(vue@3.3.9)
+      vue-demi: 0.14.6(vue@3.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2473,7 +2545,7 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.0):
+  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.1):
     resolution: {integrity: sha512-AXNeI1dBilNryCmwuTd3lU7CrPBhzUJ5ntTFiXw9MmFwe5QT3NOxDFOv0gX7z1DFnmBEmx5mPKWysCwh7htEnQ==}
     peerDependencies:
       nuxt: ^3.8.1
@@ -2482,8 +2554,8 @@ packages:
       '@nuxt/kit': 3.8.2(rollup@3.29.3)
       '@nuxt/schema': 3.8.2(rollup@3.29.3)
       execa: 7.2.0
-      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vite@4.5.0)
-      vite: 4.5.0(@types/node@20.10.1)
+      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vite@4.5.1)
+      vite: 4.5.1(@types/node@20.10.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2505,7 +2577,7 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@nuxt/devtools@1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.0):
+  /@nuxt/devtools@1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.1):
     resolution: {integrity: sha512-G1Oo9+TaOYzePIXpNX+Zzalw/rJyIZKZpZmXfzolPlOJSA1i0JKzZX6Z7iQHdqPwNJ8t+HnVaF4PghPIpo1kwg==}
     hasBin: true
     peerDependencies:
@@ -2513,7 +2585,7 @@ packages:
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.6
-      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.0)
+      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.1)
       '@nuxt/devtools-wizard': 1.0.4
       '@nuxt/kit': 3.8.2(rollup@3.29.3)
       birpc: 0.2.14
@@ -2532,7 +2604,7 @@ packages:
       local-pkg: 0.5.0
       magicast: 0.3.2
       nitropack: 2.8.1
-      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vite@4.5.0)
+      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vite@4.5.1)
       nypm: 0.3.3
       ofetch: 1.3.3
       ohash: 1.1.3
@@ -2546,9 +2618,9 @@ packages:
       simple-git: 3.21.0
       sirv: 2.0.3
       unimport: 3.6.0(rollup@3.29.3)
-      vite: 4.5.0(@types/node@20.10.1)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.3)(vite@4.5.0)
-      vite-plugin-vue-inspector: 4.0.0(vite@4.5.0)
+      vite: 4.5.1(@types/node@20.10.1)
+      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.3)(vite@4.5.1)
+      vite-plugin-vue-inspector: 4.0.0(vite@4.5.1)
       which: 3.0.1
       ws: 8.14.2
     transitivePeerDependencies:
@@ -2573,16 +2645,16 @@ packages:
       - xml2js
     dev: true
 
-  /@nuxt/eslint-config@0.2.0(eslint@8.54.0):
+  /@nuxt/eslint-config@0.2.0(eslint@8.56.0):
     resolution: {integrity: sha512-NeJX8TLcnNAjQFiDs3XhP+9CHKK8jaKsP7eUyCSrQdgY7nqWe7VJx64lwzx5FTT4cW3RHMEyH+Y0qzLGYYoa/A==}
     peerDependencies:
       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.54.0)(typescript@5.2.2)
-      '@typescript-eslint/parser': 6.7.3(eslint@8.54.0)(typescript@5.2.2)
-      eslint: 8.54.0
-      eslint-plugin-vue: 9.17.0(eslint@8.54.0)
+      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.2.2)
+      '@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
     transitivePeerDependencies:
       - supports-color
@@ -2668,7 +2740,7 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/module-builder@0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.2.2):
+  /@nuxt/module-builder@0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.3.3):
     resolution: {integrity: sha512-lCPh8s8LSfYqHgIMMsctDhz+AX1z6TnATkUes/GXc/No4kApC0zmJkQWrbtDRjmsWjElwl1kE7l7OzYdYc3d4w==}
     hasBin: true
     peerDependencies:
@@ -2681,7 +2753,7 @@ packages:
       mlly: 1.4.2
       nuxi: 3.10.0
       pathe: 1.1.1
-      unbuild: 2.0.0(typescript@5.2.2)
+      unbuild: 2.0.0(typescript@5.3.3)
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -2772,7 +2844,7 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/test-utils@3.8.1(rollup@3.29.3)(vitest@0.33.0)(vue@3.3.9):
+  /@nuxt/test-utils@3.8.1(rollup@3.29.3)(vitest@0.33.0)(vue@3.4.5):
     resolution: {integrity: sha512-8ZQ+OZ7z5Sc5KG2aCvk0piheYSpGb2UQJMCWr8ORwEyZIw4awrkkwGzUY06e344E4StvJB8zxN122MEcFNOkow==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -2798,7 +2870,7 @@ packages:
       pathe: 1.1.1
       ufo: 1.3.2
       vitest: 0.33.0
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2807,7 +2879,7 @@ packages:
   /@nuxt/ui-templates@1.3.1:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
 
-  /@nuxt/vite-builder@3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vue@3.3.9):
+  /@nuxt/vite-builder@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vue@3.3.9):
     resolution: {integrity: sha512-l/lzDDTbd3M89BpmWqjhVLgLVRqfkKp0tyYgV5seJQjj3SX+IeqI7k6k8+dMEifdeO34jUajVWptNpITXQryyg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -2844,8 +2916,8 @@ packages:
       unplugin: 1.5.1
       vite: 4.5.0(@types/node@20.10.1)
       vite-node: 0.33.0(@types/node@20.10.1)
-      vite-plugin-checker: 0.6.2(eslint@8.54.0)(typescript@5.2.2)(vite@4.5.0)
-      vue: 3.3.9(typescript@5.2.2)
+      vite-plugin-checker: 0.6.2(eslint@8.56.0)(typescript@5.3.3)(vite@4.5.0)
+      vue: 3.3.9(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
       - '@types/node'
@@ -3148,7 +3220,7 @@ packages:
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
-      resolve: 1.22.6
+      resolve: 1.22.8
       rollup: 3.29.3
     dev: true
 
@@ -3166,7 +3238,7 @@ packages:
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
-      resolve: 1.22.6
+      resolve: 1.22.8
       rollup: 4.6.1
     dev: true
 
@@ -4004,7 +4076,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.54.0)(typescript@5.2.2):
+  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.2.2):
     resolution: {integrity: sha512-vntq452UHNltxsaaN+L9WyuMch8bMd9CqJ3zhzTPXXidwbf5mqqKCVXEuvRZUqLJSTLeWE65lQwyXsRGnXkCTA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4016,13 +4088,13 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.9.0
-      '@typescript-eslint/parser': 6.7.3(eslint@8.54.0)(typescript@5.2.2)
+      '@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.54.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.54.0)(typescript@5.2.2)
+      '@typescript-eslint/type-utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 6.7.3
       debug: 4.3.4
-      eslint: 8.54.0
+      eslint: 8.56.0
       graphemer: 1.4.0
       ignore: 5.2.4
       natural-compare: 1.4.0
@@ -4054,7 +4126,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.7.3(eslint@8.54.0)(typescript@5.2.2):
+  /@typescript-eslint/parser@6.7.3(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-TlutE+iep2o7R8Lf+yoer3zU6/0EAUc8QIBB3GYBc1KGz4c4TRm83xwXUZVPlZ6YCLss4r77jbu6j3sendJoiQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4066,11 +4138,11 @@ packages:
     dependencies:
       '@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)
       '@typescript-eslint/visitor-keys': 6.7.3
       debug: 4.3.4
-      eslint: 8.54.0
-      typescript: 5.2.2
+      eslint: 8.56.0
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4111,7 +4183,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@6.7.3(eslint@8.54.0)(typescript@5.2.2):
+  /@typescript-eslint/type-utils@6.7.3(eslint@8.56.0)(typescript@5.2.2):
     resolution: {integrity: sha512-Fc68K0aTDrKIBvLnKTZ5Pf3MXK495YErrbHb1R6aTpfK5OdSFj0rVN7ib6Tx6ePrZ2gsjLqr0s98NG7l96KSQw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4122,9 +4194,9 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.54.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.2.2)
       debug: 4.3.4
-      eslint: 8.54.0
+      eslint: 8.56.0
       ts-api-utils: 1.0.3(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
@@ -4183,6 +4255,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@6.7.3(typescript@5.3.3):
+    resolution: {integrity: sha512-YLQ3tJoS4VxLFYHTw21oe1/vIZPRqAO91z6Uv0Ss2BKm/Ag7/RVQBcXTGcXhgJMdA4U+HrKuY5gWlJlvoaKZ5g==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.7.3
+      '@typescript-eslint/visitor-keys': 6.7.3
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/utils@5.62.0(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4222,19 +4315,19 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.7.3(eslint@8.54.0)(typescript@5.2.2):
+  /@typescript-eslint/utils@6.7.3(eslint@8.56.0)(typescript@5.2.2):
     resolution: {integrity: sha512-vzLkVder21GpWRrmSR9JxGZ5+ibIUSudXlW52qeKpzUEQhRSmyZiVDDj3crAth7+5tmN1ulvgKaCU2f/bPRCzg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       '@types/json-schema': 7.0.13
       '@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)
-      eslint: 8.54.0
+      eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
@@ -4297,7 +4390,7 @@ packages:
       '@unhead/shared': 1.8.8
       hookable: 5.5.3
       unhead: 1.8.8
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
     dev: true
 
   /@unovis/dagre-layout@0.8.8-2:
@@ -4417,7 +4510,7 @@ packages:
       '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
       vite: 4.5.0(@types/node@20.10.1)
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4452,7 +4545,7 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(@types/node@20.10.1)
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
     dev: true
 
   /@vitest/expect@0.33.0:
@@ -4588,7 +4681,7 @@ packages:
       ast-kit: 0.11.2(rollup@3.29.3)
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -4650,6 +4743,16 @@ packages:
       '@vue/shared': 3.3.9
       estree-walker: 2.0.2
       source-map-js: 1.0.2
+    dev: true
+
+  /@vue/compiler-core@3.4.5:
+    resolution: {integrity: sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/shared': 3.4.5
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
 
   /@vue/compiler-dom@3.3.7:
     resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==}
@@ -4662,6 +4765,13 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.3.9
       '@vue/shared': 3.3.9
+    dev: true
+
+  /@vue/compiler-dom@3.4.5:
+    resolution: {integrity: sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==}
+    dependencies:
+      '@vue/compiler-core': 3.4.5
+      '@vue/shared': 3.4.5
 
   /@vue/compiler-sfc@3.3.7:
     resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==}
@@ -4690,6 +4800,20 @@ packages:
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
+    dev: true
+
+  /@vue/compiler-sfc@3.4.5:
+    resolution: {integrity: sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/compiler-core': 3.4.5
+      '@vue/compiler-dom': 3.4.5
+      '@vue/compiler-ssr': 3.4.5
+      '@vue/shared': 3.4.5
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+      postcss: 8.4.33
+      source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.3.7:
     resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==}
@@ -4702,6 +4826,13 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.3.9
       '@vue/shared': 3.3.9
+    dev: true
+
+  /@vue/compiler-ssr@3.4.5:
+    resolution: {integrity: sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.5
+      '@vue/shared': 3.4.5
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
@@ -4743,6 +4874,7 @@ packages:
       '@vue/shared': 3.3.9
       estree-walker: 2.0.2
       magic-string: 0.30.5
+    dev: true
 
   /@vue/reactivity@3.3.7:
     resolution: {integrity: sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==}
@@ -4753,6 +4885,12 @@ packages:
     resolution: {integrity: sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==}
     dependencies:
       '@vue/shared': 3.3.9
+    dev: true
+
+  /@vue/reactivity@3.4.5:
+    resolution: {integrity: sha512-BcWkKvjdvqJwb7BhhFkXPLDCecX4d4a6GATvCduJQDLv21PkPowAE5GKuIE5p6RC07/Lp9FMkkq4AYCTVF5KlQ==}
+    dependencies:
+      '@vue/shared': 3.4.5
 
   /@vue/runtime-core@3.3.7:
     resolution: {integrity: sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==}
@@ -4765,6 +4903,13 @@ packages:
     dependencies:
       '@vue/reactivity': 3.3.9
       '@vue/shared': 3.3.9
+    dev: true
+
+  /@vue/runtime-core@3.4.5:
+    resolution: {integrity: sha512-wh9ELIOQKeWT9SaUPdLrsxRkZv14jp+SJm9aiQGWio+/MWNM3Lib0wE6CoKEqQ9+SCYyGjDBhTOTtO47kCgbkg==}
+    dependencies:
+      '@vue/reactivity': 3.4.5
+      '@vue/shared': 3.4.5
 
   /@vue/runtime-dom@3.3.7:
     resolution: {integrity: sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==}
@@ -4779,6 +4924,14 @@ packages:
       '@vue/runtime-core': 3.3.9
       '@vue/shared': 3.3.9
       csstype: 3.1.2
+    dev: true
+
+  /@vue/runtime-dom@3.4.5:
+    resolution: {integrity: sha512-n5ewvOjyG3IEpqGBahdPXODFSpVlSz3H4LF76Sx0XAqpIOqyJ5bIb2PrdYuH2ogBMAQPh+o5tnoH4nJpBr8U0Q==}
+    dependencies:
+      '@vue/runtime-core': 3.4.5
+      '@vue/shared': 3.4.5
+      csstype: 3.1.3
 
   /@vue/server-renderer@3.3.7(vue@3.3.7):
     resolution: {integrity: sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==}
@@ -4796,13 +4949,27 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.3.9
       '@vue/shared': 3.3.9
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
+    dev: true
+
+  /@vue/server-renderer@3.4.5(vue@3.4.5):
+    resolution: {integrity: sha512-jOFc/VE87yvifQpNju12VcqimH8pBLxdcT+t3xMeiED1K6DfH9SORyhFEoZlW5TG2Vwfn3Ul5KE+1aC99xnSBg==}
+    peerDependencies:
+      vue: 3.4.5
+    dependencies:
+      '@vue/compiler-ssr': 3.4.5
+      '@vue/shared': 3.4.5
+      vue: 3.4.5(typescript@5.2.2)
 
   /@vue/shared@3.3.7:
     resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
 
   /@vue/shared@3.3.9:
     resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
+    dev: true
+
+  /@vue/shared@3.4.5:
+    resolution: {integrity: sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==}
 
   /@vue/tsconfig@0.4.0:
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
@@ -5256,6 +5423,22 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /autoprefixer@10.4.16(postcss@8.4.33):
+    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.22.0
+      caniuse-lite: 1.0.30001540
+      fraction.js: 4.3.6
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.33
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
@@ -5281,7 +5464,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.1
       cosmiconfig: 7.1.0
-      resolve: 1.22.6
+      resolve: 1.22.8
     dev: false
 
   /balanced-match@1.0.2:
@@ -5574,7 +5757,7 @@ packages:
   /call-bind@1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
       get-intrinsic: 1.2.1
     dev: false
 
@@ -6235,6 +6418,9 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   /cwd@0.9.1:
     resolution: {integrity: sha512-4+0D+ojEasdLndYX4Cqff057I/Jp6ysXpwKkdLQLnZxV8f6IYZmZtTP5uqD91a/kWqejoc0sSqK4u8wpTKCh8A==}
     engines: {node: '>=0.8'}
@@ -6901,34 +7087,34 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
-  /embla-carousel-autoplay@8.0.0-rc17(embla-carousel@8.0.0-rc17):
-    resolution: {integrity: sha512-U8YweUZg2DJd3IXxTV3UsjFyJEsQuCHOBRyJxoJZ8r1L/SYbYnk7BbknH6N0yfgzeMn6pL27RPEf0vIz+JtFYw==}
+  /embla-carousel-autoplay@8.0.0-rc18(embla-carousel@8.0.0-rc18):
+    resolution: {integrity: sha512-4TgnvSRlAz6YxyUIOU7w9wkUbqq/iVoJdRIRZ0+QQSWl+giout8HB0/HDqDPKJy23zjtpDNnYdNn3dxdKfGFfQ==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc17
+      embla-carousel: 8.0.0-rc18
     dependencies:
-      embla-carousel: 8.0.0-rc17
+      embla-carousel: 8.0.0-rc18
     dev: false
 
-  /embla-carousel-reactive-utils@8.0.0-rc17(embla-carousel@8.0.0-rc17):
-    resolution: {integrity: sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==}
+  /embla-carousel-reactive-utils@8.0.0-rc18(embla-carousel@8.0.0-rc18):
+    resolution: {integrity: sha512-VOFfvhkICz4GKXb/huMTspYVR8mx8C4uDf0Kp+jA9iZNUA4lmlfxxYUr++SwIy1xABycpqML/9hP2tV6Nn0AEQ==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc17
+      embla-carousel: 8.0.0-rc18
     dependencies:
-      embla-carousel: 8.0.0-rc17
+      embla-carousel: 8.0.0-rc18
     dev: false
 
-  /embla-carousel-vue@8.0.0-rc17(vue@3.3.7):
-    resolution: {integrity: sha512-+LHBImxj5Z8OhQHuBxbLhBNZ9cyS1UvXpCbPwlYvUllZ5XbzN08eFNiG7aBnOzxx2WzX2mc6tFzToN+HbO3QPg==}
+  /embla-carousel-vue@8.0.0-rc18(vue@3.3.7):
+    resolution: {integrity: sha512-wbQyx/QuyDFoB0FzWLr5NQmgiwUDhUFHvLILSrZE+rbIKqHCDjHC2vCKZzlWezJqcDDTHWAzDaO1yWMZnUEOkQ==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
-      embla-carousel: 8.0.0-rc17
-      embla-carousel-reactive-utils: 8.0.0-rc17(embla-carousel@8.0.0-rc17)
+      embla-carousel: 8.0.0-rc18
+      embla-carousel-reactive-utils: 8.0.0-rc18(embla-carousel@8.0.0-rc18)
       vue: 3.3.7(typescript@5.2.2)
     dev: false
 
-  /embla-carousel@8.0.0-rc17:
-    resolution: {integrity: sha512-evF49b88VOitvqFtlvhvKVSu96Y8A+QSFdhok87Bfm8R7OYuk95FT+o8+M1GQLi/EhGDUlT193HTVAR0Wt2neQ==}
+  /embla-carousel@8.0.0-rc18:
+    resolution: {integrity: sha512-MtiatQCt+R/lEKl2D4TyAx2Ba4/gfosQIY+Y/ooZu1yahxTbFLyhGW8aodn0GW2WZ6jO3Qpfx7VuqCPdRV5moQ==}
     dev: false
 
   /emoji-regex@10.2.1:
@@ -6978,7 +7164,6 @@ packages:
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
@@ -7139,8 +7324,8 @@ packages:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
+      is-core-module: 2.13.1
+      resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7226,7 +7411,7 @@ packages:
       get-tsconfig: 4.7.2
       is-glob: 4.0.3
       minimatch: 3.1.2
-      resolve: 1.22.6
+      resolve: 1.22.8
       semver: 7.5.4
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
@@ -7389,19 +7574,19 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-vue@9.17.0(eslint@8.54.0):
+  /eslint-plugin-vue@9.17.0(eslint@8.56.0):
     resolution: {integrity: sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
-      eslint: 8.54.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      eslint: 8.56.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.13
       semver: 7.5.4
-      vue-eslint-parser: 9.3.1(eslint@8.54.0)
+      vue-eslint-parser: 9.3.1(eslint@8.56.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -7495,15 +7680,15 @@ packages:
       - supports-color
     dev: true
 
-  /eslint@8.54.0:
-    resolution: {integrity: sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==}
+  /eslint@8.56.0:
+    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
-      '@eslint-community/regexpp': 4.9.0
-      '@eslint/eslintrc': 2.1.3
-      '@eslint/js': 8.54.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint-community/regexpp': 4.10.0
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.56.0
       '@humanwhocodes/config-array': 0.11.13
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -7523,7 +7708,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.22.0
+      globals: 13.24.0
       graphemer: 1.4.0
       ignore: 5.3.0
       imurmurhash: 0.1.4
@@ -7967,8 +8152,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
   /gauge@3.0.2:
     resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
@@ -8028,7 +8213,7 @@ packages:
   /get-intrinsic@1.2.1:
     resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
       has: 1.0.3
       has-proto: 1.0.1
       has-symbols: 1.0.3
@@ -8255,6 +8440,13 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -8389,11 +8581,17 @@ packages:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
 
   /hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
 
+  /hasown@2.0.0:
+    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -8751,6 +8949,11 @@ packages:
     dependencies:
       has: 1.0.3
 
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.0
+
   /is-decimal@1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
     dev: true
@@ -9849,7 +10052,7 @@ packages:
     hasBin: true
     dev: false
 
-  /mkdist@1.4.0(typescript@5.2.2):
+  /mkdist@1.4.0(typescript@5.3.3):
     resolution: {integrity: sha512-LzzdzWDx6cWWPd8saIoO+kT5jnbijfeDaE6jZfmCYEi3YL2aJSyF23/tCFee/mDuh/ek1UQeSYdLeSa6oesdiw==}
     hasBin: true
     peerDependencies:
@@ -9874,7 +10077,7 @@ packages:
       pathe: 1.1.1
       postcss: 8.4.31
       postcss-nested: 6.0.1(postcss@8.4.31)
-      typescript: 5.2.2
+      typescript: 5.3.3
     dev: true
 
   /mlly@1.4.2:
@@ -9942,6 +10145,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   /nanoid@4.0.2:
     resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -10159,7 +10367,7 @@ packages:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.6
+      resolve: 1.22.8
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
@@ -10168,7 +10376,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.13.0
+      is-core-module: 2.13.1
       semver: 7.5.4
       validate-npm-package-license: 3.0.4
     dev: true
@@ -10178,7 +10386,7 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       hosted-git-info: 7.0.1
-      is-core-module: 2.13.0
+      is-core-module: 2.13.1
       semver: 7.5.4
       validate-npm-package-license: 3.0.4
     dev: true
@@ -10322,7 +10530,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /nuxt@3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vite@4.5.0):
+  /nuxt@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vite@4.5.1):
     resolution: {integrity: sha512-HUAyifmqTs2zcQBGvcby3KNs2pBAk+l7ZbLjD1oCNqQQ+wBuZ1qgLC4Ebu++y4g3o3Y8WAWSvpafbKRLQZziPw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -10336,12 +10544,12 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.0)
+      '@nuxt/devtools': 1.0.4(nuxt@3.8.2)(rollup@3.29.3)(vite@4.5.1)
       '@nuxt/kit': 3.8.2(rollup@3.29.3)
       '@nuxt/schema': 3.8.2(rollup@3.29.3)
       '@nuxt/telemetry': 2.5.3(rollup@3.29.3)
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.8.2(@types/node@20.10.1)(eslint@8.54.0)(rollup@3.29.3)(typescript@5.2.2)(vue@3.3.9)
+      '@nuxt/vite-builder': 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.3)(typescript@5.3.3)(vue@3.3.9)
       '@types/node': 20.10.1
       '@unhead/dom': 1.8.8
       '@unhead/ssr': 1.8.8
@@ -10387,7 +10595,7 @@ packages:
       unplugin: 1.5.1
       unplugin-vue-router: 0.7.0(rollup@3.29.3)(vue-router@4.2.5)(vue@3.3.9)
       untyped: 1.4.0
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
       vue-router: 4.2.5(vue@3.3.9)
@@ -11268,6 +11476,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.33:
+    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
     dev: false
@@ -11418,11 +11634,11 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.2.3(vue@3.3.9):
+  /radix-vue@1.2.3(vue@3.4.5):
     resolution: {integrity: sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==}
     dependencies:
       '@floating-ui/dom': 1.5.3
-      '@floating-ui/vue': 1.0.2(vue@3.3.9)
+      '@floating-ui/vue': 1.0.2(vue@3.4.5)
       fast-deep-equal: 3.1.3
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -11675,6 +11891,14 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   /restore-cursor@2.0.0:
     resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
     engines: {node: '>=4'}
@@ -11732,7 +11956,7 @@ packages:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
     dev: false
 
-  /rollup-plugin-dts@6.1.0(rollup@3.29.3)(typescript@5.2.2):
+  /rollup-plugin-dts@6.1.0(rollup@3.29.3)(typescript@5.3.3):
     resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -11741,7 +11965,7 @@ packages:
     dependencies:
       magic-string: 0.30.5
       rollup: 3.29.3
-      typescript: 5.2.2
+      typescript: 5.3.3
     optionalDependencies:
       '@babel/code-frame': 7.23.5
     dev: true
@@ -11787,6 +12011,14 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /rollup@3.29.4:
+    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /rollup@4.6.1:
     resolution: {integrity: sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -11857,8 +12089,8 @@ packages:
   /scule@1.1.0:
     resolution: {integrity: sha512-vRUjqhyM/YWYzT+jsMk6tnl3NkY4A4soJ8uyh3O6Um+JXEQL9ozUCe7pqrxn3CSKokw0hw3nFStfskzpgYwR0g==}
 
-  /search-insights@2.8.3:
-    resolution: {integrity: sha512-W9rZfQ9XEfF0O6ntgQOTI7Txc8nkZrO4eJ/pTHK0Br6wWND2sPGPoWg+yGhdIW7wMbLqk8dc23IyEtLlNGpeNw==}
+  /search-insights@2.13.0:
+    resolution: {integrity: sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==}
     dev: true
 
   /semver-diff@2.1.0:
@@ -12720,6 +12952,15 @@ packages:
       typescript: 5.2.2
     dev: true
 
+  /ts-api-utils@1.0.3(typescript@5.3.3):
+    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
+    engines: {node: '>=16.13.0'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.3.3
+    dev: true
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
@@ -12922,6 +13163,12 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /typescript@5.3.3:
+    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==}
     dev: false
@@ -12933,7 +13180,7 @@ packages:
     resolution: {integrity: sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==}
     dev: true
 
-  /unbuild@2.0.0(typescript@5.2.2):
+  /unbuild@2.0.0(typescript@5.3.3):
     resolution: {integrity: sha512-JWCUYx3Oxdzvw2J9kTAp+DKE8df/BnH/JTSj6JyA4SH40ECdFu7FoJJcrm8G92B7TjofQ6GZGjJs50TRxoH6Wg==}
     hasBin: true
     peerDependencies:
@@ -12957,15 +13204,15 @@ packages:
       hookable: 5.5.3
       jiti: 1.20.0
       magic-string: 0.30.5
-      mkdist: 1.4.0(typescript@5.2.2)
+      mkdist: 1.4.0(typescript@5.3.3)
       mlly: 1.4.2
       pathe: 1.1.1
       pkg-types: 1.0.3
       pretty-bytes: 6.1.1
       rollup: 3.29.3
-      rollup-plugin-dts: 6.1.0(rollup@3.29.3)(typescript@5.2.2)
+      rollup-plugin-dts: 6.1.0(rollup@3.29.3)(typescript@5.3.3)
       scule: 1.0.0
-      typescript: 5.2.2
+      typescript: 5.3.3
       untyped: 1.4.0
     transitivePeerDependencies:
       - sass
@@ -13445,7 +13692,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker@0.6.2(eslint@8.54.0)(typescript@5.2.2)(vite@4.5.0):
+  /vite-plugin-checker@0.6.2(eslint@8.56.0)(typescript@5.3.3)(vite@4.5.0):
     resolution: {integrity: sha512-YvvvQ+IjY09BX7Ab+1pjxkELQsBd4rPhWNw8WLBeFVxu/E7O+n6VYAqNsKdK/a2luFlX/sMpoWdGFfg4HvwdJQ==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -13481,7 +13728,7 @@ packages:
       chalk: 4.1.2
       chokidar: 3.5.3
       commander: 8.3.0
-      eslint: 8.54.0
+      eslint: 8.56.0
       fast-glob: 3.3.1
       fs-extra: 11.1.1
       lodash.debounce: 4.0.8
@@ -13490,7 +13737,7 @@ packages:
       semver: 7.5.4
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
-      typescript: 5.2.2
+      typescript: 5.3.3
       vite: 4.5.0(@types/node@20.10.1)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
@@ -13498,7 +13745,7 @@ packages:
       vscode-uri: 3.0.8
     dev: true
 
-  /vite-plugin-inspect@0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.3)(vite@4.5.0):
+  /vite-plugin-inspect@0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.3)(vite@4.5.1):
     resolution: {integrity: sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -13517,13 +13764,13 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 4.5.0(@types/node@20.10.1)
+      vite: 4.5.1(@types/node@20.10.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-vue-inspector@4.0.0(vite@4.5.0):
+  /vite-plugin-vue-inspector@4.0.0(vite@4.5.1):
     resolution: {integrity: sha512-xNjMbRj3YrebuuInTvlC8ghPtzT+3LjMIQPeeR/5CaFd+WcbA9wBnECZmlcP3GITCVED0SxGmTyoJ3iVKsK4vQ==}
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0
@@ -13537,7 +13784,7 @@ packages:
       '@vue/compiler-dom': 3.3.9
       kolorist: 1.8.0
       magic-string: 0.30.5
-      vite: 4.5.0(@types/node@20.10.1)
+      vite: 4.5.1(@types/node@20.10.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13666,7 +13913,43 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.24(@algolia/client-search@4.20.0)(@types/node@20.8.10)(postcss@8.4.31)(search-insights@2.8.3)(typescript@5.2.2):
+  /vite@4.5.1(@types/node@20.10.1):
+    resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.10.1
+      esbuild: 0.18.20
+      postcss: 8.4.33
+      rollup: 3.29.4
+    optionalDependencies:
+      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):
     resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
     hasBin: true
     peerDependencies:
@@ -13679,7 +13962,7 @@ packages:
         optional: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.3)
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
       '@types/markdown-it': 13.0.5
       '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.7)
       '@vue/devtools-api': 6.5.1
@@ -13688,7 +13971,7 @@ packages:
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.1.0
-      postcss: 8.4.31
+      postcss: 8.4.33
       shiki: 0.14.5
       vite: 4.5.0(@types/node@20.8.10)
       vue: 3.3.7(typescript@5.2.2)
@@ -13927,7 +14210,7 @@ packages:
     dependencies:
       vue: 3.3.7(typescript@5.2.2)
 
-  /vue-demi@0.14.6(vue@3.3.9):
+  /vue-demi@0.14.6(vue@3.4.5):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -13939,7 +14222,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.4.5(typescript@5.2.2)
     dev: false
 
   /vue-devtools-stub@0.1.0:
@@ -13964,14 +14247,14 @@ packages:
       - supports-color
     dev: true
 
-  /vue-eslint-parser@9.3.1(eslint@8.54.0):
+  /vue-eslint-parser@9.3.1(eslint@8.56.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.54.0
+      eslint: 8.56.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -13988,7 +14271,7 @@ packages:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.3.9(typescript@5.2.2)
+      vue: 3.3.9(typescript@5.3.3)
     dev: true
 
   /vue-screen-utils@1.0.0-beta.13(vue@3.3.7):
@@ -14042,7 +14325,7 @@ packages:
       '@vue/shared': 3.3.7
       typescript: 5.2.2
 
-  /vue@3.3.9(typescript@5.2.2):
+  /vue@3.3.9(typescript@5.3.3):
     resolution: {integrity: sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==}
     peerDependencies:
       typescript: '*'
@@ -14055,8 +14338,40 @@ packages:
       '@vue/runtime-dom': 3.3.9
       '@vue/server-renderer': 3.3.9(vue@3.3.9)
       '@vue/shared': 3.3.9
+      typescript: 5.3.3
+    dev: true
+
+  /vue@3.4.5(typescript@5.2.2):
+    resolution: {integrity: sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.5
+      '@vue/compiler-sfc': 3.4.5
+      '@vue/runtime-dom': 3.4.5
+      '@vue/server-renderer': 3.4.5(vue@3.4.5)
+      '@vue/shared': 3.4.5
       typescript: 5.2.2
 
+  /vue@3.4.5(typescript@5.3.3):
+    resolution: {integrity: sha512-VH6nHFhLPjgu2oh5vEBXoNZxsGHuZNr3qf4PHClwJWw6IDqw6B3x+4J+ABdoZ0aJuT8Zi0zf3GpGlLQCrGWHrw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.5
+      '@vue/compiler-sfc': 3.4.5
+      '@vue/runtime-dom': 3.4.5
+      '@vue/server-renderer': 3.4.5(vue@3.4.5)
+      '@vue/shared': 3.4.5
+      typescript: 5.3.3
+    dev: true
+
   /walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
     dev: true

From cbbc3c15bfa57b79e873f442df424bbf1638033f Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sun, 7 Jan 2024 21:56:20 +0530
Subject: [PATCH 16/26] chore: fix typescript error by getting the types from
 core package

---
 apps/www/package.json                               |  1 +
 .../lib/registry/default/ui/carousel/interface.ts   |  2 +-
 .../lib/registry/new-york/ui/carousel/interface.ts  |  2 +-
 pnpm-lock.yaml                                      | 13 ++++++++++---
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 3543e4494..1bf15ca1b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -27,6 +27,7 @@
     "clsx": "^2.0.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
+    "embla-carousel": "8.0.0-rc19",
     "embla-carousel-autoplay": "8.0.0-rc18",
     "embla-carousel-vue": "8.0.0-rc18",
     "lucide-vue-next": "^0.276.0",
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 9b2281ff0..3cc557143 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -2,7 +2,7 @@ import type {
   EmblaCarouselType as CarouselApi,
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
-} from 'embla-carousel-vue'
+} from 'embla-carousel'
 
 export interface CarouselProps {
   opts?: CarouselOptions
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 9b2281ff0..3cc557143 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -2,7 +2,7 @@ import type {
   EmblaCarouselType as CarouselApi,
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
-} from 'embla-carousel-vue'
+} from 'embla-carousel'
 
 export interface CarouselProps {
   opts?: CarouselOptions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfb2f3fc5..090e38b34 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,9 +83,12 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      embla-carousel:
+        specifier: 8.0.0-rc19
+        version: 8.0.0-rc19
       embla-carousel-autoplay:
         specifier: 8.0.0-rc18
-        version: 8.0.0-rc18(embla-carousel@8.0.0-rc18)
+        version: 8.0.0-rc18(embla-carousel@8.0.0-rc19)
       embla-carousel-vue:
         specifier: 8.0.0-rc18
         version: 8.0.0-rc18(vue@3.3.7)
@@ -7087,12 +7090,12 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
-  /embla-carousel-autoplay@8.0.0-rc18(embla-carousel@8.0.0-rc18):
+  /embla-carousel-autoplay@8.0.0-rc18(embla-carousel@8.0.0-rc19):
     resolution: {integrity: sha512-4TgnvSRlAz6YxyUIOU7w9wkUbqq/iVoJdRIRZ0+QQSWl+giout8HB0/HDqDPKJy23zjtpDNnYdNn3dxdKfGFfQ==}
     peerDependencies:
       embla-carousel: 8.0.0-rc18
     dependencies:
-      embla-carousel: 8.0.0-rc18
+      embla-carousel: 8.0.0-rc19
     dev: false
 
   /embla-carousel-reactive-utils@8.0.0-rc18(embla-carousel@8.0.0-rc18):
@@ -7117,6 +7120,10 @@ packages:
     resolution: {integrity: sha512-MtiatQCt+R/lEKl2D4TyAx2Ba4/gfosQIY+Y/ooZu1yahxTbFLyhGW8aodn0GW2WZ6jO3Qpfx7VuqCPdRV5moQ==}
     dev: false
 
+  /embla-carousel@8.0.0-rc19:
+    resolution: {integrity: sha512-PAChVyYoVZo8subkBN8LjZ7+0vk4CmVvMnxH0Y2ux76VUEUBl1wk5xDo8+MUhH5MXU6ZrgkBpMe++bKob1Z+2g==}
+    dev: false
+
   /emoji-regex@10.2.1:
     resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
     dev: false

From 734079a1bc7120640c6c2f666c9cfb6bb37c272e Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Mon, 8 Jan 2024 09:48:32 +0530
Subject: [PATCH 17/26] chore: prevent duplicate classes by using class as prop

---
 apps/www/src/lib/registry/default/ui/carousel/Carousel.vue  | 6 +++---
 .../lib/registry/default/ui/carousel/CarouselContent.vue    | 5 ++++-
 .../src/lib/registry/default/ui/carousel/CarouselItem.vue   | 5 ++++-
 .../src/lib/registry/default/ui/carousel/CarouselNext.vue   | 5 ++++-
 .../lib/registry/default/ui/carousel/CarouselPrevious.vue   | 5 ++++-
 apps/www/src/lib/registry/default/ui/carousel/interface.ts  | 5 +++++
 apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue | 6 +++---
 .../lib/registry/new-york/ui/carousel/CarouselContent.vue   | 5 ++++-
 .../src/lib/registry/new-york/ui/carousel/CarouselItem.vue  | 5 ++++-
 .../src/lib/registry/new-york/ui/carousel/CarouselNext.vue  | 5 ++++-
 .../lib/registry/new-york/ui/carousel/CarouselPrevious.vue  | 5 ++++-
 apps/www/src/lib/registry/new-york/ui/carousel/interface.ts | 5 +++++
 12 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index 969ae9693..b6147c27a 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselEmits, CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<CarouselProps>(), {
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',
 })
 
@@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <template>
   <div
-    :class="cn('relative', $attrs.class ?? '')"
+    :class="cn('relative', props.class)"
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index 7d1414302..6e87fdeba 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
 import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { carouselRef, orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
         cn(
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          $attrs.class ?? '',
+          props.class,
         )"
     >
       <slot />
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
index 5ff44c574..53ea50da6 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -1,7 +1,10 @@
 <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>
 
@@ -12,7 +15,7 @@ const { orientation } = useCarousel()
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
       orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      $attrs.class ?? '',
+      props.class,
     )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 2c4c34b7d..67faba073 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -1,9 +1,12 @@
 <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 '@/lib/registry/default/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollNext, scrollNext } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollNext"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 0e99d96b5..c64b3d926 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,12 @@
 <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 '@/lib/registry/default/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollPrev, scrollPrev } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollPrev"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 3cc557143..68521ddb7 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -3,6 +3,7 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
+import type { HTMLAttributes } from 'vue'
 
 export interface CarouselProps {
   opts?: CarouselOptions
@@ -13,3 +14,7 @@ export interface CarouselProps {
 export interface CarouselEmits {
   (e: 'init-api', payload: CarouselApi): void
 }
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index 969ae9693..b6147c27a 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselEmits, CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<CarouselProps>(), {
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',
 })
 
@@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <template>
   <div
-    :class="cn('relative', $attrs.class ?? '')"
+    :class="cn('relative', props.class)"
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
index 7d1414302..06f825552 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { carouselRef, orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
         cn(
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          $attrs.class ?? '',
+          props.class,
         )"
     >
       <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
index 5ff44c574..801e5c162 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { orientation } = useCarousel()
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
       orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      $attrs.class ?? '',
+      props.class,
     )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 37ca9f247..d237434b1 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollNext, scrollNext } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollNext"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index 91c8389b9..2018027a4 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollPrev, scrollPrev } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollPrev"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 3cc557143..68521ddb7 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -3,6 +3,7 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
+import type { HTMLAttributes } from 'vue'
 
 export interface CarouselProps {
   opts?: CarouselOptions
@@ -13,3 +14,7 @@ export interface CarouselProps {
 export interface CarouselEmits {
   (e: 'init-api', payload: CarouselApi): void
 }
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}

From 13c47ce50b593929f46ca8562720a237c6959f59 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 8 Jan 2024 10:00:12 +0330
Subject: [PATCH 18/26] feat: use slot fallback content

so user could change navigation button icons
---
 .../www/src/lib/registry/default/ui/carousel/CarouselNext.vue | 4 +++-
 .../src/lib/registry/default/ui/carousel/CarouselPrevious.vue | 4 +++-
 .../src/lib/registry/new-york/ui/carousel/CarouselNext.vue    | 4 +++-
 .../lib/registry/new-york/ui/carousel/CarouselPrevious.vue    | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 67faba073..3b87ad3fc 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -23,6 +23,8 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     variant="outline"
     @click="scrollNext"
   >
-    <ChevronRight class="h-4 w-4 text-white stroke-white" />
+    <slot>
+      <ChevronRight class="h-4 w-4 text-current" />
+    </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index c64b3d926..51dda3ce3 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -23,6 +23,8 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     variant="outline"
     @click="scrollPrev"
   >
-    <ChevronLeft class="h-4 w-4 text-white" />
+    <slot>
+      <ChevronLeft class="h-4 w-4 text-current" />
+    </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index d237434b1..5bbb489e0 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -23,6 +23,8 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     variant="outline"
     @click="scrollNext"
   >
-    <ChevronRightIcon class="h-4 w-4 text-white stroke-white" />
+    <slot>
+      <ChevronRightIcon class="h-4 w-4 text-current" />
+    </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index 2018027a4..b39d820ae 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -23,6 +23,8 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     variant="outline"
     @click="scrollPrev"
   >
-    <ChevronLeftIcon class="h-4 w-4 text-white" />
+    <slot>
+      <ChevronLeftIcon class="h-4 w-4 text-current" />
+    </slot>
   </Button>
 </template>

From 40f07479e1250914075eec120dbf4e3db962284c Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 8 Jan 2024 10:03:16 +0330
Subject: [PATCH 19/26] fix: change attribute inheritance element

---
 .../src/lib/registry/default/ui/carousel/CarouselContent.vue | 5 +++++
 .../lib/registry/new-york/ui/carousel/CarouselContent.vue    | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index 6e87fdeba..f432d0159 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -3,6 +3,10 @@ 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()
@@ -17,6 +21,7 @@ const { carouselRef, orientation } = useCarousel()
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           props.class,
         )"
+      v-bind="$attrs"
     >
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
index 06f825552..87f0e3087 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -3,6 +3,10 @@ import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<WithClassAsProps>()
 
 const { carouselRef, orientation } = useCarousel()
@@ -17,6 +21,7 @@ const { carouselRef, orientation } = useCarousel()
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           props.class,
         )"
+      v-bind="$attrs"
     >
       <slot />
     </div>

From dfda49dc33c48458fc3cb1993e18156e8f904de4 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 8 Jan 2024 10:38:14 +0330
Subject: [PATCH 20/26] chore: update www package.json `scripts`

update tsconfig exclude for the strict registry build
---
 apps/www/package.json           | 7 ++++---
 apps/www/tsconfig.registry.json | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 1bf15ca1b..4ee577a4f 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -9,9 +9,10 @@
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "typecheck": "vue-tsc --noEmit",
-    "typecheck:registry": "vue-tsc --noEmit -p tsconfig.registry.json",
-    "build:registry": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
+    "typecheck": "vue-tsc",
+    "typecheck:registry": "vue-tsc -p tsconfig.registry.json",
+    "build:registry": "tsx ./scripts/build-registry.ts",
+    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.0",
diff --git a/apps/www/tsconfig.registry.json b/apps/www/tsconfig.registry.json
index d89c8b4aa..d8beafc14 100644
--- a/apps/www/tsconfig.registry.json
+++ b/apps/www/tsconfig.registry.json
@@ -9,5 +9,5 @@
     "declaration": false
   },
   "include": ["src/lib/**/*"],
-  "exclude": ["node_modules", "src/lib/registry/**/example/**/*"]
+  "exclude": ["node_modules", "src/lib/registry/**/example/**/*", "src/lib/registry/default/ui/carousel/*", "src/lib/registry/new-york/ui/carousel/*"]
 }

From dae21ccc7c6cdadb4b37f83378990b51763a1f71 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 8 Jan 2024 11:36:44 +0330
Subject: [PATCH 21/26] refactor: fix embla-carousel types after v8.0.0-rc18

update embla deps
---
 apps/www/package.json                         |  4 +--
 .../lib/registry/default/ui/carousel/index.ts |  6 ++--
 .../registry/default/ui/carousel/interface.ts |  6 ++--
 .../default/ui/carousel/useCarousel.ts        |  7 ++--
 .../registry/new-york/ui/carousel/index.ts    |  6 ++--
 .../new-york/ui/carousel/interface.ts         |  6 ++--
 .../new-york/ui/carousel/useCarousel.ts       |  7 ++--
 pnpm-lock.yaml                                | 34 ++++++++-----------
 8 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 4ee577a4f..2ca7ce7c1 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -29,8 +29,8 @@
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
     "embla-carousel": "8.0.0-rc19",
-    "embla-carousel-autoplay": "8.0.0-rc18",
-    "embla-carousel-vue": "8.0.0-rc18",
+    "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",
     "tailwindcss-animate": "^1.0.7",
diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/src/lib/registry/default/ui/carousel/index.ts
index 339a2e6ea..addfe0361 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/index.ts
@@ -5,6 +5,6 @@ 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-vue'
+export type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 68521ddb7..99c4f1a81 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -3,11 +3,11 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes, Ref } from 'vue'
 
 export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin[]
+  opts?: CarouselOptions | Ref<CarouselOptions>
+  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
   orientation?: 'horizontal' | 'vertical'
 }
 
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
index 643a9fd7e..85a97ebc3 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
@@ -1,8 +1,9 @@
 import { createInjectionState } from '@vueuse/core'
-import emblaCarouselVue, {
-  type EmblaCarouselType as CarouselApi,
-} from 'embla-carousel-vue'
+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(
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
index 339a2e6ea..addfe0361 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
@@ -5,6 +5,6 @@ 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-vue'
+export type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 68521ddb7..99c4f1a81 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -3,11 +3,11 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes, Ref } from 'vue'
 
 export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin[]
+  opts?: CarouselOptions | Ref<CarouselOptions>
+  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
   orientation?: 'horizontal' | 'vertical'
 }
 
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
index 643a9fd7e..85a97ebc3 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
@@ -1,8 +1,9 @@
 import { createInjectionState } from '@vueuse/core'
-import emblaCarouselVue, {
-  type EmblaCarouselType as CarouselApi,
-} from 'embla-carousel-vue'
+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(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 090e38b34..ae7cb36aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,11 +87,11 @@ importers:
         specifier: 8.0.0-rc19
         version: 8.0.0-rc19
       embla-carousel-autoplay:
-        specifier: 8.0.0-rc18
-        version: 8.0.0-rc18(embla-carousel@8.0.0-rc19)
+        specifier: 8.0.0-rc19
+        version: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
       embla-carousel-vue:
-        specifier: 8.0.0-rc18
-        version: 8.0.0-rc18(vue@3.3.7)
+        specifier: 8.0.0-rc19
+        version: 8.0.0-rc19(vue@3.3.7)
       lucide-vue-next:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.3.7)
@@ -7090,36 +7090,32 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
-  /embla-carousel-autoplay@8.0.0-rc18(embla-carousel@8.0.0-rc19):
-    resolution: {integrity: sha512-4TgnvSRlAz6YxyUIOU7w9wkUbqq/iVoJdRIRZ0+QQSWl+giout8HB0/HDqDPKJy23zjtpDNnYdNn3dxdKfGFfQ==}
+  /embla-carousel-autoplay@8.0.0-rc19(embla-carousel@8.0.0-rc19):
+    resolution: {integrity: sha512-c1pxsGHuWbYD3outH5y4L+kzg15smyHKFIDmXLaXlI6rCiizzf6hWMW0ZgxJLV4y4nUwDrYhM6TtzxvvOcsfUw==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc18
+      embla-carousel: 8.0.0-rc19
     dependencies:
       embla-carousel: 8.0.0-rc19
     dev: false
 
-  /embla-carousel-reactive-utils@8.0.0-rc18(embla-carousel@8.0.0-rc18):
-    resolution: {integrity: sha512-VOFfvhkICz4GKXb/huMTspYVR8mx8C4uDf0Kp+jA9iZNUA4lmlfxxYUr++SwIy1xABycpqML/9hP2tV6Nn0AEQ==}
+  /embla-carousel-reactive-utils@8.0.0-rc19(embla-carousel@8.0.0-rc19):
+    resolution: {integrity: sha512-ed9NppY0OxTtrSIwTCYNcMLlQfSNcNy8Zsw8uIG0te3qrhvQ2ePPsbcElK2SRAV8VMU6G7JQweQIb6amzYMDXA==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc18
+      embla-carousel: 8.0.0-rc19
     dependencies:
-      embla-carousel: 8.0.0-rc18
+      embla-carousel: 8.0.0-rc19
     dev: false
 
-  /embla-carousel-vue@8.0.0-rc18(vue@3.3.7):
-    resolution: {integrity: sha512-wbQyx/QuyDFoB0FzWLr5NQmgiwUDhUFHvLILSrZE+rbIKqHCDjHC2vCKZzlWezJqcDDTHWAzDaO1yWMZnUEOkQ==}
+  /embla-carousel-vue@8.0.0-rc19(vue@3.3.7):
+    resolution: {integrity: sha512-dqkmatB7/WNXHEwFGtQNpYT8TWnE6KRcVBfnPTswBba8I33RdBRuj0CqRHem02dlIS1ySgS9sBVVdDXe+6IGKQ==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
-      embla-carousel: 8.0.0-rc18
-      embla-carousel-reactive-utils: 8.0.0-rc18(embla-carousel@8.0.0-rc18)
+      embla-carousel: 8.0.0-rc19
+      embla-carousel-reactive-utils: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
       vue: 3.3.7(typescript@5.2.2)
     dev: false
 
-  /embla-carousel@8.0.0-rc18:
-    resolution: {integrity: sha512-MtiatQCt+R/lEKl2D4TyAx2Ba4/gfosQIY+Y/ooZu1yahxTbFLyhGW8aodn0GW2WZ6jO3Qpfx7VuqCPdRV5moQ==}
-    dev: false
-
   /embla-carousel@8.0.0-rc19:
     resolution: {integrity: sha512-PAChVyYoVZo8subkBN8LjZ7+0vk4CmVvMnxH0Y2ux76VUEUBl1wk5xDo8+MUhH5MXU6ZrgkBpMe++bKob1Z+2g==}
     dev: false

From 518189f1e4c5ea7412498b7597160b1e44ffee65 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 8 Jan 2024 12:06:46 +0330
Subject: [PATCH 22/26] chore: update @vue/tsconfig

---
 apps/www/package.json |  4 ++--
 pnpm-lock.yaml        | 34 +++++++++++++++++-----------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 2ca7ce7c1..e4462ead6 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -51,7 +51,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-core": "^3.3.7",
     "@vue/compiler-dom": "^3.3.7",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.1",
@@ -63,6 +63,6 @@
     "unplugin-icons": "^0.17.1",
     "vite": "^4.5.0",
     "vitepress": "^1.0.0-rc.24",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae7cb36aa..a85bd03ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,8 +148,8 @@ importers:
         specifier: ^3.3.7
         version: 3.3.7
       '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
+        specifier: ^0.5.1
+        version: 0.5.1
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.33)
@@ -184,8 +184,8 @@ importers:
         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)
       vue-tsc:
-        specifier: ^1.8.25
-        version: 1.8.25(typescript@5.2.2)
+        specifier: ^1.8.27
+        version: 1.8.27(typescript@5.2.2)
 
   packages/cli:
     dependencies:
@@ -1118,7 +1118,7 @@ packages:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/types': 7.23.5
       debug: 4.3.4
       globals: 11.12.0
@@ -4840,8 +4840,8 @@ packages:
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
-  /@vue/language-core@1.8.25(typescript@5.2.2):
-    resolution: {integrity: sha512-NJk/5DnAZlpvXX8BdWmHI45bWGLViUaS3R/RMrmFSvFMSbJKuEODpM4kR0F0Ofv5SFzCWuNiMhxameWpVdQsnA==}
+  /@vue/language-core@1.8.27(typescript@5.2.2):
+    resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -4850,8 +4850,8 @@ packages:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.3.9
-      '@vue/shared': 3.3.9
+      '@vue/compiler-dom': 3.4.5
+      '@vue/shared': 3.4.5
       computeds: 0.0.1
       minimatch: 9.0.3
       muggle-string: 0.3.1
@@ -4872,7 +4872,7 @@ packages:
   /@vue/reactivity-transform@3.3.9:
     resolution: {integrity: sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==}
     dependencies:
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@vue/compiler-core': 3.3.9
       '@vue/shared': 3.3.9
       estree-walker: 2.0.2
@@ -4974,8 +4974,8 @@ packages:
   /@vue/shared@3.4.5:
     resolution: {integrity: sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==}
 
-  /@vue/tsconfig@0.4.0:
-    resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
+  /@vue/tsconfig@0.5.1:
+    resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
     dev: true
 
   /@vuedx/compiler-sfc@0.7.1:
@@ -5367,7 +5367,7 @@ packages:
     resolution: {integrity: sha512-Q0DjXK4ApbVoIf9GLyCo252tUH44iTnD/hiJ2TQaJeydYWSpKk0sI34+WMel8S9Wt5pbLgG02oJ+gkgX5DV3sQ==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.6
       '@rollup/pluginutils': 5.1.0(rollup@3.29.3)
       pathe: 1.1.1
     transitivePeerDependencies:
@@ -5378,7 +5378,7 @@ packages:
     resolution: {integrity: sha512-kbL7ERlqjXubdDd+szuwdlQ1xUxEz9mCz1+m07ftNVStgwRb2RWw+U6oKo08PAvOishMxiqz1mlJyLl8yQx2Qg==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.6
       '@rollup/pluginutils': 5.0.4(rollup@3.29.3)
       pathe: 1.1.1
     transitivePeerDependencies:
@@ -14292,14 +14292,14 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.25(typescript@5.2.2):
-    resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
+  /vue-tsc@1.8.27(typescript@5.2.2):
+    resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.25(typescript@5.2.2)
+      '@vue/language-core': 1.8.27(typescript@5.2.2)
       semver: 7.5.4
       typescript: 5.2.2
     dev: true

From 8f7a18301c3e6fe623bc9efc8bcb9b491a26ce57 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 9 Jan 2024 00:34:04 +0800
Subject: [PATCH 23/26] chore: run registry

---
 apps/www/__registry__/index.ts                | 24 +++++------
 apps/www/src/lib/registry/registry.ts         |  2 +-
 apps/www/src/public/registry/index.json       |  5 ++-
 .../registry/styles/default/carousel.json     | 43 +++++++++++++++++++
 .../registry/styles/new-york/carousel.json    | 43 +++++++++++++++++++
 5 files changed, 102 insertions(+), 15 deletions(-)
 create mode 100644 apps/www/src/public/registry/styles/default/carousel.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/carousel.json

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 1de2e1eff..9088c48db 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -187,42 +187,42 @@ export const Index = {
     CarouselApi: {
       name: 'CarouselApi',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselApi.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselApi.vue'],
     },
     CarouselDemo: {
       name: 'CarouselDemo',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselDemo.vue'],
     },
     CarouselOrientation: {
       name: 'CarouselOrientation',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
     },
     CarouselPlugin: {
       name: 'CarouselPlugin',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselPlugin.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselPlugin.vue'],
     },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselSize.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselSize.vue'],
     },
     CarouselSpacing: {
       name: 'CarouselSpacing',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/default/example/CarouselSpacing.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselSpacing.vue'],
     },
@@ -1022,42 +1022,42 @@ export const Index = {
     CarouselApi: {
       name: 'CarouselApi',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselApi.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselApi.vue'],
     },
     CarouselDemo: {
       name: 'CarouselDemo',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselDemo.vue'],
     },
     CarouselOrientation: {
       name: 'CarouselOrientation',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
     },
     CarouselPlugin: {
       name: 'CarouselPlugin',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselPlugin.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselPlugin.vue'],
     },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselSize.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselSize.vue'],
     },
     CarouselSpacing: {
       name: 'CarouselSpacing',
       type: 'components:example',
-      registryDependencies: ['carousel', 'button'],
+      registryDependencies: ['carousel', 'card'],
       component: () => import('../src/lib/registry/new-york/example/CarouselSpacing.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselSpacing.vue'],
     },
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index c7ed9cafb..a4ce9d9a5 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -133,7 +133,7 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
 
 async function getDependencies(filename: string) {
   const code = await readFile(filename, { encoding: 'utf8' })
-  const parsed = parse(code)
+  const parsed = parse(code, { filename })
 
   const registryDependencies = new Set<string>()
   const dependencies = new Set<string>()
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 7534b79db..451004913 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -134,14 +134,15 @@
     "name": "carousel",
     "dependencies": [],
     "registryDependencies": [
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       "ui/carousel/Carousel.vue",
       "ui/carousel/CarouselContent.vue",
       "ui/carousel/CarouselItem.vue",
       "ui/carousel/CarouselNext.vue",
-      "ui/carousel/CarouselPrev.vue",
+      "ui/carousel/CarouselPrevious.vue",
       "ui/carousel/index.ts",
       "ui/carousel/interface.ts",
       "ui/carousel/useCarousel.ts"
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
new file mode 100644
index 000000000..952fcf2f4
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -0,0 +1,43 @@
+{
+  "name": "carousel",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n  EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\n"
+    },
+    {
+      "name": "interface.ts",
+      "content": "import type {\n  EmblaCarouselType as CarouselApi,\n  EmblaOptionsType as CarouselOptions,\n  EmblaPluginType as CarouselPlugin,\n} from 'embla-carousel'\nimport type { HTMLAttributes, Ref } from 'vue'\n\nexport interface CarouselProps {\n  opts?: CarouselOptions | Ref<CarouselOptions>\n  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: CarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
+    },
+    {
+      "name": "useCarousel.ts",
+      "content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n  EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts, orientation, plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(true)\n    const canScrollPrev = ref(true)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api.canScrollNext()\n      canScrollPrev.value = api.canScrollPrev()\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
new file mode 100644
index 000000000..8a5cdb9ec
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -0,0 +1,43 @@
+{
+  "name": "carousel",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n  EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\n"
+    },
+    {
+      "name": "interface.ts",
+      "content": "import type {\n  EmblaCarouselType as CarouselApi,\n  EmblaOptionsType as CarouselOptions,\n  EmblaPluginType as CarouselPlugin,\n} from 'embla-carousel'\nimport type { HTMLAttributes, Ref } from 'vue'\n\nexport interface CarouselProps {\n  opts?: CarouselOptions | Ref<CarouselOptions>\n  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: CarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
+    },
+    {
+      "name": "useCarousel.ts",
+      "content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n  EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts, orientation, plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(true)\n    const canScrollPrev = ref(true)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api.canScrollNext()\n      canScrollPrev.value = api.canScrollPrev()\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file

From d2f0865e3e3870cf0d998d8b825d8537a476743d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 9 Jan 2024 00:45:47 +0800
Subject: [PATCH 24/26] refactor: remove uneended ref

---
 .../src/lib/registry/default/example/CarouselPlugin.vue    | 7 +++----
 .../src/lib/registry/new-york/example/CarouselPlugin.vue   | 7 +++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
index a95e4be19..7c7a3d006 100644
--- a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import Autoplay from 'embla-carousel-autoplay'
-import { ref } from 'vue'
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
 
-const plugin = ref(Autoplay({
+const plugin = Autoplay({
   delay: 2000,
   stopOnMouseEnter: true,
   stopOnInteraction: false,
-}))
+})
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const plugin = ref(Autoplay({
       class="w-full max-w-xs"
       :plugins="[plugin]"
       @mouseenter="plugin.stop"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
     >
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
index 80c719206..9c2202f5a 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import Autoplay from 'embla-carousel-autoplay'
-import { ref } from 'vue'
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 
-const plugin = ref(Autoplay({
+const plugin = Autoplay({
   delay: 2000,
   stopOnMouseEnter: true,
   stopOnInteraction: false,
-}))
+})
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const plugin = ref(Autoplay({
       class="w-full max-w-xs"
       :plugins="[plugin]"
       @mouseenter="plugin.stop"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
     >
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">

From c3e9e9f86acdce9a4d4e1774293bcc70d8a656c1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 9 Jan 2024 00:46:10 +0800
Subject: [PATCH 25/26] fix: dependencies for embla missing

---
 apps/www/src/lib/registry/default/ui/carousel/Carousel.vue | 1 +
 .../www/src/lib/registry/new-york/ui/carousel/Carousel.vue | 1 +
 apps/www/src/lib/registry/registry.ts                      | 1 +
 apps/www/src/public/registry/index.json                    | 5 ++++-
 apps/www/src/public/registry/styles/default/carousel.json  | 7 +++++--
 apps/www/src/public/registry/styles/new-york/carousel.json | 7 +++++--
 apps/www/tsconfig.registry.json                            | 2 +-
 7 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index b6147c27a..c88d61ada 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,4 +1,5 @@
 <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'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index b6147c27a..c88d61ada 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,4 +1,5 @@
 <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'
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index a4ce9d9a5..fad35f7d7 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -8,6 +8,7 @@ const DEPENDENCIES = new Map<string, string[]>([
   ['@vueuse/core', []],
   ['v-calendar', []],
   ['@tanstack/vue-table', []],
+  ['embla-carousel-vue', ['embla-carousel']],
   ['vee-validate', ['@vee-validate/zod', 'zod']],
 ])
 // Some dependencies latest tag were not compatible with Vue3.
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 451004913..c2f5a4c8b 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -132,7 +132,10 @@
   },
   {
     "name": "carousel",
-    "dependencies": [],
+    "dependencies": [
+      "embla-carousel-vue",
+      "embla-carousel"
+    ],
     "registryDependencies": [
       "utils",
       "button"
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index 952fcf2f4..2f30eb8fb 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -1,6 +1,9 @@
 {
   "name": "carousel",
-  "dependencies": [],
+  "dependencies": [
+    "embla-carousel-vue",
+    "embla-carousel"
+  ],
   "registryDependencies": [
     "utils",
     "button"
@@ -8,7 +11,7 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index 8a5cdb9ec..f5d5bab15 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -1,6 +1,9 @@
 {
   "name": "carousel",
-  "dependencies": [],
+  "dependencies": [
+    "embla-carousel-vue",
+    "embla-carousel"
+  ],
   "registryDependencies": [
     "utils",
     "button"
@@ -8,7 +11,7 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",
diff --git a/apps/www/tsconfig.registry.json b/apps/www/tsconfig.registry.json
index d8beafc14..d89c8b4aa 100644
--- a/apps/www/tsconfig.registry.json
+++ b/apps/www/tsconfig.registry.json
@@ -9,5 +9,5 @@
     "declaration": false
   },
   "include": ["src/lib/**/*"],
-  "exclude": ["node_modules", "src/lib/registry/**/example/**/*", "src/lib/registry/default/ui/carousel/*", "src/lib/registry/new-york/ui/carousel/*"]
+  "exclude": ["node_modules", "src/lib/registry/**/example/**/*"]
 }

From c509c6794fb69bc145c1aa830cf43dd1fea49f45 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 9 Jan 2024 00:47:24 +0800
Subject: [PATCH 26/26] docs: update carousel for optional plugin installation

---
 apps/www/src/content/docs/components/carousel.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 83dc12c20..c1a34a739 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -256,6 +256,11 @@ You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scro
 
 You can use the `plugins` prop to add plugins to the carousel.
 
+```bash
+npm i embla-carousel-autoplay
+```
+
+
 ```vue showLineNumbers {2,8-10}
 <script setup lang="ts">
 import Autoplay from 'embla-carousel-autoplay'