Native Select

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

...

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

export default function NativeSelectDemoExample() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select status</NativeSelectOption>
      <NativeSelectOption value="todo">Todo</NativeSelectOption>
      <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
      <NativeSelectOption value="done">Done</NativeSelectOption>
      <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
    </NativeSelect>
  )
}

import {
  NativeSelect,
...

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

export default function NativeSelectGroupsExample() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select department</NativeSelectOption>
      <NativeSelectOptGroup label="Engineering">
        <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
        <NativeSelectOption value="backend">Backend</NativeSelectOption>
        <NativeSelectOption value="devops">DevOps</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Sales">
        <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
        <NativeSelectOption value="account-manager">Account Manager</NativeSelectOption>
        <NativeSelectOption value="sales-director">Sales Director</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Operations">
        <NativeSelectOption value="support">Customer Support</NativeSelectOption>
        <NativeSelectOption value="product-manager">Product Manager</NativeSelectOption>
        <NativeSelectOption value="ops-manager">Operations Manager</NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  )
}

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

...

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

export default function NativeSelectDisabledExample() {
  return (
    <NativeSelect disabled>
      <NativeSelectOption value="">Disabled</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
    </NativeSelect>
  )
}

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

...

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

export default function NativeSelectInvalidExample() {
  return (
    <NativeSelect aria-invalid="true">
      <NativeSelectOption value="">Error state</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
    </NativeSelect>
  )
}

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

...

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

const translations = {
  ar: {
    dir: 'rtl',
    options: [
      ['', 'اختر الحالة'],
      ['todo', 'مهام'],
      ['in-progress', 'قيد التنفيذ'],
      ['done', 'منجز'],
      ['cancelled', 'ملغي'],
    ],
  },
  he: {
    dir: 'rtl',
    options: [
      ['', 'בחר סטטוס'],
      ['todo', 'לעשות'],
      ['in-progress', 'בתהליך'],
      ['done', 'הושלם'],
      ['cancelled', 'בוטל'],
    ],
  },
  en: {
    dir: 'ltr',
    options: [
      ['', 'Select status'],
      ['todo', 'Todo'],
      ['in-progress', 'In Progress'],
      ['done', 'Done'],
      ['cancelled', 'Cancelled'],
    ],
  },
} as const

export default function NativeSelectRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const text = () => translations[language]
  return (
    <div class="grid gap-4">
      <select
        value={language}
        onChange={event => {
          language = event.currentTarget.value as keyof typeof translations
        }}
      >
        <option value="ar">Arabic (العربية)</option>
        <option value="he">Hebrew (עברית)</option>
        <option value="en">English</option>
      </select>
      <NativeSelect dir={text().dir}>
        {text().options.map(([value, label]) => (
          <NativeSelectOption value={value}>{label}</NativeSelectOption>
        ))}
      </NativeSelect>
    </div>
  )
}