{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-parallax",
  "title": "Parallax carousel",
  "description": "Styled carousel: the Parallax set. 5 decorative carousel variations (SoftCarousel, DeepCarousel, LayeredCarousel, TiltCarousel, ZoomCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/carousel-parallax.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Parallax carousel family: 5 self-contained sliders (NO embla, NO radix). On a\n   slide change the frame moves a full slide, but the inner layer of the slide\n   moves less (parallax depth). Each export is a complete carousel: it holds the\n   slide index internally, and the arrows + dots change it. Deterministic\n   (index-based, no Date.now or Math.random). The root carries\n   data-slot=\"styled-carousel\" and role=\"region\". Color comes ONLY from semantic\n   tokens; the active dot is primary, via alpha color-mix. Gated on framer's\n   useReducedMotion: under reduced motion there is no parallax transform and the\n   slide changes instantly. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst trackHeight: Record<StyledSize, string> = {\n  sm: \"h-40\",\n  md: \"h-56\",\n  lg: \"h-72\",\n  xl: \"h-96\",\n}\n\nconst focusRing =\n  \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\"\n\nconst arrowBtn =\n  \"absolute top-1/2 z-20 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-[color-mix(in_oklab,var(--color-background)_72%,transparent)] text-foreground shadow-sm transition-colors supports-[backdrop-filter]:backdrop-blur hover:bg-background [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* Token-surfaced, numbered placeholder panels - for prop-less rendering. */\nconst panelTones = [\"bg-surface-2\", \"bg-surface-3\", \"bg-muted\", \"bg-accent\"]\n\nfunction defaultSlides(count = 4): React.ReactNode[] {\n  return Array.from({ length: count }, (_, i) => (\n    <div\n      key={i}\n      className={cn(\n        \"flex h-full w-full items-center justify-center\",\n        panelTones[i % panelTones.length]\n      )}\n    >\n      <span className=\"text-4xl font-semibold tabular-nums text-foreground\">{i + 1}</span>\n    </div>\n  ))\n}\n\nfunction resolveSlides(slides?: React.ReactNode[]): React.ReactNode[] {\n  return slides && slides.length > 0 ? slides : defaultSlides()\n}\n\n/* Ortak index state: sonsuz sarma (wrap) ile prev/next ve dogrudan jump. */\nfunction useCarousel(count: number) {\n  const [index, setIndex] = React.useState(0)\n  const total = Math.max(count, 1)\n  const wrap = React.useCallback((i: number) => ((i % total) + total) % total, [total])\n  const go = React.useCallback((i: number) => setIndex(wrap(i)), [wrap])\n  const next = React.useCallback(() => setIndex((p) => wrap(p + 1)), [wrap])\n  const prev = React.useCallback(() => setIndex((p) => wrap(p - 1)), [wrap])\n  return { index: Math.min(index, total - 1), setIndex: go, next, prev }\n}\n\n/* Shared dot group: the active one widens and turns primary. */\nfunction CarouselDots({\n  count,\n  index,\n  onSelect,\n  className,\n}: {\n  count: number\n  index: number\n  onSelect: (i: number) => void\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      role=\"tablist\"\n      aria-label=\"Choose slide to display\"\n      className={cn(\"flex items-center justify-center\", className)}\n    >\n      {Array.from({ length: count }, (_, i) => {\n        const active = i === index\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={active}\n            aria-label={`Go to slide ${i + 1}`}\n            onClick={() => onSelect(i)}\n            className={cn(\n              \"relative inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full\",\n              focusRing\n            )}\n          >\n            <motion.span\n              aria-hidden=\"true\"\n              layout={!reduce}\n              transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 500, damping: 34 }}\n              className={cn(\n                \"block h-2 rounded-full transition-colors\",\n                active\n                  ? \"w-6 bg-primary\"\n                  : \"w-2 bg-[color-mix(in_oklab,var(--color-foreground)_25%,transparent)] hover:bg-[color-mix(in_oklab,var(--color-foreground)_45%,transparent)]\"\n              )}\n            />\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\ninterface CarouselProps {\n  className?: string\n  size?: StyledSize\n  slides?: React.ReactNode[]\n}\n\n/* Parallax settings. depth: how much less the inner layer moves relative to the frame (a percentage of its own width; smaller = deeper lag), rotate: rotateY per step (degrees), zoom: a slight shrink on the inactive slide, overlay: an extra token layer. */\ninterface ParallaxConfig {\n  depth: number\n  rotate: number\n  zoom: number\n  overlay: boolean\n}\n\nfunction Parallax({\n  className,\n  size = \"md\",\n  slides,\n  config,\n}: CarouselProps & { config: ParallaxConfig }) {\n  const reduce = useReducedMotion()\n  const items = resolveSlides(slides)\n  const { index, setIndex, next, prev } = useCarousel(items.length)\n  return (\n    <div\n      data-slot=\"styled-carousel\"\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label=\"Gallery\"\n      className={cn(\"relative w-full\", className)}\n    >\n      <div\n        className={cn(\"relative w-full overflow-hidden rounded-xl border border-border\", trackHeight[size])}\n        style={config.rotate && !reduce ? { perspective: \"1200px\" } : undefined}\n      >\n        <motion.div\n          className=\"flex h-full w-full [transform-style:preserve-3d]\"\n          animate={{ x: `-${index * 100}%` }}\n          transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 34 }}\n        >\n          {items.map((slide, i) => {\n            const offset = i - index\n            const active = offset === 0\n            const inner = reduce\n              ? { x: \"0%\", rotateY: 0, scale: 1 }\n              : {\n                  x: `${offset * config.depth}%`,\n                  rotateY: config.rotate ? -offset * config.rotate : 0,\n                  scale: active ? 1.1 : 1.1 - config.zoom,\n                }\n            return (\n              <div\n                key={i}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-label={`${i + 1} of ${items.length}`}\n                aria-hidden={!active}\n                className=\"relative h-full w-full shrink-0 basis-full overflow-hidden [transform-style:preserve-3d]\"\n              >\n                <motion.div\n                  className=\"h-full w-full\"\n                  initial={false}\n                  animate={inner}\n                  transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 34 }}\n                >\n                  {slide}\n                </motion.div>\n                {config.overlay && !reduce ? (\n                  <motion.span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-0 bg-gradient-to-tr from-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)] to-transparent\"\n                    initial={false}\n                    animate={{ x: `${offset * config.depth * 2}%` }}\n                    transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 34 }}\n                  />\n                ) : null}\n              </div>\n            )\n          })}\n        </motion.div>\n        <button type=\"button\" aria-label=\"Previous slide\" onClick={prev} className={cn(arrowBtn, focusRing, \"left-3\")}>\n          <ChevronLeft />\n        </button>\n        <button type=\"button\" aria-label=\"Next slide\" onClick={next} className={cn(arrowBtn, focusRing, \"right-3\")}>\n          <ChevronRight />\n        </button>\n      </div>\n      <CarouselDots count={items.length} index={index} onSelect={setIndex} className=\"mt-3\" />\n    </div>\n  )\n}\n\n/* Soft: hafif parallax, ic katman az kayar. */\nexport function SoftCarousel(props: CarouselProps) {\n  return <Parallax {...props} config={{ depth: 8, rotate: 0, zoom: 0, overlay: false }} />\n}\n\n/* Deep: pronounced parallax; the inner layer lags far behind. */\nexport function DeepCarousel(props: CarouselProps) {\n  return <Parallax {...props} config={{ depth: 22, rotate: 0, zoom: 0, overlay: false }} />\n}\n\n/* Layered: parallax + a token overlay layer moving at a different speed. */\nexport function LayeredCarousel(props: CarouselProps) {\n  return <Parallax {...props} config={{ depth: 12, rotate: 0, zoom: 0, overlay: true }} />\n}\n\n/* Tilt: parallax + hafif 3D rotateY egimi. */\nexport function TiltCarousel(props: CarouselProps) {\n  return <Parallax {...props} config={{ depth: 12, rotate: 10, zoom: 0, overlay: false }} />\n}\n\n/* Zoom: parallax + aktif slide yakinlasir, komsular uzaklasir. */\nexport function ZoomCarousel(props: CarouselProps) {\n  return <Parallax {...props} config={{ depth: 10, rotate: 0, zoom: 0.14, overlay: false }} />\n}\n",
      "type": "registry:component",
      "target": "components/ui/carousel-parallax.tsx"
    }
  ],
  "categories": [
    "styled",
    "carousel"
  ],
  "type": "registry:component"
}