Faq

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/faq v1.0.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/faq
7// What changed since: https://ds.interlace.tools/c/faq#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — FAQ
12 *
13 * Frequently-asked-questions accordion. Composes the canonical Accordion
14 * primitive into a single-prop API: pass an array of {question, answer}
15 * and get the full disclosure pattern (keyboard, ARIA, animation)
16 * inherited from Accordion → Base UI.
17 *
18 * ## Anatomy
19 *
20 *   <section data-slot="faq" data-min-viewport="320">
21 *     <Container>
22 *       <Typography variant="h2">{title}</Typography>
23 *       <Accordion>{questions.map(...)}</Accordion>
24 *     </Container>
25 *   </section>
26 *
27 * | Rule | Concept                          | Where in this file                                          |
28 * | ---- | -------------------------------- | ----------------------------------------------------------- |
29 * | R4   | Extends native el                | `React.ComponentProps<'section'>` + FAQ props               |
30 * | R6   | data-slot on root                | `data-slot="faq"`                                           |
31 * | R10  | Composition seam (questions)     | Array<{question, answer}>                                    |
32 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
33 * | R18  | Tailwind only                    | Zero inline `style`                                         |
34 * | R19  | Tokens only                      | Container + Accordion own all tokens                        |
35 * | R25  | Client component                 | Accordion is client-tier                                    |
36 * | R26  | A11y from Accordion              | Accordion owns disclosure ARIA                              |
37 */
38 
39import { cn } from '@/lib/utils';
40import {
41  Accordion,
42  AccordionItem,
43  AccordionTrigger,
44  AccordionContent,
45} from '@/components/ui/accordion';
46import { Container } from '@/components/ui/container';
47import { Skeleton } from '@/components/ui/skeleton';
48import { Stack } from '@/components/ui/stack';
49import { Typography } from '@/components/ui/typography';
50 
51export const MIN_VIEWPORT = 320 as const;
52 
53interface FAQItem {
54  question: React.ReactNode;
55  answer: React.ReactNode;
56}
57 
58interface FAQProps extends Omit<React.ComponentProps<'section'>, 'title'> {
59// … truncated