// Shared UI components, icons, helpers
// ──────────────────────────────────────── Icons (inline SVG, stroke)
const Icon = {
Chat: () => ,
Edit: () => ,
Tag: () => ,
Globe: () => ,
Box: () => ,
User: () => ,
Pin: () => ,
Doc: () => ,
Chart: () => ,
Mic: () => ,
Send: () => ,
Spark: () => ,
Search: () => ,
Plus: () => ,
X: () => ,
Check: () => ,
Warn: () => ,
Arrow: () => ,
Bell: () => ,
Grid: () => ,
Camera: () => ,
Download: () => ,
Share: () => ,
};
// ──────────────────────────────────────── Small reusable pieces
function KPI({ label, value, sub, subType }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
function Badge({ children, variant = "neutral" }) {
return {children};
}
function HBar({ value, max, color, fillClass }) {
const pct = Math.min(100, (value / max) * 100);
return (
);
}
function Progress({ pct, variant }) {
return (
);
}
// Product illustrations (SVG placeholders estilizados de packaging)
function ProductIllu({ kind = "cartridge", color = "#e6eef5", accent = "var(--accent)", label }) {
const bg = color;
if (kind === "aerosol") {
return (
);
}
if (kind === "tub") {
return (
);
}
// default: cartridge
return (
);
}
// Expose to window so other babel files can use them
Object.assign(window, { Icon, KPI, Badge, HBar, Progress, ProductIllu });