Form

package showcase

import "github.com/axzilla/templui/components"

templ InputForm() {
	<div class="w-full max-w-sm">
		@components.FormItem() {
			@components.FormLabel(components.FormLabelProps{
				For: "email-form",
			}) {
				Email
			}
			@components.Input(components.InputProps{
				ID:          "email-form",
				Type:        "email",
				Placeholder: "m@example.com",
				HasError:    true,
			})
			@components.FormDescription() {
				Enter your email address for notifications.
			}
			@components.FormMessage(components.FormMessageProps{
				Variant: components.FormMessageVariantError,
			}) {
				Please enter a valid email address
			}
		}
	</div>
}

package components

import "github.com/axzilla/templui/utils"

type FormMessageVariant string

const (
	FormMessageVariantError FormMessageVariant = "error"
	FormMessageVariantInfo  FormMessageVariant = "info"
)

type FormItemProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type FormLabelProps struct {
	ID            string
	Class         string
	Attributes    templ.Attributes
	For           string
	DisabledClass string
}

type FormDescriptionProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type FormMessageProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Variant    FormMessageVariant
}

templ FormItem(props ...FormItemProps) {
	{{ var p FormItemProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("space-y-2", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ FormItemFlex(props ...FormItemProps) {
	{{ var p FormItemProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("items-center flex space-x-2", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ FormLabel(props ...FormLabelProps) {
	{{ var p FormLabelProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	@Label(LabelProps{
		ID:         p.ID,
		Class:      p.Class,
		Attributes: p.Attributes,
		For:        p.For,
	}) {
		{ children... }
	}
}

templ FormDescription(props ...FormDescriptionProps) {
	{{ var p FormDescriptionProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<p
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("text-sm text-muted-foreground", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</p>
}

templ FormMessage(props ...FormMessageProps) {
	{{ var p FormMessageProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<p
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"text-[0.8rem] font-medium",
				formMessageVariantClass(p.Variant),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</p>
}

func formMessageVariantClass(variant FormMessageVariant) string {
	switch variant {
	case FormMessageVariantError:
		return "text-red-500"
	case FormMessageVariantInfo:
		return "text-blue-500"
	default:
		return ""
	}
}