A calendar day in three presentations

// apps/docs/examples/ui/date-field.tsx'use client';
import {useState} from 'react';
import {  composePresentationContext,  toIanaTimeZone,  type DateInputStatus,} from '@workspace/active-format';import {DateField} from '@workspace/active-ui/components/composed/date-field';import {  Field,  FieldDescription,  FieldError,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  NativeSelect,  NativeSelectOption,} from '@workspace/active-ui/components/primitives/native-select';
// A fixed "today", so every reader sees the same month.const TODAY = '2026-10-20';const ZONE = toIanaTimeZone('Europe/Amsterdam');
const PRESENTATIONS = {  en: composePresentationContext('en', {}, ZONE),  nl: composePresentationContext('nl', {}, ZONE),  'en, MDY': composePresentationContext(    'en',    {dateFormat: 'MDY_NUMERIC'},    ZONE,  ),} as const;
/** * A calendar day, typed in the reader's notation or picked from the * calendar. The value is always `YYYY-MM-DD`; the text follows the * presentation. Half-typed or impossible text keeps the last value and is * reported as a state, so it can never erase a stored date. */export default function DateFieldExample() {  const [presentation, setPresentation] =    useState<keyof typeof PRESENTATIONS>('en');  const [value, setValue] = useState('2026-03-09');  const [status, setStatus] = useState<DateInputStatus>('valid');  return (    <div className="grid w-full max-w-xs gap-6">      <Field>        <FieldLabel htmlFor="date-presentation">Presentation</FieldLabel>        <NativeSelect          id="date-presentation"          className="w-full"          value={presentation}          onChange={(event) =>            setPresentation(event.target.value as keyof typeof PRESENTATIONS)          }        >          {Object.keys(PRESENTATIONS).map((key) => (            <NativeSelectOption key={key} value={key}>              {key}            </NativeSelectOption>          ))}        </NativeSelect>      </Field>      <Field data-invalid={status === 'invalid' || undefined}>        <FieldLabel htmlFor="date-start">Start date</FieldLabel>        <DateField          id="date-start"          value={value}          onValueChange={setValue}          onStateChange={setStatus}          locale={PRESENTATIONS[presentation]}          today={TODAY}          openCalendarLabel="Choose a date"          aria-invalid={status === 'invalid' || undefined}          aria-describedby="date-start-state"        />        {status === 'invalid' ? (          <FieldError id="date-start-state">            That date does not exist.          </FieldError>        ) : (          <FieldDescription id="date-start-state">            Value: <code>{value || "''"}</code> · state: {status}          </FieldDescription>        )}      </Field>    </div>  );}