@edgedev/create-edge-app 1.1.5 → 1.1.6

package/components/ui/auto-form/index.ts

@@ -1,15 +1,15 @@
-export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
-export type { Config, ConfigItem, FieldProps } from './interface'
-
 export { default as AutoForm } from './AutoForm.vue'
 export { default as AutoFormField } from './AutoFormField.vue'
-export { default as AutoFormLabel } from './AutoFormLabel.vue'
 
 export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
 export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
 export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+
 export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
 export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
 export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
 export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
 export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
+export type { Config, ConfigItem, FieldProps } from './interface'
+export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'

package/components/ui/auto-form/interface.ts

@@ -1,5 +1,5 @@
 import type { Component, InputHTMLAttributes } from 'vue'
-import type { ZodAny, z } from 'zod'
+import type { z, ZodAny } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
 export interface FieldProps {
@@ -18,6 +18,20 @@ export interface Shape {
   schema?: ZodAny
 }
 
+export interface InputComponents {
+  date: Component
+  select: Component
+  radio: Component
+  checkbox: Component
+  switch: Component
+  textarea: Component
+  number: Component
+  string: Component
+  file: Component
+  array: Component
+  object: Component
+}
+
 export interface ConfigItem {
   /** Value for the `FormLabel` */
   label?: string

package/components/ui/auto-form/utils.ts

@@ -39,7 +39,7 @@ export function getBaseSchema<
   ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
 >(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
   if (!schema)
-    return null
+    return null;
   if ('innerType' in schema._def)
     return getBaseSchema(schema._def.innerType as ChildType)
 
@@ -55,7 +55,7 @@ export function getBaseSchema<
  */
 export function getBaseType(schema: z.ZodAny) {
   const baseSchema = getBaseSchema(schema)
-  return baseSchema ? baseSchema._def.typeName : ''
+  return baseSchema ? baseSchema._def.typeName : '';
 }
 
 /**
@@ -94,7 +94,7 @@ export function getObjectFormSchema(
 }
 
 function isIndex(value: unknown): value is number {
-  return Number(value) >= 0
+  return Number(value) >= 0;
 }
 /**
  * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
@@ -102,7 +102,7 @@ function isIndex(value: unknown): value is number {
 export function normalizeFormPath(path: string): string {
   const pathArr = path.split('.')
   if (!pathArr.length)
-    return ''
+    return '';
 
   let fullPath = String(pathArr[0])
   for (let i = 1; i < pathArr.length; i++) {
@@ -125,14 +125,14 @@ export function isNotNestedPath(path: string) {
   return /^\[.+\]$/.test(path)
 }
 function isObject(obj: unknown): obj is Record<string, unknown> {
-  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
+  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj);
 }
 function isContainerValue(value: unknown): value is Record<string, unknown> {
   return isObject(value) || Array.isArray(value)
 }
 function cleanupNonNestedPath(path: string) {
   if (isNotNestedPath(path))
-    return path.replace(/\[|\]/g, '')
+    return path.replace(/\[|\]/g, '');
 
   return path
 }
@@ -169,3 +169,20 @@ export function getFromPath<TValue = unknown, TFallback = TValue>(
 
   return resolvedValue as TValue | undefined
 }
+
+type Booleanish = boolean | 'true' | 'false'
+
+export function booleanishToBoolean(value: Booleanish) {
+  switch (value) {
+    case 'true':
+    case true:
+      return true;
+    case 'false':
+    case false:
+      return false;
+  }
+}
+
+export function maybeBooleanishToBoolean(value?: Booleanish) {
+  return value ? booleanishToBoolean(value) : undefined
+}

package/components/ui/avatar/Avatar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { type AvatarVariants, avatarVariant } from '.'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/avatar/AvatarFallback.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>

package/components/ui/avatar/AvatarImage.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>

package/components/ui/avatar/index.ts

@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
 export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
 
 export const avatarVariant = cva(
   'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',

package/components/ui/badge/Badge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
 import { type BadgeVariants, badgeVariants } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   variant?: BadgeVariants['variant']

package/components/ui/badge/index.ts

@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 

package/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
 import { MoreHorizontal } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',

package/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -12,7 +12,7 @@ const props = defineProps<{
   <li
     role="presentation"
     aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
   >
     <slot>
       <ChevronRight />

package/components/ui/button/Button.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']

package/components/ui/button/index.ts

@@ -1,9 +1,10 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -19,7 +20,6 @@ export const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
-        xs: 'h-7 rounded px-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',

package/components/ui/calendar/Calendar.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
 
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <CalendarCell
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 
@@ -28,7 +28,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       // Unavailable
       'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
       // Outside months
-      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
       props.class,
     )"
     v-bind="forwardedProps"

package/components/ui/calendar/CalendarGrid.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarGridBody.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridBodyProps>()
 </script>

package/components/ui/calendar/CalendarGridHead.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridHeadProps>()
 </script>

package/components/ui/calendar/CalendarGridRow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarHeadCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarHeader.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarHeading.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
 
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 

package/components/ui/calendar/CalendarNextButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/calendar/CalendarPrevButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
 import { ChevronLeft } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/card/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/CardContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/CardDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/CardFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/CardHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/CardTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/card/index.ts

@@ -1,6 +1,6 @@
 export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
 export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
 export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

package/components/ui/carousel/Carousel.vue

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

package/components/ui/carousel/CarouselContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { useCarousel } from './useCarousel'
 
 defineOptions({
   inheritAttrs: false,

package/components/ui/carousel/CarouselItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
 

package/components/ui/carousel/CarouselNext.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '~/lib/utils'
+import { Button } from '~/components/ui/button'
 import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
@@ -25,6 +25,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   >
     <slot>
       <ArrowRight class="h-4 w-4 text-current" />
+      <span class="sr-only">Next Slide</span>
     </slot>
   </Button>
 </template>