{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-carousel",
  "title": "MicroClub Carousel",
  "description": "A carousel component for MicroClub UI",
  "dependencies": [
    "embla-carousel-react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-carousel.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { McButton } from '@/components/ui/mc-button';\n\ntype McCarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: McCarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst McCarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useMcCarousel() {\n  const context = React.useContext(McCarouselContext);\n\n  if (!context) {\n    throw new Error('useMcCarousel must be used within a <McCarousel />');\n  }\n\n  return context;\n}\n\nfunction McCarousel({\n  orientation = 'horizontal',\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: McCarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api?.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <McCarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn('relative', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </McCarouselContext.Provider>\n  );\n}\n\nfunction McCarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useMcCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden   \" data-slot=\"carousel-content\">\n      <div\n        className={cn('flex', orientation === 'horizontal' ? '' : '-mt-4 flex-col', className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction McCarouselItem({ className, children, ...props }: React.ComponentProps<'div'>) {\n  const { orientation } = useMcCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        ' shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? ' ' : '',\n        className\n      )}\n      {...props}\n    >\n      {/* Card shell matching Figma \"Wrapper\" spec exactly */}\n      <div\n        data-slot=\"carousel-item-card\"\n        className=\"flex h-full w-full flex-col items-center justify-center gap-[8.14px] rounded-xl border border-border bg-card  text-card-foreground shadow\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction McCarouselPrevious({ className, ...props }: React.ComponentProps<typeof McButton>) {\n  const { orientation, scrollPrev, canScrollPrev } = useMcCarousel();\n\n  return (\n    <McButton\n      data-slot=\"carousel-previous\"\n      variant=\"secondary\"\n      size=\"sm\"\n      icon=\"only\"\n      iconDefinition={<ChevronLeftIcon />}\n      className={cn(\n        'absolute size-8.5 touch-manipulation rounded-full border border-border bg-card p-2.5 shadow-[0px_0.81px_2.44px_0px_rgba(0,0,0,0.1)] [&_svg]:size-4',\n        orientation === 'horizontal'\n          ? 'inset-y-0 -left-12 my-auto'\n          : '-top-12 -right-[-140px] rotate-90',\n\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <span className=\"sr-only\">Previous slide</span>\n    </McButton>\n  );\n}\n\nfunction McCarouselNext({ className, ...props }: React.ComponentProps<typeof McButton>) {\n  const { orientation, scrollNext, canScrollNext } = useMcCarousel();\n\n  return (\n    <McButton\n      data-slot=\"carousel-next\"\n      variant=\"secondary\"\n      size=\"sm\"\n      icon=\"only\"\n      iconDefinition={<ChevronRightIcon />}\n      className={cn(\n        'absolute size-[34px] touch-manipulation rounded-full border-[1px] border-border bg-card p-[10px] [&_svg]:size-4',\n        orientation === 'horizontal'\n          ? 'inset-y-0 -right-12 my-auto'\n          : '-bottom-12 -right-[-140px]   rotate-90',\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <span className=\"sr-only\">Next slide</span>\n    </McButton>\n  );\n}\n\nexport {\n  type McCarouselApi,\n  McCarousel,\n  McCarouselContent,\n  McCarouselItem,\n  McCarouselPrevious,\n  McCarouselNext,\n  useMcCarousel,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}