@breathe-ds/ui 0.0.0-stage → 0.1.0

package/components/Footer.tsx

@@ -0,0 +1,115 @@
+import type { ReactNode } from "react";
+
+export type FooterColumn = { title: ReactNode; items: ReactNode[] };
+
+type Props = {
+  /** Marca (passe o seu <img>/logo). */
+  logo: ReactNode;
+  /** Frase/assinatura sob a marca. */
+  tagline?: ReactNode;
+  /** Colunas de navegação (o consumidor passa seus próprios <Link>). */
+  columns: FooterColumn[];
+  /** Bloco de contato/endereço (título + linhas + ações como "Ver no mapa"). */
+  contact: { title?: ReactNode; lines: ReactNode[]; actions?: ReactNode };
+  /** Bloco opcional em destaque (ex.: "Plano de saúde: atendemos por reembolso"). */
+  notice?: ReactNode;
+  /** Linha legal (CNPJ, copyright…). */
+  legal?: ReactNode;
+  /** Chips de contato (telefone/WhatsApp/e-mail/Instagram) — o consumidor passa os links. */
+  chips?: ReactNode[];
+  /** Seletor de idioma (slot). */
+  localeSwitcher?: ReactNode;
+};
+
+/**
+ * Footer da família Cuidado Global. Cartão grande arredondado em `surface`,
+ * com marca + navegação + contato, um bloco opcional em destaque, e a barra
+ * inferior com legal, chips de contato e idiomas. 100% data-driven e sem
+ * dependência de app (Link/ícones/logo vêm por props). Tokens: ink/ink-soft
+ * sobre surface, hairlines `line`.
+ */
+export function Footer({
+  logo,
+  tagline,
+  columns,
+  contact,
+  notice,
+  legal,
+  chips,
+  localeSwitcher,
+}: Props) {
+  return (
+    <footer className="px-3 pb-3 md:px-4 md:pb-4">
+      <div className="mx-auto overflow-hidden rounded-[clamp(24px,3vw,36px)] bg-surface px-[clamp(24px,5vw,72px)] py-[clamp(40px,5vw,64px)] text-ink">
+        {/* Topo: marca · colunas · contato */}
+        <div className="grid gap-[clamp(32px,5vw,64px)] lg:grid-cols-[1.2fr_1.4fr_1fr]">
+          <div>
+            <div className="mb-5">{logo}</div>
+            {tagline && (
+              <p className="max-w-[28ch] text-[1.02rem] leading-[1.5] text-ink-soft">
+                {tagline}
+              </p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-3">
+            {columns.map((col, i) => (
+              <div key={i} className={columns.length === 1 ? "col-span-2" : ""}>
+                <p className="mb-4 font-body text-[0.78rem] font-semibold tracking-[0.18em] text-ink-soft uppercase">
+                  {col.title}
+                </p>
+                {/* links herdam hover-underline: sublinhado some→aparece suave,
+                    agnóstico ao que o site passa (<a> ou <Link>) */}
+                <ul className="flex flex-col gap-3 [&_a]:underline [&_a]:decoration-transparent [&_a]:underline-offset-[5px] [&_a]:transition-[text-decoration-color] [&_a]:duration-200 [&_a:hover]:decoration-current">
+                  {col.items.map((item, j) => (
+                    <li key={j} className="text-[1.02rem] leading-snug text-ink">
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+
+          <div>
+            {contact.title && (
+              <p className="mb-4 font-body text-[0.78rem] font-semibold tracking-[0.18em] text-ink-soft uppercase">
+                {contact.title}
+              </p>
+            )}
+            <div className="space-y-2 text-[1.02rem] leading-[1.5] text-ink-soft">
+              {contact.lines.map((line, i) => (
+                <p key={i}>{line}</p>
+              ))}
+            </div>
+            {contact.actions && <div className="mt-4">{contact.actions}</div>}
+          </div>
+        </div>
+
+        {/* Bloco opcional em destaque */}
+        {notice && (
+          <div className="mt-[clamp(32px,4vw,48px)] rounded-2xl bg-ink/[0.04] p-[clamp(24px,3.5vw,44px)]">
+            {notice}
+          </div>
+        )}
+
+        {/* Barra inferior: legal + chips */}
+        <div className="mt-[clamp(32px,4vw,48px)] flex flex-col gap-5 border-t border-line pt-[clamp(20px,2.5vw,28px)] md:flex-row md:items-center md:justify-between">
+          {legal && <p className="text-sm text-ink-soft">{legal}</p>}
+          {chips && chips.length > 0 && (
+            <div className="flex flex-wrap items-center gap-2.5">
+              {chips.map((chip, i) => (
+                <span key={i}>{chip}</span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Idiomas */}
+        {localeSwitcher && (
+          <div className="mt-[clamp(20px,2.5vw,28px)]">{localeSwitcher}</div>
+        )}
+      </div>
+    </footer>
+  );
+}

package/components/Header.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useState, type ReactNode, type ElementType } from "react";
+
+export type NavChild = {
+  label: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  description?: ReactNode;
+};
+export type NavItem = {
+  label: ReactNode;
+  href?: string;
+  active?: boolean;
+  /** Ícone antes do rótulo (ex.: casa no "Início"). */
+  icon?: ReactNode;
+  /** Só o ícone aparece; o rótulo fica para leitor de tela (padrão dos sites: "Início" é a casa). */
+  iconOnly?: boolean;
+  children?: NavChild[];
+  /** Link final do dropdown. Seta → (vai para outra página do site); com
+   *  `external` vira ↗ (sai para outro site), como nos demais componentes. */
+  seeAll?: { label: ReactNode; href: string; external?: boolean };
+};
+
+type Props = {
+  /** Marca (passe o seu logo, já com link para a home se quiser). */
+  logo: ReactNode;
+  items: NavItem[];
+  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  /** CTA à direita (ex.: Agendar/WhatsApp). */
+  cta?: ReactNode;
+  /** Seletor de idioma (slot). */
+  localeSwitcher?: ReactNode;
+};
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      className={`h-4 w-4 transition-transform duration-200 motion-reduce:transition-none ${open ? "rotate-180" : ""}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
+}
+
+const linkCls = (active?: boolean) =>
+  `relative flex min-h-11 items-center gap-1.5 font-heading text-[0.95rem] font-semibold whitespace-nowrap text-ink underline decoration-2 underline-offset-[6px] ${
+    active ? "decoration-ink" : "decoration-transparent hover:decoration-ink/40"
+  } transition-[text-decoration-color] duration-150 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink`;
+
+function Dropdown({ item, L }: { item: NavItem; L: ElementType }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node)) setOpen(false);
+      }}
+      onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
+    >
+      <span className="flex items-center gap-0.5">
+        {item.href ? (
+          <L href={item.href} className={linkCls(item.active)}>
+            {item.label}
+          </L>
+        ) : (
+          <span className={linkCls(item.active)}>{item.label}</span>
+        )}
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-label="Abrir submenu"
+          onClick={() => setOpen((o) => !o)}
+          className="flex min-h-11 items-center rounded-md px-0.5 text-ink/70 transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+        >
+          <Chevron open={open} />
+        </button>
+      </span>
+
+      <div className={`absolute top-full left-0 z-50 pt-2 ${open ? "" : "pointer-events-none"}`}>
+        <ul
+          className={`w-[19rem] list-none rounded-2xl border border-line bg-surface p-2 shadow-[0_18px_40px_-16px_rgba(20,71,83,0.4)] transition duration-150 ease-out motion-reduce:transition-none ${
+            open ? "visible scale-100 opacity-100" : "invisible -translate-y-1 scale-[0.98] opacity-0"
+          }`}
+        >
+          {item.children!.map((c, i) => (
+            <li key={i}>
+              <L
+                href={c.href}
+                onClick={() => setOpen(false)}
+                className="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              >
+                {c.icon && (
+                  <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-ink/[0.08] text-ink">
+                    {c.icon}
+                  </span>
+                )}
+                <span>
+                  <span className="block font-heading text-[0.95rem] font-semibold text-ink">
+                    {c.label}
+                  </span>
+                  {c.description && (
+                    <span className="mt-0.5 block text-sm text-ink-soft">{c.description}</span>
+                  )}
+                </span>
+              </L>
+            </li>
+          ))}
+          {item.seeAll && (
+            <li className="mt-1 border-t border-line pt-1">
+              <L
+                href={item.seeAll.href}
+                onClick={() => setOpen(false)}
+                className="flex items-center justify-between gap-2 rounded-xl px-3.5 py-2.5 font-heading text-[0.92rem] font-semibold text-ink transition-colors hover:bg-ink/[0.05]"
+              >
+                {item.seeAll.label}
+                <svg aria-hidden="true" viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+                  {item.seeAll.external ? <path d="M7 17 17 7M9 7h8v8" /> : <path d="M5 12h14M13 6l6 6-6 6" />}
+                </svg>
+              </L>
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Header da família Cuidado Global. No desktop (lg+): marca + nav com dropdowns
+ * (hover/teclado, ícones nos subitens) + idioma + CTA. No mobile: marca +
+ * idioma + CTA (a navegação vai para o BottomNav). Deps injetáveis: `logo`,
+ * `cta`, `localeSwitcher` por slot; o `Link` do app por `linkComponent`.
+ */
+export function Header({ logo, items, linkComponent, cta, localeSwitcher }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <header className="sticky top-0 z-50 bg-surface/90 backdrop-blur">
+      <div className="mx-auto flex h-20 w-full max-w-[1600px] items-center justify-between gap-3 px-4 md:px-6">
+        <div className="shrink-0">{logo}</div>
+
+        <nav aria-label="Principal" className="hidden items-center gap-6 lg:flex xl:gap-7">
+          {items.map((item, i) =>
+            item.children?.length ? (
+              <Dropdown key={i} item={item} L={L} />
+            ) : (
+              <L key={i} href={item.href} aria-current={item.active ? "page" : undefined} className={linkCls(item.active)}>
+                {item.icon && <span aria-hidden="true" className="flex">{item.icon}</span>}
+                {item.iconOnly ? <span className="sr-only">{item.label}</span> : item.label}
+              </L>
+            )
+          )}
+        </nav>
+
+        <div className="flex items-center gap-2">
+          {localeSwitcher}
+          {cta}
+        </div>
+      </div>
+    </header>
+  );
+}

package/components/Lockup.tsx

@@ -0,0 +1,184 @@
+import type { CSSProperties, ReactNode } from "react";
+import { BreatheMark } from "./BreatheMark";
+
+/**
+ * Arranjos do logo (sistema de branding flexível da família Cuidado Global).
+ * - `stacked`     empilhado: símbolo em cima, nome embaixo — perfis, splash, pôster.
+ * - `horizontal`  símbolo + nome lado a lado (+ tagline) — cabeçalho, documento.
+ * - `wordmark`    só texto (nome + tagline) — anúncio, quando a leitura é essencial.
+ * - `symbol`      só o símbolo — favicon, ícone de app, marca d'água.
+ * - `merged`      fundido: símbolo preenchido com o nome dentro — avatar, embalagem.
+ */
+export type LockupVariant = "stacked" | "horizontal" | "wordmark" | "symbol" | "merged";
+type Size = "sm" | "md" | "lg";
+
+/* Nome em `font-heading`; símbolo ~1.3× o corpo do nome (o anel é aberto e
+   "lê" mais leve, então pede um tamanho a mais pra fechar em harmonia).
+   A caixa do BreatheMark é justa ao glifo: o vão entre símbolo e nome é só o gap.
+   `md` = header dos sites (símbolo de 44px, medido no creeta e no ttcab). */
+const NAME: Record<Size, string> = { sm: "text-2xl", md: "text-[2.125rem]", lg: "text-[2.7rem]" };
+const TAG: Record<Size, string> = { sm: "text-[0.78rem]", md: "text-sm", lg: "text-base" };
+const MARK: Record<Size, number> = { sm: 32, md: 44, lg: 56 };
+const GAP: Record<Size, string> = { sm: "gap-2", md: "gap-2.5", lg: "gap-3" };
+const NAME_PX: Record<Size, number> = { sm: 24, md: 34, lg: 43 };
+const TILE: Record<Size, string> = { sm: "size-16 text-[0.7rem]", md: "size-24 text-[0.95rem]", lg: "size-32 text-[1.3rem]" };
+
+type Props = {
+  variant?: LockupVariant;
+  /** Nome da marca (cada site passa o seu). */
+  name?: string;
+  tagline?: ReactNode;
+  /** Símbolo customizado; por padrão o BreatheMark (anel + ponto). Um <svg>
+   *  injetado recebe a altura do tamanho (`size`); a largura segue a proporção. */
+  logo?: ReactNode;
+  /** Wordmark desenhado (svg) no lugar do nome em texto. `merged` ignora
+   *  (lá o nome é texto). */
+  wordmark?: ReactNode;
+  /** Altura do wordmark como fração da altura do símbolo, do manual da marca
+   *  (ex.: `TTCAB_LOCKUP.wordmarkPerSymbol`). Chega ao svg por `--cg-wordmark`. */
+  wordmarkRatio?: number;
+  /** Lado do símbolo no horizontal. Padrão `left` (creeta e os demais); o TTCAB
+   *  é `right` (`TTCAB_LOCKUP.symbolSide`). */
+  symbolSide?: "left" | "right";
+  size?: Size;
+  /** O símbolo "respira"? Padrão `false` — logo de cabeçalho não fica animando. */
+  animated?: boolean;
+  /** Entrada ao montar, como no header do novo.creeta: o símbolo chega
+   *  primeiro, depois o nome, depois a tagline. Respeita prefers-reduced-motion
+   *  (vira só um fade curto). Remonte (key) para repetir. */
+  entrance?: boolean;
+  /** Atraso da entrada em ms (ex.: esperar a Cortina subir). */
+  entranceDelay?: number;
+  className?: string;
+};
+
+/**
+ * Lockup — monta o logo da família num dos arranjos acima. Neutro por tokens:
+ * nome/símbolo em `ink`, tagline em `ink-soft`; a cor real vem de cada app.
+ * Tipografia é fixa da família (Quicksand no nome, Figtree na tagline).
+ */
+export function Lockup({
+  variant = "horizontal",
+  name = "Breathe",
+  tagline,
+  logo,
+  wordmark,
+  wordmarkRatio = 0.5,
+  symbolSide = "left",
+  size = "md",
+  animated = false,
+  entrance = false,
+  entranceDelay = 0,
+  className = "",
+}: Props) {
+  const entranceCls = entrance ? " cg-lockup--entrance" : "";
+  const entranceStyle = entrance ? ({ "--cg-entrance-delay": `${entranceDelay}ms` } as CSSProperties) : undefined;
+  // No horizontal com tagline, o símbolo cobre o bloco inteiro (nome + tagline),
+  // virando um "bookend" proporcional — não só a altura do nome.
+  const markPx = variant === "horizontal" && tagline && symbolSide !== "right" ? Math.round(NAME_PX[size] * 2.3) : MARK[size];
+  const mark = (
+    <span className="cg-lockup__mark inline-flex text-ink [&>svg]:h-[var(--mark)] [&>svg]:w-auto" style={{ "--mark": `${markPx}px` } as CSSProperties}>
+      {logo ?? <BreatheMark size={markPx} animated={animated} title={name} />}
+    </span>
+  );
+  // O wordmark segue o símbolo-base do tamanho (não o "bookend" do horizontal
+  // com tagline), como no logotipo assinado do creeta: nome ≈ 0.26 do símbolo grande.
+  const nameEl = (
+    <span
+      className={`cg-lockup__name font-heading font-bold leading-none tracking-[-0.02em] text-ink ${NAME[size]}`}
+      style={wordmark ? ({ "--cg-wordmark": `${Math.round(MARK[size] * wordmarkRatio * 10) / 10}px` } as CSSProperties) : undefined}
+    >
+      {wordmark ?? name}
+    </span>
+  );
+  // `block`: como item inline, a entrelinha do pai (1.5 do body) mandava na
+  // linha e a tagline de duas linhas ficava folgada demais.
+  const tagEl = tagline ? (
+    <span className={`cg-lockup__tag block font-body leading-[1.3] text-ink-soft ${TAG[size]}`}>{tagline}</span>
+  ) : null;
+
+  if (variant === "symbol") {
+    return (
+      <span className={`inline-flex text-ink ${className}`} role="img" aria-label={name}>
+        {mark}
+      </span>
+    );
+  }
+
+  if (variant === "wordmark") {
+    return (
+      <span className={`inline-flex flex-col${entranceCls} ${className}`} style={entranceStyle}>
+        {entrance && <style>{ENTRANCE_CSS}</style>}
+        {nameEl}
+        {tagEl && <span className="mt-1">{tagEl}</span>}
+      </span>
+    );
+  }
+
+  if (variant === "stacked") {
+    return (
+      <span className={`inline-flex flex-col items-center text-center${entranceCls} ${className}`} style={entranceStyle}>
+        {entrance && <style>{ENTRANCE_CSS}</style>}
+        {mark}
+        <span className="mt-4 flex flex-col items-center">
+          {nameEl}
+          {tagEl && <span className="mt-1.5">{tagEl}</span>}
+        </span>
+      </span>
+    );
+  }
+
+  if (variant === "merged") {
+    // Fundido: nome dentro de um disco preenchido (ink). Avatar / ícone de app.
+    // Nomes curtos (creeta, ttcab) fecham melhor; nome longo reduz o corpo.
+    return (
+      <span
+        className={`inline-flex items-center justify-center whitespace-nowrap rounded-full bg-ink px-2 text-center font-heading font-bold leading-none tracking-[-0.01em] text-surface ${TILE[size]} ${className}`}
+        role="img"
+        aria-label={name}
+      >
+        {name}
+      </span>
+    );
+  }
+
+  // horizontal (padrão). Símbolo à direita (TTCAB): encosta no nome, na mesma
+  // linha; a tagline fica embaixo (senão o símbolo iria parar depois da tagline).
+  if (symbolSide === "right") {
+    return (
+      <span className={`inline-flex flex-col items-start${entranceCls} ${className}`} style={entranceStyle}>
+        {entrance && <style>{ENTRANCE_CSS}</style>}
+        <span className={`inline-flex items-center ${GAP[size]}`}>
+          {nameEl}
+          {mark}
+        </span>
+        {tagEl && <span className="mt-1">{tagEl}</span>}
+      </span>
+    );
+  }
+  return (
+    <span className={`inline-flex items-center ${GAP[size]}${entranceCls} ${className}`} style={entranceStyle}>
+      {entrance && <style>{ENTRANCE_CSS}</style>}
+      {mark}
+      <span className="flex min-w-0 flex-col">
+        {nameEl}
+        {tagEl && <span className="mt-1">{tagEl}</span>}
+      </span>
+    </span>
+  );
+}
+
+/* Entrada: símbolo (escala + giro leve) → nome (desliza da esquerda) → tagline.
+   Mesmo vocabulário da Cortina; com movimento reduzido fica só um fade curto. */
+const ENTRANCE_CSS = `
+.cg-lockup--entrance .cg-lockup__mark{ animation: cg-lockup-mark 500ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) var(--cg-entrance-delay,0ms) both; }
+.cg-lockup--entrance .cg-lockup__name{ animation: cg-lockup-name 420ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) calc(var(--cg-entrance-delay,0ms) + 420ms) both; }
+.cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-tag 360ms ease calc(var(--cg-entrance-delay,0ms) + 700ms) both; }
+@keyframes cg-lockup-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
+@keyframes cg-lockup-name{ from{ opacity:0; transform:translateX(-8px); } }
+@keyframes cg-lockup-tag{ from{ opacity:0; transform:translateY(4px); } }
+@media (prefers-reduced-motion:reduce){
+  .cg-lockup--entrance .cg-lockup__mark, .cg-lockup--entrance .cg-lockup__name, .cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-fade 240ms ease var(--cg-entrance-delay,0ms) both; }
+  @keyframes cg-lockup-fade{ from{ opacity:0; } }
+}
+`;