// shared.jsx — design tokens + UI-primitives + camera-helpers // Overgenomen uit de Claude-Design Verifi-mockups (iOS 26-stijl). const T = { blue: '#2563EB', blueDeep: '#1D4ED8', blueSoft: '#EFF6FF', blueTint: '#DBEAFE', orange: '#F97316', orangeSoft: '#FFF7ED', green: '#10B981', greenSoft: '#ECFDF5', red: '#EF4444', ink: '#0B1220', ink2: '#1F2937', body: '#374151', muted: '#6B7280', faint: '#9CA3AF', hair: 'rgba(15, 23, 42, 0.08)', bg: '#FFFFFF', bg2: '#F7F8FA', bg3: '#F2F4F7', r: 18, rSm: 12, rLg: 24, font: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif', mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace', }; function ScreenShell({ children, dark = false, style }) { return (
{children}
); } function StatusBar({ dark = false }) { const c = dark ? '#fff' : '#000'; const [time, setTime] = React.useState(() => { const d = new Date(); return `${d.getHours()}:${String(d.getMinutes()).padStart(2,'0')}`; }); React.useEffect(() => { const t = setInterval(() => { const d = new Date(); setTime(`${d.getHours()}:${String(d.getMinutes()).padStart(2,'0')}`); }, 30000); return () => clearInterval(t); }, []); return (
{time}
); } function BrandMark({ size = 44 }) { const id = 'bm-grad-' + size; return ( ); } // ─── Buttons ────────────────────────────────────────────────────── function PrimaryButton({ children, icon, style, dark, onClick, disabled, type = 'button' }) { return ( ); } function SecondaryButton({ children, icon, style, dark = false, onClick, disabled, type = 'button' }) { return ( ); } function TertiaryButton({ children, icon, style, dark = false, onClick, type = 'button' }) { return ( ); } function NavGlyphButton({ icon, onClick, style, dark = false, size = 38, ariaLabel }) { return ( ); } function GlassPill({ children, style, dark = false, tint }) { return (
{children}
); } function SupportChip({ label }) { return (
{label}
); } function StepBar({ step = 1, total = 4 }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } function Dot({ color = T.green, size = 8, pulse = false }) { return ( ); } // ─── Icons ─────────────────────────────────────────────────────── const Icon = { Close: ({ size = 18, c = '#fff' }) => (), Chevron: ({ size = 14, c = '#0B1220', dir = 'right' }) => (), Check: ({ size = 14, c = '#fff' }) => (), Shield: ({ size = 14, c = '#10B981' }) => (), Lock: ({ size = 14, c = '#10B981' }) => (), Flash: ({ size = 18, c = '#fff' }) => (), Sparkle: ({ size = 14, c = '#F97316' }) => (), Edit: ({ size = 14, c = '#6B7280' }) => (), Retake: ({ size = 18, c = '#0B1220' }) => (), Doc: ({ size = 16, c = '#fff' }) => (), Passport: ({ size = 26, c = '#0B1220' }) => (), IDCard: ({ size = 26, c = '#0B1220' }) => (), Licence: ({ size = 26, c = '#0B1220' }) => (), Person: ({ size = 26, c = '#0B1220' }) => (), Family: ({ size = 26, c = '#0B1220' }) => (), Search: ({ size = 16, c = '#6B7280' }) => (), Spinner: ({ size = 20, c = '#fff' }) => ( ), }; // ─── Flags (NL hoofdzaak) ──────────────────────────────────────── function Flag({ code = 'NL', size = 22 }) { const w = size * 1.4, h = size; const flags = { NL: <>, BE: <>, DE: <>, }; return ( {flags[code] || } ); } // ─── HeroIllustration (gebruikt op Login/Welcome) ───────────────── // Gestapelde NL paspoort + ID-kaart, zoals in het mockup. function HeroIllustration() { return (
{/* NL Passport burgundy */}
KONINKRIJK DER NEDERLANDEN
PASPOORT
{/* NL ID-kaart */}
ACHTERNAAM
VAN DER BERG
Sanne M.
GEB.DATUM
14·03·1991
); } // ─── Camera-helpers (donkere scan-schermen) ────────────────────── function CameraBg({ children, vignette = true }) { return (
{vignette &&
} {children}
); } function CameraTopBar({ docLabel = 'Document', countryCode = 'NL', onClose, onFlash }) { return (
}/> {docLabel} }/>
); } function CameraFooter({ status, subtext }) { return (
{status}
{subtext}
); } function DetectedCorners({ color = '#60A5FA', glow = false, style }) { const t = 3, len = 26; const corner = (rot, pos, key) => (
); return (
{corner(0, { left: 0, top: 0 }, 1)} {corner(90, { right: 0, top: 0 }, 2)} {corner(-90, { left: 0, bottom: 0 }, 3)} {corner(180, { right: 0, bottom: 0 }, 4)}
); } function DetectionPolygon({ color = '#60A5FA' }) { return ( ); } Object.assign(window, { T, ScreenShell, StatusBar, BrandMark, PrimaryButton, SecondaryButton, TertiaryButton, NavGlyphButton, GlassPill, SupportChip, StepBar, Dot, Icon, Flag, HeroIllustration, CameraBg, CameraTopBar, CameraFooter, DetectedCorners, DetectionPolygon, });