@gyramais/gyra-design 0.2.33 → 0.2.35

package/dist/emails/balance-sheet-finalized/email-layout.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Layout base de email no padrao do design system Gyra+ Toolbox
+ * (claude design — gyra-toolbox-design-system). Tokens: azul #1256FF
+ * (acao/primary), teal #1FB58A (accent), roxo #7C4EFF (IA/parecer),
+ * neutrals Apple-gray, fonte Inter.
+ *
+ * Reutilizavel: cada email passa titulo, paragrafos, destaques (chips),
+ * um bloco opcional "Parecer de IA" (faixa roxa) e botoes — o HTML
+ * completo (logo, card, tipografia, footer) e' montado aqui.
+ *
+ * Email-safe: tabelas + inline-style (clients ignoram <style> externo,
+ * flexbox e Material Symbols). Gradientes tem fallback solido.
+ */
+export type EmailButton = {
+    label: string;
+    url: string;
+    variant?: 'primary' | 'secondary';
+};
+export type EmailHighlight = {
+    label: string;
+    value: string;
+    /** cor do valor (ex: risco). Default: tinta padrao. */
+    color?: string;
+};
+export type AiParecerTone = 'ok' | 'warn' | 'danger' | 'info';
+export type EmailAiParecer = {
+    /** chip de veredito (ex: "Médio", "Consistente"). */
+    verdict?: string;
+    verdictTone?: AiParecerTone;
+    /** corpo do parecer. */
+    text: string;
+    /** rodape (ex: "GYRA+IA · Confiança 96%"). */
+    footer?: string;
+};
+export type EmailLayoutInput = {
+    preheader?: string;
+    greeting?: string;
+    title: string;
+    paragraphs?: string[];
+    highlights?: EmailHighlight[];
+    /** Faixa "Parecer de IA" (gradiente roxo→azul). */
+    aiParecer?: EmailAiParecer;
+    buttons?: EmailButton[];
+    footerNote?: string;
+};
+export declare function buildEmail(input: EmailLayoutInput): string;

package/dist/emails/balance-sheet-finalized/email-layout.js

@@ -0,0 +1,180 @@
+"use strict";
+/**
+ * Layout base de email no padrao do design system Gyra+ Toolbox
+ * (claude design — gyra-toolbox-design-system). Tokens: azul #1256FF
+ * (acao/primary), teal #1FB58A (accent), roxo #7C4EFF (IA/parecer),
+ * neutrals Apple-gray, fonte Inter.
+ *
+ * Reutilizavel: cada email passa titulo, paragrafos, destaques (chips),
+ * um bloco opcional "Parecer de IA" (faixa roxa) e botoes — o HTML
+ * completo (logo, card, tipografia, footer) e' montado aqui.
+ *
+ * Email-safe: tabelas + inline-style (clients ignoram <style> externo,
+ * flexbox e Material Symbols). Gradientes tem fallback solido.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildEmail = buildEmail;
+const C = {
+    blue: '#1256FF',
+    teal: '#1FB58A',
+    aiPurple: '#7C4EFF',
+    aiPurpleText: '#6635E0',
+    bg: '#F5F5F7',
+    card: '#FFFFFF',
+    fg1: '#1D1D1F',
+    fg2: '#636366',
+    fg3: '#8E8E93',
+    border: '#D2D2D7',
+    borderSubtle: '#E8E8ED',
+    aiCardBg: '#F6F4FF', // flatten do gradiente roxo (fallback Outlook)
+    aiBorder: 'rgba(124,78,255,0.22)',
+};
+const VERDICT = {
+    ok: { bg: '#E8F9ED', color: '#1A7D37' },
+    warn: { bg: '#FFF4E0', color: '#946200' },
+    danger: { bg: '#FFEDEC', color: '#C93430' },
+    info: { bg: '#EBF4FF', color: '#0055D4' },
+};
+const FONT = "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif";
+const LOGO_URL = 'https://gyra-file-prod.s3.us-west-2.amazonaws.com/assets/gyra-logo-color.png';
+const esc = (s) => String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+/**
+ * So' permite http(s). Bloqueia schemes perigosos (javascript:, data:)
+ * que poderiam virar href executavel. URL invalida vira '#'.
+ */
+function safeUrl(url) {
+    try {
+        const u = new URL(String(url));
+        return u.protocol === 'http:' || u.protocol === 'https:' ? u.href : '#';
+    }
+    catch {
+        return '#';
+    }
+}
+function renderButton(btn) {
+    const isPrimary = (btn.variant ?? 'primary') === 'primary';
+    const bg = isPrimary ? C.blue : C.card;
+    const color = isPrimary ? '#FFFFFF' : C.blue;
+    const border = isPrimary ? C.blue : C.border;
+    return `
+    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:8px 8px 0 0;display:inline-block;">
+      <tr>
+        <td style="border-radius:10px;background:${bg};border:1px solid ${border};">
+          <a href="${esc(safeUrl(btn.url))}" target="_blank"
+             style="display:inline-block;padding:12px 22px;font-family:${FONT};font-size:14px;font-weight:600;color:${color};text-decoration:none;border-radius:10px;">
+            ${esc(btn.label)}
+          </a>
+        </td>
+      </tr>
+    </table>`;
+}
+function renderHighlight(h, widthPct) {
+    return `
+    <td width="${widthPct}%" style="padding:6px;" valign="top">
+      <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
+             style="background:#FAFAFA;border:1px solid ${C.borderSubtle};border-radius:12px;">
+        <tr><td style="padding:14px 16px;font-family:${FONT};">
+          <div style="font-size:12px;color:${C.fg2};margin-bottom:4px;">${esc(h.label)}</div>
+          <div style="font-size:22px;font-weight:700;color:${h.color || C.fg1};font-family:'Lexend',${FONT};">${esc(h.value)}</div>
+        </td></tr>
+      </table>
+    </td>`;
+}
+function renderAiParecer(p) {
+    const v = p.verdict
+        ? (() => {
+            const t = VERDICT[p.verdictTone || 'info'];
+            // table/td (Outlook ignora padding/border-radius em <span>).
+            return `<table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;"><tr>
+          <td style="background:${t.bg};border-radius:999px;padding:4px 10px;font-family:${FONT};font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:${t.color};white-space:nowrap;">${esc(p.verdict)}</td></tr></table>`;
+        })()
+        : '';
+    return `
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
+           style="margin:18px 0 4px;background:${C.aiCardBg};border:1px solid ${C.aiBorder};border-radius:12px;">
+      <tr><td style="padding:16px 18px;font-family:${FONT};">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>
+          <td valign="middle" width="28">
+            <div style="width:22px;height:22px;border-radius:50%;background:${C.aiPurple};color:#fff;text-align:center;line-height:22px;font-size:13px;">&#10022;</div>
+          </td>
+          <td valign="middle" style="padding-left:8px;">
+            <span style="font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:${C.aiPurpleText};">Parecer GYRA+IA</span>
+          </td>
+          <td valign="middle" align="right">${v}</td>
+        </tr></table>
+        <p style="margin:10px 0 0;font-size:14px;line-height:1.55;color:${C.fg2};">${esc(p.text)}</p>
+        ${p.footer
+        ? `<div style="margin-top:10px;padding-top:10px;border-top:1px dashed ${C.aiBorder};font-size:11px;color:${C.fg3};">${esc(p.footer)}</div>`
+        : ''}
+      </td></tr>
+    </table>`;
+}
+function buildEmail(input) {
+    const { preheader, greeting, title, paragraphs = [], highlights = [], aiParecer, buttons = [], footerNote, } = input;
+    const highlightWidth = highlights.length
+        ? Math.floor(100 / highlights.length)
+        : 100;
+    const highlightsRow = highlights.length
+        ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0 4px;"><tr>${highlights
+            .map((h) => renderHighlight(h, highlightWidth))
+            .join('')}</tr></table>`
+        : '';
+    const paragraphsHtml = paragraphs
+        .map((p) => `<p style="margin:0 0 14px;font-family:${FONT};font-size:15px;line-height:1.6;color:${C.fg2};">${esc(p)}</p>`)
+        .join('');
+    const buttonsHtml = buttons.length
+        ? `<div style="margin-top:18px;">${buttons.map(renderButton).join('')}</div>`
+        : '';
+    return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>${esc(title)}</title>
+</head>
+<body style="margin:0;padding:0;background:${C.bg};">
+  ${preheader
+        ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${esc(preheader)}</div>`
+        : ''}
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${C.bg};padding:24px 0;">
+    <tr>
+      <td align="center">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px;max-width:92%;">
+          <tr>
+            <td style="padding:8px 4px 20px;">
+              <img src="${LOGO_URL}" alt="GYRA+" height="30" style="height:30px;display:block;" />
+            </td>
+          </tr>
+          <tr>
+            <td style="background:${C.card};border:1px solid ${C.borderSubtle};border-radius:16px;padding:32px;">
+              ${greeting
+        ? `<p style="margin:0 0 6px;font-family:${FONT};font-size:14px;color:${C.fg2};">${esc(greeting)}</p>`
+        : ''}
+              <h1 style="margin:0 0 18px;font-family:'Lexend',${FONT};font-size:23px;line-height:1.3;color:${C.fg1};">${esc(title)}</h1>
+              ${paragraphsHtml}
+              ${highlightsRow}
+              ${aiParecer ? renderAiParecer(aiParecer) : ''}
+              ${buttonsHtml}
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:20px 8px;font-family:${FONT};font-size:12px;line-height:1.5;color:${C.fg3};">
+              ${footerNote
+        ? `<p style="margin:0 0 8px;">${esc(footerNote)}</p>`
+        : ''}
+              <p style="margin:0;">GYRA+ • Esta é uma mensagem automática, não responda este email.</p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}

package/dist/index.css

@@ -10166,7 +10166,6 @@ h6 {
 
 /* CARD STYLE — v2 flat: 1px hairline borders, no shadows */
 .gyramais-table-container.gyramais-table-card-container {
-  overflow: hidden;
   border-radius: 12px;
   border-width: 1px;
   border-color: var(--color-border-secondary);
@@ -10307,7 +10306,6 @@ h6 {
   .gyramais-table-container,
   .gyramais-table-container.gyramais-table-card-container,
   .gyramais-table-container.gyramais-table-bordered-container {
-    overflow-x: auto !important;
     -webkit-overflow-scrolling: touch;
   }
   .gyramais-table-container table {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.33",
+  "version": "0.2.35",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -107,4 +107,4 @@
     "storybook": "8.1.11",
     "tailwindcss": "^3.3.5"
   }
-}
+}