Field

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

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

// Basic renders a realistic small form: a FieldSet with a legend, wrapping a
// FieldGroup of two vertical Fields (label + control + description) split
// by a FieldSeparator.
component Basic() {
	<ui.FieldSet>
		<ui.FieldLegend variant="label">Profile</ui.FieldLegend>
		<ui.FieldGroup class="group/field-group" data-variant="outline">
			<ui.Field>
				<ui.FieldLabel for="name">Name</ui.FieldLabel>
				<ui.Input id="name" placeholder="Jamie Lee"/>
				<ui.FieldDescription>Your full name, as it appears on your profile.</ui.FieldDescription>
			</ui.Field>
			<ui.FieldSeparator/>
			<ui.FieldSeparator>or</ui.FieldSeparator>
			<ui.Field orientation="horizontal">
				<ui.FieldContent>
					<ui.FieldTitle>Horizontal field</ui.FieldTitle>
					<ui.FieldDescription>Content and title use the same canonical slots.</ui.FieldDescription>
				</ui.FieldContent>
			</ui.Field>
			<ui.Field orientation="responsive" data-disabled="true">
				<ui.FieldContent>
					<ui.FieldTitle>Responsive disabled field</ui.FieldTitle>
				</ui.FieldContent>
			</ui.Field>
			<ui.Field>
				<ui.FieldLabel for="bio">Bio</ui.FieldLabel>
				<ui.Textarea id="bio" placeholder="Tell us about yourself"/>
				<ui.FieldDescription>Shown to other members on your public profile.</ui.FieldDescription>
			</ui.Field>
		</ui.FieldGroup>
	</ui.FieldSet>
}

package field

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

// Invalid renders a Field in its error state: aria-invalid on the control
// plus a FieldError message, the same shape as ui/input's own "states"
// example (see site/examples/input/states.gsx).
component Invalid() {
	<ui.FieldSet>
		<ui.FieldLegend>Account</ui.FieldLegend>
		<ui.FieldGroup>
			<ui.Field data-invalid="true">
				<ui.FieldLabel for="email">Email</ui.FieldLabel>
				<ui.Input id="email" type="email" aria-invalid="true" value="not-an-email"/>
				<ui.FieldError>Enter a valid email address.</ui.FieldError>
			</ui.Field>
		</ui.FieldGroup>
	</ui.FieldSet>
}

package field

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

// Rtl keeps Basic's own profile-form shape (FieldSet/FieldLegend/
// FieldGroup/Field/FieldLabel/Input/FieldDescription/FieldSeparator/
// FieldContent/FieldTitle/Textarea) translated to Arabic. shadcn's own
// field-rtl demo is a payment form using Select and Checkbox, neither of
// which this directory's Basic composes; DEVIATED from rather than
// invented.
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.FieldSet>
			<ui.FieldLegend variant="label">الملف الشخصي</ui.FieldLegend>
			<ui.FieldGroup class="group/field-group" data-variant="outline">
				<ui.Field>
					<ui.FieldLabel for="name-rtl">الاسم</ui.FieldLabel>
					<ui.Input id="name-rtl" placeholder="جميلة أحمد"/>
					<ui.FieldDescription>اسمك الكامل، كما يظهر في ملفك الشخصي.</ui.FieldDescription>
				</ui.Field>
				<ui.FieldSeparator/>
				<ui.FieldSeparator>أو</ui.FieldSeparator>
				<ui.Field orientation="horizontal">
					<ui.FieldContent>
						<ui.FieldTitle>حقل أفقي</ui.FieldTitle>
						<ui.FieldDescription>يستخدم المحتوى والعنوان نفس الفتحات المتعارف عليها.</ui.FieldDescription>
					</ui.FieldContent>
				</ui.Field>
				<ui.Field orientation="responsive" data-disabled="true">
					<ui.FieldContent>
						<ui.FieldTitle>حقل متجاوب معطل</ui.FieldTitle>
					</ui.FieldContent>
				</ui.Field>
				<ui.Field>
					<ui.FieldLabel for="bio-rtl">نبذة</ui.FieldLabel>
					<ui.Textarea id="bio-rtl" placeholder="أخبرنا عن نفسك"/>
					<ui.FieldDescription>تظهر للأعضاء الآخرين في ملفك الشخصي العام.</ui.FieldDescription>
				</ui.Field>
			</ui.FieldGroup>
		</ui.FieldSet>
	</div>
}