// onb/onb-ui.jsx — shared primitives for the FyzioUnion onboarding flow
// Exports to window: OIcon, GoogleLogo, AppleLogo, BrandLock, OField, OCheckbox,
// ObHeader, NextButton, ProviderButton
// ── Icon subset (matches app/data.jsx line set) ──────────────
function OIcon({ name, size = 22, stroke = "currentColor", fill = "none", sw = 1.8, style }) {
const common = { width: size, height: size, viewBox: "0 0 24 24",
fill, stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", style };
const P = {
chevL: ,
chevR: ,
mail: ,
phone: ,
at: ,
lock: ,
eye: ,
eyeOff: ,
check: ,
checkCircle: ,
user: ,
calendar: ,
shield: ,
spark: ,
doc: ,
fileLock: ,
info: ,
alert: ,
activity: ,
external: ,
layers: ,
clock: ,
x: ,
};
return ;
}
// ── Brand provider logos (visual only) ───────────────────────
function GoogleLogo({ size = 19 }) {
return (
);
}
function AppleLogo({ size = 19 }) {
return (
);
}
// ── Text field (mirrors app/login.jsx Field) ─────────────────
function OField({ icon, type = "text", value, onChange, placeholder, trailing,
inputMode, maxLength, align = "left", autoFocus }) {
const [focus, setFocus] = React.useState(false);
const inpRef = React.useRef(null);
return (
inpRef.current && inpRef.current.focus()} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "text",
background: "#f4f6f9", borderRadius: 14, padding: icon ? "0 14px" : "0 16px", height: 54,
border: `1.5px solid ${focus ? "var(--accent)" : "transparent"}`,
boxShadow: "none",
transition: "border-color .15s ease, box-shadow .15s ease" }}>
{icon && }
onChange(e.target.value)}
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
autoCapitalize="none" autoCorrect="off" spellCheck="false"
style={{ flex: 1, border: "none", outline: "none", background: "none", textAlign: align,
fontFamily: "inherit", fontSize: 15.5, fontWeight: 500, color: "var(--ink)", minWidth: 0 }} />
{trailing}
);
}
// ── Labeled group ────────────────────────────────────────────
function OLabel({ children }) {
return {children}
;
}
// ── Checkbox row ─────────────────────────────────────────────
function OCheckbox({ checked, onChange, children }) {
return (
);
}
// ── Header: back button + subtle step progress ───────────────
function ObHeader({ onBack, step, total }) {
const pct = step && total ? (step / total) * 100 : 0;
return (
{step && total ? (
Krok {step} z {total}
) :
}
);
}
// ── "Ďalšie" style button: grey when disabled, slate when active ──
function NextButton({ children, onClick, disabled, tone = "auto", icon }) {
const active = !disabled;
const bg = tone === "grey" ? "var(--gray-btn)"
: active ? "var(--accent)" : "var(--gray-btn)";
const fg = tone === "grey" ? "var(--gray-btn-ink)"
: active ? "#fff" : "var(--gray-btn-ink)";
return (
);
}
// ── Provider / method button (Email, Google, Apple) ──────────
function ProviderButton({ logo, children, onClick, variant = "outline" }) {
const filled = variant === "filled";
return (
);
}
Object.assign(window, { OIcon, GoogleLogo, AppleLogo, OField, OLabel, OCheckbox, ObHeader, NextButton, ProviderButton });