Organismes
83 sections de fonctionnalités réparties en 10 chapitres — coques, tableaux, graphiques, plans de salle, tunnels d’achat — composées à partir de molécules et d’atomes.
Régions d’interface complexes et complètes : coques de page et navigation, tableaux admin, graphiques d’analytique, billetterie et placement, panier et paiement. Chaque organisme possède un domaine produit et son point d’accès aux données.
Pourquoi les organismes
Les organismes sont les unités de niveau fonctionnel du système de design ePassLive — en-têtes, tableaux de données, graphiques, plans de salle, paniers, tunnels de paiement. Chaque organisme compose des molécules et des atomes autour d’un domaine produit et possède son point d’accès aux données : tout ce qui est au-dessus (gabarits, pages) reste purement structurel, tout ce qui est en dessous (molécules, atomes) reste sans état et présentationnel. Choisissez un organisme quand une région d’interface a une mission nommable en langage produit — « le panier », « le plan de salle », « le tableau de données admin ». Les organismes sont thématisés par le même jeu de jetons en mode clair et sombre et livrés conformes WCAG 2.2 AA. Si une composition se répète sur trois pages ou plus, promouvez-la en gabarit — ne dupliquez jamais l’organisme.
Mises en page et coques
Structures de page : coques boutique et admin, coques de compte, panneaux de liste et grilles de tableau de bord.
StorefrontShell
Public storefront page shell — header, footer, skip-link, main landmark. Real organism; the templates stories twin was removed per ADR-035.
Ouvrir le composantAdminlayout
Admin application frame with a skip link, sidebar and header slots, and a focusable, scrollable main content region.
Ouvrir le composantAccountShell
Full-page account shell composing TopNav, an account-section Tabs bar, a main content slot, and the Footer organism — one organism, the whole logged-in account page.
Ouvrir le composantDetailPageLayout
Generic detail-page host organism (W3 organisms plan). Slot-host for the shared view-one-record chrome — back-trail (Breadcrumbs or TextLink), header (eyebrow / H1 + StatusBadge / meta / actions), section navigation (declarative sections mapped to the Tabs molecule via split rendering — nav-only strip + organism-rendered tabpanel — or a freeform navigation override e.g. Stepper), body with optional sticky 20rem aside (content-first DOM + CSS mobile order flip, EventTabs tickets-first parity), footer divider, overlays — plus four page states (ready/loading/error/notFound) as full swaps with whole-node fallback overrides. Zero i18n keys (English-literal defaults, ListPanel precedent). Adopted by client-portal tickets/[id] and storefront dashboard EventDetail (W3).
Ouvrir le composantListPanel
Slot-based list host for the recurring header + toolbar + table + pagination pattern. Renders a token-driven header (title + actions slot), a renderTable slot for table ecosystem choice (ADR-033-compliant storefront DataTable OR DS AdminDataTable), optional toolbar/filter slot, density: default|compact for POSRegister-shaped layouts (cashier/scanner), inline loading skeleton and empty states, native button pagination. Used in storefront CRUD pages, dashboard tables, and POS register pattern (recipe cited in docs/components/organisms/listpanel.recipes.md).
Ouvrir le composantSideCard
Storefront marketing aside — optional header image, eyebrow (defaults to « À découvrir » / « Discover »), title, body, bullet list and a text CTA with arrow, on a rounded-ep-md bg-ep-surface-card surface with border-ep-border. Complements main content columns (event detail sidebars, help panels). Exported from the barrel (src/index.ts) with SideCardProps.
Ouvrir le composantAdminDashboardGrid
Responsive grid of admin stat cards (title, value, optional hint) in 2, 3, or 4 columns, with an aria-live empty state.
Ouvrir le composantDonnées et analytique
Graphiques, grilles d’indicateurs, tableaux de statistiques et flux d’activité pour les tableaux de bord.
| Label | Value |
|---|---|
| A | 4 |
| B | 7 |
| C | 5 |
| D | 9 |
| E | 6 |
| F | 11 |
Chart
Dependency-free line/bar/donut/sparkline chart — hand-rolled token-driven SVG with a visually-hidden data table (WCAG 1.1.1). No chart library; for recharts-based organisms see StackedBarChart / TimeSeriesAreaChart.
Ouvrir le composantChartCard
Card with a header (title + range-pill radiogroup selector) and a line-chart body (unfilled polyline rendered by the Chart organism). Used for Revenue Overview.
Ouvrir le composant| Label | Value | |
|---|---|---|
| VIP | GA | |
| A | 2 | 3 |
| B | 3 | 4 |
| C | 2 | 2 |
| D | 5 | 2 |
StackedBarChart
Multi-series stacked bar chart (recharts integration). Used for channel breakdowns (merch/ticket/package/pass/free per day).
Ouvrir le composantTimeSeriesAreaChart
Time-series area chart with gradient fill (recharts integration). Used for revenue-over-time with currency-formatted axes.
Ouvrir le composantStatGrid
Responsive KPI grid composing StatCard molecules — 16px gap, equal columns, stacks to 1 column on mobile. Renders up to 4 cards by default; showAll lifts the cap, columns pins the layout.
Ouvrir le composantStatTable
Multi-section stats table with totals, subtotals per product type. Thuwan-mandated format: Total Available → Ticket Counts → Sales → ePassLive Fees → Transfer to Bank Account. DS-STAT-01 multi-column contract (one <th scope='col'> per declared column) when `columns` is supplied; legacy 2-column (Metric + Amount) when omitted. i18n: `locale` drives Intl.NumberFormat only (en-CA / fr-CA); chrome strings are overridable per prop.
Ouvrir le composantStatisticsDateFilter
Controlled date-range filter with preset pills (Today/Yesterday/This week/Last week/This month/Year to date/ALL), From/To date inputs, and a Clear reset, labeled via a string map for i18n.
Ouvrir le composantActivityList
Activity feed section — labelled card with heading, optional caption and rows rendered by the ActivityItem molecule (kind → semantic tone + label). Empty state is visible muted text; no aria-live is set by the component.
Ouvrir le composantEventComparisonTable
Event comparison table — side-by-side comparison of multiple events showing title, date, venue, from-price, star rating and a sold-capacity meter, plus an sr-only remove column for shortlist curation. Used for festival multi-event booking. Wave-3 L8c domain wrapper: composes the canonical DataTable organism with a locale-aware EventComparisonRow column config. Exported from the barrel since the ADR-035 barrel-orphans Wave 1 promotion (commit 9d4e6ec4) along with EventComparisonTableProps and EventComparisonRow. Dormant (0 app consumers — ADR-035 disposition pending) but part of the public API.
Ouvrir le composantTableaux et registres admin
L’organisme DataTable canonique et ses compositions admin — variantes filtrable, triable, paginée et à actions groupées.
DataTable
Canonical table organism for the entire design system — generic over its row type. Column config (key/header/format/sortable/numeric/hideBelow/sortValue/sortLabel/headerSrOnly), three-state sort cycle (null→asc→desc→null with aria-sort on <th>), accessible empty state (role=status / aria-live=polite), optional row selection (leading checkbox column with aria-selected + highlight), whole-row anchor navigation (rowHref stretches the first cell's <a>::after over the row — keyboard focus, accessible name, middle-click and open-in-new-tab all come from the anchor), interactive rows (onRowClick — focusable <tr>, Enter/Space activation, the <tr> KEEPS its row role so cell semantics survive), and grouped mode (rowGroups — full-width <th scope='rowgroup'> per group, sorting bypassed). Wave-3 L5-M3: the five Admin*Table organisms compose it instead of re-implementing table chrome; Wave-3 L8c: the five domain tables (BookingsTable, TierTable, UserTable, PromoTable, EventComparisonTable) compose it for the storefront. Exported from the barrel along with DataTableProps, DataTableColumn, DataTableRowGroup, DataTableSelection and SortDirection.
Ouvrir le composantAdminDataTable
Plain admin data table with optional row navigation — Wave-3 L5-M3 thin composition over the canonical DataTable organism. The historical Admin column API is preserved (id / cell / width / align — no sorting, no selection); DataTable owns the table chrome (header rhythm, row hover, responsive overflow, accessible empty state). Its distinctive feature is row navigation: rowHref(row) makes the FIRST cell a real <a> whose ::after stretches over the whole row, so the entire row is clickable while the accessible name, keyboard focus, middle-click and open-in-new-tab all come from a genuine link rather than a click handler on <tr>; onRowActivate(row, event) is the SPA hook for unmodified primary clicks. Exported from the barrel along with AdminDataTableProps and AdminDataTableColumn.
Ouvrir le composantAdminFilterableTable
Search-filtered admin data table — Wave-3 L5-M3 composition of the canonical DataTable organism with the TableToolbar molecule (search input + clear affordance). The wrapper owns the filtering semantics: filterPredicate(row, query) narrows rows client-side, a live region in the toolbar announces 'N / total matching', aria-controls wires the search input to the table wrapper, and emptyMessage (no data) vs noMatchMessage (filter miss) distinguish the two empty states. Filter chips (filters prop, forwarded to TableToolbar) are independent from the search predicate — chips handle categorical facets, the predicate handles the free-text query. Exported from the barrel along with AdminFilterableTableProps and AdminFilterableTableColumn.
Ouvrir le composantAdminPaginatedTable
Controlled-pagination admin data table — Wave-3 L5-M3 composition of the canonical DataTable organism with the Pagination molecule (first / prev / pages / next / last + page-size readout, hidden on a single page). Pagination is FULLY CONTROLLED: currentPage + onPageChange are required, the wrapper never owns page state, the page is clamped into [1, totalPages] and sliced out of the full rows array. The Pagination molecule hides itself on a single page so short tables don't show dead chrome. Exported from the barrel along with AdminPaginatedTableProps and AdminPaginatedTableColumn.
Ouvrir le composantAdminSortableTable
Sortable admin data table — Wave-3 L5-M3 thin composition over the canonical DataTable organism that keeps the historical Admin column API (accessor / cell, sortable-by-default columns, numeric data anchors, hideBelow responsive pruning). DataTable owns the three-state sort cycle (none → asc → desc → none), aria-sort semantics, keyboard-accessible header buttons (Tab / Enter / Space), row hover and the accessible empty state (role=status / aria-live=polite). Columns are sortable BY DEFAULT (sortable: false opts out — the inverse of DataTable's opt-in convention). Re-exports SortDirection for legacy barrel consumers. Exported from the barrel along with AdminSortableTableProps and AdminSortableTableColumn.
Ouvrir le composantAdminBulkActionTable
Controlled bulk-selection admin data table — Wave-3 L5-M3 composition over the canonical DataTable organism. The leading checkbox column, per-row aria-selected + highlight and the accessible empty state come from DataTable's selection prop; this wrapper is FULLY CONTROLLED — the parent owns the selection Set<string> and receives toggle callbacks via onSelectionChange, the wrapper holds zero internal state. The bulk-action toolbar renders an 'N selected' live-region count plus one button per action (destructive variant for irreversible actions), all disabled until at least one row is picked. Exported from the barrel along with AdminBulkActionTableProps, AdminBulkActionTableColumn and AdminBulkAction.
Ouvrir le composantResponsivetable
Generic data table that switches between table, stacked, and card layouts by viewport width, with priority-sorted columns and an EmptyState fallback.
Ouvrir le composantBookingsTable
Producer bookings list — 7 columns (buyer+email stacked, event, venue, date, tickets, total, status pill). Composes the DataTable organism with a BookingRow column config (Wave-3 L8c). Five semantic-tint status pills (confirmed / pending / cancelled / refunded / checked-in). Bilingual via the `locale` prop (default `"fr"`). Caption is screen-reader-only by default. i18n: organism owns zero message-catalog keys — inline bilingual literals (Wave-3 W4 / VenueAccessMap / ActivityList precedent); caller-localize `rows`.
Ouvrir le composantPromoTable
Promo-code table for commerce promo CRUD lists — code, discount, scope, validity window, usage meter, active/inactive status pill. Composes the DataTable organism with a PromoRow column config (usage meter + status pill live in the column formatters — Wave-3 L8c). Every user-visible string defaults to English and is overridable via the `labels` prop (headers, status labels, usage aria-label template) — FR-CA recipe in the source JSDoc. Exported from the barrel.
Ouvrir le composantTierTable
Season-pass comparison table — category, per-event price, events included, effective total, perks list, and a Select CTA column. Composes the DataTable organism + the Button atom with a locale-aware TierRow column config (highlight rows tint via rowClassName — Wave-3 L8c). Bilingual chrome via `locale` (default `"fr"` — season-pass page language); the CTA is decorative (no onClick wiring). Exported from the barrel.
Ouvrir le composantUserTable
Team management table — member (name + email stacked), role, status pill, venue count, last sign-in. FR/EN via the `labels` prop (the source module also exports a `USER_TABLE_LABELS_FR` bundle — note: NOT re-exported from the barrel yet). Composes the DataTable organism with a UserRow column config (two-line member cell + role/status formatters — Wave-3 L8c); rows are not interactive — role editing lives in the consumer. Exported from the barrel.
Ouvrir le composantContenu et marketing
Surfaces marketing publiques : héros, cartes et grilles d’événements, carrousels, FAQ, preuve sociale et pieds de page.
Hero
Full-bleed marketing hero — background image/video + gradient overlay + headline + subtitle + HeroSearch + featured badges. Used on /, /landing/* pages.
Ouvrir le composantEventHero
Full-bleed event-page hero — background image under a bg-ep-gradient-scrim readability scrim, teal uppercase eyebrow, h1 title, subtitle, a Date/Venue metadata <dl> and one optional inline CTA. FR/EN definition-term labels via locale (default fr). Content-driven height (no viewport preset). Mounts in the EventDetailPublic template's hero slot. No share/save actions, no tabbed info.
Ouvrir le composantEventCard
EPASS card organism — a square image or branded no-image placeholder (title monogram + optional localized category caption), with date and price chips, sold-out scrim, and a solid-background text block. The whole card is one link; no CTA button. PRICE CONTRACT (ADR-067 §2): `priceLabel` is used verbatim; without it, `priceFrom === 0` means unknown and is not announced as free. Category is visible only in the image-less placeholder and included in the card's accessible name.
Ouvrir le composantEventGrid
Responsive event grid — 1/2/3/4 columns at sm/md/lg/xl, capped at 48 events per grid. Same shape across all event listing pages. Loading branch renders an accessible skeleton grid (role='list' + aria-busy); empty branch composes the EmptyState molecule instead of hand-rolled markup. Composes the EventCard organism per item (single layout, no variant switch — Wave-3 L8c audit). Locale-aware via the `locale` prop (EN default, FR opt-in); 'fr' also merges the canonical EVENTCARD_LABELS_FR bag under each card's own `labels` (card-level keys win per key).
Ouvrir le composantEventsRow
EventsRow — horizontally scrollable rail of compact hand-rolled event cards (« Événements à la une » region, locale-aware). Fixed-width w-56 (224px) cards with gap-3 (12px), image (or IMG placeholder block), two-line clamped title, venue · date, teal from-price and a Voir/View link sized at --ep-tap-min. The rail overflow-scrolls with proximity snap. Does NOT compose the EventCard organism (self-contained markup).
Ouvrir le composantEventList
Vertical divided list of events — compact 1-per-row rows (thumbnail, title + badge chip, date · venue, city, fromPrice, per-row 'Acheter des billets' button), not EventCard tiles. For the list view toggle. Renders its own row markup — does NOT compose the EventCard organism (but DOES compose the EmptyState molecule on empty input). All three authored strings localize via locale (FR default). Rows stack below sm; buy links carry per-event names and the 44px tap floor.
Ouvrir le composantFeaturedEvents
Section wrapper for an EventGrid (or any children) — locale-ready heading (h1–h6 via headingAs, default h2, useId-derived id unless headingId given), optional 'View all' link (rendered only when both viewAllLabel and viewAllHref are set, sized at --ep-tap-min), tone light/dark background, responsive max-w-7xl padding, locale-aware empty-state message (locale 'en' default / 'fr' opt-in; emptyMessage override). NOT a carousel — no events prop, no auto-advance; children-less render shows a dashed role='status' 'No content available.' fallback. Server-renderable (no 'use client').
Ouvrir le composantCarousel
Single-slide featured-events hero carousel. State-based slide switching (React state, not native scroll) with prev/next buttons and a WAI-ARIA tablist dot pagination — roving tabindex, ArrowLeft/ArrowRight (wrapping), Home/End, polite aria-live announcements. EN-default authored strings, FR via locale='fr'. No storefront consumer since the 2026-10-27 homepage rebuild (the lane shipped its own HeroShowcase instead) — kept as a DS organism.
Ouvrir le composantAccentCard
Theme-aware accent CTA card — light bg-ep-surface-card surface with a decorative left strip in one of the four ADR-031 brand hues (teal/indigo/amber/pink), optional eyebrow/body/CTA (Phosphor arrow, SideCard family norm), and optional promotion to a keyboard-activated button via onClick. Dormant organism (ADR-035) — zero consumers.
Ouvrir le composantFAQ
FAQ section organism — thin composition wrapper over the Accordion molecule (R1 composition fix, 2026-08-27): question maps to the accordion header (button + aria-expanded/aria-controls), answer to the region panel. Panels stay independently openable (multiple is always on); roving ArrowUp/ArrowDown/Home/End keyboard navigation is owned by the molecule. Ships in a card <section aria-label> with an <h2> heading — FR default, EN via locale, or a full heading override. Requires JavaScript.
Ouvrir le composantSocialProof
Testimonial grid — one figure per quote (Phosphor Star rating row, blockquote, figcaption author + context) in a responsive 1/2/3-column ul. Localized section heading (« Ce qu'ils en disent » default). Static display organism: no carousel, no avatar, no logo wall (those were a never-shipped v0 spec).
Ouvrir le composantFooter
Public site footer — multi-column: Brand + tagline, navigation columns (FooterColumn molecules), social icon buttons, optional newsletter column, legal strip. Responsive CSS grid (grid-cols-1 → sm:grid-cols-2 → lg:custom with --footer-cols custom property).
Ouvrir le composantAdminFooter
Slim admin chrome footer: copyright line on the left, inline link row on the right. Uses text-ep-xs + text-ep-text-muted for legal text, border-ep-border-subtle top border, gap-4 spacing. All colors via DS tokens (no raw hex).
Ouvrir le composantBilletterie et placement
Cartes de billets, portefeuilles et sélecteurs, plans de salle interactifs, cartes de lieu et transferts.
TicketCard
Single ticket card — barcode (Barcode atom), event title, date, venue, seat/tier, status. Real organism; the molecules placeholder twin was de-cataloged.
Ouvrir le composantTicketWallet
The buyer's ticket wallet: one row per ticket with a Code-128 barcode (Barcode atom, decorative) or an empty slot, event title, venue · date, door/section/seat detail, a status pill across four wallet statuses (active / used / transferred / expired) and a transfer button enabled only on active tickets.
Ouvrir le composantTicketTierList
Single-selection radiogroup of ticket tier cards — name, description, price, perks, availability and fees per tier. Sold-out tiers disable their radio and dim the card; the highlight flag tints a recommended tier. Locale-aware labels (fr/en).
Ouvrir le composantTicketSelector
Two modes, one component. Default (`mode` absent) — the inline ticket-quantity stepper (− / number / +) for ticket, pass and merchandise lines, with a translated ariaLabel, polite aria-live output and a 44×44 tap target in every size preset. `mode='card'` — the commerce card the buyer event page renders per ticket / pass / package: bordered rounded surface, name + kind pill, muted caption, clamped description beside price+fees, stepper beside the action button. `mode='row'` (2026-11-02, Ticketpro price-list reference) — one divided row per ticket / pass / package: name + kind pill + badges, caption and a 2-line clamped description on the left, the price (teal) with its fees note, then the stepper on the right; NO action button — the stepper IS the action and starts at 0 (the caller binds `value` to the buyer's selection); a non-buyable row prints `statusMessage` where the stepper would be. Replaces the deprecated `TicketTier` molecule for per-tier quantity input, and replaces the consumer-layer ticket row markup that used to live in storefront/EventTicketList (R8).
Ouvrir le composantSeatMap
Venue seating chart as a CSS-grid of seat buttons: sections → rows → seats, five seat statuses (available / held / sold / blocked / inaccessible) driving color PLUS non-color cues (dashed border = held, dotted = blocked, strikethrough = sold/inaccessible). Edit mode toggles a controlled selection through selectedSeats + onSeatSelect; view mode renders read-only. Pair with SeatMapLegend (tier legend) and SeatPicker (capped, checkout-oriented picker) — SeatPicker reuses this component's seat types.
Ouvrir le composantSeatMapLegend
Tier legend for the seat map. One toggle button per price tier with a color swatch, name, formatted price, and (optionally) availability. Sibling organism to SeatMap (the chart surface) and SeatPicker (the capped checkout variant). Real organism; the molecules placeholder twin was de-cataloged. Implements the seat-map family i18n convention (see also SeatMap, SeatPicker) via the SeatMapLegendLocale type.
Ouvrir le composantSeatPicker
Checkout-oriented seat picker: sections → rows → seats grid reusing the SeatMap seat types and the same color + non-color status cues (WCAG 1.4.1 — dashed = held, dotted = blocked, strikethrough = sold/inaccessible). Adds a maxSeats cap (default 8, clamped 1–20) that disables unselected seats at the cap while deselection stays possible, a localized counter line, and a read-only confirmation mode. Pair with SeatMap (full chart) and SeatMapLegend (tier price legend).
Ouvrir le composantAccessibilitySeatSelector
Accessibility-need seat selector — filters + seat map integration for reserved seating. Real organism implementation; the molecules placeholder twin was de-cataloged per ADR-035.
Ouvrir le composantTicketDragDrop
Two-pane ticket picker with HTML5 drag-and-drop — available left, included right. Rows are draggable buttons; keyboard path is Tab/Enter/Space on the same buttons (WCAG 2.1.1); moves announced via aria-live (WCAG 4.1.3); tap targets >= --ep-tap-min (WCAG 2.5.5). Controlled contract matches TicketPicker (selectedIds in / onChange out). ADR-026.
Ouvrir le composantTicketTransferModal
Ticket transfer dialog — enter recipient email, select the ticket to transfer, add an optional message, and confirm. Composes the Modal molecule for dialog chrome (portal, scrim, footer slot). Preserves legacy transfer flow.
Ouvrir le composantVenueMap
Venue-level sold-inventory floor plan — a static figure/grid of section tiles colored by sold percentage, with a stage block and a four-tier legend. Not a geographic map: distinct from the storefront dashboard's same-named Google-Maps VenueMap wrapper (lat/lng/apiKey). Venue-level overview companion to SeatMap (seat-level statuses). Built-in labels are FR-CA by default (Scène, % vendu, Devant la scène) with a full EN set via the locale prop (Stage, % sold, Front of stage).
Ouvrir le composantVenueAccessMap
Accessibility wayfinding figure: gridded 16:10 plan with positioned, colour-coded markers for five access kinds (wheelchair, hearing-loop, guide-dog, ramp, elevator), each announced via role=img labels, plus a legend list with details. Bilingual FR/EN inline literals via `locale` (FR default). Static presentational organism — no interactivity.
Ouvrir le composantCommerce et paiement
Tiroirs et récapitulatifs de panier, panneaux de paiement, confirmation de commande, cartes merch et forfaits.
CartDrawer
Slide-in cart drawer from right, composing the Drawer molecule for dialog chrome (portal, scrim, Escape-to-close). Cart line list + totals footer + checkout CTA. Localized fr/en labels; appears instantly (no animation).
Ouvrir le composantCartSummary
Static cart/order recap aside for the checkout page — line items (label + optional detail) in a divided list, then a definition list of pre-formatted subtotal / fees / taxes (TPS+TVQ) / total rows and a full-width primary CTA (Button atom). Built-in labels are FR-CA by default (Recapitulatif, Sous-total, Frais, TPS+TVQ, Total, Confirmer et payer) with a full EN set via the locale prop (Order summary, Subtotal, Fees, Tax, Total, Confirm and pay). Not a timer: the legacy reservation-bar pattern (items/total/reservationMinutes/onCheckout) was never implemented. `variant='selection'` (2026-11-02) is the event page's live panel: a heading ('2 tickets') with the total and its note, the lines with a price and a trash IconButton each, an optional notice, and ONE primary CTA with onCta — a side panel that sticks below the site header from lg, and a bottom bar stuck to the viewport below lg that collapses to heading + total + chevron and expands to the lines.
Ouvrir le composantCheckoutSummary
Checkout summary panel — buyer identity, selected payment method (brand + last4, Nuvei processing note), itemized line items, 4-row totals (subtotal / fees / TPS + TVQ / total), and an overridable FR-CA refund-policy footnote. Static review panel — no interactive controls.
Ouvrir le composantOrderConfirmation
Post-purchase confirmation — success state with role="status" + aria-live="polite". Displays order ID, buyer identity (name + email), event card (title / venue / date / issued tickets), total paid, and ticket actions (download + add to Apple/Google Wallet). Uncontrolled organism; FR + EN via locale prop (default fr).
Ouvrir le composantMerchCard
Artist-merchandise product card — square product image, h3 title, optional artist line, pre-formatted price and an add-to-cart CTA pinned to the card bottom. Static display organism (Family 7 Commerce, sibling of PackageCard/SideCard): price is a pre-formatted string and the button copy switches FR/EN via locale.
Ouvrir le composantPackageCard
Season/bundle package offer card on a teal-tinted surface — event-count eyebrow, title, short description, big total price with per-event breakdown line, inclusion list, and a choose CTA pinned to the card bottom. Static display organism (Family 7 Commerce, sibling of MerchCard): price strings are pre-formatted by the caller and every built-in string switches FR/EN via locale.
Ouvrir le composantGroupBookingForm
Group booking attendee-roster builder — one card per participant (full name required, optional email + accessibility note), fully controlled through attendees/onAttendeesChange. « Add attendee » disables at maxAttendees; per-row « Remove » hides at minAttendees; parent passes a pre-formatted totalLabel preview. FR/EN copy via locale prop (inline i18n, SeatMapLegend precedent).
Ouvrir le composantFormulaires et authentification
Structures et dialogues de formulaire : authentification, téléversement de fichiers, moyens de paiement, réglages admin.
AuthForm
Self-contained auth card form for the three auth modes (sign-in / sign-up / forgot). Field set switches per mode — fullName only on sign-up, password hidden on forgot; labels and copy switch per locale (FR default, EN via locale prop, SeatMapLegend inline-i18n precedent). onSubmit receives { email, password?, fullName? } after native validation; secondaryAction renders the footer link. Password-manager autoComplete hints on every field.
Ouvrir le composantFileUpload
Drag-and-drop file field — dashed drop zone with click AND keyboard paths (Enter/Space), controlled (value) or uncontrolled file list showing name + size + Remove, and accept/maxSize/maxFiles client-side validation surfaced via onError. The organism owns zero network calls — onChange hands the raw File[] to the caller. Built-in zone copy is EN/FR via locale (default en). Dormant organism (no consumer yet).
Ouvrir le composantFormLayout
Multi-step wizard layout — vertical step rail (240 px, left) + step content panel (right) + optional footer CTA slot. Owns no <form>, no fields, no validation, no data: the route fills each step via children and drives navigation via steps/currentStepId/onStepChange. Bilingual rail heading via locale (default fr); step labels stay caller-localized. Dormant organism (no consumer yet).
Ouvrir le composantFormModal
Form-in-a-dialog pattern — thin composition over the Modal molecule that owns the <form> wrapper and the cancel/submit footer pair. The submit button binds to the form via the HTML form attribute, so Enter-in-field and native validation keep working while actions render in the footer (outside the form DOM the Modal portals past). Body-only usage covers content dialogs sharing the same chrome (W2).
Ouvrir le composantPaymentMethodForm
Add-payment-method form with client-side validation for card number, MM/YY expiry, CVC, and name on card.
Ouvrir le composantAdminSettingsPanel
Card panel for admin settings sections with a titled header, a body slot, and an optional right-aligned footer action bar.
Ouvrir le composantRetours et superpositions
Bannières, groupes d’alertes empilées et dialogues de confirmation.
Banner
Full-width announcement bar — 5 variants (info/success/warning/error/solid). Dismissible, with optional CTA. role='region' aria-labelledby={titleId}. The `solid` variant is brand-aligned (bg-ep-btn-primary + white text + animated icon + CTA button) for high-visibility system states (admin impersonation, maintenance mode). Composes the Alert molecule's ALERT_VARIANT_STYLES contract for the tinted variants (Alert is the single source of truth; Wave 3 Tier-1 L4-M3) and auto-adapts in dark mode.
Ouvrir le composantAlertGroup
Stacked alert list composing the Alert molecule per alert. Stateless render loop over the specs — dismissal is per-alert; no queue, auto-dismiss, or max-visible logic.
Ouvrir le composantConfirmModal
Destructive-confirmation dialog — thin composition over the Modal molecule that owns the cancel/confirm action pair (danger variant by default, primary for archive/apply/clear) while the body (message, warnings, type-to-confirm input) stays consumer-owned. Extracted from 15 dashboard confirm sites (W2).
Ouvrir le composantOpérations d’enregistrement
Opérations porte : scan QR en direct et flux d’enregistrement en temps réel.
QRScanner
Live camera-based QR scanner for ticket check-in. Uses BarcodeDetector API with manual entry fallback. Audio + haptic feedback on scan.
Ouvrir le composantCheckinList
Door-operations check-in queue — one row per attendee (name, ticket tier, door, optional pre-formatted scan time) with a live state dot and a semantic state pill (En attente / En cours / Admis / Refusé). Rows in the scanning state expose inline Admettre/Refuser buttons (visual only — no callbacks). Fully presentational static list: the caller owns scan wiring; no fetching, no Medusa subscription.
Ouvrir le composant