// ui.jsx — shared UI primitives for BHCAC Attendance
// Buttons, cards, icons, avatars, eyebrows — all in BHCAC visual language
// ─── Lucide-style icon set (2px stroke, rounded) ───
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 2, style = {} }) {
const paths = {
'check': ,
'x': <>,
'chevron-right': ,
'chevron-left': ,
'chevron-down': ,
'plus': <>,
'search': <>,
'home': <>,
'users': <>,
'user': <>,
'calendar': <>,
'clock': <>,
'map-pin': <>,
'church': <>,
'qr': <>,
'phone': ,
'mail': <>,
'menu': <>,
'settings': <>,
'bar-chart': <>,
'download': <>,
'sparkles': <>,
'gift': <>,
'sun': <>,
'log-out': <>,
'edit': <>,
'arrow-right': <>,
'arrow-left': <>,
'apple': ,
'google': <>,
'sticker': <>,
'circle-check': <>,
'bell': <>,
'star': ,
'heart': ,
'key': <>,
'fingerprint': <>,
};
const p = paths[name];
if (!p) return null;
return (
);
}
// ─── Eyebrow ───
function Eyebrow({ children, color = 'var(--brand-coral)', style = {}, className }) {
return {children}
;
}
// ─── Bilingual text helper ───
function Bi({ en, zh, primary = 'en', enStyle = {}, zhStyle = {}, gap = 2, style = {} }) {
if (primary === 'en') {
return (
{en}
{zh}
);
}
return (
{zh}
{en}
);
}
// ─── Avatar ───
function Avatar({ member, size = 40, ring = false, ringColor = 'var(--brand-coral)' }) {
const initials = member.en.split(' ').map(s => s[0]).slice(0, 2).join('');
return (
50 ? 5 : 4}px ${ringColor}` : 'none',
letterSpacing: '-0.01em',
}}>{initials}
);
}
// ─── Button ───
function Btn({ children, variant = 'primary', size = 'md', icon, trailingIcon, onClick, type, style = {}, full = false, disabled = false }) {
const base = {
// `flex` (not inline-flex) when full so the button's width: 100% is
// actually honoured on iOS Safari/Brave — inline-flex lets the content
// dictate min-width and overflows the parent on long bilingual labels.
display: full ? 'flex' : 'inline-flex',
alignItems: 'center', justifyContent: 'center', gap: 8,
fontFamily: 'Inter, sans-serif', fontWeight: 600,
border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'all 200ms var(--ease-out)',
borderRadius: 9999,
width: full ? '100%' : 'auto',
maxWidth: '100%',
minWidth: 0,
boxSizing: 'border-box',
opacity: disabled ? 0.5 : 1,
};
const sizes = {
sm: { padding: '8px 14px', fontSize: 13 },
md: { padding: '12px 18px', fontSize: 14 },
lg: { padding: '14px 20px', fontSize: 15 },
};
const variants = {
primary: { background: 'var(--brand-coral)', color: '#fff', boxShadow: '0 4px 12px -2px rgba(244,63,94,0.4)' },
secondary: { background: 'var(--brand-navy)', color: '#fff' },
teal: { background: 'var(--brand-teal)', color: '#fff' },
ghost: { background: 'transparent', color: 'var(--brand-navy)' },
outline: { background: 'transparent', color: 'var(--brand-navy)', boxShadow: 'inset 0 0 0 1.5px var(--border-strong)' },
onDark: { background: 'rgba(255,255,255,0.12)', color: '#fff', backdropFilter: 'blur(8px)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.25)' },
};
return (
);
}
// ─── Card ───
function Card({ children, accent, style = {}, padding = 20, onClick, interactive = false }) {
return (
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; } : undefined}
onMouseOut={interactive ? (e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; } : undefined}
>{children}
);
}
// ─── Pill (small status tag) ───
function Pill({ children, tone = 'navy', icon, style = {} }) {
const tones = {
navy: { bg: 'rgba(15,23,42,0.06)', fg: 'var(--brand-navy)' },
coral: { bg: 'rgba(244,63,94,0.1)', fg: 'var(--coral-700)' },
teal: { bg: 'rgba(13,148,136,0.1)', fg: 'var(--teal-700)' },
warm: { bg: 'var(--brand-warm)', fg: '#9a3412' },
success:{ bg: 'rgba(13,148,136,0.12)', fg: 'var(--teal-700)' },
paper: { bg: '#fef3c7', fg: '#92400e' },
online: { bg: 'rgba(13,148,136,0.1)', fg: 'var(--teal-700)' },
muted: { bg: 'var(--brand-light)', fg: 'var(--fg-3)' },
};
const t = tones[tone] || tones.navy;
return (
{icon && }
{children}
);
}
Object.assign(window, { Icon, Eyebrow, Bi, Avatar, Btn, Card, Pill });