// ───────────────────────────────────────────────────────────────────────────── // HIT ZERO WEB — Shared UI primitives // Wordmark, Icon, Avatar, StatTile, Pill, Dial, Section header // ───────────────────────────────────────────────────────────────────────────── const HZWordmark = ({ size = 22, stacked = false }) => { const s = { fontSize: size, lineHeight: stacked ? 0.82 : 0.9 }; return (
{stacked ? (<>
HIT
ZERO
) : (HIT ZERO)}
); }; window.HZWordmark = HZWordmark; // ─── Icon set — 24x24 grid, 1.75 stroke ─── const HZIcon = ({ name, size = 18, color = 'currentColor', stroke = 1.75, fill }) => { const s = { width: size, height: size, display: 'inline-block', verticalAlign: '-0.15em', flex: 'none' }; const C = { stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', fill: fill || 'none' }; switch (name) { case 'home': return ; case 'today': return ; case 'roster': return ; case 'skills': return ; case 'routine': return ; case 'score': return ; case 'reel': return ; case 'billing': return ; case 'megaphone': return ; case 'admin': return ; case 'search': return ; case 'chev-right':return ; case 'chev-left': return ; case 'chev-down': return ; case 'chev-up': return ; case 'check': return ; case 'x': return ; case 'plus': return ; case 'minus': return ; case 'bolt': return ; case 'star': return ; case 'dollar': return ; case 'fire': return ; case 'timer': return ; case 'users': return ; case 'arrow-right':return ; case 'arrow-up': return ; case 'play': return ; case 'pause': return ; case 'print': return ; case 'copy': return ; case 'flag': return ; case 'music': return ; case 'pyramid': return ; case 'trophy': return ; case 'calendar': return ; case 'logout': return ; case 'settings': return ; case 'edit': return ; case 'trash': return ; case 'clock': return ; case 'ellipsis': return ; default: return ; } }; window.HZIcon = HZIcon; // ─── Avatar tile ─── const Avatar = ({ name, initials, color = '#27CFD7', size = 32, onClick, src }) => (
{src ? ( {name ) : ( initials || (name || '').split(' ').map(s => s[0]).slice(0,2).join('') )}
); window.Avatar = Avatar; // ─── Pill ─── const Pill = ({ children, tone = 'default', style }) => ( {children} ); window.Pill = Pill; // ─── StatTile ─── const StatTile = ({ label, value, sub, accent, size = 'md' }) => (
{label}
{value}
{sub &&
{sub}
}
); window.StatTile = StatTile; // ─── Section heading — editorial ─── const SectionHeading = ({ eyebrow, title, trailing }) => (
{eyebrow &&
{eyebrow}
}
{title}
{trailing &&
{trailing}
}
); window.SectionHeading = SectionHeading; // ─── Dial (0-1 value) ─── const Dial = ({ value, size = 140, label, sub }) => (
{Math.round(value * 100)}%
{label &&
{label}
} {sub &&
{sub}
}
); window.Dial = Dial; // ─── Status chip for skill state ─── const StatusChip = ({ status, size = 'sm' }) => { const map = { none: { label: 'Not Started', bg: 'rgba(255,255,255,0.06)', fg: 'var(--hz-dim)' }, working: { label: 'Working', bg: 'rgba(255,180,84,0.16)', fg: 'var(--hz-amber)' }, got_it: { label: 'Got It', bg: 'rgba(39,207,215,0.18)', fg: 'var(--hz-teal)' }, mastered: { label: 'Mastered', bg: 'linear-gradient(135deg, rgba(39,207,215,0.25), rgba(249,127,172,0.25))', fg: '#fff' }, }; const m = map[status] || map.none; const h = size === 'sm' ? 22 : 28; return ( {m.label} ); }; window.StatusChip = StatusChip; // ─── Toast system ─── const Toast = ({ toast, onClose }) => { React.useEffect(() => { const defaultDuration = toast.duration ?? (toast.kind === 'error' ? 14000 : 4000); if (defaultDuration === Infinity || defaultDuration === 0) return undefined; const t = setTimeout(() => onClose(toast.id), defaultDuration); return () => clearTimeout(t); }, []); return (
{toast.eyebrow || (toast.kind === 'error' ? 'Needs attention' : 'Hit Zero')}
{toast.title}
{toast.body &&
{toast.body}
}
); }; window.Toast = Toast; // ─── Empty state ─── const EmptyState = ({ icon = 'star', title, body, action }) => (
{title}
{body &&
{body}
} {action &&
{action}
}
); window.EmptyState = EmptyState;