{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-deck",
  "dependencies": [
    "lucide-react",
    "framer-motion",
    "swiper"
  ],
  "files": [
    {
      "path": "components/ui/card-deck.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { motion } from \"framer-motion\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { Autoplay, EffectCards, Navigation, Pagination } from \"swiper/modules\"\nimport { Swiper, SwiperSlide } from \"swiper/react\"\n\nimport \"swiper/css/effect-cards\"\nimport \"swiper/css/pagination\"\nimport \"swiper/css/navigation\"\nimport \"swiper/css\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface CardDeckContainerProps {\n  children: React.ReactNode\n  className?: string\n  showPagination?: boolean\n  showNavigation?: boolean\n  autoplay?: boolean\n  spaceBetween?: number\n  enableInitialAnimation?: boolean\n}\n\ninterface CardDeckItemProps {\n  children: React.ReactNode\n  className?: string\n}\n\n// New modular API components\nexport function CardDeckContainer({\n  children,\n  className,\n  showPagination = false,\n  showNavigation = false,\n  autoplay = false,\n  spaceBetween = 40,\n  enableInitialAnimation = true,\n}: CardDeckContainerProps) {\n  const css = `\n  .card-deck {\n    padding: 20px 0 50px 0 !important;\n  }\n  .card-deck .swiper-slide {\n    overflow: visible !important;\n  }\n  .card-deck .swiper-slide-shadow-cards {\n    border-radius: 1.5rem !important;\n  }\n  `\n\n  return (\n    <motion.div\n      initial={enableInitialAnimation ? { opacity: 0, translateY: 20 } : false}\n      animate={enableInitialAnimation ? { opacity: 1, translateY: 0 } : false}\n      transition={\n        enableInitialAnimation\n          ? {\n              duration: 0.3,\n              delay: 0.5,\n            }\n          : undefined\n      }\n      className={cn(\"relative w-full max-w-3xl overflow-visible\", className)}\n    >\n      <style>{css}</style>\n\n      <Swiper\n        spaceBetween={spaceBetween}\n        autoplay={\n          autoplay\n            ? {\n                delay: 1000,\n                disableOnInteraction: false,\n              }\n            : false\n        }\n        effect=\"cards\"\n        grabCursor={true}\n        loop={false}\n        allowTouchMove={true}\n        touchRatio={1}\n        resistance={true}\n        resistanceRatio={0.85}\n        pagination={\n          showPagination\n            ? {\n                clickable: true,\n              }\n            : false\n        }\n        navigation={\n          showNavigation\n            ? {\n                nextEl: \".swiper-button-next\",\n                prevEl: \".swiper-button-prev\",\n              }\n            : false\n        }\n        className=\"card-deck h-[360px] w-[240px] sm:h-[420px] sm:w-[280px]\"\n        modules={[EffectCards, Autoplay, Pagination, Navigation]}\n      >\n        {children &&\n          React.Children.map(children, (child, index) => {\n            if (React.isValidElement(child)) {\n              // @ts-expect-error - React element props access\n              const slideClass = child.props.className || \"rounded-3xl\"\n\n              return (\n                <SwiperSlide\n                  key={index}\n                  className={cn(slideClass, \"overflow-hidden\")}\n                >\n                  {/* @ts-expect-error - React element props access */}\n                  {child.props.children}\n                </SwiperSlide>\n              )\n            }\n            return null\n          })}\n        {showNavigation && (\n          <div>\n            <div className=\"swiper-button-next after:hidden\">\n              <ChevronRightIcon className=\"h-6 w-6 text-white\" />\n            </div>\n            <div className=\"swiper-button-prev after:hidden\">\n              <ChevronLeftIcon className=\"h-6 w-6 text-white\" />\n            </div>\n          </div>\n        )}\n      </Swiper>\n    </motion.div>\n  )\n}\n\nexport function CardDeckItem({ children, className }: CardDeckItemProps) {\n  // This component passes its children and className to CardDeckContainer for rendering\n  return <>{children}</>\n}\n\n// Legacy API for backward compatibility\ninterface CardDeckProps {\n  images: { src: string; alt: string }[]\n  autoplay?: boolean\n  showPagination?: boolean\n  showNavigation?: boolean\n  spaceBetween?: number\n  className?: string\n  enableInitialAnimation?: boolean\n}\n\nexport function CardDeck({\n  images,\n  autoplay = false,\n  showPagination = false,\n  showNavigation = false,\n  spaceBetween = 40,\n  className,\n  enableInitialAnimation = true,\n}: CardDeckProps) {\n  return (\n    <CardDeckContainer\n      autoplay={autoplay}\n      showPagination={showPagination}\n      showNavigation={showNavigation}\n      spaceBetween={spaceBetween}\n      className={className}\n      enableInitialAnimation={enableInitialAnimation}\n    >\n      {images &&\n        images.map((image, index) => (\n          <CardDeckItem key={index} className=\"rounded-3xl\">\n            <img\n              className=\"h-full w-full rounded-3xl object-cover\"\n              src={image.src}\n              alt={image.alt}\n            />\n          </CardDeckItem>\n        ))}\n    </CardDeckContainer>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}