// ui_kits/mobile/Components.jsx
// Goji mobile atoms — buttons, cards, nav, FAB, fields, icons.
// Keep stateless; pages compose these.
const { useState } = React;
// ─────────────────────────────────────────────────────────────
// Icon — Lucide-style strokes at 1.75. Inherits currentColor.
// ─────────────────────────────────────────────────────────────
function Icon({ name, size = 22, stroke = 1.75, style }) {
const common = {
width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
stroke: 'currentColor', strokeWidth: stroke,
strokeLinecap: 'round', strokeLinejoin: 'round', style,
};
const paths = {
home: <>,
wallet: <>,
plus: <>,
book: <>,
sparkle: <>,
send: <>,
bell: <>,
settings: <>,
bill: <>,
coffee: <>,
chart: <>,
home2: <>,
sun: <>,
moon: <>,
arrowUp: <>,
arrowDown: <>,
chevronRight: ,
chevronLeft: ,
eye: <>,
eyeOff: <>,
gear: <>,
chat: <>,
arrowRight: <>,
logout: <>,
info: <>,
mic: <>,
gemini: ,
stopSquare: ,
calendar: <>,
scanFace: <>,
globe: <>,
close: <>,
user: <>,
refresh: <>,
salary: <>,
target: <>,
family: <>,
};
return ;
}
// ─────────────────────────────────────────────────────────────
// AmountVisibility — global toggle for masking $ amounts.
// Provider in App; useAmountMask() in any component that renders money.
// ─────────────────────────────────────────────────────────────
const AmountVisibilityContext = React.createContext(false);
function useAmountMask() { return React.useContext(AmountVisibilityContext); }
// ─────────────────────────────────────────────────────────────
// Money — semantic span with tabular numerics. Always use this for $.
// ─────────────────────────────────────────────────────────────
function Money({ amount, size = 'inherit', color = 'inherit', sign = false, currency = '$', children }) {
const hidden = useAmountMask();
const display = hidden
? (() => {
const neg = amount != null && amount < 0;
const prefix = sign ? (neg ? '\u2212' : '+') : (neg ? '\u2212' : '');
return `${prefix}${currency}\u2022\u2022\u2022\u2022`;
})()
: (children != null ? children : (() => {
const abs = Math.abs(amount);
const s = abs.toLocaleString('en-US', { minimumFractionDigits: abs % 1 === 0 ? 0 : 2, maximumFractionDigits: 2 });
const neg = amount < 0;
const prefix = sign ? (neg ? '\u2212' : '+') : (neg ? '\u2212' : '');
return `${prefix}${currency}${s}`;
})());
return (
{display}
);
}
// ─────────────────────────────────────────────────────────────
// Button — primary (gradient), secondary, ghost. 24px radius.
// ─────────────────────────────────────────────────────────────
function Button({ variant = 'primary', size = 'md', leadingIcon, trailingIcon, children, onClick, full, style }) {
const base = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
gap: 8, borderRadius: 'var(--radius-button)',
fontFamily: 'var(--font-sans)', fontWeight: 600,
border: '1px solid transparent', cursor: 'pointer',
transition: 'transform var(--dur-instant) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth)',
width: full ? '100%' : undefined,
height: size === 'sm' ? 40 : size === 'lg' ? 56 : 52,
padding: size === 'sm' ? '0 16px' : '0 22px',
fontSize: size === 'sm' ? 14 : 15,
...style,
};
const variants = {
primary: {
background: 'var(--goji-gradient)',
color: 'var(--goji-btn-text)',
boxShadow: 'var(--shadow-fab)',
},
secondary: {
background: 'var(--color-input-bg)',
color: 'var(--color-text-primary)',
borderColor: 'var(--color-border-strong)',
},
ghost: {
background: 'transparent',
color: 'var(--goji-accent)',
},
};
return (
);
}
// ─────────────────────────────────────────────────────────────
// Field — input. 16px radius, gold focus ring.
// ─────────────────────────────────────────────────────────────
function Field({ label, placeholder, value, onChange, leadingIcon, suffix, type = 'text', focused: focusedProp, error }) {
const [focusedState, setFocusedState] = useState(false);
const focused = focusedProp != null ? focusedProp : focusedState;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Chip — pill, both filter and category
// ─────────────────────────────────────────────────────────────
function Chip({ active, color, children, onClick }) {
const variants = active
? { background: 'rgba(193, 160, 129, 0.10)', borderColor: 'rgba(193, 160, 129, 0.32)', color: '#E3B788' }
: color
? { background: `${color}1a`, borderColor: `${color}55`, color: color }
: { background: 'var(--color-input-bg)', borderColor: 'var(--color-border)', color: 'var(--color-text-body)' };
return (
);
}
// ─────────────────────────────────────────────────────────────
// Header — app top bar. Logo · title · theme toggle.
// ─────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────
// SwipePager — transform-based swipeable pager with mouse-drag support.
// `page` is controlled; `onPageChange` fires when drag ends or snap occurs.
// ─────────────────────────────────────────────────────────────
function SwipePager({ children, page, onPageChange }) {
const containerRef = React.useRef(null);
const [width, setWidth] = React.useState(0);
const [drag, setDrag] = React.useState(0);
const [isDragging, setIsDragging] = React.useState(false);
const startXRef = React.useRef(0);
const startYRef = React.useRef(0);
const axisRef = React.useRef(null); // 'x' | 'y' | null — locked once determined
const total = React.Children.count(children);
React.useEffect(() => {
const el = containerRef.current;
if (!el) return;
const measure = () => setWidth(el.offsetWidth);
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
const onPointerDown = (e) => {
if (e.button !== undefined && e.button !== 0) return;
startXRef.current = e.clientX;
startYRef.current = e.clientY;
axisRef.current = null;
// Do NOT capture yet — wait until axis is determined so vertical
// scrolling in inner Page can still happen.
};
const onPointerMove = (e) => {
if (e.buttons === 0 && e.pointerType === 'mouse') return;
const dx = e.clientX - startXRef.current;
const dy = e.clientY - startYRef.current;
if (!isDragging) {
if (axisRef.current === null) {
if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
axisRef.current = 'x';
setIsDragging(true);
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
} else if (Math.abs(dy) > 8) {
axisRef.current = 'y';
return;
} else {
return;
}
} else if (axisRef.current === 'y') {
return;
}
}
let nextDrag = dx;
// Resist past edges
if (page === 0 && nextDrag > 0) nextDrag = nextDrag * 0.35;
if (page === total - 1 && nextDrag < 0) nextDrag = nextDrag * 0.35;
setDrag(nextDrag);
};
const endDrag = (e) => {
if (!isDragging) {
axisRef.current = null;
return;
}
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {}
const dx = drag;
let next = page;
if (Math.abs(dx) > width * 0.2) {
next = page + (dx > 0 ? -1 : 1);
}
next = Math.max(0, Math.min(total - 1, next));
setDrag(0);
setIsDragging(false);
axisRef.current = null;
if (next !== page) onPageChange(next);
};
const translate = -(page * width) + drag;
return (
{React.Children.map(children, (child, i) => (
{child}
))}
);
}
// ─────────────────────────────────────────────────────────────
function HeaderActions({ hidden, onToggleHidden, onOpenSettings, showBell }) {
return (
{onToggleHidden && (
)}
{showBell && (
)}
{onOpenSettings && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// Header — used in non-Home screens. Shows title + eye only.
// ─────────────────────────────────────────────────────────────
function Header({ title, hidden, onToggleHidden }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// SectionTitle — eyebrow + optional action
// ─────────────────────────────────────────────────────────────
function SectionTitle({ children, action, onAction }) {
return (
{children}
{action && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// HeroCard — the Safe to Spend card. The ONLY hero-shadow surface.
// ─────────────────────────────────────────────────────────────
function HeroCard({ amount, safeToSend, dailyAvg, daysToPayday, fxPair = 'USD → NPR', fxRate = 132.99, onShowInfo }) {
const hidden = useAmountMask();
const fmtMoney = (v) => hidden ? '$•••' : `$${v.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
return (
{/* Eyebrow + info */}
{/* Hero number */}
{hidden ? '$\u2022\u2022\u2022' : `$${amount}`}
{/* Subline */}
{daysToPayday} days to payday
{/* Divider */}
{/* Metrics strip */}
);
}
function Metric({ label, value }) {
return (
{label}
{value}
);
}
// ─────────────────────────────────────────────────────────────
// AccountCard
// ─────────────────────────────────────────────────────────────
function AccountCard({ bank, mark, color, currency, currencySymbol = '$', amount, delta, deltaPositive, lastSynced }) {
return (
{delta != null ? (
<>
this week
) : lastSynced ? `Last synced ${lastSynced}` : null}
);
}
// ─────────────────────────────────────────────────────────────
// TransactionRow
// ─────────────────────────────────────────────────────────────
function TransactionRow({ icon, color, name, meta, amount, positive, divider = true }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// InsightCard — gold-tinted observation card
// ─────────────────────────────────────────────────────────────
function InsightCard({ eyebrow, body, tone = 'neutral' }) {
const tones = {
neutral: { dot: 'var(--goji-accent)', glow: 'var(--color-glow-subtle)' },
warn: { dot: '#F2C94C', glow: 'rgba(242, 201, 76, 0.10)' },
good: { dot: '#6FCF97', glow: 'rgba(111, 207, 151, 0.10)' },
};
const t = tones[tone] || tones.neutral;
return (
);
}
// ─────────────────────────────────────────────────────────────
// BottomNav — pill capsule (4 tabs) + floating FAB on the right.
// Single glass indicator slides between tab slots, Apple-style.
// ─────────────────────────────────────────────────────────────
function BottomNav({ active, onChange, onFab, fabIcon = 'mic' }) {
const tabs = [
{ key: 'home', label: 'Home', icon: 'home' },
{ key: 'money', label: 'Money', icon: 'wallet' },
{ key: 'learn', label: 'Learn', icon: 'book' },
{ key: 'ai', label: 'Insights AI', icon: 'sparkle' },
];
const activeIndex = Math.max(0, tabs.findIndex(t => t.key === active));
const pillRef = React.useRef(null);
const [indicatorX, setIndicatorX] = React.useState(0);
const [ready, setReady] = React.useState(false);
const [chatOpen, setChatOpen] = React.useState(false);
const [scrollCompact, setScrollCompact] = React.useState(false);
React.useEffect(() => {
const onChat = (e) => setChatOpen(!!e.detail);
const onCompact = (e) => setScrollCompact(!!e.detail);
window.addEventListener('goji-chat-open', onChat);
window.addEventListener('goji-nav-compact', onCompact);
return () => {
window.removeEventListener('goji-chat-open', onChat);
window.removeEventListener('goji-nav-compact', onCompact);
};
}, []);
const hidden = chatOpen;
const compact = scrollCompact && !chatOpen;
React.useLayoutEffect(() => {
const pill = pillRef.current;
if (!pill) return;
const measure = () => {
const tabEls = pill.querySelectorAll('[data-tab]');
const target = tabEls[activeIndex];
if (!target) return;
const tabW = target.offsetWidth;
// Skip degenerate readings while the pill is collapsed (chat-open).
if (pill.offsetWidth === 0 || tabW === 0) return;
const indicatorW = 48;
const x = target.offsetLeft + (tabW - indicatorW) / 2;
setIndicatorX(x);
};
measure();
if (!ready) {
requestAnimationFrame(() => setReady(true));
}
// Re-measure once the pill finishes its expand transition after chat close.
const ro = new ResizeObserver(measure);
ro.observe(pill);
return () => ro.disconnect();
}, [activeIndex, ready]);
return (
{/* Backdrop fade — masks scrolling content behind the nav */}
{/* Sliding glass indicator */}
{tabs.map((t, idx) => (
))}
{/* Soft halo */}
{/* Mark cluster */}
{/* Orbiting petals */}
{[0, 1, 2, 3, 4].map(i => {
const angle = (i / 5) * Math.PI * 2 - Math.PI / 2;
const r = 26;
const x = Math.cos(angle) * r;
const y = Math.sin(angle) * r;
const size = i % 2 === 0 ? 3 : 2.5;
return (
);
})}
{/* Triquetra */}
{/* Text */}
All caught up.
Nothing else needs your attention.
{/* Dismiss */}
{interactive && depth === 0 && (
)}
{/* Position counter */}
{position != null && total != null && (
{position} / {total}
)}
{/* Tone glow accent — top-right radial */}
{/* Header: eyebrow + dismiss */}
{card.eyebrow || tone.label}
{interactive && depth === 0 && (
)}
{/* Body */}
{card.title}
{card.body && (
{card.body}
)}
{/* Right side: amount or CTA */}
{card.amount != null && (
0 ? '#6FCF97' : (card.tone === 'danger' ? '#EB5757' : 'var(--color-text-primary)')} />
{card.amountMeta && (
{card.amountMeta}
)}
)}
{card.cta && (
)}
{!card.amount && !card.cta && interactive && (
)}
{/* Position counter — bottom right corner, tabular muted */}
{position != null && total != null && (
{position} / {total}
)}
{title}
)}
{visible.map(card => {
const layer = layerFor(card);
const isDismissing = layer === -1;
const visibleLayer = isDismissing ? 0 : layer;
const y = isDismissing ? -120 : layer * STACK_OFFSET;
const scale = isDismissing ? 1.02 : Math.max(0.82, 1 - layer * STACK_SCALE);
const opacity = isDismissing
? 0
: layer < STACK_VISIBLE ? 1 - layer * 0.05
: 0;
const z = 100 - visibleLayer;
// 1-indexed position among active cards
const position = isDismissing ? null : (layer + 1);
return (
layer === 0 && onCardAction && onCardAction(card)}
style={{
position: 'absolute', top: 0, left: 20, right: 20,
transform: `translateY(${y}px) scale(${scale})`,
transformOrigin: 'top center',
opacity,
zIndex: z,
transition: 'transform 480ms cubic-bezier(0.34, 1.10, 0.64, 1), opacity 420ms cubic-bezier(0.22, 1, 0.36, 1)',
pointerEvents: layer === 0 && !isDismissing ? 'auto' : 'none',
cursor: layer === 0 ? 'pointer' : 'default',
willChange: 'transform, opacity',
}}>
);
})}
{/* Mark cluster — fixed-size square on the left */}
{/* Halo */}
{/* Orbiting petals */}
{[0, 1, 2, 3, 4].map(i => {
const angle = (i / 5) * Math.PI * 2 - Math.PI / 2;
const r = 32;
const x = Math.cos(angle) * r;
const y = Math.sin(angle) * r;
const size = i % 2 === 0 ? 3 : 2.5;
return (
);
})}
{/* Center mark — inline SVG, no asset path */}
{/* Text */}
All caught up.
Nothing else needs your attention.