/* ============================================================
components.jsx — live, interactive brutalist UI widgets
Exported to window for use by app.jsx
============================================================ */
const { useState, useEffect, useRef } = React;
/* --- little arrow / icon glyphs (geometric, no slop) --- */
const Arrow = ({ s = 16 }) => (
);
const Check = ({ s = 16 }) => (
);
const Star = ({ s = 16, fill = "none" }) => (
);
/* ---------- Toggle ---------- */
function BToggle({ defaultOn = true, label }) {
const [on, setOn] = useState(defaultOn);
return (
);
}
/* ---------- Checkbox ---------- */
function BCheck({ label, defaultChecked = false }) {
const [c, setC] = useState(defaultChecked);
return (
);
}
/* ---------- Radio group ---------- */
function BRadio({ options, name }) {
const [v, setV] = useState(options[0]);
return (
{options.map(o => (
))}
);
}
/* ---------- Text input ---------- */
function BInput({ label, placeholder, type = 'text' }) {
const [val, setVal] = useState('');
const [focus, setFocus] = useState(false);
return (
);
}
/* ---------- Slider ---------- */
function BSlider({ label, defaultValue = 60 }) {
const [v, setV] = useState(defaultValue);
return (
{label}
{v}
setV(+e.target.value)}
aria-label={label}
style={{ position: 'absolute', width: '100%', margin: 0, opacity: 0, cursor: 'pointer', height: 26 }}/>
);
}
/* ---------- Tabs ---------- */
function BTabs() {
const tabs = ['Overview', 'Specs', 'A11y'];
const [active, setActive] = useState('Overview');
const body = {
Overview: 'A complete kit of accessible, theimable primitives. Drop in, ship today.',
Specs: '42 components · 9 themes · ESM + CJS · 14kb core · zero runtime deps.',
'A11y': 'WAI-ARIA patterns, full keyboard nav, visible focus, screen-reader tested.',
};
return (
{tabs.map(t => (
))}
{body[active]}
);
}
/* ---------- Accordion ---------- */
function BAccordion() {
const items = [
['Is it really accessible?', 'Every component ships WAI-ARIA roles, keyboard handlers and tested focus order.'],
['Can I theme it?', 'Yes — swap a handful of CSS variables and the whole kit re-skins instantly.'],
];
const [open, setOpen] = useState(0);
return (
{items.map(([q, a], i) => (
{open === i &&
{a}
}
))}
setN(v => Math.max(0, v - 1))} label="decrement">−
{n}
setN(v => v + 1)} label="increment">+
);
}
/* ---------- Rating ---------- */
function BRating() {
const [r, setR] = useState(4);
const [hover, setHover] = useState(0);
return (
setHover(0)}>
{[1,2,3,4,5].map(i => (
))}
);
}
/* ---------- Badge row ---------- */
function BBadges() {
return (
NEW
v3.0
STABLE
MIT
);
}
/* ---------- Avatar stack ---------- */
function BAvatars() {
const cols = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)', 'var(--accent-4)'];
const labels = ['JK', 'MR', 'AB', 'TZ'];
return (
{labels.map((l, i) => (
{l}
))}
);
}
/* ---------- Toast trigger ---------- */
function BToast() {
const [show, setShow] = useState(false);
useEffect(() => { if (show) { const t = setTimeout(() => setShow(false), 2600); return () => clearTimeout(t); } }, [show]);
return (
Saved to your library.
);
}
Object.assign(window, {
Arrow, Check, Star,
BToggle, BCheck, BRadio, BInput, BSlider, BTabs, BAccordion,
BStepper, BRating, BBadges, BAvatars, BToast,
});