Checkbox

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

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

// Basic pairs a Checkbox with a Label via matching id/for.
component Basic() {
	<div class="flex items-center gap-2">
		<ui.Checkbox id="checkbox-basic-marketing"/>
		<ui.Label for="checkbox-basic-marketing">Send me marketing emails</ui.Label>
	</div>
}

package checkbox

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

// States renders Checkbox unchecked, checked, and disabled+checked —
// checked/disabled are bare boolean attributes forwarded through Checkbox's
// { attrs... } spread onto the native input, so browser :checked/:disabled
// truth drives the styling with no data-state plumbing.
component States() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-unchecked" aria-invalid="true"/>
			<ui.Label for="checkbox-states-unchecked">Unchecked</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-checked" checked/>
			<ui.Label for="checkbox-states-checked">Checked</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-disabled" checked disabled/>
			<ui.Label for="checkbox-states-disabled">Checked and disabled</ui.Label>
		</div>
	</div>
}

package checkbox

import (
	"github.com/gsxhq/gsxui/site/uirtl"
)

// Rtl mirrors shadcn's own checkbox-rtl demo: Field-composed checkboxes
// covering plain, described, disabled, and title+description shapes,
// translated to Arabic and wrapped in dir="rtl".
component Rtl() {
	<uirtl.FieldGroup dir="rtl" lang="ar" class="max-w-sm">
		<uirtl.Field orientation="horizontal">
			<uirtl.Checkbox id="checkbox-rtl-terms"/>
			<uirtl.Label for="checkbox-rtl-terms">قبول الشروط والأحكام</uirtl.Label>
		</uirtl.Field>
		<uirtl.Field orientation="horizontal">
			<uirtl.Checkbox id="checkbox-rtl-terms-2" checked/>
			<uirtl.FieldContent>
				<uirtl.FieldLabel for="checkbox-rtl-terms-2">قبول الشروط والأحكام</uirtl.FieldLabel>
				<uirtl.FieldDescription>بالنقر على هذا المربع، فإنك توافق على الشروط.</uirtl.FieldDescription>
			</uirtl.FieldContent>
		</uirtl.Field>
		<uirtl.Field orientation="horizontal" data-disabled="true">
			<uirtl.Checkbox id="checkbox-rtl-notify" disabled/>
			<uirtl.FieldLabel for="checkbox-rtl-notify">تفعيل الإشعارات</uirtl.FieldLabel>
		</uirtl.Field>
		<uirtl.FieldLabel>
			<uirtl.Field orientation="horizontal">
				<uirtl.Checkbox id="checkbox-rtl-notify-2"/>
				<uirtl.FieldContent>
					<uirtl.FieldTitle>تفعيل الإشعارات</uirtl.FieldTitle>
					<uirtl.FieldDescription>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</uirtl.FieldDescription>
				</uirtl.FieldContent>
			</uirtl.Field>
		</uirtl.FieldLabel>
	</uirtl.FieldGroup>
}