init go project

internal/ui/components/inputotp/inputotp.templ

@@ -0,0 +1,181 @@
+// templui component inputotp - version: v0.101.0 installed by templui v0.101.0
+// 📚 Documentation: https://templui.io/docs/components/input-otp
+package inputotp
+
+import (
+	"git.juancwu.dev/juancwu/budgething/internal/utils"
+	"strconv"
+)
+
+type Props struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
+	Value      string
+	Name       string
+	Form       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-tui-inputotp-value={ p.Value }
+		}
+		if p.Form != "" {
+			form={ p.Form }
+		}
+		class={
+			utils.TwMerge(
+				"flex flex-row items-center gap-2 w-fit",
+				p.Class,
+			),
+		}
+		data-tui-inputotp
+		{ p.Attributes... }
+	>
+		<input
+			type="hidden"
+			if p.ID != "" {
+				id={ p.ID }
+			}
+			if p.Name != "" {
+				name={ p.Name }
+			}
+			if p.HasError {
+				aria-invalid="true"
+			}
+			data-tui-inputotp-value-target
+		/>
+		{ 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-tui-inputotp-index={ strconv.Itoa(p.Index) }
+			data-tui-inputotp-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 nonce={ templ.GetNonce(ctx) } src={ "/assets/js/inputotp.min.js?v=" + utils.ScriptVersion }></script>
+}