Reading a typed date

// apps/docs/examples/format/date-input.tsx'use client';
import {useId, useState} from 'react';
import {  classifyDateInput,  formatDateOnly,  getDateInputPattern,} from '@workspace/active-format';import {  DescriptionItem,  DescriptionList,} from '@workspace/active-ui/components/composed/description-list';import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {  NativeSelect,  NativeSelectOption,} from '@workspace/active-ui/components/primitives/native-select';
/** * A typed date in the reader's notation, read back as an ISO calendar day. * Impossible dates are invalid, never moved to the next valid day. */export default function DateInput() {  const inputId = useId();  const languageId = useId();  const [language, setLanguage] = useState('de');  const [text, setText] = useState('29.02.2028');  const pattern = getDateInputPattern(language);  const result = classifyDateInput(text, language);  return (    <div className="flex flex-col gap-4">      <div className="grid gap-3 sm:grid-cols-2">        <Field>          <FieldLabel htmlFor={languageId}>Language</FieldLabel>          <NativeSelect            id={languageId}            value={language}            onChange={(event) => setLanguage(event.target.value)}          >            {['de', 'nl', 'en', 'fr'].map((option) => (              <NativeSelectOption key={option} value={option}>                {option}              </NativeSelectOption>            ))}          </NativeSelect>        </Field>        <Field>          <FieldLabel htmlFor={inputId}>Date ({pattern})</FieldLabel>          <Input            id={inputId}            value={text}            placeholder={pattern}            onChange={(event) => setText(event.target.value)}          />        </Field>      </div>      <DescriptionList orientation="inline" columns={1}>        <DescriptionItem label="status">          <span className="font-mono" data-testid="date-status">            {result.status}          </span>        </DescriptionItem>        <DescriptionItem label="value">          <span className="font-mono">{result.value || '(none)'}</span>        </DescriptionItem>        <DescriptionItem label="read as">          <span suppressHydrationWarning>            {result.status === 'valid'              ? formatDateOnly(result.value, 'full', language)              : '(none)'}          </span>        </DescriptionItem>      </DescriptionList>    </div>  );}