/* Shared primitives for the Joni Juuri site UI kit. */
const useIsMobile = () => {
const [m, setM] = React.useState(() => window.innerWidth < 640);
React.useEffect(() => {
const mq = window.matchMedia("(max-width: 639px)");
const fn = e => setM(e.matches);
mq.addEventListener("change", fn);
return () => mq.removeEventListener("change", fn);
}, []);
return m;
};
const Asterisk = ({ size = 18, style }) => (
✱
);
const Eyebrow = ({ children, muted, tone, style, className }) => (
{children}
);
const Pill = ({ children, tone = "ink", as = "div", onClick, style, ...rest }) => {
const Tag = as;
const isInk = tone === "ink";
const isFilled = tone === "filled";
return (
{children}
);
};
const Card = ({ dark, children, style, className = "", id }) => {
const m = useIsMobile();
return (
);
};
const SectionHead = ({ num, dark }) => (
);
const H2 = ({ children, soft, dark, style }) => (
{children}
{soft && (
{" "}{soft}
)}
);
const Lede = ({ children, dark, style }) => (
{children}
);
const MarqueeStat = ({ label, value, desc }) => (
);
const Topbar = ({ right }) => (
);
const Button = ({ children, onClick, variant = "primary", disabled, type = "button", style, ...rest }) => {
const base = {
fontFamily: "var(--jj-body)",
fontSize: 11,
fontWeight: 500,
letterSpacing: "0.16em",
textTransform: "uppercase",
padding: "12px 20px",
borderRadius: 999,
border: "1px solid var(--jj-ink)",
cursor: disabled ? "not-allowed" : "pointer",
transition: "opacity 140ms var(--jj-ease), transform 100ms var(--jj-ease)",
opacity: disabled ? 0.4 : 1,
display: "inline-flex",
alignItems: "center",
gap: 10,
};
const variants = {
primary: { background: "var(--jj-ink)", color: "var(--jj-paper-2)" },
ghost: { background: "transparent", color: "var(--jj-ink)" },
onDark: { background: "var(--jj-paper-2)", color: "var(--jj-ink)", border: "1px solid var(--jj-paper-2)" },
};
return (
);
};
const Field = ({ label, type = "text", value, onChange, placeholder, autoFocus, autoComplete, error, hint }) => (
);
const ChoiceCard = ({ eyebrow, title, soft, body, footnote, locked, onClick, dark, style }) => (
);
const LockGlyph = () => (
);
const ArrowGlyph = ({ direction = "right" }) => {
const rotation = { right: 0, up: -90, left: 180, down: 90, "up-right": -45 }[direction] || 0;
return (
);
};
Object.assign(window, {
useIsMobile,
Asterisk, Eyebrow, Pill, Card, SectionHead, H2, Lede, MarqueeStat,
Topbar, Button, Field, ChoiceCard, LockGlyph, ArrowGlyph,
});