@breathe-ds/ui 0.1.1 → 0.3.0

package/components/VideoStoryCard.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
+import { Check, Play } from "lucide-react";
+
+/* ── Pause-all coordination (ported from creeta's `pausa-dos-videos.tsx`) ──
+   A page-level "pause the card videos" button (WCAG 2.2.2) does two things:
+   `document.documentElement.toggleAttribute(CARD_VIDEOS_PAUSED_ATTR, paused)`
+   and `window.dispatchEvent(new Event(CARD_VIDEOS_PAUSE_EVENT))`. The hover
+   preview of this card checks the attribute before playing, and listens to
+   the event to stop a preview that is already running. The button itself
+   lives in the site (it is one per page, next to the grid), not here. */
+
+/** Event name the card previews listen to. */
+export const CARD_VIDEOS_PAUSE_EVENT = "cg-card-videos";
+/** Attribute on <html> while the card previews are paused by the person. */
+export const CARD_VIDEOS_PAUSED_ATTR = "data-card-videos-paused";
+
+/** Seconds → "1 min 39 s" (the site's `duracaoPorExtenso`, English units).
+ *  Pass an already formatted string to `duration` for other languages. */
+export function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m === 0) return `${s} s`;
+  return s === 0 ? `${m} min` : `${m} min ${s} s`;
+}
+
+type Labels = {
+  /** sr-only text of the poster button: "Watch: {title}, {duration}". */
+  watch: (title: string, duration: string) => string;
+  /** sr-only text of the poster button once watched: "Watched. Watch again: …". */
+  watchAgain: (title: string, duration: string) => string;
+  /** The badge shown on the poster once the video has been watched to the end. */
+  watched: string;
+};
+const EN: Labels = {
+  watch: (title, duration) => `Watch: ${title}, ${duration}`,
+  watchAgain: (title, duration) => `Watched. Watch again: ${title}, ${duration}`,
+  watched: "Watched",
+};
+
+/** localStorage key of the set of watched clips (by `src`), with `remember`. */
+export const WATCHED_STORAGE_KEY = "cg-watched";
+
+function readWatched(): string[] {
+  try {
+    const raw = localStorage.getItem(WATCHED_STORAGE_KEY);
+    const list = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+function storeWatched(src: string) {
+  try {
+    const list = readWatched();
+    if (!list.includes(src)) localStorage.setItem(WATCHED_STORAGE_KEY, JSON.stringify([...list, src]));
+  } catch {
+    /* private mode, blocked storage: the badge still shows for this visit */
+  }
+}
+
+export type VideoStoryCardCaptions = {
+  /** WebVTT file in the page's language. */
+  src: string;
+  /** BCP 47 tag of the captions ("en", "pt-BR"). */
+  lang: string;
+};
+
+type Props = {
+  /** Title of the clip (the heading of the card). */
+  title: string;
+  /** Who speaks, under the title ("Mariangela Fonseca"). */
+  speaker?: ReactNode;
+  /** One sentence. Collapsed by default; opens on hover (mouse only) or on
+   *  keyboard focus. In the side layout it is always visible. */
+  lead?: ReactNode;
+  /** The clip. Downloaded only when the person presses play (with sound and
+   *  the browser's controls). */
+  src: string;
+  /** Still frame shown before play (a few kB: with ten cards on a page this is
+   *  what makes it load on 4G). Also used as the <video> poster. */
+  poster: string;
+  /** Responsive variants of the poster ("/v/x-480.webp 480w"). */
+  posterSrcSet?: string;
+  /** `sizes` of the poster. Default: one of three columns from md up. */
+  sizes?: string;
+  /** Replaces the default <img>: the site's own image component. Must fill
+   *  the box (h-full w-full object-cover). */
+  media?: ReactNode;
+  /** Dominant color of the poster, shown while it loads. */
+  color?: string;
+  /** "1 min 39 s" (string) or the seconds (formatted in English by formatDuration). */
+  duration: string | number;
+  /** Optional muted, looping clip layered over the poster while the mouse is
+   *  on the card or the card has keyboard focus (the `hover` mode of creeta's
+   *  `VideoDoCartao`). Only where a mouse exists (hover: hover and pointer:
+   *  fine); never with reduced motion, data saver, or while the page's
+   *  pause-all is on. Fades in once it is really playing; otherwise the
+   *  poster stays. Not in the source card: opt-in. */
+  previewSrc?: string;
+  /** Hidden subtitle track + a caption band under the video while it plays
+   *  (creeta's `legenda.tsx`): many clips already have burned-in captions,
+   *  so the browser's overlay would collide with them. */
+  captions?: VideoStoryCardCaptions;
+  /** h2 on list pages, h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** `stacked` (default): title, speaker and lead over the poster, bottom
+   *  gradient. `side`: from md the video takes one column of three and the
+   *  text sits beside it (the card is alone in its group). */
+  layout?: "stacked" | "side";
+  /** Element rendered as the card root (default <article>); `li` in a list. */
+  as?: ElementType;
+  /** id of the root (anchor target: scroll-mt-24 is built in). */
+  id?: string;
+  /** Marks the card as watched from the start (the site keeps its own record).
+   *  Either way the card marks itself once the video plays to the end. */
+  watched?: boolean;
+  /** Called once when the video plays to the end (to store it on the site). */
+  onWatched?: () => void;
+  /** Remembers watched clips in localStorage (by `src`) across visits, for a
+   *  page with many videos. Off by default: the site decides. */
+  remember?: boolean;
+  /** What goes right under the video: a transcript, on the videos page. */
+  children?: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** The spoken line right now, read from the hidden <track>. 'hidden' mode:
+ *  the browser loads and fires cuechange but does not draw. */
+function useCaptionLine() {
+  const [line, setLine] = useState("");
+  const attach = useCallback((el: HTMLTrackElement | null) => {
+    const track = el?.track;
+    if (!track) return;
+    track.mode = "hidden";
+    track.addEventListener("cuechange", () => {
+      const cue = track.activeCues?.[0] as VTTCue | undefined;
+      setLine(cue ? cue.text : "");
+    });
+  }, []);
+  return { line, attach };
+}
+
+/** Caption band under the video: fixed height of three lines so the page does
+ *  not jump at every line; hidden from screen readers (the transcript is on
+ *  the page). On mount it scrolls the least needed to be in view: on phones it
+ *  would be born behind the bottom bar. */
+function CaptionLine({ text, lang }: { text: string; lang: string }) {
+  const band = useRef<HTMLParagraphElement>(null);
+  useEffect(() => {
+    const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    band.current?.scrollIntoView?.({ block: "nearest", behavior: calm ? "auto" : "smooth" });
+  }, []);
+  return (
+    <p
+      ref={band}
+      aria-hidden="true"
+      lang={lang}
+      className="mt-2 flex min-h-[4.75rem] scroll-mb-28 items-center justify-center rounded-[20px] bg-ink px-4 py-2.5 text-center text-[0.9375rem] font-medium leading-snug text-white md:scroll-mb-6"
+    >
+      {text}
+    </p>
+  );
+}
+
+/**
+ * Vertical (9:16) video card of the Cuidado Global family — the Instagram-post
+ * card of novo.creeta (`VideoCartao`), by tokens. Until the person presses
+ * play it is a poster with the round play button and the duration badge in the
+ * top-left corner; the title and the speaker sit on a short ink gradient at the
+ * bottom. On hover (mouse) or keyboard focus the gradient grows and the lead
+ * slides open (grid-rows 0fr → 1fr, no height animation). Tap/click swaps the
+ * poster for the <video> with sound and controls, and the overlay text leaves.
+ * Optional muted preview on hover (`previewSrc`) and caption band (`captions`).
+ * When the video ends the card goes back to the poster with a "Watched" badge
+ * (check + word, never color alone) in the top-right corner, opposite the play:
+ * on a page with many clips it says which ones are done.
+ */
+export function VideoStoryCard({
+  title,
+  speaker,
+  lead,
+  src,
+  poster,
+  posterSrcSet,
+  sizes = "(min-width: 1152px) 360px, (min-width: 768px) 33vw, 78vw",
+  media,
+  color,
+  duration,
+  previewSrc,
+  captions,
+  headingLevel: Heading = "h3",
+  layout = "stacked",
+  as: Root = "article",
+  id,
+  watched: watchedProp = false,
+  onWatched,
+  remember = false,
+  children,
+  labels,
+  className = "",
+}: Props) {
+  const t = { ...EN, ...labels };
+  const side = layout === "side";
+  const durationText = typeof duration === "number" ? formatDuration(duration) : duration;
+  const [playing, setPlaying] = useState(false);
+  const { line, attach } = useCaptionLine();
+
+  // ── watched: from the prop, from storage (after mount, so SSR and the first
+  // paint agree), or from the video reaching the end ──
+  const [watchedHere, setWatchedHere] = useState(false);
+  useEffect(() => {
+    if (remember && readWatched().includes(src)) setWatchedHere(true);
+  }, [remember, src]);
+  const watched = watchedProp || watchedHere;
+  const onEnded = () => {
+    setPlaying(false);
+    if (!watched) onWatched?.();
+    setWatchedHere(true);
+    if (remember) storeWatched(src);
+  };
+
+  // ── hover preview (muted loop over the poster) ──
+  const card = useRef<HTMLElement>(null);
+  const preview = useRef<HTMLVideoElement>(null);
+  const [previewing, setPreviewing] = useState(false);
+
+  useEffect(() => {
+    const v = preview.current;
+    const root = card.current;
+    if (!previewSrc || !v || !root || typeof window.matchMedia !== "function") return;
+
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;
+    const calm = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const pausedByPerson = () => document.documentElement.hasAttribute(CARD_VIDEOS_PAUSED_ATTR);
+    const play = () => {
+      if (calm() || saveData || pausedByPerson()) return;
+      v.play()
+        .then(() => setPreviewing(true))
+        .catch(() => {});
+    };
+    const stop = () => {
+      setPreviewing(false);
+      v.pause();
+    };
+    const withMouse = () => window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+    const enter = () => withMouse() && play();
+    // the person pressed the page's pause-all while the preview was running
+    const onPauseAll = () => pausedByPerson() && stop();
+
+    root.addEventListener("pointerenter", enter);
+    root.addEventListener("pointerleave", stop);
+    root.addEventListener("focusin", enter);
+    root.addEventListener("focusout", stop);
+    window.addEventListener(CARD_VIDEOS_PAUSE_EVENT, onPauseAll);
+    return () => {
+      root.removeEventListener("pointerenter", enter);
+      root.removeEventListener("pointerleave", stop);
+      root.removeEventListener("focusin", enter);
+      root.removeEventListener("focusout", stop);
+      window.removeEventListener(CARD_VIDEOS_PAUSE_EVENT, onPauseAll);
+    };
+  }, [previewSrc, playing]);
+
+  const overlayTitle = `font-heading text-xl font-medium leading-snug md:text-[1.375rem]`;
+
+  return (
+    <Root
+      ref={card}
+      id={id}
+      className={`group/card scroll-mt-24 ${side ? "md:grid md:grid-cols-3 md:items-center md:gap-5" : ""} ${className}`}
+    >
+      {/* the video and what is glued to it: the caption band and the transcript */}
+      <div>
+        <div className="relative aspect-[9/16] overflow-hidden rounded-[28px]" style={color ? { backgroundColor: color } : undefined}>
+          {playing ? (
+            <video
+              src={src}
+              poster={poster}
+              controls
+              autoPlay
+              playsInline
+              onEnded={onEnded}
+              className="absolute inset-0 h-full w-full bg-ink object-contain"
+            >
+              {captions && <track ref={attach} kind="subtitles" src={captions.src} srcLang={captions.lang} default />}
+            </video>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPlaying(true)}
+              className="group absolute inset-0 h-full w-full focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
+            >
+              {media ?? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={poster}
+                  srcSet={posterSrcSet}
+                  sizes={posterSrcSet ? sizes : undefined}
+                  alt=""
+                  width={540}
+                  height={960}
+                  loading="lazy"
+                  decoding="async"
+                  className="h-full w-full object-cover"
+                />
+              )}
+              {/* muted preview: invisible until it really plays, then fades in
+                  (otherwise it would flash black while the file arrives) */}
+              {previewSrc && (
+                <video
+                  ref={preview}
+                  src={previewSrc}
+                  muted
+                  loop
+                  playsInline
+                  preload="none"
+                  aria-hidden="true"
+                  tabIndex={-1}
+                  className={`pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out motion-reduce:transition-none ${previewing ? "opacity-100" : "opacity-0"}`}
+                />
+              )}
+              {/* watched: top-right, opposite the play, check and word (not color alone) */}
+              {watched && (
+                <span aria-hidden="true" className="absolute right-3 top-3 flex items-center gap-1.5 rounded-full bg-card/90 py-1.5 pl-2.5 pr-3 text-xs font-semibold text-ink backdrop-blur-md">
+                  <Check size={14} strokeWidth={2.5} />
+                  {t.watched}
+                </span>
+              )}
+              {/* play and duration, together in the top corner */}
+              <span aria-hidden="true" className="absolute left-3 top-3 flex items-center gap-2">
+                <span className="flex h-11 w-11 items-center justify-center rounded-full bg-card text-ink shadow-[0_8px_24px_-8px_rgba(0,0,0,0.6)] transition-transform duration-200 ease-out group-hover:scale-105 group-active:scale-95 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-active:scale-100">
+                  <Play size={18} strokeWidth={2} className="ml-0.5 fill-current" />
+                </span>
+                <span className="rounded-full bg-ink/85 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-md">
+                  {durationText}
+                </span>
+              </span>
+              {/* the gradient that holds the text: full ink at the bottom,
+                  nothing at the top; grows when the lead appears */}
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-x-0 bottom-0 h-[45%] bg-gradient-to-t from-ink from-20% via-ink/80 via-55% to-transparent transition-[height] duration-300 ease-out group-focus-within/card:h-[70%] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:h-[70%]"
+              />
+              <span className="sr-only">{watched ? t.watchAgain(title, durationText) : t.watch(title, durationText)}</span>
+            </button>
+          )}
+          {/* Caption over the gradient. Outside the button so the title stays a
+              heading. Leaves when the video plays. */}
+          {!playing && !side && (
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 p-5 text-white md:p-6">
+              <Heading className={overlayTitle}>{title}</Heading>
+              {speaker && <p className="mt-1 text-sm font-semibold text-white/80">{speaker}</p>}
+              {/* the lead: collapsed, opens on hover or on focus of the play
+                  (grid-rows 0fr → 1fr, no height animation) */}
+              {lead && (
+                <div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-focus-within/card:grid-rows-[1fr] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:grid-rows-[1fr]">
+                  <p className="min-h-0 overflow-hidden text-sm leading-relaxed text-white/85 opacity-0 transition-opacity duration-300 ease-out group-focus-within/card:opacity-100 motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:opacity-100">
+                    <span className="block pt-1.5">{lead}</span>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {playing && captions && <CaptionLine text={line} lang={captions.lang} />}
+        {children}
+      </div>
+      {/* Side layout (card alone in its group): the text sits beside the video. */}
+      {side && (
+        <div className="px-6 pt-4 md:col-span-2 md:max-w-md md:pt-0">
+          <Heading className={`${overlayTitle} text-ink`}>{title}</Heading>
+          {speaker && <p className="mt-1 text-sm font-semibold text-ink">{speaker}</p>}
+          {lead && <p className="mt-1.5 text-[0.9375rem] leading-relaxed text-ink/80">{lead}</p>}
+        </div>
+      )}
+    </Root>
+  );
+}

package/components/icons.tsx

@@ -1,9 +1,9 @@
 /**
- * Biblioteca de ícones do Breathe. Re-exporta a lib INTEIRA do lucide-react
- * (centenas de ícones), para você escolher qualquer um ao montar interfaces:
+ * Breathe icon library. Re-exports the ENTIRE lucide-react lib (hundreds of
+ * icons), so you can pick any of them when building interfaces:
  *   import { Heart, Wind, Baby } from "@breathe-ds/ui/components/icons";
- * Os ícones usam `currentColor` e aceitam `size`/`strokeWidth`. Os componentes
- * do DS recebem ícones por slot, então injete o que quiser.
+ * Icons use `currentColor` and accept `size`/`strokeWidth`. The DS components
+ * take icons through slots, so inject whichever you want.
  */
 export * from "lucide-react";
 
@@ -13,7 +13,7 @@ import {
   Quote, Menu, X, ChevronDown, ArrowUpRight, Globe,
 } from "lucide-react";
 
-/* Aliases semânticos dos ícones usados pela família (os "principais"). */
+/* Semantic aliases for the icons the family uses (the "core" ones). */
 export const IconHome = House;
 export const IconWind = Wind;
 export const IconActivity = Activity;
@@ -39,7 +39,7 @@ export const IconChevronDown = ChevronDown;
 export const IconArrowUpRight = ArrowUpRight;
 export const IconGlobe = Globe;
 
-/* Mapa dos usados (principais) — nome → componente. */
+/* Map of the icons in use (core) — name → component. */
 export const used = {
   Home: IconHome, Wind: IconWind, Activity: IconActivity, Baby: IconBaby,
   Search: IconSearch, Users: IconUsers, GraduationCap: IconGraduationCap,

package/components/marks/creeta.tsx

@@ -1,23 +1,23 @@
 import type { CSSProperties } from "react";
 
 /**
- * Marca do Creeta (Centro de Reequilíbrio Toracoabdominal), copiada de
- * public/brand/creeta-simbolo.svg e creeta-tipo.svg do site. Símbolo (três
- * ondas + ponto magenta) e wordmark "creeta" separados, para a Cortina e o
- * Lockup montarem os arranjos. Não editar à mão: o desenho é o do manual.
- * As cores do símbolo são as do logotipo, não os tokens do site.
+ * Creeta brand (Centro de Reequilíbrio Toracoabdominal), copied from the site's
+ * public/brand/creeta-simbolo.svg and creeta-tipo.svg. Symbol (three waves +
+ * magenta dot) and "creeta" wordmark kept separate, so the Curtain and the
+ * Lockup can assemble the arrangements. Do not edit by hand: the drawing is
+ * the one from the manual. The symbol colors are the logo's, not the site tokens.
  */
 export const CREETA_COLORS = {
-  ondaMedia: "#3B9BAF",
-  arco: "#266675",
-  ondaClara: "#63CACD",
-  ponto: "#A2158A",
+  midWave: "#3B9BAF",
+  arc: "#266675",
+  lightWave: "#63CACD",
+  dot: "#A2158A",
 } as const;
 
 type SymbolProps = {
-  /** Lado em px (caixa quadrada 86 × 86). */
+  /** Side in px (square box, 86 × 86). */
   size?: number;
-  /** Cor única para todas as partes (ex.: "#fff" sobre painel escuro). Padrão: as cores da marca. */
+  /** Single color for every part (e.g. "#fff" on a dark panel). Default: the brand colors. */
   color?: string;
   className?: string;
   title?: string;
@@ -27,31 +27,31 @@ export function CreetaSymbol({ size = 48, color, className, title = "Creeta" }:
   const c = (k: keyof typeof CREETA_COLORS) => color ?? CREETA_COLORS[k];
   return (
     <svg width={size} height={size} viewBox="0 0 86 86" fill="none" role="img" aria-label={title} className={className}>
-      <path d="M85.4746 46.2096C83.9959 65.2746 70.0266 80.8266 51.7546 84.696C51.6493 84.7214 51.544 84.7481 51.4507 84.761C48.7053 85.3293 45.8666 85.62 42.9613 85.6334H42.816C26.4706 84.973 13.4266 71.5053 13.4266 54.9892C13.4266 44.1626 19.0387 34.6309 27.5147 29.1908C30.7093 27.1309 34.3133 25.6397 38.196 24.9001C30.5106 26.8798 24.7547 33.6668 24.3453 41.8653C24.3187 42.1824 24.3186 42.4986 24.3186 42.8157C24.3186 43.1334 24.3187 43.449 24.3453 43.7668C24.8347 60.2574 38.3666 73.473 54.9893 73.473C61.1026 73.473 66.7919 71.6908 71.5719 68.6012C79.1506 63.7293 84.4319 55.6096 85.4746 46.2096Z" fill={c("ondaMedia")} />
-      <path d="M55.98 12.16V12.173C55.9667 18.8012 50.672 24.1746 44.084 24.32H43.8067C43.6747 24.32 43.5427 24.32 43.4107 24.3334H43.3587C43.1733 24.32 43.0014 24.32 42.8174 24.32C41.2854 24.32 39.7933 24.5038 38.38 24.861C38.3147 24.8746 38.2614 24.8881 38.196 24.9012C34.3147 25.6397 30.7094 27.132 27.5147 29.1918C19.0387 34.6309 13.428 44.1642 13.428 54.9892C13.428 71.5064 26.472 84.973 42.8174 85.6334C19.1707 85.6334 0 66.4626 0 42.8173C0 19.1705 19.1707 -3.8147e-05 42.8174 -3.8147e-05C43.028 -3.8147e-05 43.2387 -3.52981e-05 43.4507 0.013298C43.9 0.013298 44.3613 0.0266218 44.8107 0.0399551C51.056 0.554622 55.98 5.78262 55.98 12.16Z" fill={c("arco")} />
-      <path d="M73.4467 31.2278C70.6867 31.2278 68.152 32.1387 66.1187 33.684C63.188 35.9012 61.2867 39.4267 61.2867 43.3882V42.8335C61.2867 53.0387 53.0093 61.3174 42.8027 61.3174C32.9013 61.3174 24.8214 53.5534 24.332 43.784C24.8214 60.2747 38.3534 73.4908 54.976 73.4908C61.0894 73.4908 66.7787 71.708 71.5587 68.619C79.0947 63.7731 84.3547 55.7158 85.44 46.3824C85.4694 45.6944 85.6067 43.4491 85.6067 43.1892C85.5014 36.5611 80.1013 31.2278 73.4467 31.2278Z" fill={c("ondaClara")} />
-      <path d="M71.2799 26.5798C77.1253 26.5798 81.8626 21.8252 81.8626 15.9585C81.8626 10.0933 77.1253 5.33731 71.2799 5.33731C65.4346 5.33731 60.6973 10.0933 60.6973 15.9585C60.6973 21.8252 65.4346 26.5798 71.2799 26.5798Z" fill={c("ponto")} />
+      <path d="M85.4746 46.2096C83.9959 65.2746 70.0266 80.8266 51.7546 84.696C51.6493 84.7214 51.544 84.7481 51.4507 84.761C48.7053 85.3293 45.8666 85.62 42.9613 85.6334H42.816C26.4706 84.973 13.4266 71.5053 13.4266 54.9892C13.4266 44.1626 19.0387 34.6309 27.5147 29.1908C30.7093 27.1309 34.3133 25.6397 38.196 24.9001C30.5106 26.8798 24.7547 33.6668 24.3453 41.8653C24.3187 42.1824 24.3186 42.4986 24.3186 42.8157C24.3186 43.1334 24.3187 43.449 24.3453 43.7668C24.8347 60.2574 38.3666 73.473 54.9893 73.473C61.1026 73.473 66.7919 71.6908 71.5719 68.6012C79.1506 63.7293 84.4319 55.6096 85.4746 46.2096Z" fill={c("midWave")} />
+      <path d="M55.98 12.16V12.173C55.9667 18.8012 50.672 24.1746 44.084 24.32H43.8067C43.6747 24.32 43.5427 24.32 43.4107 24.3334H43.3587C43.1733 24.32 43.0014 24.32 42.8174 24.32C41.2854 24.32 39.7933 24.5038 38.38 24.861C38.3147 24.8746 38.2614 24.8881 38.196 24.9012C34.3147 25.6397 30.7094 27.132 27.5147 29.1918C19.0387 34.6309 13.428 44.1642 13.428 54.9892C13.428 71.5064 26.472 84.973 42.8174 85.6334C19.1707 85.6334 0 66.4626 0 42.8173C0 19.1705 19.1707 -3.8147e-05 42.8174 -3.8147e-05C43.028 -3.8147e-05 43.2387 -3.52981e-05 43.4507 0.013298C43.9 0.013298 44.3613 0.0266218 44.8107 0.0399551C51.056 0.554622 55.98 5.78262 55.98 12.16Z" fill={c("arc")} />
+      <path d="M73.4467 31.2278C70.6867 31.2278 68.152 32.1387 66.1187 33.684C63.188 35.9012 61.2867 39.4267 61.2867 43.3882V42.8335C61.2867 53.0387 53.0093 61.3174 42.8027 61.3174C32.9013 61.3174 24.8214 53.5534 24.332 43.784C24.8214 60.2747 38.3534 73.4908 54.976 73.4908C61.0894 73.4908 66.7787 71.708 71.5587 68.619C79.0947 63.7731 84.3547 55.7158 85.44 46.3824C85.4694 45.6944 85.6067 43.4491 85.6067 43.1892C85.5014 36.5611 80.1013 31.2278 73.4467 31.2278Z" fill={c("lightWave")} />
+      <path d="M71.2799 26.5798C77.1253 26.5798 81.8626 21.8252 81.8626 15.9585C81.8626 10.0933 77.1253 5.33731 71.2799 5.33731C65.4346 5.33731 60.6973 10.0933 60.6973 15.9585C60.6973 21.8252 65.4346 26.5798 71.2799 26.5798Z" fill={c("dot")} />
     </svg>
   );
 }
 
 type WordmarkProps = {
-  /** Altura. Padrão `var(--cg-wordmark, 1em)`: dentro do Lockup/Cortina a
-   *  variável vem da razão do manual (`wordmarkPerSymbol`); solto, 1em. */
+  /** Height. Default `var(--cg-wordmark, 1em)`: inside the Lockup/Curtain the
+   *  variable comes from the manual's ratio (`wordmarkPerSymbol`); standalone, 1em. */
   height?: string;
-  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  /** Default `currentColor`: inherits `ink` (or white on a panel). */
   color?: string;
   className?: string;
   style?: CSSProperties;
   title?: string;
 };
 
-/** Razão do manual: altura do wordmark ÷ altura do símbolo no logotipo
- *  horizontal (40.3 / 86 (nome a 1.4643× no logotipo horizontal)). Passe como `wordmarkRatio` ao Lockup/Cortina. */
-/** No creeta o símbolo fica à esquerda do nome (padrão da família). */
+/** Ratio from the manual: wordmark height ÷ symbol height in the horizontal
+ *  logo (40.3 / 86, with the name at 1.4643× in the horizontal logo). Pass it as `wordmarkRatio` to the Lockup/Curtain. */
+/** In creeta the symbol sits to the left of the name (the family default). */
 export const CREETA_LOCKUP = { wordmarkPerSymbol: 0.469, symbolSide: "left" } as const;
 
-/** Caixa justa ao desenho das letras: 116.66 × 27.53. */
+/** Box tight to the letterforms: 116.66 × 27.53. */
 export function CreetaWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "creeta" }: WordmarkProps) {
   return (
     <svg

package/components/marks/ttcab.tsx

@@ -1,15 +1,15 @@
 import type { CSSProperties } from "react";
 
 /**
- * Marca do TTCAB (Torcicolo Congênito e Assimetrias do Bebê), copiada dos
- * arquivos de public/brand do site. Símbolo (mãe + bebê, laranja) e
- * wordmark "TTCAB" separados, para a Cortina e o Lockup montarem os arranjos.
- * Não editar à mão: o desenho é o do manual da marca.
+ * TTCAB brand (Torcicolo Congênito e Assimetrias do Bebê), copied from the
+ * site's public/brand files. Symbol (mother + baby, orange) and "TTCAB"
+ * wordmark kept separate, so the Curtain and the Lockup can assemble the
+ * arrangements. Do not edit by hand: the drawing is the one from the brand manual.
  */
 type SymbolProps = {
-  /** Largura em px; a altura segue a proporção (136:126). */
+  /** Width in px; height follows the aspect ratio (136:126). */
   size?: number;
-  /** Cor única (ex.: "currentColor" ou "#fff" sobre painel escuro). Padrão: o laranja da marca. */
+  /** Single color (e.g. "currentColor" or "#fff" on a dark panel). Default: the brand orange. */
   color?: string;
   className?: string;
   title?: string;
@@ -28,22 +28,22 @@ export function TtcabSymbol({ size = 48, color = TTCAB_ORANGE, className, title
 }
 
 type WordmarkProps = {
-  /** Altura. Padrão `var(--cg-wordmark, 1em)`: dentro do Lockup/Cortina a
-   *  variável vem da razão do manual (`wordmarkPerSymbol`); solto, 1em. */
+  /** Height. Default `var(--cg-wordmark, 1em)`: inside the Lockup/Curtain the
+   *  variable comes from the manual's ratio (`wordmarkPerSymbol`); standalone, 1em. */
   height?: string;
-  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  /** Default `currentColor`: inherits `ink` (or white on a panel). */
   color?: string;
   className?: string;
   style?: CSSProperties;
   title?: string;
 };
 
-/** Razão do manual: altura do wordmark ÷ altura do símbolo no logotipo
- *  horizontal (43.67 / 78.39). Passe como `wordmarkRatio` ao Lockup/Cortina. */
-/** No TTCAB o símbolo fica à DIREITA do nome (logotipo horizontal do manual). */
+/** Ratio from the manual: wordmark height ÷ symbol height in the horizontal
+ *  logo (43.67 / 78.39). Pass it as `wordmarkRatio` to the Lockup/Curtain. */
+/** In TTCAB the symbol sits to the RIGHT of the name (the manual's horizontal logo). */
 export const TTCAB_LOCKUP = { wordmarkPerSymbol: 0.557, symbolSide: "right" } as const;
 
-/** Caixa justa ao desenho das letras: 149.75 × 43.67. */
+/** Box tight to the letterforms: 149.75 × 43.67. */
 export function TtcabWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "TTCAB" }: WordmarkProps) {
   return (
     <svg

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.1.1",
-  "description": "Breathe DS — design system da família Cuidado Global (creeta, ttcab, metodorta). Tokens tematizáveis + componentes React.",
-  "license": "UNLICENSED",
+  "version": "0.3.0",
+  "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
+  "license": "MIT",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -11,7 +11,8 @@
     "theme.css",
     "tokens",
     "components",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     "./theme.css": "./theme.css",
@@ -23,16 +24,38 @@
     "./components/Button": "./components/Button.tsx",
     "./components/Container": "./components/Container.tsx",
     "./components/SectionKicker": "./components/SectionKicker.tsx",
+    "./components/Heading": "./components/Heading.tsx",
+    "./components/CtaCard": "./components/CtaCard.tsx",
+    "./components/InfoCard": "./components/InfoCard.tsx",
+    "./components/FactStrip": "./components/FactStrip.tsx",
+    "./components/VideoStoryCard": "./components/VideoStoryCard.tsx",
+    "./components/TestimonialCard": "./components/TestimonialCard.tsx",
+    "./components/MediaCard": "./components/MediaCard.tsx",
+    "./components/MapCard": "./components/MapCard.tsx",
+    "./components/VideoInviteCard": "./components/VideoInviteCard.tsx",
+    "./components/Text": "./components/Text.tsx",
     "./components/Card": "./components/Card.tsx",
     "./components/PillList": "./components/PillList.tsx",
+    "./components/Pill": "./components/Pill.tsx",
     "./components/Header": "./components/Header.tsx",
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
-    "./components/Cortina": "./components/Cortina.tsx",
+    "./components/Curtain": "./components/Curtain.tsx",
     "./components/Lockup": "./components/Lockup.tsx",
     "./tokens/neutral.css": "./tokens/neutral.css",
     "./components/icons": "./components/icons.tsx",
     "./components/AnchorNav": "./components/AnchorNav.tsx",
+    "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
+    "./components/List": "./components/List.tsx",
+    "./components/Rows": "./components/Rows.tsx",
+    "./components/Avatar": "./components/Avatar.tsx",
+    "./components/Byline": "./components/Byline.tsx",
+    "./components/ProfessionalCard": "./components/ProfessionalCard.tsx",
+    "./components/ProfessionalModal": "./components/ProfessionalModal.tsx",
+    "./components/CaptionBand": "./components/CaptionBand.tsx",
+    "./components/PersonChip": "./components/PersonChip.tsx",
+    "./components/Breadcrumb": "./components/Breadcrumb.tsx",
+    "./components/Timeline": "./components/Timeline.tsx",
     "./components/marks/ttcab": "./components/marks/ttcab.tsx",
     "./components/marks/creeta": "./components/marks/creeta.tsx"
   },