{Array.from({ length: steps + 1 }).map((_, i) => {
const v = min + i * step;
const active = v <= value;
return (
onChange(v)}
style={{
flex: 1, cursor: 'pointer',
background: active ? 'var(--accent)' : 'var(--surface-2)',
border: '1px solid var(--border)',
}}
/>
);
})}
{min}{suffix}
{value}{suffix}
{max}{suffix}
);
}
return (
{min}{suffix}
{value}{suffix}
{max}{suffix}
);
}
const smallBtn = {
width: 52, height: 52,
background: 'var(--surface)', border: '1.5px solid var(--border)',
fontFamily: 'var(--mono)', fontSize: 24, fontWeight: 700,
color: 'var(--fg)', cursor: 'pointer', borderRadius: 4,
};
function MaterialTabs({ value, onChange, options }) {
return (
{options.map((opt, i) => {
const active = opt === value;
const IconComp = MATERIAL_ICONS[opt];
return (
);
})}
);
}
function CalibreSelector({ value, onChange, options, style = 'cards' }) {
if (style === 'dropdown') {
return (
);
}
if (style === 'pills') {
return (
{options.map(o => {
const active = o === value;
return (
);
})}
);
}
// Grid por cantidad: ≤5 todo en fila | 6 → 3×2 | 7–8 → 4 cols | 9 → 3×3 | >9 → 5 cols
const n = options.length;
const cols = n <= 5 ? n : n === 6 ? 3 : n <= 8 ? 4 : n === 9 ? 3 : 5;
return (
{options.map(o => {
const active = o === value;
return (
);
})}
);
}
function Toggle({ value, onChange }) {
return (
);
}
function CTAButton({ children, onClick, variant = 'primary', disabled = false }) {
const styles = {
primary: {
background: 'var(--accent)', color: '#fff',
border: 'none',
},
dark: {
background: 'var(--fg)', color: 'var(--bg)',
border: 'none',
},
ghost: {
background: 'transparent', color: 'var(--fg)',
border: '1.5px solid var(--border)',
},
}[variant];
return (
);
}
function TextInput({ value, onChange, placeholder, multiline = false }) {
const Tag = multiline ? 'textarea' : 'input';
return (
onChange(e.target.value)}
placeholder={placeholder}
style={{
width: '100%', boxSizing: 'border-box',
minHeight: multiline ? 88 : 52,
padding: multiline ? '14px 16px' : '0 16px',
background: 'var(--surface)',
border: '1.5px solid var(--border)', borderRadius: 4,
fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500,
color: 'var(--fg)', outline: 'none',
resize: multiline ? 'vertical' : 'none',
lineHeight: multiline ? 1.4 : undefined,
}}
/>
);
}
Object.assign(window, {
Icon, FieldLabel, NumInput, Slider, MaterialTabs,
CalibreSelector, Toggle, CTAButton, TextInput,
});