{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-vertical",
  "title": "Vertical carousel",
  "description": "Styled carousel: the Vertical set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, StackCarousel) 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-vertical.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, ChevronUp } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Vertical carousel family: 5 self-contained vertical sliders (NO embla, NO\n   radix). The slides move along the y axis; the up/down arrows change the index.\n   Each export is a complete carousel: it holds the slide index internally.\n   Deterministic (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 the slide changes instantly and there is\n   no vertical transform. */\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\n/* Dikey ok butonu: yatay olarak ortalanir, ust/alt kenara yerlesir. */\nconst arrowBtnV =\n  \"absolute left-1/2 z-20 inline-flex size-9 -translate-x-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 up/down 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/* Vertical dot group: stacked along the right edge; the active one extends and turns primary. */\nfunction CarouselDotsV({\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 flex-col items-center justify-center gap-2\", 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 w-2 rounded-full transition-colors\",\n                active\n                  ? \"h-6 bg-primary\"\n                  : \"h-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\n/* Ust/alt ok cifti - dikey navigasyon. */\nfunction ArrowsV({ next, prev }: { next: () => void; prev: () => void }) {\n  return (\n    <>\n      <button type=\"button\" aria-label=\"Previous slide\" onClick={prev} className={cn(arrowBtnV, focusRing, \"top-3\")}>\n        <ChevronUp />\n      </button>\n      <button type=\"button\" aria-label=\"Next slide\" onClick={next} className={cn(arrowBtnV, focusRing, \"bottom-3\")}>\n        <ChevronDown />\n      </button>\n    </>\n  )\n}\n\ninterface CarouselProps {\n  className?: string\n  size?: StyledSize\n  slides?: React.ReactNode[]\n}\n\n/* Slide: slide'lar dikey kayar (translateY), ust/alt oklar. */\nexport function SlideCarousel({ className, size = \"md\", slides }: CarouselProps) {\n  const reduce = useReducedMotion()\n  const items = resolveSlides(slides)\n  const { index, 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 overflow-hidden rounded-xl border border-border\", trackHeight[size], className)}\n    >\n      <motion.div\n        className=\"flex h-full w-full flex-col\"\n        animate={{ y: `-${index * 100}%` }}\n        transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 320, damping: 34 }}\n      >\n        {items.map((slide, i) => (\n          <div\n            key={i}\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            aria-label={`${i + 1} of ${items.length}`}\n            aria-hidden={i !== index}\n            className=\"h-full w-full shrink-0 basis-full overflow-hidden\"\n          >\n            {slide}\n          </div>\n        ))}\n      </motion.div>\n      <ArrowsV next={next} prev={prev} />\n    </div>\n  )\n}\n\n/* Fade: the slides cross-fade, with top/bottom arrows. */\nexport function FadeCarousel({ className, size = \"md\", slides }: CarouselProps) {\n  const reduce = useReducedMotion()\n  const items = resolveSlides(slides)\n  const { index, 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 overflow-hidden rounded-xl border border-border\", trackHeight[size], className)}\n    >\n      <AnimatePresence initial={false} mode=\"sync\">\n        <motion.div\n          key={index}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${index + 1} of ${items.length}`}\n          className=\"absolute inset-0 h-full w-full\"\n          initial={reduce ? false : { opacity: 0, y: \"8%\" }}\n          animate={{ opacity: 1, y: \"0%\" }}\n          exit={reduce ? { opacity: 0 } : { opacity: 0, y: \"-8%\" }}\n          transition={reduce ? { duration: 0 } : { duration: 0.4, ease: \"easeInOut\" }}\n        >\n          {items[index]}\n        </motion.div>\n      </AnimatePresence>\n      <ArrowsV next={next} prev={prev} />\n    </div>\n  )\n}\n\n/* Cards: ust/alttaki komsu kartlarin ucu gorunur, orta kart one cikar (buyur +\n   tam opak). Dikey istif, ust/alt oklar. */\nexport function CardsCarousel({ className, size = \"md\", slides }: CarouselProps) {\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 overflow-hidden rounded-xl\", trackHeight[size], className)}\n    >\n      <motion.div\n        className=\"flex h-full w-full flex-col items-center\"\n        animate={{ y: `calc(${-index * 70}% + 15%)` }}\n        transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 32 }}\n      >\n        {items.map((slide, i) => {\n          const active = i === index\n          return (\n            <motion.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=\"w-full shrink-0 basis-[70%] py-2\"\n              animate={{ scale: active ? 1 : 0.86, opacity: active ? 1 : 0.5 }}\n              transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 32 }}\n            >\n              <button\n                type=\"button\"\n                tabIndex={active ? -1 : 0}\n                aria-label={`Go to slide ${i + 1}`}\n                onClick={() => setIndex(i)}\n                className={cn(\"block h-full w-full overflow-hidden rounded-xl border border-border\", focusRing)}\n              >\n                {slide}\n              </button>\n            </motion.div>\n          )\n        })}\n      </motion.div>\n      <ArrowsV next={next} prev={prev} />\n    </div>\n  )\n}\n\n/* Dots: minimal, vertical dots only (no arrows); tapping a dot jumps to that slide.\n   The dots overlap the right edge of the image. */\nexport function DotsCarousel({ className, size = \"md\", slides }: CarouselProps) {\n  const reduce = useReducedMotion()\n  const items = resolveSlides(slides)\n  const { index, setIndex } = 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 overflow-hidden rounded-xl border border-border\", trackHeight[size], className)}\n    >\n      <AnimatePresence initial={false} mode=\"sync\">\n        <motion.div\n          key={index}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${index + 1} of ${items.length}`}\n          className=\"absolute inset-0 h-full w-full\"\n          initial={reduce ? false : { opacity: 0, y: \"8%\" }}\n          animate={{ opacity: 1, y: \"0%\" }}\n          exit={reduce ? { opacity: 0 } : { opacity: 0, y: \"-8%\" }}\n          transition={reduce ? { duration: 0 } : { duration: 0.35, ease: \"easeInOut\" }}\n        >\n          {items[index]}\n        </motion.div>\n      </AnimatePresence>\n      <div className=\"absolute inset-y-0 right-3 z-10 flex items-center\">\n        <CarouselDotsV count={items.length} index={index} onSelect={setIndex} />\n      </div>\n    </div>\n  )\n}\n\n/* Stack: komsu slide'lar merkezin arkasina dikey istiflenir (y kaymasi + kuculme +\n   solma); ust/alt oklar. */\nexport function StackCarousel({ className, size = \"md\", slides }: CarouselProps) {\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 overflow-hidden rounded-xl\", trackHeight[size], className)}\n    >\n      <div className=\"relative h-full w-full\">\n        {items.map((slide, i) => {\n          const offset = i - index\n          const abs = Math.abs(offset)\n          const active = offset === 0\n          const target = reduce\n            ? { y: \"0%\", scale: 1, opacity: active ? 1 : 0 }\n            : {\n                y: `${offset * 14}%`,\n                scale: Math.max(0.82, 1 - abs * 0.08),\n                opacity: abs > 2 ? 0 : 1,\n              }\n          return (\n            <motion.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=\"absolute inset-x-4 top-1/2 h-[70%] -translate-y-1/2 overflow-hidden rounded-xl border border-border shadow-sm\"\n              style={{ zIndex: 100 - abs }}\n              initial={false}\n              animate={target}\n              transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 260, damping: 30 }}\n            >\n              <button\n                type=\"button\"\n                tabIndex={active ? -1 : 0}\n                aria-label={`Go to slide ${i + 1}`}\n                onClick={() => setIndex(i)}\n                className={cn(\"block h-full w-full\", focusRing)}\n              >\n                {slide}\n              </button>\n            </motion.div>\n          )\n        })}\n      </div>\n      <ArrowsV next={next} prev={prev} />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/carousel-vertical.tsx"
    }
  ],
  "categories": [
    "styled",
    "carousel"
  ],
  "type": "registry:component"
}