scanfile/server/web/templui/components/inputotp/inputotp.templ

// templui component inputotp - version: v0.84.0 installed by templui v0.84.0
package inputotp

import (
	"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
	"strconv"
)

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Value      string
	Required   bool
	Name       string
	HasError   bool
}

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

type SlotProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Index       int
	Type        string
	Placeholder string
	Disabled    bool
	HasError    bool
}

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

templ InputOTP(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID + "-container" }
		}
		if p.Value != "" {
			data-value={ p.Value }
		}
		class={
			utils.TwMerge(
				"flex flex-row items-center gap-2 w-fit",
				p.Class,
			),
		}
		data-input-otp
		{ p.Attributes... }
	>
		<input
			type="hidden"
			if p.ID != "" {
				id={ p.ID }
			}
			if p.Name != "" {
				name={ p.Name }
			}
			if p.HasError {
				aria-invalid="true"
			}
			data-input-otp-value-target
			required?={ p.Required }
		/>
		{ children... }
	</div>
}

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

templ Slot(props ...SlotProps) {
	{{ var p SlotProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Type == "" {
		{{ p.Type = "text" }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class="relative"
		{ p.Attributes... }
	>
		<input
			type={ p.Type }
			inputmode="numeric"
			if p.Placeholder != "" {
				placeholder={ p.Placeholder }
			}
			maxlength="1"
			class={
				utils.TwMerge(
					// Base styles - keeping the specific OTP dimensions
					"w-10 h-12 text-center rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
					// Dark mode background
					"dark:bg-input/30",
					// Selection styles
					"selection:bg-primary selection:text-primary-foreground",
					// Placeholder
					"placeholder:text-muted-foreground",
					// Focus styles
					"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
					// Disabled styles
					"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
					// Error/Invalid styles
					"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
					utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
					p.Class,
				),
			}
			disabled?={ p.Disabled }
			if p.HasError {
				aria-invalid="true"
			}
			data-input-index={ strconv.Itoa(p.Index) }
			data-input-otp-slot
			{ p.Attributes... }
		/>
	</div>
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center text-muted-foreground text-xl",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		<span>-</span>
	</div>
}

templ Script() {
	<script defer src="/assets/js/inputotp.min.js"></script>
}