@breathe-ds/ui 0.0.0-stage → 0.1.0

package/components/PageVideoHero.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { BackgroundVideo } from "./BackgroundVideo";
+
+type Panel = { kicker?: ReactNode; title: ReactNode; lead?: ReactNode };
+
+/** Clipe de fundo local (modo loop), sem som, em repetição. */
+type LoopPreview = {
+  src: string;
+  srcLarge?: string;
+  poster: string;
+  posterLarge?: string;
+  trimEdges?: boolean;
+  objectPosition?: string;
+};
+
+/** Dois tipos de hero com vídeo:
+ *  - loop:   um clipe local em repetição (sem player). Fundo = BackgroundVideo.
+ *  - player: o PRÓPRIO vídeo do YouTube roda mudo, em repetição, como fundo
+ *            (16:9, cobrindo o cartão, sem corte/zoom). Ao apertar o som ele
+ *            remonta do zero — com áudio e controles — e surge a barra de
+ *            fechar no pé. Mantém a consistência: a prévia e o vídeo são o
+ *            mesmo material. */
+type VideoLoop = { mode: "loop"; preview: LoopPreview };
+type VideoPlayer = {
+  mode: "player";
+  youtubeId: string;
+  /** Quadro parado (movimento reduzido / economia de dados). Sem ele, usa a
+   *  miniatura do próprio YouTube (maxresdefault). */
+  poster?: string;
+  legenda?: ReactNode;
+};
+
+type Props = {
+  /** Fundo em vídeo — define o tipo do hero (loop ou player). */
+  video: VideoLoop | VideoPlayer;
+  /** Slot no topo-esquerdo (selo de local, "← voltar" + ícone). */
+  topLeft?: ReactNode;
+  /** Legenda curta no canto inferior-esquerdo (pílula) — versão simples. */
+  caption?: ReactNode;
+  /** Painel de conteúdo inferior-esquerdo (kicker + título + lead). */
+  panel?: Panel;
+  /** CTAs no canto inferior-direito. No modo player, sem isto mostra "Assistir
+   *  ao vídeo"; null esconde. No modo loop, só aparece o que vier aqui. */
+  actions?: ReactNode | null;
+  /** Rótulo + meta do botão padrão "Assistir ao vídeo" (modo player). */
+  watch?: { label?: string; meta?: ReactNode };
+  /** Rótulo do botão de fechar na barra inferior (modo player tocando). */
+  closeLabel?: string;
+  /** Rótulos do botão de pausa do fundo (modo player, prévia muda). */
+  previewLabels?: { pause?: string; play?: string };
+  videoTitle?: string;
+};
+
+function PlayGlyph({ size = 20 }: { size?: number }) {
+  return <svg viewBox="0 0 24 24" width={size} height={size} className="ml-0.5" fill="currentColor" aria-hidden="true"><path d="M6 3v18l15-9z" /></svg>;
+}
+function XGlyph({ size = 18 }: { size?: number }) {
+  return <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>;
+}
+
+/**
+ * Fundo em vídeo do YouTube rodando MUDO, em repetição, cobrindo o cartão
+ * (modo player, antes de o som começar). É enfeite: fica fora da leitura de
+ * tela. Respeita movimento reduzido e economia de dados (aí fica no quadro
+ * parado, sem pedir o vídeo). O "cover" é feito com unidades de container
+ * (cqw/cqh), então a proporção 16:9 nunca é distorcida nem cortada em falso.
+ * Tem botão de pausa (WCAG 2.2.2). O clique passa reto (pointer-events-none):
+ * quem recebe o toque é o botão de assistir, por cima.
+ */
+function YouTubeBackground({
+  id,
+  poster,
+  title,
+  labels,
+}: {
+  id: string;
+  poster?: string;
+  title?: string;
+  labels?: { pause?: string; play?: string };
+}) {
+  const [show, setShow] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const frame = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const lessMotion =
+      typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData;
+    if (lessMotion || saveData) return; // fica no quadro parado
+    setShow(true);
+  }, []);
+
+  function toggle() {
+    const w = frame.current?.contentWindow;
+    if (!w) return;
+    // API do YouTube por postMessage (enablejsapi=1): pausa/retoma sem carregar o script.
+    w.postMessage(JSON.stringify({ event: "command", func: paused ? "playVideo" : "pauseVideo", args: [] }), "*");
+    setPaused((p) => !p);
+  }
+
+  const posterSrc = poster ?? `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
+
+  return (
+    <div className="absolute inset-0 overflow-hidden" style={{ containerType: "size" }}>
+      {show ? (
+        <iframe
+          ref={frame}
+          title={title ?? "Vídeo"}
+          tabIndex={-1}
+          aria-hidden="true"
+          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&loop=1&playlist=${id}&controls=0&disablekb=1&fs=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&enablejsapi=1`}
+          allow="autoplay; encrypted-media"
+          className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-0"
+          style={{ width: "max(100cqw, 177.78cqh)", height: "max(100cqh, 56.25cqw)" }}
+        />
+      ) : (
+        // miniatura do próprio YouTube (16:9) quando não se toca o vídeo
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={posterSrc} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
+      )}
+      {show && (
+        <button
+          type="button"
+          onClick={toggle}
+          aria-label={paused ? labels?.play ?? "Reproduzir vídeo" : labels?.pause ?? "Pausar vídeo"}
+          className="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
+        >
+          {paused ? (
+            <svg viewBox="0 0 24 24" className="ml-0.5 h-[18px] w-[18px]" fill="currentColor" aria-hidden="true"><path d="M6 3v18l15-9z" /></svg>
+          ) : (
+            <svg viewBox="0 0 24 24" className="h-[18px] w-[18px]" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1.2" /><rect x="14" y="4" width="4" height="16" rx="1.2" /></svg>
+          )}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Hero full-bleed da família Cuidado Global — espelha o "TopoVideo" do
+ * novo.creeta (tamanhos/espaçamentos exatos: max-w-1600, rounded-32,
+ * min-h 560/820), com a linguagem do Breathe (tokens: ink/surface).
+ *
+ * - loop:   o fundo é um clipe local em repetição (BackgroundVideo).
+ * - player: o fundo é o PRÓPRIO vídeo do YouTube rodando mudo, em repetição.
+ *           Ao apertar o som, ele remonta do zero (com áudio e controles) no
+ *           próprio cartão e abre a barra de fechar no pé (legenda à esquerda,
+ *           "Fechar" à direita).
+ */
+export function PageVideoHero({
+  video,
+  topLeft,
+  caption,
+  panel,
+  actions,
+  watch,
+  closeLabel = "Fechar o vídeo",
+  previewLabels,
+  videoTitle,
+}: Props) {
+  const isPlayer = video.mode === "player";
+  const [playing, setPlaying] = useState(false);
+  const watchRef = useRef<HTMLButtonElement>(null);
+  const playedOnce = useRef(false);
+
+  // Ao fechar, o foco volta para o botão de assistir.
+  useEffect(() => {
+    if (playing) playedOnce.current = true;
+    else if (playedOnce.current) watchRef.current?.focus();
+  }, [playing]);
+
+  const legenda = isPlayer ? (video as VideoPlayer).legenda : undefined;
+
+  return (
+    <div className="px-4 pt-2 md:px-6 md:pt-6">
+      <section className="relative isolate mx-auto flex min-h-[min(calc(100svh-7.5rem),560px)] max-w-[1600px] flex-col justify-end overflow-hidden rounded-[32px] bg-ink text-surface lg:min-h-[min(calc(100svh-7.5rem),820px)]">
+        {/* mídia — fundo (prévia) ou, tocando, o vídeo inteiro com som */}
+        <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
+          {playing ? (
+            <iframe
+              key="cg-hero-som"
+              title={videoTitle ?? "Vídeo"}
+              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"
+            />
+          ) : (
+            <>
+              {isPlayer ? (
+                <YouTubeBackground
+                  id={(video as VideoPlayer).youtubeId}
+                  poster={(video as VideoPlayer).poster}
+                  title={videoTitle}
+                  labels={previewLabels}
+                />
+              ) : (
+                <BackgroundVideo
+                  key={(video as VideoLoop).preview.src}
+                  src={(video as VideoLoop).preview.src}
+                  srcLarge={(video as VideoLoop).preview.srcLarge}
+                  poster={(video as VideoLoop).preview.poster}
+                  posterLarge={(video as VideoLoop).preview.posterLarge}
+                  trimEdges={(video as VideoLoop).preview.trimEdges}
+                  objectPosition={(video as VideoLoop).preview.objectPosition}
+                  className="absolute inset-0"
+                />
+              )}
+              {/* véus — legibilidade do texto (base) e dos elementos do topo */}
+              <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/10 to-transparent" />
+              <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-ink/35 to-transparent" />
+            </>
+          )}
+        </div>
+
+        {!playing && (
+          <>
+            {/* topo-esquerdo */}
+            {topLeft && <div className="absolute top-4 left-4 z-10">{topLeft}</div>}
+
+            {/* painel / legenda — no fluxo (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>
+                    {panel.kicker && (
+                      <p className="mb-3 font-heading text-[0.82rem] font-bold tracking-[0.1em] text-surface/80 uppercase">{panel.kicker}</p>
+                    )}
+                    <h1 className="font-heading text-[clamp(2.1rem,4.6vw,3.6rem)] leading-[1.04] font-semibold tracking-[-0.015em] text-balance text-surface">{panel.title}</h1>
+                    {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>
+                    )}
+                  </div>
+                </div>
+              ) : caption ? (
+                <div className="inline-block rounded-[22px] bg-ink/70 px-5 py-3 font-heading text-[1.05rem] font-medium text-surface backdrop-blur-md md:text-xl">{caption}</div>
+              ) : null}
+            </div>
+
+            {/* ação inferior-direita */}
+            {actions === null ? null : actions ? (
+              <div className="absolute right-4 bottom-4 z-10 flex flex-wrap items-center justify-end gap-2 md:right-6 md:bottom-6">{actions}</div>
+            ) : isPlayer ? (
+              <button
+                ref={watchRef}
+                type="button"
+                onClick={() => setPlaying(true)}
+                className="absolute right-4 bottom-4 z-10 flex items-center gap-3 rounded-full border border-surface/15 bg-ink/80 py-2 pr-7 pl-2 font-body font-semibold text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none md:right-6 md:bottom-6"
+              >
+                <span className="relative flex h-12 w-12 items-center justify-center rounded-full bg-surface text-ink">
+                  <PlayGlyph size={20} />
+                </span>
+                <span className="flex flex-col items-start leading-tight">
+                  {watch?.label ?? "Assistir ao vídeo"}
+                  {watch?.meta && <span className="text-sm font-normal text-surface/80">{watch.meta}</span>}
+                </span>
+              </button>
+            ) : null}
+          </>
+        )}
+
+        {/* barra de fechar — pé do vídeo tocando (legenda à esquerda, fechar à direita) */}
+        {playing && (
+          <div className="relative z-10 flex h-[4.5rem] items-center justify-between gap-6 bg-ink px-6">
+            <p className="min-w-0 truncate text-sm text-surface/80">{legenda}</p>
+            <button
+              type="button"
+              onClick={() => setPlaying(false)}
+              className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-full border border-surface/25 px-5 text-sm font-semibold text-surface transition-colors duration-200 hover:bg-surface/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
+            >
+              <XGlyph size={18} />
+              {closeLabel}
+            </button>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/components/PillList.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+
+export type Pill = { label: ReactNode; href?: string };
+
+type Props = {
+  title?: ReactNode;
+  items: Pill[];
+  /** Link "Ver todos" opcional. */
+  seeAll?: { label: ReactNode; href?: string };
+};
+
+function ArrowUpRight() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      className="h-4 w-4 flex-none"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7 17 17 7M9 7h8v8" />
+    </svg>
+  );
+}
+
+/**
+ * Lista de pills (ex.: "Condições que atendemos"): chips brancos com rótulo +
+ * seta, em grade que quebra, e um link "Ver todos". Chip clicável vira `<a>`.
+ * Estilo de card discreto do DS (borda + sombra suaves), raio pill.
+ */
+export function PillList({ title, items, seeAll }: Props) {
+  return (
+    <div>
+      {title && (
+        <h2 className="mb-6 font-heading text-[clamp(1.5rem,3vw,2rem)] font-semibold tracking-[-0.01em] text-ink">
+          {title}
+        </h2>
+      )}
+      <ul className="flex flex-wrap gap-2.5">
+        {items.map((p, i) => {
+          const inner = (
+            <>
+              <span>{p.label}</span>
+              <span className="grid h-7 w-7 flex-none place-items-center rounded-full bg-ink/[0.06] text-ink-soft transition-colors group-hover:bg-ink/[0.1] group-hover:text-ink">
+                <ArrowUpRight />
+              </span>
+            </>
+          );
+          const cls =
+            "group inline-flex items-center gap-3 rounded-pill border border-line bg-surface py-2 pr-2 pl-5 font-heading text-[0.98rem] font-semibold text-ink shadow-[0_2px_10px_rgba(20,71,83,0.05)] transition hover:-translate-y-0.5 hover:shadow-[0_10px_24px_rgba(20,71,83,0.1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+          return (
+            <li key={i}>
+              {p.href ? (
+                <a href={p.href} className={cls}>
+                  {inner}
+                </a>
+              ) : (
+                <span className={cls}>{inner}</span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      {seeAll && (
+        <div className="mt-6">
+          {seeAll.href ? (
+            <Button href={seeAll.href} variant="link">{seeAll.label} <ArrowUpRight /></Button>
+          ) : (
+            <Button variant="link">{seeAll.label} <ArrowUpRight /></Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/SectionKicker.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** Numeral da seção (ex.: "01"). */
+  num?: string;
+  children: ReactNode;
+};
+
+/**
+ * Sobrelinha de seção numerada (ex.: "01 — TRATAMENTO"), padrão da família.
+ * Numeral em `action-text`, rótulo em `ink-soft` caixa-alta. Sem dependência.
+ */
+export function SectionKicker({ num, children }: Props) {
+  return (
+    <p className="mb-[clamp(20px,3vw,40px)] flex items-center gap-3 font-heading text-[0.82rem] font-bold tracking-[0.18em] uppercase">
+      {num && (
+        <span className="text-[1.6rem] leading-none font-bold tracking-normal text-action-text">
+          {num}
+        </span>
+      )}
+      <span aria-hidden="true" className="h-px w-8 bg-line" />
+      <span className="text-ink-soft">{children}</span>
+    </p>
+  );
+}

package/components/icons.tsx

@@ -0,0 +1,51 @@
+/**
+ * Biblioteca de ícones do Breathe. Re-exporta a lib INTEIRA do lucide-react
+ * (centenas de ícones), para você escolher qualquer um ao montar 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.
+ */
+export * from "lucide-react";
+
+import {
+  House, Wind, Activity, Baby, Search, Users, GraduationCap, BookOpen, Info,
+  MapPin, Phone, Mail, MessageCircle, AtSign, Video, Play, Pause, Volume2,
+  Quote, Menu, X, ChevronDown, ArrowUpRight, Globe,
+} from "lucide-react";
+
+/* Aliases semânticos dos ícones usados pela família (os "principais"). */
+export const IconHome = House;
+export const IconWind = Wind;
+export const IconActivity = Activity;
+export const IconBaby = Baby;
+export const IconSearch = Search;
+export const IconUsers = Users;
+export const IconGraduationCap = GraduationCap;
+export const IconBook = BookOpen;
+export const IconInfo = Info;
+export const IconMapPin = MapPin;
+export const IconPhone = Phone;
+export const IconMail = Mail;
+export const IconMessage = MessageCircle;
+export const IconInstagram = AtSign;
+export const IconVideo = Video;
+export const IconPlay = Play;
+export const IconPause = Pause;
+export const IconVolume2 = Volume2;
+export const IconQuote = Quote;
+export const IconMenu = Menu;
+export const IconX = X;
+export const IconChevronDown = ChevronDown;
+export const IconArrowUpRight = ArrowUpRight;
+export const IconGlobe = Globe;
+
+/* Mapa dos usados (principais) — nome → componente. */
+export const used = {
+  Home: IconHome, Wind: IconWind, Activity: IconActivity, Baby: IconBaby,
+  Search: IconSearch, Users: IconUsers, GraduationCap: IconGraduationCap,
+  Book: IconBook, Info: IconInfo, MapPin: IconMapPin, Phone: IconPhone,
+  Mail: IconMail, Message: IconMessage, Instagram: IconInstagram,
+  Video: IconVideo, Play: IconPlay, Pause: IconPause, Volume2: IconVolume2,
+  Quote: IconQuote, Menu: IconMenu, X: IconX, ChevronDown: IconChevronDown,
+  ArrowUpRight: IconArrowUpRight, Globe: IconGlobe,
+};

package/components/marks/creeta.tsx

@@ -0,0 +1,68 @@
+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.
+ */
+export const CREETA_COLORS = {
+  ondaMedia: "#3B9BAF",
+  arco: "#266675",
+  ondaClara: "#63CACD",
+  ponto: "#A2158A",
+} as const;
+
+type SymbolProps = {
+  /** Lado em px (caixa quadrada 86 × 86). */
+  size?: number;
+  /** Cor única para todas as partes (ex.: "#fff" sobre painel escuro). Padrão: as cores da marca. */
+  color?: string;
+  className?: string;
+  title?: string;
+};
+
+export function CreetaSymbol({ size = 48, color, className, title = "Creeta" }: SymbolProps) {
+  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")} />
+    </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?: string;
+  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  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). */
+export const CREETA_LOCKUP = { wordmarkPerSymbol: 0.469, symbolSide: "left" } as const;
+
+/** Caixa justa ao desenho das letras: 116.66 × 27.53. */
+export function CreetaWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "creeta" }: WordmarkProps) {
+  return (
+    <svg
+      viewBox="0 0 116.66 27.53"
+      fill="none"
+      role="img"
+      aria-label={title}
+      className={className}
+      style={{ height, width: "auto", aspectRatio: "116.66 / 27.53", display: "block", ...style }}
+    >
+      <path d="M9.99069 27.532C12.3507 27.532 14.5533 26.6667 16.244 25.448C17.1493 24.66 17.3067 23.4027 16.6773 22.536C15.8907 21.5934 14.592 21.436 13.7267 22.1027C12.704 22.8507 11.4067 23.3626 9.99069 23.3626C6.80536 23.3626 4.16934 20.7667 4.16934 17.7387C4.16934 14.708 6.80536 12.0747 9.99069 12.0747C11.4454 12.0747 12.704 12.584 13.7267 13.3334C14.632 14.0414 15.8907 13.884 16.6773 12.9387C17.3067 12.0747 17.1493 10.736 16.244 10.0293C14.5533 8.72931 12.3507 7.86532 9.99069 7.86532C4.56269 7.90532 0 12.2694 0 17.7387C0 23.1267 4.56269 27.532 9.99069 27.532ZM33.8654 7.90536C31.8987 7.86536 30.208 8.57202 28.9094 9.43869C28.6347 9.63602 28.3201 9.95068 28.0841 10.2253V9.95067C28.0841 8.808 27.1001 7.90536 25.9201 7.90536C24.7801 7.90536 23.836 8.808 23.836 9.95067V25.448C23.836 26.588 24.7801 27.532 25.9201 27.532C27.1001 27.532 28.0841 26.588 28.0841 25.448V17.9747C28.2801 17.424 28.752 15.9294 29.696 14.6694C30.168 13.9227 30.7587 13.2547 31.5053 12.7813C32.1733 12.2693 32.96 12.0347 33.8654 12.0347C35.0454 12.0347 35.9494 11.0507 35.9494 9.95067C35.9494 8.808 35.0454 7.90536 33.8654 7.90536ZM47.3561 27.532C50.1494 27.532 52.4693 26.7054 54.3973 24.936C55.3013 24.1107 54.908 22.9294 54.3973 22.38C53.8853 21.7507 52.2733 21.632 51.4467 22.496C50.464 23.2453 48.7721 23.5987 47.3561 23.4813C45.9801 23.3627 44.4067 22.6547 43.58 21.7107C42.872 21.0414 42.44 20.02 42.2427 19.1147H54.7507C55.8521 19.1147 56.6787 18.484 56.796 17.5414C56.836 17.4627 56.836 17.2666 56.836 17.188V16.9906C56.5213 11.6813 52.4694 7.86532 47.3561 7.86532C41.9681 7.86532 37.7987 12.348 37.76 17.6986C37.7987 23.048 41.9681 27.492 47.3561 27.532ZM47.3561 11.6027C50.7787 11.8774 52.784 14.1987 53.1773 15.772H42.0467C42.3613 14.1587 44.0134 11.76 47.3561 11.6027ZM71.3094 27.532C74.1027 27.532 76.4227 26.7054 78.3507 24.936C79.2547 24.1107 78.8614 22.9294 78.3507 22.38C77.8387 21.7507 76.2267 21.632 75.4 22.496C74.4173 23.2453 72.7254 23.5987 71.3094 23.4813C69.9334 23.3627 68.36 22.6547 67.5333 21.7107C66.8253 21.0414 66.3934 20.02 66.196 19.1147H78.704C79.8054 19.1147 80.6307 18.484 80.7494 17.5414C80.788 17.4627 80.788 17.2666 80.788 17.188V16.9906C80.4734 11.6813 76.4227 7.86532 71.3094 7.86532C65.9214 7.86532 61.752 12.348 61.712 17.6986C61.752 23.048 65.9214 27.492 71.3094 27.532ZM71.3094 11.6027C74.732 11.8774 76.7373 14.1987 77.1307 15.772H66C66.3147 14.1587 67.9667 11.76 71.3094 11.6027ZM92.116 7.86532H91.1333V2.16265C91.1333 0.943981 90.1893 1.79171e-05 88.9693 1.79171e-05C87.7507 1.79171e-05 86.7667 0.943981 86.7667 2.16265V7.86532H85.6267C84.4067 7.86532 83.4627 8.80798 83.4627 10.0293C83.4627 11.208 84.4067 12.192 85.6267 12.192H86.7667V23.1667C86.7667 25.5653 88.7333 27.532 91.1333 27.532C92.352 27.532 93.296 26.588 93.296 25.3694C93.296 24.148 92.352 23.1667 91.1333 23.1667V12.192H92.116C93.296 12.192 94.3187 11.208 94.3187 10.0293C94.3187 8.80798 93.296 7.86532 92.116 7.86532ZM116.66 9.98934C116.66 8.80801 115.716 7.86532 114.575 7.86532C113.552 7.86532 112.765 8.61331 112.529 9.59598C111.035 8.53465 109.265 7.86532 107.299 7.86532C104.624 7.86532 102.303 9.00533 100.612 10.8147C98.92 12.584 97.9374 15.024 97.9374 17.7387C97.9374 20.4134 98.92 22.8506 100.612 24.66C102.303 26.4293 104.624 27.532 107.299 27.532C109.265 27.532 111.035 26.9027 112.529 25.8414C112.765 26.784 113.552 27.532 114.575 27.532C115.716 27.532 116.66 26.588 116.66 25.448V17.7387V9.98934ZM110.956 21.7893C110.012 22.772 108.675 23.324 107.299 23.324C105.883 23.324 104.545 22.772 103.64 21.7893C102.696 20.7667 102.145 19.3507 102.145 17.7387C102.145 16.0867 102.696 14.6693 103.64 13.6867C104.545 12.6253 105.883 12.0747 107.299 12.0747C108.675 12.0747 110.012 12.6253 110.956 13.6867C111.9 14.6693 112.491 16.0867 112.491 17.7387C112.491 19.3507 111.9 20.7667 110.956 21.7893Z" fill={color} />
+    </svg>
+  );
+}

package/components/marks/ttcab.tsx

@@ -0,0 +1,64 @@
+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.
+ */
+type SymbolProps = {
+  /** Largura em px; a altura segue a proporção (136:126). */
+  size?: number;
+  /** Cor única (ex.: "currentColor" ou "#fff" sobre painel escuro). Padrão: o laranja da marca. */
+  color?: string;
+  className?: string;
+  title?: string;
+};
+
+export const TTCAB_ORANGE = "#F6A22A";
+
+export function TtcabSymbol({ size = 48, color = TTCAB_ORANGE, className, title = "TTCAB" }: SymbolProps) {
+  return (
+    <svg width={size} height={Math.round((size * 126) / 136)} viewBox="0 0 136 126" fill="none" role="img" aria-label={title} className={className}>
+      <path d="M56.1003 59.9408C49.923 62.9355 42.4856 60.3555 39.4923 54.1782C36.5003 47.9995 39.0816 40.5648 45.2603 37.5688C51.439 34.5755 58.8736 37.1541 61.867 43.3328C64.8616 49.5101 62.2776 56.9475 56.1003 59.9408Z" fill={color} />
+      <path d="M130.154 82.0699C124.045 92.3605 114.702 100.754 103.696 105.482C88.4651 112.023 70.3385 111.422 55.5745 103.886C50.1491 101.117 46.2331 96.8285 43.5918 91.3392C41.2118 93.7205 43.0038 101.131 44.0011 104.263C39.7825 100.318 39.7931 94.0712 40.1371 90.0405C40.4811 86.0072 41.3998 81.9432 40.7158 77.9552C39.0878 68.4659 28.9491 62.0272 27.7838 52.4699C26.8545 44.8499 31.9678 37.6352 31.8651 29.9592C31.8198 26.5925 29.6825 22.5139 26.3465 22.9605C24.6518 23.1885 23.3465 24.5565 22.3758 25.9645C15.0945 36.5219 19.1585 51.5165 13.4865 63.0192C15.2545 51.0005 12.1105 37.7979 18.0851 27.2205C20.3718 23.1739 23.8091 19.9272 26.7265 16.3085C29.6425 12.6912 32.1438 8.36319 31.9718 3.71919C31.9211 2.34719 31.4891 0.788528 30.2425 0.21386C28.7358 -0.480804 27.0531 0.645851 25.8118 1.74586C1.63448 23.1725 -7.66685 59.0672 7.05715 88.3592C11.8145 97.8232 18.6931 106.247 27.2065 112.574C45.8771 126.449 71.8345 129.854 93.4505 121.266C115.068 112.678 131.612 92.3872 135.67 69.4832C134.366 73.8925 132.498 78.1205 130.154 82.0699Z" fill={color} />
+      <path d="M79.5654 101.119C81.2107 101.379 82.8641 101.567 84.5214 101.618C102.456 102.132 117.573 89.6429 125.523 74.5256C120.697 78.7883 114.387 80.5456 108.573 82.1603C96.8347 85.4216 85.3561 79.3149 79.9441 68.1803L80.2374 68.7856C78.1374 64.4643 74.2254 61.6056 69.8974 60.7083C66.8934 60.0789 63.6841 60.4016 60.7187 61.8349C53.5654 65.2923 50.5894 73.9176 53.9894 81.2029C54.1281 81.4856 55.4654 83.8643 55.8627 84.5989C61.3974 93.3069 70.0601 99.0829 79.5654 101.119Z" fill={color} />
+    </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?: string;
+  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  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). */
+export const TTCAB_LOCKUP = { wordmarkPerSymbol: 0.557, symbolSide: "right" } as const;
+
+/** Caixa justa ao desenho das letras: 149.75 × 43.67. */
+export function TtcabWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "TTCAB" }: WordmarkProps) {
+  return (
+    <svg
+      viewBox="0 21.36 149.75 43.67"
+      fill="none"
+      role="img"
+      aria-label={title}
+      className={className}
+      style={{ height, width: "auto", aspectRatio: "149.75 / 43.67", display: "block", ...style }}
+    >
+      <path d="M11.8373 64.2444C10.0853 64.2444 8.69733 62.8551 8.69733 61.1044V31.0871H3.14C1.388 31.0871 0 29.6991 0 27.9471V25.2897C0 23.5377 1.388 22.1497 3.14 22.1497H24.6413C26.3933 22.1497 27.7813 23.5377 27.7813 25.2897V27.9471C27.7813 29.6991 26.3933 31.0871 24.6413 31.0871H19.084V61.1044C19.084 62.8551 17.696 64.2444 15.944 64.2444H11.8373Z" fill={color} />
+      <path d="M40.9432 64.2444C39.1912 64.2444 37.8032 62.8551 37.8032 61.1044V31.0871H32.2459C30.4939 31.0871 29.1059 29.6991 29.1059 27.9471V25.2897C29.1059 23.5377 30.4939 22.1497 32.2459 22.1497H53.7472C55.4979 22.1497 56.8872 23.5377 56.8872 25.2897V27.9471C56.8872 29.6991 55.4979 31.0871 53.7472 31.0871H48.1899V61.1044C48.1899 62.8551 46.8006 64.2444 45.0499 64.2444H40.9432Z" fill={color} />
+      <path d="M75.5859 65.0297C63.9299 65.0297 58.3739 58.9297 58.3739 43.227C58.3739 25.7723 65.0166 21.363 75.3446 21.363C78.7259 21.363 81.6259 21.967 83.8606 22.9337C85.3712 23.5977 86.0952 25.471 85.3099 27.0403L84.1019 29.4563C83.3779 31.027 81.5046 31.7523 79.8739 31.027C78.7259 30.543 77.3979 30.2417 76.0086 30.2417C71.1166 30.2417 70.0299 31.8123 70.0299 42.5617C70.0299 54.339 72.2046 56.091 76.0086 56.091C77.6406 56.091 79.0286 55.7283 80.2366 55.1243C81.8072 54.339 83.6792 54.883 84.5846 56.3937L85.7926 58.4457C85.9739 58.6883 86.2166 59.4723 86.2166 60.0163C86.2166 61.1043 85.6726 62.191 84.7059 62.795C82.5312 64.123 79.6926 65.0297 75.5859 65.0297Z" fill={color} />
+      <path d="M123.659 64.2444C121.907 64.2444 120.519 62.8551 120.519 61.1044V25.2897C120.519 23.5377 121.907 22.1497 123.659 22.1497H137.793C143.59 22.1497 148.301 24.8657 148.301 32.7177C148.301 37.3684 147.033 40.087 142.745 41.7777C146.61 42.5617 149.75 45.6431 149.75 51.6217C149.75 60.2591 146.066 64.2444 136.645 64.2444H123.659ZM130.786 38.5164H134.229C136.705 38.5164 137.793 37.0057 137.793 34.4097C137.793 31.8724 136.523 30.7257 134.169 30.7257H130.786V38.5164ZM130.786 55.6684H134.591C137.127 55.6684 138.397 54.2791 138.397 51.0777C138.397 48.4817 137.611 46.7297 134.47 46.7297H130.786V55.6684Z" fill={color} />
+      <path d="M118.945 61.2244L109.644 25.1684C109.161 23.4164 107.531 22.1484 105.719 22.1484H101.309C99.4987 22.1484 97.8067 23.4164 97.3241 25.1684L87.4187 61.2244C86.9961 62.7337 88.1427 64.2444 89.7134 64.2444H94.1827C95.9947 64.2444 97.5654 63.0364 97.9881 61.1644L98.8934 57.2391L102.156 42.5017C102.759 39.9057 103.061 36.7644 103.181 35.1937H103.243C103.303 36.7644 103.604 39.9057 104.148 42.5017L107.168 57.2391L107.953 61.1644C108.315 62.8551 109.947 64.2444 111.759 64.2444H116.589C118.16 64.2444 119.368 62.7337 118.945 61.2244Z" fill={color} />
+    </svg>
+  );
+}

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Breathe DS \u2014 design system da fam\u00edlia Cuidado Global (creeta, ttcab, metodorta). Tokens tematiz\u00e1veis + componentes React.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "theme.css",
+    "tokens",
+    "components",
+    "README.md"
+  ],
+  "exports": {
+    "./theme.css": "./theme.css",
+    "./tokens/ttcab.css": "./tokens/ttcab.css",
+    "./tokens/creeta.css": "./tokens/creeta.css",
+    "./components/Accordion": "./components/Accordion.tsx",
+    "./components/PageVideoHero": "./components/PageVideoHero.tsx",
+    "./components/Footer": "./components/Footer.tsx",
+    "./components/Button": "./components/Button.tsx",
+    "./components/Container": "./components/Container.tsx",
+    "./components/SectionKicker": "./components/SectionKicker.tsx",
+    "./components/Card": "./components/Card.tsx",
+    "./components/PillList": "./components/PillList.tsx",
+    "./components/Header": "./components/Header.tsx",
+    "./components/BottomNav": "./components/BottomNav.tsx",
+    "./components/BreatheMark": "./components/BreatheMark.tsx",
+    "./components/Cortina": "./components/Cortina.tsx",
+    "./components/Lockup": "./components/Lockup.tsx",
+    "./tokens/neutral.css": "./tokens/neutral.css",
+    "./components/icons": "./components/icons.tsx",
+    "./components/AnchorNav": "./components/AnchorNav.tsx",
+    "./components/marks/ttcab": "./components/marks/ttcab.tsx",
+    "./components/marks/creeta": "./components/marks/creeta.tsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^1.63.0"
+  }
+}