{ e.currentTarget.style.boxShadow = P.shMd; } : undefined}
onMouseLeave={hover ? e => { e.currentTarget.style.boxShadow = P.shSm; } : undefined}>
{children}
);
};
// Button — `loading` shows a spinner and blocks clicks (needs @keyframes pxspin in app.html)
window.Btn = ({ children, kind = 'default', size = 'md', icon, iconR, full, onClick, style = {}, disabled, loading }) => {
const P = window.PX;
const sizes = { sm: { p: '6px 11px', f: 12.5, g: 6 }, md: { p: '8px 14px', f: 13.5, g: 7 }, lg: { p: '11px 18px', f: 15, g: 8 } };
const s = sizes[size];
const kinds = {
primary: { bg: P.spark, c: '#fff', b: P.spark },
spark: { bg: P.spark, c: '#fff', b: P.spark },
default: { bg: P.card, c: P.ink2, b: P.lineStrong },
soft: { bg: P.sunk, c: P.ink2, b: 'transparent' },
ghost: { bg: 'transparent', c: P.ink2, b: 'transparent' },
danger: { bg: P.roseWash, c: P.rose, b: P.roseTint },
};
const k = kinds[kind] || kinds.default;
const off = disabled || loading;
return (
{tabs.map(t => {
const key = typeof t === 'string' ? t : t.k;
const lbl = typeof t === 'string' ? t : t.label;
const on = active === key;
return (
onChange && onChange(key)} style={{ padding: '9px 13px', fontSize: 13, fontWeight: on ? 600 : 500,
color: on ? P.ink : P.ink3, borderBottom: `2px solid ${on ? P.spark : 'transparent'}`, marginBottom: -1, cursor: 'pointer', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 6 }}>
{lbl}{typeof t === 'object' && t.count != null && {t.count}}
);
})}