// beloq Console — Átomos y helpers compartidos
// Todos los componentes exportados a window.
const COLORS = {
yellow: "#FFEA35",
yellowDark: "#F5C800",
ink: "#0F0F0E",
inkWarm: "#373736",
grey900: "#1A1A1A",
grey700: "#4A4A49",
grey500: "#757575",
grey400: "#9E9E9E",
grey300: "#C4C4C4",
grey200: "#E8E8E8",
grey100: "#F0F0F0",
grey50: "#F7F7F7",
bg: "#FAFAF8",
surface: "#FFFFFF",
success: "#10B981",
warning: "#F59E0B",
error: "#EF4444",
info: "#3B82F6",
borderSoft: "#EDEDEA",
};
// ===== ICONOS (Lucide-style, 1.75px stroke, trazo ink) =====
const Icon = ({ name, size = 18, color = "currentColor", strokeWidth = 1.75, style }) => {
const paths = {
dashboard: <>,
map: <>,
activity: ,
reports: <>,
settings: <>,
bell: <>,
search: <>,
arrowRight: <>,
arrowUp: <>,
arrowDown: <>,
chevronRight: ,
chevronDown: ,
chevronLeft: ,
plus: <>,
minus: ,
x: <>,
check: ,
circle: ,
dot: ,
wifi: <>,
battery: <>,
alert: <>,
info: <>,
euro: <>,
trending: <>,
users: <>,
leaf: <>,
clock: <>,
calendar: <>,
mapPin: <>,
download: <>,
filter: ,
logout: <>,
externalLink: <>,
building: <>,
eye: <>,
signal: <>,
refresh: <>,
};
return (
);
};
// ===== BOTONES =====
const Button = ({ variant = "primary", size = "md", icon, iconRight, children, onClick, disabled, style, ...rest }) => {
const heights = { sm: 32, md: 38, lg: 48 };
const px = { sm: 12, md: 16, lg: 22 };
const fs = { sm: 12, md: 13, lg: 14 };
const base = {
height: heights[size], padding: `0 ${px[size]}px`, fontSize: fs[size],
fontFamily: "Montserrat, sans-serif", fontWeight: 600,
letterSpacing: "0.2px", border: 0, cursor: disabled ? "default" : "pointer",
display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
transition: "background 150ms, transform 100ms, border-color 150ms",
whiteSpace: "nowrap",
};
const variants = {
primary: { background: COLORS.yellow, color: COLORS.ink, borderRadius: 8, boxShadow: "0 1px 2px rgba(0,0,0,0.04), inset 0 -1px 0 rgba(0,0,0,0.06)" },
dark: { background: COLORS.ink, color: "#fff", borderRadius: 8, boxShadow: "0 1px 2px rgba(0,0,0,0.12)" },
secondary: { background: "#fff", color: COLORS.ink, borderRadius: 8, boxShadow: `inset 0 0 0 1px ${COLORS.borderSoft}` },
ghost: { background: "transparent", color: COLORS.grey700, borderRadius: 8 },
accent: { background: COLORS.ink, color: COLORS.yellow, borderRadius: 8 },
};
if (disabled) Object.assign(variants[variant], { background: COLORS.grey200, color: COLORS.grey400, boxShadow: "none" });
return (
);
};
// ===== CARD =====
const Card = ({ children, style, padding = 20, ...rest }) => (
{children}
);
// ===== BADGE / CHIP =====
const Badge = ({ tone = "neutral", children, dot, style }) => {
const tones = {
neutral: { bg: COLORS.grey100, fg: COLORS.grey700, dot: COLORS.grey400 },
success: { bg: "#ECFDF5", fg: "#047857", dot: COLORS.success },
warning: { bg: "#FEF3C7", fg: "#92400E", dot: COLORS.warning },
error: { bg: "#FEE2E2", fg: "#B91C1C", dot: COLORS.error },
info: { bg: "#EFF6FF", fg: "#1D4ED8", dot: COLORS.info },
yellow: { bg: "#FFF7B8", fg: "#6E5200", dot: COLORS.yellowDark },
ink: { bg: COLORS.ink, fg: "#fff", dot: COLORS.yellow },
};
const t = tones[tone];
return (
{dot && }
{children}
);
};
// ===== INPUT =====
const Input = ({ icon, placeholder, value, onChange, type = "text", style, suffix, ...rest }) => {
const [focused, setFocused] = React.useState(false);
return (
{icon && }
onChange?.(e.target.value)}
onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
placeholder={placeholder}
style={{border:0, outline:0, flex:1, font:"inherit", fontSize:13, fontWeight:500, color:COLORS.ink, background:"transparent"}}
/>
{suffix}
);
};
// ===== STATUS DOT =====
const StatusDot = ({ status = "online", size = 8 }) => {
const map = {
online: COLORS.success, warning: COLORS.warning,
offline: COLORS.grey400, error: COLORS.error, reserved: COLORS.warning,
};
return (
);
};
// ===== TABS (inline) =====
const InlineTabs = ({ tabs, value, onChange }) => (
{tabs.map(t => (
))}
);
// ===== Hook para animación de contadores =====
const useCounter = (target, duration = 800, decimals = 0) => {
const [val, setVal] = React.useState(target);
const ref = React.useRef(target);
React.useEffect(() => {
const from = ref.current;
const start = performance.now();
let raf;
const step = (t) => {
const progress = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - progress, 3);
const v = from + (target - from) * eased;
setVal(v);
if (progress < 1) raf = requestAnimationFrame(step);
else ref.current = target;
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [target]);
return Number(val.toFixed(decimals));
};
// Formatters
const fmt = {
eur: (n, dec = 2) => n.toLocaleString("es-ES", {minimumFractionDigits: dec, maximumFractionDigits: dec}) + " €",
num: (n) => n.toLocaleString("es-ES"),
pct: (n) => `${Math.round(n)}%`,
rel: (sec) => {
if (sec < 60) return `hace ${sec}s`;
if (sec < 3600) return `hace ${Math.floor(sec/60)} min`;
return `hace ${Math.floor(sec/3600)}h`;
},
};
Object.assign(window, {
COLORS, Icon, Button, Card, Badge, Input, StatusDot, InlineTabs, useCounter, fmt,
});