// ReturnScribe — navigation chrome + form controls for the interactive prototype // All consume the theme object `t`. // ───────────────────────────────────────────────────────────── // NavBar — back chevron + centered title + optional trailing // ───────────────────────────────────────────────────────────── function NavBar({ t, title, onBack, trailing, large }) { return (
{onBack && ( )}
{title}
{trailing}
); } // ───────────────────────────────────────────────────────────── // Bottom Sheet — scrim + slide-up panel (rounded top, drag handle) // ───────────────────────────────────────────────────────────── function Sheet({ t, open, onClose, title, children, trailing, maxHeight = 720 }) { const [mounted, setMounted] = React.useState(open); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (open) { setMounted(true); requestAnimationFrame(() => requestAnimationFrame(() => setShown(true))); } else { setShown(false); const id = setTimeout(() => setMounted(false), 280); return () => clearTimeout(id); } }, [open]); if (!mounted) return null; return (
{(title || trailing) && (
{title}
{trailing || }
)}
{children}
); } // ───────────────────────────────────────────────────────────── // Modal Cover — full-screen slide-up (paywall, consent, scan) // ───────────────────────────────────────────────────────────── function ModalCover({ t, open, children, z = 90 }) { const [mounted, setMounted] = React.useState(open); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (open) { setMounted(true); requestAnimationFrame(() => requestAnimationFrame(() => setShown(true))); } else { setShown(false); const id = setTimeout(() => setMounted(false), 320); return () => clearTimeout(id); } }, [open]); if (!mounted) return null; return (
{children}
); } // ───────────────────────────────────────────────────────────── // Action Menu — iOS context menu popover (anchored top-right) // ───────────────────────────────────────────────────────────── function ActionMenu({ t, open, onClose, items, anchor = 'right' }) { const [shown, setShown] = React.useState(false); React.useEffect(() => { if (open) requestAnimationFrame(() => setShown(true)); else setShown(false); }, [open]); if (!open) return null; return (
{items.map((it, i) => { const hasSel = items.some(x => x.selected != null); return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Form field row — label + editable value (text/number/date/select) // ───────────────────────────────────────────────────────────── function Field({ t, label, value, onChange, type = 'text', placeholder, isLast, edited, prefix, options, onPick }) { return (
{label}
{edited && Edited} {options ? ( ) : (
{prefix && {prefix}} onChange && onChange(e.target.value)} style={{ border: 'none', outline: 'none', background: 'transparent', textAlign: 'right', color: t.text1, ...applyType(RSType.body), width: '100%', minWidth: 0, fontFamily: RSFont.sys, }}/>
)}
{!isLast &&
}
); } // ───────────────────────────────────────────────────────────── // Stepper — qty control // ───────────────────────────────────────────────────────────── function Stepper({ t, value, onChange, min = 1 }) { const btn = (label, fn, disabled) => ( ); return (
{btn('−', () => onChange(Math.max(min, value - 1)), value <= min)} {value} {btn('+', () => onChange(value + 1))}
); } // ───────────────────────────────────────────────────────────── // Toggle switch (iOS) // ───────────────────────────────────────────────────────────── function ToggleSwitch({ t, on, onChange, color }) { const c = color || t.success; return ( ); } // ───────────────────────────────────────────────────────────── // Big segmented control (full-width, for paywall cadence etc.) // ───────────────────────────────────────────────────────────── function BigSegmented({ t, items, active, onChange, accent }) { const refs = React.useRef({}); const wrap = React.useRef(null); const [box, setBox] = React.useState(null); React.useEffect(() => { const el = refs.current[active]; if (!el) return; setBox({ left: el.offsetLeft, width: el.offsetWidth }); }, [active, items.length]); return (
{box && (
)} {items.map(it => { const a = it.id === active; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Chevron row — generic tappable list row with chevron // ───────────────────────────────────────────────────────────── function ChevronRow({ t, icon, iconColor, title, subtitle, trailing, onClick, isLast, danger }) { return (
{icon && (
)}
{title}
{subtitle &&
{subtitle}
}
{trailing && {trailing}} {onClick && } {!isLast &&
}
); } // ───────────────────────────────────────────────────────────── // Scan progress bar — determinate sweep // ───────────────────────────────────────────────────────────── function ScanProgressBar({ t, pct, color }) { const c = color || t.accent; return (
); } // ───────────────────────────────────────────────────────────── // Inline option picker sheet (for selects inside an edit sheet) // ───────────────────────────────────────────────────────────── function PickerSheet({ t, open, onClose, title, options, value, onPick }) { return (
{options.map((opt, i) => ( ))}
); } Object.assign(window, { NavBar, Sheet, ModalCover, ActionMenu, Field, Stepper, ToggleSwitch, BigSegmented, ChevronRow, ScanProgressBar, PickerSheet, });