Brickslab.

@brickslab/ui-web

Composant de disclosure basé sur l'élément natif <details>/<summary>. Fonctionne sans JavaScript en mode non-contrôlé. Mode contrôlé (open + onToggle) pour la logique exclusive ou orchestrée. Animation fade+slide via @keyframes. 3 variantes, 3 tailles, support icônes et disabled.

Aperçu

variant bordered (défaut) — comportement natif <details>

Comment installer la librairie ?
Utilisez pnpm add @brickslab/ui-web dans votre projet. Assurez-vous d'avoir React 18+ et les design tokens configurés dans votre CSS global.
Les composants sont-ils accessibles ?
Oui — chaque composant respecte les attributs ARIA (role, aria-selected, aria-label…) et le focus-visible est visible sur tous les éléments interactifs.
Peut-on utiliser les composants en dark mode ?
Absolument. Tous les styles utilisent des design tokens CSS (var(--color-fg), var(--c-surface)…) qui s'adaptent automatiquement selon le thème actif.
Y a-t-il des dépendances requises ?
Seulement React 18+ et react-icons. Aucune librairie CSS externe n'est requise — les styles sont injectés via des balises <style>.

Mode exclusif contrôlé

un seul item ouvert à la fois — géré par useState

Comment installer la librairie ?
Utilisez pnpm add @brickslab/ui-web dans votre projet. Assurez-vous d'avoir React 18+ et les design tokens configurés dans votre CSS global.
Les composants sont-ils accessibles ?
Oui — chaque composant respecte les attributs ARIA (role, aria-selected, aria-label…) et le focus-visible est visible sur tous les éléments interactifs.
Peut-on utiliser les composants en dark mode ?
Absolument. Tous les styles utilisent des design tokens CSS (var(--color-fg), var(--c-surface)…) qui s'adaptent automatiquement selon le thème actif.
Y a-t-il des dépendances requises ?
Seulement React 18+ et react-icons. Aucune librairie CSS externe n'est requise — les styles sont injectés via des balises <style>.

Variantes

bordered · separated · ghost

bordered
Item A
Contenu de l'item A — variante bordered.
Item B
Contenu de l'item B — variante bordered.
Item C
Contenu de l'item C — variante bordered.
separated
Item A
Contenu de l'item A — variante separated.
Item B
Contenu de l'item B — variante separated.
Item C
Contenu de l'item C — variante separated.
ghost
Item A
Contenu de l'item A — variante ghost.
Item B
Contenu de l'item B — variante ghost.
Item C
Contenu de l'item C — variante ghost.

Tailles

sm · md (défaut) · lg — typographie + padding via CSS custom properties

sm
Titre de l'item
Contenu de l'accordéon en taille sm.
Autre item
Un second item pour montrer l'espacement.
md
Titre de l'item
Contenu de l'accordéon en taille md.
Autre item
Un second item pour montrer l'espacement.
lg
Titre de l'item
Contenu de l'accordéon en taille lg.
Autre item
Un second item pour montrer l'espacement.

Avec icônes

prop icon — icône à gauche du titre

Introduction
Présentation générale du projet et de ses objectifs.
Installation
Guide d'installation et de configuration initiale.
Composants
Catalogue complet des composants disponibles.
Sécurité
Bonnes pratiques et recommandations de sécurité.
Performance
Optimisations et conseils de performance.
Configuration
Options avancées et personnalisation.

Disabled

disabled — bloque l'interaction sur un item spécifique

Item disponible
Cet item est interactif et peut être ouvert.
Item désactivé
Ce contenu n'est pas accessible.
Autre item disponible
Ce dernier item fonctionne normalement.

Props — Accordion

PropTypeDéfautRequisDescription
childrenReact.ReactNode—✓Éléments AccordionItem enfants.
variant"bordered" | "separated" | "ghost""bordered"—Style visuel du groupe d'accordéons.
size"sm" | "md" | "lg""md"—Taille appliquée à tous les items via CSS custom properties.

Props — AccordionItem

PropTypeDéfautRequisDescription
titleReact.ReactNode—✓Contenu du déclencheur — texte ou JSX.
childrenReact.ReactNode—✓Contenu du panneau révélé.
openboolean——État ouvert — contrôlé par le parent. Sans cette prop, comportement natif <details>.
onToggle(open: boolean) => void——Callback appelé avec le nouvel état. Requis si open est fourni.
disabledbooleanfalse—Bloque l'interaction — empêche ouverture et fermeture.
iconReact.ReactNode——Icône optionnelle affichée à gauche du titre.

Utilisation

tsx
import { Accordion, AccordionItem } from "@brickslab/ui-web";
import { useState } from "react";

// Non-contrôlé (natif <details>)
<Accordion>
  <AccordionItem title="Question 1">Réponse 1</AccordionItem>
  <AccordionItem title="Question 2">Réponse 2</AccordionItem>
</Accordion>

// Contrôlé — exclusif (un seul ouvert à la fois)
const [open, setOpen] = useState<string | null>("q1");
const toggle = (id: string) => (isOpen: boolean) =>
  setOpen(isOpen ? id : null);

<Accordion variant="bordered">
  <AccordionItem title="Q1" open={open === "q1"} onToggle={toggle("q1")}>
    Réponse 1
  </AccordionItem>
  <AccordionItem title="Q2" open={open === "q2"} onToggle={toggle("q2")}>
    Réponse 2
  </AccordionItem>
</Accordion>

// Variantes
<Accordion variant="separated">...</Accordion>
<Accordion variant="ghost">...</Accordion>

// Tailles
<Accordion size="sm">...</Accordion>
<Accordion size="lg">...</Accordion>

// Avec icônes
import { FiInfo } from "react-icons/fi";
<AccordionItem title="Aide" icon={<FiInfo size={14} />}>...</AccordionItem>

// Disabled
<AccordionItem title="Indisponible" disabled>...</AccordionItem>