@breathe-ds/ui 0.3.0 → 0.4.0

package/components/PageVideoHero.tsx

@@ -17,20 +17,33 @@ type LoopPreview = {
 
 /** Two kinds of video hero:
  *  - loop:   a local clip on repeat (no player). Background = BackgroundVideo.
- *  - player: the YouTube video ITSELF plays muted, on repeat, as the background
- *            (16:9, covering the card, no false crop/zoom). Turning the sound on
- *            remounts it from zero — with audio and controls — and the close bar
- *            appears at the bottom. Keeps things consistent: the preview and the
- *            video are the same footage. */
+ *  - player: the video ITSELF plays muted, on repeat, as the background.
+ *            Turning the sound on remounts it from zero — with audio and controls —
+ *            and the close bar appears at the bottom. Keeps things consistent: the
+ *            preview and the video are the same footage. The source is either a
+ *            YouTube id (16:9 iframe covering the card, no false crop/zoom) or an
+ *            mp4 hosted by the site (`src` + `poster`; the sound version plays in
+ *            the browser's own player, letterboxed like the iframe). */
 type VideoLoop = { mode: "loop"; preview: LoopPreview };
-type VideoPlayer = {
-  mode: "player";
+type PlayerCommon = { mode: "player"; playerCaption?: ReactNode };
+type VideoPlayerYouTube = PlayerCommon & {
   youtubeId: string;
   /** Still frame (reduced motion / data saver). Without it, uses YouTube's own
    *  thumbnail (maxresdefault). */
   poster?: string;
-  playerCaption?: ReactNode;
 };
+type VideoPlayerFile = PlayerCommon & {
+  /** The mp4 itself: muted and looping as the background, with sound after the tap. */
+  src: string;
+  /** Larger file for wide screens (background only). */
+  srcLarge?: string;
+  /** Still frame (reduced motion / data saver, and the <video> poster). */
+  poster: string;
+  posterLarge?: string;
+  objectPosition?: string;
+};
+type VideoPlayer = VideoPlayerYouTube | VideoPlayerFile;
+const isFile = (v: VideoPlayer): v is VideoPlayerFile => "src" in v;
 
 type Props = {
   /** Video background — defines the hero kind (loop or player). */
@@ -144,10 +157,10 @@ function YouTubeBackground({
  * in the Breathe language (tokens: ink/surface).
  *
  * - loop:   the background is a local clip on repeat (BackgroundVideo).
- * - player: the background is the YouTube video ITSELF playing muted, on repeat.
- *           Turning the sound on remounts it from zero (with audio and controls)
- *           inside the card and opens the close bar at the bottom (caption on
- *           the left, "Close" on the right).
+ * - player: the background is the video ITSELF (YouTube id or the site's mp4)
+ *           playing muted, on repeat. Turning the sound on remounts it from zero
+ *           (with audio and controls) inside the card and opens the close bar at
+ *           the bottom (caption on the left, "Close" on the right).
  */
 export function PageVideoHero({
   video,
@@ -179,20 +192,49 @@ export function PageVideoHero({
         {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
-            <iframe
-              key="cg-hero-sound"
-              title={videoTitle ?? "Video"}
-              src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayer).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
-              allowFullScreen
-              className="absolute inset-0 h-full w-full border-0 bg-black"
-            />
+            isFile(video as VideoPlayer) ? (
+              // the site's own mp4, with sound and the browser's controls; the
+              // click came from the person, so autoplay with audio is allowed
+              <video
+                key="cg-hero-sound"
+                src={(video as VideoPlayerFile).src}
+                poster={(video as VideoPlayerFile).poster}
+                controls
+                autoPlay
+                playsInline
+                aria-label={videoTitle ?? "Video"}
+                onEnded={() => setPlaying(false)}
+                className="absolute inset-0 h-full w-full bg-black object-contain"
+              />
+            ) : (
+              <iframe
+                key="cg-hero-sound"
+                title={videoTitle ?? "Video"}
+                src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayerYouTube).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+                allowFullScreen
+                className="absolute inset-0 h-full w-full border-0 bg-black"
+              />
+            )
           ) : (
             <>
-              {isPlayer ? (
+              {isPlayer && isFile(video as VideoPlayer) ? (
+                // the mp4 itself, muted and on repeat (BackgroundVideo: reduced
+                // motion, data saver and the pause button come with it)
+                <BackgroundVideo
+                  key={(video as VideoPlayerFile).src}
+                  src={(video as VideoPlayerFile).src}
+                  srcLarge={(video as VideoPlayerFile).srcLarge}
+                  poster={(video as VideoPlayerFile).poster}
+                  posterLarge={(video as VideoPlayerFile).posterLarge}
+                  objectPosition={(video as VideoPlayerFile).objectPosition}
+                  labels={previewLabels}
+                  className="absolute inset-0"
+                />
+              ) : isPlayer ? (
                 <YouTubeBackground
-                  id={(video as VideoPlayer).youtubeId}
-                  poster={(video as VideoPlayer).poster}
+                  id={(video as VideoPlayerYouTube).youtubeId}
+                  poster={(video as VideoPlayerYouTube).poster}
                   title={videoTitle}
                   labels={previewLabels}
                 />

package/components/PauseButton.tsx

@@ -0,0 +1,41 @@
+import { Pause, Play } from "lucide-react";
+
+type Labels = {
+  /** sr-only name: "Pause {what}" / "Resume {what}". */
+  pause: (what: string) => string;
+  resume: (what: string) => string;
+};
+const EN: Labels = { pause: (what) => `Pause ${what}`, resume: (what) => `Resume ${what}` };
+
+type Props = {
+  paused: boolean;
+  onToggle: () => void;
+  /** What it pauses, in the page's language: "the sample conversation". */
+  what: string;
+  /** Colour of the circle: card (white) over the surface, surface over a card. */
+  bubble?: "card" | "surface";
+  /** Position (absolute) inside the drawing: "right-0 top-0". */
+  className?: string;
+  labels?: Partial<Labels>;
+};
+
+/** Pause/resume button of the looping drawings (creeta's `Pausa`). What moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2). 44px tap area,
+ *  32px circle. */
+export function PauseButton({ paused, onToggle, what, bubble = "card", className = "", labels }: Props) {
+  const t = { ...EN, ...labels };
+  const Icon = paused ? Play : Pause;
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={paused}
+      className={`absolute flex h-11 w-11 items-center justify-center rounded-full text-ink transition-transform duration-150 ease-out active:scale-[0.94] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      <span className={`flex h-8 w-8 items-center justify-center rounded-full ${bubble === "card" ? "bg-card" : "bg-surface"}`}>
+        <Icon aria-hidden="true" size={14} strokeWidth={2} className={paused ? "ml-0.5" : ""} />
+      </span>
+      <span className="sr-only">{paused ? t.resume(what) : t.pause(what)}</span>
+    </button>
+  );
+}

package/components/PhotoSequence.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+import { Pause, Play } from "lucide-react";
+
+export type SequencePhoto = { src: string; alt: string; srcSet?: string; sizes?: string };
+
+type Labels = {
+  /** sr-only of the pause control. */
+  pause: string;
+};
+const EN: Labels = { pause: "Pause the photos" };
+
+type Props = {
+  photos: SequencePhoto[];
+  /** Unique in the page: ties the pause control to the sequence. */
+  id: string;
+  /** Seconds each photo stays, not counting the fade. */
+  seconds?: number;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** Seconds of fade between one photo and the next. */
+const FADE = 1;
+/** Ken Burns: how much the photo grows while it shows. */
+const ZOOM = 1.08;
+const CURVE = "cubic-bezier(0.77, 0, 0.175, 1)";
+const pct = (n: number) => `${Number(n.toFixed(3))}%`;
+
+/** Keyframes for a sequence of `n` photos. The cycle lasts n × seconds and
+ *  each photo owns its slice: middle ones fade in, stay and vanish at once
+ *  when the next has covered them; the last fades out revealing the first;
+ *  the zoom grows while the photo shows and resets while hidden. */
+export function sequenceKeyframes(n: number, seconds: number): string {
+  const cycle = n * seconds;
+  const enter = (FADE / cycle) * 100;
+  const stay = (seconds / cycle) * 100;
+  const leave = ((seconds + FADE) / cycle) * 100;
+  return [
+    `@keyframes cg-seq-mid-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(leave)}{opacity:1}${pct(leave + 0.01)},100%{opacity:0}}`,
+    `@keyframes cg-seq-end-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(stay)}{opacity:1}${pct(leave)},100%{opacity:0}}`,
+    `@keyframes cg-seq-zoom-${n}{0%{transform:scale(1)}${pct(leave)}{transform:scale(${ZOOM})}${pct(leave + 0.01)},100%{transform:scale(1)}}`,
+  ].join("");
+}
+
+/** Photos that alternate with a fade and slowly zoom in, no JavaScript
+ *  (creeta's `SequenciaFotos`). Only opacity and transform. Content that moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2): the hidden
+ *  checkbox does it through CSS (theme.css). Reduced motion: first photo, still. */
+export function PhotoSequence({ photos, id, seconds = 4, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const n = photos.length;
+  const cycle = n * seconds;
+
+  const animation = (i: number): CSSProperties => {
+    const zoom = `cg-seq-zoom-${n} ${cycle}s linear infinite`;
+    if (i === 0) return { animation: zoom };
+    const fade = `${i === n - 1 ? `cg-seq-end-${n}` : `cg-seq-mid-${n}`} ${cycle}s ${CURVE} infinite`;
+    return { animation: `${fade}, ${zoom}`, animationDelay: `${i * seconds}s` };
+  };
+
+  // position and radius are defaults: a className with `absolute` or `rounded-*`
+  // (filling a CareSteps frame) takes their place instead of fighting them
+  const position = /\babsolute\b|\bfixed\b/.test(className) ? "" : "relative";
+  const radius = /\brounded/.test(className) ? "" : "rounded-[28px]";
+  return (
+    <div className={`${position} ${radius} overflow-hidden bg-ink ${className}`}>
+      {n > 1 && <style dangerouslySetInnerHTML={{ __html: sequenceKeyframes(n, seconds) }} />}
+      <input id={id} type="checkbox" className="cg-seq-pause peer sr-only" />
+
+      <div className="cg-seq absolute inset-0">
+        {photos.map((p, i) => (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            key={p.src}
+            src={p.src}
+            srcSet={p.srcSet}
+            sizes={p.sizes}
+            alt={p.alt}
+            loading="lazy"
+            decoding="async"
+            style={n > 1 ? animation(i) : undefined}
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        ))}
+      </div>
+
+      {n > 1 && (
+        <label
+          htmlFor={id}
+          className="cg-seq-control absolute bottom-3 right-3 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md peer-checked:[&_.cg-on-pause]:block peer-checked:[&_.cg-on-play]:hidden peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-surface"
+        >
+          <Pause aria-hidden="true" size={18} strokeWidth={2} className="cg-on-play" />
+          <Play aria-hidden="true" size={18} strokeWidth={2} className="cg-on-pause ml-0.5 hidden" />
+          <span className="sr-only">{t.pause}</span>
+        </label>
+      )}
+    </div>
+  );
+}

package/components/PlanTimeline.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { useOnAppear } from "./useOnAppear";
+import { PauseButton } from "./PauseButton";
+
+type Labels = {
+  /** Completes the pause button's name: "Pause the plan animation". */
+  pause: string;
+};
+const EN: Labels = { pause: "the plan animation" };
+
+type Props = {
+  /** The three stages, short ("Short", "Medium", "Long"). Three: the keyframes
+   *  in theme.css light one dot at a time, and there are three sets. */
+  names: [string, string, string];
+  /** Only from md, glued to the name: " term" → "Short term". */
+  suffix?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Step 3 of the care flow (creeta's `Prazos`): the three stages of the plan.
+ * The line comes down and each dot lights up when it reaches it; after a rest
+ * everything goes off and restarts (6s loop, keyframes in theme.css).
+ * - Starts when on screen and only runs while on screen.
+ * - Moves by itself for more than 5s: pause button (WCAG 2.2.2).
+ * - Without JavaScript or with reduced motion: still, the three dots lit, no button.
+ * Fills its box (absolute inset-0): put it in a frame with a height.
+ */
+export function PlanTimeline({ names, suffix, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const { ref, state, onScreen } = useOnAppear<HTMLDivElement>();
+  const [paused, setPaused] = useState(false);
+
+  return (
+    <div ref={ref} data-state={state} data-stopped={paused || !onScreen ? "" : undefined} className={`cg-plan absolute inset-0 ${className}`}>
+      <div aria-hidden="true" className="absolute inset-y-3 left-3 right-0 flex flex-col justify-center rounded-l-2xl bg-card pl-3 md:inset-y-5 md:left-5 md:pl-5">
+        {/* the track, light, and over it the line that comes down */}
+        <span className="absolute bottom-[22%] left-[17.5px] top-[22%] w-px bg-ink-soft/25 md:left-[25.5px]" />
+        <span className="cg-plan-line absolute bottom-[22%] left-[17.5px] top-[22%] w-px origin-top bg-ink-soft md:left-[25.5px]" />
+        {names.map((name, i) => (
+          <span
+            key={name}
+            data-n={i + 1}
+            className={`cg-plan-step flex flex-1 items-center gap-2.5 text-[0.8125rem] font-medium text-ink md:gap-3.5 md:text-[0.9375rem] ${i > 0 ? "border-t border-ink/10" : ""}`}
+          >
+            <span className="relative h-3 w-3 shrink-0 rounded-full border-2 border-ink-soft bg-card">
+              <span className="cg-plan-dot absolute -inset-0.5 rounded-full bg-ink-soft" />
+            </span>
+            {/* on the phone the frame is 134px and the pause button takes the corner: name only */}
+            <span className="cg-plan-name">
+              {name}
+              {suffix && <span className="max-md:hidden">{suffix}</span>}
+            </span>
+          </span>
+        ))}
+      </div>
+
+      {state !== "whole" && (
+        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} what={t.pause} bubble="surface" className="bottom-3 right-0 md:bottom-5 md:right-1" />
+      )}
+    </div>
+  );
+}

package/components/PostArticle.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from "react";
+import type { PostDate } from "./PostCard";
+
+type Labels = {
+  /** sr-only before the date. */
+  publishedOn: string;
+  /** sr-only heading of the aside (the video). */
+  aside: string;
+};
+const EN: Labels = { publishedOn: "Published on", aside: "Watch" };
+
+type Props = {
+  /** The trail above the title (a Breadcrumb). */
+  trail?: ReactNode;
+  title: ReactNode;
+  /** Who signs (a PersonChip). */
+  signature?: ReactNode;
+  date?: PostDate;
+  /** The text, one entry per paragraph: the first one is the lead, larger. */
+  paragraphs: ReactNode[];
+  /** Small line under a hairline at the end of the text ("This text guides, but…"). */
+  notice?: ReactNode;
+  /** Right column from md, sticky: the video the text came from (a VideoStoryCard). */
+  aside?: ReactNode;
+  /** The video's speech, in full, open: here it is the body of the page, not an extra. */
+  transcript?: { title: ReactNode; note?: ReactNode; paragraphs: ReactNode[]; lang?: string };
+  /** After the article: "other posts" (a heading and a grid of PostCard), the final call… */
+  children?: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Post page of the Cuidado Global family — creeta's `OrientacaoTela`, by
+ * tokens. Order: the trail, the title, who signs and when; the text, which
+ * answers at once; the video the text came from and, in full, what is said in
+ * it. On the phone they come in reading order (text, video, transcript); from
+ * md the video goes to the right column, sticky, and follows the reading.
+ */
+export function PostArticle({ trail, title, signature, date, paragraphs, notice, aside, transcript, children, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  return (
+    <article className={className}>
+      {trail}
+
+      <header className="mt-3 max-w-3xl md:mt-5">
+        <h1 className="font-heading text-[2rem] font-medium leading-[1.08] tracking-[-0.02em] text-ink md:text-5xl">{title}</h1>
+        {(signature || date) && (
+          <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-ink-body">
+            {signature}
+            {date && (
+              <time dateTime={date.iso}>
+                <span className="sr-only">{t.publishedOn} </span>
+                {date.label}
+              </time>
+            )}
+          </div>
+        )}
+      </header>
+
+      {/* Three pieces in a grid. On the phone in reading order: the text (the
+          answer), the video, the transcript. From md the video takes the right
+          column and follows the reading of the other two. The two text pieces
+          share one column (`contents` on the phone, a stack from md): in two
+          grid rows the taller video stretched the first row and opened a gap
+          above the transcript (2026-10-29). */}
+      <div className="mt-8 grid gap-3 md:mt-10 md:grid-cols-[minmax(0,7fr)_minmax(0,4fr)] md:items-start md:gap-5">
+        <div className="contents md:col-start-1 md:row-start-1 md:flex md:flex-col md:gap-5">
+          <section className="rounded-[28px] bg-card p-6 md:p-10">
+            {paragraphs.map((p, i) => (
+              <p key={i} className={i === 0 ? "text-lg leading-relaxed text-ink md:text-xl" : "mt-4 leading-relaxed text-ink-body"}>
+                {p}
+              </p>
+            ))}
+            {notice && <p className="mt-6 border-t border-ink/10 pt-4 text-sm text-ink-body">{notice}</p>}
+          </section>
+
+          {transcript && transcript.paragraphs.length > 0 && (
+            <section className="rounded-[28px] bg-card p-6 max-md:order-2 md:p-10">
+              <h2 className="font-heading text-[1.375rem] font-medium leading-snug text-ink md:text-2xl">{transcript.title}</h2>
+              {transcript.note && <p className="mt-2 text-sm font-medium text-ink">{transcript.note}</p>}
+              <div lang={transcript.lang} className="mt-4 space-y-4 leading-relaxed text-ink-body">
+                {transcript.paragraphs.map((p, i) => (
+                  <p key={i}>{p}</p>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+
+        {aside && (
+          <aside className="max-md:order-1 md:sticky md:top-28 md:col-start-2 md:row-start-1">
+            <h2 className="sr-only">{t.aside}</h2>
+            {aside}
+          </aside>
+        )}
+      </div>
+
+      {children}
+    </article>
+  );
+}

package/components/PostCard.tsx

@@ -0,0 +1,69 @@
+import type { ElementType, ReactNode } from "react";
+
+export type PostCover = { src: string; srcSet?: string; sizes?: string };
+export type PostDate = { iso: string; label: ReactNode };
+
+type Labels = {
+  /** Decorative line at the foot ("Read the guidance"); the link is the title. */
+  read: ReactNode;
+};
+const EN: Labels = { read: "Read more" };
+
+type Props = {
+  /** 4:3 at the top, decorative (the title says the subject). */
+  cover: PostCover;
+  /** Small line above the title ("Respiratory treatment"). */
+  category?: ReactNode;
+  title: ReactNode;
+  href: string;
+  /** The first paragraph, clamped to three lines. */
+  excerpt: ReactNode;
+  author: ReactNode;
+  date: PostDate;
+  headingLevel?: "h2" | "h3";
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  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>
+);
+
+/**
+ * Post card of the Cuidado Global family — creeta's `OrientacaoCartao`, by
+ * tokens: the card of one article in the list and in "other posts". The whole
+ * card is clickable (the title's link stretches over it) but the link's name
+ * stays the title: that is what the screen reader hears.
+ */
+export function PostCard({ cover, category, title, href, excerpt, author, date, headingLevel: Title = "h2", linkComponent, labels, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  return (
+    <article className={`group relative flex h-full flex-col overflow-hidden rounded-[28px] bg-card transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}>
+      <div className="relative aspect-[4/3] overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={cover.src} srcSet={cover.srcSet} sizes={cover.sizes} alt="" loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover object-[50%_30%]" />
+      </div>
+      <div className="flex flex-1 flex-col p-6 md:p-7">
+        {category && <p className="mb-2 text-sm font-semibold text-ink-soft">{category}</p>}
+        <Title className="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-[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">
+            {title}
+          </L>
+        </Title>
+        <p className="mt-3 line-clamp-3 leading-relaxed text-ink-body">{excerpt}</p>
+        <p className="mt-auto pt-5 text-sm text-ink-body">
+          <span className="font-semibold text-ink">{author}</span>
+          <span aria-hidden="true"> · </span>
+          <time dateTime={date.iso}>{date.label}</time>
+        </p>
+        {/* decoration: the link is the title */}
+        <p aria-hidden="true" className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-ink-soft">
+          {t.read}
+          <ArrowUpRight />
+        </p>
+      </div>
+    </article>
+  );
+}