{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-carousel",
  "title": "Product Carousel",
  "description": "Showcase your products with preview image for each product and display your different product colors.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ecommerce/product-carousel/index.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { motion } from 'motion/react';\nimport React from 'react';\n\nconst productCarouselWrapperVariants = cva(\n  'relative size-full aspect-square grid grid-cols-1 grid-rows-1 *:row-start-1 *:col-start-1 overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: '',\n        withOverlay:\n          'after:absolute after:rounded-[inherit] after:inset-0 after:bg-gray-950/5 after:z-10 after:pointer-events-none',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\nexport interface ProductCarouselWrapperProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof productCarouselWrapperVariants> {}\ninterface ProductCarouselProps extends React.ComponentProps<'div'> {\n  className?: string;\n}\ninterface ProductCarouselContextValue {\n  activeSlide: number;\n  setActiveSlide: React.Dispatch<React.SetStateAction<number>>;\n}\nconst ProductCarouselContext = React.createContext<\n  ProductCarouselContextValue | undefined\n>(undefined);\n\nfunction useProductCarouselContext() {\n  const context = React.useContext(ProductCarouselContext);\n  if (context === undefined) {\n    throw new Error(\n      'useProductCarouselContext must be used within a ProductCarousel',\n    );\n  }\n  return context;\n}\nexport function ProductImage({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'group size-full relative z-10 inline-grid grid-cols-1 grid-rows-1 *:col-start-1 *:row-start-1 *:will-change-[opacity] *:transition-opacity *:duration-300 *:ease-out',\n        '[&>:first-child]:opacity-100 [&>:first-child]:group-hover:opacity-0',\n        '[&>:nth-child(2)]:opacity-0 [&>:nth-child(2)]:group-hover:opacity-100',\n        'after:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ProductCarouselSlide({\n  className,\n  index,\n  ...props\n}: React.ComponentPropsWithRef<'div'> & { index: number }) {\n  const { activeSlide } = useProductCarouselContext();\n  const isActive = activeSlide === index;\n  return (\n    <div\n      className={cn(\n        `size-full transition-opacity duration-300 ease-out ${isActive ? 'opacity-100' : 'opacity-0'}`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ninterface ProductCarouselThumbnailProps extends React.ComponentProps<'button'> {\n  index: number;\n  layoutId: string;\n  activeLayoutClassName?: string;\n}\nexport function ProductCarouselThumbnail({\n  index,\n  layoutId,\n  activeLayoutClassName,\n  className,\n  children,\n  ...props\n}: ProductCarouselThumbnailProps) {\n  const { activeSlide, setActiveSlide } = useProductCarouselContext();\n  const isActive = activeSlide === index;\n  const handleMouseEnter = () => setActiveSlide(index);\n\n  return (\n    <button\n      className={cn(\n        'size-4 border border-border/50 cursor-pointer relative',\n        className,\n      )}\n      onMouseEnter={handleMouseEnter}\n      {...props}\n    >\n      {isActive && (\n        <motion.div\n          layoutId={layoutId}\n          className={cn(\n            'absolute border border-foreground/30 rounded-[inherit] -left-[3px] z-10 -top-[3px] size-5',\n            activeLayoutClassName,\n          )}\n          transition={{\n            type: 'spring',\n            stiffness: 500,\n            damping: 50,\n            mass: 1,\n          }}\n        />\n      )}\n      {children}\n    </button>\n  );\n}\nexport function ProductCarouselWrapper({\n  className,\n  variant,\n  ...props\n}: ProductCarouselWrapperProps) {\n  return (\n    <div\n      className={cn(productCarouselWrapperVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nexport function ProductCarousel({ className, ...props }: ProductCarouselProps) {\n  const [activeSlide, setActiveSlide] = React.useState<number>(0);\n  return (\n    <ProductCarouselContext.Provider value={{ activeSlide, setActiveSlide }}>\n      <div className={cn('relative ', className)} {...props} />\n    </ProductCarouselContext.Provider>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/product-carousel.tsx"
    }
  ],
  "type": "registry:block"
}