Acordeón editorial

"use client";

import { type CSSProperties, type ReactNode } from "react";

/** Acordeón editorial. React + TypeScript, sin dependencias. Personaliza con variables --gcxd-*. */
export type AccordionItem = { question: string; answer: ReactNode };
export type BaseAcordeonProps = {
  items?: AccordionItem[];
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcxd-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gcxd-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gcxd-root *, .gcxd-root *::before, .gcxd-root *::after { box-sizing: border-box; }
.gcxd-root button, .gcxd-root input, .gcxd-root textarea, .gcxd-root select { font: inherit; }
.gcxd-root button, .gcxd-root a { -webkit-tap-highlight-color: transparent; }
.gcxd-root :focus-visible { outline: 2px solid var(--gcxd-accent, #25724b); outline-offset: 4px; }
.gcxd-root ::selection { background: var(--gcxd-accent, #25724b); color: #fff; }
.gcxd-root button:disabled { opacity: .5; cursor: not-allowed; }
.gcxd-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gcxd-root *, .gcxd-root *::before, .gcxd-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gcxd-root { width:540px; }
.gcxd-root details { border-bottom:1px solid #cfd5cc; }
.gcxd-root summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; min-height:64px; color:#293e2e; font-weight:550; cursor:pointer; }
.gcxd-root summary::-webkit-details-marker { display:none; }
.gcxd-root summary span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #c2cbbc; border-radius:50%; flex-shrink:0; transition:transform .3s; }
.gcxd-root details[open] summary span { transform:rotate(45deg); }
.gcxd-answer { color:#4e5d4d; font-size:14px; line-height:1.7; padding:0 44px 24px 0; }`;

export function BaseAcordeon({
  items = [
    {
      question: "¿Puedo personalizar los colores?",
      answer:
        "Sí. Cada componente expone variables CSS y acepta una clase y estilos propios.",
    },
    {
      question: "¿Necesito instalar dependencias?",
      answer: "Solo React. Los estilos están incluidos en el mismo archivo.",
    },
    {
      question: "¿Funciona con teclado?",
      answer:
        "Sí. Usa Tab para enfocar una pregunta y Enter o Espacio para abrirla.",
    },
  ],
  className = "",
  style,
}: BaseAcordeonProps) {
  return (
    <div className={`gcxd-root ${className}`} style={style}>
      <style>{CSS}</style>
      {items.map((item, i) => (
        <details key={i}>
          <summary>
            {item.question}
            <span aria-hidden="true">
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
              >
                <path d="M5 12h14M12 5v14" />
              </svg>
            </span>
          </summary>
          <div className="gcxd-answer">{item.answer}</div>
        </details>
      ))}
    </div>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/base-acordeon

import { BaseAcordeon } from "./base-acordeon";

export default function Ejemplo() {
  return <BaseAcordeon />;
}