/* global React */
const { useState, useEffect, useRef, useId, useMemo } = React;
/* ============================================================
BEZA LOGO · imagem real da marca
window.BEZA_ASSETS_PATH é definido em cada HTML antes de carregar ui.jsx
============================================================ */
function BezaLogo({ size = 32, withTagline = false, style }) {
const h = size;
const base = window.BEZA_ASSETS_PATH || 'assets';
return (
{withTagline && (
relatórios
)}
);
}
/* ============================================================
ÍCONES · stroke 1.5 · 24x24 · currentColor
============================================================ */
const Icon = {
Instagram: (p) => (
),
YouTube: (p) => (
),
LinkedIn: (p) => (
),
Meta: (p) => (
),
Analytics: (p) => (
),
Up: (p) => (
),
Down: (p) => (
),
Flat: (p) => (
),
Info: (p) => (
),
Heart: (p) => (
),
Comment: (p) => (
),
Bookmark: (p) => (
),
Share: (p) => (
),
Eye: (p) => (
),
Play: (p) => (
),
Users: (p) => (
),
Click: (p) => (
),
Arrow: (p) => (
),
Calendar: (p) => (
),
Sparkle: (p) => (
),
External: (p) => (
),
Threads: (p) => (
),
TikTok: (p) => (
),
};
/* ============================================================
PILL · chip pequeno
============================================================ */
function Pill({ children, tone = 'neutral', icon, style }) {
const tones = {
neutral: { bg: 'var(--accent-soft)', fg: 'var(--text-muted)', bd: 'var(--border)' },
purple: { bg: 'rgba(154,155,229,0.14)', fg: 'var(--accent)', bd: 'rgba(154,155,229,0.30)' },
success: { bg: 'rgba(111,200,120,0.14)', fg: 'var(--success)', bd: 'rgba(111,200,120,0.30)' },
error: { bg: 'rgba(243,77,77,0.12)', fg: 'var(--error)', bd: 'rgba(243,77,77,0.28)' },
warning: { bg: 'rgba(243,174,77,0.14)', fg: 'var(--warning)', bd: 'rgba(243,174,77,0.30)' },
};
const t = tones[tone] || tones.neutral;
return (
{icon}
{children}
);
}
/* ============================================================
CARD · default surface
============================================================ */
function Card({ children, padding = 24, style, variant = 'default', ...rest }) {
const variants = {
default: {
background: 'var(--surface)',
border: '1px solid var(--border)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
},
elevated: {
background: 'var(--surface-strong)',
border: '1px solid var(--border)',
boxShadow: 'var(--shadow-md)',
},
bordered: {
background: 'transparent',
border: '1px solid var(--border-strong)',
},
featured: {
background: 'linear-gradient(135deg, rgba(154,155,229,0.10), rgba(154,155,229,0.02))',
border: '1px solid rgba(154,155,229,0.40)',
boxShadow: 'var(--shadow-purple-glow)',
},
};
return (
{children}
);
}
/* ============================================================
DELTA · variação % vs período anterior
============================================================ */
function Delta({ value, suffix = '%', invertColor = false }) {
if (value === null || value === undefined || isNaN(value)) {
return —;
}
const isFlat = Math.abs(value) < 0.5;
const isUp = value > 0;
const isGood = invertColor ? !isUp : isUp;
const color = isFlat ? 'var(--text-faint)' : (isGood ? 'var(--success)' : 'var(--error)');
const I = isFlat ? Icon.Flat : (isUp ? Icon.Up : Icon.Down);
return (
{isUp ? '+' : ''}{value.toFixed(1).replace('.', ',')}{suffix}
);
}
/* ============================================================
INFOTIP · explica termo técnico no hover
============================================================ */
function Infotip({ label, children }) {
const [open, setOpen] = useState(false);
return (
{label}
setOpen(true)}
onMouseLeave={() => setOpen(false)}
onFocus={() => setOpen(true)}
onBlur={() => setOpen(false)}
style={{
display: 'inline-flex',
color: 'var(--text-faint)',
cursor: 'help',
marginLeft: 2,
}}
>
{open && (
{children}
)}
);
}
/* ============================================================
FORMATAÇÃO PT-BR
============================================================ */
const fmt = {
int: (n) => new Intl.NumberFormat('pt-BR').format(Math.round(n)),
dec: (n, d = 1) => new Intl.NumberFormat('pt-BR', { minimumFractionDigits: d, maximumFractionDigits: d }).format(n),
pct: (n, d = 1) => fmt.dec(n, d) + '%',
brl: (n) => 'R$ ' + new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 2 }).format(n),
k: (n) => {
if (n >= 1_000_000) return fmt.dec(n/1_000_000, 1).replace(',0', '') + 'M';
if (n >= 10_000) return fmt.dec(n/1_000, 0) + 'k';
if (n >= 1_000) return fmt.dec(n/1_000, 1).replace(',0', '') + 'k';
return fmt.int(n);
},
};
/* ============================================================
EXPORTS GLOBAIS
============================================================ */
Object.assign(window, {
BezaLogo, Icon, Pill, Card, Delta, Infotip, fmt,
});