{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-thumbnails",
  "title": "Thumbnails carousel",
  "description": "Styled carousel: the Thumbnails set. 5 decorative carousel variations (BelowCarousel, SideCarousel, DotsThumbsCarousel, ScaledCarousel, BorderedCarousel) 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-thumbnails.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Thumbnails carousel family: 5 self-contained sliders (NO embla, NO radix). A\n   strip of small previews sits below (or beside) the main image; clicking a\n   thumbnail jumps to that slide. Each export is a complete carousel: it holds the\n   slide index internally, and the arrows + thumbnails 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 thumbnail gets a primary frame, via alpha color-mix. Gated\n   on framer's useReducedMotion: under reduced motion the slide changes\n   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/* The main image: the slides cross-fade, with arrows over them. */\nfunction MainViewer({\n  items,\n  index,\n  next,\n  prev,\n  size,\n  reduce,\n}: {\n  items: React.ReactNode[]\n  index: number\n  next: () => void\n  prev: () => void\n  size: StyledSize\n  reduce: boolean | null\n}) {\n  return (\n    <div className={cn(\"relative w-full flex-1 overflow-hidden rounded-xl border border-border\", trackHeight[size])}>\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 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={reduce ? { duration: 0 } : { duration: 0.35, ease: \"easeInOut\" }}\n        >\n          {items[index]}\n        </motion.div>\n      </AnimatePresence>\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  )\n}\n\n/* The thumbnail strip settings. orientation: horizontal (below) or vertical\n   (beside), scaled: the active thumbnail grows, border: every thumbnail gets a\n   pronounced frame. */\ninterface ThumbConfig {\n  orientation: \"row\" | \"col\"\n  scaled: boolean\n  bordered: boolean\n  showDots: boolean\n}\n\nfunction ThumbStrip({\n  items,\n  index,\n  onSelect,\n  config,\n  reduce,\n}: {\n  items: React.ReactNode[]\n  index: number\n  onSelect: (i: number) => void\n  config: ThumbConfig\n  reduce: boolean | null\n}) {\n  const vertical = config.orientation === \"col\"\n  return (\n    <div\n      className={cn(\n        \"flex gap-2\",\n        vertical ? \"h-full w-20 shrink-0 flex-col overflow-y-auto\" : \"w-full flex-row overflow-x-auto\"\n      )}\n    >\n      {items.map((slide, i) => {\n        const active = i === index\n        return (\n          <motion.button\n            key={i}\n            type=\"button\"\n            aria-label={`Go to slide ${i + 1}`}\n            aria-current={active}\n            onClick={() => onSelect(i)}\n            initial={false}\n            animate={config.scaled && !reduce ? { scale: active ? 1 : 0.88 } : { scale: 1 }}\n            transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 400, damping: 30 }}\n            className={cn(\n              \"relative shrink-0 overflow-hidden rounded-md transition-colors\",\n              vertical ? \"h-14 w-full\" : \"h-12 w-16\",\n              config.bordered ? \"border-2\" : \"border\",\n              active\n                ? \"border-primary\"\n                : \"border-border hover:border-[color-mix(in_oklab,var(--color-foreground)_35%,transparent)]\",\n              focusRing\n            )}\n          >\n            <div aria-hidden=\"true\" className=\"pointer-events-none h-full w-full\">\n              {slide}\n            </div>\n            {active ? null : (\n              <span\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 bg-[color-mix(in_oklab,var(--color-background)_35%,transparent)]\"\n              />\n            )}\n          </motion.button>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction Thumbnails({\n  className,\n  size = \"md\",\n  slides,\n  config,\n}: CarouselProps & { config: ThumbConfig }) {\n  const reduce = useReducedMotion()\n  const items = resolveSlides(slides)\n  const { index, setIndex, next, prev } = useCarousel(items.length)\n  const viewer = (\n    <MainViewer items={items} index={index} next={next} prev={prev} size={size} reduce={reduce} />\n  )\n  const strip = (\n    <ThumbStrip items={items} index={index} onSelect={setIndex} config={config} reduce={reduce} />\n  )\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      {config.orientation === \"col\" ? (\n        <div className={cn(\"flex gap-3\", trackHeight[size])}>\n          {viewer}\n          {strip}\n        </div>\n      ) : (\n        <>\n          {viewer}\n          <div className=\"mt-3\">{strip}</div>\n          {config.showDots ? (\n            <CarouselDots count={items.length} index={index} onSelect={setIndex} className=\"mt-3\" />\n          ) : null}\n        </>\n      )}\n    </div>\n  )\n}\n\n/* Below: kucuk resim seridi ana goruntunun altinda. */\nexport function BelowCarousel(props: CarouselProps) {\n  return <Thumbnails {...props} config={{ orientation: \"row\", scaled: false, bordered: false, showDots: false }} />\n}\n\n/* Side: the thumbnail strip is a vertical column to the right of the main image. */\nexport function SideCarousel(props: CarouselProps) {\n  return <Thumbnails {...props} config={{ orientation: \"col\", scaled: false, bordered: false, showDots: false }} />\n}\n\n/* DotsThumbs: alt kucuk resimlere ek olarak nokta gostergesi. */\nexport function DotsThumbsCarousel(props: CarouselProps) {\n  return <Thumbnails {...props} config={{ orientation: \"row\", scaled: false, bordered: false, showDots: true }} />\n}\n\n/* Scaled: aktif kucuk resim buyur, digerleri kuculur. */\nexport function ScaledCarousel(props: CarouselProps) {\n  return <Thumbnails {...props} config={{ orientation: \"row\", scaled: true, bordered: false, showDots: false }} />\n}\n\n/* Bordered: her kucuk resim kalin cerceveli, aktif primary. */\nexport function BorderedCarousel(props: CarouselProps) {\n  return <Thumbnails {...props} config={{ orientation: \"row\", scaled: false, bordered: true, showDots: false }} />\n}\n",
      "type": "registry:component",
      "target": "components/ui/carousel-thumbnails.tsx"
    }
  ],
  "categories": [
    "styled",
    "carousel"
  ],
  "type": "registry:component"
}