One value, three notations

// apps/docs/examples/ui/number-field-notation.tsx'use client';
import {useState} from 'react';
import type {NumberInputStatus} from '@workspace/active-format';import {  DescriptionItem,  DescriptionList,} from '@workspace/active-ui/components/composed/description-list';import {NumberField} from '@workspace/active-ui/components/composed/number-field';import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  ToggleGroup,  ToggleGroupItem,} from '@workspace/active-ui/components/primitives/toggle-group';
const LANGUAGES = {en: 'English', nl: 'Dutch', de: 'German'} as const;type Language = keyof typeof LANGUAGES;
/** * One controlled field under three presentations. The field shows and reads * the notation of the presentation it receives; what travels to the * application is always canonical decimal text. Type `1234,5` under Dutch, * then switch to English: the value stays 1234.5 and the field rewrites it. */export default function NumberFieldNotation() {  const [language, setLanguage] = useState<Language>('nl');  const [value, setValue] = useState('1234.5');  const [status, setStatus] = useState<NumberInputStatus>('valid');  return (    <div className="flex max-w-sm flex-col gap-4">      <ToggleGroup        aria-label="Presentation"        variant="outline"        size="sm"        spacing={0}        value={[language]}        onValueChange={(next: string[]) => {          const chosen = next[0];          if (chosen === 'en' || chosen === 'nl' || chosen === 'de') {            setLanguage(chosen);          }        }}      >        {(Object.keys(LANGUAGES) as Language[]).map((code) => (          <ToggleGroupItem key={code} value={code}>            {LANGUAGES[code]}          </ToggleGroupItem>        ))}      </ToggleGroup>      <Field>        <FieldLabel htmlFor="notation-amount">Annual salary</FieldLabel>        <NumberField          id="notation-amount"          locale={language}          value={value}          onValueChange={setValue}          onStateChange={(next) => setStatus(next)}          decimals={2}        />        <FieldDescription>Up to two decimals.</FieldDescription>      </Field>      <DescriptionList orientation="inline" columns={1}>        <DescriptionItem label="Value received">          <span className="font-mono" data-number-value>            {value === '' ? "'' (empty)" : `'${value}'`}          </span>        </DescriptionItem>        <DescriptionItem label="Status">          <span className="font-mono" data-number-status>            {status}          </span>        </DescriptionItem>      </DescriptionList>    </div>  );}