// RMTCTRL — Reusable Components
// Exports all shared UI primitives to window
// ── MenuIcon (hamburger) ────────────────────────────────────────────────────
function MenuIcon({ size = 20, color = '#F5F5F7' }) {
return (
);
}
// ── useViewportWidth (responsive breakpoint hook) ───────────────────────────
function useViewportWidth() {
const [w, setW] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1440);
React.useEffect(() => {
let raf = null;
const onResize = () => {
if (raf) cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => setW(window.innerWidth));
};
window.addEventListener('resize', onResize);
return () => { window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); };
}, []);
return w;
}
// ── useLocalStorage hook (auto-persisted state) ─────────────────────────────
function useLocalStorage(key, initial) {
const [value, setValue] = React.useState(() => {
try {
const raw = localStorage.getItem(key);
return raw !== null ? JSON.parse(raw) : initial;
} catch {
return initial;
}
});
React.useEffect(() => {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
/* localStorage may be full or disabled */
}
}, [key, value]);
return [value, setValue];
}
// ── StatusPill ──────────────────────────────────────────────────────────────
const STATUS_CONFIG = {
'ON TIME': { color: TOKENS.color.accent, bg: 'rgba(0,255,148,0.12)', dot: false },
'DELAYED': { color: TOKENS.color.warn, bg: 'rgba(255,184,0,0.12)', dot: false },
'BOARDING': { color: TOKENS.color.accent, bg: 'rgba(0,255,148,0.12)', dot: true },
'GATE': { color: TOKENS.color.info, bg: 'rgba(59,158,255,0.12)',dot: false },
'LANDED': { color: TOKENS.color.textSecondary, bg: 'rgba(153,153,161,0.12)',dot: false },
'CANCELLED': { color: TOKENS.color.error, bg: 'rgba(255,59,92,0.12)', dot: false },
'WORK BLOCK': { color: TOKENS.color.textPrimary, bg: 'rgba(245,245,247,0.1)',dot: false },
'IN TRANSIT': { color: TOKENS.color.warn, bg: 'rgba(255,184,0,0.12)', dot: true },
'ARRIVED': { color: TOKENS.color.accent, bg: 'rgba(0,255,148,0.12)', dot: false },
};
function getStatusConfig(label) {
const key = Object.keys(STATUS_CONFIG).find(k => label.toUpperCase().startsWith(k));
return STATUS_CONFIG[key] || { color: TOKENS.color.textSecondary, bg: 'rgba(153,153,161,0.12)', dot: false };
}
function StatusPill({ label, large }) {
const cfg = getStatusConfig(label);
return (
{cfg.dot && (
)}
{label}
);
}
// ── Button ───────────────────────────────────────────────────────────────────
function Btn({ variant='primary', size='md', children, onClick, disabled, fullWidth, icon }) {
const heights = { sm: 40, md: 48, lg: 56 };
const fonts = { sm: 13, md: 15, lg: 16 };
const styles = {
primary: { bg: TOKENS.color.accent, color: TOKENS.color.bg, border: 'none' },
secondary: { bg: 'transparent', color: TOKENS.color.textPrimary, border: '1.5px solid #26262E' },
ghost: { bg: 'transparent', color: TOKENS.color.accent, border: 'none' },
destructive: { bg: 'transparent', color: TOKENS.color.error, border: '1.5px solid #FF3B5C' },
};
const s = styles[variant];
return (
);
}
// ── Card ─────────────────────────────────────────────────────────────────────
function Card({ children, style, onClick, noPad }) {
return (
{children}
);
}
// ── Input ─────────────────────────────────────────────────────────────────────
function Input({ label, value, onChange, error, helper, type='text', mono, prefix }) {
const [focused, setFocused] = React.useState(false);
return (
{prefix && {prefix}}
onChange(e.target.value)}
onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
style={{
flex: 1, background: 'none', border: 'none', outline: 'none',
fontFamily: mono ? "'JetBrains Mono', monospace" : "'Inter', sans-serif",
fontSize: 15, fontWeight: mono ? 600 : 400,
color: TOKENS.color.textPrimary, textTransform: mono ? 'uppercase' : 'none',
}}
/>
{error &&
{error}}
{helper && !error &&
{helper}}
);
}
// ── FilterChip ────────────────────────────────────────────────────────────────
function FilterChip({ label, selected, onClick }) {
return (
);
}
// ── Toggle ────────────────────────────────────────────────────────────────────
function Toggle({ on, onChange }) {
return (
onChange(!on)} style={{
width: 50, height: 28, borderRadius: 999,
background: on ? TOKENS.color.accent : TOKENS.color.border,
position: 'relative', cursor: 'pointer',
transition: `background ${TOKENS.anim.base}`, flexShrink: 0,
}}>
{!src && initials}
);
}
// ── SkeletonBlock ─────────────────────────────────────────────────────────────
function Skeleton({ width='100%', height=16, radius=8 }) {
return (
);
}
// ── EmptyState ─────────────────────────────────────────────────────────────────
function EmptyState({ icon, headline, sub, cta, onCta }) {
return (
{icon}
{cta && (
{cta}
)}
);
}
// ── BottomTabBar ──────────────────────────────────────────────────────────────
function BottomTabBar({ active, onNavigate }) {
const tabs = [
{ id: 'home', label: 'Home', icon: CompassIcon },
{ id: 'trips', label: 'Trips', icon: RouteIcon },
{ id: 'workspaces', label: 'Spaces', icon: MapPinIcon },
{ id: 'vault', label: 'Vault', icon: FolderIcon },
];
return (
{tabs.map(tab => {
const isActive = active === tab.id;
const Icon = tab.icon;
return (
);
})}
);
}
// ── Micro label ───────────────────────────────────────────────────────────────
function MicroLabel({ children, color }) {
return (
{children}
);
}
function MonoText({ children, size=15, weight=400, color=TOKENS.color.textPrimary }) {
return (
{children}
);
}
// ── Icon primitives (hand-drawn SVG for portability) ───────────────────────
function CompassIcon({ size=24, color=TOKENS.color.textPrimary, fill='none' }) {
return (
);
}
function RouteIcon({ size=24, color=TOKENS.color.textPrimary, fill='none' }) {
return (
);
}
function MapPinIcon({ size=24, color=TOKENS.color.textPrimary, fill='none' }) {
return (
);
}
function FolderIcon({ size=24, color=TOKENS.color.textPrimary, fill='none' }) {
return (
);
}
function PlaneIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function BedIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function LaptopIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function ChevronRightIcon({ size=20, color=TOKENS.color.textTertiary }) {
return (
);
}
function PlusIcon({ size=20, color=TOKENS.color.bg }) {
return (
);
}
function ArrowLeftIcon({ size=22, color=TOKENS.color.textPrimary }) {
return (
);
}
function SearchIcon({ size=20, color=TOKENS.color.textTertiary }) {
return (
);
}
function HeartIcon({ size=20, color=TOKENS.color.textTertiary, filled=false }) {
return (
);
}
function StarIcon({ size=20, color=TOKENS.color.warn, filled=false }) {
return (
);
}
function WifiIcon({ size=16, color=TOKENS.color.accent }) {
return (
);
}
function ShareIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function GlobeIcon({ size=64, color=TOKENS.color.textPrimary }) {
return (
);
}
function NavigationIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function CalendarIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function DollarIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function BriefcaseIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function ShieldIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function TicketIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function UserIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function XIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function CheckIcon({ size=16, color=TOKENS.color.accent }) {
return (
);
}
function BellIcon({ size=20, color=TOKENS.color.textPrimary }) {
return (
);
}
function CameraIcon({ size=24, color=TOKENS.color.textTertiary }) {
return (
);
}
function ImageIcon({ size=24, color=TOKENS.color.textTertiary }) {
return (
);
}
// Export everything to window
Object.assign(window, {
StatusPill, Btn, Card, Input, FilterChip, Toggle, Avatar, Skeleton,
EmptyState, BottomTabBar, MicroLabel, MonoText,
CompassIcon, RouteIcon, MapPinIcon, FolderIcon, PlaneIcon, BedIcon,
LaptopIcon, ChevronRightIcon, PlusIcon, ArrowLeftIcon, SearchIcon,
HeartIcon, StarIcon, WifiIcon, ShareIcon, GlobeIcon, NavigationIcon,
CalendarIcon, DollarIcon, BriefcaseIcon, ShieldIcon, TicketIcon,
UserIcon, XIcon, CheckIcon, BellIcon, CameraIcon, ImageIcon,
});