Switch

// Package switchctl holds the site's example gsx components for ui.Switch
// ("switch" is a Go keyword, so this package keeps its legacy name).
package switchctl

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

// Basic pairs an unchecked and a checked Switch, each with a Label.
component Basic() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-airplane"/>
			<ui.Label for="switch-basic-airplane">Airplane mode</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-wifi" checked/>
			<ui.Label for="switch-basic-wifi">Wi-Fi</ui.Label>
		</div>
	</div>
}

package switchctl

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

// States adds disabled variants — disabled is a bare boolean attribute
// forwarded through Switch's { attrs... } spread onto the native
// checkbox+role=switch input.
component States() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-states-off-disabled" disabled/>
			<ui.Label for="switch-states-off-disabled">Off, disabled</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-states-on-disabled" checked disabled/>
			<ui.Label for="switch-states-on-disabled">On, disabled</ui.Label>
		</div>
	</div>
}

package switchctl

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

// Rtl mirrors shadcn's own switch-rtl demo: a horizontal Field pairing a
// label+description with a Switch, translated to Arabic and wrapped in
// dir="rtl".
component Rtl() {
	<ui.Field orientation="horizontal" dir="rtl" lang="ar" class="max-w-sm">
		<ui.FieldContent>
			<ui.FieldLabel for="switch-rtl-focus-mode">المشاركة عبر الأجهزة</ui.FieldLabel>
			<ui.FieldDescription>يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.</ui.FieldDescription>
		</ui.FieldContent>
		<ui.Switch id="switch-rtl-focus-mode"/>
	</ui.Field>
}