{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "customer-story-stack",
  "type": "registry:ui",
  "title": "Customer Story Stack",
  "description": "A card-stack customer testimonial carousel with vertical prev/next nav, touch-swipe support, two ghost cards layered behind the active story, and a framed metrics panel with corner crosshair marks that updates per case.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/customer-story-stack.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── types ───────────────────────────────────────────────────── */\n\nexport interface CustomerStoryAuthor {\n  name: string;\n  role: string;\n  /** Image URL for the avatar. */\n  avatarUrl?: string;\n  /** Initials/letter fallback when `avatarUrl` is omitted. */\n  avatarFallback?: string;\n}\n\nexport interface CustomerStoryMetric {\n  /** Single icon rendered above the metric label. */\n  icon: React.ReactNode;\n  /** Label rendered below the icon. */\n  label: React.ReactNode;\n}\n\nexport interface CustomerStoryCase {\n  /** Unique id used as the React key when cycling cards. */\n  id: string;\n  /** Brand logo — typically an inline SVG. */\n  logo: React.ReactNode;\n  /** Pull-quote rendered with serif curly-quote pseudo-elements. */\n  quote: React.ReactNode;\n  author: CustomerStoryAuthor;\n  /** Two metrics shown inside the same frame, below the testimonial. Omit to hide. */\n  metrics?: [CustomerStoryMetric, CustomerStoryMetric];\n}\n\nexport interface CustomerStoryStackProps {\n  cases: CustomerStoryCase[];\n  /** Optional \"Read more customer stories\" link rendered below the frame. */\n  readMoreLink?: { label: string; href: string };\n  /** Horizontal swipe threshold in pixels for touch-based prev/next. */\n  swipeThreshold?: number;\n  className?: string;\n}\n\n/* ── primitives ──────────────────────────────────────────────── */\n\nfunction Crosshair({ className }: { className?: string }) {\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute z-10 size-3\",\n        \"[mask-image:radial-gradient(circle_at_center,_black_15%,_transparent_75%)]\",\n        \"before:absolute before:inset-0 before:m-auto before:h-px before:bg-foreground/25\",\n        \"after:absolute after:inset-0 after:m-auto after:w-px after:bg-foreground/25\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction FrameLines() {\n  const lineH =\n    \"pointer-events-none absolute left-0 h-px w-full bg-[linear-gradient(to_right,_transparent_0%,_var(--color-border)_6.5%,_var(--color-border)_93.5%,_transparent_100%)]\";\n  const lineV =\n    \"pointer-events-none absolute top-0 h-full w-px bg-[linear-gradient(to_bottom,_transparent_0%,_var(--color-border)_6.5%,_var(--color-border)_93.5%,_transparent_100%)]\";\n  return (\n    <>\n      <div aria-hidden className={cn(lineH, \"-top-3 -translate-y-1/2\")} />\n      <div aria-hidden className={cn(lineH, \"-bottom-3 translate-y-1/2\")} />\n      <div aria-hidden className={cn(lineV, \"-left-3 -translate-x-1/2\")} />\n      <div aria-hidden className={cn(lineV, \"-right-3 translate-x-1/2\")} />\n      <Crosshair className=\"-left-3 -top-3 -translate-x-1/2 -translate-y-1/2\" />\n      <Crosshair className=\"-right-3 -top-3 translate-x-1/2 -translate-y-1/2\" />\n      <Crosshair className=\"-right-3 -bottom-3 translate-x-1/2 translate-y-1/2\" />\n      <Crosshair className=\"-left-3 -bottom-3 -translate-x-1/2 translate-y-1/2\" />\n    </>\n  );\n}\n\nfunction AuthorAvatar({ author }: { author: CustomerStoryAuthor }) {\n  const frame =\n    \"aspect-square size-11 overflow-hidden rounded-xl border border-transparent shadow-sm shadow-black/15 ring-1 ring-foreground/10\";\n\n  if (author.avatarUrl) {\n    return (\n      <div className={frame}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={author.avatarUrl}\n          alt={`Avatar of ${author.name}`}\n          loading=\"lazy\"\n          width={96}\n          height={96}\n          className=\"size-full object-cover\"\n        />\n      </div>\n    );\n  }\n\n  const initials =\n    author.avatarFallback ?? author.name.trim().charAt(0).toUpperCase();\n\n  return (\n    <div\n      className={cn(\n        frame,\n        \"flex items-center justify-center bg-muted text-sm font-semibold text-muted-foreground\",\n      )}\n    >\n      {initials}\n    </div>\n  );\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\nexport function CustomerStoryStack({\n  cases,\n  readMoreLink,\n  swipeThreshold = 50,\n  className,\n}: CustomerStoryStackProps) {\n  const [activeIndex, setActiveIndex] = React.useState(0);\n  const total = cases.length;\n  const surfaceRef = React.useRef<HTMLDivElement>(null);\n  const touchStartX = React.useRef<number | null>(null);\n\n  const goNext = React.useCallback(() => {\n    setActiveIndex((i) => (i + 1) % total);\n  }, [total]);\n\n  const goPrev = React.useCallback(() => {\n    setActiveIndex((i) => (i - 1 + total) % total);\n  }, [total]);\n\n  React.useEffect(() => {\n    const surface = surfaceRef.current;\n    if (!surface) return;\n\n    const onStart = (e: TouchEvent) => {\n      touchStartX.current = e.touches[0]?.clientX ?? null;\n    };\n    const onEnd = (e: TouchEvent) => {\n      const start = touchStartX.current;\n      touchStartX.current = null;\n      if (start == null) return;\n      const end = e.changedTouches[0]?.clientX ?? start;\n      const dx = end - start;\n      if (Math.abs(dx) <= swipeThreshold) return;\n      if (dx > 0) goPrev();\n      else goNext();\n    };\n\n    surface.addEventListener(\"touchstart\", onStart, { passive: true });\n    surface.addEventListener(\"touchend\", onEnd, { passive: true });\n    return () => {\n      surface.removeEventListener(\"touchstart\", onStart);\n      surface.removeEventListener(\"touchend\", onEnd);\n    };\n  }, [goNext, goPrev, swipeThreshold]);\n\n  if (total === 0) return null;\n  const activeCase = cases[activeIndex];\n  if (!activeCase) return null;\n\n  const navBtn =\n    \"inline-flex size-9 items-center justify-center rounded-full border border-transparent bg-card shadow-sm shadow-black/10 ring-1 ring-foreground/10 transition-colors duration-200 hover:bg-muted/50 disabled:pointer-events-none disabled:opacity-50 dark:ring-foreground/15 dark:hover:bg-muted/50\";\n\n  return (\n    <section\n      className={cn(\"mx-auto w-full max-w-3xl px-6 py-16 lg:py-24\", className)}\n      aria-label=\"Customer stories\"\n    >\n      <div\n        ref={surfaceRef}\n        className=\"relative mx-auto max-w-xl\"\n        style={{ touchAction: \"pan-y\" }}\n      >\n        <FrameLines />\n\n        <div\n          key={activeCase.id}\n          className=\"relative bg-card animate-in fade-in duration-500\"\n        >\n          <div className=\"flex flex-col items-center px-8 pb-10 pt-12 lg:px-12 lg:pt-16\">\n            <div aria-hidden className=\"text-foreground\">\n              {activeCase.logo}\n            </div>\n\n            <p className=\"mt-10 min-h-32 text-balance text-center text-lg text-foreground before:mr-1 before:font-serif before:content-['“'] after:ml-1 after:font-serif after:content-['”'] md:min-h-28\">\n              {activeCase.quote}\n            </p>\n\n            <div className=\"mt-8 flex items-center justify-center gap-3\">\n              <AuthorAvatar author={activeCase.author} />\n              <div className=\"space-y-0.5 text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {activeCase.author.name}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">\n                  {activeCase.author.role}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {activeCase.metrics && (\n            <div className=\"grid grid-cols-1 border-t border-border/60 sm:grid-cols-2\">\n              {activeCase.metrics.map((metric, i) => (\n                <div\n                  key={i}\n                  className={cn(\n                    \"flex flex-col items-center gap-3 px-6 py-8 text-center\",\n                    i === 1 &&\n                      \"border-t border-border/60 sm:border-l sm:border-t-0\",\n                  )}\n                >\n                  <div\n                    aria-hidden\n                    className=\"text-muted-foreground [&_svg]:size-5\"\n                  >\n                    {metric.icon}\n                  </div>\n                  <p className=\"text-balance text-sm text-muted-foreground\">\n                    {metric.label}\n                  </p>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"mt-10 flex items-center justify-center gap-3\">\n        <button\n          type=\"button\"\n          onClick={goPrev}\n          aria-label=\"Previous story\"\n          className={navBtn}\n        >\n          <ChevronLeft className=\"size-4\" />\n        </button>\n\n        <div className=\"flex items-center gap-2 px-1\">\n          {cases.map((c, idx) => (\n            <button\n              key={c.id}\n              type=\"button\"\n              onClick={() => setActiveIndex(idx)}\n              aria-label={`Show story ${idx + 1}`}\n              aria-current={idx === activeIndex ? \"true\" : undefined}\n              className={cn(\n                \"size-2 rounded-full transition-colors\",\n                idx === activeIndex\n                  ? \"bg-foreground\"\n                  : \"bg-foreground/25 hover:bg-foreground/50\",\n              )}\n            />\n          ))}\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={goNext}\n          aria-label=\"Next story\"\n          className={navBtn}\n        >\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </div>\n\n      {readMoreLink && (\n        <Link\n          href={readMoreLink.href}\n          className=\"mx-auto mt-6 flex h-9 w-fit items-center justify-center gap-1.5 rounded-md px-4 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground\"\n        >\n          {readMoreLink.label}\n          <ChevronRight className=\"size-4 opacity-70\" />\n        </Link>\n      )}\n    </section>\n  );\n}\n\nexport default CustomerStoryStack;\n",
      "type": "registry:ui",
      "target": "components/ruixen/customer-story-stack.tsx"
    }
  ]
}