@breathe-ds/ui 0.6.1 → 0.6.3

package/README.md

@@ -209,6 +209,24 @@ from color, not from extra markup.
   centred) + **FilterBar** (thin sticky bar of compact filters — `SelectField density="sm"` —
   with the count and "clear" on the right; it publishes its height as `--cg-filterbar-h`, so
   `StickyGroupHeading stickyTop="top-[calc(80px+var(--cg-filterbar-h,0px))]"` sticks right below).
+- **Callout** (a.k.a. info well): a secondary invitation under a page's main control
+  (location invite under the professionals search, a tip under the articles search), at
+  most one action. Never for errors or warnings. Default `tone="wash"`: no border, the
+  brand's `--cg-callout`, with `<Button variant="tonal">` and a tonal icon bubble
+  (`--cg-callout-deep`, hover `--cg-callout-deeper`). **Colour rule:** the wash is the
+  page's **split complement** (page hue ± 150°, picking the one farther from the action
+  hue), one luminance step off the page (1.19:1), so text keeps AA/AAA. TTCAB: cream 40° →
+  petrol mist `#d2e6e9`; Creeta: mist 190° → sand `#eddec1`; Neutral (no hue): gray
+  `#e1e1e4`. The kicker goes in ink-body (action-text drops under 4.5:1 on the wash).
+  `tone="accent"` (action-tint + action border) and `"neutral"` (white) remain.
+- **Duotone** (`.cg-duotone` on the element wrapping an `<img>`; `CourseCard cover.treatment="duotone"`):
+  for untreated photos straight from a phone — ink in the shadows, page colour in the lights,
+  pure CSS (file and alt untouched). Tune per brand with `--cg-duotone-dark` / `--cg-duotone-light`.
+- **KenBurnsImage** (family motion, used on covers): the slow documentary zoom as a
+  boomerang — while the card (closest `.group`) is hovered or focused, the photo zooms in
+  10% and back out, 9s each way, endlessly; on leave it eases back to rest from wherever
+  it was (1.6s, Web Animations API, no snap). Drop-in for the cover `<img>`; `zoom`,
+  `duration`, `returnDuration` to tune. Off with `prefers-reduced-motion`. CourseCard uses it.
 - **PullQuote** + **Highlight**: one line set large between sections — drawn quote
   mark in the action color, balanced lines, hand-drawn underline (`Highlight`) on the
   key words. `cite` adds the person (Byline with role); without it, a brand statement.

package/components/Button.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
 
-type Variant = "solid" | "accent" | "outline" | "ghost" | "link" | "outline-inverse";
+type Variant = "solid" | "accent" | "outline" | "ghost" | "link" | "outline-inverse" | "tonal";
 type Size = "sm" | "md" | "lg";
 
 const pillBase =
@@ -27,6 +27,9 @@ const variants: Record<Exclude<Variant, "link">, string> = {
   // the 4.5:1 of normal text. Keep the accent for ONE large button per block.
   accent: "bg-action text-on-action hover:brightness-[0.92]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
+  // tonal: on a Callout, a step deeper than its wash with ink text — the action
+  // without competing with the page's main control
+  tonal: "bg-callout-deep text-ink hover:bg-callout-deeper",
   ghost: "text-ink hover:bg-tint",
   // secondary on a dark panel (hero panel, StoryPanel, surface-panel): light outline,
   // surface text (cream on petrol 9.41:1 on ttcab)

package/components/Callout.tsx

@@ -0,0 +1,59 @@
+import type { ComponentType, ReactNode } from "react";
+
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; "aria-hidden"?: boolean | "true" }>;
+
+type Props = {
+  title: ReactNode;
+  /** Small line above the title in action-text ("Perto de você"). */
+  kicker?: ReactNode;
+  /** One short sentence under the title. */
+  body?: ReactNode;
+  /** Small icon in a bubble on the left (lucide). */
+  Icon?: IconType;
+  /** The actions on the right: one button (variant="tonal" on the wash; "solid"
+   *  or "outline" on the other tones) and, if needed, a text link ("Agora não"). Never the accent button:
+   *  the callout sits under the page's main control and must not compete with it. */
+  actions?: ReactNode;
+  /** `wash` (default): the brand's callout wash (TTCAB: #d2e6e9, the split complement of
+   *  the cream), no border. Pair it with <Button variant="tonal">.
+   *  `accent`: the action-colour wash with a hairline border in the action colour.
+   *  `neutral`: white, no border. */
+  tone?: "wash" | "accent" | "neutral";
+  /** Accessible name of the region (defaults to nothing: pass the title as text). */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * Callout — a secondary invitation under a page's main control (e.g. "Quer ver
+ * primeiro quem atende perto de você?" under the professionals search, a tip
+ * under the articles search). The main control keeps the emphasis (white,
+ * shadow); the callout is a quiet wash a step off the page, without a border.
+ * Optical padding: the right side gets 8px more than the left (36 vs 28) — the round
+ * icon bubble reads as more inset than the straight edge of a button or underlined link.
+ * TTCAB (wash #d2e6e9): ink 7.90:1, ink-body 6.98:1; the kicker goes in ink-body
+ * because action-text would drop to 4.18:1 there.
+ */
+export function Callout({ title, kicker, body, Icon, actions, tone = "wash", label, className = "" }: Props) {
+  const accent = tone === "accent";
+  const box = { wash: "bg-callout", accent: "border border-action-line bg-action-tint", neutral: "bg-card" }[tone];
+  return (
+    <div
+      role={label ? "region" : undefined}
+      aria-label={label}
+      className={`flex flex-col gap-4 rounded-[24px] p-5 sm:flex-row sm:items-center sm:gap-5 sm:pr-6 md:py-6 md:pr-9 md:pl-7 ${box} ${className}`}
+    >
+      {Icon && (
+        <span aria-hidden="true" className={`hidden h-12 w-12 shrink-0 items-center justify-center rounded-full sm:flex ${accent ? "bg-card text-action-text" : tone === "wash" ? "bg-callout-deep text-ink" : "bg-tint text-ink"}`}>
+          <Icon size={22} strokeWidth={1.8} />
+        </span>
+      )}
+      <div className="min-w-0 flex-1">
+        {kicker && <p className={`m-0 mb-1 text-xs font-bold tracking-[0.12em] uppercase ${accent ? "text-action-text" : "text-ink-body"}`}>{kicker}</p>}
+        <p className="m-0 font-heading text-lg leading-snug font-semibold text-ink md:text-xl">{title}</p>
+        {body && <p className="m-0 mt-1 text-sm leading-relaxed text-ink-body">{body}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2">{actions}</div>}
+    </div>
+  );
+}

package/components/CourseCard.tsx

@@ -2,6 +2,7 @@ import type { ElementType, ReactNode } from "react";
 import { Clock } from "lucide-react";
 import { Byline, type Person } from "./Byline";
 import { EventFacts, DateBadge, type EventFact } from "./EventFacts";
+import { KenBurnsImage } from "./KenBurnsImage";
 
 type Labels = {
   /** Prefix before the instructors' names ("With"). */
@@ -13,8 +14,13 @@ 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 };
+   *  focused near the top for the portrait photos the school uses.
+   *  `treatment: "duotone"` for an untreated photo (straight from a phone): it is
+   *  shown in the brand's two colours (ink shadows, page-colour lights).
+   *  While the card is hovered/focused the photo does the family's slow Ken Burns
+   *  boomerang (KenBurnsImage: in and out, 9s each way, eases back on leave);
+   *  off with reduced motion. */
+  cover?: { src: string; alt?: string; position?: string; treatment?: "duotone" };
   /** 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.
@@ -83,11 +89,11 @@ export function CourseCard({ cover, course, title, start, when, where, workload,
   );
 
   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}`}>
+    <article className={`group 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">
+        <div className={`relative aspect-[4/3] overflow-hidden ${cover.treatment === "duotone" ? "cg-duotone" : ""}`}>
           {/* 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%" }} />
+          <KenBurnsImage 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">

package/components/KenBurnsImage.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useRef, type ImgHTMLAttributes } from "react";
+
+type Props = ImgHTMLAttributes<HTMLImageElement> & {
+  /** How far it zooms in (1.1 = 10%). */
+  zoom?: number;
+  /** One way of the boomerang, in ms (in, then the same back out). */
+  duration?: number;
+  /** How long it takes to settle back when the pointer leaves, in ms. */
+  returnDuration?: number;
+};
+
+const EASE = "cubic-bezier(0.45, 0, 0.55, 1)";
+
+/**
+ * Ken Burns (boomerang) — the family's slow documentary zoom on covers. While
+ * the pointer is on the card (the closest `.group`, or the image itself) or focus
+ * is inside it, the photo zooms in and back out, over and over; when it leaves,
+ * the photo eases back to rest from wherever it was (no snap). Web Animations
+ * API, so it can start from the current frame. Off with prefers-reduced-motion.
+ * Use it in place of the <img> of a cover (`position: absolute; inset: 0` etc. via
+ * className, as usual).
+ */
+export function KenBurnsImage({ zoom = 1.1, duration = 9000, returnDuration = 1600, style, ...img }: Props) {
+  const ref = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.animate !== "function") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const host = (el.closest(".group") as HTMLElement | null) ?? el;
+    const end = { scale: String(zoom), translate: "-1.5% -1%" };
+    let anim: Animation | null = null;
+
+    const now = () => {
+      const cs = getComputedStyle(el);
+      return { scale: cs.scale === "none" ? "1" : cs.scale, translate: cs.translate === "none" ? "0px 0px" : cs.translate };
+    };
+    const start = () => {
+      const from = now();
+      anim?.cancel();
+      // first leg from wherever it is, then the endless in-and-out
+      anim = el.animate([from, end], { duration, easing: EASE, fill: "forwards" });
+      anim.onfinish = () => {
+        anim = el.animate([end, { scale: "1", translate: "0px 0px" }], { duration, easing: EASE, iterations: Infinity, direction: "alternate" });
+      };
+    };
+    const stop = () => {
+      if (host.matches(":hover") || host.matches(":focus-within")) return;
+      const from = now();
+      anim?.cancel();
+      anim = el.animate([from, { scale: "1", translate: "0px 0px" }], { duration: returnDuration, easing: EASE });
+    };
+
+    host.addEventListener("pointerenter", start);
+    host.addEventListener("pointerleave", stop);
+    host.addEventListener("focusin", start);
+    host.addEventListener("focusout", stop);
+    return () => {
+      host.removeEventListener("pointerenter", start);
+      host.removeEventListener("pointerleave", stop);
+      host.removeEventListener("focusin", start);
+      host.removeEventListener("focusout", stop);
+      anim?.cancel();
+    };
+  }, [zoom, duration, returnDuration]);
+
+  // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+  return <img ref={ref} style={{ transformOrigin: style?.objectPosition as string | undefined, ...style }} {...img} />;
+}

package/components/TestimonialCard.tsx

@@ -208,10 +208,13 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
       joiners={joiners}
     />
   );
+  // the whole card opens the panel (stretched link: the button's ::after covers the card);
+  // the video and the source link sit above it (relative z-[1]) and keep their own click
+  const opens = overflows || !!panel;
   return (
-    <Root className={`${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
+    <Root className={`${opens ? "group/card relative" : ""} ${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
       {cardVideo ? (
-        <TapVideo {...cardVideo} label={t.watch(cardVideo.description)} />
+        <TapVideo {...cardVideo} label={t.watch(cardVideo.description)} frameClass="relative z-[1] aspect-video overflow-hidden bg-ink sm:aspect-auto sm:min-h-[16rem]" />
       ) : cardPhoto ? (
         <div className="relative aspect-[4/3] overflow-hidden bg-tint sm:aspect-auto sm:min-h-[16rem]">
           {cardPhoto.media ?? (
@@ -240,17 +243,17 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
               {quote}
             </blockquote>
           )}
-          {(overflows || panel) && (
+          {opens && (
             <button
               type="button"
               onClick={() => setOpen(true)}
-              className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline decoration-ink/40 underline-offset-4 transition-[text-decoration-color] duration-150 after:absolute after:inset-0 after:rounded-[28px] after:content-[''] group-hover/card:decoration-ink focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-ink motion-reduce:transition-none"
             >
               {video && !cardVideo ? t.watchFull : t.readMore}
             </button>
           )}
         </div>
-        <figcaption>{byline}</figcaption>
+        <figcaption className={link ? "relative z-[1]" : undefined}>{byline}</figcaption>
       </figure>
       {(clampLines || panel) && (
         <SidePanel open={open} onClose={() => setOpen(false)} title={names} labels={{ close: t.close }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -99,7 +99,9 @@
     "./components/SidePanel": "./components/SidePanel.tsx",
     "./components/PullQuote": "./components/PullQuote.tsx",
     "./components/ProfileSpotlight": "./components/ProfileSpotlight.tsx",
-    "./components/FilterBar": "./components/FilterBar.tsx"
+    "./components/FilterBar": "./components/FilterBar.tsx",
+    "./components/Callout": "./components/Callout.tsx",
+    "./components/KenBurnsImage": "./components/KenBurnsImage.tsx"
   },
   "publishConfig": {
     "access": "public"

package/theme.css

@@ -29,6 +29,9 @@
   --color-action-line: var(--cg-action-line, var(--cg-action));   /* border of a highlighted card (3:1 on surface) */
   --color-line: var(--cg-line);                    /* hairlines/borders */
   --color-surface-alt: var(--cg-surface-alt, var(--cg-surface)); /* alternate section band (rhythm), a step deeper than surface */
+  --color-callout: var(--cg-callout, var(--cg-surface-alt, var(--cg-surface))); /* secondary invitation under a main control: a cool wash, no border */
+  --color-callout-deep: var(--cg-callout-deep, var(--cg-tint, var(--cg-surface))); /* tonal controls on the callout (button, icon bubble) */
+  --color-callout-deeper: var(--cg-callout-deeper, var(--cg-callout-deep, var(--cg-surface))); /* their hover */
   --color-tint: var(--cg-tint, color-mix(in srgb, var(--cg-ink) 8%, transparent)); /* neutral fill: icon bubbles, pills, image placeholders */
   --color-shadow: var(--cg-shadow, rgb(20 71 83));  /* hue of soft shadows (used at low alpha via color-mix) */
 
@@ -294,3 +297,27 @@
   -webkit-mask-image: linear-gradient(to right, #000 0, #000 7%, transparent 17%, transparent 83%, #000 93%, #000 100%);
   mask-image: linear-gradient(to right, #000 0, #000 7%, transparent 17%, transparent 83%, #000 93%, #000 100%);
 }
+
+/* Duotone: for photos that were not treated (straight from a phone camera) — the
+   picture turns to two brand colours, ink in the shadows and the page colour in
+   the lights, so a busy, off-palette photo sits in the family. Put it on the
+   element that wraps the <img> (it needs `relative` + `overflow-hidden`, which
+   covers already have). Brands can tune it: --cg-duotone-dark / --cg-duotone-light.
+   Pure CSS: the file is untouched, the alt text stays. */
+.cg-duotone {
+  isolation: isolate;
+  background: var(--cg-duotone-light, var(--color-surface));
+}
+.cg-duotone img {
+  filter: grayscale(1) contrast(1.08) brightness(1.04);
+  mix-blend-mode: multiply;
+}
+.cg-duotone::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--cg-duotone-dark, var(--color-ink));
+  mix-blend-mode: lighten;
+}
+

package/tokens/creeta.css

@@ -20,6 +20,10 @@
   --cg-action-line: #ab2781;    /* magenta itself: 5.62:1 on mist */
   --cg-on-action: #ffffff;      /* white on magenta */
   --cg-surface-alt: #e4ecee;  /* section band: ink 8.53:1 · ink-soft 5.41:1 · action-text 6.79:1 */
+  /* Callout: split complement of the mist (190° → 40°, the one farther from the magenta) */
+  --cg-callout: #eddec1;         /* sand · vs page 1.19:1 · ink 7.69:1 · ink-body 6.81:1 */
+  --cg-callout-deep: #e8cd98;    /* tonal button + icon bubble · ink 6.62:1 */
+  --cg-callout-deeper: #e5be72;  /* tonal button hover · ink 5.81:1 */
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree */

package/tokens/neutral.css

@@ -23,6 +23,10 @@
   --cg-action-tint: #e9e9ea;
   --cg-action-line: #18181b;
   --cg-on-action: #ffffff;
+  /* Callout: no hue to complement — one gray step down (vs page 1.19:1) */
+  --cg-callout: #e1e1e4;
+  --cg-callout-deep: #d4d4d8;
+  --cg-callout-deeper: #c4c4c9;
   --cg-line: rgb(0 0 0 / 0.12);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixed across the family) */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree (fixed across the family) */

package/tokens/ttcab.css

@@ -29,6 +29,10 @@
   /* Warm neutrals (30/10/2026): lines, fills and shadows come from the logo's
      orange family (hue ~36°), never grey — the cream and the brown stay one family. */
   --cg-line: rgb(150 108 62 / 0.22);   /* warm hairline */
+  /* Callout: split complement of the cream (40° → 190°), the petrol's own hue lightened */
+  --cg-callout: #d2e6e9;         /* vs page 1.19:1 · ink 7.90:1 · ink-body 6.98:1 */
+  --cg-callout-deep: #afd8de;    /* tonal button + icon bubble · ink 6.66:1 */
+  --cg-callout-deeper: #8ecdd6;  /* tonal button hover · ink 5.77:1 */
   --cg-tint: #f7ecd8;   /* icon bubbles, pills, placeholders: ink 8.73:1 · ink-soft 4.51:1 */
   --cg-shadow: rgb(107 74 55);   /* mocha: soft shadows, used at low alpha */
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */