Radio

// Package radio holds the site's example gsx components for ui/radio.
package radio

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

// Basic groups three Radio inputs by a shared name — native radio grouping,
// no wrapper component needed.
component Basic() {
	<div class="flex flex-col gap-2">
		<div class="flex items-center gap-2">
			<ui.Radio id="radio-basic-card" name="radio-basic-plan" checked/>
			<ui.Label for="radio-basic-card">Card</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Radio id="radio-basic-paypal" name="radio-basic-plan"/>
			<ui.Label for="radio-basic-paypal">PayPal</ui.Label>
		</div>
	</div>
}

package radio

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

// States adds a disabled option to the group — disabled is a bare boolean
// attribute forwarded through Radio's { attrs... } spread.
component States() {
	<div class="flex flex-col gap-2">
		<div class="flex items-center gap-2">
			<ui.Radio id="radio-states-monthly" name="radio-states-billing" checked/>
			<ui.Label for="radio-states-monthly">Monthly</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Radio id="radio-states-yearly" name="radio-states-billing" aria-invalid="true"/>
			<ui.Label for="radio-states-yearly">Yearly</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Radio id="radio-states-lifetime" name="radio-states-billing" disabled/>
			<ui.Label for="radio-states-lifetime">Lifetime (unavailable)</ui.Label>
		</div>
	</div>
}

// Package radio holds the site's example gsx components for ui/radio.
package radio

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

// Rtl mirrors shadcn's own radio-group-rtl demo: three Field rows (default,
// comfortable — checked, compact), each pairing a Radio with a
// FieldLabel/FieldDescription via FieldContent, translated to Arabic and
// wrapped in dir="rtl".
component Rtl() {
	<ui.FieldGroup dir="rtl" lang="ar" class="w-fit">
		<ui.Field orientation="horizontal">
			<ui.Radio id="radio-rtl-default" name="radio-rtl-spacing"/>
			<ui.FieldContent>
				<ui.FieldLabel for="radio-rtl-default">افتراضي</ui.FieldLabel>
				<ui.FieldDescription>تباعد قياسي لمعظم حالات الاستخدام.</ui.FieldDescription>
			</ui.FieldContent>
		</ui.Field>
		<ui.Field orientation="horizontal">
			<ui.Radio id="radio-rtl-comfortable" name="radio-rtl-spacing" checked/>
			<ui.FieldContent>
				<ui.FieldLabel for="radio-rtl-comfortable">مريح</ui.FieldLabel>
				<ui.FieldDescription>مساحة أكبر بين العناصر.</ui.FieldDescription>
			</ui.FieldContent>
		</ui.Field>
		<ui.Field orientation="horizontal">
			<ui.Radio id="radio-rtl-compact" name="radio-rtl-spacing"/>
			<ui.FieldContent>
				<ui.FieldLabel for="radio-rtl-compact">مضغوط</ui.FieldLabel>
				<ui.FieldDescription>تباعد أدنى للتخطيطات الكثيفة.</ui.FieldDescription>
			</ui.FieldContent>
		</ui.Field>
	</ui.FieldGroup>
}