// Tax Bridge — shared UI primitives
const T = window.TB;
// ─── Logo ────────────────────────────────────────────────
function Logo({ size = 22, color = T.ink, accent = T.mint, wordmark = true }) {
return (
{wordmark && (
tax·bridge
)}
);
}
// ─── Button ────────────────────────────────────────────────
function Button({ children, variant = 'primary', size = 'md', onClick, icon, iconRight, full, style = {}, disabled }) {
const sizes = {
sm: { p: '8px 14px', fs: 13, h: 36, r: 10 },
md: { p: '11px 18px', fs: 14.5, h: 44, r: 12 },
lg: { p: '15px 24px', fs: 16, h: 54, r: 14 },
}[size];
const variants = {
primary: { bg: T.ink, color: '#fff', bd: T.ink, hover: T.inkDeep },
mint: { bg: T.mint, color: T.ink, bd: T.mint, hover: '#2EBE8C' },
ghost: { bg: 'transparent', color: T.ink, bd: T.border, hover: T.surface },
outline: { bg: '#fff', color: T.ink, bd: T.border, hover: T.surface },
link: { bg: 'transparent', color: T.ink, bd: 'transparent', hover: 'transparent' },
}[variant];
const [hover, setHover] = React.useState(false);
return (
);
}
// ─── Card ────────────────────────────────────────────────
function Card({ children, style = {}, pad = 24, soft = false, hover = false, onClick }) {
const [h, setH] = React.useState(false);
return (
hover && setH(true)}
onMouseLeave={() => hover && setH(false)}
style={{
background: soft ? T.surface : '#fff',
border: `1px solid ${soft ? T.borderSoft : T.border}`,
borderRadius: 18,
padding: pad,
transition: 'transform 160ms ease, box-shadow 160ms ease',
transform: h ? 'translateY(-2px)' : 'none',
boxShadow: h ? '0 12px 32px rgba(11,27,59,0.10)' : 'none',
cursor: onClick ? 'pointer' : 'default',
...style,
}}
>
{children}
);
}
// ─── Badge ────────────────────────────────────────────────
function Badge({ children, tone = 'neutral', icon, style = {} }) {
const tones = {
neutral: { bg: T.surface, color: T.ink2, bd: T.border },
mint: { bg: T.mintSoft, color: T.mintInk, bd: 'transparent' },
blue: { bg: T.blueSoft, color: '#2B5BD7', bd: 'transparent' },
amber: { bg: T.amberSoft, color: '#8A5A0F', bd: 'transparent' },
rose: { bg: T.roseSoft, color: '#A23541', bd: 'transparent' },
dark: { bg: T.ink, color: '#fff', bd: T.ink },
glass: { bg: 'rgba(255,255,255,0.08)', color: '#fff', bd: 'rgba(255,255,255,0.15)' },
}[tone];
return (
{icon}
{children}
);
}
// ─── ProgressBar ────────────────────────────────────────────
function ProgressBar({ value, max = 100, tone = 'mint', height = 6, showPct = false }) {
const pct = Math.min(100, Math.max(0, (value / max) * 100));
const colors = { mint: T.mint, blue: T.blue, amber: T.amber };
return (
{showPct && (
{Math.round(pct)}%
)}
);
}
// ─── Field ────────────────────────────────────────────────
function Field({ label, type = 'text', value, onChange, placeholder, icon, hint, required }) {
const [focus, setFocus] = React.useState(false);
return (
);
}
// ─── OptionCard (for assessment) ─────────────────────────
function OptionCard({ children, selected, onClick, icon, sub, multi }) {
return (
);
}
// ─── Tiny icons (line, 18px default) ─────────────────────
const Icon = {
arrow: ,
arrowL: ,
check: ,
lock: ,
shield: ,
spark: ,
doc: ,
euro: ,
user: ,
briefcase: ,
globe: ,
chart: ,
coins: ,
home2: ,
upload: ,
bell: ,
search: ,
filter: ,
flag: ,
clock: ,
};
Object.assign(window, { Logo, Button, Card, Badge, ProgressBar, Field, OptionCard, Icon });