// components.jsx — themed M3 UI kit + phone shell. -> window.
// Relies on CSS vars set by themeVars() on an ancestor. Money in cents.
// (hooks referenced as React.useX to avoid classic-script global collisions)
// One-time global CSS: keyframes, slider internals, pressable feedback, toast.
(function injectAppCss() {
if (document.getElementById('ta-css')) return;
const s = document.createElement('style');
s.id = 'ta-css';
s.textContent = `
.ta-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.ta-press{transition:transform .12s cubic-bezier(.2,.7,.3,1), filter .12s, background .15s, box-shadow .15s}
.ta-press:active{transform:scale(.965)}
.ta-scroll{overflow-y:auto;scrollbar-width:none}
.ta-scroll::-webkit-scrollbar{display:none}
.ta-fade{animation:taFade .32s cubic-bezier(.2,.7,.3,1)}
@keyframes taFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ta-pop{animation:taPop .34s cubic-bezier(.2,.8,.25,1)}
@keyframes taPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.ta-sheet-in{animation:taSheet .34s cubic-bezier(.2,.8,.25,1)}
@keyframes taSheet{from{transform:translateY(102%)}to{transform:none}}
.ta-toast-in{animation:taToast .3s cubic-bezier(.2,.8,.25,1)}
@keyframes taToast{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes taScan{0%{top:6%}50%{top:90%}100%{top:6%}}
@keyframes taSpin{to{transform:rotate(360deg)}}
.ta-shimmer{background:linear-gradient(100deg,var(--surface-variant) 30%,var(--outline-faint) 50%,var(--surface-variant) 70%);background-size:200% 100%;animation:taShim 1.2s infinite}
@keyframes taShim{to{background-position:-200% 0}}
.ta-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
`;
document.head.appendChild(s);
})();
// ── Phone shell ───────────────────────────────────────────────
function StatusBar({ tint }) {
return (
);
}
function PhoneShell({ theme, children, width = 372, height = 786 }) {
const t = theme.tok;
return (
);
}
// ── Buttons ───────────────────────────────────────────────────
function Button({ variant = 'filled', size = 'lg', children, onClick, disabled, leading, full = true, style }) {
const pads = size === 'lg' ? '0 26px' : '0 18px';
const h = size === 'lg' ? 56 : 44;
const fs = size === 'lg' ? 17 : 15;
const base = {
height: h, padding: pads, border: 'none', borderRadius: 99, cursor: disabled ? 'default' : 'pointer',
fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: `calc(${fs}px * var(--fs,1))`,
letterSpacing: 0.1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
width: full ? '100%' : 'auto', opacity: disabled ? 0.38 : 1, whiteSpace: 'nowrap',
};
const styles = {
filled: { background: 'var(--primary)', color: 'var(--on-primary)', boxShadow: 'var(--shadow-soft)' },
tonal: { background: 'var(--primary-container)', color: 'var(--on-primary-container)' },
outlined: { background: 'transparent', color: 'var(--primary)', boxShadow: 'inset 0 0 0 1.5px var(--outline)' },
text: { background: 'transparent', color: 'var(--primary)' },
ghost: { background: 'var(--surface-variant)', color: 'var(--on-surface)' },
}[variant];
return (
);
}
function IconButton({ children, onClick, size = 44, variant = 'plain', style, title }) {
const bg = { plain: 'transparent', tonal: 'var(--surface-variant)', filled: 'var(--primary)' }[variant];
const col = variant === 'filled' ? 'var(--on-primary)' : 'var(--on-surface)';
return (
);
}
// ── Segmented buttons (M3) ────────────────────────────────────
function Segmented({ options, value, onChange, style }) {
return (
{options.map((o) => {
const active = o.value === value;
return (
);
})}
);
}
// ── Chip ──────────────────────────────────────────────────────
function Chip({ children, active, onClick, style }) {
return (
);
}
// ── Slider (custom, pointer-draggable) ────────────────────────
function Slider({ value, min = 0, max = 30, step = 1, onChange }) {
const ref = React.useRef(null);
const drag = React.useRef(false);
const pct = (value - min) / (max - min);
const setFromX = React.useCallback((clientX) => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
let p = (clientX - r.left) / r.width;
p = Math.max(0, Math.min(1, p));
let v = min + p * (max - min);
v = Math.round(v / step) * step;
onChange(Math.max(min, Math.min(max, v)));
}, [min, max, step, onChange]);
React.useEffect(() => {
const move = (e) => { if (drag.current) setFromX(e.touches ? e.touches[0].clientX : e.clientX); };
const up = () => { drag.current = false; };
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
return () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
}, [setFromX]);
return (
{ drag.current = true; setFromX(e.clientX); }}
style={{ position: 'relative', height: 40, display: 'flex', alignItems: 'center', cursor: 'pointer', touchAction: 'none' }}>
{btn(
, () => onChange(Math.max(min, value - 1)), value <= min)}
{value}
{btn(
, () => onChange(Math.min(max, value + 1)), value >= max)}
{initials(person.name)}
);
}
// ── Card ──────────────────────────────────────────────────────
function Card({ children, style, onClick, pad = 18, soft }) {
return (
{children}
);
}
// ── Big money display ─────────────────────────────────────────
function MoneyBig({ cents, currency, size = 64, color = 'var(--on-surface)', weight }) {
const txt = fmt(cents, currency, { noSymbol: true });
const sym = curMeta(currency).symbol;
return (
{sym}
{txt}
);
}
// ── Toast ─────────────────────────────────────────────────────
function Toast({ toast }) {
if (!toast) return null;
return (
);
}
// ── Bottom sheet ──────────────────────────────────────────────
function Sheet({ open, onClose, children, title }) {
if (!open) return null;
return (
e.stopPropagation()} style={{ width: '100%', background: 'var(--surface)',
borderTopLeftRadius: 30, borderTopRightRadius: 30, padding: '12px 18px 22px', boxShadow: '0 -10px 40px rgba(0,0,0,0.2)' }}>
{title &&
{title}
}
{children}
);
}
// ── Section label ─────────────────────────────────────────────
function Label({ children, style }) {
return {children}
;
}
Object.assign(window, {
PhoneShell, StatusBar, Button, IconButton, Segmented, Chip, Slider, Stepper,
Avatar, Card, MoneyBig, Toast, Sheet, Label,
});