{
  "name": "testimonial",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "testimonial.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport type TestimonialData = {\n  id?: React.Key;\n  avatar?: string; // img url\n  name?: string;\n  role?: string;\n  quote?: string;\n  accent?: string; // e.g. '#3b82f6' or 'rgb(...)'\n  // Supply your own node instead of quote card (gets active state + index)\n  render?: (ctx: { active: boolean; index: number }) => React.ReactNode;\n};\n\nexport type TestimonialCarouselProps = {\n  items: TestimonialData[];\n\n  /** visual variant for default renderer */\n  variant?: 'card' | 'minimal';\n  /** looping & autoplay */\n  loop?: boolean;\n  autoplay?: boolean;\n  autoplayMs?: number;\n\n  /** controls */\n  showArrows?: boolean;\n  showDots?: boolean;\n  allowKeyboard?: boolean;\n\n  /** callbacks */\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n\n  /** slot-style class overrides */\n  className?: string; // wrapper\n  contentClassName?: string; // inner panel\n  cardClassName?: string;\n  avatarClassName?: string;\n  nameClassName?: string;\n  roleClassName?: string;\n  quoteClassName?: string;\n\n  /** aria */\n  ariaLabel?: string;\n};\n\nexport function TestimonialCarousel({\n  items,\n  variant = 'card',\n  loop = true,\n  autoplay = false,\n  autoplayMs = 5000,\n  showArrows = true,\n  showDots = true,\n  allowKeyboard = true,\n  initialIndex = 0,\n  onIndexChange,\n  className,\n  contentClassName,\n  cardClassName,\n  avatarClassName,\n  nameClassName,\n  roleClassName,\n  quoteClassName,\n  ariaLabel = 'Testimonials',\n}: TestimonialCarouselProps) {\n  const count = items.length;\n  const [index, setIndex] = React.useState(\n    Math.min(Math.max(initialIndex, 0), Math.max(count - 1, 0))\n  );\n  const active = ((i: number) => ((i % count) + count) % count)(index); // safe modulo\n\n  const go = React.useCallback(\n    (delta: number) => {\n      setIndex((i) => {\n        const next = i + delta;\n        if (!loop) {\n          const clamped = Math.min(Math.max(next, 0), count - 1);\n          onIndexChange?.(clamped);\n          return clamped;\n        }\n        const wrapped = ((next % count) + count) % count;\n        onIndexChange?.(wrapped);\n        return wrapped;\n      });\n    },\n    [count, loop, onIndexChange]\n  );\n\n  // autoplay\n  React.useEffect(() => {\n    if (!autoplay || count <= 1) return;\n    const id = setInterval(() => go(1), autoplayMs);\n    return () => clearInterval(id);\n  }, [autoplay, autoplayMs, count, go]);\n\n  // keyboard\n  React.useEffect(() => {\n    if (!allowKeyboard) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowRight') go(1);\n      if (e.key === 'ArrowLeft') go(-1);\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [allowKeyboard, go]);\n\n  return (\n    <section\n      aria-roledescription='carousel'\n      aria-label={ariaLabel}\n      className={cn(\n        'relative w-full overflow-hidden rounded-2xl bg-white/60 p-6 shadow-sm ring-1 ring-zinc-200 backdrop-blur dark:bg-zinc-900/40 dark:ring-zinc-800',\n        className\n      )}\n    >\n      {/* arrows */}\n      {showArrows && count > 1 && (\n        <>\n          <button\n            type='button'\n            onClick={() => go(-1)}\n            aria-label='Previous testimonial'\n            className='absolute top-1/2 left-3 -translate-y-1/2 rounded-full p-2 text-zinc-500 ring-1 ring-zinc-200 transition hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-300 dark:ring-zinc-700 dark:hover:bg-zinc-800'\n          >\n            <ChevronLeft className='h-5 w-5' />\n          </button>\n          <button\n            type='button'\n            onClick={() => go(1)}\n            aria-label='Next testimonial'\n            className='absolute top-1/2 right-3 -translate-y-1/2 rounded-full p-2 text-zinc-500 ring-1 ring-zinc-200 transition hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-300 dark:ring-zinc-700 dark:hover:bg-zinc-800'\n          >\n            <ChevronRight className='h-5 w-5' />\n          </button>\n        </>\n      )}\n\n      {/* slide */}\n      <div className={cn('relative mx-auto max-w-3xl', contentClassName)}>\n        <AnimatePresence mode='popLayout' initial={false}>\n          <motion.div\n            key={active}\n            initial={{ opacity: 0, y: 16, scale: 0.98 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: -16, scale: 0.98 }}\n            transition={{ duration: 0.24, ease: 'easeOut' }}\n            className='grid place-items-center'\n            role='group'\n            aria-roledescription='slide'\n            aria-label={`${active + 1} of ${count}`}\n          >\n            {/* custom renderer? */}\n            {typeof items[active]?.render === 'function' ? (\n              items[active].render!({ active: true, index: active })\n            ) : (\n              <DefaultCard\n                item={items[active]}\n                variant={variant}\n                className={cardClassName}\n                avatarClassName={avatarClassName}\n                nameClassName={nameClassName}\n                roleClassName={roleClassName}\n                quoteClassName={quoteClassName}\n              />\n            )}\n          </motion.div>\n        </AnimatePresence>\n      </div>\n\n      {/* dots */}\n      {showDots && count > 1 && (\n        <div className='mt-6 flex items-center justify-center gap-2'>\n          {items.map((_, i) => {\n            const is = i === active;\n            return (\n              <button\n                key={i}\n                type='button'\n                aria-label={`Go to testimonial ${i + 1}`}\n                onClick={() => setIndex(i)}\n                className={cn(\n                  'h-2.5 w-2.5 rounded-full ring-1 ring-zinc-300 transition dark:ring-zinc-700',\n                  is\n                    ? 'bg-zinc-900 dark:bg-zinc-100'\n                    : 'bg-zinc-300/70 dark:bg-zinc-700/70'\n                )}\n              />\n            );\n          })}\n        </div>\n      )}\n    </section>\n  );\n}\n\n/* ---------- default card renderer ---------- */\n\nfunction DefaultCard({\n  item,\n  variant,\n  className,\n  avatarClassName,\n  nameClassName,\n  roleClassName,\n  quoteClassName,\n}: {\n  item: TestimonialData;\n  variant: 'card' | 'minimal';\n  className?: string;\n  avatarClassName?: string;\n  nameClassName?: string;\n  roleClassName?: string;\n  quoteClassName?: string;\n}) {\n  const accent = item.accent ?? '#3b82f6'; // tailwind blue-500\n  const ring = { boxShadow: `0 0 0 3px ${accent}22` };\n\n  return (\n    <article\n      className={cn(\n        'grid place-items-center text-center',\n        variant === 'card' && 'px-4 py-3',\n        className\n      )}\n    >\n      {/* avatar */}\n      {(item.avatar || item.name) && (\n        <div className='relative mb-3'>\n          {item.avatar ? (\n            <img\n              src={item.avatar}\n              alt={item.name ?? 'avatar'}\n              className={cn(\n                'h-16 w-16 rounded-full object-cover ring-2 ring-white dark:ring-zinc-900',\n                avatarClassName\n              )}\n              style={ring}\n              loading='lazy'\n            />\n          ) : (\n            <div\n              className={cn(\n                'grid h-16 w-16 place-items-center rounded-full bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',\n                avatarClassName\n              )}\n              style={ring}\n            >\n              <span className='text-lg font-semibold'>\n                {item.name?.[0] ?? '?'}\n              </span>\n            </div>\n          )}\n          {/* decorative quote badge */}\n          <span\n            className='absolute -top-2 -left-2 grid h-7 w-7 place-items-center rounded-full text-white shadow-sm'\n            style={{ backgroundColor: accent }}\n            aria-hidden\n          >\n            &quot;\n          </span>\n        </div>\n      )}\n\n      {/* name / role */}\n      {item.name && (\n        <h3\n          className={cn('text-xl font-semibold tracking-tight', nameClassName)}\n        >\n          {item.name}\n        </h3>\n      )}\n      {item.role && (\n        <p\n          className={cn(\n            'mb-3 text-xs font-semibold tracking-wider text-[color:var(--role-color,#4f46e5)] uppercase',\n            roleClassName\n          )}\n          style={{ ['--role-color' as any]: accent }}\n        >\n          {item.role}\n        </p>\n      )}\n\n      {/* quote */}\n      {item.quote && (\n        <p\n          className={cn(\n            'max-w-2xl text-sm leading-7 text-balance text-zinc-600 dark:text-zinc-300',\n            quoteClassName\n          )}\n        >\n          {item.quote}\n        </p>\n      )}\n    </article>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}