KQ-1665 · FORMAT/SAMPLER

Format Sampler

Locale and region settings beside a sample invoice that prints them: every weekday, day, month, year, hour, minute, separator and currency mark is a slot, and changing a setting rolls each changed slot to its new form in place — digits on counter wheels on springs.snap, words out on the exit ease and in on snap, widths gliding on springs.glide so neighbours slide aside — with an accent wash fading behind each, while the due day's highlight glides across the week strip on snap. Language, time zone, dates and numbers are type-ahead comboboxes (arrows, Enter, Escape) and time and week start are radio groups. Formats come from hand-written locale tables, so server and browser print the same sample.

KQ-1665 · FORMAT/SAMPLER

Language and region

How Coldbrook prints dates, times and amounts on invoices, exports and email.

english (united states) · eastern time · change a setting

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/format-sampler

Props

locales: SamplerLocale[]; default defaultSamplerLocales; The languages on offer, each a full format table: month and weekday names, date and time patterns, 12/24-hour, day periods, decimal and group marks, currency placement, week start and the word between date and time.
timezones: SamplerZone[]; default defaultSamplerZones; The time zones on offer: { id, label, offset } with the offset in minutes on the sample's dates.
value / defaultValue: SamplerSettings; default — / defaultSamplerSettings; { locale, timeZone, date, time, number, weekStart }, controlled or initial; the initial value is also what Discard returns to until a save.
onValueChange: (settings: SamplerSettings) => void; default —; Fires with every setting after any change, including a discard.
onChange: (field, value, settings) => void; default —; Fires with the field that changed, its new value and every setting.
onSave: (settings: SamplerSettings) => void | Promise<unknown>; default —; Save was pressed. A promise shows it saving; a rejection keeps every choice and says so.
sample: SamplerSample; default defaultSamplerSample; The invoice the sample prints: { from, reference, amount, currency, due, issued }, times in UTC ms.
detectedLocale: string | null; default —; The visitor's locale, offered as a one-click suggestion when it differs from the chosen one. Omit to read the browser's language after mount; null offers nothing.
status: "ready" | "loading" | "error"; default "ready"; Whether the settings have loaded; loading shows skeleton fields, error offers Try again.
onRetry: () => void; default —; Try again was pressed after the settings failed to load.
sampleStyle: "card" | "line" | "receipt"; default "card"; How the sample is printed: an invoice card with a week strip, one sentence at reading size, or mono receipt rows with dotted leaders.
density: "compact" | "regular" | "roomy"; default "regular"; Field heights, gaps and type size.
accent: "cobalt" | "signal" | "amber" | "graphite" | string; default "cobalt"; The change wash, focused fields, the week highlight and Save: a named token or any CSS colour.
title: string; default "Language and region"; The heading and the surface's accessible name.
height: number; default 540; Height of the surface, px; the body scrolls inside with the sample pinned beside the form.
disabled: boolean; default false; Every field is read-only and Save does nothing; the surface dims.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
locales	SamplerLocale[]	defaultSamplerLocales	The languages on offer, each a full format table: month and weekday names, date and time patterns, 12/24-hour, day periods, decimal and group marks, currency placement, week start and the word between date and time.
timezones	SamplerZone[]	defaultSamplerZones	The time zones on offer: { id, label, offset } with the offset in minutes on the sample's dates.
value / defaultValue	SamplerSettings	— / defaultSamplerSettings	{ locale, timeZone, date, time, number, weekStart }, controlled or initial; the initial value is also what Discard returns to until a save.
onValueChange	(settings: SamplerSettings) => void	—	Fires with every setting after any change, including a discard.
onChange	(field, value, settings) => void	—	Fires with the field that changed, its new value and every setting.
onSave	(settings: SamplerSettings) => void \| Promise<unknown>	—	Save was pressed. A promise shows it saving; a rejection keeps every choice and says so.
sample	SamplerSample	defaultSamplerSample	The invoice the sample prints: { from, reference, amount, currency, due, issued }, times in UTC ms.
detectedLocale	string \| null	—	The visitor's locale, offered as a one-click suggestion when it differs from the chosen one. Omit to read the browser's language after mount; null offers nothing.
status	"ready" \| "loading" \| "error"	"ready"	Whether the settings have loaded; loading shows skeleton fields, error offers Try again.
onRetry	() => void	—	Try again was pressed after the settings failed to load.
sampleStyle	"card" \| "line" \| "receipt"	"card"	How the sample is printed: an invoice card with a week strip, one sentence at reading size, or mono receipt rows with dotted leaders.
density	"compact" \| "regular" \| "roomy"	"regular"	Field heights, gaps and type size.
accent	"cobalt" \| "signal" \| "amber" \| "graphite" \| string	"cobalt"	The change wash, focused fields, the week highlight and Save: a named token or any CSS colour.
title	string	"Language and region"	The heading and the surface's accessible name.
height	number	540	Height of the surface, px; the body scrolls inside with the sample pinned beside the form.
disabled	boolean	false	Every field is read-only and Save does nothing; the surface dims.
className	string	—	Classes for the outer surface.