Accordion List

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, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Accordion List — shadcn-style divided rows that open by height (from the Nitip service and careers lists).
 * Closed rows sit at 50% opacity and return to full on hover; the plus turns into a cross when open.
 * Closed panels stay in the HTML (good for search engines) but are inert, so keyboards and screen readers skip them.
 */

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

export type AccordionListItem = {
  value: string;
  title: React.ReactNode;
  content: React.ReactNode;
  /** Shown before the title from 640px up: a number, a dot, an icon. */
  marker?: React.ReactNode;
};

export type AccordionListProps = {
  items: AccordionListItem[];
  /** "single" closes the open row when another opens. */
  type?: "single" | "multiple";
  defaultValue?: string[];
  value?: string[];
  onValueChange?: (value: string[]) => void;
  /** Dim closed rows to 50%. */
  dim?: boolean;
  className?: string;
};

export function AccordionList({
  items,
  type = "single",
  defaultValue = [],
  value,
  onValueChange,
  dim = true,
  className,
}: AccordionListProps) {
  const [internal, setInternal] = React.useState<string[]>(defaultValue);
  const open = value ?? internal;
  const id = React.useId();

  function toggle(item: string) {
    const isOpen = open.includes(item);
    const next = isOpen ? open.filter((v) => v !== item) : type === "single" ? [item] : [...open, item];
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  }

  return (
    <div className={cn("w-full", className)}>
      {items.map((item) => {
        const isOpen = open.includes(item.value);
        const panelId = `${id}-${item.value}-panel`;
        const triggerId = `${id}-${item.value}-trigger`;
        return (
          <div
            key={item.value}
            className={cn(
              "border-b transition-opacity duration-400 ease-out last:border-b-0",
              dim && !isOpen && "opacity-50 hover:opacity-100 has-focus-visible:opacity-100",
            )}
          >
            <h3>
              <button
                id={triggerId}
                type="button"
                aria-expanded={isOpen}
                aria-controls={panelId}
                onClick={() => toggle(item.value)}
                className="flex w-full cursor-pointer items-center gap-4 rounded-md py-4 text-left text-sm font-medium outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
              >
                {item.marker && (
                  <span className="hidden w-8 shrink-0 text-muted-foreground tabular-nums sm:flex">{item.marker}</span>
                )}
                <span className="flex-1">{item.title}</span>
                <motion.svg
                  aria-hidden
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2}
                  strokeLinecap="round"
                  className="size-4 shrink-0 text-muted-foreground"
                  initial={false}
                  animate={{ rotate: isOpen ? 45 : 0 }}
                  transition={soft}
                >
                  <path d="M12 4v16M4 12h16" />
                </motion.svg>
              </button>
            </h3>
            <motion.div
              id={panelId}
              role="region"
              aria-labelledby={triggerId}
              inert={!isOpen}
              initial={false}
              animate={isOpen ? "open" : "closed"}
              variants={{
                open: { height: "auto", opacity: 1, transition: { height: soft, opacity: { duration: 0.25, delay: 0.1 } } },
                closed: { height: 0, opacity: 0, transition: { height: soft, opacity: { duration: 0.15 } } },
              }}
              className="overflow-hidden"
            >
              <div className={cn("pb-4 text-sm text-muted-foreground", item.marker && "sm:pl-12")}>{item.content}</div>
            </motion.div>
          </div>
        );
      })}
    </div>
  );
}