{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-x-carousel",
  "title": "Scroll X Carousel",
  "description": "Scroll carousel on x axis, with optional progress indicator.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/scroll-x-carousel/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  HTMLMotionProps,\n  motion,\n  MotionValue,\n  useReducedMotion,\n  useScroll,\n  useSpring,\n  useTransform,\n} from 'motion/react';\n\ninterface ScrollXCarouselContextValue {\n  scrollYProgress: MotionValue<number>;\n}\n\nconst ScrollXCarouselContext =\n  React.createContext<ScrollXCarouselContextValue | null>(null);\nfunction useScrollXCarousel() {\n  const context = React.useContext(ScrollXCarouselContext);\n  if (!context) {\n    throw new Error('useScrollXCarousel must be used within a ScrollXCarousel');\n  }\n  return context;\n}\nexport function ScrollXCarousel({\n  children,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const carouselRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: carouselRef,\n  });\n  return (\n    <ScrollXCarouselContext.Provider value={{ scrollYProgress }}>\n      <div\n        ref={carouselRef}\n        className={cn('relative max-w-full', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </ScrollXCarouselContext.Provider>\n  );\n}\n\nexport function ScrollXCarouselContainer({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('sticky overflow-hidden w-full top-0 left-0', className)}\n      {...props}\n    />\n  );\n}\nexport function ScrollXCarouselWrap({\n  className,\n  style,\n  xRagnge = ['-0%', '-80%'],\n  ...props\n}: HTMLMotionProps<'div'> & { xRagnge?: unknown[] }) {\n  const { scrollYProgress } = useScrollXCarousel();\n  const reducedMotion = useReducedMotion();\n  const smoothProgress = useSpring(scrollYProgress, {\n    damping: 30,\n    stiffness: 400,\n    restDelta: 0.001, // Important for stopping micro-animations\n  });\n\n  const scrollProgress = reducedMotion ? scrollYProgress : smoothProgress;\n\n  const x = useTransform(scrollProgress, [0, 1], xRagnge);\n\n  return (\n    <motion.div\n      className={cn('w-fit', className)}\n      style={{ x, willChange: 'transform', ...style }}\n      {...props}\n    />\n  );\n}\nexport function ScrollXCarouselProgress({\n  className,\n  style,\n  progressStyle,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { progressStyle?: string }) {\n  const { scrollYProgress } = useScrollXCarousel();\n  const scaleX = useTransform(scrollYProgress, [0, 1], [0, 1]);\n  return (\n    <div className={cn('max-w-screen overflow-hidden', className)} {...props}>\n      <motion.div\n        className={cn('origin-left', progressStyle)}\n        style={{ scaleX, ...style }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-x-carousel.tsx"
    }
  ],
  "type": "registry:block"
}