// v-atoms.jsx — Lasso vendor dashboard icons + dense SaaS primitives
// ─── Icon set (lucide-style, 2 stroke) ───────────────────────────────
const I = {
grid: (p={}) => ,
map: (p={}) => ,
utensils:(p={}) => ,
receipt: (p={}) => ,
users: (p={}) => ,
megaphone:(p={})=> ,
trophy: (p={}) => ,
settings:(p={}) => ,
target: (p={}) => ,
trendUp: (p={}) => ,
trendDown:(p={})=> ,
flat: (p={}) => ,
pound: (p={}) => ,
tag: (p={}) => ,
refresh: (p={}) => ,
bell: (p={}) => ,
search: (p={}) => ,
x: (p={}) => ,
check: (p={}) => ,
plus: (p={}) => ,
chevR: (p={}) => ,
chevD: (p={}) => ,
arrow: (p={}) => ,
clock: (p={}) => ,
pin: (p={}) => ,
flame: (p={}) => ,
shield: (p={}) => ,
eyeOff: (p={}) => ,
lock: (p={}) => ,
sparkle: (p={}) => ,
gift: (p={}) => ,
truck: (p={}) => ,
sun: (p={}) => ,
crown: (p={}) => ,
rocket: (p={}) => ,
layers: (p={}) => ,
image: (p={}) => ,
alert: (p={}) => ,
zap: (p={}) => ,
filter: (p={}) => ,
swords: (p={}) => ,
droplet: (p={}) => ,
density: (p={}) => ,
pizza: (p={}) => ,
info: (p={}) => ,
star: (p={}) => ,
calendar:(p={}) => ,
play: (p={}) => ,
logout: (p={}) => ,
pause: (p={}) => ,
stop: (p={}) => ,
bookmark:(p={}) => ,
compass: (p={}) => ,
chevL: (p={}) => ,
maximize:(p={}) => ,
minimize:(p={}) => ,
};
// ─── Wordmark ────────────────────────────────────────────────────────
function Wordmark({ color='var(--brand-orange)', size=20 }) {
return LASSO
;
}
function Bull({ size=34 }) {
return 
;
}
// ─── Eyebrow ─────────────────────────────────────────────────────────
function Eyebrow({ children, color='var(--warm-stone)', style={} }) {
return {children}
;
}
// ─── Card ────────────────────────────────────────────────────────────
function Card({ children, pad=20, style={}, hover=false, onClick, ...rest }) {
const [h, setH] = React.useState(false);
return (
setH(true):undefined} onMouseLeave={hover?()=>setH(false):undefined}
style={{
background:'rgba(255,251,245,0.68)', backdropFilter:'blur(14px) saturate(150%)', WebkitBackdropFilter:'blur(14px) saturate(150%)',
border:'1px solid rgba(255,255,255,0.55)', borderRadius:18,
padding:pad,
boxShadow: h
? '0 22px 44px -20px rgba(27,18,13,0.45), inset 0 1px 0 rgba(255,255,255,0.65)'
: '0 12px 32px -20px rgba(27,18,13,0.35), inset 0 1px 0 rgba(255,255,255,0.6)',
transition:'box-shadow 200ms, transform 200ms, border-color 200ms',
transform: h ? 'translateY(-2px)' : 'none', cursor: onClick?'pointer':'default',
borderColor: h ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.55)', ...style,
}}>{children}
);
}
// ─── Status pill ─────────────────────────────────────────────────────
const PILL_TONE = {
green:{ bg:'rgba(46,139,78,0.10)', fg:'#247a41', bd:'rgba(46,139,78,0.28)' },
blue: { bg:'rgba(62,124,176,0.11)', fg:'#2f6694', bd:'rgba(62,124,176,0.28)' },
amber:{ bg:'rgba(224,153,42,0.13)', fg:'#a86d12', bd:'rgba(224,153,42,0.32)' },
red: { bg:'rgba(193,59,31,0.10)', fg:'#b0341a', bd:'rgba(193,59,31,0.26)' },
purple:{bg:'rgba(122,87,201,0.11)', fg:'#6243ad', bd:'rgba(122,87,201,0.28)' },
grey: { bg:'rgba(124,103,91,0.10)', fg:'#7C675B', bd:'rgba(124,103,91,0.26)' },
orange:{bg:'rgba(216,90,20,0.10)', fg:'#c0500f', bd:'rgba(216,90,20,0.30)' },
dark: { bg:'var(--dark-chocolate)', fg:'var(--dust-cream)', bd:'rgba(255,255,255,0.14)' },
};
function Pill({ tone='grey', children, dot=false, icon, solid=false, style={} }) {
const t = PILL_TONE[tone] || PILL_TONE.grey;
return (
{dot && }
{icon}{children}
);
}
// ─── Trend chip ──────────────────────────────────────────────────────
function Trend({ dir, pct, size=13 }) {
const map = { up:{c:'#247a41',Ic:I.trendUp,s:'+'}, down:{c:'#b0341a',Ic:I.trendDown,s:'−'}, flat:{c:'#7C675B',Ic:I.flat,s:''} };
const m = map[dir] || map.flat;
return (
{dir!=='flat' && `${m.s}${pct}%`}{dir==='flat' && 'Flat'}
);
}
// ─── Progress bar ────────────────────────────────────────────────────
function Bar({ pct, color='var(--brand-orange)', h=8, track='rgba(27,18,13,0.07)', radius=999 }) {
return (
);
}
// ─── Sparkline (mini bar chart) ──────────────────────────────────────
function Spark({ data, color='var(--brand-orange)', h=34, w=84, bars=true }) {
const max = Math.max(...data, 1);
if (bars) {
return (
);
}
const pts = data.map((d,i)=>`${(i/(data.length-1))*w},${h-(d/max)*(h-3)-2}`).join(' ');
return ;
}
// ─── Toggle switch ───────────────────────────────────────────────────
function Toggle({ on, onChange, color='var(--brand-orange)' }) {
return (
);
}
// ─── Range slider (branded) ──────────────────────────────────────────
function Slider({ value, min, max, step=1, onChange, color='var(--brand-orange)' }) {
const pct = ((value-min)/(max-min))*100;
return (
onChange(+e.target.value)}
style={{ position:'absolute', left:0, right:0, width:'100%', margin:0, appearance:'none', WebkitAppearance:'none', background:'transparent', height:24, cursor:'pointer' }}/>
);
}
// ─── Segmented control ───────────────────────────────────────────────
function Segmented({ options, value, onChange, size='md' }) {
const pad = size==='sm' ? '6px 11px' : '8px 14px';
const fs = size==='sm' ? 12 : 13;
return (
{options.map(o=>{
const v = typeof o==='string'?o:o.value, l = typeof o==='string'?o:o.label;
const on = v===value;
return (
);
})}
);
}
// ─── Icon button ─────────────────────────────────────────────────────
function IconBtn({ icon, onClick, badge, active=false }) {
return (
);
}
// ─── Button ──────────────────────────────────────────────────────────
function Btn({ kind='primary', children, onClick, full=false, size='md', icon, disabled=false, style={} }) {
const bg = { primary:'var(--dark-chocolate)', accent:'var(--brand-orange)', ghost:'transparent', soft:'var(--bg-warm)', white:'var(--bg-surface)' }[kind];
const fg = { primary:'var(--dust-cream)', accent:'#fff', ghost:'var(--fg-primary)', soft:'var(--horse-brown)', white:'var(--fg-primary)' }[kind];
const pad = { sm:'8px 13px', md:'11px 17px', lg:'14px 22px' }[size];
const fs = { sm:12.5, md:13.5, lg:15 }[size];
return (
);
}
// ─── Donut / ring gauge ──────────────────────────────────────────────
function Ring({ pct, size=60, stroke=7, color='var(--brand-orange)', track='rgba(27,18,13,0.08)', children }) {
const r = (size-stroke)/2, c = 2*Math.PI*r, off = c*(1-pct/100);
return (
);
}
// ─── Page header ─────────────────────────────────────────────────────
function PageHead({ eyebrow, title, sub, right }) {
return (
{eyebrow &&
{eyebrow}}
{title}
{sub &&
{sub}
}
{right}
);
}
Object.assign(window, {
I, Wordmark, Bull, Eyebrow, Card, Pill, PILL_TONE, Trend, Bar, Spark,
Toggle, Slider, Segmented, IconBtn, Btn, Ring, PageHead,
});