Step Cards

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { motion, useReducedMotion, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Step Cards — a row of cards where one is open: the open card takes the free width and its parts spread from top to
 * bottom, the closed ones narrow to their number (from the Ciketo "How it works" steps). A click on a card or its number
 * opens another; there is no timer and no hover. Framer's spring: bounce 0, 0.4s, on the width and on the fade.
 * From 768px up it is a row of fixed height; below that a column, where closed cards keep their number and title.
 *
 * Differences from Ciketo, each with its reason:
 *   - closed cards sit at 70% and their text carries its own tone (foreground/95), not Ciketo's 60%: a dimmed card
 *     multiplies its text colour by the opacity, and muted-foreground would land under 3:1;
 *   - the details of a closed card stay in the HTML but are inert (Ciketo removes them, and so the text is gone for
 *     search engines), and the number is a real button with aria-expanded;
 *   - reduced motion is a zero-duration transition, not different markup: the server cannot know it, so markup that
 *     depended on it would fail hydration.
 * flex-grow is neither a transform nor a size key, so <MotionConfig reducedMotion="user"> would not skip it.
 */

const spring: Transition = { type: "spring", bounce: 0, duration: 0.4 };
const DIMMED = 0.7;

export type StepCard = {
  value: string;
  title: React.ReactNode;
  /** Under the title, in an open card. */
  description?: React.ReactNode;
  /** A small heading over the note, after a rule, at the bottom of an open card. */
  label?: React.ReactNode;
  note?: React.ReactNode;
  /** The photo at the bottom of an open card, 3:2. */
  media?: React.ReactNode;
};

export type StepCardsProps = {
  steps: StepCard[];
  value?: string;
  /** The card that starts open; the first one by default. */
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Accessible name of the row. */
  label: string;
  /** Height of the row from 768px up, in px. */
  height?: number;
  /** Width of a closed card from 768px up, in px. */
  collapsedSize?: number;
  className?: string;
};

/* A part of the card that is there when it is open: it fades, and below 768px it also opens by height (a column has to
   make room); from 768px up it keeps its height and is only clipped by the narrow card. Closed, it is inert. */
function Reveal({ open, reduce, className, children }: { open: boolean; reduce: boolean; className?: string; children: React.ReactNode }) {
  return (
    <motion.div
      inert={!open}
      initial={false}
      animate={{ opacity: open ? 1 : 0 }}
      transition={reduce ? { duration: 0 } : spring}
      className={cn(
        "grid transition-[grid-template-rows] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
        open ? "grid-rows-[1fr]" : "grid-rows-[0fr] md:grid-rows-[1fr]",
        className,
      )}
    >
      <div className="min-h-0 overflow-hidden">{children}</div>
    </motion.div>
  );
}

export function StepCards({
  steps,
  value,
  defaultValue,
  onValueChange,
  label,
  height = 600,
  collapsedSize = 105,
  className,
}: StepCardsProps) {
  const [internal, setInternal] = React.useState(defaultValue ?? steps[0]?.value);
  const active = value ?? internal;
  const reduce = Boolean(useReducedMotion());
  const id = React.useId();
  const total = String(steps.length).padStart(2, "0");

  function select(next: string) {
    if (next === active) return;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  }

  return (
    <ol
      aria-label={label}
      style={{ ["--cards-h" as string]: `${height}px`, ["--cards-collapsed" as string]: `${collapsedSize}px` }}
      className={cn("flex w-full flex-col gap-2.5 md:h-(--cards-h) md:flex-row", className)}
    >
      {steps.map((step, index) => {
        const open = step.value === active;
        const buttonId = `${id}-${index}-button`;
        const descriptionId = `${id}-${index}-description`;
        const detailsId = `${id}-${index}-details`;
        /* A dimmed card multiplies its text colour by 70%: muted-foreground would fall to 2.7:1. */
        const muted = open ? "text-muted-foreground" : "text-foreground/95";
        return (
          <motion.li
            key={step.value}
            /* The whole closed card is the target; the keyboard reaches the same thing through the number's button,
               whose click bubbles here. */
            onClick={() => select(step.value)}
            initial={false}
            animate={{ opacity: open ? 1 : DIMMED, flexGrow: open ? 1 : 0 }}
            transition={reduce ? { duration: 0 } : spring}
            className={cn(
              "flex min-w-0 flex-col gap-5 overflow-hidden rounded-lg border bg-card p-5 text-card-foreground md:basis-(--cards-collapsed) md:justify-between md:gap-0",
              !open && "cursor-pointer md:shrink-0",
            )}
          >
            <div className="flex flex-col gap-5">
              <button
                id={buttonId}
                type="button"
                aria-expanded={open}
                aria-controls={`${descriptionId} ${detailsId}`}
                className={cn(
                  "flex items-baseline gap-1.5 rounded-sm text-left whitespace-nowrap tabular-nums outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
                  open ? "cursor-default" : "cursor-pointer",
                )}
              >
                <span className="text-lg font-semibold">{String(index + 1).padStart(2, "0")}</span>
                <span className={cn("text-sm", muted)}>/ {total}</span>
                {/* From 768px a closed card shows only its number, so the button needs the title as its name. */}
                <span className="sr-only">{step.title}</span>
              </button>
              <div className="flex flex-col gap-2.5">
                <h3 className={cn("font-medium", !open && "md:hidden")}>{step.title}</h3>
                {step.description && (
                  <Reveal open={open} reduce={reduce}>
                    <p id={descriptionId} className={cn("text-sm", muted)}>
                      {step.description}
                    </p>
                  </Reveal>
                )}
              </div>
            </div>

            {(step.label || step.note || step.media) && (
              <Reveal open={open} reduce={reduce}>
                <div id={detailsId} className="flex flex-col gap-5 pt-1">
                  {(step.label || step.note) && (
                    <div className="flex flex-col gap-5">
                      <div aria-hidden className="h-px bg-border" />
                      <div className="flex flex-col gap-2.5">
                        {step.label && <p className="text-xs font-medium">{step.label}</p>}
                        {step.note && <p className={cn("text-sm", muted)}>{step.note}</p>}
                      </div>
                    </div>
                  )}
                  {step.media && (
                    <div className="relative aspect-[3/2] w-full max-w-[450px] overflow-hidden rounded-md bg-muted [&>*]:size-full [&>*]:object-cover">
                      {step.media}
                    </div>
                  )}
                </div>
              </Reveal>
            )}
          </motion.li>
        );
      })}
    </ol>
  );
}