{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-grid",
  "title": "Testimonial Grid",
  "description": "Masonry-style testimonial grid with staggered entrance animations",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/testimonial-grid.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface TestimonialGridItem {\n  quote: string\n  name: string\n  role?: string\n  company?: string\n  avatar?: string\n  rating?: number\n}\n\nexport interface TestimonialGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: TestimonialGridItem[]\n  columns?: 2 | 3\n  animated?: boolean\n}\n\nfunction StarRating({ rating }: { rating: number }) {\n  return (\n    <div className=\"flex gap-0.5\" aria-label={`${rating} stars`}>\n      {Array.from({ length: 5 }).map((_, i) => (\n        <svg\n          key={i}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          className={cn(\"h-3.5 w-3.5\", i < rating ? \"fill-amber-400 text-amber-400\" : \"fill-muted text-muted\")}\n        >\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" />\n        </svg>\n      ))}\n    </div>\n  )\n}\n\nexport function TestimonialGrid({\n  items,\n  columns = 3,\n  animated = true,\n  className,\n  ...props\n}: TestimonialGridProps) {\n  const colClass = {\n    2: \"grid-cols-1 sm:grid-cols-2\",\n    3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n  }[columns]\n\n  return (\n    <div className={cn(\"grid gap-4\", colClass, className)} {...props}>\n      {items.map((item, i) => {\n        const card = (\n          <div\n            key={i}\n            className=\"flex flex-col gap-3 rounded-xl border bg-card p-5 shadow-sm\"\n          >\n            {item.rating !== undefined && <StarRating rating={item.rating} />}\n            <blockquote className=\"flex-1 text-sm leading-relaxed text-foreground\">\n              &ldquo;{item.quote}&rdquo;\n            </blockquote>\n            <div className=\"flex items-center gap-2.5 pt-1 border-t border-border/50\">\n              {item.avatar ? (\n                <img\n                  src={item.avatar}\n                  alt={item.name}\n                  className=\"h-8 w-8 rounded-full object-cover\"\n                />\n              ) : (\n                <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n                  {item.name.charAt(0)}\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm font-semibold leading-none text-foreground\">{item.name}</p>\n                {(item.role || item.company) && (\n                  <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                    {item.role}\n                    {item.role && item.company ? \" · \" : \"\"}\n                    {item.company}\n                  </p>\n                )}\n              </div>\n            </div>\n          </div>\n        )\n\n        if (!animated) return card\n\n        return (\n          <motion.div\n            key={i}\n            initial={{ opacity: 0, y: 20 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-50px\" }}\n            transition={{ duration: 0.4, delay: i * 0.05 }}\n          >\n            {card}\n          </motion.div>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/testimonial-grid.tsx"
    }
  ],
  "type": "registry:ui"
}