@breathe-ds/ui 0.5.1 → 0.5.4

package/README.md

@@ -304,8 +304,9 @@ from color, not from extra markup.
   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, organizers, location, who is going
-  with "+N", square cover, an optional badge), **EventFacts** (date on a
+  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).
@@ -345,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/EventRow.tsx

@@ -11,6 +11,9 @@ type Labels = {
 };
 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;
@@ -18,7 +21,10 @@ export type EventRowProps = {
    *  time this way). Optional. */
   timeAccent?: ReactNode;
   title: ReactNode;
-  href: string;
+  /** 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;
@@ -41,7 +47,7 @@ export type EventRowProps = {
  * 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, organizers, location, people, peopleMore, cover, badge, linkComponent, labels, className = "" }: EventRowProps) {
+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) ?? [];
@@ -58,9 +64,15 @@ export function EventRow({ time, timeAccent, title, href, organizers, location,
           )}
         </p>
         <h3 className="mt-1.5 font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
-          <L href={href} className="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">
-            {title}
-          </L>
+          {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 && (

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.5.1",
+  "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",