Native-select

// Package nativeselect holds the site's example gsx components for
// ui.NativeSelect (hyphen stripped: Go package names can't contain one,
// same as button-group's buttongroup / context-menu's contextmenu).
package nativeselect

import "github.com/gsxhq/gsxui/ui"

// Basic renders a NativeSelect with plain NativeSelectOption children, one
// pre-selected.
component Basic() {
	<ui.NativeSelect name="fruit" aria-invalid="true">
		<ui.NativeSelectOption value="apple">Apple</ui.NativeSelectOption>
		<ui.NativeSelectOption value="banana" selected>Banana</ui.NativeSelectOption>
		<ui.NativeSelectOption value="cherry">Cherry</ui.NativeSelectOption>
	</ui.NativeSelect>
}

package nativeselect

import "github.com/gsxhq/gsxui/ui"

// Groups renders a NativeSelect whose options are organized under
// NativeSelectGroup (native <optgroup>), plus one disabled option.
component Groups() {
	<ui.NativeSelect name="timezone">
		<ui.NativeSelectGroup label="Americas">
			<ui.NativeSelectOption value="est" selected>Eastern</ui.NativeSelectOption>
			<ui.NativeSelectOption value="pst">Pacific</ui.NativeSelectOption>
		</ui.NativeSelectGroup>
		<ui.NativeSelectGroup label="Europe">
			<ui.NativeSelectOption value="cet">Central</ui.NativeSelectOption>
			<ui.NativeSelectOption value="gmt" disabled>Greenwich (unavailable)</ui.NativeSelectOption>
		</ui.NativeSelectGroup>
	</ui.NativeSelect>
}

// Package nativeselect holds the site's example gsx components for
// ui.NativeSelect (hyphen stripped: Go package names can't contain one,
// same as button-group's buttongroup / context-menu's contextmenu).
package nativeselect

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own native-select-rtl demo: a status NativeSelect
// with a placeholder option and four status options, translated to Arabic
// and wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.NativeSelect name="status-rtl">
			<ui.NativeSelectOption value="">اختر الحالة</ui.NativeSelectOption>
			<ui.NativeSelectOption value="todo">مهام</ui.NativeSelectOption>
			<ui.NativeSelectOption value="in-progress">قيد التنفيذ</ui.NativeSelectOption>
			<ui.NativeSelectOption value="done">منجز</ui.NativeSelectOption>
			<ui.NativeSelectOption value="cancelled">ملغي</ui.NativeSelectOption>
		</ui.NativeSelect>
	</div>
}