Repository navigation
v0.12.0
@kanzo-tech/ui
LanguagePicker, for a BCP 47 language tag. <LanguagePicker value={tag} onValueChange={setTag} />
is a Combobox whose rows name each language in its own language ("Español · es") and whose search
matches the name or the tag. Give it languages and the list is a closed set; leave it out and any
well-formed tag can be typed, and is reported spelled canonically (es-mx as es-MX) when the
input is left. inline draws only the input, for the trailing addon of an InputGroup. It reads
disabled, invalid and readOnly from an ancestor Field. Replace a hand-built language
Select or <input> with it; its three phrases are replaceable through translations.
useAsyncCollection and useDebouncedCommit, for a control whose options or owner are somewhere
else. useAsyncCollection({ load }) gives a Combobox a collection fetched as the user types:
the query is debounced, a request the user has typed past is aborted, and loading, empty and
error describe the last one. labelOf(value) keeps a chosen item's label after the next batch
replaces the one that offered it, which is what a multiple combobox drawing its own chips needs.
useDebouncedCommit(value, onCommit) is the draft a text control keeps while its owner is
expensive to write to: change on each keystroke, flush on blur, commit for a pick. Replace a
hand-written debounce-and-abort effect around useListCollection with the first, and a
setTimeout in an onChange with the second.
FieldHelper takes a tone. <FieldHelper tone="warning"> and tone="info" colour the helper
line for a message the value survives — a warning next to a field that is still valid — where it used
to be muted only. The default is unchanged. It stays the one message wired into the control's
aria-describedby; keep FieldError for what blocks, and put a second line in FieldDescription.
FieldGroup takes columns. <FieldGroup columns={2}> lays its fields out in two equal
columns (one to four), and columns="auto" fits as many as the width allows. A responsive count is
a class of your own: columns={1} className="sm:grid-cols-2". A field that should span the row
takes col-span-full. Omitted, the group stacks as before. Replace a
hand-written grid grid-cols-2 gap-4 around fields with it.
LocaleProvider and useLocale are on the root barrel. Ark's provider sets the locale and
dir every machine below it formats and orders by — FormatNumber, DatePicker, useFilter, the
number input — so a product that is not in en-US no longer needs a direct @ark-ui/react
dependency to set it. useLocale is Ark's useLocaleContext, under the name Shark UI gives it. The
words a component draws remain props with English defaults; the new page /docs/i18n lists them.
DatePicker and SegmentGroup now read their state from an ancestor Field. disabled,
invalid, readOnly and required set on the Field reach them the way they reach Input and
RadioGroup, so a <Field disabled> no longer leaves the calendar popover openable and the segments
clickable. Drop any disabled={…} / invalid={…} you were forwarding to them by hand; a prop set
on the control itself still wins.
@kanzo-tech/ai
The last hard-coded English in the suggestion fields is a prop. SuggestMark and CompleteMark
take offeringLabel — the accessible name while candidates or a ghost are on offer, which used to
be "Suggest different values" and "Accept suggestion" whatever label you passed. CompleteRoot
takes announcement, the sentence a screen reader hears when a suggestion lands, and
CompleteKeys takes acceptLabel and dismissLabel for the words after Tab and
Esc. Defaults are unchanged; a Spanish product passes all four once.