Country flag
betaFlat vector flag of a country (30 × 20, rounded, hairline outline) — the mark of a phone number by its dialling code.
Owner-approved 15 Oct 2026 in prototype proto/telefony-pin-puk (picks ACRM-515, ACRM-518: „vlajky úplně jednoduše, plošně vektorově", style reference nucleoapp.com/svg-flag-icons — own drawing, no Nucleo SVG copied, licence unclear). First use: /telefony identity column and drawer head (acrm !5089). Covers the 50 countries of DIAL_CODES; unknown code falls back to the grey phone tile. Before beta: move to packages/ui next to EntityMark, stories (all flags, sizes sm/lg, fallback), props. DialCodePicker („CZ +420 ▾") stays WITHOUT a flag — owner decision 15 Oct 2026. Registry repaired 17 Oct 2026 (review F1, F10): Flag/PhoneFlag now live in packages/ui/src/components/CountryFlag.tsx and are exported from @acrm/ui. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories. Beta 17 Oct 2026 (AD): moved to @acrm/ui next to EntityMark with stories Default · Variants · Sizes · States · Composition + 10 light/dark baselines (acrm !5124, 445b2e68b). AD 17 Oct 2026: a number without a dialling code is read as Czech (splitDial falls back to DEFAULT_DIAL +420, the same default as DialCodePicker and the phone mask) and shows the Czech flag — it is dialled as Czech; the grey phone tile stays only for a code outside DIAL_CODES. Canon after a dev check of /telefony with real data 1440/390 light/dark.
Used in 2 files · 2 areas · 2× — pages/TelefonyPage, pages/telefony
Default
export const Default = () => <PhoneFlag number="+420 603 123 456" />;Variants
export const Variants = () => (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
gap: 'var(--sp-4) var(--sp-5)',
maxWidth: 900,
}}
>
{FLAG_ISOS.map((iso) => (
<div key={iso} style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-2)' }}>
<Flag iso={iso} title={countryName(iso)} />
<span style={label}>
{iso} · {countryName(iso)}
</span>
</div>
))}
</div>
);Sizes
export const Sizes = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="default 20 × 13 — the mark of a list row">
<Flag iso="CZ" />
<PhoneFlag number="+420 603 123 456" />
</Labeled>
<Labeled text='lg 28 × 19 — drawer / record head (size="lg")'>
<Flag iso="CZ" size="lg" />
<PhoneFlag number="+420 603 123 456" size="lg" />
</Labeled>
</div>
);States
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="the code picks the country by the longest match (+421 Slovakia, +1 USA, +44 UK)">
<PhoneFlag number="+421 905 123 456" />
<PhoneFlag number="+1 212 555 0100" />
<PhoneFlag number="+44 20 7946 0958" />
</Labeled>
<Labeled text="white flags keep the hairline outline (Poland, Japan, Finland)">
<Flag iso="PL" />
<Flag iso="JP" />
<Flag iso="FI" />
</Labeled>
<Labeled text="unknown code — grey phone tile, no guessed flag">
<PhoneFlag number="+999 123 456" />
</Labeled>
<Labeled text="number without a code — splitDial assumes the default +420, so the Czech flag">
<PhoneFlag number="603 123 456" />
</Labeled>
</div>
);Composition
export const Composition = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)', maxWidth: 420 }}>
<Labeled text="identity column of /telefony — flag in the mark box, number next to it">
<div style={{ display: 'grid', gap: 'var(--sp-3)' }}>
{['+420 603 123 456', '+421 905 222 333', '+49 30 1234567'].map((n) => (
<div key={n} style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
<PhoneFlag number={n} />
<span style={{ font: 'var(--cell)', color: 'var(--fg)' }}>{n}</span>
</div>
))}
</div>
</Labeled>
<Labeled text="drawer head — lg mark">
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
<PhoneFlag number="+420 603 123 456" size="lg" />
<span style={{ font: 'var(--h3)', color: 'var(--fg)' }}>+420 603 123 456</span>
</div>
</Labeled>
</div>
);