{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "featured-portrait-testimonial",
  "type": "registry:ui",
  "title": "Featured Portrait Testimonial",
  "description": "An expanding-portrait testimonial carousel. Inactive cards show a grayscale portrait with a name strip; the active card morphs into a full quote card with author, dashed divider, and a row of favorite-feature tags. Width transitions and content crossfade are choreographed for clean, premium movement.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "registry/ruixenui/featured-portrait-testimonial.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── types ───────────────────────────────────────────────────── */\n\nexport interface FeaturedPortraitFavorite {\n  icon: React.ReactNode;\n  label: React.ReactNode;\n}\n\nexport interface FeaturedPortraitAuthor {\n  name: string;\n  role: string;\n  avatarUrl?: string;\n}\n\nexport interface FeaturedPortraitCompany {\n  /** Subtitle rendered under the name in the inactive card footer. */\n  name?: string;\n  /** Tiny logo bubble drawn to the left of the avatar in the inactive footer. */\n  logo?: React.ReactNode;\n}\n\nexport interface FeaturedPortraitItem {\n  id: string;\n  /** Pull-quote shown in the active (left-half) card. */\n  quote: React.ReactNode;\n  author: FeaturedPortraitAuthor;\n  /** Portrait image used in the inactive card. */\n  portraitUrl: string;\n  /** Optional company subtitle + tiny logo bubble for the inactive footer. */\n  company?: FeaturedPortraitCompany;\n  /** Optional favorite-feature tags rendered under the dashed divider in the active card. */\n  favorites?: FeaturedPortraitFavorite[];\n  /** Tailwind classes overriding the active-card background. */\n  accentClassName?: string;\n  /** Tailwind classes overriding the inactive portrait container background tint. */\n  portraitBgClassName?: string;\n}\n\nexport interface FeaturedPortraitTestimonialProps {\n  items: FeaturedPortraitItem[];\n  /** Small pill rendered above the heading. */\n  eyebrow?: React.ReactNode;\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n  /** Caption rendered above the favorites tag row in the active card. */\n  favoritesLabel?: React.ReactNode;\n  /** Initial active index. Default 0. */\n  defaultIndex?: number;\n  /** Width of each inactive portrait card in px. Default 240. */\n  inactiveCardWidth?: number;\n  className?: string;\n}\n\n/* ── motion constants ────────────────────────────────────────── */\n\nconst EASE = \"cubic-bezier(0.32, 0.72, 0, 1)\";\nconst SLIDE_MS = 650;\nconst FADE_MS = 450;\nconst GAP_PX = 16;\n\n/* ── component ───────────────────────────────────────────────── */\n\nexport function FeaturedPortraitTestimonial({\n  items,\n  eyebrow,\n  heading,\n  description,\n  favoritesLabel = \"Favorites Feature\",\n  defaultIndex = 0,\n  inactiveCardWidth = 240,\n  className,\n}: FeaturedPortraitTestimonialProps) {\n  const total = items.length;\n  const [activeIndex, setActiveIndex] = React.useState(() =>\n    Math.min(Math.max(defaultIndex, 0), Math.max(0, total - 1)),\n  );\n\n  const activeItem = items[activeIndex];\n\n  const goNext = React.useCallback(() => {\n    if (total === 0) return;\n    setActiveIndex((i) => (i + 1) % total);\n  }, [total]);\n\n  const goPrev = React.useCallback(() => {\n    if (total === 0) return;\n    setActiveIndex((i) => (i - 1 + total) % total);\n  }, [total]);\n\n  const onKey = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        goNext();\n      } else if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        goPrev();\n      }\n    },\n    [goNext, goPrev],\n  );\n\n  if (total === 0 || !activeItem) return null;\n\n  return (\n    <section\n      className={cn(\"px-6 py-16 lg:py-24\", className)}\n      aria-roledescription=\"carousel\"\n      aria-label=\"Featured testimonials\"\n    >\n      <div className=\"mx-auto max-w-7xl\">\n        {(eyebrow || heading || description) && (\n          <div className=\"mb-12 text-center lg:mb-16\">\n            {eyebrow && (\n              <span className=\"inline-flex items-center rounded-full border border-border/60 bg-card px-4 py-1.5 text-xs font-medium text-foreground/80 shadow-sm shadow-black/[0.03]\">\n                {eyebrow}\n              </span>\n            )}\n            {heading && (\n              <h2 className=\"mt-6 text-balance text-4xl font-semibold leading-[1.05] tracking-tight text-foreground sm:text-5xl lg:text-6xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"mx-auto mt-5 max-w-xl text-balance text-sm leading-relaxed text-muted-foreground sm:text-base\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n\n        <div\n          tabIndex={0}\n          onKeyDown={onKey}\n          className=\"grid grid-cols-1 gap-6 focus-visible:outline-none lg:grid-cols-2 lg:gap-8\"\n          aria-live=\"polite\"\n        >\n          <ActiveColumn\n            activeItem={activeItem}\n            favoritesLabel={favoritesLabel}\n          />\n          <InactivesColumn\n            items={items}\n            activeIndex={activeIndex}\n            width={inactiveCardWidth}\n            onSelect={setActiveIndex}\n            goPrev={goPrev}\n            goNext={goNext}\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/* ── left half — active card with two-layer crossfade ────────── */\n\nfunction ActiveColumn({\n  activeItem,\n  favoritesLabel,\n}: {\n  activeItem: FeaturedPortraitItem;\n  favoritesLabel: React.ReactNode;\n}) {\n  const [state, setState] = React.useState<{\n    current: FeaturedPortraitItem;\n    outgoing: FeaturedPortraitItem | null;\n  }>({ current: activeItem, outgoing: null });\n\n  React.useEffect(() => {\n    if (state.current.id !== activeItem.id) {\n      setState({ current: activeItem, outgoing: state.current });\n      const t = setTimeout(() => {\n        setState((prev) => ({ ...prev, outgoing: null }));\n      }, FADE_MS + 60);\n      return () => clearTimeout(t);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeItem.id]);\n\n  return (\n    <div className=\"relative h-full\">\n      {/* Current — fades 0 → 1, drives the column height. */}\n      <div\n        key={`in-${state.current.id}`}\n        className=\"relative h-full animate-in fade-in-0\"\n        style={{\n          animationDuration: `${FADE_MS}ms`,\n          animationTimingFunction: EASE,\n          animationFillMode: \"both\",\n        }}\n      >\n        <ActiveCard item={state.current} favoritesLabel={favoritesLabel} />\n      </div>\n\n      {/* Outgoing — overlays inset-0 and fades 1 → 0. */}\n      {state.outgoing && (\n        <div\n          key={`out-${state.outgoing.id}`}\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 animate-out fade-out-0\"\n          style={{\n            animationDuration: `${FADE_MS}ms`,\n            animationTimingFunction: EASE,\n            animationFillMode: \"forwards\",\n          }}\n        >\n          <ActiveCard item={state.outgoing} favoritesLabel={favoritesLabel} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── right half — inactive cards (persistent DOM) + arrows ───── */\n\nfunction InactivesColumn({\n  items,\n  activeIndex,\n  width,\n  onSelect,\n  goPrev,\n  goNext,\n}: {\n  items: FeaturedPortraitItem[];\n  activeIndex: number;\n  width: number;\n  onSelect: (i: number) => void;\n  goPrev: () => void;\n  goNext: () => void;\n}) {\n  const total = items.length;\n  const step = width + GAP_PX;\n\n  // Card height derivation: outer p-2 (16) + image (aspect-[5/6]) + footer (~60).\n  const imageInner = width - 16;\n  const imageHeight = imageInner * (6 / 5);\n  const containerHeight = Math.round(16 + imageHeight + 60 + 4);\n\n  // Track the item that just stopped being active so we can teleport-and-fade\n  // it into the rightmost slot instead of letting its transform slide all the\n  // way across the row.\n  const [justInactiveId, setJustInactiveId] = React.useState<string | null>(\n    null,\n  );\n  const prevActiveIdRef = React.useRef<string | undefined>(\n    items[activeIndex]?.id,\n  );\n\n  React.useEffect(() => {\n    const currentId = items[activeIndex]?.id;\n    const prevId = prevActiveIdRef.current;\n    if (prevId && prevId !== currentId) {\n      setJustInactiveId(prevId);\n      prevActiveIdRef.current = currentId;\n      const t = setTimeout(() => setJustInactiveId(null), SLIDE_MS + 60);\n      return () => clearTimeout(t);\n    }\n  }, [activeIndex, items]);\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div\n        className=\"relative overflow-hidden\"\n        style={{ height: containerHeight }}\n      >\n        {items.map((item, i) => {\n          const pos = (i - activeIndex + total) % total;\n          const isActive = pos === 0;\n          const isJustInactive = item.id === justInactiveId;\n\n          // pos 0 (active) parks at translateX(0) — same slot as pos 1. It's\n          // hidden via opacity, so the overlap is invisible. Parking there\n          // makes \"becoming active\" a pure fade-out in place, no jitter.\n          const x = isActive ? 0 : (pos - 1) * step;\n\n          // - Just-became-inactive: skip the transform transition so the card\n          //   jumps to the rightmost slot invisibly (it was already opacity 0\n          //   there) and only fades in. No sliding across the visible row.\n          // - Active: only opacity transitions matter; no visible motion.\n          // - Everyone else: smooth transform slide + light opacity blend.\n          const transition = isJustInactive\n            ? `opacity ${FADE_MS}ms ${EASE}`\n            : `transform ${SLIDE_MS}ms ${EASE}, opacity ${FADE_MS}ms ${EASE}`;\n\n          return (\n            <div\n              key={item.id}\n              className=\"absolute left-0 top-0\"\n              style={{\n                transform: `translate3d(${x}px, 0, 0)`,\n                opacity: isActive ? 0 : 1,\n                pointerEvents: isActive ? \"none\" : \"auto\",\n                transition,\n                willChange: \"transform, opacity\",\n              }}\n            >\n              <InactiveCard\n                item={item}\n                width={width}\n                onClick={() => onSelect(i)}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <NavButton onClick={goPrev} direction=\"prev\" />\n        <NavButton onClick={goNext} direction=\"next\" />\n      </div>\n    </div>\n  );\n}\n\n/* ── active card ─────────────────────────────────────────────── */\n\nfunction ActiveCard({\n  item,\n  favoritesLabel,\n}: {\n  item: FeaturedPortraitItem;\n  favoritesLabel: React.ReactNode;\n}) {\n  const hasFavorites = !!item.favorites && item.favorites.length > 0;\n  return (\n    <article\n      className={cn(\n        \"flex h-full flex-col rounded-2xl border border-border/40 p-7 sm:p-9 lg:p-10\",\n        \"shadow-sm shadow-black/[0.04]\",\n        item.accentClassName ??\n          \"bg-[hsl(245_55%_96%)] dark:bg-[hsl(245_30%_18%)]\",\n      )}\n    >\n      <p\n        className={cn(\n          \"text-[1.5rem] font-medium leading-[1.3] tracking-tight text-foreground\",\n          \"sm:text-[1.65rem] lg:text-[1.85rem]\",\n        )}\n      >\n        {item.quote}\n      </p>\n\n      <div className=\"mt-8 flex items-center gap-3\">\n        <Avatar className=\"size-11 ring-1 ring-foreground/10\">\n          {item.author.avatarUrl && (\n            <AvatarImage src={item.author.avatarUrl} alt={item.author.name} />\n          )}\n          <AvatarFallback>\n            {item.author.name.charAt(0).toUpperCase()}\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0\">\n          <p className=\"truncate text-sm font-semibold text-foreground\">\n            {item.author.name}\n          </p>\n          <p className=\"truncate text-xs text-muted-foreground\">\n            {item.author.role}\n          </p>\n        </div>\n      </div>\n\n      {hasFavorites && (\n        <>\n          <div\n            aria-hidden\n            className=\"my-6 border-t border-dashed border-foreground/20\"\n          />\n          <p className=\"mb-4 text-xs text-muted-foreground\">{favoritesLabel}</p>\n          <ul className=\"flex flex-wrap items-center gap-x-6 gap-y-3\">\n            {item.favorites!.map((fav, i) => (\n              <li\n                key={i}\n                className=\"inline-flex items-center gap-2 text-sm font-medium text-foreground/85\"\n              >\n                <span\n                  aria-hidden\n                  className=\"flex size-6 items-center justify-center text-foreground/70 [&_svg]:size-6\"\n                >\n                  {fav.icon}\n                </span>\n                <span>{fav.label}</span>\n              </li>\n            ))}\n          </ul>\n        </>\n      )}\n    </article>\n  );\n}\n\n/* ── inactive card ───────────────────────────────────────────── */\n\nfunction InactiveCard({\n  item,\n  width,\n  onClick,\n}: {\n  item: FeaturedPortraitItem;\n  width: number;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={`Show testimonial from ${item.author.name}`}\n      style={{ width: `${width}px` }}\n      className={cn(\n        \"group flex shrink-0 flex-col rounded-2xl border border-border/40 bg-card p-2 text-left\",\n        \"shadow-sm shadow-black/[0.04] transition-shadow duration-200\",\n        \"hover:shadow-md hover:shadow-black/[0.06]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      )}\n    >\n      <div\n        className={cn(\n          \"relative aspect-[5/6] w-full overflow-hidden rounded-xl\",\n          item.portraitBgClassName ?? \"bg-muted/40\",\n        )}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={item.portraitUrl}\n          alt={item.author.name}\n          loading=\"lazy\"\n          draggable={false}\n          className=\"absolute inset-0 h-full w-full object-cover object-top grayscale transition-transform duration-500 ease-out group-hover:scale-[1.03]\"\n        />\n      </div>\n\n      <div className=\"flex items-center gap-2.5 px-2 py-3\">\n        {item.company?.logo && (\n          <span\n            aria-hidden\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground [&_svg]:size-5\"\n          >\n            {item.company.logo}\n          </span>\n        )}\n        <Avatar className=\"size-9 ring-1 ring-foreground/10\">\n          {item.author.avatarUrl && (\n            <AvatarImage src={item.author.avatarUrl} alt={item.author.name} />\n          )}\n          <AvatarFallback>\n            {item.author.name.charAt(0).toUpperCase()}\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0\">\n          <p className=\"truncate text-sm font-semibold text-foreground\">\n            {item.author.name}\n          </p>\n          <p className=\"truncate text-xs text-muted-foreground\">\n            {item.company?.name ?? item.author.role}\n          </p>\n        </div>\n      </div>\n    </button>\n  );\n}\n\n/* ── nav button ──────────────────────────────────────────────── */\n\nfunction NavButton({\n  onClick,\n  direction,\n}: {\n  onClick: () => void;\n  direction: \"prev\" | \"next\";\n}) {\n  const Icon = direction === \"prev\" ? ChevronLeft : ChevronRight;\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={\n        direction === \"prev\" ? \"Previous testimonial\" : \"Next testimonial\"\n      }\n      className={cn(\n        \"inline-flex size-12 items-center justify-center rounded-full\",\n        \"border border-border/60 bg-card text-foreground/70\",\n        \"shadow-sm shadow-black/[0.04] transition-all duration-200\",\n        \"hover:bg-muted/50 hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      )}\n    >\n      <Icon className=\"size-5\" />\n    </button>\n  );\n}\n\nexport default FeaturedPortraitTestimonial;\n",
      "type": "registry:ui",
      "target": "components/ruixen/featured-portrait-testimonial.tsx"
    }
  ]
}