NativeSelect

// apps/docs/examples/ui/native-select.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  NativeSelect,  NativeSelectOptGroup,  NativeSelectOption,} from '@workspace/active-ui/components/primitives/native-select';
/** * The browser's own select, styled like the other fields: on a phone it * opens the system picker. Options can be grouped; the small size suits a * toolbar. It is a plain `<select>`, so a form submits it as is. */export default function NativeSelectExample() {  const [country, setCountry] = useState('NL');  return (    <div className="grid w-full max-w-xs gap-6">      <Field>        <FieldLabel htmlFor="native-country">Country of residence</FieldLabel>        <NativeSelect          id="native-country"          name="country"          className="w-full"          value={country}          onChange={(event) => setCountry(event.target.value)}        >          <NativeSelectOptGroup label="Benelux">            <NativeSelectOption value="BE">Belgium</NativeSelectOption>            <NativeSelectOption value="LU">Luxembourg</NativeSelectOption>            <NativeSelectOption value="NL">Netherlands</NativeSelectOption>          </NativeSelectOptGroup>          <NativeSelectOptGroup label="Other">            <NativeSelectOption value="DE">Germany</NativeSelectOption>            <NativeSelectOption value="FR">France</NativeSelectOption>          </NativeSelectOptGroup>        </NativeSelect>        <FieldDescription>Value: {country}</FieldDescription>      </Field>      <Field>        <FieldLabel htmlFor="native-rows">Rows per page</FieldLabel>        <NativeSelect id="native-rows" size="sm" defaultValue="25">          <NativeSelectOption value="10">10</NativeSelectOption>          <NativeSelectOption value="25">25</NativeSelectOption>          <NativeSelectOption value="50">50</NativeSelectOption>        </NativeSelect>      </Field>      <Field data-disabled>        <FieldLabel htmlFor="native-currency">Currency</FieldLabel>        <NativeSelect id="native-currency" disabled defaultValue="EUR">          <NativeSelectOption value="EUR">Euro</NativeSelectOption>        </NativeSelect>      </Field>    </div>  );}