// Lightweight UI primitives for the App UI kit prototype
// (Inline implementations — not from bundle, so testable mid-turn)
function Btn({ children, variant='primary', size='md', iconLeft, iconRight, fullWidth, disabled, onClick, style }) {
const [hov, setHov] = React.useState(false);
const h = { sm:32, md:40, lg:48 }[size]||40;
const p = { sm:'0 12px', md:'0 16px', lg:'0 22px' }[size]||'0 16px';
const fs = { sm:'var(--text-sm)', md:'var(--text-base)', lg:'var(--text-md)' }[size]||'var(--text-base)';
const v = {
primary: { background: hov&&!disabled?'#000':'var(--ink-950)', color:'var(--paper-0)', border:'1px solid var(--ink-950)' },
accent: { background: hov&&!disabled?'var(--lime-600)':'var(--lime-500)', color:'var(--ink-950)', border:'1px solid var(--lime-500)' },
secondary: { background: hov&&!disabled?'var(--surface-muted)':'var(--surface-card)', color:'var(--text-strong)', border:'1px solid var(--border-strong)' },
ghost: { background: hov&&!disabled?'var(--surface-muted)':'transparent', color:'var(--text-body)', border:'1px solid transparent' },
danger: { background: hov&&!disabled?'var(--red-700)':'var(--red-600)', color:'#fff', border:'1px solid var(--red-600)' },
}[variant]||{};
return (
);
}
function IcoBtn({ icon, variant='ghost', size='md', title, onClick, style }) {
const [hov, setHov] = React.useState(false);
const dim = { sm:30, md:36, lg:42 }[size]||36;
const v = {
solid: { background:hov?'#000':'var(--ink-950)', color:'var(--paper-0)' },
soft: { background:hov?'var(--surface-muted)':'var(--paper-2)', color:'var(--text-strong)' },
outline: { background:hov?'var(--surface-muted)':'var(--surface-card)', color:'var(--text-body)', border:'1px solid var(--border-strong)' },
ghost: { background:hov?'var(--surface-muted)':'transparent', color:hov?'var(--text-strong)':'var(--text-secondary)' },
}[variant]||{};
return (
);
}
function Bdg({ children, tone='neutral', variant='soft', dot, size='md', style }) {
const T = {
neutral: { fg:'var(--ink-700)', bg:'var(--surface-muted)', solid:'var(--ink-900)', bdr:'var(--border-strong)' },
brand: { fg:'var(--lime-700)', bg:'var(--brand-tint)', solid:'var(--lime-600)', bdr:'var(--lime-400)' },
approve: { fg:'var(--approve-fg)', bg:'var(--approve-bg)', solid:'var(--approve-solid)', bdr:'var(--green-500)' },
maybe: { fg:'var(--maybe-fg)', bg:'var(--maybe-bg)', solid:'var(--maybe-solid)', bdr:'var(--amber-500)' },
reject: { fg:'var(--reject-fg)', bg:'var(--reject-bg)', solid:'var(--reject-solid)', bdr:'var(--red-500)' },
pending: { fg:'var(--pending-fg)', bg:'var(--pending-bg)', solid:'var(--pending-solid)', bdr:'var(--blue-500)' },
}[tone]||{};
const h = size==='sm'?20:24, p = size==='sm'?'0 7px':'0 9px', fs = size==='sm'?'var(--text-2xs)':'var(--text-xs)';
const skin = variant==='solid' ? { background:T.solid, color:tone==='brand'?'var(--ink-950)':'#fff' }
: variant==='outline' ? { background:'transparent', color:T.fg, border:`1px solid ${T.bdr}` }
: { background:T.bg, color:T.fg };
return (
{dot&&}
{children}
);
}
function RecBdg({ value='pending', emphasis='soft', size='md', style }) {
const MAP = {
approved:{label:'Approved',tone:'approve',g:'✓'}, strongyes:{label:'Strong Yes',tone:'approve',g:'✓'},
shortlist:{label:'Shortlist',tone:'maybe',g:'~'}, maybe:{label:'Maybe',tone:'maybe',g:'~'},
rejected:{label:'Rejected',tone:'reject',g:'×'}, no:{label:'No',tone:'reject',g:'×'},
pending:{label:'Pending',tone:'pending',g:'◷'},
};
const T2 = {
approve:{fg:'var(--approve-fg)',bg:'var(--approve-bg)',s:'var(--approve-solid)'},
maybe:{fg:'var(--maybe-fg)',bg:'var(--maybe-bg)',s:'var(--maybe-solid)'},
reject:{fg:'var(--reject-fg)',bg:'var(--reject-bg)',s:'var(--reject-solid)'},
pending:{fg:'var(--pending-fg)',bg:'var(--pending-bg)',s:'var(--pending-solid)'},
};
const m = MAP[String(value).toLowerCase().replace(/\s+/g,'')] || MAP.pending;
const t = T2[m.tone];
const h = size==='sm'?22:28, p = size==='sm'?'0 8px':'0 11px', fs = size==='sm'?'var(--text-xs)':'var(--text-sm)';
const strong = emphasis==='strong';
const gd = size==='sm'?13:15;
return (
{m.g}
{m.label}
);
}
function Tgl({ checked, defaultChecked=false, onChange, label, description, disabled }) {
const [on, setOn] = React.useState(checked!==undefined?checked:defaultChecked);
const val = checked!==undefined?checked:on;
const toggle = () => { if(disabled)return; const n=!val; if(checked===undefined)setOn(n); onChange&&onChange(n); };
const track = (
);
if(!label) return track;
return (
);
}
function Seg({ options=[], value, defaultValue, onChange, size='md', fullWidth }) {
const [internal, setInternal] = React.useState(defaultValue||(options[0]?.value||options[0]));
const cur = value!==undefined?value:internal;
const h = size==='sm'?30:38, p = size==='sm'?'0 12px':'0 16px', fs = size==='sm'?'var(--text-sm)':'var(--text-base)';
const select = v => { if(value===undefined)setInternal(v); onChange&&onChange(v); };
return (
{options.map(opt => {
const v = opt.value||opt, lbl = opt.label||opt, active = cur===v;
return (
);
})}
);
}
function Fld({ label, value, defaultValue, placeholder, mono, trailing, iconLeft, hint, error, onChange, type='text', style }) {
const [focus, setFocus] = React.useState(false);
const [internal, setInternal] = React.useState(defaultValue||'');
const val = value!==undefined?value:internal;
const bc = error?'var(--reject-solid)':focus?'var(--lime-500)':'var(--border-strong)';
return (
{label&&
}
{iconLeft&&{iconLeft}}
setFocus(true)} onBlur={()=>setFocus(false)}
onChange={e=>{setInternal(e.target.value);onChange&&onChange(e)}}
style={{ flex:1, minWidth:0, border:'none', outline:'none', background:'transparent',
font:mono?'var(--weight-medium) var(--text-base)/1 var(--font-mono)':'var(--type-body)',
color:'var(--text-strong)' }} />
{trailing&&{trailing}}
{hint&&
{hint}}
{label&&}