Select

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectPortal,
  SelectPositioner,
  SelectPopup,
  SelectItem,
  SelectItemList,
} from "@craftdotui/baseui/components/select";

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectItemList>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
          <SelectItem value="option3">Option 3</SelectItem>
        </SelectItemList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</Select>

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectPortal>
    <SelectPositioner>
      <SelectPopup>
        <SelectItemList>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
        </SelectItemList>
      </SelectPopup>
    </SelectPositioner>
  </SelectPortal>
</Select>

import { SelectGroup, SelectGroupLabel } from "@craftdotui/baseui/components/select";

<SelectItemList>
  <SelectGroup>
    <SelectGroupLabel>Fruits</SelectGroupLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectGroup>
  <SelectGroup>
    <SelectGroupLabel>Vegetables</SelectGroupLabel>
    <SelectItem value="carrot">Carrot</SelectItem>
    <SelectItem value="potato">Potato</SelectItem>
  </SelectGroup>
</SelectItemList>

<SelectTrigger size="sm">Small</SelectTrigger>
<SelectTrigger size="md">Medium</SelectTrigger>
<SelectTrigger size="lg">Large</SelectTrigger>