// Caliber brand primitives — logo, star glyph, iconography, misc atoms.
// Exports to window so other babel scripts can use them.
/* ---------- Caliber Star (brand glyph — exact SVG) ---------- */
function CalStar({ size = 28, grad = true, id = 'cs', style = {} }) {
const gid = id + '-g-' + Math.floor(Math.random() * 1e6);
return (
);
}
/* ---------- Caliber wordtext (letters only, no star) ---------- */
function CalWordText({ height = 28, color = '#111111', style = {} }) {
// "caliber" letterforms — clean version meant to pair with a separate star glyph.
// Source: Group 427321211.svg from brand kit.
return (
);
}
/* ---------- CalLogo — full lockup: animated star + wordtext ---------- */
function CalLogo({ size = 24, mono = false, color, animate = true }) {
const c = color || (mono ? '#fff' : '#111111');
const [hovered, setHovered] = React.useState(false);
return (
setHovered(true) : undefined}
onMouseLeave={animate ? () => setHovered(false) : undefined}
style={{
display: 'inline-flex', alignItems: 'center',
gap: size * 0.45, lineHeight: 1, cursor: animate ? 'pointer' : 'default',
userSelect: 'none',
}}
>
);
}
/* ---------- Generic icon set (stroke) ---------- */
const strokeIcon = (d, { size = 18, color = 'currentColor', stroke = 1.6 } = {}) => (
);
const Icon = {
search: (p) => strokeIcon(<>, p),
send: (p) => strokeIcon(<>, p),
check: (p) => strokeIcon(, p),
x: (p) => strokeIcon(<>, p),
arrowR: (p) => strokeIcon(<>, p),
arrowD: (p) => strokeIcon(<>, p),
chevR: (p) => strokeIcon(, p),
chevD: (p) => strokeIcon(, p),
plus: (p) => strokeIcon(<>, p),
minus: (p) => strokeIcon(, p),
mic: (p) => strokeIcon(<>, p),
briefcase: (p) => strokeIcon(<>, p),
users: (p) => strokeIcon(<>, p),
chat: (p) => strokeIcon(, p),
sparkles: (p) => strokeIcon(<>, p),
home: (p) => strokeIcon(<>, p),
calendar: (p) => strokeIcon(<>, p),
phone: (p) => strokeIcon(, p),
lock: (p) => strokeIcon(<>, p),
zap: (p) => strokeIcon(, p),
globe: (p) => strokeIcon(<>, p),
shield: (p) => strokeIcon(, p),
bolt: (p) => strokeIcon(, p),
heart: (p) => strokeIcon(, p),
filter: (p) => strokeIcon(, p),
doc: (p) => strokeIcon(<>, p),
play: (p) => strokeIcon(, p),
external:(p) => strokeIcon(<>, p),
dot: (p) => strokeIcon(, p),
pin: (p) => strokeIcon(<>, p),
};
/* ---------- LinkedIn square badge (used on candidate rows) ---------- */
function LinkedInBadge({ size = 14 }) {
return (
in
);
}
/* ---------- Avatar ---------- */
// deterministic hue from string
function strHue(s = '') {
let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
return h;
}
function Avatar({ name = '', size = 28, variant = 'gradient' }) {
const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
const h = strHue(name);
const bg = variant === 'gradient'
? `linear-gradient(135deg, hsl(${h} 78% 58%), hsl(${(h+40)%360} 72% 48%))`
: `hsl(${h} 60% 92%)`;
const color = variant === 'gradient' ? '#fff' : `hsl(${h} 55% 30%)`;
return (
{initials}
);
}
/* ---------- Company dot (brand squircle used in candidate rows) ---------- */
const COMPANY_PALETTE = {
Salesforce: { bg: '#00A1E0', fg: '#fff', glyph: '☁' },
Spotify: { bg: '#1DB954', fg: '#fff', glyph: '♬' },
Netflix: { bg: '#111', fg: '#E50914', glyph: 'N' },
Xero: { bg: '#13B5EA', fg: '#fff', glyph: 'X' },
Mastercard: { bg: '#FF5F00', fg: '#fff', glyph: '●' },
Canva: { bg: '#00C4CC', fg: '#fff', glyph: 'C' },
Atlassian: { bg: '#2684FF', fg: '#fff', glyph: 'A' },
Stripe: { bg: '#635BFF', fg: '#fff', glyph: 'S' },
Airbnb: { bg: '#FF5A5F', fg: '#fff', glyph: 'A' },
Paypal: { bg: '#003087', fg: '#fff', glyph: 'P' },
Intercom: { bg: '#0057FF', fg: '#fff', glyph: 'I' },
Shopify: { bg: '#95BF47', fg: '#fff', glyph: 'S' },
};
function CompanyDot({ name, size = 22 }) {
const c = COMPANY_PALETTE[name] || { bg: '#E5E7EB', fg: '#6B7280', glyph: name?.[0] || '?' };
return (
{c.glyph}
);
}
/* ---------- Counter (animates to target when in view) ---------- */
function useInView(ref, threshold = 0.3) {
const [inView, set] = React.useState(false);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) set(true); }, { threshold });
io.observe(el); return () => io.disconnect();
}, [ref, threshold]);
return inView;
}
function Counter({ to = 100, duration = 1400, prefix = '', suffix = '', decimals = 0, format }) {
const ref = React.useRef(null);
const inView = useInView(ref);
const [val, set] = React.useState(0);
React.useEffect(() => {
if (!inView) return;
let raf, start;
const tick = (ts) => {
if (!start) start = ts;
const p = Math.min(1, (ts - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
set(to * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [inView, to, duration]);
const display = format ? format(val) : `${prefix}${val.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${suffix}`;
return {display};
}
/* ---------- FadeIn scroll-triggered ---------- */
function FadeIn({ children, delay = 0, y = 18, className = '', style = {} }) {
const ref = React.useRef(null);
const inView = useInView(ref, 0.15);
return (
{children}
);
}
/* ---------- Placeholder agencies ---------- */
const PLACEHOLDER_AGENCIES = [
'Kārearea Talent',
'Harbour & Co.',
'Tuatara Search',
'Southerly Partners',
'Mānuka Recruiting',
'Fenix & Co.',
'Ridgeline Talent',
'Aurora Executive',
'Kauri Partners',
'Beacon Sourcing',
'Odyssey People',
'Silverfern Talent',
];
Object.assign(window, {
CalStar, CalLogo, CalWordText, Icon, LinkedInBadge, Avatar, CompanyDot,
Counter, FadeIn, useInView, PLACEHOLDER_AGENCIES,
});