@breathe-ds/ui 0.4.0 → 0.5.4

package/README.md

@@ -57,6 +57,21 @@ For a site without a ready-made token file, define the roles on `:root` itself:
 and `scroll-padding` (6rem top, 7rem bottom) so keyboard focus never lands
 hidden behind the sticky Header or the BottomNav (WCAG 2.4.11).
 
+## Using it in a site (Tailwind v4)
+
+```css
+@import "tailwindcss";
+@import "@breathe-ds/ui/theme.css";        /* the roles */
+@import "@breathe-ds/ui/tokens/ttcab.css"; /* this brand's hex (or creeta.css, neutral.css) */
+/* Tailwind only generates the classes it finds written: scan the components */
+@source "../../node_modules/@breathe-ds/ui/components";
+```
+
+The components are TSX sources, not a build: in Next.js add
+`transpilePackages: ["@breathe-ds/ui"]` to `next.config`. The CSS entries of
+the package are exported with the `style` condition, which Tailwind's resolver
+requires (a plain string export fails with "Can't resolve").
+
 ## Token roles
 
 | Token (Tailwind) | Role | `--cg-*` |
@@ -271,6 +286,30 @@ from color, not from extra markup.
   trail, title, PersonChip and date, the text with its notice, the video beside
   it sticky from md, the transcript open; children for "other posts" and the
   final call).
+- **SidePanel**: Luma's drawer — a native `<dialog>` that slides in from the
+  right, full height, up to 32rem wide (full width on the phone), with a top
+  bar (close on the left, actions such as "Copy link" and "Course page ↗" on
+  the right) and a scrolling body. Esc, the backdrop and the button close it;
+  focus goes back to what opened it. The playground opens one from a
+  CourseCard (`onSelect`) with the whole class inside: cover, facts,
+  RegistrationBox with the button straight to the school's cart, programme,
+  discounts, rules.
+- **CourseCard**: the class card (ttcab's "Formação", the school's class list)
+  in the family's own vocabulary: course name as the category line, the city as
+  the title with the seats pill, the facts as EventFacts tiles (DateBadge for
+  the start, pin for the venue with its map link, clock for the workload), who
+  teaches as a Byline, a cover photo at the top, and at the foot the price with
+  its note beside the Button `accent`; `soldOut` puts the pill in the button's
+  place; `onSelect` makes the card a button stretched over it (the links inside
+  keep working) to open its details. By tone: no border, no shadow, no lift.
+- **Events** (after Luma and Meetup, for the school's classes): **EventList**
+  (days down a dotted rail, each with its rows), **EventRow** (time with an
+  accented end, title as the stretched link, or a button with `onSelect` to
+  open the details in a SidePanel, organizers, location, who is going with
+  "+N", square cover, an optional badge), **EventFacts** (date on a
+  calendar tile, venue on a pin tile with its link), **DateBadge** and
+  **RegistrationBox** (a strip title, ticket options as a radio group with the
+  remaining pill and the price, the one button at the foot).
 - **StoryPanel**: creeta's "origin" block — one dark panel (surface-panel)
   grouping a story: media at the top with a film that fades into the panel, the
   logo at its base, title, lead, three pillars in columns with a hairline above
@@ -307,7 +346,7 @@ from color, not from extra markup.
       **Data rule:** every professional MUST have a **CREFITO** attached (COFFITO requirement).
 - [x] **Pill / PillList** — the Atalho of novo.creeta (white 44px pill, arrow bubble: ↓ anchor, ↗ other page, optional meta); wrapping row + "See all"
 - [x] **AnchorNav** (floating capsule of anchors, scroll-spy + sliding indicator) — extracted from ttcab (10/29)
-- [x] **Footer** · **PageVideoHero** (loop, and player from a YouTube id or the site's own mp4) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
+- [x] **Footer** · **PageVideoHero** (loop, and player from a YouTube id or the site's own mp4; `panel.actions` puts two or more calls to action inside the panel) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
 - [x] **Site brand marks** (`components/marks/`): real symbol + wordmark for TTCAB and Creeta (10/29)
 - [ ] **ThreadRail** (side graphic device — a thread running down the left linking sections) — approved,
       **already exists in ttcab** → extract.

package/components/CourseCard.tsx

@@ -0,0 +1,139 @@
+import type { ElementType, ReactNode } from "react";
+import { Clock } from "lucide-react";
+import { Byline, type Person } from "./Byline";
+import { EventFacts, DateBadge, type EventFact } from "./EventFacts";
+
+type Labels = {
+  /** Prefix before the instructors' names ("With"). */
+  with: ReactNode;
+  /** The pill on the title line and the one in the button's place when sold out. */
+  soldOut: ReactNode;
+};
+const EN: Labels = { with: "With", soldOut: "Sold out" };
+
+type Props = {
+  /** Cover photo at the top (the school's pages always have one), 4:3,
+   *  focused near the top for the portrait photos the school uses. */
+  cover?: { src: string; alt?: string; position?: string };
+  /** The course ("Basic RTA course 2026"): the heading of the card. */
+  course?: ReactNode;
+  /** The class ("City · ST"): the line under the heading, with the seats pill.
+   *  Without `course`, it is the heading itself. */
+  title: ReactNode;
+  /** The start, for the calendar tile. */
+  start: { month: ReactNode; day: ReactNode };
+  /** The dates: "3 to 9 November 2026 · 08:30–17:30" and, below, the extra day. */
+  when: { title: ReactNode; subtitle?: ReactNode };
+  /** The venue (a link to the map when it has an href) and the address. */
+  where?: { title: ReactNode; subtitle?: ReactNode; href?: string; external?: boolean };
+  /** "69 class hours". */
+  workload?: ReactNode;
+  /** Seats, as a pill on the title line ("28 seats"). */
+  seats?: ReactNode;
+  /** Who teaches: portraits and names, each a link when it has an href. */
+  instructors?: Person[];
+  /** The price beside the button ("R$ 7.280") and a small note ("up to 12 instalments"). */
+  price?: { value: ReactNode; note?: ReactNode };
+  /** Small note at the foot ("Only physiotherapists can attend."). */
+  footnote?: ReactNode;
+  /** The call to action: a Button `accent`, the one full-colour element of the card. */
+  action?: ReactNode;
+  /** No seats left: the pill says so and takes the button's place. */
+  soldOut?: boolean;
+  /** Makes the card clickable (the title becomes a button stretched over the
+   *  card) to open its details, e.g. in a SidePanel. Links inside (the map,
+   *  the instructors, the action) keep working on their own. */
+  onSelect?: () => void;
+  headingLevel?: "h2" | "h3";
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const PILL = "inline-flex items-center rounded-pill bg-ink/[0.08] px-2.5 py-0.5 text-xs font-semibold text-ink";
+
+/**
+ * Course card of the Cuidado Global family — the class card (ttcab's
+ * "Formação", the school's class list), in the family's own vocabulary: the
+ * course name as the category line, the city as the title with the seats pill
+ * (as the EventRow), the facts as tiles (the DateBadge for the start, the pin
+ * for the venue, a clock for the workload, as the EventFacts), who teaches as
+ * a Byline, and the Button accent pinned at the foot. By tone: no border, no
+ * shadow, no lift.
+ */
+export function CourseCard({ cover, course, title, start, when, where, workload, seats, instructors, price, footnote, action, soldOut = false, onSelect, headingLevel: Title = "h3", linkComponent, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const facts: EventFact[] = [{ tile: <DateBadge month={start.month} day={start.day} />, title: when.title, subtitle: when.subtitle }];
+  if (where) facts.push({ tile: "pin", title: where.title, subtitle: where.subtitle, href: where.href, external: where.external });
+  if (workload)
+    facts.push({
+      tile: (
+        <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-ink/[0.06] text-ink">
+          <Clock size={20} strokeWidth={2} />
+        </span>
+      ),
+      title: workload,
+    });
+  const pill = soldOut ? t.soldOut : seats;
+
+  const foot = soldOut ? (
+    <span className="inline-flex min-h-11 items-center rounded-pill bg-ink/[0.08] px-5 font-heading font-semibold text-ink">{t.soldOut}</span>
+  ) : (
+    action
+  );
+
+  return (
+    <article className={`relative flex flex-col overflow-hidden rounded-[28px] bg-card ${onSelect ? "transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 [&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10" : ""} ${className}`}>
+      {cover && (
+        <div className="relative aspect-[4/3] overflow-hidden">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={cover.src} alt={cover.alt ?? ""} loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: cover.position ?? "50% 25%" }} />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col p-6 md:p-7">
+      {/* the course is what the person looks for: it is the heading; the city
+          is the variant, on the line below with the seats pill (2026-10-29) */}
+      <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+        {onSelect ? (
+          // the stretched hit area of the card: this button is the exception to [&_button]:z-10 (static, after: covers the card)
+          <button type="button" onClick={onSelect} className="static! z-auto! text-left after:absolute after:inset-0 after:z-0 after:rounded-[28px] focus-visible:outline-none focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ink">
+            {course ?? title}
+          </button>
+        ) : (
+          course ?? title
+        )}
+      </Title>
+      {(course || pill) && (
+        <p className="mt-2 flex flex-wrap items-center gap-2 text-base font-semibold text-ink">
+          {course && <span>{title}</span>}
+          {pill && <span className={PILL}>{pill}</span>}
+        </p>
+      )}
+
+      <EventFacts className="mt-5" facts={facts} linkComponent={linkComponent} />
+
+      {instructors && instructors.length > 0 && (
+        <div className="mt-5 flex items-center gap-3 text-sm text-ink-body">
+          <span className="shrink-0 text-ink-soft">{t.with}</span>
+          <Byline people={instructors} linkComponent={linkComponent} className="min-w-0" />
+        </div>
+      )}
+
+      {footnote && <p className="mt-5 text-sm text-ink-soft">{footnote}</p>}
+
+      {/* at the foot: the price on the left, the button on the right; cards side by side align here */}
+      {(foot || price) && (
+        <div className="mt-auto flex flex-wrap items-center justify-between gap-x-4 gap-y-3 pt-6">
+          {price && (
+            <p className="leading-tight">
+              <span className="block font-heading text-xl font-semibold text-ink">{price.value}</span>
+              {price.note && <span className="block text-sm text-ink-soft">{price.note}</span>}
+            </p>
+          )}
+          {foot}
+        </div>
+      )}
+      </div>
+    </article>
+  );
+}

package/components/DateBadge.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** Short month ("Nov"). */
+  month: ReactNode;
+  /** Day of the month. */
+  day: ReactNode;
+  /** 48px (default) or 56px. */
+  size?: "md" | "lg";
+  className?: string;
+};
+
+/** The date as a small calendar tile (Luma's "NOV / 6"): the month small on
+ *  top, the day large below, on a tinted bubble. Decorative beside the written
+ *  date; alone, give the parent an accessible text. */
+export function DateBadge({ month, day, size = "md", className = "" }: Props) {
+  const box = size === "lg" ? "h-14 w-14 rounded-2xl" : "h-12 w-12 rounded-xl";
+  return (
+    <span aria-hidden="true" className={`flex ${box} shrink-0 flex-col items-center justify-center bg-ink/[0.06] text-ink ${className}`}>
+      <span className="text-[0.6rem] font-bold uppercase leading-none tracking-[0.12em] text-ink-soft">{month}</span>
+      <span className={`mt-1 font-heading font-bold leading-none ${size === "lg" ? "text-2xl" : "text-lg"}`}>{day}</span>
+    </span>
+  );
+}

package/components/EventFacts.tsx

@@ -0,0 +1,62 @@
+import type { ElementType, ReactNode } from "react";
+import { MapPin } from "lucide-react";
+import { DateBadge } from "./DateBadge";
+
+export type EventFact = {
+  /** A DateBadge, or an icon; "pin" draws the map pin. */
+  tile: ReactNode | "pin";
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** The title becomes a link (the venue's map page), with the arrow. */
+  href?: string;
+  external?: boolean;
+};
+
+type Props = {
+  facts: EventFact[];
+  linkComponent?: ElementType;
+  newTabLabel?: string;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+/** The facts of an event as tiles (Luma): the date on a calendar tile with
+ *  the written date beside it, the place on a pin tile with the venue (a link)
+ *  and the city. `DateBadge` is exported for the date tile. */
+export function EventFacts({ facts, linkComponent, newTabLabel = "(opens in a new tab)", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <ul className={`flex list-none flex-col gap-4 ${className}`}>
+      {facts.map((f, i) => (
+        <li key={i} className="flex items-center gap-4">
+          {f.tile === "pin" ? (
+            <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-ink/[0.06] text-ink">
+              <MapPin size={20} strokeWidth={2} />
+            </span>
+          ) : (
+            f.tile
+          )}
+          <span className="min-w-0 leading-snug">
+            <span className="block font-semibold text-ink">
+              {f.href ? (
+                <L href={f.href} {...(f.external ? { target: "_blank", rel: "noopener noreferrer" } : {})} className="inline-flex items-center gap-1 underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none">
+                  {f.title}
+                  <ArrowUpRight />
+                  {f.external && <span className="sr-only"> {newTabLabel}</span>}
+                </L>
+              ) : (
+                f.title
+              )}
+            </span>
+            {f.subtitle && <span className="mt-0.5 block text-sm text-ink-body">{f.subtitle}</span>}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export { DateBadge };

package/components/EventList.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { EventRow, type EventRowProps } from "./EventRow";
+
+export type EventGroup = {
+  /** The day ("6 Nov"). */
+  date: ReactNode;
+  /** The weekday, one tone below ("Friday"). */
+  weekday?: ReactNode;
+  /** ISO date for the <time>. */
+  iso?: string;
+  events: EventRowProps[];
+};
+
+type Props = {
+  groups: EventGroup[];
+  /** aria-label of the list. */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * Events grouped by day, down a dotted rail (Luma): each day has a dot on the
+ * rail, the date and the weekday, and its rows below. One <ol> per day keeps
+ * the order for the screen reader.
+ */
+export function EventList({ groups, label = "Events", className = "" }: Props) {
+  return (
+    <div aria-label={label} role="list" className={`relative ${className}`}>
+      {/* the rail: a dotted line down the left */}
+      <span aria-hidden="true" className="absolute bottom-6 left-[5px] top-3 w-px border-l-2 border-dotted border-ink/15" />
+      {groups.map((g, i) => (
+        <section key={i} role="listitem" className="relative pl-9 pb-8 last:pb-0">
+          <span aria-hidden="true" className="absolute left-0 top-[7px] h-3 w-3 rounded-full bg-ink/20" />
+          <h2 className="font-heading text-lg font-semibold text-ink">
+            {g.iso ? <time dateTime={g.iso}>{g.date}</time> : g.date}
+            {g.weekday && <span className="ml-2 font-body text-base font-normal text-ink-soft">{g.weekday}</span>}
+          </h2>
+          <ol className="mt-4 flex list-none flex-col gap-3">
+            {g.events.map((e, j) => (
+              <li key={j}>
+                <EventRow {...e} />
+              </li>
+            ))}
+          </ol>
+        </section>
+      ))}
+    </div>
+  );
+}

package/components/EventRow.tsx

@@ -0,0 +1,114 @@
+import type { ElementType, ReactNode } from "react";
+import { MapPin } from "lucide-react";
+import { Avatar } from "./Avatar";
+import type { Person } from "./Byline";
+
+type Labels = {
+  /** "+34" pill after the stacked portraits. */
+  more: (n: number) => string;
+  /** Prefix of the organizer line ("By"). */
+  by: ReactNode;
+};
+const EN: Labels = { more: (n) => `+${n}`, by: "By" };
+
+// the hit area of the row: the title's link or button, stretched over it
+const STRETCH = "after:absolute after:inset-0 after:rounded-[24px] focus-visible:outline-none focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ink";
+
+export type EventRowProps = {
+  /** The time line ("09:00 · 12:00 GMT+0", or "3 to 9 Nov · 08:30–17:30"). */
+  time: ReactNode;
+  /** The end of the time line, in the soft action tone (Luma shows the end
+   *  time this way). Optional. */
+  timeAccent?: ReactNode;
+  title: ReactNode;
+  /** The event's page. With `onSelect` instead, the row opens its details in place. */
+  href?: string;
+  /** Makes the title a button stretched over the row (a SidePanel opens, say). */
+  onSelect?: () => void;
+  /** Who organizes or teaches: small portrait(s) and the name(s). */
+  organizers?: Person[];
+  location?: ReactNode;
+  /** Who is going (or who teaches, on a course): stacked portraits and "+N". */
+  people?: Person[];
+  /** How many beyond the portraits shown. */
+  peopleMore?: number;
+  /** Square cover on the right (1:1). */
+  cover?: { src: string; alt?: string };
+  /** A small state on the title line ("Sold out", "Online"). */
+  badge?: ReactNode;
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Event row of the Cuidado Global family (after Luma and Meetup): the time
+ * line, the title (the link, stretched over the whole row), who organizes,
+ * where, who is going, and the square cover on the right. Lives in an
+ * EventList, under a date heading.
+ */
+export function EventRow({ time, timeAccent, title, href, onSelect, organizers, location, people, peopleMore, cover, badge, linkComponent, labels, className = "" }: EventRowProps) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  const shown = people?.slice(0, 4) ?? [];
+  return (
+    <article className={`group relative flex gap-5 rounded-[24px] bg-card p-5 transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 md:p-6 ${className}`}>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="text-sm font-medium text-ink-soft">
+          {time}
+          {timeAccent && (
+            <>
+              <span aria-hidden="true"> · </span>
+              <span className="font-semibold text-action-text">{timeAccent}</span>
+            </>
+          )}
+        </p>
+        <h3 className="mt-1.5 font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+          {onSelect ? (
+            <button type="button" onClick={onSelect} className={`text-left ${STRETCH}`}>
+              {title}
+            </button>
+          ) : (
+            <L href={href} className={STRETCH}>
+              {title}
+            </L>
+          )}
+          {badge && <span className="ml-2 inline-flex translate-y-[-2px] items-center rounded-pill bg-ink/[0.08] px-2.5 py-0.5 align-middle text-xs font-semibold text-ink">{badge}</span>}
+        </h3>
+        {organizers && organizers.length > 0 && (
+          <p className="mt-2 flex items-center gap-2 text-sm text-ink-body">
+            <span className="flex -space-x-1.5">
+              {organizers.slice(0, 3).map((p) => (
+                <Avatar key={p.name} name={p.name} photo={p.photo} size={20} ring>{p.avatar}</Avatar>
+              ))}
+            </span>
+            <span className="truncate">{t.by} {organizers.map((p) => p.name).join(", ")}</span>
+          </p>
+        )}
+        {location && (
+          <p className="mt-1.5 flex items-center gap-2 text-sm text-ink-body">
+            <MapPin aria-hidden="true" size={16} strokeWidth={2} className="shrink-0 text-ink-soft" />
+            <span className="truncate">{location}</span>
+          </p>
+        )}
+        {shown.length > 0 && (
+          <p className="mt-auto flex items-center gap-2 pt-4">
+            <span className="flex -space-x-2">
+              {shown.map((p) => (
+                <Avatar key={p.name} name={p.name} photo={p.photo} size={28} ring>{p.avatar}</Avatar>
+              ))}
+            </span>
+            {peopleMore ? <span className="rounded-pill bg-ink/[0.08] px-2 py-0.5 text-xs font-semibold text-ink">{t.more(peopleMore)}</span> : null}
+            <span className="sr-only">{shown.map((p) => p.name).join(", ")}</span>
+          </p>
+        )}
+      </div>
+      {cover && (
+        <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-ink/[0.06] md:h-36 md:w-36">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={cover.src} alt={cover.alt ?? ""} loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover" />
+        </div>
+      )}
+    </article>
+  );
+}

package/components/List.tsx

@@ -50,8 +50,10 @@ export function List({ items, marker = "check", linkComponent, newTabLabel = "(o
   const mark = marker === "check" ? bubble : <CornerDownRight />;
   const gap = marker === "check" ? "gap-3" : "gap-2.5";
 
+  // leading-snug (1.375): in a two-line item the lines stay closer than the
+  // items are to each other; relaxed leading read as air inside the item (2026-10-29)
   return (
-    <ul className={`list-none ${marker === "check" ? "space-y-3 text-ink" : "space-y-2 leading-relaxed text-ink/80"} ${className}`}>
+    <ul className={`list-none leading-snug ${marker === "check" ? "space-y-3 text-ink" : "space-y-2.5 text-ink/80"} ${className}`}>
       {items.map((it, i) => (
         <li key={`${i}-${it.href ?? ""}`}>
           {it.href ? (

package/components/PageVideoHero.tsx

@@ -3,7 +3,10 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { BackgroundVideo } from "./BackgroundVideo";
 
-type Panel = { kicker?: ReactNode; title: ReactNode; lead?: ReactNode };
+/** The glass panel: kicker, title, lead and, when the page has more than one
+ *  call to action, the buttons inside the panel (the bottom-right slot fits
+ *  one button beside the panel; two would run into the title). */
+type Panel = { kicker?: ReactNode; title: ReactNode; lead?: ReactNode; actions?: ReactNode };
 
 /** Local background clip (loop mode): muted, looping. */
 type LoopPreview = {
@@ -247,6 +250,7 @@ export function PageVideoHero({
                   posterLarge={(video as VideoLoop).preview.posterLarge}
                   trimEdges={(video as VideoLoop).preview.trimEdges}
                   objectPosition={(video as VideoLoop).preview.objectPosition}
+                  labels={previewLabels}
                   className="absolute inset-0"
                 />
               )}
@@ -265,7 +269,7 @@ export function PageVideoHero({
             {/* panel / caption — in flow (justify-end), m-6 */}
             <div className="relative z-10 p-6 md:m-6 md:p-0">
               {panel ? (
-                <div className="inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md md:max-w-[calc(100%-16rem)] lg:px-7 lg:py-5">
+                <div className={`inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md lg:px-7 lg:py-5 ${panel.actions && actions === undefined ? "" : "md:max-w-[calc(100%-16rem)]"}`}>
                   <div>
                     {panel.kicker && (
                       <p className="mb-3 font-heading text-[0.82rem] font-bold tracking-[0.1em] text-surface/80 uppercase">{panel.kicker}</p>
@@ -274,6 +278,7 @@ export function PageVideoHero({
                     {panel.lead && (
                       <p className="mt-4 max-w-[46ch] text-base leading-[1.55] text-pretty text-surface/85 md:text-lg">{panel.lead}</p>
                     )}
+                    {panel.actions && <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">{panel.actions}</div>}
                   </div>
                 </div>
               ) : caption ? (

package/components/RegistrationBox.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Check } from "lucide-react";
+
+export type TicketOption = {
+  id: string;
+  label: ReactNode;
+  /** "6 left", as a small pill after the label. */
+  remaining?: ReactNode;
+  /** "Free", "R$ 1.900". */
+  price: ReactNode;
+  disabled?: boolean;
+};
+
+type Props = {
+  /** The strip at the top ("Registration"). */
+  title: ReactNode;
+  /** The sentence above the options ("Hi! Choose your ticket:"). */
+  intro?: ReactNode;
+  options: TicketOption[];
+  /** Selected option id (controlled); without it, the first enabled one. */
+  value?: string;
+  onChange?: (id: string) => void;
+  /** The button at the foot (a Button `accent`, or `solid`); receives nothing: read the selection through onChange. */
+  action: ReactNode;
+  /** Small line under the button ("Only physiotherapists can attend."). */
+  footnote?: ReactNode;
+  /** Name of the radio group, for the form. */
+  name?: string;
+  className?: string;
+};
+
+/**
+ * Registration box of an event (Luma): a strip with the title, a sentence,
+ * the ticket options as a radio group (the chosen one gets the ring and the
+ * check), the price on the right, and the one button at the foot. By tone:
+ * the box is a surface card inside the page's card.
+ */
+export function RegistrationBox({ title, intro, options, value, onChange, action, footnote, name = "ticket", className = "" }: Props) {
+  const first = options.find((o) => !o.disabled)?.id;
+  const [inner, setInner] = useState(first);
+  const selected = value ?? inner;
+  const choose = (id: string) => {
+    setInner(id);
+    onChange?.(id);
+  };
+  return (
+    <section className={`overflow-hidden rounded-[24px] bg-surface ${className}`}>
+      <h2 className="border-b border-ink/10 px-5 py-3 text-sm font-semibold text-ink-soft">{title}</h2>
+      <div className="p-5">
+        {intro && <p className="mb-4 text-ink">{intro}</p>}
+        <fieldset className="m-0 border-0 p-0">
+          <legend className="sr-only">{title}</legend>
+          <div className="flex flex-col gap-2">
+            {options.map((o) => {
+              const on = o.id === selected;
+              return (
+                <label
+                  key={o.id}
+                  className={`flex min-h-12 cursor-pointer items-center gap-3 rounded-2xl px-4 py-2.5 transition-colors duration-150 motion-reduce:transition-none ${on ? "bg-card shadow-[inset_0_0_0_2px_var(--color-ink)]" : "bg-card/60 hover:bg-card"} ${o.disabled ? "cursor-not-allowed opacity-50" : ""}`}
+                >
+                  <input type="radio" name={name} value={o.id} checked={on} disabled={o.disabled} onChange={() => choose(o.id)} className="sr-only" />
+                  <span aria-hidden="true" className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${on ? "bg-ink text-surface" : "border-2 border-ink/25"}`}>
+                    {on && <Check size={12} strokeWidth={3} />}
+                  </span>
+                  <span className="flex min-w-0 flex-1 flex-wrap items-center gap-2 font-semibold text-ink">
+                    {o.label}
+                    {o.remaining && <span className="rounded-pill bg-ink/[0.08] px-2 py-0.5 text-xs font-semibold text-ink-soft">{o.remaining}</span>}
+                  </span>
+                  <span className="shrink-0 font-semibold text-ink">{o.price}</span>
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
+        <div className="mt-4 [&>*]:w-full [&>*]:justify-center">{action}</div>
+        {footnote && <p className="mt-3 text-sm text-ink-soft">{footnote}</p>}
+      </div>
+    </section>
+  );
+}

package/components/SidePanel.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+type Labels = {
+  close: string;
+};
+const EN: Labels = { close: "Close" };
+
+type Props = {
+  open: boolean;
+  /** Called when the person closes it (Esc, the backdrop, the close button). */
+  onClose: () => void;
+  /** Accessible name of the panel (sr-only unless you render it in `children`). */
+  title: string;
+  /** Small actions on the top bar, beside the close button ("Copy link", "Event page ↗"). */
+  actions?: ReactNode;
+  children: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Side panel of the Cuidado Global family (Luma's event drawer): a native
+ * <dialog> that slides in from the right, full height, up to 32rem wide (full
+ * width on the phone), with a top bar (close on the left, actions on the
+ * right) and a scrolling body. Focus is trapped by the dialog, Esc and the
+ * backdrop close it, focus goes back to what opened it. The content is
+ * whatever you pass: a course, an event, a person.
+ */
+export function SidePanel({ open, onClose, title, actions, children, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const box = useRef<HTMLDialogElement>(null);
+  const headingId = useId();
+
+  // open/close follow the prop; the way out waits for the slide to finish
+  useEffect(() => {
+    const d = box.current;
+    if (!d) return;
+    if (open) {
+      if (!d.open) d.showModal();
+      // paint the closed state first (the dialog was display:none), then open:
+      // a forced reflow plus a frame, or the slide would not play
+      void d.getBoundingClientRect();
+      const frame = requestAnimationFrame(() => d.setAttribute("data-open", ""));
+      return () => cancelAnimationFrame(frame);
+    }
+    if (!d.open) return;
+    d.removeAttribute("data-open");
+    const wait = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 260;
+    const timer = window.setTimeout(() => d.close(), wait);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
+  // Esc (cancel) and click on the backdrop → the parent closes it
+  useEffect(() => {
+    const d = box.current;
+    if (!d) return;
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+    const onClick = (e: MouseEvent) => {
+      if (e.target === d) onClose();
+    };
+    d.addEventListener("cancel", onCancel);
+    d.addEventListener("click", onClick);
+    return () => {
+      d.removeEventListener("cancel", onCancel);
+      d.removeEventListener("click", onClick);
+    };
+  }, [onClose]);
+
+  return (
+    <dialog
+      ref={box}
+      aria-labelledby={headingId}
+      className={`fixed inset-y-0 right-0 left-auto m-0 flex h-dvh max-h-none w-[min(100vw,32rem)] max-w-none translate-x-full flex-col overflow-hidden bg-card p-0 text-ink shadow-2xl [transition:translate_280ms_var(--ease-cg)] data-open:translate-x-0 motion-reduce:transition-none backdrop:bg-ink/50 backdrop:backdrop-blur-sm backdrop:opacity-0 backdrop:[transition:opacity_240ms_ease-out] [&[data-open]::backdrop]:opacity-100 ${className}`}
+    >
+      <h2 id={headingId} className="sr-only">{title}</h2>
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-ink/10 px-4 py-3">
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-11 w-11 items-center justify-center rounded-full text-ink transition-colors duration-150 hover:bg-ink/[0.06] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
+        >
+          <X aria-hidden="true" size={20} strokeWidth={2} />
+          <span className="sr-only">{t.close}</span>
+        </button>
+        {actions && <div className="flex flex-wrap items-center justify-end gap-2">{actions}</div>}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">{children}</div>
+    </dialog>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.4.0",
+  "version": "0.5.4",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -15,9 +15,18 @@
     "LICENSE"
   ],
   "exports": {
-    "./theme.css": "./theme.css",
-    "./tokens/ttcab.css": "./tokens/ttcab.css",
-    "./tokens/creeta.css": "./tokens/creeta.css",
+    "./theme.css": {
+      "style": "./theme.css",
+      "default": "./theme.css"
+    },
+    "./tokens/ttcab.css": {
+      "style": "./tokens/ttcab.css",
+      "default": "./tokens/ttcab.css"
+    },
+    "./tokens/creeta.css": {
+      "style": "./tokens/creeta.css",
+      "default": "./tokens/creeta.css"
+    },
     "./components/Accordion": "./components/Accordion.tsx",
     "./components/PageVideoHero": "./components/PageVideoHero.tsx",
     "./components/Footer": "./components/Footer.tsx",
@@ -42,7 +51,10 @@
     "./components/BreatheMark": "./components/BreatheMark.tsx",
     "./components/Curtain": "./components/Curtain.tsx",
     "./components/Lockup": "./components/Lockup.tsx",
-    "./tokens/neutral.css": "./tokens/neutral.css",
+    "./tokens/neutral.css": {
+      "style": "./tokens/neutral.css",
+      "default": "./tokens/neutral.css"
+    },
     "./components/icons": "./components/icons.tsx",
     "./components/AnchorNav": "./components/AnchorNav.tsx",
     "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
@@ -68,7 +80,14 @@
     "./components/StoryPanel": "./components/StoryPanel.tsx",
     "./components/PostCard": "./components/PostCard.tsx",
     "./components/FeaturedPosts": "./components/FeaturedPosts.tsx",
-    "./components/PostArticle": "./components/PostArticle.tsx"
+    "./components/PostArticle": "./components/PostArticle.tsx",
+    "./components/CourseCard": "./components/CourseCard.tsx",
+    "./components/DateBadge": "./components/DateBadge.tsx",
+    "./components/EventRow": "./components/EventRow.tsx",
+    "./components/EventList": "./components/EventList.tsx",
+    "./components/EventFacts": "./components/EventFacts.tsx",
+    "./components/RegistrationBox": "./components/RegistrationBox.tsx",
+    "./components/SidePanel": "./components/SidePanel.tsx"
   },
   "publishConfig": {
     "access": "public"