// Himma shared primitives — wordmark, card, donut, sparkline, pill
// Official UAE Dirham currency symbol — drop-in replacement for the "AED" prefix.
// Inherits text color via currentColor; size scales relative to its em-height so it
// sits cleanly next to numbers at any text size.
function Dh({ size = '0.95em', color = 'currentColor', style = {} }) {
// SVG has aspect ratio 344.84 : 299.91 ≈ 1.15 : 1 (wider than tall).
return (
);
}
// Renders a string and replaces every "AED " (with trailing space) with the Dirham
// symbol. Use for prose where currency values are embedded (notifications, articles,
// etc.). Pass-through for non-strings so callers can wrap freely.
function dhText(text) {
if (typeof text !== 'string') return text;
if (!text.includes('AED ')) return text;
const parts = text.split('AED ');
const out = [parts[0]];
for (let i = 1; i < parts.length; i++) {
out.push(
{parts[i]}
);
}
return out;
}
// Wordmark: "himma" in serif + small Arabic "هِمّة" after it
function Wordmark({ color = '#F5F1EA', accent = '#D4B27A', showArabic = true, size = 22 }) {
return (
himma.
{showArabic && (
هِمّة
)}
);
}
// Card primitive
function Card({ children, style = {}, theme, padded = true, bg }) {
const t = theme;
return (
);
}
// Monospace number — large + small part
function BigNumber({ value, prefix, theme, accent, size = 44, decimals = 0 }) {
const [whole, dec] = Number(value).toFixed(decimals).split('.');
const whRendered = Number(whole).toLocaleString('en-AE');
// The currency mark sits in front of the number; defaults to the Dirham symbol.
const Mark = prefix
? {prefix}
: ;
return (
{Mark}
{whRendered}
{decimals > 0 && .{dec}}
);
}
// Donut chart — SVG, segments with gaps
function Donut({ segments, size = 130, stroke = 14, theme, centerLabel, centerValue }) {
const total = segments.reduce((s, x) => s + x.value, 0);
const r = (size - stroke) / 2;
const cx = size / 2, cy = size / 2;
const circ = 2 * Math.PI * r;
let offset = 0;
const gap = 2; // px of circumference
return (
{(centerLabel || centerValue) && (
{centerLabel &&
{centerLabel}
}
{centerValue &&
{centerValue}
}
)}
);
}
// Sparkline. Pass `responsive` to stretch to the parent's width via viewBox.
function Spark({ data, width = 100, height = 28, color = '#D4B27A', fill = true, dot = true, responsive = false }) {
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * (height - 4) - 2;
return [x, y];
});
const path = 'M ' + pts.map(p => p.join(' ')).join(' L ');
const area = path + ` L ${width} ${height} L 0 ${height} Z`;
const svgWidth = responsive ? '100%' : width;
return (
);
}
// Single-segment progress ring (for compact goal % glyphs)
function ProgressRing({ pct, size = 48, stroke = 4, color, track, label, sublabel }) {
const r = (size - stroke) / 2;
const cx = size / 2, cy = size / 2;
const circ = 2 * Math.PI * r;
const dash = circ * Math.max(0, Math.min(1, pct));
return (
{(label || sublabel) && (
{label &&
{label}
}
{sublabel &&
{sublabel}
}
)}
);
}
// Horizontal bar (stacked)
function StackedBar({ segments, height = 6, theme }) {
const total = segments.reduce((s, x) => s + x.value, 0);
return (