Native Select

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption
} from '@immit/ui/native-select'

export function NativeSelectDemo() {
  return (
    <NativeSelect defaultValue="">
      <NativeSelectOption value="" disabled>
        Select a food
      </NativeSelectOption>
      <NativeSelectOptGroup label="Fruits">
        <NativeSelectOption value="apple">Apple</NativeSelectOption>
        <NativeSelectOption value="banana">Banana</NativeSelectOption>
        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Veggies">
        <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
        <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  )
}

import { NativeSelect, NativeSelectOption } from '@immit/ui/native-select'

export function NativeSelectSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <NativeSelect size="sm" defaultValue="sm">
        <NativeSelectOption value="sm">Small</NativeSelectOption>
      </NativeSelect>
      <NativeSelect defaultValue="default">
        <NativeSelectOption value="default">Default</NativeSelectOption>
      </NativeSelect>
      <NativeSelect defaultValue="disabled" disabled>
        <NativeSelectOption value="disabled">Disabled</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}