Native Select

import { Globe } from "lucide-react"

import { NativeSelect, NativeSelectGroup, NativeSelectOption } from "@/components/ballmac/native-select"

export default function NativeSelectGroups() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <label htmlFor="tz" className="text-sm font-medium">
        Time zone
      </label>
      <NativeSelect id="tz" startIcon={<Globe />} defaultValue="Europe/Lisbon">
        <NativeSelectGroup label="Europe">
          <NativeSelectOption value="Europe/Lisbon">Lisbon (WET)</NativeSelectOption>
          <NativeSelectOption value="Europe/Helsinki">Helsinki (EET)</NativeSelectOption>
        </NativeSelectGroup>
        <NativeSelectGroup label="Asia">
          <NativeSelectOption value="Asia/Tokyo">Tokyo (JST)</NativeSelectOption>
          <NativeSelectOption value="Asia/Kolkata">Kolkata (IST)</NativeSelectOption>
        </NativeSelectGroup>
        <NativeSelectGroup label="Africa">
          <NativeSelectOption value="Africa/Nairobi">Nairobi (EAT)</NativeSelectOption>
        </NativeSelectGroup>
      </NativeSelect>
    </div>
  )
}

"use client"

import { NativeSelect, NativeSelectOption } from "@/components/ballmac/native-select"

export default function NativeSelectSizes() {
  return (
    <div className="grid w-full max-w-xs gap-3">
      {(["sm", "default", "lg"] as const).map((size) => (
        <NativeSelect key={size} size={size} aria-label={`Plan, ${size}`} defaultValue="team">
          <NativeSelectOption value="free">Free</NativeSelectOption>
          <NativeSelectOption value="team">Team</NativeSelectOption>
          <NativeSelectOption value="business">Business</NativeSelectOption>
        </NativeSelect>
      ))}
    </div>
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ballmac/button"
import { NativeSelect, NativeSelectOption } from "@/components/ballmac/native-select"

export default function NativeSelectForm() {
  const [value, setValue] = React.useState("")
  const [touched, setTouched] = React.useState(false)
  const invalid = touched && value === ""
  return (
    <form
      noValidate
      onSubmit={(e) => {
        e.preventDefault()
        setTouched(true)
      }}
      className="grid w-full max-w-xs gap-3"
    >
      <div className="grid gap-1.5">
        <label htmlFor="role" className="text-sm font-medium">
          Your role
        </label>
        <NativeSelect id="role" name="role" required placeholder="Select a role" value={value} onValueChange={setValue} aria-invalid={invalid || undefined} aria-describedby="role-hint">
          <NativeSelectOption value="design">Design</NativeSelectOption>
          <NativeSelectOption value="eng">Engineering</NativeSelectOption>
          <NativeSelectOption value="ops">Operations</NativeSelectOption>
        </NativeSelect>
        <p id="role-hint" className={invalid ? "text-xs text-destructive" : "text-xs text-muted-foreground"}>
          {invalid ? "Choose the role that fits you best." : "It decides which tips you see first."}
        </p>
      </div>
      <Button type="submit">Continue</Button>
    </form>
  )
}

"use client"

import * as React from "react"

import { NativeSelect, NativeSelectOption } from "@/components/ballmac/native-select"

/** The options arrive after a moment; the field shows a spinner and says it is busy, and can still be opened. */
export default function NativeSelectLoading() {
  const [cities, setCities] = React.useState<string[] | null>(null)
  React.useEffect(() => {
    const t = setTimeout(() => setCities(["Lisbon", "Osaka", "Nairobi", "Toronto"]), 2500)
    return () => clearTimeout(t)
  }, [])
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <label htmlFor="city" className="text-sm font-medium">
        City
      </label>
      <NativeSelect id="city" loading={cities === null} placeholder={cities ? "Choose a city" : "Loading cities"} defaultValue="">
        {cities?.map((c) => (
          <NativeSelectOption key={c} value={c}>
            {c}
          </NativeSelectOption>
        ))}
      </NativeSelect>
    </div>
  )
}

import { NativeSelect, NativeSelectOption } from "@/components/ballmac/native-select"

export default function NativeSelectDisabled() {
  return (
    <div className="grid w-full max-w-xs gap-3">
      <NativeSelect aria-label="Billing period, disabled" disabled defaultValue="yearly">
        <NativeSelectOption value="monthly">Monthly</NativeSelectOption>
        <NativeSelectOption value="yearly">Yearly</NativeSelectOption>
      </NativeSelect>
      <NativeSelect aria-label="Currency, invalid" aria-invalid="true" defaultValue="">
        <NativeSelectOption value="" disabled>
          Choose a currency
        </NativeSelectOption>
        <NativeSelectOption value="usd">US dollar</NativeSelectOption>
        <NativeSelectOption value="eur">Euro</NativeSelectOption>
      </NativeSelect>
      <NativeSelect aria-label="Languages" multiple rows={3} defaultValue={["en", "pt"]}>
        <NativeSelectOption value="en">English</NativeSelectOption>
        <NativeSelectOption value="pt">Portuguese</NativeSelectOption>
        <NativeSelectOption value="ja">Japanese</NativeSelectOption>
        <NativeSelectOption value="sw">Swahili</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}