{
  "name": "carousel",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "Carousel.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { provideCarouselContext } from '~/composables/useCarousel'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: string\n    initialIndex?: number\n    index?: number\n    disableDrag?: boolean\n  }>(),\n  {\n    initialIndex: 0,\n    disableDrag: false,\n  },\n)\n\nconst emit = defineEmits<{\n  indexChange: [index: number]\n}>()\n\nconst internalIndex = ref(props.initialIndex)\nconst isControlled = computed(() => props.index !== undefined)\nconst currentIndex = computed(() =>\n  isControlled.value ? props.index! : internalIndex.value,\n)\nconst itemsCount = ref(0)\n\nfunction setIndex(newIndex: number) {\n  if (!isControlled.value) {\n    internalIndex.value = newIndex\n  }\n  emit('indexChange', newIndex)\n}\n\nfunction setItemsCount(count: number) {\n  itemsCount.value = count\n}\n\nwatch(\n  () => props.initialIndex,\n  (val) => (internalIndex.value = val),\n)\n\nprovideCarouselContext({\n  index: currentIndex,\n  setIndex,\n  itemsCount,\n  setItemsCount,\n  disableDrag: computed(() => props.disableDrag),\n})\n</script>\n\n<template>\n  <div :class=\"cn('group/hover relative', props.class)\">\n    <div class=\"overflow-hidden\">\n      <slot />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "CarouselContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, useMotionValue } from 'motion-v'\nimport type { VNode } from 'vue'\nimport { Fragment } from 'vue'\nimport { useCarousel } from '~/composables/useCarousel'\n\nconst props = defineProps<{\n  class?: string\n  transition?: Record<string, string | number | boolean>\n}>()\n\nconst { index, setIndex, setItemsCount, disableDrag } = useCarousel()\n\nconst visibleItemsCount = ref(1)\nconst dragX = useMotionValue(0)\nconst componentRef = useTemplateRef('carouselContentEl')\nconst containerEl = computed(() => {\n  const ref = componentRef.value\n  if (!ref) return null\n  return (ref as any).$el as HTMLDivElement | null\n})\n\nconst slots = useSlots()\nconst itemsLength = computed(() => {\n  const defaultSlot = slots.default?.()\n  if (!defaultSlot) return 0\n  return defaultSlot.flatMap((vnode) =>\n    vnode.type === Fragment ? (vnode.children as VNode[]) || [] : [vnode],\n  ).length\n})\n\nwatch(itemsLength, (len) => {\n  if (len) setItemsCount(len)\n}, { immediate: true })\n\nonMounted(() => {\n  const el = containerEl.value\n  if (!el || !(el instanceof Element)) return\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      const visibleCount = entries.filter((e) => e.isIntersecting).length\n      visibleItemsCount.value = visibleCount\n    },\n    { root: el, threshold: 0.5 },\n  )\n\n  Array.from(el.children).forEach((child) => observer.observe(child))\n\n  onUnmounted(() => observer.disconnect())\n})\n\nfunction onDragEnd() {\n  const x = dragX.get()\n  if (x <= -10 && index.value < itemsLength.value - 1) {\n    setIndex(index.value + 1)\n  } else if (x >= 10 && index.value > 0) {\n    setIndex(index.value - 1)\n  }\n}\n\nconst defaultTransition = {\n  damping: 18,\n  stiffness: 90,\n  type: 'spring' as const,\n  duration: 0.2,\n}\n</script>\n\n<template>\n  <Motion\n    ref=\"carouselContentEl\"\n    :drag=\"disableDrag ? false : 'x'\"\n    :drag-constraints=\"disableDrag ? undefined : { left: 0, right: 0 }\"\n    :drag-momentum=\"disableDrag ? undefined : false\"\n    :style=\"disableDrag ? undefined : { x: dragX }\"\n    :animate=\"{\n      translateX: `-${index * (100 / visibleItemsCount)}%`,\n    }\"\n    :transition=\"props.transition || defaultTransition\"\n    :class=\"\n      cn(\n        'flex items-center',\n        !disableDrag && 'cursor-grab active:cursor-grabbing',\n        props.class,\n      )\n    \"\n    @drag-end=\"disableDrag ? undefined : onDragEnd()\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "CarouselIndicator.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { useCarousel } from '~/composables/useCarousel'\n\nconst props = defineProps<{\n  class?: string\n  classNameButton?: string\n}>()\n\nconst { index, setIndex, itemsCount } = useCarousel()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'absolute bottom-0 z-10 flex w-full items-center justify-center',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"flex space-x-2\">\n      <button\n        v-for=\"i in itemsCount\"\n        :key=\"i - 1\"\n        type=\"button\"\n        :aria-label=\"`Go to slide ${i}`\"\n        :class=\"\n          cn(\n            'h-2 w-2 rounded-full transition-opacity duration-300',\n            index === i - 1\n              ? 'bg-zinc-950 dark:bg-zinc-50'\n              : 'bg-zinc-900/50 dark:bg-zinc-100/50',\n            props.classNameButton,\n          )\n        \"\n        @click=\"setIndex(i - 1)\"\n      />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "CarouselItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\n\ndefineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <Motion\n    :class=\"cn('w-full min-w-0 shrink-0 grow-0 overflow-hidden', $props.class)\"\n  >\n    <slot />\n  </Motion>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "CarouselNavigation.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { useCarousel } from '~/composables/useCarousel'\n\nconst props = defineProps<{\n  class?: string\n  classNameButton?: string\n  alwaysShow?: boolean\n}>()\n\nconst { index, setIndex, itemsCount } = useCarousel()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'pointer-events-none absolute left-[-12.5%] top-1/2 flex w-[125%] -translate-y-1/2 justify-between px-2',\n        props.class,\n      )\n    \"\n  >\n    <button\n      type=\"button\"\n      aria-label=\"Previous slide\"\n      :class=\"\n        cn(\n          'pointer-events-auto h-fit w-fit rounded-full bg-zinc-50 p-2 transition-opacity duration-300 dark:bg-zinc-950',\n          props.alwaysShow ? 'opacity-100' : 'opacity-0 group-hover/hover:opacity-100',\n          props.alwaysShow ? 'disabled:opacity-40' : 'group-hover/hover:disabled:opacity-40',\n          props.classNameButton,\n        )\n      \"\n      :disabled=\"index === 0\"\n      @click=\"index > 0 && setIndex(index - 1)\"\n    >\n      <ChevronLeft class=\"stroke-zinc-600 dark:stroke-zinc-50\" :size=\"16\" />\n    </button>\n    <button\n      type=\"button\"\n      aria-label=\"Next slide\"\n      :class=\"\n        cn(\n          'pointer-events-auto h-fit w-fit rounded-full bg-zinc-50 p-2 transition-opacity duration-300 dark:bg-zinc-950',\n          props.alwaysShow ? 'opacity-100' : 'opacity-0 group-hover/hover:opacity-100',\n          props.alwaysShow ? 'disabled:opacity-40' : 'group-hover/hover:disabled:opacity-40',\n          props.classNameButton,\n        )\n      \"\n      :disabled=\"index + 1 === itemsCount\"\n      @click=\"index < itemsCount - 1 && setIndex(index + 1)\"\n    >\n      <ChevronRight class=\"stroke-zinc-600 dark:stroke-zinc-50\" :size=\"16\" />\n    </button>\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "composables/useCarousel.ts",
      "content": "export interface CarouselContext {\r\n  index: Ref<number>\r\n  setIndex: (index: number) => void\r\n  itemsCount: Ref<number>\r\n  setItemsCount: (count: number) => void\r\n  disableDrag: Ref<boolean>\r\n}\r\n\r\nconst CAROUSEL_KEY = Symbol('carousel') as InjectionKey<CarouselContext>\r\n\r\nexport function provideCarouselContext(context: CarouselContext) {\r\n  provide(CAROUSEL_KEY, context)\r\n}\r\n\r\nexport function useCarousel(): CarouselContext {\r\n  const context = inject(CAROUSEL_KEY)\r\n  if (!context) {\r\n    throw new Error('useCarousel must be used within a <Carousel> component')\r\n  }\r\n  return context\r\n}\r\n",
      "type": "registry:hook"
    }
  ]
}