via htmlFor.
// Consumers can pass an explicit `id`, `name`, or `autoComplete` to override.
// If `name` isn't provided, derives one from the label so browser autofill works.
const Input = ({
icon,
label,
hint,
error,
type = "text",
value,
onChange,
placeholder,
style,
id: idProp,
name,
autoComplete,
...rest
}) => {
const generatedId = React.useId();
const id = idProp || generatedId;
// Derive a name from the label if none given, so password managers/autofill behave.
const derivedName = name || (typeof label === "string"
? label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || undefined
: undefined);
return (
{label && (
{label}
)}
{icon && (
)}
{hint && (
{hint}
)}
{options.map((o) => (
onChange(o.value)}
style={{
padding: "6px 12px",
fontSize: 13,
fontWeight: 600,
border: "none",
cursor: "pointer",
background: value === o.value ? palette.activeBg : "transparent",
color: value === o.value ? palette.activeFg : palette.inactiveFg,
borderRadius: 8,
fontFamily: "inherit",
boxShadow: value === o.value ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
transition: "all 120ms",
}}
>
{o.label}
))}
);
};
// ───────────── METRIC TILE ─────────────
const Metric = ({ label, value, delta, sub, accent = A.green, icon }) => (
{label}
{icon && (
)}
{value}
{delta != null && (
= 0 ? A.ok : A.danger,
}}
>
{delta >= 0 ? "↑" : "↓"} {Math.abs(delta)}
{typeof delta === "number" ? "%" : ""}
)}
{sub && (
{sub}
)}
);
// ───────────── BAR CHART (simple) ─────────────
const BarChart = ({ data, height = 140, accent = A.green }) => {
const max = Math.max(...data.map((d) => d.value));
return (
{data.map((d, i) => {
const h = (d.value / max) * (height - 24);
return (
);
})}
{rows.map((r, i) => {
const total = r.total || r.found + r.misId + r.missed;
return (
{r.type}
{r.found} / {total}
{r.misId > 0 && (
<>
{" "}
· {r.misId} mal id.
)}
{r.missed > 0 && (
<>
{" "}
· {r.missed} perdidos
)}
);
})}
{showLegend && (
{Object.entries(labels).map(([k, l]) => (
))}
)}
{value}
{sub && (
{sub}
)}
);
};
// ───────────── LINE CHART (sparkline / score progression) ─────────────
const LineChart = ({
data,
height = 120,
accent = A.green,
showAxes = true,
}) => {
const w = 600;
// Empty data → render an empty placeholder. SVG with d="" would crash
// in some browsers and trying to compose a path from zero points produces
// strings like " L 600,h L 0,h Z" (no leading M) which throws errors.
if (!data || data.length === 0) {
return (
sem dados para exibir
);
}
const max = Math.max(...data.map((d) => d.value)) + 5;
const min = Math.max(0, Math.min(...data.map((d) => d.value)) - 10);
const range = max - min || 1; // avoid division by zero when all values equal
// Single point: center it horizontally (no line to draw, just the dot).
const xStep = data.length > 1 ? w / (data.length - 1) : 0;
const points = data.map((d, i) => [
data.length > 1 ? i * xStep : w / 2,
height - ((d.value - min) / range) * (height - 30) - 15,
]);
const path = points
.map((p, i) => (i === 0 ? "M" : "L") + p[0] + "," + p[1])
.join(" ");
// Area fill only makes sense for ≥2 points
const area = data.length > 1
? path + ` L ${w},${height} L 0,${height} Z`
: null;
return (
{showAxes &&
[0.25, 0.5, 0.75].map((t) => (
);
};
// ───────────── AVATAR ─────────────
const Avatar = ({ name, size = 32, role }) => {
const initials = name
.split(" ")
.filter(Boolean)
.slice(0, 2)
.map((p) => p[0])
.join("")
.toUpperCase();
const palette =
role === "admin"
? [A.gold, "#b88600"]
: role === "teacher"
? [A.green, A.greenDark]
: [A.greenSoft, A.greenLight];
return (
{initials}
);
};
// ───────────── MODAL ─────────────
const Modal = ({ open, onClose, title, children, width = 520, footer }) => {
if (!open) return null;
return (
e.stopPropagation()}
style={{
background: "#ffffff",
border: "1px solid rgba(0,78,45,0.10)",
borderRadius: 16,
width: "100%",
maxWidth: width,
boxShadow: "0 24px 60px rgba(0,40,20,0.35)",
overflow: "hidden",
maxHeight: "90vh",
display: "flex",
flexDirection: "column",
}}
>
{title}
{children}
{footer && (
{footer}
)}
);
};
// ───────────── TABLE ─────────────
const Table = ({ columns, rows, onRowClick, empty }) => (
{columns.map((c, i) => (
{c.label}
))}
{rows.length === 0 && (
{empty || "Sem registros"}
)}
{rows.map((r, i) => (
onRowClick && onRowClick(r)}
style={{
cursor: onRowClick ? "pointer" : "default",
transition: "background 100ms",
}}
onMouseEnter={(e) =>
(e.currentTarget.style.background = "rgba(0,78,45,0.04)")
}
onMouseLeave={(e) =>
(e.currentTarget.style.background = "transparent")
}
>
{columns.map((c, j) => (
{c.render ? c.render(r) : r[c.key]}
))}
))}
);
// ───────────── BACKGROUND PHOTO PLACEHOLDER ─────────────
// SVG-based "industrial site" placeholder — striped, monospace label
const RefineryBg = () => (
);
window.UI = {
Icon,
AbendiMark,
AbendiWordmark,
AbendiBrandCard,
RysaxMark,
Glass,
Button,
Badge,
Input,
Segmented,
Metric,
BarChart,
StackedBar,
Radial,
LineChart,
Avatar,
Modal,
Table,
RefineryBg,
A,
};